@import "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@500&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e7e9e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--surface-base:#111315;--surface-panel:#171a1d;--surface-raised:#1d2124;--surface-hover:#262b2f;--border-subtle:#2b3034;--border-strong:#3a4146;--text-primary:#e7e9e8;--text-secondary:#959c9f;--text-muted:#6d7477;--accent:#dc7958;--accent-soft:#8f4f3a;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--touch-target:44px;--header-height:58px;--timeline-height:176px;background:#111315;font-family:Geist,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100dvh;overflow:hidden}button,input,select{font:inherit}button{min-width:var(--touch-target);min-height:var(--touch-target)}button:disabled{cursor:not-allowed}.studio-shell{background:var(--surface-base);min-height:100dvh}.studio-header{height:var(--header-height);border-bottom:1px solid var(--border-subtle);background:#15181a;grid-template-columns:240px 1fr 180px;align-items:center;display:grid;position:relative}.brand-lockup{align-items:center;gap:var(--space-3);height:100%;padding-inline:var(--space-4);border-right:1px solid var(--border-subtle);display:flex}.brand-mark{aspect-ratio:1;border:6px solid var(--accent);border-top-color:#0000;width:24px;transform:rotate(45deg)}.brand-lockup h1,.panel-heading h2,.empty-state p,.inspector-empty p{margin:0}.brand-lockup h1{letter-spacing:.08em;font-size:15px;font-weight:600}.project-identity{min-width:0}.project-identity input{width:156px;height:22px;color:var(--text-muted);background:0 0;border:0;border-bottom:1px solid #0000;outline:0;margin-top:1px;padding:0;font-size:11px;transition:border-color .16s,color .16s}.project-identity input:focus{border-bottom-color:var(--accent-soft);color:var(--text-primary)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.toolbar{justify-content:center;align-items:center;gap:var(--space-1);display:flex}.toolbar button,.toolbar-file-button,.toolbar select,.timeline-controls button{color:var(--text-secondary);background:0 0;border:1px solid #0000;border-radius:6px;transition:color .16s,background-color .16s,transform .16s}.toolbar button,.toolbar-file-button,.toolbar select{min-height:40px;padding:0 var(--space-3);font-size:12px}.toolbar button:active,.timeline-controls button:active{transform:scale(.96)}.toolbar button:hover:not(:disabled),.toolbar-file-button:hover,.toolbar select:hover,.toolbar button.is-active{color:var(--text-primary);background:var(--surface-hover)}.toolbar button.is-active{border-color:var(--border-strong)}.toolbar select{min-width:112px;color:var(--text-primary);background:var(--surface-raised);cursor:pointer;outline:none}.toolbar-file-button{cursor:pointer;align-items:center;display:inline-flex}.toolbar-file-button input{display:none}.toolbar-divider{width:1px;height:18px;margin:0 var(--space-2);background:var(--border-subtle)}.save-state{justify-content:flex-end;align-items:center;gap:var(--space-2);padding-right:var(--space-4);color:var(--text-secondary);font-size:12px;display:flex}.save-state span{aspect-ratio:1;background:#718d75;border-radius:50%;width:7px}.save-state-unsaved span,.save-state-saving span{background:#b88a52}.save-state-error{color:#d98b7c}.save-state-error span{background:#c96351}.header-error{top:calc(var(--header-height) + var(--space-2));right:var(--space-3);z-index:2;padding:var(--space-2) var(--space-3);color:#e6b4aa;background:#321f1c;border:1px solid #6b3c35;border-radius:6px;font-size:11px;position:absolute}.studio-loading{justify-content:center;align-items:center;gap:var(--space-3);min-height:100dvh;color:var(--text-secondary);background:var(--surface-base);font-size:12px;display:flex}.studio-loading span{background:var(--surface-raised);width:120px;height:4px;overflow:hidden}.studio-loading span:after{content:"";background:var(--accent);width:45%;height:100%;animation:.9s ease-in-out infinite alternate loading-slide;display:block}@keyframes loading-slide{0%{transform:translate(0)}to{transform:translate(122%)}}.studio-workspace{height:calc(100dvh - var(--header-height));grid-template-columns:240px minmax(320px,1fr) 280px;grid-template-rows:minmax(0, 1fr) var(--timeline-height);grid-template-areas:"scene viewport inspector""timeline timeline timeline";display:grid}.panel{background:var(--surface-panel)}.scene-panel{border-right:1px solid var(--border-subtle);grid-area:scene;min-width:0;overflow:hidden}.inspector-panel{border-left:1px solid var(--border-subtle);grid-area:inspector;min-width:0;overflow:auto}.panel-heading{min-height:44px;padding:0 var(--space-4);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.panel-heading h2{letter-spacing:.05em;font-size:12px;font-weight:600}.panel-heading span{color:var(--text-muted);font-size:11px}.empty-state,.inspector-empty{align-content:center;justify-items:center;gap:var(--space-3);height:calc(100% - 44px);padding:var(--space-5);text-align:center;display:grid}.empty-state-shape{border:1px solid var(--border-strong);width:46px;height:40px;transform:skewY(-12deg)}.empty-state strong{font-size:12px;font-weight:500}.empty-state p,.inspector-empty p{max-width:180px;color:var(--text-muted);font-size:11px;line-height:1.55}.selection-frame{border:1px dashed var(--border-strong);width:38px;height:38px}.scene-tree-list{height:calc(100% - 44px);padding:var(--space-2);overflow:auto}.scene-tree-list button{align-items:center;gap:var(--space-3);width:100%;min-height:38px;padding:0 var(--space-3);color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;font-size:12px;display:flex}.scene-tree-list button:hover,.scene-tree-list button.is-selected{color:var(--text-primary);background:var(--surface-hover)}.scene-tree-list button.is-selected{border-color:var(--border-strong)}.tree-kind{aspect-ratio:1;border:1px solid var(--text-muted);flex:none;width:10px}.tree-kind-camera{border-color:var(--accent);border-radius:50%}.inspector-content{gap:var(--space-4);padding:var(--space-4);display:grid}.field-group{gap:var(--space-2);color:var(--text-muted);grid-template-columns:minmax(0,1fr);font-size:11px;display:grid}.field-group input:not([type=color]),.numeric-field input{width:100%;height:34px;padding:0 var(--space-2);border:1px solid var(--border-subtle);color:var(--text-primary);background:var(--surface-base);font-variant-numeric:tabular-nums;border-radius:5px;outline:none;font:12px Geist Mono,monospace}.field-group input:focus,.numeric-field input:focus{border-color:var(--accent-soft)}.color-field{grid-template-columns:1fr 40px auto;align-items:center}.color-field span{grid-column:1/-1}.color-field input[type=color]{border:1px solid var(--border-subtle);background:var(--surface-base);border-radius:5px;width:40px;height:32px;padding:3px}.color-field code{color:var(--text-secondary);font-size:11px}.bounded-number-field em{color:#d98b7c;font-size:9px;font-style:normal}.aspect-fieldset{border:0;min-width:0;margin:0;padding:0}.aspect-fieldset legend{margin-bottom:var(--space-2);color:var(--text-muted);padding:0;font-size:11px}.aspect-inputs{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.vector-fieldset{border:0;min-width:0;margin:0;padding:0}.vector-fieldset legend{margin-bottom:var(--space-2);color:var(--text-muted);padding:0;font-size:11px}.vector-inputs{gap:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.numeric-field{min-width:0;color:var(--text-muted);grid-template-columns:14px minmax(0,1fr);align-items:center;font-size:10px;display:grid;position:relative}.numeric-field input{padding-inline:6px}.numeric-field small{color:var(--text-muted);pointer-events:none;position:absolute;right:5px}.numeric-field em{margin-top:var(--space-1);color:#d98b7c;grid-column:1/-1;font-size:9px;font-style:normal}.viewport{background:#1b1e20;grid-area:viewport;position:relative;overflow:hidden}.editor-canvas{background:#1b1e20;grid-area:viewport;min-width:0;min-height:0;position:relative;overflow:hidden}.editor-canvas:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #00000029}.editor-canvas canvas{touch-action:none;display:block}.shot-preview{top:var(--space-3);right:var(--space-3);z-index:3;border:1px solid var(--border-strong);pointer-events:none;background:#111315;border-radius:6px;width:clamp(220px,25vw,320px);position:absolute;overflow:hidden;box-shadow:0 12px 36px #0000004d}.shot-preview header{height:28px;padding-inline:var(--space-2);color:var(--text-secondary);background:#15181a;justify-content:space-between;align-items:center;font-size:10px;display:flex}.shot-preview output{color:var(--text-muted);font:9px Geist Mono,monospace}.shot-preview-stage{background:#1b1e20;width:100%}.shot-preview-stage canvas{width:100%!important;height:100%!important}.shot-preview-error{color:#e6b4aa;place-items:center;height:100%;font-size:10px;display:grid}.export-dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080a0bd1}.export-dialog{justify-items:center;gap:var(--space-3);width:min(900px,96vw);max-height:calc(100dvh - 32px);padding:var(--space-4);border:1px solid var(--border-strong);color:var(--text-primary);background:var(--surface-panel);border-radius:8px;margin:auto;display:grid;overflow:auto;box-shadow:0 28px 80px #0000007a}.export-dialog>header,.export-dialog>footer,.export-details,.export-dialog>progress,.export-status{width:100%}.export-dialog>header{justify-content:space-between;align-items:flex-start;display:flex}.export-dialog h2,.export-dialog p{margin:0}.export-dialog h2{font-size:16px}.export-dialog p{margin-top:var(--space-1);color:var(--text-muted);font-size:10px}.export-dialog button{min-height:38px;padding-inline:var(--space-3);border:1px solid var(--border-strong);color:var(--text-primary);background:var(--surface-raised);border-radius:6px;font-size:11px}.export-canvas-stage{border:1px solid var(--border-strong);background:#1b1e20;max-width:100%;height:min(48dvh,420px);overflow:hidden}.export-canvas-stage canvas{width:100%!important;height:100%!important}.export-details{gap:var(--space-2) var(--space-4);color:var(--text-muted);flex-wrap:wrap;font:10px Geist Mono,monospace;display:flex}.export-dialog progress{height:6px;accent-color:var(--accent)}.export-status{min-height:18px;color:var(--text-secondary);font-size:11px}.export-status.is-error{color:#e6a096}.export-dialog>footer{justify-content:flex-end;display:flex}.export-dialog .danger-button{color:#e7a59a;background:#321f1c;border-color:#6b3c35}.webgl-error{height:100%;padding:var(--space-5);color:#e6b4aa;text-align:center;background:#241a18;place-items:center;font-size:13px;display:grid}.viewport:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #00000029}.viewport-status{top:var(--space-3);left:var(--space-3);gap:var(--space-2);color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase;font:10px Geist Mono,monospace;display:flex;position:absolute}.viewport-grid{opacity:.3;background-image:linear-gradient(var(--border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);transform-origin:bottom;background-size:42px 42px;height:100%;position:absolute;bottom:-55%;left:-20%;right:-20%;transform:perspective(380px)rotateX(62deg)}.axis-indicator{right:var(--space-4);bottom:var(--space-4);width:48px;height:48px;color:var(--text-muted);font:9px Geist Mono,monospace;position:absolute}.axis-indicator:before,.axis-indicator:after{content:"";transform-origin:bottom;background:#7b8f78;width:1px;height:28px;position:absolute;bottom:14px;left:23px}.axis-indicator:after{background:#9e6657;transform:rotate(90deg)}.axis-y,.axis-x,.axis-z{position:absolute}.axis-y{top:0;left:20px}.axis-x{bottom:10px;right:0}.axis-z{bottom:6px;left:5px}.timeline-panel{--track-label-width:240px;border-top:1px solid var(--border-subtle);grid-area:timeline;position:relative;overflow:hidden}.timeline-controls{align-items:center;gap:var(--space-1);height:48px;padding:0 var(--space-3);border-bottom:1px solid var(--border-subtle);display:flex;overflow-x:auto}.timeline-controls button{min-width:38px;min-height:32px;font-size:10px}.timeline-controls output{margin-left:var(--space-3);color:var(--text-secondary);font-variant-numeric:tabular-nums;font:11px Geist Mono,monospace}.timeline-controls>button{flex:none}.draft-badge{color:#d8a168;flex:none;font-size:10px}.timeline-controls .capacity-warning{color:#ef8e78;flex:none;margin-left:0;font-size:10px}.easing-control{align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:10px;display:flex}.easing-control select{border:1px solid var(--border-subtle);height:30px;color:var(--text-primary);background:var(--surface-base);border-radius:5px;font-size:10px}.timeline-scrubber{top:43px;left:var(--track-label-width);z-index:2;width:calc(100% - var(--track-label-width));opacity:.01;cursor:ew-resize;height:12px;margin:0;position:absolute}.timeline-tracks{height:calc(100% - 48px);overflow:auto}.timeline-track{grid-template-columns:var(--track-label-width) minmax(0, 1fr);border-bottom:1px solid var(--border-subtle);min-height:32px;display:grid}.track-label{min-height:32px;padding:0 var(--space-4);border:0;border-right:1px solid var(--border-subtle);color:var(--text-muted);text-align:left;background:0 0;font-size:10px}.timeline-track.is-selected .track-label{color:var(--text-primary);background:var(--surface-raised)}.track-lane{background-image:repeating-linear-gradient(90deg, transparent 0, transparent calc(16.666% - 1px), var(--border-subtle) calc(16.666% - 1px), var(--border-subtle) 16.666%);min-width:0;position:relative}.keyframe-marker{border:2px solid var(--surface-panel);background:var(--accent);width:12px;min-width:12px;height:12px;min-height:12px;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%)rotate(45deg)}.timeline-playhead{top:48px;bottom:0;left:calc(var(--track-label-width) + (100% - var(--track-label-width)) * var(--timeline-progress));z-index:1;pointer-events:none;background:var(--accent);width:1px;position:absolute}.timeline-playhead:before{content:"";background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);width:9px;height:9px;position:absolute;top:0;left:-4px}.draft-prompt{top:52px;right:var(--space-3);z-index:4;gap:var(--space-2);padding:var(--space-3);color:var(--text-secondary);background:#2c211a;border:1px solid #6b4a32;border-radius:6px;grid-template-columns:repeat(3,auto);align-items:center;font-size:10px;display:grid;position:absolute;box-shadow:0 12px 28px #00000047}.draft-prompt strong,.draft-prompt span{grid-column:1/-1}.draft-prompt strong{color:#edb27a}.draft-prompt button{min-height:32px;padding-inline:var(--space-2);border:1px solid var(--border-strong);color:var(--text-primary);background:var(--surface-raised);border-radius:5px;font-size:10px}.timeline-ruler{height:28px;padding:0 var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-muted);grid-template-columns:repeat(7,1fr);margin-left:240px;font:9px Geist Mono,monospace;display:grid}.timeline-ruler span{padding-top:var(--space-2);border-left:1px solid var(--border-subtle);text-indent:var(--space-2)}.playhead{background:var(--accent);width:1px;position:absolute;top:48px;bottom:0;left:240px}.playhead:before{content:"";background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);width:9px;height:9px;position:absolute;top:0;left:-4px}.mobile-dock{display:none}.orientation-gate{place-content:center;justify-items:center;gap:var(--space-3);min-height:100dvh;padding:calc(var(--space-5) + env(safe-area-inset-top)) calc(var(--space-5) + env(safe-area-inset-right)) calc(var(--space-5) + env(safe-area-inset-bottom)) calc(var(--space-5) + env(safe-area-inset-left));color:var(--text-primary);background:var(--surface-base);text-align:center;display:grid}.orientation-gate h1,.orientation-gate p{margin:0}.orientation-gate h1{font-size:20px}.orientation-gate p{max-width:280px;color:var(--text-secondary);font-size:13px;line-height:1.55}.orientation-device{width:42px;height:70px;margin-bottom:var(--space-3);border:2px solid var(--accent);border-radius:8px;position:relative;transform:rotate(90deg)}.orientation-device:after{content:"";aspect-ratio:1;background:var(--accent);border-radius:50%;width:4px;position:absolute;top:50%;right:4px;transform:translateY(-50%)}@media (width<=900px) and (orientation:landscape) and (hover:none) and (pointer:coarse){:root{--header-height:52px;--mobile-dock-height:52px;--mobile-panel-height:min(38dvh, 150px)}.studio-shell{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}.studio-header{height:var(--header-height);padding-right:calc(42px + env(safe-area-inset-right));display:block}.brand-lockup{display:none}.toolbar{height:100%;padding-inline:var(--space-2);overscroll-behavior-x:contain;scrollbar-width:none;justify-content:flex-start;overflow-x:auto}.toolbar::-webkit-scrollbar{display:none}.toolbar button,.toolbar-file-button,.toolbar select{min-width:auto;min-height:var(--touch-target);white-space:nowrap;flex:none;padding-inline:10px}.toolbar select{min-width:108px}.toolbar-divider{margin-inline:var(--space-1);flex:none}.save-state{top:0;right:env(safe-area-inset-right);width:42px;height:var(--header-height);background:#15181a;justify-content:center;padding:0;font-size:0;position:absolute}.studio-workspace{height:calc(100dvh - var(--header-height) - var(--mobile-dock-height) - env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, 1fr) var(--mobile-panel-height);grid-template-areas:"viewport""mobile-panel"}.scene-panel,.inspector-panel,.timeline-panel{border:0;border-top:1px solid var(--border-subtle);grid-area:mobile-panel;display:none}[data-mobile-panel=scene] .scene-panel,[data-mobile-panel=inspector] .inspector-panel,[data-mobile-panel=timeline] .timeline-panel{display:block}.panel-heading{min-height:36px}.scene-tree-list{gap:var(--space-1);height:calc(100% - 36px);display:flex;overflow-x:auto}.scene-tree-list button{width:auto;min-width:138px;min-height:var(--touch-target);flex:none}.inspector-content{gap:var(--space-3);height:calc(100% - 36px);padding:var(--space-2);grid-template-columns:160px 120px repeat(3,190px);grid-auto-flow:column;overflow:auto hidden}.camera-inspector-content{grid-template-columns:150px 220px repeat(2,190px)}.shot-preview{top:var(--space-2);right:var(--space-2);width:min(190px,34vw)}.shot-preview header{height:24px}.export-dialog{width:calc(100% - var(--space-4) - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100% - var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3);grid-template-columns:minmax(0,1fr) 220px}.export-dialog>header,.export-dialog>footer,.export-dialog>progress,.export-status,.export-details{grid-column:2}.export-dialog>header{grid-row:1}.export-canvas-stage{grid-area:1/1/span 5;height:min(72dvh,300px)}.inspector-empty{height:calc(100% - 36px)}.field-group input:not([type=color]),.numeric-field input{min-height:36px}.timeline-controls{height:44px;padding-inline:var(--space-2)}.timeline-panel{--track-label-width:110px}.timeline-scrubber{top:39px}.timeline-tracks{height:calc(100% - 44px)}.track-label{padding-inline:var(--space-2)}.timeline-playhead{top:44px}.draft-prompt{top:46px;right:var(--space-2)}.timeline-ruler{margin-left:0}.playhead{top:44px;left:0}.mobile-dock{height:calc(var(--mobile-dock-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--border-subtle);background:#15181a;grid-template-columns:repeat(3,1fr);display:grid}.mobile-dock button{min-height:var(--touch-target);justify-content:center;align-items:center;gap:var(--space-2);color:var(--text-muted);background:0 0;border:0;font-size:11px;display:flex}.mobile-dock button span{aspect-ratio:1;background:currentColor;border-radius:50%;width:6px}.mobile-dock button[aria-pressed=true]{color:var(--accent)}.mobile-dock button:active{transform:scale(.96)}.header-error{top:calc(var(--header-height) + var(--space-1));max-width:calc(100vw - var(--space-4))}}