@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap";:root{--sans:"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;font-family:var(--sans);color:#dce5f1;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#111722}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;margin:0}body{min-height:100svh;overflow:hidden}button,input{font:inherit}.app-shell{color:#dce5f1;background:#0f141d;block-size:100svh;overflow:hidden}button,.file-button{color:#17202f;min-height:36px;font:700 14px/1 var(--sans);cursor:pointer;background:#f6f8fbf0;border:1px solid #dce5f138;border-radius:6px;justify-content:center;align-items:center;padding:0 12px;display:inline-flex;box-shadow:0 8px 24px #00000038}button:hover,.file-button:hover{background:#fff;border-color:#8fa2baf2}button.is-active{color:#0b1320;background:#4aa8ff;border-color:#4aa8ff}button:disabled{cursor:not-allowed;opacity:.55}.file-button:has(input:disabled){cursor:not-allowed;opacity:.55}button svg,.file-button svg{flex:none;block-size:17px;inline-size:17px}button{gap:8px}.file-button input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.stage-wrap{background:#0f141d;block-size:100%;display:block}.stage{block-size:100%;position:relative;overflow:hidden}.three-canvas{cursor:grab;touch-action:none;block-size:100%;inline-size:100%;display:block}.three-canvas:active{cursor:grabbing}.hover-dot{z-index:3;opacity:0;pointer-events:none;background:#58c7f7;border:2px solid #ffffffeb;border-radius:50%;block-size:12px;inline-size:12px;transition:opacity 80ms;position:absolute;inset:0 auto auto 0;translate:-50% -50%;box-shadow:0 0 0 4px #58c7f733,0 8px 18px #00000057}.top-overlay{z-index:4;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:24px;display:flex;position:absolute;inset:16px 22px auto 16px}.top-left-box{pointer-events:auto;flex:none;justify-items:start;gap:10px;display:grid}.top-right-stack{pointer-events:none;flex:720px;justify-items:end;gap:12px;min-inline-size:0;display:grid}.top-right-box{pointer-events:auto;justify-items:end;gap:12px;inline-size:100%;min-inline-size:0;display:grid}.top-status-box{pointer-events:none}.debug-toggle{inset:auto max(16px, env(safe-area-inset-right)) 92px auto;z-index:9;block-size:48px;inline-size:48px;min-inline-size:48px;color:#e7edf6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28db;border-color:#dce5f12e;border-radius:50%;min-height:48px;padding:0;position:absolute;box-shadow:0 10px 30px #0000004d}.debug-toggle svg{block-size:22px;inline-size:22px}.debug-toggle:hover{color:#f4f8ff;background:#58c7f71a;border-color:#58c7f77a}.debug-toggle.is-active,.debug-toggle.is-active:hover{color:#58c7f7;background:#58c7f71f;border-color:#58c7f785}@media (width<=760px){.debug-toggle{inset:auto 12px 140px auto}}@media (width<=640px){.debug-toggle{inset-block-end:150px}}.top-controls-toggle{display:none}.scene-toolbar{grid-template-columns:minmax(240px,1fr) auto max-content;justify-content:flex-end;place-items:center stretch;gap:10px;inline-size:min(900px,100%);display:grid}.camera-actions{grid-template-columns:auto minmax(126px,1fr);align-items:center;gap:8px;min-inline-size:0;display:grid}.camera-actions>button{min-inline-size:0}.camera-lock-toggle{justify-content:flex-start;gap:7px;inline-size:100%;padding-inline:10px}.camera-lock-toggle>span:not(.camera-lock-state){text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}.camera-lock-toggle[aria-pressed=true]{color:#58c7f7;background:#58c7f71f;border-color:#58c7f785}.camera-lock-toggle[aria-pressed=false]{color:#dce5f1;background:#151c28b8;border-color:#dce5f12e}.camera-lock-state{color:currentColor;min-inline-size:32px;font:800 11px/1 var(--mono);text-align:center;text-transform:uppercase;background:#0b13202e;border-radius:999px;margin-inline-start:auto;padding:4px 7px}.camera-lock-toggle[aria-pressed=false] .camera-lock-state{color:#aeb9c9;background:#dce5f11f}.app-logo{inline-size:min(210px,100vw - 32px);justify-content:flex-start;align-items:center;min-height:48px;display:inline-flex}.app-logo img{object-fit:contain;object-position:left center;block-size:auto;max-block-size:42px;inline-size:auto;max-inline-size:100%;display:block}.guide-shell{align-items:stretch;display:inline-flex;position:relative}.control-guide{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28d1;border:1px solid #dce5f11a;border-radius:8px;gap:6px;width:min(318px,100% - 32px);padding:10px 42px 10px 14px;transition:width .18s,padding .18s,opacity .14s,border-color .18s;display:grid;overflow:hidden;box-shadow:0 10px 30px #0000003d}.guide-shell.is-closed .control-guide{opacity:0;border-color:#0000;width:0;max-width:0;padding-inline:0}.guide-toggle{block-size:30px;inline-size:30px;min-inline-size:30px;background:#f6f8fbf0;border-radius:50%;min-height:30px;padding:0;transition:inline-size .14s,block-size .14s,min-inline-size .14s,min-height .14s,transform .14s,border-color .14s,background .14s;position:absolute;inset:10px 10px auto auto}.guide-shell.is-open .guide-toggle:hover{block-size:42px;inline-size:42px;min-inline-size:42px;min-height:42px}.guide-shell.is-closed .guide-toggle{border-radius:999px;inline-size:auto;min-inline-size:148px;padding:0 11px 0 13px;position:static}.guide-toggle-label{display:none}.guide-shell.is-closed .guide-toggle-label{text-overflow:ellipsis;white-space:nowrap;display:inline;overflow:hidden}.guide-toggle svg{block-size:16px;inline-size:16px}.guide-shell.is-closed .guide-toggle svg{block-size:15px;inline-size:15px}.guide-row{color:#e7edf6;white-space:nowrap;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:20px;font-size:13px;font-weight:700;display:grid}.guide-row svg{color:#78d1ff;block-size:20px;inline-size:20px}.guide-action-icon{color:#aeb8c7}.zoom-control{color:#e7edf6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28d1;border:1px solid #dce5f133;border-radius:6px;grid-column:1/-1;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:10px;min-height:36px;padding:0 12px;font-size:13px;font-weight:700;display:inline-grid;box-shadow:0 8px 24px #00000038}.scene-picker{inline-size:auto;max-inline-size:100%;color:#17202f;cursor:pointer;background:#f6f8fbf0;border:1px solid #dce5f133;border-radius:6px;grid-template-columns:auto minmax(0,max-content) auto;align-items:center;gap:8px;min-height:36px;padding:0 10px;display:inline-grid;position:relative;box-shadow:0 8px 24px #00000038}.scene-picker>svg{block-size:17px;inline-size:17px}.scene-picker-value{text-overflow:ellipsis;white-space:nowrap;color:#17202f;min-inline-size:0;max-inline-size:340px;font:800 14px/1 var(--sans);overflow:hidden}.scene-picker span:not(.scene-picker-value){text-transform:uppercase;color:#526071;white-space:nowrap;font-size:12px;font-weight:800}.scene-picker select{z-index:2;appearance:none;color:#0000;block-size:100%;inline-size:100%;font:inherit;cursor:pointer;opacity:0;background:0 0;border:0;outline:none;position:absolute;inset:0}.scene-picker select:disabled{cursor:not-allowed}.scene-picker .select-chevron{pointer-events:none}input[type=range]{accent-color:#58c7f7;inline-size:100%}.timeline-visualizer{gap:4px;min-inline-size:0;display:grid}.timeline-range{appearance:none;cursor:pointer;background:0 0;block-size:18px;margin:0}.timeline-range::-webkit-slider-runnable-track{background:var(--timeline-gradient,#687384);border-radius:999px;block-size:6px}.timeline-range::-moz-range-track{background:var(--timeline-gradient,#687384);border-radius:999px;block-size:6px}.timeline-range::-webkit-slider-thumb{appearance:none;background:#58c7f7;border:2px solid #f4f8ff;border-radius:50%;block-size:14px;inline-size:14px;margin-block-start:-4px;box-shadow:0 0 0 2px #0d141eb8}.timeline-range::-moz-range-thumb{background:#58c7f7;border:2px solid #f4f8ff;border-radius:50%;block-size:10px;inline-size:10px;box-shadow:0 0 0 2px #0d141eb8}.timeline-key{color:#aeb9c9;justify-content:flex-end;gap:12px;font-size:10px;line-height:1;display:flex}.timeline-key span{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.timeline-key i{border-radius:50%;block-size:7px;inline-size:7px}.timeline-key-stop{background:#f25555}.timeline-key-go{background:#25c58a}.agent-legend{z-index:4;align-items:stretch;display:inline-flex;position:absolute;inset:auto auto 92px 16px}.legend-panel{width:150px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28d1;border:1px solid #dce5f11f;border-radius:8px;gap:7px;max-inline-size:calc(100% - 32px);padding:10px;transition:width .18s,padding .18s,opacity .14s,border-color .18s;display:grid;overflow:hidden;box-shadow:0 8px 24px #00000038}.agent-legend.is-closed .legend-panel{padding:25px;grid-template-columns:30px;justify-content:center;justify-items:center;width:52px;padding-top:15px;padding-bottom:15px;overflow:visible}.legend-toggle{block-size:30px;inline-size:30px;min-inline-size:30px;color:#17202f;background:#f6f8fbf0;border-radius:50%;justify-self:end;min-height:30px;margin-top:4px;padding:0;transition:inline-size .14s,block-size .14s,min-inline-size .14s,min-height .14s,transform .14s,border-color .14s,background .14s}.agent-legend.is-open .legend-toggle:hover{block-size:42px;inline-size:42px;min-inline-size:42px;min-height:42px}.agent-legend.is-closed .legend-toggle{justify-self:center;margin-top:6px}.legend-toggle svg{block-size:16px;inline-size:16px}.legend-item{color:#e7edf6;white-space:nowrap;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px;min-height:28px;font-size:12px;font-weight:800;display:grid}.agent-legend.is-closed .legend-item{inline-size:30px;grid-template-columns:30px;justify-items:center;gap:0;min-height:30px}.agent-legend.is-closed .legend-swatch{block-size:30px;inline-size:30px}.agent-legend.is-closed .legend-swatch svg{block-size:18px;inline-size:18px}.agent-legend.is-closed .legend-label{display:none}.legend-swatch{block-size:24px;inline-size:24px;color:var(--legend-color);background:0 0;border:0;place-self:center;place-items:center;display:inline-grid}.legend-swatch svg{stroke:currentColor;block-size:15px;inline-size:15px}.controls{inset:auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));z-index:8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28db;border:1px solid #dce5f124;border-radius:8px;grid-template-columns:auto auto minmax(160px,1fr) auto auto auto auto;align-items:center;gap:12px;padding:12px 14px;display:grid;position:fixed;box-shadow:0 10px 30px #00000042}.icon-control{color:#dce5f1;block-size:38px;min-block-size:38px;inline-size:38px;min-inline-size:38px;box-shadow:none;background:0 0;border-color:#dce5f121;padding:0}.icon-control:hover{color:#f4f8ff;background:#58c7f71a;border-color:#58c7f77a}.icon-control svg{block-size:20px;inline-size:20px}.icon-control.is-active,.icon-control.is-active:hover{color:#58c7f7;background:#58c7f71f;border-color:#58c7f785}.time-readout,.frame-readout{color:#dce5f1;font:700 13px/1 var(--mono);white-space:nowrap}.time-readout.end{color:#96a3b6}.speed-menu{position:relative}.speed-trigger{color:#dce5f1;min-block-size:38px;min-inline-size:76px;box-shadow:none;background:0 0;border-color:#dce5f121;padding:0 10px}.speed-trigger:hover{color:#f4f8ff;background:#58c7f71a;border-color:#58c7f77a}.speed-trigger span{font:800 13px/1 var(--mono)}.speed-popover{color:#dce5f1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f151ff2;border:1px solid #dce5f129;border-radius:8px;grid-template-columns:auto minmax(120px,1fr);align-items:center;gap:12px;inline-size:220px;padding:10px 12px;font-size:13px;font-weight:800;display:grid;position:absolute;inset:auto 50% calc(100% + 10px) auto;transform:translate(50%);box-shadow:0 14px 32px #00000057}.speed-popover:after{content:"";background:#0f151ff2;border-block-end:1px solid #dce5f129;border-inline-end:1px solid #dce5f129;block-size:10px;inline-size:10px;position:absolute;inset:auto 50% -5px auto;transform:translate(50%)rotate(45deg)}.speed-popover input{z-index:1;position:relative}.toggle-row{color:#dce5f1;white-space:nowrap;align-items:center;gap:7px;font-size:14px;font-weight:700;display:inline-flex}.toggle-row input{accent-color:#58c7f7;block-size:16px;inline-size:16px}.loading-screen{z-index:10;color:#f0f5fb;letter-spacing:.02em;align-content:center;place-items:center;gap:12px;font-size:15px;font-weight:800;display:grid;position:absolute;inset:0}.loading-icon{color:#78d1ff;block-size:32px;inline-size:32px;animation:1s linear infinite spin}.modal-backdrop{z-index:12;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#060a109e;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.load-dialog{background:#151c28;border:1px solid #dce5f129;border-radius:8px;max-block-size:min(620px,100svh - 40px);inline-size:min(720px,100%);overflow:auto;box-shadow:0 24px 70px #00000075}.load-dialog-header{border-bottom:1px solid #dce5f11a;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;display:flex}.load-dialog-header h2{color:#f4f8fd;margin:0;font-size:18px;line-height:1.1}.icon-button{min-inline-size:34px;min-height:34px;padding:0}.load-dialog-grid{grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:14px;padding:16px;display:grid}.load-panel{background:#131b27eb;border:1px solid #dce5f11f;border-radius:8px;min-width:0;padding:14px}.load-panel h3{color:#dce5f1;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;font-size:13px;line-height:1}.demo-scene-list{gap:10px;display:grid}.demo-scene-button{min-height:58px;text-align:left;background:#f6f8fbf5;justify-content:flex-start;gap:12px;inline-size:100%;padding:10px 12px}.demo-scene-button span{gap:4px;min-width:0;display:grid}.demo-scene-button strong,.demo-scene-button small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-scene-button small{color:#526071;font:700 12px/1 var(--mono)}.upload-panel{flex-direction:column;display:flex}.upload-dropzone{color:#e7edf6;cursor:pointer;background:#0b111a8a;border:1px dashed #78d1ff8a;border-radius:8px;align-content:center;place-items:center;gap:12px;min-block-size:174px;font-size:14px;font-weight:800;display:grid}.upload-dropzone:hover{background:#111e2cb8;border-color:#78d1fff2}.upload-dropzone input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.upload-dropzone svg{color:#78d1ff;block-size:30px;inline-size:30px}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1320px){.top-overlay{gap:18px}.scene-picker{grid-template-columns:auto minmax(0,max-content) auto}.scene-picker span:not(.scene-picker-value){display:none}.zoom-control{margin-inline-start:0}}@media (width<=980px){.top-overlay{gap:12px;inset-inline:10px}.top-right-stack,.top-right-box{justify-items:end}.scene-toolbar{grid-template-columns:minmax(180px,1fr) auto;inline-size:min(620px,100%)}.camera-actions{grid-column:1/-1;justify-self:end}.zoom-control{grid-row:3}.scene-picker-value{max-inline-size:250px}}@media (width<=760px){.top-overlay{gap:10px;inset:12px 12px auto}.scene-toolbar{grid-template-columns:minmax(150px,1fr) auto;inline-size:min(520px,100%)}.scene-picker-value{max-inline-size:180px}.top-left-box{max-inline-size:calc(100vw - 24px)}.app-logo{min-height:40px;inline-size:min(180px,100vw - 24px)}.control-guide{width:min(280px,100vw - 68px)}.zoom-control{grid-template-columns:auto minmax(100px,1fr);margin-inline-start:0}.agent-legend{inset:auto auto 140px 12px}.legend-panel{width:min(150px,100vw - 68px);max-inline-size:180px}.controls{grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;padding:10px}.modal-backdrop{align-items:end;padding:12px}.load-dialog{max-block-size:calc(100svh - 24px)}.load-dialog-grid{grid-template-columns:1fr}.timeline-visualizer{grid-area:1/1/auto/-1}.play-button,.time-readout,.frame-readout,.speed-menu,.loop-button{grid-row:2}.time-readout.end{display:none}}.stage-panel{border:1px solid #dce5f11f;border-left:4px solid var(--stage-color,#8a94a8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28db;border-radius:8px;gap:10px;min-inline-size:220px;padding:10px;transition:border-color .2s;display:grid;box-shadow:0 8px 24px #00000038}.stage-panel.stage-1{--stage-color:#43d17a}.stage-panel.stage-2{--stage-color:#4aa8ff}.stage-panel.stage-3{--stage-color:#f7c948}.stage-panel.stage-4{--stage-color:#f25555}.stage-heading{align-items:center;gap:10px;display:flex}.stage-heading strong,.stage-heading small{display:block}.stage-heading strong{font-size:16px}.stage-heading small{color:#dce5f1a8;margin-top:2px;font-size:12px}.stage-index{background:var(--stage-color,#8a94a8);color:#0b1320;border-radius:50%;place-items:center;block-size:28px;inline-size:28px;font-weight:800;display:grid}@media (width<=760px){.stage-panel{justify-self:end}}@media (width<=640px){.top-overlay{flex-direction:row;align-items:flex-start;gap:8px}.top-right-stack{flex:auto;justify-items:stretch;gap:10px;min-inline-size:0}.top-right-box{justify-items:stretch}.top-controls-toggle{color:#e7edf6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#151c28db;border-color:#dce5f12e;justify-self:end;gap:8px;min-height:34px;display:inline-flex;box-shadow:0 8px 24px #00000038}.top-controls-toggle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.top-left-box{flex:0 0 min(300px,46vw);min-inline-size:0}.guide-shell,.guide-shell.is-closed .guide-toggle{inline-size:100%;min-inline-size:0}.scene-toolbar{grid-template-columns:minmax(0,1fr);inline-size:100%}.scene-picker{grid-column:auto;inline-size:100%}.scene-picker-value{max-inline-size:100%}.scene-toolbar>button,.camera-actions,.camera-actions>button{inline-size:100%;min-inline-size:0}.camera-actions{grid-column:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.camera-lock-toggle{padding-inline:9px}.camera-lock-state{min-inline-size:28px;padding-inline:6px}.zoom-control{grid-column:auto;grid-template-columns:auto minmax(70px,1fr);inline-size:100%}.stage-panel{justify-self:stretch;min-inline-size:0}.top-right-box.is-collapsed .scene-picker,.top-right-box.is-collapsed .scene-toolbar>button,.top-right-box.is-collapsed .camera-actions,.top-right-box.is-collapsed .zoom-control{display:none}.agent-legend{inset:auto auto 150px 12px}}.landing-screen{z-index:9;background:#101722;align-content:center;place-items:center;gap:28px;padding:24px;display:grid;position:absolute;inset:0}.landing-screen img{block-size:auto;inline-size:min(70vw,960px);display:block}.landing-directions{color:#dce5f1;text-align:center;justify-items:center;gap:14px;max-inline-size:min(760px,100vw - 48px);display:grid}.landing-directions p{color:#e7edf6;margin:0;font-size:clamp(16px,2vw,22px);font-weight:800}.landing-directions .hardware-status{color:#aeb9c9;font-size:12px;font-weight:600}.landing-demo-keys{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.landing-demo-keys span{color:#aeb9c9;background:#151c28d1;border:1px solid #dce5f124;border-radius:6px;align-items:center;gap:8px;min-height:38px;padding:0 12px;font-size:13px;font-weight:800;display:inline-flex;box-shadow:0 8px 24px #00000038}.landing-demo-keys kbd{color:#78d1ff;min-block-size:24px;min-inline-size:24px;font:900 13px/1 var(--mono);background:#58c7f71f;border:1px solid #78d1ff8a;border-radius:5px;place-items:center;display:inline-grid}