:root{--bg-deep:#0c1412;--bg-mid:#15201c;--ink:#f2ebe0;--ink-muted:#b7c0b4;--accent:#d4a35c;--accent-hot:#e07a3a;--wood:#6b4a2e;--panel:#0a100eb8;--line:#f2ebe024;--danger:#ff8a7a;--font-display:"Bricolage Grotesque", Georgia, serif;--font-body:"IBM Plex Sans", system-ui, sans-serif;color:var(--ink);background:var(--bg-deep);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{overflow:hidden}button,input,select{font:inherit}.app{background:var(--bg-deep);width:100%;height:100%;min-height:100dvh;position:relative}.landing{isolation:isolate;place-items:center;min-height:100dvh;padding:clamp(1.5rem,4vw,3rem);display:grid;position:relative;overflow:hidden}.landing-atmosphere{z-index:-1;background:radial-gradient(80% 60% at 70% 20%,#d4a35c38,#0000 55%),radial-gradient(60% 50% at 15% 80%,#e07a3a2e,#0000 50%),linear-gradient(165deg,#1a2a24 0%,#0c1412 48%,#101816 100%);animation:18s ease-in-out infinite alternate atmosphere-drift;position:absolute;inset:0}.landing-atmosphere:after{content:"";opacity:.7;background-image:repeating-linear-gradient(-18deg,#0000 0 14px,#f2ebe005 14px 15px);position:absolute;inset:0}@keyframes atmosphere-drift{0%{transform:scale(1)translate(0,0)}to{transform:scale(1.04)translate(-1.5%,1%)}}.landing-content{text-align:left;width:min(40rem,100%);animation:.9s cubic-bezier(.22,1,.36,1) both rise-in}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.brand{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);margin:0 0 .75rem;font-size:clamp(2.4rem,7vw,4.2rem);font-weight:800;line-height:.95}.landing h1{font-family:var(--font-display);color:var(--ink-muted);max-width:28ch;margin:0 0 1rem;font-size:clamp(1.25rem,2.6vw,1.65rem);font-weight:600;line-height:1.25}.lede{max-width:42ch;color:var(--ink-muted);margin:0 0 1.75rem;font-size:1.02rem;line-height:1.55}.cta-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.upload-btn{background:linear-gradient(180deg, #e0b06a 0%, var(--accent) 55%, #b8843f 100%);color:#1a1208;letter-spacing:.01em;cursor:pointer;border:1px solid #d4a35c8c;justify-content:center;align-items:center;min-height:3rem;padding:.85rem 1.4rem;font-weight:600;transition:transform .2s,filter .2s;display:inline-flex}.demo-btn{border:1px solid var(--line);min-height:3rem;color:var(--ink);cursor:pointer;background:0 0;padding:.85rem 1.2rem;font-weight:600}.demo-btn:hover:not(:disabled){color:var(--accent);border-color:#d4a35c8c}.demo-btn:disabled{opacity:.6;cursor:wait}.upload-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.upload-btn.is-busy{opacity:.75;cursor:wait}.upload-btn input{display:none}.hint{color:#b7c0b4bf;margin:1rem 0 0;font-size:.85rem}.error{color:var(--danger);margin:.85rem 0 0;font-size:.95rem}.stage-wrap{position:absolute;inset:0}.stage-fallback{color:var(--ink-muted);font-family:var(--font-display);background:var(--bg-deep);place-items:center;display:grid;position:absolute;inset:0}.stage-canvas{display:block;width:100%!important;height:100%!important}.player-ui{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px);width:min(52rem,100% - 1.5rem);padding:.85rem 1rem 1rem;animation:.55s both rise-in;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.player-top{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;display:flex}.track-meta{flex-direction:column;gap:.15rem;min-width:0;display:flex}.brand-mini{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-size:.78rem;font-weight:700}.track-name{white-space:nowrap;text-overflow:ellipsis;font-size:1rem;overflow:hidden}.meta-bits{color:var(--ink-muted);font-size:.8rem}.ghost-btn{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0;flex-shrink:0;padding:.45rem .75rem;font-size:.85rem}.ghost-btn input{display:none}.transport{grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin-bottom:.75rem;display:grid}.play-btn{background:var(--accent-hot);color:#1a0e08;cursor:pointer;border:none;padding:.55rem .95rem;font-weight:600}.scrub{width:100%;accent-color:var(--accent)}.time{font-variant-numeric:tabular-nums;color:var(--ink-muted);white-space:nowrap;font-size:.8rem}.camera-bar{border:1px solid var(--line);background:#00000038;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem;margin-bottom:.65rem;padding:.45rem .55rem;display:flex}.camera-status{color:var(--ink-muted);flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.82rem;display:flex}.camera-status strong{color:var(--ink);font-weight:600}.camera-status .sep{opacity:.45}.camera-btns{gap:.35rem;display:inline-flex}.camera-btns button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0;padding:.35rem .55rem;font-size:.78rem}.camera-btns button:hover{color:var(--accent);border-color:#d4a35c8c}.hotkeys-hint{color:#b7c0b4b3;margin:.55rem 0 0;font-size:.75rem}.hotkeys-hint kbd{border:1px solid var(--line);font-family:var(--font-body);color:var(--ink);background:#00000040;padding:.05rem .35rem;font-size:.72rem;display:inline-block}.controls-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.seg{border:1px solid var(--line);display:inline-flex}.seg button{color:var(--ink-muted);cursor:pointer;background:0 0;border:none;padding:.45rem .7rem;font-size:.85rem}.seg button.is-active{color:var(--ink);background:#d4a35c2e}.quality{color:var(--ink-muted);align-items:center;gap:.45rem;font-size:.85rem;display:inline-flex}.quality select{background:var(--bg-mid);color:var(--ink);border:1px solid var(--line);padding:.35rem .5rem}@media (width<=640px){.landing-content{text-align:left}.transport{grid-template-columns:auto 1fr}.time{grid-column:1/-1}.player-ui{padding:.7rem;bottom:.5rem}}@media (prefers-reduced-motion:reduce){.landing-atmosphere,.landing-content,.player-ui{animation:none}}