:root{--bg: #0b0f18;--panel: #141a26;--panel-2: #1b2331;--line: #2a3444;--text: #eef2f8;--muted: #9aa7b8;--gold: #ffd489;--red: #c2352f;--green: #2f6b3f;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100vh}a{color:var(--gold)}code{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.85em;background:#0006;padding:.15em .4em;border-radius:4px;overflow-wrap:anywhere}.fatal{padding:2rem;color:#ff9a8f}.nav{position:fixed;right:12px;bottom:12px;display:flex;gap:2px;background:#0009;border:1px solid var(--line);border-radius:999px;padding:4px;backdrop-filter:blur(8px);z-index:50}.nav a{color:var(--muted);text-decoration:none;font-size:12px;padding:4px 12px;border-radius:999px}.nav a:hover{color:var(--text);background:#ffffff14}.btn{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:8px;padding:9px 16px;font:inherit;cursor:pointer;transition:background .12s ease,border-color .12s ease}.btn:hover:not(:disabled){background:#26313f;border-color:#3a4759}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(180deg,#c8402f,#9d2820);border-color:#b3392c;font-weight:600}.btn--primary:hover:not(:disabled){background:linear-gradient(180deg,#d6503d,#ab3227)}.btn--icon{width:40px;padding:9px 0;text-align:center}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.field>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}input[type=text],textarea,select,input[type=number]{background:#0d121b;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:9px 11px;width:100%}textarea{resize:vertical}input[type=range]{width:100%;accent-color:var(--gold)}.hint{color:var(--muted);font-size:12.5px;margin:8px 0 0}.status{margin-top:12px;font-size:13.5px;color:var(--gold);overflow-wrap:anywhere}.studio{max-width:1400px;margin:0 auto;padding:32px 24px 80px}.studio__head h1{margin:0 0 6px;font-size:26px;letter-spacing:-.01em}.studio__head p{margin:0 0 26px;color:var(--muted);max-width:62ch}.studio__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.panel h2{margin:0 0 14px;font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:.07em}.drop{display:grid;place-items:center;min-height:120px;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;text-align:center;padding:18px;transition:border-color .12s ease,background .12s ease}.drop:hover,.drop--over{border-color:var(--gold);background:#ffd4890d}.drop__hint{color:var(--muted);font-size:13.5px}.fit{margin-top:14px}.fit canvas{width:100%;height:auto;border-radius:10px;display:block;touch-action:none;cursor:grab}.preview{position:relative;margin-top:6px;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 50% 15%,#2a1f14,#0c1017 70%)}.preview canvas{width:100%;height:100%;display:block}.preview__empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:13px;text-align:center;padding:20px}.player{position:relative;width:100%;height:100vh;background:#05070c;overflow:hidden}.player canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.overlay{position:absolute;inset:0;pointer-events:none}.overlay__letter,.overlay__greeting{position:absolute;left:50%;transform:translate(-50%);text-align:center;text-shadow:0 2px 18px #000a,0 0 3px #0008;transition:opacity .2s ease}.overlay__letter{bottom:14%}.overlay__letter strong{display:block;font-size:clamp(30px,6vw,64px);color:var(--gold);letter-spacing:.01em}.overlay__greeting{bottom:16%;max-width:min(720px,86vw)}.overlay__greeting strong{display:block;font-size:clamp(26px,5.2vw,54px);color:var(--gold)}.overlay__greeting p{margin:10px 0 6px;font-size:clamp(15px,2.2vw,21px)}.overlay__label,.overlay__sub{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#e6d9c2;opacity:.85}.player__gate{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(70% 60% at 50% 45%,#0b1220cc,#05070ce6);backdrop-filter:blur(3px)}.player__gate h1{margin:0;font-size:clamp(24px,5vw,42px)}.player__gate p{margin:0 0 12px;color:var(--muted)}.player__error{position:absolute;left:50%;top:18px;transform:translate(-50%);margin:0;max-width:min(560px,88vw);background:#3a1512e0;border:1px solid #7a2a24;color:#ffd9d4;padding:10px 14px;border-radius:10px;font-size:13.5px;text-align:center}.controls{position:absolute;left:50%;bottom:20px;transform:translate(-50%);display:flex;align-items:center;gap:12px;width:min(820px,92vw);background:#080c14cc;border:1px solid var(--line);border-radius:12px;padding:9px 14px;backdrop-filter:blur(10px)}.controls input[type=range]{flex:1}.controls__time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}.controls__shot{font-size:12px;color:var(--muted);max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.director{display:grid;grid-template-columns:1fr 340px;height:100vh}.director__stage{position:relative;background:#05070c}.director__stage canvas{width:100%;height:100%;display:block}.director__hud{position:absolute;left:12px;top:12px;background:#000a;padding:5px 10px;border-radius:6px;font:12px ui-monospace,Consolas,monospace;color:var(--gold)}.director__panel{background:var(--panel);border-left:1px solid var(--line);padding:18px;overflow-y:auto}.director__panel h2{margin:0 0 16px;font-size:16px}.director__panel h3{margin:20px 0 10px;font-size:11.5px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}.director__row{display:flex;gap:8px;margin:12px 0}.director__row .btn{flex:1}.director__num,.director__vec{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center;margin-bottom:7px}.director__vec{grid-template-columns:70px repeat(3,1fr)}.director__num>span,.director__vec>span{font-size:11.5px;color:var(--muted)}.director__fields input{padding:6px 8px;font-size:13px}@media(max-width:860px){.director{grid-template-columns:1fr;grid-template-rows:45vh 1fr}.director__panel{border-left:none;border-top:1px solid var(--line)}}