:root,:root[data-theme=dark]{color-scheme:dark;--bg: #0a0c10;--surface-1: #11151b;--surface-2: #161b22;--surface-3: #1e2630;--border: #1e2630;--border-soft: #2a3441;--text: #d7e2dc;--text-dim: #8b9a93;--text-faint: #5a6a63;--danger: #f0736a;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--backdrop: rgba(10, 12, 16, .72)}:root[data-theme=light]{color-scheme:light;--bg: #e7dccb;--surface-1: #f1e8d9;--surface-2: #f6efe2;--surface-3: #ebe0cd;--border: #d6c5ab;--border-soft: #e2d5be;--text: #382f24;--text-dim: #6c6052;--text-faint: #9a8b76;--danger: #c0392b;--shadow: 0 10px 30px rgba(120, 95, 60, .22);--backdrop: rgba(246, 239, 226, .78)}:root{--accent: #57e389;--accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);--accent-contrast: #0a0c10;--cam-a: #ff4d4d;--cam-b: #38c172;--cam-c: #3b9bff;--cam-d: #f5c043;--r-sm: 4px;--r: 4px;--r-lg: 8px;--fs: 13px;--font: "Chakra Petch", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace}:root[data-accent=amber]{--accent: #f0a050;--accent-contrast: #2a1d0c}:root[data-accent=green]{--accent: #57e389;--accent-contrast: #0a0c10}:root[data-accent=blue]{--accent: #4c8dff;--accent-contrast: #ffffff}:root[data-accent=violet]{--accent: #9b8cff;--accent-contrast: #ffffff}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease}#app{display:flex;flex-direction:column;flex:1;height:auto;min-height:0;overflow:hidden}#viewport-row{display:flex;flex:1;min-height:0;min-width:0}#canvas-wrap{flex:1;min-height:0;min-width:0;position:relative;overflow:hidden}#main-canvas{display:block;width:100%;height:100%}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}#top-bar{display:flex;gap:8px;align-items:center;flex-shrink:0;min-height:44px;padding:7px 12px;background:var(--surface-1);border-bottom:1px solid var(--border);font-size:var(--fs)}#app-title{font-weight:650;letter-spacing:.01em;margin-right:4px}#hub-back{color:var(--text-dim);text-decoration:none;font-size:12px;padding:3px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)}#hub-back:hover{color:var(--accent);border-color:var(--accent)}#ws-status,#device-slot-status,#hud-content{padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-soft);font-size:12px;color:var(--text-dim);white-space:nowrap}#hud-content{font-variant-numeric:tabular-nums}#top-bar-right{margin-left:auto;display:flex;gap:8px;align-items:center}.ui-btn,#top-bar button,#top-bar-right button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .05s ease}.ui-btn:hover,#top-bar button:hover,#top-bar-right button:hover{background:var(--surface-3);border-color:var(--text-faint)}.ui-btn:active{transform:translateY(1px)}.ui-btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.ui-btn-accent:hover{filter:brightness(1.07);background:var(--accent)}.badge{margin-left:auto;color:var(--danger);font-weight:600;visibility:hidden;white-space:nowrap}.badge.visible,.badge.alert{visibility:visible}#trajectory-dock{flex:0 0 auto;width:clamp(240px,min(33vw,300px),324px);box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:12px;overflow-x:hidden;overflow-y:auto;border-left:1px solid var(--border);background:var(--surface-1)}#trajectory-dock .preview-title{flex-shrink:0}#traj-hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin:0;padding:8px 10px;background:var(--surface-2);border-radius:var(--r);border:1px solid var(--border-soft)}.traj-section{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:2px}#right-sidebar{flex:0 0 auto;width:clamp(280px,32vw,344px);box-sizing:border-box;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-left:1px solid var(--border);background:var(--surface-1)}#right-sidebar .lil-gui.root{width:100%;flex:0 0 auto;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent}#right-sidebar>.lil-gui.root>.title{display:none}#right-sidebar>.lil-gui.root>.children{padding:8px;display:flex;flex-direction:column;gap:7px}#right-sidebar>.lil-gui.root>.children>.lil-gui{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0}.oe-hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin:6px 8px 2px;padding:8px 10px;background:var(--surface-1);border-radius:var(--r-sm);border:1px solid var(--border-soft)}#oe-selected{font-size:12px;font-weight:600;color:var(--text);margin:0 8px 4px;padding:6px 10px;background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r-sm);word-break:break-all}.oe-color-row{display:flex;align-items:flex-start}.oe-color-row>.name{width:var(--name-width, 42%);flex-shrink:0;color:var(--text-dim);padding-top:4px}#oe-palette{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0}#oe-palette .oe-swatch{flex:0 0 auto;width:22px;height:22px;min-height:0;border-radius:6px;border:2px solid var(--border);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-dim);background:var(--surface-3)}#oe-palette .oe-swatch:hover{border-color:var(--text-faint)}#oe-palette .oe-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}#trajectory-canvas-wrap{flex-shrink:0;align-self:center}#trajectory-status{font-size:11px;color:var(--text-dim);line-height:1.4}.traj-replay-block{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-lg)}.traj-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;padding:12px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-lg)}.traj-slider-label{display:flex;flex-direction:column;gap:4px;width:100%;font-size:11px;color:var(--text-dim)}.traj-slider-label span.primary{color:var(--text);font-weight:600}.traj-play-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.traj-play-row button#btn-traj-play{flex:1;min-width:140px;padding:9px 12px;font-weight:600;background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.traj-play-row button#btn-traj-play:hover{filter:brightness(1.07)}.traj-controls button,.traj-controls label.btn-file,.traj-play-row button{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);padding:5px 9px;cursor:pointer;font:inherit;font-size:11px;transition:background .12s ease,border-color .12s ease}.traj-controls button:hover,.traj-controls label.btn-file:hover{background:var(--border);border-color:var(--text-faint)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--surface-3);outline:none;cursor:pointer}.traj-controls input[type=range]{flex:1;min-width:72px}.traj-scrub-highlight input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-2);box-shadow:0 1px 3px #0006}input[type=range]::-moz-range-thumb{width:15px;height:15px;border:2px solid var(--surface-2);border-radius:50%;background:var(--accent)}#previews{display:flex;flex-wrap:nowrap;gap:10px;align-items:flex-end;flex-shrink:0;padding:10px 12px;background:var(--surface-1);border-top:1px solid var(--border)}#previews canvas{image-rendering:pixelated;border-radius:var(--r-sm)}#trajectory-canvas{image-rendering:auto;border-radius:var(--r-sm)}.preview-block{display:flex;flex-direction:column;gap:5px}.preview-title{font-size:12px;font-weight:600;letter-spacing:.02em}.preview-title .cam-a{color:var(--cam-a)}.preview-title .cam-b{color:var(--cam-b)}.preview-title .cam-c{color:var(--cam-c)}.preview-title .cam-d{color:var(--cam-d)}.preview-title .cam-meta{color:var(--text-dim);font-weight:400}.preview-block.preview-a canvas{box-shadow:0 0 0 1px var(--border),0 0 0 3px color-mix(in srgb,var(--cam-a) 40%,transparent)}.preview-block.preview-b canvas{box-shadow:0 0 0 1px var(--border),0 0 0 3px color-mix(in srgb,var(--cam-b) 40%,transparent)}.preview-block.preview-c canvas{box-shadow:0 0 0 1px var(--border),0 0 0 3px color-mix(in srgb,var(--cam-c) 40%,transparent)}.preview-block.preview-d canvas{box-shadow:0 0 0 1px var(--border),0 0 0 3px color-mix(in srgb,var(--cam-d) 40%,transparent)}#trajectory-dock #trajectory-canvas{box-shadow:0 0 0 1px var(--border),0 0 0 3px var(--accent-soft)}.lil-gui{--background-color: var(--surface-2);--text-color: var(--text);--title-background-color: var(--surface-1);--title-text-color: var(--text);--widget-color: var(--surface-3);--hover-color: var(--border);--focus-color: color-mix(in srgb, var(--accent) 40%, var(--surface-3));--number-color: var(--accent);--string-color: var(--accent);--font-size: 12px;--input-font-size: 12px;--font-family: inherit;--padding: 9px;--spacing: 7px;--widget-height: 24px;--title-height: 30px;--name-width: 42%;--widget-border-radius: var(--r-sm);--slider-input-width: 32%;--color-input-width: 32%;--scrollbar-width: 9px}.lil-gui.root{width:314px;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--backdrop)}.lil-gui.root>.title{font-weight:700;font-size:13px;letter-spacing:.01em;border-bottom:1px solid var(--border)}.lil-gui .title{border-radius:0;transition:background .12s ease}.lil-gui .title:hover{background:var(--surface-3)}.lil-gui .children{padding-left:0}.lil-gui.root>.children{padding:4px 0}.lil-gui .lil-gui{margin:4px 8px;border-radius:var(--r);border:1px solid var(--border-soft);overflow:hidden}.lil-gui .lil-gui>.title{font-weight:600;color:var(--text-dim);text-transform:none}.lil-gui .controller{padding:1px 8px}.lil-gui .controller .name{color:var(--text-dim)}.lil-gui input,.lil-gui select{border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-3);color:var(--text)}.lil-gui input:focus,.lil-gui select:focus{border-color:var(--accent)}.lil-gui .controller.number .slider{background:var(--surface-3);border-radius:999px;height:7px;align-self:center}.lil-gui .controller.number .slider .fill{background:var(--accent);border-radius:999px}.lil-gui .controller.boolean .widget{justify-content:flex-start}.lil-gui .controller.boolean input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);position:relative;cursor:pointer;transition:background .15s ease,border-color .15s ease}.lil-gui .controller.boolean input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-faint);transition:transform .15s ease,background .15s ease}.lil-gui .controller.boolean input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.lil-gui .controller.boolean input[type=checkbox]:checked:before{transform:translate(16px);background:#fff}.lil-gui .controller.function .name{border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--border);text-align:center;color:var(--text);transition:background .12s ease}.lil-gui .controller.function:hover .name{background:var(--border)}.lil-gui .lil-gui.tc-appearance{border-color:var(--accent)}.lil-gui .lil-gui.tc-appearance>.title{color:var(--text)}dialog.tc-dialog{max-width:80vw;max-height:80vh;padding:20px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface-2);color:var(--text);box-shadow:var(--shadow)}dialog.tc-dialog::backdrop{background:#00000080}dialog.tc-dialog textarea{width:100%;height:400px;font-family:ui-monospace,monospace;font-size:12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;box-sizing:border-box}