@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/ibm-plex-mono.ttf') format('truetype')}
:root{color-scheme:dark;--mono:'IBM Plex Mono',monospace;--orange:#e5a169}*{box-sizing:border-box}body{margin:0;background:#101619;color:#e9ece8;font-family:system-ui,sans-serif;overflow:hidden}button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}[hidden]{display:none!important}
#experience{height:100svh;min-height:280px;position:relative;isolation:isolate;overflow:hidden}#battlefield{position:absolute;width:100%;height:100%;inset:0;image-rendering:pixelated;cursor:crosshair;touch-action:manipulation}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,#050d1148 100%),linear-gradient(180deg,#07101528,transparent 20%,transparent 80%,#07101555);z-index:1}.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.06;background:repeating-linear-gradient(0deg,transparent 0 2px,#0c1215 2px 3px);mix-blend-mode:multiply}
.bottom{position:absolute;z-index:3;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);transition:opacity .4s;max-width:calc(100% - 20px)}.controls{display:flex;gap:7px;align-items:center;padding:8px 12px;background:#151515d9;border:1px solid #cacaca25;box-shadow:0 5px 24px #07070736;border-radius:9px;backdrop-filter:blur(14px);width:max-content;max-width:100%}.icon-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;color:#999999;transition:color .2s,background .2s;border-radius:5px;flex-shrink:0}.icon-button:hover{color:#f1ece4;background:#dedede0c}.icon-button.active{color:#e0bb8f}.play-button{width:32px;height:32px;background:#c4c4c40d;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#dddddd;flex-shrink:0}.play-button svg{width:15px;height:15px;stroke-width:2}.play-button .play-icon{fill:currentColor;stroke:none;width:13px}.timecode{font:10px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.6px;color:#bababa;width:47px;margin:0 5px;flex-shrink:0}.control-separator{height:16px;width:1px;background:#b1b1b126;margin:0 4px;flex-shrink:0}.text-button{width:33px;height:34px;background:none;font:12px var(--mono);color:#bdbdbd;flex-shrink:0}.text-button:hover{color:var(--orange)}.intensity-button{gap:3px;align-items:flex-end;padding:11px 8px}.intensity-button span{display:block;width:3px;height:7px;background:#d2b28a}.intensity-button span:nth-child(2){height:11px}.intensity-button span:nth-child(3){height:16px;background:#6f6f6f}.cinematic .ui{opacity:0;pointer-events:none}.cinematic .vignette{background:linear-gradient(180deg,#070d10 0 5%,transparent 5% 95%,#070d10 95% 100%)}.exit-cinema{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));right:24px;z-index:6;background:#171717d9;border:1px solid #8383834d;opacity:.45}.exit-cinema:hover{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{position:absolute;inset:0;z-index:20;background:#111b20;display:flex;align-items:center;justify-content:center;transition:opacity .65s}.loading i{width:70px;height:1px;background:linear-gradient(90deg,transparent,#bd9164,transparent);animation:load 1s infinite}@keyframes load{50%{opacity:.3;transform:scaleX(.5)}}
@media(max-width:600px){.bottom{bottom:max(20px,env(safe-area-inset-bottom))}.controls{padding:7px 8px;gap:3px;border-radius:7px}.icon-button{width:32px;height:34px}.timecode{font-size:9px;width:38px;margin:0 2px;letter-spacing:0}.control-separator{margin:0 2px}.text-button{width:28px}.cinematic .vignette{background:linear-gradient(180deg,#070d10 0 3%,transparent 3% 97%,#070d10 97% 100%)}}
@media(max-width:370px){.controls{gap:1px;padding:6px}.icon-button{width:29px}.timecode{width:32px;font-size:8px}.control-separator{margin:0 1px}.text-button{width:26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loading i{animation:none}}
.engine-panel{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:410px;max-width:calc(100vw - 24px);background:#101b20f5;border:1px solid #88888845;border-radius:12px;backdrop-filter:blur(20px);box-shadow:0 16px 70px #0006;overflow:auto;max-height:calc(100svh - 110px);color:#d3d3d3}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 18px 8px;font:11px var(--mono);letter-spacing:2px;color:#d9c4a6}.panel-heading small{margin-left:12px;font-size:7px;letter-spacing:1px;color:#868686}.panel-heading button{font-size:22px;width:28px;height:28px}.panel-tabs{display:flex;margin:0 18px;border-bottom:1px solid #87878733}.panel-tabs button{flex:1;background:none;padding:13px 0;font-size:11px;color:#939393;border-bottom:2px solid transparent}.panel-tabs button[aria-selected=true]{color:#e1c29a;border-color:#bc9972}.panel-content{padding:15px 18px}.scene-list{display:grid;gap:6px}.scene-option{display:flex;gap:12px;align-items:center;text-align:left;background:#b5b5b505;border:1px solid transparent;padding:9px 11px;border-radius:6px;color:#c2c2c2;width:100%}.scene-option:hover{background:#c0c0c00c}.scene-option[aria-pressed=true]{border-color:#a68d6459;background:#a68d6413;color:#efdfc6}.scene-preview{width:48px;height:34px;image-rendering:pixelated;flex-shrink:0;border-radius:2px}.scene-option strong{font-size:11px;font-weight:500;display:block}.scene-option small{display:block;font:7px var(--mono);letter-spacing:1.4px;margin-top:4px;color:#939393}.scene-option .scene-index{margin-left:auto;font:9px var(--mono);color:#8f8f8f}.panel-hint{font-size:10px;line-height:1.85;color:#979797;margin:13px 0 3px}.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:14px;border-top:1px solid #87878724;font-size:10px}.toggle-row small{display:block;color:#828282;font-size:8px;margin-top:5px}.toggle-row input{accent-color:#cba87e;width:16px;height:16px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:47px;font-size:11px;border-bottom:1px solid #91919117}.setting-row select{width:155px;font:11px system-ui;color:#cdcdcd;background:#242424;border:1px solid #75757550;border-radius:5px;padding:8px}.setting-control{display:flex;align-items:center;gap:8px;color:#b9aa91;font-size:10px}.object-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.object-grid button{height:65px;border:1px solid #9a9a9a24;background:#aaaaaa05;border-radius:5px;color:#9d9d9d;font-size:24px}.object-grid button span{display:block;font-size:10px;margin-top:4px}.object-grid button[aria-pressed=true]{border-color:#bb946e7a;background:#bb946e14;color:#e4c29a}.object-grid button:hover{background:#b6b6b614}.layout-actions{display:flex;gap:8px;margin-top:14px}.layout-actions button{flex:1;background:#252525;color:#c2c2c2;border:1px solid #8484843b;padding:9px;border-radius:4px;font-size:10px}.layout-actions button:disabled{opacity:.35;cursor:default}.panel-note{font-size:8px;color:#787878;margin:12px 0 0}.panel-bottom{display:flex;justify-content:space-between;border-top:1px solid #87878730;padding:13px 18px;gap:10px}.panel-bottom button{background:none;padding:0;color:#a2a2a2;font-size:9px}.panel-bottom button:hover{color:#e5bd90}.panel-status{font-size:10px;color:#cbb392;margin:0;padding:0 18px 13px}.controls #library.active{background:#a5896821;color:#d8b992}.controls{gap:5px}.controls .control-separator:nth-of-type(3){display:none}
@media(max-width:600px){.controls{gap:2px;padding:7px}.controls .icon-button{width:31px}.controls .control-separator{margin:0 1px}.engine-panel{width:370px;max-height:calc(100svh - 110px)}.panel-content{padding:12px 15px}.panel-heading{padding-left:15px;padding-right:15px}.panel-tabs{margin:0 15px}.scene-option{padding:7px 9px}.panel-bottom{padding:12px 15px}.timecode{width:34px}}
@media(max-width:370px){.controls{gap:1px;padding:5px}.controls .icon-button{width:28px}.timecode{display:none}.control-separator{display:none}.text-button{width:27px}.play-button{width:29px}}

/* Outbreak uses authored material values, without a global grain or green grade. */
.art-directed .grain{display:none}.art-directed:not(.cinematic) .vignette{background:radial-gradient(ellipse at 51% 40%,transparent 48%,#0d101428 100%)}

.studio-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 12px;margin:0 0 10px;border:1px solid #707070;border-radius:8px;color:#e1ddc8;text-decoration:none;background:#2d2d2d;font-size:12px}.studio-entry:focus-visible{outline:2px solid #e1ddc8;outline-offset:2px}

/* One-depth live dock: every section is visible, with a reserved canvas viewport. */
.bottom{bottom:8px;width:min(1160px,calc(100% - 24px));display:flex;flex-direction:column;align-items:center;gap:7px;}
.engine-panel{position:relative;left:auto;bottom:auto;transform:none;width:100%;max-height:none;overflow:visible;border-radius:12px;background:rgba(22,22,22,.96);}
.engine-panel .panel-heading{padding:8px 12px;min-height:40px;gap:14px;}
.panel-heading label{display:flex;align-items:center;gap:12px;font-size:11px;color:#c1c1c1;}
.panel-heading select{max-width:280px;background:#2c2c2c;color:#edf1ed;border:1px solid #4d4d4d;border-radius:5px;padding:6px;font:inherit;font-size:12px;}
.panel-heading a{margin-left:auto;color:#c2c2c2;font-size:12px;text-decoration:none;}
#pane-environment{display:flex;flex-wrap:wrap;gap:8px 18px;padding:7px 12px;border-bottom:1px solid #3a3a3a;}
#pane-environment .setting-row{padding:0;border:0;gap:8px;min-height:30px;font-size:11px;}
#pane-environment select{min-width:85px;max-width:130px;font-size:11px;padding:5px;}
#pane-environment .panel-hint,#pane-objects .panel-note{display:none;}
#pane-objects{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:8px 12px;}
.object-grid{display:flex;flex-wrap:wrap;gap:5px;}
.object-grid button{height:32px;min-width:65px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:4px 9px;font-size:15px;border-radius:5px;}
.object-grid button span{font-size:11px;margin:0;}
#placementHint{grid-column:1;margin:0;font-size:10px;line-height:1.4;}
.layout-actions{grid-column:2;grid-row:1 / 3;display:flex;align-items:center;gap:5px;}
.layout-actions button{padding:7px;font-size:10px;}
.panel-bottom{padding:4px 12px;justify-content:flex-end;gap:16px;}
.panel-bottom button{font-size:10px;padding:3px;}
.panel-status{margin:0;padding:5px 12px;}
#battlefield{height:calc(100% - var(--dock-height,0px));bottom:auto;}
@media(max-width:700px){.bottom{width:calc(100% - 12px);bottom:5px;gap:4px}.engine-panel{width:100%}.engine-panel .panel-heading{padding:5px 8px;gap:5px}.panel-heading label{font-size:10px;gap:6px}.panel-heading select{max-width:185px;font-size:11px}.panel-heading a{font-size:10px}#pane-environment{gap:3px 9px;padding:5px 8px}#pane-environment .setting-row{font-size:10px;gap:4px;min-height:27px}#pane-environment select{min-width:60px;max-width:105px;padding:4px;font-size:10px}#pane-objects{padding:5px 8px;grid-template-columns:1fr}.object-grid{gap:4px}.object-grid button{min-width:54px;height:29px;padding:3px 6px;font-size:13px}.object-grid button span{font-size:10px}.layout-actions{grid-column:1;grid-row:auto;justify-content:flex-end}.layout-actions button{padding:3px 7px}.panel-bottom{padding:3px 8px}.panel-heading .icon-button{width:26px;height:26px}#placementHint{font-size:9px}.controls{max-width:100%}}
@media(max-height:550px){.bottom{gap:2px}.panel-bottom,#placementHint,.layout-actions{display:none}#pane-environment{padding:3px 10px}#pane-objects{padding:4px 10px}.engine-panel .panel-heading{padding:3px 10px;min-height:29px}}

.layout-actions{margin-top:0;white-space:nowrap}.layout-actions button{flex:none}

.scene-usage{padding:6px 18px;border-top:1px solid #ffffff12;font-size:10px;color:#999}.scene-usage summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}.scene-usage summary::after{content:'⌄'}.scene-usage summary span{margin-left:auto;font-variant-numeric:tabular-nums;color:#c6c6c6}.scene-usage p{margin:7px 0 2px;line-height:1.6;max-width:75ch}.scene-usage[open] summary::after{content:'⌃'}@media(max-width:700px){.scene-usage{padding:4px 8px;font-size:9px}}