:root{--bg: #16171b;--panel: #1e2026;--panel-2: #262932;--border: #30333d;--text: #e8e9ee;--muted: #8b8f9c;--accent: #4f8cff;--accent-2: #3a6fd8;--wave: #5a95ff;--wave-cut: #3b4252;--cut: rgba(255, 82, 82, .22);--cut-edge: rgba(255, 82, 82, .55);--threshold: #ffb84d;--filler: rgba(255, 170, 60, .32);--filler-edge: rgba(255, 170, 60, .9);--playhead: #ff4d4d;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{display:grid;grid-template-rows:auto 1fr auto;height:100vh}.topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.brand{font-weight:700;font-size:15px;letter-spacing:.2px}.file-name{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}.btn:hover{background:var(--accent-2)}.btn:disabled{opacity:.45;cursor:default}.btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}.btn.secondary:hover{background:#2e313b}.workspace{display:grid;grid-template-columns:1fr 300px;min-height:0}.viewer{display:grid;grid-template-rows:1fr auto;min-height:0;min-width:0}.video-wrap{position:relative;background:#0d0e10;min-height:0;display:flex;align-items:center;justify-content:center}video{max-width:100%;max-height:100%;display:block}.video-wrap.dragging{outline:2px dashed var(--accent);outline-offset:-10px}.drop-hint,.busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px}.drop-icon{font-size:30px;color:var(--muted)}.busy{background:#0d0e10c7}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.muted{color:var(--muted)}.transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;border-top:1px solid var(--border);background:var(--panel)}.transport-center{display:flex;gap:8px}.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px;cursor:pointer}.icon-btn:disabled{opacity:.4;cursor:default}.timecode{justify-self:end;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted)}.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}.toggle.small{font-size:12px;color:var(--muted)}.panel{border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}.tabs{display:flex;border-bottom:1px solid var(--border)}.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 0;font:inherit;font-weight:600;cursor:pointer}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.tab-body{padding:14px;overflow-y:auto;flex:1}.field{margin-bottom:18px}.field>label,.field-head label:first-child{font-weight:600}.field-head{display:flex;justify-content:space-between;align-items:center}.hint{color:var(--muted);font-size:12px;margin:2px 0 6px}.slider-row{display:flex;align-items:center;gap:8px;margin-top:4px}.slider-row input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}.slider-row input[type=number]{width:64px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:3px 5px;font:inherit;font-variant-numeric:tabular-nums}.slider-row input:disabled{opacity:.5}.unit{color:var(--muted);font-size:12px}.unit.side{width:34px}.link-btn{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:inherit}.timeline-area{border-top:1px solid var(--border);background:var(--panel)}.timeline{position:relative;height:150px;cursor:crosshair;user-select:none}#timelineCanvas{position:absolute;inset:0;width:100%;height:100%}.playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--playhead);pointer-events:none;display:none}.statusbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}#stats{font-weight:500}#stats b{font-weight:700}.zoom{justify-self:end;display:flex;align-items:center;gap:8px}.zoom input{width:140px;accent-color:var(--accent)}.export-group{margin-bottom:18px}.export-group h4{margin:0 0 6px;font-size:13px}.export-list{display:grid;gap:6px}.export-list .btn{justify-content:space-between;width:100%}.export-list .btn small{font-weight:400;opacity:.7}.progress{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-top:8px}.progress>div{height:100%;width:0;background:var(--accent);transition:width .15s}.toast{position:fixed;left:50%;bottom:200px;transform:translate(-50%);background:#3a1d1d;border:1px solid #7a2e2e;color:#ffd7d7;padding:10px 14px;border-radius:8px;max-width:520px;z-index:10}@media(max-width:760px){.workspace{grid-template-columns:1fr;grid-template-rows:1fr auto}.panel{border-left:0;border-top:1px solid var(--border);max-height:40vh}}.text-input{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:6px 8px;font:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;background:var(--panel-2);padding:0 3px;border-radius:3px}.export-howto{margin-top:10px;line-height:1.5}.render-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}:root{--display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;--landing-bg: #121317;--card: #1b1d23}.landing{height:100vh;overflow-y:auto;background:var(--landing-bg);scroll-behavior:smooth}.l-wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}.landing a{color:inherit}.l-nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--landing-bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.l-nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:12px}.l-logo,.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:18px;text-decoration:none;color:var(--text)}.brand{font-size:15px}.l-links{display:flex;align-items:center;gap:20px}.l-links a{text-decoration:none;color:var(--muted)}.l-links a:hover{color:var(--text)}.l-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:72px 56px}.l-eyebrow{margin:0 0 14px;color:var(--wave);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.l-hero h1{font-family:var(--display);font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.02em;font-weight:800;margin:0 0 18px;text-wrap:balance}.l-lead{font-size:17px;line-height:1.6;color:#c3c6d0;max-width:34em;margin:0 0 22px}.l-ticks{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0;color:var(--muted)}.l-ticks li:before{content:"✓";color:var(--wave);margin-right:6px;font-weight:700}.l-drop{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 24px 26px;background:var(--card);border:1.5px dashed #3a3e4a;border-radius:16px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}.l-drop:hover,.l-drop.dragging{border-color:var(--accent);background:#1d2129}.l-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}#heroWave{width:100%;height:120px;margin-bottom:6px}.l-drop-title{font-family:var(--display);font-size:22px;font-weight:700}.l-drop-btn{padding:9px 18px;font-size:14px}.l-drop-hint{color:var(--muted);font-size:12px}.l-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding-block:0 8px}.l-stats>div{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-top:1px solid var(--border)}.l-stats b{font-family:var(--display);font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}.l-stats span{color:var(--muted)}.l-note{grid-column:1 / -1;margin:4px 20px 0;font-size:12px;color:var(--muted)}.l-section{padding-block:56px 8px}.l-section h2{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}.l-sub{color:var(--muted);font-size:15px;margin:0 0 22px}.l-steps{list-style:none;counter-reset:step;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.l-steps li{counter-increment:step}.l-steps li:before{content:counter(step);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border);font-weight:700;margin-bottom:10px}.l-steps h3{margin:0 0 6px;font-size:17px}.l-steps p,.l-private p,.l-faq p{color:#b8bbc6;line-height:1.6;font-size:15px;margin:0 0 10px;max-width:62ch}.l-editors{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.l-editors li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px}.l-editors span{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.l-private>div{border-left:3px solid var(--cut-edge);padding-left:22px}.l-faq{display:grid;gap:2px;margin-top:16px}.l-faq details{border-bottom:1px solid var(--border);padding:14px 0}.l-faq summary{cursor:pointer;font-weight:600;font-size:15px}.l-faq details p{margin-top:10px}.l-footer{padding-block:56px 40px;color:var(--muted);font-size:13px}.l-footer a{color:inherit}@media(max-width:820px){.l-hero{grid-template-columns:1fr;gap:32px;padding-block:40px 36px}.l-steps,.l-stats{grid-template-columns:1fr}.l-editors{grid-template-columns:1fr 1fr}.l-links a{display:none}}@media(prefers-reduced-motion:reduce){.landing{scroll-behavior:auto}}.filler-info{margin-top:6px}.filler-info b{color:var(--filler-edge)}.mark-btn{margin-top:8px;width:100%;justify-content:center}.mark-btn[aria-pressed=true]{background:var(--filler);border-color:var(--filler-edge)}
