:root{--bg:#0b0b0c;--bg-2:#121214;--bg-3:#1b1b20;--line:#2c2c34;--ink:#f3efe6;--muted:#9a958a;--accent:#e0b04a;--danger:#d45d4a;--serif:"Fraunces", "Times New Roman", serif;--sans:"Figtree", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--player-accent:var(--accent)}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);margin:0;font-size:15px;line-height:1.45}button,input,textarea,select{font:inherit;color:inherit}select{background:var(--bg-3);border:1px solid var(--line);padding:4px 8px}a{color:var(--accent)}button{cursor:pointer}.shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;display:flex}.wordmark{font-family:var(--serif);letter-spacing:-.03em;color:var(--ink);font-size:22px;font-weight:600;text-decoration:none}.wordmark span{color:var(--accent)}.muted{color:var(--muted)}.mono{font-family:var(--mono);font-size:12px}.page{width:min(1120px,100% - 40px);margin:0 auto;padding:32px 0 80px}.hero{justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;display:flex}.hero h1{font-family:var(--serif);letter-spacing:-.03em;margin:0 0 8px;font-size:42px;font-weight:500}.drop{border:1px dashed var(--line);background:var(--bg-2);gap:12px;margin-bottom:28px;padding:28px;display:grid}.drop.hot{border-color:var(--accent)}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn{border:1px solid var(--line);background:var(--bg-3);color:var(--ink);height:36px;padding:8px 12px}.btn:hover{border-color:#4a4a55}.btn.primary{background:var(--accent);color:#1a1406;border-color:var(--accent);font-weight:600}.btn.danger{color:var(--danger);border-color:#5a2e28}.btn:disabled{opacity:.5;cursor:not-allowed}.field{background:var(--bg);border:1px solid var(--line);flex:1;min-width:220px;padding:8px 10px}.search{width:240px}.progress{background:var(--bg-3);height:3px}.progress>span{background:var(--accent);height:100%;display:block}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.card{background:var(--bg-2);border:1px solid var(--line);text-align:left;width:100%;color:inherit;padding:0;text-decoration:none;display:block}.card:hover{border-color:#4a4a55}.thumb{aspect-ratio:16/9;background-color:#0000;background-image:linear-gradient(#0000,#0008),repeating-linear-gradient(90deg,#161618 0 14px,#0e0e10 14px 18px);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:relative}.thumb .dur{font-family:var(--mono);background:#000c;padding:2px 6px;font-size:11px;position:absolute;bottom:8px;right:8px}.card-body{padding:12px 14px 14px}.card-body h3{margin:0 0 4px;font-size:15px;font-weight:600}.watch{grid-template-columns:minmax(0,1fr) 320px;min-height:100vh;display:grid}.watch.embed{background:#000;min-height:100%;display:block}.stage{flex-direction:column;min-width:0;display:flex}.watch-bar{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:12px 16px;display:flex}.title-input{font-family:var(--serif);background:0 0;border:0;outline:none;flex:1;font-size:20px}.player{background:#000;flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.player-frame{background:#000;flex:1;justify-content:center;align-items:center;min-height:280px;display:flex;position:relative}.player-frame video{object-fit:contain;background:#000;width:100%;height:auto;max-height:calc(100vh - 168px)}.watch.embed{background:#000;flex-direction:column;height:100vh;min-height:100vh;display:flex}.embed .player{flex:1}.embed .player-frame{flex:1;min-height:240px}.embed .player-frame video{height:100%;max-height:none}.overlay-layer{pointer-events:none;position:absolute;inset:0}.overlay-layer.active{pointer-events:auto;cursor:crosshair}.overlay-layer canvas{width:100%;height:100%;display:block}.controls{background:#0d0d10f2;border-top:1px solid #ffffff12;gap:8px;padding:10px 14px 14px;display:grid}.timeline{height:18px;position:relative}.timeline input[type=range]{appearance:none;z-index:2;background:0 0;width:100%;height:6px;margin:0;position:absolute;inset:6px 0 auto}.timeline input[type=range]::-webkit-slider-runnable-track{background:#fff2;height:4px}.timeline input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--player-accent);border:0;width:10px;height:10px;margin-top:-3px}.ticks{z-index:3;height:12px;position:absolute;inset:0 0 auto}.tick{background:var(--player-accent);border:0;width:8px;height:10px;padding:0;position:absolute;top:0;transform:translate(-4px)}.tick.drawing{background:#f3efe6;height:12px}.control-row{align-items:center;gap:8px;display:flex}.icon-btn{color:var(--ink);background:0 0;border:0;height:28px;padding:4px 6px}.icon-btn.on{color:var(--player-accent)}.grow{flex:1}.side{border-left:1px solid var(--line);background:var(--bg-2);flex-direction:column;min-height:0;display:flex}.side h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);margin:0;padding:16px;font-size:13px;font-weight:600}.notes{flex:1;padding:8px 0 16px;overflow:auto}.note{text-align:left;background:0 0;border:0;border-left:2px solid #0000;gap:4px;width:100%;padding:10px 16px;display:grid}.note:hover,.note.active{border-left-color:var(--player-accent);background:#ffffff08}.composer{border-top:1px solid var(--line);gap:8px;padding:12px;display:grid}.draw-tools{align-items:center;gap:6px;display:flex}.swatch{border:1px solid #fff4;width:16px;height:16px;padding:0}.swatch.on{outline:1px solid var(--ink)}.gate{place-items:center;min-height:100vh;padding:24px;display:grid}.gate-card{background:var(--bg-2);border:1px solid var(--line);gap:12px;width:min(420px,100%);padding:28px;display:grid}.gate-card h1{font-family:var(--serif);margin:0}.settings{border-top:1px solid var(--line);gap:10px;padding:12px 16px 16px;display:grid}.check{color:var(--muted);align-items:center;gap:8px;display:flex}.empty{color:var(--muted);text-align:center;padding:48px 8px}.toast{color:var(--danger)}@media (width<=900px){.watch{grid-template-columns:1fr}.side{border-left:0;border-top:1px solid var(--line);max-height:42vh}.hero{flex-direction:column;align-items:start}}