:root { color-scheme: dark; --bg:#141321; --panel:#1e1d30; --line:#38354b; --ink:#f6f3ff; --muted:#b2abc6; --accent:#c1b0ff; --green:#92ddbb; font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--ink); padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left)); }
button,input,select { font:inherit; } button,a,label { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button,a { touch-action:manipulation; }
button,.primary,.secondary { border-radius:14px; padding:12px 16px; min-height:48px; border:1px solid var(--line); background:var(--panel); color:var(--ink); text-decoration:none; }
button:disabled { opacity:.4; cursor:default; } button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.primary { background:var(--accent); color:#211938; border-color:var(--accent); font-weight:650; } .secondary { background:transparent; }
a { color:var(--accent); } h1 { font-size:clamp(28px,7vw,40px); line-height:1.15; letter-spacing:-.035em; margin:8px 0 14px; } h2 { font-size:21px; line-height:1.3; } h3 { font-size:17px; }
p { color:var(--muted); } small { color:var(--muted); } input { width:100%; min-width:0; background:var(--bg); border:1px solid var(--line); color:var(--ink); border-radius:12px; padding:12px; min-height:48px; }
.topbar { max-width:780px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:96px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:650; font-size:18px; } .brand small { display:block; letter-spacing:.16em; font-size:10px; font-weight:500; }
.brand-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; background:var(--accent); color:#211938; font-size:28px; }
.icon-button { min-width:44px; min-height:44px; width:44px; height:44px; padding:0; border-radius:50%; background:transparent; }
main,footer { max-width:780px; margin:0 auto; } .eyebrow { text-transform:uppercase; font-size:11px; letter-spacing:.14em; color:var(--green); font-weight:700; }
.hero { padding:22px 0 28px; } .hero p { max-width:34em; margin-bottom:24px; } .hero .primary { width:100%; }
.summary { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; } .pill { font-size:12px; border:1px solid var(--line); border-radius:20px; padding:5px 10px; color:var(--muted); }
.library-heading { display:flex; justify-content:space-between; align-items:center; margin:20px 0 10px; gap:12px; } .library-heading h2 { margin:0; }
.cards { display:grid; gap:12px; margin:16px 0 28px; }.card { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.card-open { display:flex; text-align:left; width:100%; gap:16px; padding:18px; align-items:center; border:0; border-radius:0; background:transparent; }
.card-icon { width:54px; height:62px; flex:0 0 54px; display:grid; place-items:center; border-radius:14px; background:#c1b0ff12; color:var(--accent); font-size:22px; }
.card-text { min-width:0; } .card-text strong,.card-text small { display:block; overflow-wrap:anywhere; }.card-text small { font-size:12px; margin-top:5px; } .card-text .ready { color:var(--green); }
.empty { text-align:center; padding:38px 18px; border:1px dashed var(--line); border-radius:20px; }.empty .empty-mark { font-size:44px; color:var(--accent); }.empty h2 { margin-bottom:4px; }
.backups { border-top:1px solid var(--line); padding:22px 0; }.backups p { font-size:13px; }.button-row { display:flex; gap:10px; flex-wrap:wrap; }.button-row>* { flex:1; }
footer { padding:18px 0 32px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); display:grid; gap:6px; }
.back { background:transparent; border:0; padding:0; color:var(--accent); }.player-heading { margin:18px 0; }.player-heading h1 { font-size:25px; overflow-wrap:anywhere; }.player-heading p { font-size:13px; }
.player-frame { background:#050508; border:1px solid var(--line); border-radius:18px; overflow:hidden; } video { width:100%; max-height:52dvh; display:block; object-fit:contain; background:#000; }
.player-controls { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:14px; }.player-controls input { grid-column:1/-1; min-height:28px; padding:0; accent-color:var(--accent); }.player-controls output { font-size:12px; font-variant-numeric:tabular-nums; }
.speeds { display:flex; gap:6px; margin:12px 0; }.speeds button { flex:1; padding:8px 4px; font-size:14px; }.speeds [aria-pressed="true"] { color:#211938; background:var(--accent); border-color:var(--accent); }
.loop-status { color:var(--green); min-height:24px; font-size:13px; }.loop-form { padding:18px; border:1px solid var(--line); border-radius:18px; margin:22px 0; }.loop-form h2 { margin:0 0 14px; }.bounds { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }.bounds label { font-size:12px; color:var(--muted); }.bounds input { margin-top:4px; }.loop-form .primary { margin-top:12px; width:100%; }
.loop-row { padding:14px 0; border-bottom:1px solid var(--line); }.loop-row-top { display:flex; align-items:center; gap:10px; }.loop-play { flex:1; text-align:left; padding:12px 14px; }.loop-play strong,.loop-play small { display:block; overflow-wrap:anywhere; }.loop-play[aria-pressed="true"] { border-color:var(--green); }.loop-actions { display:flex; gap:10px; margin-top:8px; }.loop-actions button { background:transparent; border:0; font-size:13px; padding:8px; min-height:44px; }.danger { color:#f6abab; }.delete-video { margin:28px 0; width:100%; }
.message { position:fixed; bottom:max(20px,env(safe-area-inset-bottom)); left:20px; right:20px; max-width:740px; margin:auto; z-index:20; background:#f3eeff; color:#211938; border-radius:14px; padding:16px 20px; box-shadow:0 8px 50px #0006; }
dialog { width:min(560px,calc(100vw - 24px)); max-height:85dvh; padding:24px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:22px; } dialog::backdrop { background:#000a; }.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.dialog-heading h2 { margin:0; } dialog ol { padding-left:22px; } dialog li { margin:14px 0; color:var(--muted); } .inline-error { color:#f6abab; }
@media(min-width:650px) { .hero .primary { width:auto; min-width:240px; }.cards { grid-template-columns:1fr 1fr; }.player-page { max-width:620px; margin:auto; } }
@media(prefers-reduced-motion:no-preference) { button { transition:background .15s; } }

.pin-gate{max-width:390px;margin:48px auto;padding:24px}.pin-gate h1{font-size:34px}.pin-gate form{display:grid;gap:16px;margin-top:28px}.pin-gate input{width:100%;font-size:28px;letter-spacing:.4em;text-align:center;min-height:56px}.pin-hint{font-size:13px;opacity:.65}#pin-error{color:#ffb6b6;min-height:22px;font-size:14px}#lock{margin-left:auto;font-size:13px}#help{margin-left:8px}[hidden]{display:none!important}