:root{color-scheme:dark;--bg: #0c0c0b;--bg-2: #141412;--line: #2a2a26;--text: #f3f1ea;--muted: #8d8a80;--accent: #ff5c33;--accent-2: #ffd4c8;--paper: #e8e4dc;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.landing{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 28px}.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.03em}.brand-mark{width:22px;height:22px}.nav a{color:var(--muted);text-decoration:none;font-size:14px}.hero{display:grid;place-items:center;padding:24px 20px 64px;text-align:center}.hero h1{font-size:clamp(40px,8vw,88px);line-height:.92;letter-spacing:-.055em;font-weight:600;margin:0 0 16px;max-width:14ch}.hero p{margin:0 auto 32px;max-width:42ch;color:var(--muted);font-size:18px;line-height:1.45}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:12px 18px;font-size:14px;font-weight:500}.btn-primary{background:var(--accent);border-color:transparent;color:#1a0703}.btn:disabled{opacity:.5;cursor:default}.btn-lg{padding:16px 28px;font-size:16px;min-width:220px}.rec-panel{display:grid;justify-items:center;gap:16px}.rec-row{display:flex;align-items:center;gap:10px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:14px}.rec-time{font-variant-numeric:tabular-nums}.rec-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 #ff5c3399;animation:recpulse 1.2s ease-out infinite}@keyframes recpulse{70%{box-shadow:0 0 0 10px #ff5c3300}to{box-shadow:0 0 #ff5c3300}}.error{margin:16px 0 0;color:#ff8a70;font-size:14px}.hidden-input{display:none}.foot{padding:20px 28px 28px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.editor{height:100dvh;display:grid;grid-template-rows:56px 1fr 132px;grid-template-columns:1fr 280px;grid-template-areas:"top top" "stage side" "time time"}.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line)}.stage{grid-area:stage;display:grid;place-items:center;padding:20px;min-width:0;background:radial-gradient(circle at 20% 0%,rgba(255,92,51,.08),transparent 40%),var(--bg)}.stage canvas{width:min(100%,1100px);height:auto;max-height:calc(100dvh - 228px);border-radius:8px;cursor:crosshair}.side{grid-area:side;border-left:1px solid var(--line);padding:16px;overflow:auto;background:var(--bg-2)}.side h2{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}.field{margin-bottom:14px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.field input[type=range]{width:100%}.field select{width:100%;background:#0c0c0b;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:999px;border:2px solid transparent;padding:0}.swatch[data-on=true]{border-color:var(--text)}.hint{font-size:12px;color:var(--muted);line-height:1.45}.helper-line{margin-top:18px}.check{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0 18px}.speed{display:flex;align-items:center;gap:6px;margin-left:auto}.speed select{background:#0c0c0b;border:1px solid var(--line);border-radius:8px;padding:4px 8px}.trim-shade{position:absolute;top:0;bottom:0;background:#00000073;pointer-events:none}.field input[type=color]{width:48px;height:28px;padding:0;border:1px solid var(--line);background:transparent}.time{grid-area:time;border-top:1px solid var(--line);padding:10px 16px 12px;display:grid;gap:8px;background:#10100f}.time-controls{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;color:var(--muted)}.rail{position:relative;height:56px;background:#1a1a17;border:1px solid var(--line);border-radius:8px;overflow:hidden}.rail input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.mark{position:absolute;top:8px;width:10px;height:40px;margin-left:-5px;border-radius:3px;background:var(--accent);cursor:pointer}.mark[data-on=true]{outline:2px solid var(--accent-2)}.mark[data-auto=true]{background:#f0a36a}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#fff;pointer-events:none}.kicker{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}.progress{position:fixed;inset:0;background:#080807b8;display:grid;place-items:center;z-index:20}.progress-card{background:var(--bg-2);border:1px solid var(--line);padding:20px 24px;border-radius:12px;min-width:240px}@media(max-width:800px){.editor{grid-template-columns:1fr;grid-template-rows:52px 1fr auto 160px;grid-template-areas:"top" "stage" "side" "time";height:auto;min-height:100dvh}.side{border-left:0;border-top:1px solid var(--line)}}