:root{color:#eef2f7;font-synthesis:none;text-rendering:optimizelegibility;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#080b10;--bg-elevated:#0f141c;--bg-panel:#121924;--bg-soft:#171f2b;--bg-strong:#0b1017;--border:#212b39;--border-strong:#2d394a;--text:#eef2f7;--text-soft:#a5b1c2;--text-muted:#7d8999;--accent:#67c8ff;--accent-strong:#3e9fda;--danger:#ff7d7d;--shadow:0 18px 44px #0000004d;background:radial-gradient(circle at top,#141b27 0%,#0b0f15 48%,#080b10 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);min-width:320px;min-height:100vh;color:var(--text);margin:0}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-weight:700;transition:transform .14s,background .14s,border-color .14s,color .14s,opacity .14s;display:inline-flex}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.45}input,button,video{outline:none}input:focus,button:focus-visible{box-shadow:0 0 0 3px #67c8ff33}.app-shell{min-height:100vh;padding:22px}.app-header{align-items:center;margin-bottom:18px;display:flex}.brand-lockup{align-items:center;gap:14px;display:flex}.brand-mark{color:#04131d;text-transform:lowercase;background:linear-gradient(135deg,#67c8ff 0%,#3e9fda 100%);border:1px solid #ffffff1a;border-radius:8px;align-items:center;width:42px;height:42px;font-size:1.15rem;font-weight:900;display:grid;box-shadow:inset 0 1px #ffffff1f}.eyebrow,.hero-eyebrow{color:var(--text-muted);letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-size:.74rem;font-weight:800}.brand-name{margin:0;font-size:1rem;font-weight:800;line-height:1}.dropzone{background:linear-gradient(180deg, #ffffff05, #fff0), var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:8px;min-height:calc(100vh - 94px);transition:background .16s,border-color .16s,box-shadow .16s}.dropzone.is-dragging{background:linear-gradient(180deg, #67c8ff14, #67c8ff00), var(--bg-elevated);border-color:var(--accent);box-shadow:0 0 0 1px #67c8ff2e, var(--shadow)}.dropzone.has-video{border-color:var(--border-strong)}.file-input{display:none}.start-screen{flex-direction:column;align-items:stretch;gap:18px;min-height:calc(100vh - 120px);padding:24px;display:flex}.hero-copy{max-width:none}.hero-copy h2{white-space:nowrap;margin:0;font-size:clamp(1rem,3.5vw,3.35rem);line-height:1.02}.hero-note{color:var(--text-soft);max-width:72ch;margin:12px 0 0;font-size:.98rem;font-weight:600;line-height:1.5}.hero-note code{color:#d9ecff}.empty-state{background:linear-gradient(180deg, #ffffff05, #fff0), var(--bg-panel);border:1px dashed var(--border-strong);color:var(--text);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;width:100%;min-height:360px}.empty-state:hover{border-color:var(--accent);color:#fff}.empty-title{font-size:clamp(1.6rem,3.6vw,3.3rem);font-weight:800;line-height:1.02}.empty-subtitle{color:var(--text-soft);font-size:1rem;font-weight:600}.url-form{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;grid-template-columns:auto minmax(0,720px) auto;align-items:center;gap:10px;width:min(920px,100%);padding:10px;display:grid}.url-form svg{color:var(--text-muted)}.url-form input,.clip-title-row input,.time-fields input{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:6px;width:100%;min-width:0;min-height:42px;padding:0 12px}.url-form input::placeholder,.clip-title-row input::placeholder,.time-fields input::placeholder{color:var(--text-muted)}.primary-button,.url-form button,.copy-command{background:var(--accent);color:#05110f;border:1px solid #0000}.primary-button:hover:not(:disabled),.url-form button:hover:not(:disabled),.copy-command:hover:not(:disabled){background:#8cd9ff}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.workspace{grid-template-columns:minmax(0,1fr) minmax(360px,470px);gap:22px;min-height:calc(100vh - 94px);padding:18px;display:grid}.player-pane,.clip-pane{min-width:0}.player-pane{flex-direction:column;gap:16px;display:flex}.file-bar,.pane-header,.clip-title-row,.clip-actions,.time-row,.selection-readout{justify-content:space-between;align-items:center;gap:12px;display:flex}.file-bar{margin-bottom:2px}.file-bar h1,.pane-header h2{overflow-wrap:anywhere;margin:0;font-size:clamp(1.35rem,2.3vw,2.3rem);line-height:1.06}.secondary-button,.mark-panel button,.control-grid button,.clip-actions button{background:var(--bg-soft);border:1px solid var(--border);color:var(--text)}.secondary-button:hover:not(:disabled),.mark-panel button:hover:not(:disabled),.control-grid button:hover:not(:disabled),.clip-actions button:hover:not(:disabled){border-color:var(--border-strong);background:#1d2735}.secondary-button{flex:none}.source-actions{flex-wrap:wrap;flex:none;gap:10px;display:flex}.video-player{aspect-ratio:16/9;border:1px solid var(--border);object-fit:contain;background:#05080c;border-radius:8px;width:100%;max-height:68vh;display:block}.youtube-player iframe{border-radius:8px;width:100%;height:100%}.timeline-wrap{height:36px;position:relative}.timeline{--progress:0%;accent-color:var(--accent);appearance:none;background:linear-gradient(90deg, var(--accent) var(--progress), transparent var(--progress)), #202937;border-radius:999px;outline:0;width:100%;height:12px;margin:12px 0}.timeline::-webkit-slider-thumb{appearance:none;background:#f5f7fb;border:3px solid #0f1723;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 10px #00000057}.timeline::-moz-range-thumb{background:#f5f7fb;border:3px solid #0f1723;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 10px #00000057}.range-overlay{pointer-events:none;position:absolute;inset:0 12px}.saved-range,.draft-range{border-radius:999px;height:12px;position:absolute;top:12px}.saved-range{background:#67c8ff57}.draft-range{background:#67c8ff38}.time-row,.clip-actions{color:var(--text-soft);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.9rem;font-weight:700}.control-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.control-grid button{min-width:0}.control-grid .play-button{background:var(--accent);color:#05110f;border:1px solid #0000}.control-grid .play-button:hover:not(:disabled){background:#8cd9ff;border-color:#0000}.mark-panel{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:10px;display:grid}.mark-panel .icon-button,.icon-button{aspect-ratio:1;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);width:42px;min-height:42px;padding:0}.mark-panel .icon-button:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#1d2735}.icon-button.danger{color:var(--danger)}.selection-readout,.command-bar,.api-message{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px}.selection-readout{color:var(--text);flex-wrap:wrap;padding:14px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.9rem;font-weight:700}.command-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.command-meta{min-width:0}.command-options{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px;display:flex}.command-meta p:last-child{color:var(--text-soft);max-width:60ch;margin:0;line-height:1.45}.toggle-row{color:var(--text-soft);align-items:center;gap:8px;font-weight:800;display:inline-flex}.toggle-row input{accent-color:var(--accent);width:18px;height:18px}.offset-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px;display:flex}.offset-help{color:var(--text-soft);margin:0;line-height:1.45}.offset-controls{flex:340px;justify-content:flex-end;align-items:center;gap:12px;display:flex}.offset-slider{flex:220px;margin:0}.offset-input-wrap{align-items:center;gap:10px;display:flex}.offset-input-wrap input{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:6px;width:98px;min-height:42px;padding:0 12px}.offset-input-wrap span{color:var(--text-soft);text-align:right;min-width:62px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.85rem;font-weight:800}.api-message{color:#d7c49e;width:100%;margin:0;padding:12px 14px;font-weight:700;line-height:1.4}.shortcut-strip{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.82rem;font-weight:800;display:flex}.shortcut-strip span{align-items:center;gap:5px;display:inline-flex}kbd{background:var(--bg-soft);border:1px solid var(--border);border-bottom-color:var(--border-strong);color:var(--text);text-align:center;border-radius:6px;min-width:24px;padding:3px 6px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.76rem;font-weight:800}.clip-pane{background:linear-gradient(180deg, #ffffff05, #fff0), var(--bg-panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;max-height:calc(100vh - 94px);display:flex;overflow:hidden}.pane-header{border-bottom:1px solid var(--border);padding:18px}.clip-list{flex-direction:column;flex:1;gap:14px;padding:18px;display:flex;overflow:auto}.clip-empty{color:var(--text-muted);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:260px;font-weight:700;line-height:1.4;display:flex}.clip-card{border:1px solid var(--border);background:#ffffff05;border-radius:8px;flex-direction:column;gap:12px;padding:14px;display:flex}.clip-title-row input{font-weight:800}.time-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.time-fields label{color:var(--text-muted);text-transform:uppercase;flex-direction:column;gap:5px;font-size:.74rem;font-weight:800;display:flex}.time-fields input,.clip-card pre{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}.clip-card pre{background:var(--bg-strong);border:1px solid var(--border);color:#d8e2ee;white-space:pre-wrap;word-break:break-word;border-radius:6px;margin:0;padding:12px;font-size:.78rem;line-height:1.55;overflow-x:auto}.copy-command{width:100%}@media (width<=980px){.workspace{grid-template-columns:1fr}.clip-pane{max-height:none}.hero-copy h2{white-space:normal}}@media (width<=620px){.app-shell{padding:12px}.app-header{flex-direction:column;align-items:stretch;gap:12px}.dropzone,.workspace{min-height:calc(100vh - 24px)}.start-screen{padding:16px}.file-bar,.pane-header{flex-direction:column;align-items:stretch}.secondary-button,.source-actions{width:100%}.source-actions{flex-direction:column}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid .play-button{grid-area:1/1/auto/-1}.mark-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.mark-panel .icon-button{width:100%}.url-form{grid-template-columns:1fr}.command-bar{align-items:stretch}.command-options,.offset-controls,.offset-input-wrap{flex-direction:column;align-items:stretch}.offset-input-wrap span{text-align:left;min-width:0}}