:root{--bg: #060609;--surface: rgba(10, 12, 22, .88);--border: rgba(255, 255, 255, .07);--text: rgba(200, 205, 218, .8);--text-dim: rgba(160, 168, 190, .4);--text-bright: rgba(235, 238, 248, .92);--accent: #5a8fbf;--accent-warm: #c49060;--accent-cool: #608fb8;--inset: 26px;--font-mono: "DM Mono", "SF Mono", "Cascadia Code", monospace;--font-sans: "Instrument Sans", "Inter", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;position:relative}canvas{display:block}.viewport-frame{position:fixed;inset:0;pointer-events:none;z-index:50;border:1px solid rgba(255,255,255,.04)}.viewport-frame:before,.viewport-frame:after{content:"";position:absolute;width:24px;height:24px;border-color:#ffffff14;border-style:solid}.viewport-frame:before{top:40px;left:0;border-width:0 0 1px 1px}.viewport-frame:after{top:40px;right:0;border-width:0 1px 1px 0}.scene-tabs{position:fixed;top:0;left:0;right:0;display:flex;align-items:stretch;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);height:36px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.scene-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:none;border-right:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;transition:color .3s,background .3s;position:relative;padding:0 12px}.scene-tab:last-child{border-right:none}.scene-tab:hover{color:var(--text);background:#ffffff04}.scene-tab.active{color:var(--text-bright)}.scene-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--tab-accent, var(--accent));opacity:.7}.scene-tab .key-hint{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid var(--border);border-radius:2px;font-size:8px;color:var(--text-dim);line-height:1;opacity:.6}.scene-tab .tab-dot{width:5px;height:5px;border-radius:50%;background:var(--tab-accent, var(--accent));opacity:.3;transition:opacity .3s}.scene-tab:hover .tab-dot,.scene-tab.active .tab-dot{opacity:.8}.panel-surface{background:var(--surface);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border)}.info-panel{position:fixed;bottom:var(--inset);left:var(--inset);width:300px;z-index:100;font-size:11px;line-height:1.65;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s;background:var(--surface);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border)}.info-panel.collapsed{max-height:32px;cursor:pointer}.info-panel-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border);min-height:32px}.info-panel h3{font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0}.info-panel .toggle{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:10px;padding:2px 4px;transition:color .2s}.info-panel .toggle:hover{color:var(--text)}.info-panel-body{padding:10px 12px}.info-panel p{color:var(--text-dim);margin-bottom:5px;font-size:10px;line-height:1.7}.info-panel p b{color:var(--text);font-weight:500}.info-panel kbd{display:inline-block;padding:0 4px;background:#ffffff08;border:1px solid var(--border);font-size:9px;color:var(--text-dim);font-family:var(--font-mono);line-height:1.5}.lil-gui{--background-color: rgba(10, 12, 22, .88) !important;--text-color: rgba(200, 205, 218, .7) !important;--title-background-color: rgba(10, 12, 22, .92) !important;--title-text-color: rgba(200, 205, 218, .85) !important;--widget-color: rgba(255, 255, 255, .05) !important;--hover-color: rgba(255, 255, 255, .07) !important;--focus-color: rgba(90, 143, 191, .2) !important;--number-color: #7a9ab8 !important;--string-color: #b8907a !important;font-family:var(--font-mono)!important;font-size:10px!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border)!important;--padding: 5px !important;position:fixed!important;bottom:var(--inset)!important;right:var(--inset)!important;top:auto!important;width:240px!important}.lil-gui .title{font-family:var(--font-mono)!important;font-weight:400!important;letter-spacing:.1em!important;font-size:10px!important;text-transform:uppercase!important}.mult-result{position:fixed;bottom:60px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:18px;font-weight:400;letter-spacing:.12em;color:var(--text-bright);pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:200;padding:6px 16px;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.mult-result.visible{opacity:1}.metric-readout{position:fixed;bottom:calc(var(--inset) + 190px);right:var(--inset);width:240px;z-index:100;font-size:11px;font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-dim);background:var(--surface);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border);padding:10px 12px}.metric-readout .label{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:3px}.metric-readout .value{font-size:16px;font-weight:300;color:var(--text-bright);font-variant-numeric:tabular-nums}.metric-readout .signature{margin-top:5px;font-size:15px;letter-spacing:.15em}.metric-readout .signature .neg{color:var(--accent-warm)}.metric-readout .signature .pos{color:var(--accent-cool)}.status-bar{position:fixed;bottom:0;left:0;right:0;height:20px;display:flex;align-items:center;justify-content:center;gap:20px;z-index:90;background:#060609f2;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;pointer-events:none}.status-bar span{opacity:.5}.status-bar kbd{display:inline;padding:0 3px;border:1px solid rgba(255,255,255,.06);margin-right:3px;font-size:8px;color:var(--text-dim)}