:root{
  color-scheme:dark;
  --bg:#0c0d0c;--surface:#141514;--surface-2:#1b1c1b;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --text:#ededea;--muted:#8d918a;--faint:#5f635d;
  --accent:#c8f169;--accent-ink:#161c05;--accent-soft:rgba(255,255,255,.12);
  --danger:#ff9b87;--warn:#e9c77f;
  --r:14px;--r-sm:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 28px;background:rgba(12,13,12,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.2px;text-decoration:none}
.logo{width:22px;height:22px;border-radius:7px;background:var(--accent);position:relative}
.logo::after{content:'';position:absolute;left:8px;top:6px;border-left:8px solid var(--accent-ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.status-pill{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.status-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

main{width:100%;max-width:1900px;margin:0 auto;padding:0 clamp(16px,2.4vw,40px) 60px}

/* hero / import */
.hero{text-align:center;padding:56px 0 28px;transition:padding .3s}
.hero h1{font-size:40px;line-height:1.1;letter-spacing:-1.2px;font-weight:700;margin:0 0 12px}
.lead{color:var(--muted);max-width:560px;margin:0 auto 26px;font-size:16px}
.url-box{display:flex;gap:8px;max-width:640px;margin:0 auto;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;transition:border-color .2s}
.url-box:focus-within{border-color:var(--accent)}
.url-box input{flex:1;min-width:0;background:none;border:0;outline:0;padding:10px 16px;font-size:15px}
.url-box input::placeholder{color:var(--faint)}
.url-box button{border-radius:999px;padding:10px 24px}
.hero .hint{text-align:center;margin-top:12px}
.link{color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* buttons */
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.4;cursor:not-allowed}
.primary,.secondary,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-sm);padding:11px 18px;font-weight:600;font-size:14px;transition:background .15s,border-color .15s,transform .1s;text-decoration:none}
.primary{background:var(--accent);color:var(--accent-ink)}
.primary:hover:enabled{background:#ffffff}
.secondary{background:var(--surface-2);border:1px solid var(--line-2)}
.secondary:hover:enabled{border-color:rgba(255,255,255,.25)}
.ghost{border:1px solid var(--line-2);color:var(--muted);font-weight:500}
.ghost:hover:enabled{color:var(--text)}
.sm{padding:6px 12px;font-size:12.5px}
.wide{width:100%}
.primary:active,.secondary:active{transform:translateY(1px)}

/* progress */
.progress{max-width:640px;margin:18px auto 0;text-align:left}
.taskbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;width:min(440px,calc(100% - 32px));background:rgba(27,28,27,.96);backdrop-filter:blur(8px);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px 10px 44px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.taskbar::before{content:'';position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.taskbar .bar{position:absolute;left:22px;right:22px;bottom:4px;height:2px;margin:0;background:none}
.taskbar .progress-row{font-size:13px}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.progress-row span:last-child{color:var(--accent);font-variant-numeric:tabular-nums}
.bar{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:8px 0 6px}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.bar.indeterminate i{width:30%!important;animation:slide 1.2s infinite ease-in-out}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
#status{position:fixed;top:70px;left:50%;transform:translate(-50%,-12px);z-index:40;max-width:min(560px,calc(100% - 32px));width:max-content;
  background:rgba(27,28,27,.97);border:1px solid var(--line-2);border-radius:12px;padding:11px 16px;margin:0;font-size:14px;line-height:1.45;
  color:var(--text);text-align:left;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;cursor:pointer}
#status::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}
#status.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#status.error::before{background:var(--danger)}
#status.error{border-color:rgba(255,155,135,.35)}

/* layout */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,26vw,440px);gap:24px;margin-top:20px;align-items:start}
.col-main{display:grid;gap:20px;min-width:0}
.col-side{position:sticky;top:76px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.side{padding:18px;max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
h2{font-size:16px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
.num{width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);font-size:12px;display:grid;place-items:center;color:var(--muted)}
.muted-tag{font-size:12.5px;color:var(--muted);font-weight:400}
.row-gap{display:flex;gap:6px}
.hint{color:var(--muted);font-size:12.5px;margin:10px 0 0}
.note{color:var(--muted);font-size:12.5px;text-align:center;margin:10px 0 14px;line-height:1.5}

/* player */
.source-name{margin:-8px 0 12px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-sm);overflow:hidden}
.player-wrap video,.player-wrap iframe{width:100%;height:100%;border:0;display:none}
.player-wrap iframe:not([hidden]){display:block}
.player-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.player-wrap.drawing{outline:2px solid var(--accent)}
#draw-layer{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;z-index:3}
#empty-source{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:var(--surface-2)}
#empty-source h3{margin:0 0 4px;font-size:15px;font-weight:600}
#empty-source p{margin:0;color:var(--muted);font-size:13px}
.timeline{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline input{flex:1}
input[type=range]{accent-color:var(--accent);width:100%}

.manual-cut{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;color:var(--muted);font-size:13.5px;list-style:none;user-select:none}
summary::-webkit-details-marker{display:none}
summary::before{content:'+';display:inline-block;width:16px;color:var(--accent)}
details[open]>summary::before{content:'–'}
summary span{color:var(--faint);font-size:12.5px;margin-left:6px}
.trim-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.trim-row label{font-size:12.5px;color:var(--muted)}
.with-btn{display:flex;gap:6px;margin-top:4px}
.with-btn input{width:96px}
.length{margin-left:auto;padding-bottom:8px}
.length strong{font-size:18px;font-weight:600;color:var(--accent)}

/* inputs */
input[type=text],input[type=number],input[type=datetime-local],input[type=password],input[type=search],select,textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 12px;outline:0;width:100%;transition:border-color .15s}
input[type=text]:focus,input[type=number]:focus,input[type=datetime-local]:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:var(--surface)}
input[type=checkbox]{accent-color:var(--accent)}

/* fields & chips */
.field{display:block;margin-bottom:18px}
.label,.field-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;font-weight:500}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.pair label{font-size:12.5px;color:var(--muted)}
.pair input,.pair select{margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:7px 12px;border-radius:999px;background:var(--surface-2);border:1px solid transparent;font-size:13px;color:#c9ccc5;transition:all .15s}
.chips button:hover:enabled{color:var(--text);border-color:var(--line-2)}
.chips button.on{background:var(--accent-soft);border-color:rgba(255,255,255,.45);color:var(--accent)}
.chips.grid2{display:grid;grid-template-columns:1fr 1fr}
.chips.grid2 button{border-radius:var(--r-sm);padding:9px 10px}
.field>input[type=text]{margin-top:8px}
.more{border-top:1px solid var(--line);padding-top:12px;margin:4px 0 14px}
.more[open]>summary{margin-bottom:14px}

.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.presets button{text-align:left;padding:11px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid transparent;transition:all .15s}
.presets button:hover{border-color:var(--line-2)}
.presets button b{display:block;font-size:13.5px;font-weight:600}
.presets button small{font-size:11.5px;margin-top:1px}
.presets button.on{border-color:rgba(255,255,255,.5);background:var(--accent-soft)}
.presets button.on b{color:var(--accent)}

.actions{display:flex;gap:10px;margin-top:6px}
.actions button{flex:1;padding:13px}

/* side panel */
.phone{width:clamp(200px,15vw,270px);aspect-ratio:9/16;margin:0 auto;border-radius:16px;overflow:hidden;background:#000;position:relative;box-shadow:0 0 0 1px var(--line-2),0 20px 40px rgba(0,0,0,.45)}
.phone canvas{width:100%;height:100%;display:block}
#empty-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
#empty-preview p{color:var(--faint);font-size:13px;margin:0}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--bg);border-radius:var(--r-sm);margin-bottom:16px}
.tab{padding:8px 4px;border-radius:7px;font-size:13px;color:var(--muted);font-weight:500}
.tab.on{background:var(--surface-2);color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
.toggle{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.toggle input{margin-top:3px;width:16px;height:16px}
.toggle small{font-size:12px}
.tab-panel>.toggle:last-of-type{margin-bottom:16px}
.slider{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:10px}
.slider input{flex:1}
#camera-field small{margin-top:6px}

.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.style-grid button{padding:10px 4px 7px;border-radius:var(--r-sm);background:#232523;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;gap:3px}
.style-grid button.on{border-color:var(--accent);background:#262b1d}
.style-grid small{font-size:11px;margin:0}
.cs{display:block;min-height:20px;font-size:12px;line-height:1.3;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;white-space:nowrap}
.cs i,.cs u{font-style:normal;text-decoration:none;color:var(--hl,#FFE14D)}
.cs u{opacity:.25;color:#fff}
.cs-viral{font-family:'Arial Black',sans-serif;font-weight:900}
.cs-karaoke,.cs-reveal{font-family:'Segoe UI',sans-serif;font-weight:900}
.cs-word{font-family:Impact,sans-serif;font-size:16px;color:var(--hl,#FFE14D)}
.cs-clean{font-family:'Segoe UI',sans-serif;font-weight:600}
.cs-box{font-family:'Segoe UI',sans-serif;font-weight:700;background:#000b;padding:1px 6px;border-radius:4px;text-shadow:none}
.cs .boxw{background:var(--hl,#FFE14D);color:#000;padding:0 3px;border-radius:3px;text-shadow:none}
.cs .big{font-size:15px}
.cs-beast{font-family:Impact,sans-serif;font-size:15px;color:var(--hl,#FFE14D);-webkit-text-stroke:.6px #000}
.cs-neon{font-family:'Segoe UI',sans-serif;font-weight:900;text-shadow:0 0 6px var(--hl,#FFE14D)}
.cs-minimal{font-family:'Segoe UI',sans-serif;font-weight:600;font-size:11.5px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);transition:transform .15s}
.swatches button.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #fff}
#word-editor{max-height:360px;overflow:auto;padding-right:4px}
#word-editor label{font-size:11.5px;color:var(--faint)}
#word-editor input{padding:6px 8px;margin-top:2px}

/* suggestions */
#suggestions{display:grid;gap:10px}
.suggestion{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;background:var(--bg);transition:opacity .2s,border-color .2s}
.suggestion.off{opacity:.5}
.suggestion.active{border-color:rgba(255,255,255,.45)}
.s-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-top label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;cursor:pointer}
.s-top input{width:16px;height:16px}
.score{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.score.mid{background:rgba(233,199,127,.12);color:var(--warn)}
.score.low{background:rgba(255,155,135,.12);color:var(--danger)}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:var(--accent)}
.s-time{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.s-top .play{margin-left:auto}
.mini{padding:6px 12px;font-size:12.5px;border:1px solid var(--line-2);border-radius:999px;color:var(--text);font-weight:500}
.mini:hover:enabled{border-color:rgba(255,255,255,.25)}
.hook{margin:12px 0 2px;font-size:14.5px;line-height:1.5}
.hook::before{content:'“';color:var(--accent)}.hook::after{content:'”';color:var(--accent)}
.reason{font-size:13px;color:var(--muted);margin:0 0 12px}
.suggestion .field-label{margin:12px 0 6px}
.titles{display:grid;gap:4px}
.titles label{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;padding:7px 10px;border-radius:8px;cursor:pointer;color:#c9ccc5}
.titles label:hover{background:var(--surface-2)}
.titles label:has(input:checked){background:var(--accent-soft);color:var(--text)}
.titles input{accent-color:var(--accent);margin-top:3px}
.title-pick{margin-top:2px;font-weight:500}
.edit{margin-top:10px}
.edit[open]>summary{margin-bottom:4px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags button{padding:4px 10px;font-size:12px;border-radius:999px;border:1px dashed var(--line-2);color:var(--faint)}
.tags button.on{border:1px solid rgba(255,255,255,.35);color:#dff3b0;background:var(--accent-soft)}
.tags input{width:120px!important;padding:4px 10px!important;border-radius:999px!important;font-size:12px}
.nudge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.nudge input{width:84px!important;padding:6px 8px!important}
.sticky-actions{position:sticky;bottom:16px;margin-top:14px;display:flex}
.sticky-actions button{flex:1;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* results */
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.result-card{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:var(--bg);min-width:0}
.result-card video{display:block;width:100%;aspect-ratio:9/16;background:#000;border-radius:8px}
.result-card>small{margin:8px 2px 0}
.result-card select{margin-top:8px}
.result-card .tags{margin-top:8px}
.result-card textarea{margin-top:8px;resize:vertical;font-size:13px}
.result-card .row{display:flex;gap:6px;margin-top:8px}
.result-card .row>*{flex:1;padding:9px;font-size:13px}
.result-card .warning{color:var(--warn);font-size:12px;margin:8px 0 0}
#result-errors{color:var(--danger);font-size:13px}
#result-errors:empty{display:none}

@media(max-width:1000px){
  .workspace{grid-template-columns:1fr}
  .col-side{position:static}
  .card.side{max-height:none}
}
@media(max-width:640px){
  main{padding:0 16px 40px}
  .topbar{padding:12px 16px}
  .hero{padding:32px 0 18px}
  .hero h1{font-size:28px}
  .field-row,.pair{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .card{padding:16px}
  .length{margin-left:0}
}

/* quality */
.quality{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;flex-wrap:wrap}
.quality .label{margin:0}
.segmented{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;background:var(--bg);border-radius:var(--r-sm)}
.segmented button{padding:7px 14px;border-radius:7px;font-size:13px;color:var(--muted);font-weight:500;display:flex;align-items:baseline;gap:6px}
.segmented button small{display:inline;font-size:11px;color:var(--faint)}
.segmented button.on{background:var(--surface-2);color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
.segmented button.on small{color:var(--muted)}

/* clip states */
.state{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.state:empty{display:none}
.state.making::before{content:'';width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.state.ready{color:var(--accent)}
.state.ready::before{content:'✓'}
.result-card .player{position:relative}
.updating{position:absolute;top:8px;left:8px;font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.7);color:var(--text)}
.result-card.pending{display:flex;flex-direction:column}
.skeleton{aspect-ratio:9/16;border-radius:8px;background:linear-gradient(110deg,var(--surface-2) 30%,#232523 50%,var(--surface-2) 70%) 0 0/250% 100%;animation:shimmer 1.6s infinite linear;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.skeleton small{margin:0}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.pending-title{font-size:13px;color:var(--muted);margin:10px 2px 2px}
@keyframes shimmer{to{background-position:-250% 0}}
.result-card>.ghost{margin-top:6px}

/* subtitle phrases */
.phrases{display:grid;gap:6px;margin-top:8px}
.phrase{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.phrase textarea{resize:none;overflow:hidden;font-size:13.5px;line-height:1.4;padding:7px 10px;min-height:34px}
.stamp{font-size:11px;color:var(--muted);padding:8px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.stamp:hover{color:var(--accent);background:var(--surface-2)}

/* extra caption samples */
.cs-duo{line-height:1.1}
.cs-comic{font-family:'Comic Sans MS',sans-serif;font-weight:700}
.cs-retro{font-family:Impact,sans-serif;font-size:15px;letter-spacing:1px;text-shadow:3px 3px 0 var(--hl,#FFE14D)}
.cs-pill{font-family:'Segoe UI',sans-serif;font-weight:900;background:var(--hl,#FFE14D);color:#111;padding:1px 8px;border-radius:999px;text-shadow:none}
.cs-elegant{font-family:Georgia,serif;font-weight:700;font-style:italic;font-size:13px}

/* navigation */
.status-pill{justify-self:end}
.nav{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.nav button{padding:7px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);font-weight:500}
.nav button:hover{color:var(--text)}
.nav button.on{background:var(--surface-2);color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px 0 20px}
.view-head h1{font-size:30px;letter-spacing:-.8px;margin:0}
.lead-sm{color:var(--muted);margin:4px 0 0}
.view-head input[type=search]{max-width:280px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;outline:0}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.empty a{color:var(--accent)}
h2.sub{margin:28px 0 12px}
.error-text{color:var(--danger);font-size:12.5px}
code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:12px;word-break:break-all}
.teaser{font-size:12.5px;color:var(--accent);margin:10px 0 0}

/* library */
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.lib-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px}
.lib-media{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#000;cursor:pointer}
.lib-media img,.lib-media video{width:100%;height:100%;object-fit:cover;display:block}
.lib-time{position:absolute;right:8px;bottom:8px;font-size:11.5px;background:rgba(0,0,0,.7);padding:2px 8px;border-radius:999px}
.lib-title{background:none!important;border-color:transparent!important;padding:4px 2px!important;font-weight:600;font-size:14px}
.lib-title:hover,.lib-title:focus{border-color:var(--line-2)!important}
.lib-card .row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.lib-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-title{text-overflow:ellipsis}
.lib-delete{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:13px;opacity:0;transition:opacity .15s;z-index:2}
.lib-card:hover .lib-delete,.lib-delete:focus-visible{opacity:1}
@media(hover:none){.lib-delete{opacity:1}}
.lib-card .row>*{padding:7px 8px;font-size:12.5px}

/* calendar */
.calendar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal-title{min-width:150px;text-align:center;font-size:15px;align-self:center}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-week span{padding:10px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.cal-day{min-height:clamp(84px,10vh,130px);padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .15s}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover:not(.blank):not(.past){background:var(--surface-2)}
.cal-day.blank,.cal-day.past{cursor:default}
.cal-day.past .cal-num{color:var(--faint)}
.cal-num{font-size:12.5px;color:var(--muted)}
.cal-day.today .cal-num{color:var(--accent-ink);background:var(--accent);border-radius:999px;width:24px;height:24px;display:grid;place-items:center;font-weight:600}
.cal-post{font-size:11.5px;padding:3px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-post.posted{background:rgba(255,255,255,.06);color:var(--muted)}
.cal-post.failed{background:rgba(255,155,135,.12);color:var(--danger)}
.upcoming{display:grid;gap:8px}
.up-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.up-row img{width:44px;height:78px;object-fit:cover;border-radius:6px}
.up-row b{font-size:14px;font-weight:600}
.up-results{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin-top:4px}
.up-results a{color:var(--accent)}
.up-status{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.up-status.scheduled{color:var(--accent);background:var(--accent-soft)}
.up-status.failed{color:var(--danger)}

/* networks */
.networks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.net-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.net-head{display:flex;align-items:center;gap:12px}
.net-head h3{margin:0;font-size:16px;flex:1}
.net-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;color:#fff}
.net-logo.youtube{background:#e33}
.net-logo.tiktok{background:#111;box-shadow:inset 2px 0 #25f4ee,inset -2px 0 #fe2c55}
.net-logo.instagram{background:linear-gradient(45deg,#f9a825,#e1306c,#833ab4)}
.net-status{font-size:13px;color:var(--muted);margin:12px 0}
.net-status.ok{color:var(--accent)}
.net-setup{border-top:1px solid var(--line);padding-top:12px}
.net-setup[open]>summary{margin-bottom:10px}
.net-setup input{margin-bottom:8px}
.net-setup .hint a{color:var(--accent)}
.setup{margin-top:24px}

/* dialog */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r);width:min(520px,calc(100% - 32px));padding:24px}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.up-row .row-gap{flex-wrap:wrap;max-width:380px}
.up-results .hint{white-space:pre-wrap;overflow-wrap:anywhere}
.voice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}
.voice-row input{width:64px;height:36px;padding:2px}
.phrase select{grid-column:2;max-width:160px;padding:5px}
.cal-post.planned{background:var(--accent-soft);color:var(--accent)}
dialog h2{margin-bottom:18px}
.checks{display:flex;gap:8px;flex-wrap:wrap}
.check-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;cursor:pointer}
.check-pill.off{opacity:.45;cursor:not-allowed}
.check-pill:has(input:checked){border-color:rgba(255,255,255,.5);background:var(--accent-soft)}
@media(max-width:760px){.topbar{grid-template-columns:auto 1fr}.nav{grid-column:1/-1;order:3;justify-content:center}.status-pill{display:none}.up-row{grid-template-columns:44px 1fr}.cal-day{min-height:64px;padding:4px}.cal-post{font-size:10px;padding:2px 4px}}

input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
dialog .pair{grid-template-columns:1fr}
dialog .pair label,dialog .field{display:block;margin-bottom:14px}
.cal-title::first-letter{text-transform:uppercase}

.s-body{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:10px}
.s-stills{display:flex;gap:4px}
.s-stills img{width:84px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--surface-2);cursor:pointer}
.s-text>.hook:first-child,.s-text>.teaser:first-child{margin-top:0}
@media(max-width:640px){.s-body{grid-template-columns:1fr}.s-stills img{width:calc(50% - 2px)}}

.top-right{justify-self:end;display:flex;align-items:center;gap:12px}
.top-right .status-pill{justify-self:auto}
.phone-qr{display:grid;place-items:center;min-height:200px;margin:14px 0}
.phone-qr svg{width:220px;height:220px;border-radius:12px}
.center{text-align:center}

/* phone: style panel right after the options, before the moments and clips */
@media(max-width:1000px){
  .workspace{display:flex;flex-direction:column}
  .col-main{display:contents}
  .card-video{order:1}.card-options{order:2}.col-side{order:3}#suggestion-section{order:4}#results{order:5}
  .phone{width:min(62vw,260px)}
}
@media(max-width:640px){
  .topbar{position:sticky;padding:10px 16px}
  .nav button{padding:7px 14px}
  .hero{padding:18px 0 10px}
  .card{padding:16px;border-radius:12px}
  .chips button{padding:8px 12px}
  .presets{grid-template-columns:1fr 1fr}
  .style-grid{grid-template-columns:repeat(3,1fr)}
  .result-grid{grid-template-columns:1fr 1fr;gap:10px}
  .result-card .row{flex-direction:column}
  .sticky-actions{bottom:10px}
  .taskbar{bottom:12px}
  .view-head{padding:20px 0 14px}
  .view-head input[type=search]{max-width:none;width:100%}
  .library-grid{grid-template-columns:1fr 1fr;gap:10px}
  input,select,textarea{font-size:16px}  /* stops iPhone from zooming into fields */
}
html,body{overflow-x:clip}
.lib-card,.result-card,.suggestion{min-width:0}
.lib-title{min-width:0;width:100%}
@media(max-width:640px){
  .lib-card{padding:8px}
  .lib-card .row{grid-template-columns:1fr}
  .lib-card .row>*{padding:9px 6px}
  .lib-meta{font-size:11.5px}
}

/* library storage + recipes */
.storage{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.lib-media.recipe-only img{filter:grayscale(.6) brightness(.55)}
.lib-badge{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);text-align:center;font-size:12px;font-weight:600;background:rgba(12,13,12,.8);border:1px solid var(--line-2);border-radius:8px;padding:8px}
.lib-edited{position:absolute;left:8px;top:8px;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.lib-hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.lib-card>.ghost.wide{margin-top:2px}
/* editor */
.editor-bar{position:sticky;top:62px;z-index:16;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:10px 14px;border-radius:var(--r-sm);background:#1d2414;border:1px solid rgba(255,255,255,.4);font-size:14px}
.editor-bar b{color:var(--accent)}

.offline{max-width:720px;margin:24px auto}
.offline h2{margin-bottom:10px}
.offline ol{padding-left:20px;line-height:1.9;color:var(--text)}
.offline p{color:var(--muted)}

/* edit mode: only what matters for correcting a clip */
body.editing .card-options{display:none!important}
body.editing #suggestion-section .row-gap,body.editing .s-top input[type=checkbox],body.editing .score,body.editing .badge{display:none}
body.editing .suggestion{border-color:rgba(255,255,255,.45)}
.result-card .saved-tag{position:absolute;top:8px;left:8px;font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.7)}
.updating.new{background:rgba(255,255,255,.85);color:var(--accent-ink)}
body.editing .to-calendar{display:none}


/* =====================================================================
   VenusClip · v4 — black, white, gray. Color only as a soft spectrum glow.
   ===================================================================== */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#000;--surface:#0c0c0d;--surface-2:#161618;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --text:#f5f5f7;--muted:#86868b;--faint:#5b5b60;
  --accent:#f5f5f7;--accent-ink:#000;--accent-soft:rgba(255,255,255,.08);--ok:#30d158;
  --spectrum:linear-gradient(90deg,#0894ff,#c959dd 34%,#ff2e54 68%,#ff9004);
  --spectrum-c:conic-gradient(from var(--a),#0894ff,#c959dd,#ff2e54,#ff9004,#0894ff);
  --ease:cubic-bezier(.22,.8,.2,1);
  --r:18px;
}
body{font-family:Geist,'Segoe UI',system-ui,sans-serif;background:var(--bg);letter-spacing:-.006em}
::selection{background:rgba(201,89,221,.35)}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.logo{width:24px;height:24px;border-radius:7px;background:#f5f5f7;position:relative;flex:none}
.logo::after{content:'';position:absolute;left:9px;top:6.5px;border-left:8.5px solid #000;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.eyebrow{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 14px;letter-spacing:.01em}
.ai-text{background:var(--spectrum);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 9s ease-in-out infinite alternate}
@keyframes flow{to{background-position:100% 0}}
.muted{color:var(--muted)}

/* buttons */
.primary{background:#f5f5f7;color:#000;transition:background .2s,transform .2s var(--ease)}
.primary:hover:enabled{background:#fff}
.secondary{background:var(--surface-2);border:1px solid var(--line-2)}
.pill-btn,.ghost-btn,.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-size:14px;padding:9px 18px;text-decoration:none;transition:background .2s,color .2s,transform .35s var(--ease),box-shadow .3s;white-space:nowrap}
.pill-btn{background:#f5f5f7;color:#000}
.pill-btn:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.pill-btn.big{padding:15px 28px;font-size:16px}
.pill-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ghost-btn{border:1px solid var(--line-2);color:var(--text)}
.ghost-btn:hover{background:rgba(255,255,255,.06)}
.text-btn{color:var(--muted);padding:9px 12px}
.text-btn:hover{color:var(--text)}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--muted)}
.icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.icon-btn svg,.side-nav svg,.side-link svg,.new-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#1c1c1e;position:relative;flex:none}
.avatar::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;background:var(--spectrum-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin360 6s linear infinite}
@keyframes spin360{to{--a:360deg}}
body.signed .signed-out{display:none!important}
body:not(.signed) .signed-in{display:none!important}

/* =============================== site =============================== */
#site{position:relative;overflow-x:clip}
.site-nav{position:fixed;inset:0 0 auto;z-index:25;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px clamp(16px,3vw,44px);transition:background .3s,border-color .3s,padding .3s;border-bottom:1px solid transparent}
.site-nav.scrolled{background:rgba(0,0,0,.72);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-color:var(--line);padding-block:10px}
.site-links{display:flex;gap:4px}
.site-links a{position:relative;color:var(--muted);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.site-links a:hover{color:var(--text)}
.site-links a.on{color:var(--text);background:rgba(255,255,255,.07)}
.site-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.manage{padding:6px 16px 6px 6px}

/* hero */
.hero{text-align:left;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px);min-height:100svh;padding:110px clamp(16px,5vw,80px) 70px;max-width:1500px;margin:0 auto}
.hero h1{font-size:clamp(46px,6.6vw,96px);line-height:.95;letter-spacing:-.055em;font-weight:700;margin:0 0 24px}
.hero .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);max-width:520px;margin:0 0 34px}
.hero-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.text-link{color:var(--text);text-decoration:none;font-weight:500}
.text-link span{display:inline-block;transition:transform .3s var(--ease)}
.text-link:hover span{transform:translateY(3px)}
.hero-proof{display:flex;gap:0;list-style:none;padding:0;margin:48px 0 0}
.hero-proof li{padding:0 26px;border-left:1px solid var(--line-2)}
.hero-proof li:first-child{padding-left:0;border:0}
.hero-proof b{display:block;white-space:nowrap;font-size:20px;font-weight:650;letter-spacing:-.02em}
.hero-proof span{font-size:13px;color:var(--muted)}
.in-1,.in-2,.in-3,.in-4,.in-5{animation:rise .9s var(--ease) both}
.in-2{animation-delay:.08s}.in-3{animation-delay:.16s}.in-4{animation-delay:.24s}.in-5{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(8px)}}

.hero-stage{position:relative;height:min(76svh,660px);perspective:1500px;--rx:0deg;--ry:0deg;animation:rise 1.3s var(--ease) both .2s}
.glow-ring{position:absolute;left:50%;top:50%;width:min(30vw,380px);aspect-ratio:9/16;transform:translate(-50%,-50%);border-radius:48px;background:var(--spectrum-c);filter:blur(64px);opacity:.42;animation:spin360 8s linear infinite}
.device{position:absolute;top:50%;left:50%;width:min(14.5vw,226px);aspect-ratio:9/19.3;border-radius:36px;padding:8px;background:#1c1c1e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 50px 90px -30px rgba(0,0,0,.95);transition:transform .9s var(--ease)}
.device::before{content:'';position:absolute;top:16px;left:50%;width:28%;height:15px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:29px;overflow:hidden;background:#0d0d0f}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.screen video.ready{opacity:1}
.d1{transform:translate(-50%,-50%) translate3d(calc(-64% + var(--sx,0)*1px),14px,-80px) rotateY(calc(16deg + var(--ry))) rotateX(var(--rx)) rotateZ(-5deg)}
.d2{z-index:2;width:min(17vw,262px);transform:translate(-50%,-50%) translateZ(40px) rotateY(var(--ry)) rotateX(var(--rx))}
.d3{transform:translate(-50%,-50%) translate3d(calc(64% + var(--sx,0)*1px),14px,-80px) rotateY(calc(-16deg + var(--ry))) rotateX(var(--rx)) rotateZ(5deg)}
.float-chip{position:absolute;z-index:4;padding:10px 15px;border-radius:14px;font-size:13px;font-weight:500;color:var(--text);background:rgba(28,28,30,.72);border:1px solid var(--line-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 40px -18px rgba(0,0,0,.9);animation:bob 7s ease-in-out infinite}
.float-chip b{font-weight:700}
.c1{left:4%;top:16%}.c2{right:-2%;top:46%;animation-delay:-2.3s}.c3{left:8%;bottom:12%;animation-delay:-4.6s}
@keyframes bob{50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:24px;height:38px;border:1.5px solid var(--line-2);border-radius:14px;transform:translateX(-50%)}
.scroll-cue i{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{60%,100%{transform:translateY(12px);opacity:0}}

/* scroll story */
.story{position:relative;height:540vh}
.story-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.5fr);align-items:center;gap:clamp(16px,3vw,48px);padding:84px clamp(16px,5vw,80px) 28px;max-width:1500px;margin:0 auto;overflow:hidden}
.story-steps{position:relative;height:250px}
.story-step{position:absolute;inset:0;opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s;pointer-events:none}
.story-step.on{opacity:1;transform:none;filter:none}
.story-step span{font:500 13px Geist;color:var(--muted);font-variant-numeric:tabular-nums}
.story-step h3{font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.045em;font-weight:700;margin:10px 0 14px}
.story-step p{color:var(--muted);font-size:17px;line-height:1.55;margin:0;max-width:400px}
.story-dots{display:flex;gap:6px;margin-top:8px}
.story-dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);transition:background .4s,width .4s var(--ease)}
.story-dots i.on{background:#fff}
.story-stage{position:relative;height:100%;min-height:0}
.story-scale{position:absolute;inset:0}
.story-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--line-2),0 50px 100px -40px rgba(0,0,0,1);z-index:2;will-change:width,height}
.story-frame.phone{box-shadow:0 0 0 7px #1c1c1e,0 0 0 8px rgba(255,255,255,.14),0 0 90px -10px rgba(201,89,221,.45),0 0 140px -30px rgba(8,148,255,.45)}
#story-video{position:absolute;left:0;top:0;max-width:none;object-fit:cover;background:linear-gradient(135deg,#1a1a1d,#0a0a0b)}
.story-face{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.story-face i{position:absolute;width:18px;height:18px;border:2.5px solid #fff}
.story-face i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.story-face i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.story-face i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.story-face i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.story-face::after{content:'Siguiendo';position:absolute;left:0;top:-30px;font:600 12px Geist;padding:4px 9px;border-radius:999px;background:#fff;color:#000;white-space:nowrap}
.story-hook{position:absolute;left:50%;top:9%;transform:translateX(-50%);max-width:86%;width:max-content;text-align:center;background:#fff;color:#000;font:800 clamp(12px,1.25vw,17px)/1.2 Geist;padding:7px 11px;border-radius:9px;opacity:0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.story-caps{position:absolute;left:5%;right:5%;top:63%;text-align:center;opacity:0;--hl:#FFE14D}
.story-wave{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px;height:54px;width:min(86%,620px);opacity:0}
.story-wave i{flex:1;height:calc(var(--h)*100%);border-radius:2px;background:rgba(255,255,255,calc(.14 + .8*clamp(0,(var(--sweep,0)*56 - var(--i))/3,1)))}
.story-score{position:absolute;left:50%;bottom:4%;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(28,28,30,.8);border:1px solid var(--line-2);backdrop-filter:blur(14px);opacity:0;z-index:3;white-space:nowrap}
.story-score b{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;color:#000;font-size:14px}
.story-score span{font-size:13.5px;color:#d2d2d7}
.story-side{position:absolute;left:50%;top:50%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#111;opacity:0;box-shadow:0 0 0 6px #1c1c1e,0 0 0 7px rgba(255,255,255,.12);z-index:1}
.story-side video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.story-side video.ready{opacity:1}

/* live subtitles (story + styles demo) */
.live-caps{font:900 clamp(16px,1.9vw,25px)/1.12 'Arial Black',Impact,sans-serif;color:#fff;text-transform:uppercase;text-align:center;letter-spacing:.01em;text-shadow:0 3px 0 #000,0 0 10px rgba(0,0,0,.75);-webkit-text-stroke:1.2px #000;paint-order:stroke fill}
.story-caps{font:900 clamp(13px,1.5vw,22px)/1.12 'Arial Black',Impact,sans-serif;color:#fff;text-transform:uppercase;text-shadow:0 3px 0 #000,0 0 10px rgba(0,0,0,.75);-webkit-text-stroke:1px #000;paint-order:stroke fill}
.live-caps span,.story-caps span{display:inline-block;margin:0 .14em;animation:capin .18s var(--ease) both;transition:color .1s,transform .12s,background .12s}
.live-caps span.on,.story-caps span.on{color:var(--hl,#FFE14D);transform:scale(1.14)}
@keyframes capin{from{transform:scale(.7);opacity:0}}
.live-caps[data-style=karaoke]{font:800 clamp(16px,1.8vw,24px)/1.25 Geist;text-transform:none;-webkit-text-stroke:0;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.live-caps[data-style=karaoke] span{color:rgba(255,255,255,.45);transform:none;margin:0 .1em}
.live-caps[data-style=karaoke] span.said{color:#fff}
.live-caps[data-style=karaoke] span.on{color:var(--hl);transform:none}
.live-caps[data-style=box] span.on{background:var(--hl);color:#000;-webkit-text-stroke:0;text-shadow:none;border-radius:7px;padding:0 .18em;transform:scale(1.08) rotate(-2deg)}
.live-caps[data-style=beast]{font:900 clamp(22px,2.6vw,34px)/1.05 Impact,'Arial Black',sans-serif;-webkit-text-stroke:2.2px #000;text-shadow:0 5px 0 #000}
.live-caps[data-style=beast] span{transform:rotate(-3deg)}
.live-caps[data-style=beast] span.on{transform:rotate(-3deg) scale(1.2)}
.live-caps[data-style=clean]{font:600 clamp(14px,1.5vw,19px)/1.35 Geist;text-transform:none;-webkit-text-stroke:0;text-shadow:none}
.live-caps[data-style=clean] span{animation:none;margin:0 .08em}
.live-caps[data-style=clean]:not(:empty){display:inline-block;left:auto;background:rgba(0,0,0,.62);padding:6px 12px;border-radius:10px}
.live-caps[data-style=clean] span.on{color:#fff;transform:none}
.live-caps[data-style=neon]{font:700 clamp(17px,2vw,26px)/1.2 Geist;text-transform:lowercase;-webkit-text-stroke:0;color:var(--hl);text-shadow:0 0 6px var(--hl),0 0 18px var(--hl)}
.live-caps[data-style=neon] span.on{color:#fff;transform:scale(1.1)}

/* sections */
.section-head{text-align:center;margin:0 auto 54px;max-width:820px}
.section-head h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.05em;font-weight:700;margin:0}
.styles-demo,.features,.pricing{padding:140px clamp(16px,5vw,80px) 40px;max-width:1300px;margin:0 auto}
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}

.styles-wrap{display:grid;grid-template-columns:auto minmax(0,460px);justify-content:center;align-items:center;gap:clamp(28px,6vw,90px)}
.style-phone{position:relative;width:min(320px,72vw);aspect-ratio:9/19.3;border-radius:44px;padding:9px;background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 60px 100px -40px #000}
.style-phone::after{content:'';position:absolute;inset:-30px;z-index:-1;border-radius:70px;background:var(--spectrum-c);filter:blur(50px);opacity:.35;animation:spin360 9s linear infinite}
.style-phone .screen{border-radius:36px}
.style-phone video{opacity:1}
.style-phone .live-caps{position:absolute;left:6%;right:6%;top:64%;z-index:2}
.style-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.style-picker button{display:grid;gap:10px;justify-items:center;padding:16px 8px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;transition:border-color .2s,background .2s,color .2s,transform .3s var(--ease)}
.style-picker button:hover{transform:translateY(-2px);color:var(--text)}
.style-picker button.on{border-color:#fff;color:var(--text);background:#141416}
.sp{font:900 14px 'Arial Black',sans-serif;color:#fff;text-shadow:0 2px 0 #000;white-space:nowrap}
.sp i{font-style:normal;color:var(--hl,#FFE14D)}
.sp-karaoke{font:800 14px Geist;text-shadow:none;color:rgba(255,255,255,.5)}
.sp-box i{background:var(--hl,#FFE14D);color:#000;border-radius:4px;padding:0 3px;text-shadow:none}
.sp-beast{font:900 17px Impact,sans-serif;-webkit-text-stroke:1px #000;transform:rotate(-3deg);display:inline-block}
.sp-clean{font:600 13px Geist;text-shadow:none;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:6px}
.sp-neon{font:700 15px Geist;color:var(--hl,#FFE14D);text-shadow:0 0 8px var(--hl,#FFE14D)}
.styles-demo{--hl:#FFE14D}
.style-colors{display:flex;gap:10px;margin:22px 0 18px}
.style-colors button{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--bg),0 0 0 3px transparent;transition:box-shadow .2s,transform .2s}
.style-colors button.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff}
.style-colors button:hover{transform:scale(1.1)}
.style-side .muted{font-size:14px;margin:0}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{position:relative;overflow:hidden;padding:26px;border-radius:24px;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,transform .5s var(--ease)}
.feature.wide{grid-column:span 2}
.feature:hover{border-color:var(--line-2);transform:translateY(-3px)}
.feature::before,.plan::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.07),transparent 50%);opacity:0;transition:opacity .4s}
.feature:hover::before,.plan:hover::before{opacity:1}
.feature h3{font-size:20px;letter-spacing:-.025em;font-weight:650;margin:20px 0 8px}
.feature p{color:var(--muted);margin:0;line-height:1.55;font-size:15px}
.f-art{position:relative;height:160px;border-radius:16px;background:#070708;border:1px solid var(--line);overflow:hidden}
.f-split i{position:absolute;left:50%;width:92px;height:70px;transform:translateX(-50%);border-radius:10px;background:#2c2c2e}
.f-split i:first-child{top:10px;background:linear-gradient(135deg,#3a3a3c,#1c1c1e)}
.f-split i:last-child{bottom:10px;background:#f5f5f7;transition:transform .6s var(--ease)}
.feature:hover .f-split i:last-child{transform:translateX(-50%) translateY(-6px) scale(1.05)}
.f-track i{position:absolute;top:50%;left:18%;width:56px;height:80px;margin-top:-40px;border-radius:10px;border:2px solid #fff;animation:track 5s ease-in-out infinite}
.f-track::before{content:'';position:absolute;inset:auto 0 22px;height:1px;background:var(--line-2)}
@keyframes track{50%{left:64%}}
.f-num{display:grid;place-content:center;text-align:center}
.f-num b{font-size:64px;letter-spacing:-.06em;line-height:1;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-num span{color:var(--muted);font-size:13px}
.f-edit{display:grid;align-content:center;gap:8px;padding:0 22px}
.f-edit i{height:12px;border-radius:4px;background:#2c2c2e}
.f-edit i:nth-child(1){width:80%}.f-edit i:nth-child(2){width:55%;background:#f5f5f7}.f-edit i:nth-child(3){width:68%}
.feature:hover .f-edit i:nth-child(2){width:72%;transition:width .6s var(--ease)}
.f-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-content:center;padding:0 20px}
.f-cal span{aspect-ratio:1;border-radius:8px;background:#1c1c1e}
.f-cal span.on{background:#f5f5f7}

.billing{position:relative;display:flex;width:max-content;margin:-20px auto 40px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.billing button{position:relative;z-index:1;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .3s}
.billing button.on{color:#000}
.billing button small{display:inline;color:inherit;opacity:.7;font-size:12px}
.billing i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#f5f5f7;transition:transform .45s var(--ease)}
.billing.year i{transform:translateX(100%)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.plan{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:30px 26px;border-radius:26px;background:var(--surface);border:1px solid var(--line)}
.plan h3{font-size:20px;font-weight:650;margin:0}
.plan-desc{color:var(--muted);margin:6px 0 22px;font-size:14.5px}
.price{margin:0 0 22px;display:flex;align-items:baseline;gap:4px}
.price b{font-size:46px;letter-spacing:-.05em;font-weight:700;font-variant-numeric:tabular-nums}
.price span{color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px;font-size:14.5px;color:#d2d2d7}
.plan li{display:flex;gap:10px}
.plan li::before{content:'';flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:#2c2c2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.plan.featured{background:#0e0e10;border-color:transparent}
.plan.featured::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--spectrum-c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin360 7s linear infinite;pointer-events:none}
.plan-tag{position:absolute;top:22px;right:22px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f5f5f7;color:#000}
.plan .pill-btn,.plan .ghost-btn{width:100%;padding:12px}
.fine{text-align:center;color:var(--faint);font-size:13px;margin:28px 0 0}

.final-cta{position:relative;text-align:center;padding:170px 16px 150px;overflow:hidden}
.final-cta .glow-ring.soft{width:min(70vw,760px);aspect-ratio:3/1;border-radius:50%;filter:blur(90px);opacity:.35}
.final-cta h2{position:relative;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.05em;font-weight:700;margin:0 0 36px}
.final-cta .pill-btn{position:relative}
.site-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding:32px clamp(16px,5vw,80px) 44px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;max-width:1500px;margin:0 auto}
.site-footer p{margin:8px 0 0}
.site-footer .credit{max-width:560px;line-height:1.6}
.site-footer a:not(.brand){color:var(--text)}

/* login */
.login-dialog{width:min(400px,calc(100% - 32px));padding:34px 28px 24px;text-align:center;background:#0e0e10;border:1px solid var(--line-2);border-radius:26px;box-shadow:0 50px 120px -30px #000}
.login-dialog[open]{animation:pop .45s var(--ease)}
.login-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.login-dialog h2{display:block;font-size:24px;letter-spacing:-.03em;margin:16px 0 6px}
.login-dialog .hint{margin:0 0 24px}
.logo.big{display:inline-block;width:46px;height:46px;border-radius:13px}
.logo.big::after{left:17px;top:13px;border-left-width:15px;border-top-width:10px;border-bottom-width:10px}
.dialog-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;color:var(--muted)}
.dialog-x:hover{background:rgba(255,255,255,.06);color:var(--text)}
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:999px;background:#fff;color:#1f1f1f;font-weight:600;font-size:14.5px;transition:transform .2s var(--ease)}
.google-btn svg{width:20px;height:20px}
.google-btn:hover{transform:translateY(-1px)}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:18px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.login-dialog .field{display:grid;gap:6px;text-align:left;margin-bottom:12px}
.login-dialog .field input{width:100%;padding:12px 14px;border-radius:12px}
.login-dialog .primary{border-radius:999px;padding:12px}
.soon-note{font-size:12px;color:var(--faint);margin:16px 0 0;line-height:1.5}

/* ============================ management ============================ */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:20px;padding:20px 14px 16px;border-right:1px solid var(--line);background:#050506;overflow-y:auto;z-index:30}
.sidebar>.brand{padding:4px 8px}
.new-btn{width:100%;padding:11px;border-radius:12px}
.side-nav{display:grid;gap:2px}
.side-nav button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;text-align:left;transition:background .2s,color .2s}
.side-nav button:hover{color:var(--text);background:rgba(255,255,255,.04)}
.side-nav button.on{color:var(--text);background:rgba(255,255,255,.08)}
.side-count{margin-left:auto;font-size:12px;color:var(--faint)}
.credits{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.credits-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.credits-head b{font-size:11.5px;font-weight:600;color:var(--text);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08)}
.credits-num{margin:10px 0 10px;font-size:13px;color:var(--muted)}
.credits-num b{font-size:26px;letter-spacing:-.04em;color:var(--text);font-weight:700;margin-right:2px}
.credits-bar{height:6px;border-radius:6px;background:#1c1c1e;overflow:hidden}
.credits-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--spectrum);transition:width .8s var(--ease)}
.credits small{margin-top:9px;font-size:11.5px;color:var(--faint)}
.credits-up{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--text)}
.credits-up:hover{text-decoration:underline;text-underline-offset:3px}
.side-foot{margin-top:auto;display:grid;gap:8px}
.side-foot .status-pill{padding:0 10px;font-size:12px;justify-self:start}
.status-pill::before{background:var(--ok);box-shadow:0 0 0 3px rgba(48,209,88,.15)}
.side-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:13px;text-align:left}
.side-link:hover{background:rgba(255,255,255,.04);color:var(--text)}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 8px 2px;border-top:1px solid var(--line)}
.user-row .avatar{width:32px;height:32px;font-size:13px}
.user-row div{min-width:0;flex:1}
.user-row b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-row small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-top{display:none}
.side-scrim{display:none}
.app-main{min-width:0}
.app main{max-width:1800px;padding:28px clamp(16px,2.4vw,40px) 70px}
.app .col-side{top:20px}
#status{top:18px}

.new-project{padding:48px 0 18px;text-align:center}
.np-copy h1{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.045em;font-weight:700;margin:0 0 26px;line-height:1.05}
.np-copy .eyebrow{margin-bottom:10px}
.url-box{max-width:680px;margin:0 auto;padding:7px 7px 7px 18px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;box-shadow:0 30px 70px -40px #000;transition:border-color .3s,box-shadow .3s}
.url-box:focus-within{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 5px rgba(255,255,255,.05),0 30px 70px -40px #000}
.url-icon{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.url-box input{font-size:16px;padding:12px}
.url-box button{padding:12px 22px;gap:8px;border-radius:999px}
.url-box button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.url-box button:hover svg{transform:translateX(3px)}
.new-project .hint{text-align:center;margin-top:14px}
.new-project .progress{margin:18px auto 0}
body.loaded .new-project{padding:4px 0 0}
body.loaded .np-copy,body.loaded .recent{display:none}
body:not(.loaded) .workspace{display:none}
body.editing .new-project{display:none}
.recent{margin-top:44px}
.recent-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.recent-head h2{font-size:17px;font-weight:600;margin:0}
.recent-head a{font-size:13.5px;color:var(--muted);text-decoration:none}
.recent-head a:hover{color:var(--text)}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-template-rows:auto;grid-auto-rows:0;row-gap:0;column-gap:12px;overflow:hidden}
.recent-card{display:grid;gap:8px;text-decoration:none;font-size:13px;color:var(--muted)}
.recent-card img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s}
.recent-card:hover img{transform:translateY(-3px);border-color:var(--line-2)}
.recent-card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px}
.bar i{background:var(--spectrum)}
.progress-row span:last-child{color:var(--text)}
.taskbar::before{border-top-color:#fff}
.num{background:rgba(255,255,255,.08);border-color:var(--line-2);color:var(--text)}
.phone{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 0 7px #161618,0 40px 80px -30px #000}
.chips button.on,.presets button.on{border-color:rgba(255,255,255,.55)}
.view-head h1{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.045em;font-weight:700}
.editor-bar{background:#111113;border-color:var(--line-2)}
.suggestion,.result-card,.lib-card,.recent-card{animation:rise .55s var(--ease) both}
.view:not([hidden]){animation:viewin .4s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root){animation:.2s ease both vtout}
::view-transition-new(root){animation:.32s var(--ease) both vtin}
@keyframes vtout{to{opacity:0}}
@keyframes vtin{from{opacity:0;transform:translateY(8px)}}

/* ============================ responsive ============================ */
@media(max-width:1060px){
  .hero{grid-template-columns:minmax(0,1fr);text-align:center;padding-top:110px;min-height:0}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-ctas,.hero-proof{justify-content:center}
  .hero-stage{height:460px}
  .device{width:160px}.d2{width:182px}.glow-ring{width:220px}
  .site-links{display:none}
  .site-nav{grid-template-columns:1fr auto}
  .story-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding-top:76px;gap:4px;text-align:center}
  .story-steps{height:150px}
  .story-step h3{font-size:30px;margin:6px 0 8px}
  .story-step p{font-size:15px;margin:0 auto}
  .story-dots{justify-content:center}
  .styles-wrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .style-colors{justify-content:center}
  .feature-grid,.plans{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plans .featured{grid-column:span 2;order:-1}
}
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-105%);transition:transform .35s var(--ease)}
  body.side-open .sidebar{transform:none;box-shadow:30px 0 80px rgba(0,0,0,.7)}
  .side-scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
  body.side-open .side-scrim{opacity:1;pointer-events:auto}
  .app-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;padding:10px 14px;background:rgba(0,0,0,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .app main{padding-top:16px}
  #status{top:64px}
}
@media(max-width:640px){
  .site-nav{padding:10px 14px}
  .site-actions .text-btn{padding:8px}
  .site-actions .pill-btn{padding:8px 14px;font-size:13px}
  .hero{padding:96px 16px 50px}
  .hero h1{font-size:44px}
  .hero .lead{font-size:16px}
  .hero-proof li{padding:0 14px}
  .hero-proof b{font-size:16px}
  .hero-stage{height:380px}
  .device{width:124px;border-radius:26px;padding:6px}.d2{width:144px}.screen{border-radius:21px}
  .device::before{top:11px;height:10px}
  .float-chip{font-size:11.5px;padding:8px 11px}.c1{left:0;top:4%}.c2{right:0;top:56%}.c3{left:0;bottom:2%}
  .scroll-cue{display:none}
  .story{height:480vh}
  .story-step p{max-width:330px}
  .feature-grid,.plans{grid-template-columns:minmax(0,1fr)}
  .feature.wide,.plans .featured{grid-column:auto}
  .styles-demo,.features,.pricing{padding-top:100px}
  .style-picker{grid-template-columns:repeat(2,1fr)}
  .section-head{margin-bottom:38px}
  .url-box{padding:6px 6px 6px 12px}
  .url-box input{font-size:15px;padding:11px 6px}
  .url-box button{padding:11px 14px}
  .url-box button svg{display:none}
  .new-project{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;filter:none}
}

/* =====================================================================
   v5 · simpler studio, editor, library and AI motion
   ===================================================================== */
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes breathe{50%{transform:scale(.86);opacity:.7}}
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}}
.spark{width:16px;height:16px;fill:currentColor;flex:none}

/* create card */
.card-options .presets{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card-options .presets button{padding:14px;border-radius:14px;background:#111113;border:1px solid var(--line);transition:transform .25s var(--ease),border-color .2s,background .2s}
.card-options .presets button:hover{transform:translateY(-2px);border-color:var(--line-2)}
.card-options .presets button.on{background:#17171a;border-color:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.card-options .presets button.on b{color:#fff}
.card-options .presets b{font-size:14.5px}
.create-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.ai-cta{position:relative;padding:14px 26px!important;font-size:15.5px!important;border-radius:999px!important;gap:8px;isolation:isolate}
.ai-cta::before{content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:var(--spectrum-c);animation:spin360 4s linear infinite;filter:blur(8px);opacity:.55;transition:opacity .3s}
.ai-cta:disabled::before{opacity:0}
.ai-cta:hover:enabled::before{opacity:.9}
.create-actions .secondary{border-radius:999px;padding:13px 20px}
.card-options details.more{margin-top:18px}

/* title styles (mirrors captions.py HOOK_STYLES) */
.hook-styles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.hook-styles button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 8px;border-radius:12px;background:#151517;border:1px solid var(--line);transition:border-color .2s,transform .2s var(--ease)}
.hook-styles button:hover{transform:translateY(-1px)}
.hook-styles button.on{border-color:#fff}
.hook-styles small{font-size:11px;margin:0}
.hk{font:900 11px 'Segoe UI Black','Segoe UI',sans-serif;padding:4px 8px;border-radius:7px;white-space:nowrap}
.hk-blanco{background:#fff;color:#111}
.hk-negro{background:rgba(11,11,12,.85);color:#fff;box-shadow:0 0 0 1px #333}
.hk-color{background:var(--hl,#FFE14D);color:#111}
.hk-vidrio{background:rgba(60,60,64,.6);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hk-borde{background:none;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 0 #000}

/* moments */
#suggestions{display:grid;gap:10px}
.suggestion{display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px;padding:12px;border-radius:16px;background:#0d0d0f;animation:rise-in .45s var(--ease) both}
.suggestion.active{border-color:rgba(255,255,255,.5)}
.s-thumb{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#1a1a1c;cursor:pointer;align-self:start}
.s-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.s-thumb:hover img{transform:scale(1.05)}
.s-dur{position:absolute;left:7px;bottom:7px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.7)}
.s-play{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;opacity:0;background:rgba(0,0,0,.25);transition:opacity .2s}
.s-thumb:hover .s-play{opacity:1}
.pick{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.45);transition:background .2s,transform .2s var(--ease)}
.pick.on{background:#fff}
.pick.on::after{content:'';position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #000;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pick:hover{transform:scale(1.08)}
.s-info{min-width:0;display:flex;flex-direction:column;gap:6px}
.s-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.s-meta .s-time{font-size:12px;color:var(--faint);margin-left:auto}
.s-title{width:100%;background:none!important;border:1px solid transparent!important;padding:4px 6px!important;margin-left:-6px;font-size:15px;font-weight:600;border-radius:8px!important}
.s-title:hover,.s-title:focus{border-color:var(--line-2)!important}
.s-hook{margin:0;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-btn{align-self:flex-start;font-size:12.5px;color:var(--muted);padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--text)}
.s-details{grid-column:1/-1;padding-top:10px;border-top:1px solid var(--line);animation:rise-in .3s var(--ease)}
.s-details .field-label{display:block;margin:12px 0 6px;font-size:12px;color:var(--muted)}
.s-details > input{width:100%}
.title-options{display:flex;flex-wrap:wrap;gap:6px}
.title-opt{padding:7px 12px;border-radius:12px;font-size:13px;text-align:left;background:#161618;border:1px solid var(--line);color:#d6d6da;transition:border-color .2s,background .2s;animation:rise-in .35s var(--ease) both}
.title-opt:hover{border-color:var(--line-2)}
.title-opt.on{border-color:#fff;color:#fff;background:#1e1e21}
.state.making{color:#fff}
.state.making::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--spectrum-c);animation:spin360 1.2s linear infinite,breathe 1.2s ease-in-out infinite}

/* results */
.result-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.result-card{padding:0;border-radius:18px;overflow:hidden;background:#0d0d0f;animation:rise-in .5s var(--ease) both}
.result-card .player{position:relative}
.result-card video{border-radius:0}
.r-body{padding:12px 12px 14px;display:grid;gap:6px}
.r-title{margin:0;font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-tags{margin:0;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-actions{display:flex;gap:6px;align-items:center;margin-top:4px}
.r-actions .primary,.r-actions .secondary{border-radius:999px;padding:7px 14px}
.more-btn{margin-left:auto;font-size:18px;line-height:1}
.pop-menu{position:fixed;z-index:60;min-width:200px;padding:6px;border-radius:14px;background:#141416;border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:rise-in .18s var(--ease)}
.pop-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:13.5px}
.pop-menu button:hover{background:rgba(255,255,255,.07)}
.pop-menu .danger,.ghost.danger{color:#ff8a80}

/* AI loading */
.ai-shimmer{background:linear-gradient(110deg,#121214 30%,#1d1d22 45%,#232032 50%,#1d1d22 55%,#121214 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.skeleton{display:grid;place-items:center;align-content:center;gap:10px;aspect-ratio:9/16;border-radius:0}
.ai-orb{width:34px;height:34px;border-radius:50%;background:var(--spectrum-c);animation:spin360 2.4s linear infinite,breathe 1.8s ease-in-out infinite;box-shadow:0 0 30px rgba(201,89,221,.45)}
.pending-title{padding:10px 12px;margin:0;font-size:13px;color:var(--muted)}
.taskbar{border:1px solid transparent;background:linear-gradient(#141416,#141416) padding-box,var(--spectrum-c) border-box;animation:spin360 4s linear infinite}
.taskbar::before{border:0;background:var(--spectrum-c);animation:spin360 1.4s linear infinite,breathe 1.4s ease-in-out infinite}

/* library */
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
.lib-card{padding:0;border:0;background:none;display:grid;gap:8px;animation:rise-in .5s var(--ease) both}
.lib-card:hover{transform:none}
.lib-media{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform .4s var(--ease),box-shadow .3s}
.lib-media:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),0 24px 40px -20px #000}
.lib-media img,.lib-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-over{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none;transition:opacity .25s}
.lib-over b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.3}
.lib-over small{font-size:11.5px;margin-top:3px;color:#b8b8bd}
.lib-media.playing .lib-over{opacity:0}
.lib-time{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.6)}
.lib-badge,.lib-edited{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;padding:3px 8px;border-radius:999px;background:#fff;color:#000}
.lib-actions{display:flex;gap:6px;align-items:center}
.lib-actions .primary,.lib-actions .secondary{border-radius:999px;padding:7px 14px}
.storage{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--muted);font-size:13px}

/* calendar */
.cal-post{display:flex;align-items:center;gap:4px}
.cal-x{margin-left:auto;width:16px;height:16px;border-radius:50%;line-height:14px;font-size:13px;color:inherit;opacity:0;transition:opacity .15s,background .15s}
.cal-post:hover .cal-x{opacity:1}
.cal-x:hover{background:rgba(255,255,255,.2)}

/* editor */
.editor-view{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px;min-height:calc(100vh - 100px)}
.editor-view > *,.ed-body > *{min-width:0}
.ed-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ed-name{flex:1;min-width:0}
.ed-name small{font-size:11.5px;color:var(--faint)}
.ed-title{width:100%;font-size:20px;font-weight:700;letter-spacing:-.02em;background:none!important;border:1px solid transparent!important;padding:2px 6px!important;margin-left:-6px;border-radius:8px!important}
.ed-title:hover,.ed-title:focus{border-color:var(--line-2)!important}
.ed-state{font-size:12.5px;color:var(--muted);padding:5px 11px;border-radius:999px;background:#151517;white-space:nowrap}
.ed-state.dirty{color:#000;background:#fff}
.ed-actions{display:flex;gap:8px}
.ed-actions .pill-btn,.ed-actions .ghost-btn{padding:9px 18px}
.ed-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:24px;min-height:0}
.ed-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,#151519,#09090a)}
.ed-phone .phone{width:min(330px,calc((100vh - 360px) * 9 / 16));min-width:220px;border-radius:26px;box-shadow:0 0 0 7px #19191b,0 0 0 8px rgba(255,255,255,.12),0 40px 80px -30px #000}
.ed-controls{display:flex;align-items:center;gap:12px}
.play-btn{width:44px;height:44px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;transition:transform .2s var(--ease)}
.play-btn:hover{transform:scale(1.06)}
.play-btn svg{width:18px;height:18px;fill:currentColor;margin-left:2px}
.play-btn.playing svg{display:none}
.play-btn.playing::before{content:'';width:14px;height:16px;border-left:4.5px solid #000;border-right:4.5px solid #000;box-sizing:border-box}
.ed-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13.5px}
.ed-panel{display:flex;flex-direction:column;min-height:0;border-radius:24px;background:#0d0d0f;border:1px solid var(--line);overflow:hidden}
.ed-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line)}
.ed-tabs button{flex:1;padding:9px 6px;border-radius:12px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.ed-tabs button.on{background:#1c1c1f;color:#fff}
.ed-section{position:relative;flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 330px)}
.ed-section .field{margin:0}
.ed-section input[type=text]{width:100%}
.ed-styles{grid-template-columns:repeat(3,1fr)}
.ai-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-row small{flex:1;min-width:140px;font-size:12px;color:var(--faint);margin:0}
.ai-btn{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(#141416,#141416) padding-box,var(--spectrum-c) border-box;border:1.5px solid transparent;animation:spin360 6s linear infinite;transition:transform .2s var(--ease)}
.ai-btn:hover{transform:translateY(-1px)}
.ai-btn.working{animation-duration:1.2s}
.ai-btn.working .spark{animation:breathe .9s ease-in-out infinite}
.ed-section.ai-working::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(201,89,221,.08) 45%,rgba(8,148,255,.1) 55%,transparent 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.ed-words .phrases{display:grid;gap:6px}
.ed-words .phrase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;padding:8px;border-radius:12px;background:#121214}
.ed-words .phrase select{display:none}
.ed-words textarea{background:none!important;border:1px solid transparent!important;resize:none;padding:4px 6px!important;font-size:14px;line-height:1.4}
.ed-words textarea:focus{border-color:var(--line-2)!important;background:#0a0a0b!important}
.ed-words textarea.ai-new{animation:ai-flash 1.6s var(--ease)}
@keyframes ai-flash{0%{box-shadow:inset 0 0 0 1.5px rgba(201,89,221,.8)}100%{box-shadow:inset 0 0 0 1.5px transparent}}
.stamp{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);padding:5px 8px;border-radius:8px;background:#1b1b1e}
.stamp:hover{color:#fff}

/* timeline */
.ed-timeline{padding:14px 16px 16px;border-radius:20px;background:#0d0d0f;border:1px solid var(--line)}
.tl-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px;font-size:13px}
.tl-meta span{font-weight:600;font-variant-numeric:tabular-nums}
.tl-meta small{font-size:12px;color:var(--faint);margin:0;text-align:right}
.tl-meta kbd{display:inline-block;min-width:18px;padding:1px 5px;margin:0 1px;border-radius:5px;border:1px solid var(--line-2);background:#151517;color:#d8d8dd;font-family:inherit;font-size:10.5px;font-weight:600;line-height:1.4;text-align:center}
@media (hover:none){.tl-keys{display:none}}
.ed-cut{display:flex;align-items:center;gap:6px;margin-left:auto}
.ed-cut .ghost-btn.sm{padding:6px 12px;font-size:12.5px}
.ed-cut .icon-btn.sm{width:32px;height:32px}
.ed-cut .icon-btn.sm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-cut button:disabled{opacity:.35;pointer-events:none}
.tl-clip.flash{animation:cutflash .45s var(--ease)}
@keyframes cutflash{0%{box-shadow:0 0 0 999px rgba(0,0,0,.35),0 0 0 0 rgba(255,255,255,.9)}100%{box-shadow:0 0 0 999px rgba(0,0,0,.35),0 0 0 10px rgba(255,255,255,0)}}
@media (max-width:640px){.tl-meta{flex-direction:column;gap:4px}.tl-meta small{text-align:left}.ed-controls{flex-wrap:wrap}.ed-cut{margin-left:0}}
.tl-track{position:relative;height:64px;border-radius:12px;overflow:hidden;background:#151517;cursor:pointer;touch-action:none;user-select:none}
.tl-thumbs{display:flex;height:100%;opacity:.38}
.tl-thumbs img{flex:1;min-width:0;height:100%;object-fit:cover;pointer-events:none}
.tl-clip{position:absolute;top:0;bottom:0;border:2.5px solid #fff;border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35);background:rgba(255,255,255,.04)}
.tl-clip::after{content:'';position:absolute;inset:0;border-radius:9px;background:linear-gradient(90deg,rgba(8,148,255,.12),rgba(201,89,221,.12),rgba(255,46,84,.1));pointer-events:none}
.tl-h{position:absolute;top:-2px;bottom:-2px;width:16px;background:#fff;cursor:ew-resize;z-index:2;display:grid;place-items:center}
.tl-h[data-edge=start]{left:-3px;border-radius:10px 0 0 10px}
.tl-h[data-edge=end]{right:-3px;border-radius:0 10px 10px 0}
.tl-h::after{content:'';width:2px;height:18px;border-radius:2px;background:#000}
.tl-head{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);z-index:3;pointer-events:none}
.tl-words{position:relative;height:28px;margin-top:8px}
.tl-word{position:absolute;top:0;height:24px;padding:0 6px;border-radius:7px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;background:#1b1b1e;color:var(--faint);border:1px solid transparent}
.tl-word.in{background:#232327;color:#e8e8ec}
.tl-word:hover{border-color:var(--line-2);z-index:2}

@media(max-width:1280px){
  .ed-body{grid-template-columns:minmax(0,1fr)}
  .ed-section{max-height:none}
  .ed-phone .phone{width:min(300px,70vw)}
}
@media(max-width:640px){
  .suggestion{grid-template-columns:minmax(0,1fr)}
  .hook-styles{grid-template-columns:repeat(3,1fr)}
  .ed-head{flex-wrap:wrap}
  .ed-actions{width:100%}
  .ed-actions button{flex:1}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lib-actions .secondary{display:none}
  .tl-meta small{display:none}
}

/* =====================================================================
   v6 · library: projects in progress, filters, favourites, selection
   ===================================================================== */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.lib-tools{display:flex;gap:8px;align-items:center}
.lib-tools input{min-width:220px}
.library-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}

/* project being created: blurred video, big percentage, a border that fills up */
.lib-running{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:26px}
.lib-running[hidden]{display:none}
.proj-card{position:relative;min-height:190px;border-radius:24px;overflow:hidden;isolation:isolate;padding:2px;transition:--p .8s var(--ease);
  background:conic-gradient(from -90deg,#0894ff,#c959dd calc(var(--p) * .33%),#ff2e54 calc(var(--p) * .66%),#ff9004 calc(var(--p) * 1%),rgba(255,255,255,.1) calc(var(--p) * 1%));
  animation:rise-in .5s var(--ease) both}
.proj-card::after{content:'';position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from var(--a),transparent 0 70%,rgba(255,255,255,.25) 80%,transparent 90%);animation:spin360 2.6s linear infinite;mix-blend-mode:overlay}
.proj-card.done{background:#fff}
.proj-card.done::after,.proj-card.error::after{display:none}
.proj-card.error{background:#ff4d5e}
.proj-bg{position:absolute;inset:2px;border-radius:22px;overflow:hidden;z-index:-1;background:#0b0b0c}
.proj-bg img{width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.45) saturate(1.2);transform:scale(1.15)}
.proj-body{position:relative;height:100%;min-height:186px;display:flex;flex-direction:column;padding:20px 22px;border-radius:22px}
.proj-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#e8e8ec;letter-spacing:.01em}
.proj-card.running .proj-kicker::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--spectrum-c);animation:spin360 1.2s linear infinite,breathe 1.4s ease-in-out infinite}
.proj-body h3{margin:8px 0 4px;font-size:18px;line-height:1.25;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj-msg{margin:0;font-size:13px;color:#c9c9cf}
.proj-foot{margin-top:auto;display:flex;align-items:baseline;gap:12px;padding-top:14px}
.proj-pct{font-size:40px;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.proj-foot span{font-size:13px;color:#d8d8dd}
.proj-x{position:absolute;top:10px;right:10px;color:#fff;z-index:2}
.side-nav button.busy::after{content:'';width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--spectrum-c);animation:spin360 1.2s linear infinite,breathe 1.4s ease-in-out infinite}
.side-nav button.busy .side-count{margin-left:auto}

/* filters */
.lib-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.lib-filter{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13.5px;color:var(--muted);background:#121214;border:1px solid var(--line);transition:all .2s var(--ease)}
.lib-filter small{font-size:11.5px;margin:0;color:var(--faint)}
.lib-filter:hover{color:#fff}
.lib-filter.on{background:#fff;color:#000;border-color:#fff}
.lib-filter.on small{color:#555}
.lib-filter.add{border-style:dashed}

/* cards */
.lib-star{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;font-size:17px;line-height:1;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s,transform .2s var(--ease)}
.lib-star.on{opacity:1;color:#FFD54A}
.lib-media:hover .lib-star{opacity:1}
.lib-star:hover{transform:scale(1.1)}
.lib-badge{top:auto;bottom:62px;right:auto;left:10px}
.lib-media .pick{top:10px;left:10px;right:auto;z-index:4;width:28px;height:28px}
.library-grid.selecting .lib-media{cursor:pointer}
.library-grid.selecting .lib-time,.library-grid.selecting .lib-star{display:none}
.lib-card.picked .lib-media{box-shadow:0 0 0 3px #fff;transform:scale(.97)}
.lib-card.picked .lib-media::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.08)}

/* projects view */
.library-grid.grouped{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.lib-project header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lib-project h3{margin:0;font-size:17px;letter-spacing:-.02em}
.lib-project small{font-size:12.5px;color:var(--faint)}

/* bulk actions */
.lib-bulk{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:4px;padding:8px 8px 8px 18px;border-radius:999px;
  background:rgba(20,20,22,.92);backdrop-filter:blur(16px);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);animation:rise-in .3s var(--ease);max-width:calc(100% - 32px);overflow-x:auto}
.lib-bulk[hidden]{display:none}
.lib-bulk b{font-size:13.5px;margin-right:8px;white-space:nowrap}
.lib-bulk button{padding:9px 14px;border-radius:999px;font-size:13px;white-space:nowrap;color:#e6e6ea}
.lib-bulk button:hover{background:rgba(255,255,255,.08)}
.lib-bulk .danger{color:#ff8a80}
.lib-bulk .done{background:#fff;color:#000;font-weight:600}
.lib-bulk .done:hover{background:#e8e8ec}
@media(max-width:640px){
  .lib-tools{width:100%}
  .lib-tools input{min-width:0;flex:1}
  .lib-running{grid-template-columns:minmax(0,1fr)}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lib-bulk{left:12px;right:12px;transform:none;bottom:12px}
}
/* Library generation and organization */
.lib-tools{flex-wrap:wrap;gap:10px}
.lib-activity{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:0 0 20px}
.lib-activity::before{content:'';width:12px;height:12px;border:2px solid #ffffff26;border-top-color:var(--spectrum-c);border-radius:50%;animation:spin360 1s linear infinite}
.proj-bg img{filter:blur(4px) brightness(.5) saturate(1.1);transform:scale(1.05)}
.proj-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,12,.8),rgba(8,8,12,.16))}
.proj-body{min-height:230px;padding:24px 26px}
.proj-body h3{font-size:22px;max-width:85%}
.proj-foot{flex-wrap:wrap;gap:10px}
.proj-elapsed{display:block;color:#c9c9cf;font-size:12px;margin:12px 0}
.proj-progress{height:5px;border-radius:9px;background:#ffffff26;overflow:hidden}
.proj-progress>span{display:block;height:100%;border-radius:inherit;background:var(--spectrum-c);transition:width 1.2s ease}
.proj-card.running .proj-progress>span{background:linear-gradient(90deg,var(--spectrum-c),#fff,var(--spectrum-c));background-size:200% 100%;animation:libraryShimmer 2s linear infinite}
.lib-bulk{flex-wrap:wrap}
@keyframes libraryShimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.proj-card::after,.proj-card.running .proj-kicker::before,.side-nav button.busy::after,.lib-activity::before,.proj-card.running .proj-progress>span{animation:none}.proj-progress>span{transition:none}}
@media(max-width:640px){.lib-tools{width:100%}.lib-tools input{width:100%;flex-basis:100%}.proj-body{padding:20px;min-height:235px}.proj-body h3{font-size:20px}.lib-bulk{gap:8px}}
/* Clean library thumbnails: metadata lives below the image. */
.lib-media.recipe-only img{filter:none}
.lib-card>.lib-over{position:static;padding:2px 0;background:none;opacity:1;min-height:48px}
.lib-card>.lib-over small{display:block}
.lib-card .lib-recipe-note{font-size:10px;color:var(--muted)}
.lib-media .lib-star{inset:8px 8px auto auto;min-width:32px;max-width:32px;min-height:32px;max-height:32px;padding:0;aspect-ratio:1;box-shadow:none;backdrop-filter:none}
.lib-media{border-radius:12px;box-shadow:none}
.lib-media:hover{transform:none;box-shadow:none}
.frame-tuning{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.frame-tuning h3{font-size:16px;margin:0 0 8px}
.frame-tuning .label{display:flex;justify-content:space-between}
.frame-tuning output{font-variant-numeric:tabular-nums;color:var(--muted)}
#preview.adjust-frame{cursor:grab;touch-action:none}
#preview.adjust-frame:active{cursor:grabbing}
.lib-media .lib-time{inset:10px auto auto 10px;width:auto;height:auto;max-width:calc(100% - 60px);padding:3px 7px;line-height:1.2;border-radius:5px;background:rgba(0,0,0,.65);pointer-events:none}
/* Stable updates: one transition per navigation, no repeated card entrances. */
.view:not([hidden]),.lib-card,.project-folder{animation:none}
.proj-card{background:#242429;transition:none;contain:layout style}
.proj-card::after{display:none}
.proj-card .proj-progress>span{width:100%;transform:scaleX(0);transform-origin:left;transition:transform 1.45s linear;background:#dfdfe7;animation:none;will-change:transform}
.proj-card.running .proj-progress>span{background:#dfdfe7;animation:none}
.proj-card.running .proj-kicker::before,.side-nav button.busy::after,.lib-activity::before{animation:busyPulse 1.8s ease-in-out infinite}
@keyframes busyPulse{50%{opacity:.35}}
.library-grid.project-folders{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.project-folder{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#111;transition:border-color .2s}
.project-folder:hover{border-color:#777}
.project-folder>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.project-folder>div{padding:16px}.project-folder h3{margin:0 0 8px;font-size:16px}.project-folder span{color:var(--muted);font-size:13px}
.lib-project-nav{display:flex;align-items:center;gap:16px;margin:18px 0}.lib-project-nav h2{font-size:19px;margin:0}
.frame-source-wrap{width:100%;max-width:520px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0b0b0d}
.frame-source-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:8px}.frame-source-head span{color:var(--muted)}
#frame-source{width:100%;height:auto;display:block;cursor:move;touch-action:none;border-radius:6px}
.frame-record-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.frame-record-actions .recording{background:#b92f40;color:white}
.ed-stage:has(.frame-source-wrap:not([hidden])) .phone{max-height:400px;width:auto;aspect-ratio:9/16}
@media(prefers-reduced-motion:reduce){.proj-card .proj-progress>span{transition:none}.proj-card.running .proj-kicker::before,.side-nav button.busy::after,.lib-activity::before{animation:none}}
.ed-stage:has(.frame-source-wrap:not([hidden])){display:grid;grid-template-columns:minmax(120px,.65fr) minmax(180px,1fr);align-items:center;gap:16px;padding:16px;align-self:start}
.ed-stage:has(.frame-source-wrap:not([hidden])) .phone{width:100%;min-width:0;max-width:190px;max-height:none}
.ed-stage:has(.frame-source-wrap:not([hidden])) .ed-controls{grid-column:1/-1;justify-content:center}
.frame-source-head{flex-wrap:wrap}.frame-source-wrap .note{font-size:11px;line-height:1.5}.frame-record-actions button{font-size:11px}
@media(max-width:600px){.ed-stage:has(.frame-source-wrap:not([hidden])){grid-template-columns:1fr}.ed-stage:has(.frame-source-wrap:not([hidden])) .phone{width:150px;margin:auto}.frame-source-wrap{max-width:360px;margin:auto}}

/* v7 · creating with AI: the same moving rainbow as the AI buttons */
.proj-card.running{overflow:visible;padding:2px;background:conic-gradient(from var(--a),#0894ff,#c959dd,#ff2e54,#ff9004,#0894ff);animation:spin360 3s linear infinite}
.proj-card.running::before{content:'';position:absolute;inset:-6px;z-index:-2;border-radius:30px;background:conic-gradient(from var(--a),#0894ff,#c959dd,#ff2e54,#ff9004,#0894ff);filter:blur(18px);opacity:.45;animation:spin360 3s linear infinite}
.proj-card.running .proj-progress{background:rgba(255,255,255,.12)}
.proj-card.running .proj-progress>span{background:linear-gradient(90deg,#0894ff,#c959dd,#ff2e54,#ff9004,#0894ff);background-size:200% 100%;animation:shimmer 2.2s linear infinite}
.proj-card.running .proj-pct{background:linear-gradient(90deg,#fff 20%,#e7c8ff 50%,#fff 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.6s linear infinite}
.proj-card.done{background:linear-gradient(135deg,#0894ff,#c959dd,#ff2e54,#ff9004)}
@media(prefers-reduced-motion:reduce){.proj-card.running,.proj-card.running::before,.proj-card.running .proj-progress>span,.proj-card.running .proj-pct{animation:none}}

/* =====================================================================
   v8 · polish: dropdowns, menus, dialogs, touches and sliding tabs (ui.js)
   ===================================================================== */
:root{--out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.4,.64,1);--glass:rgba(20,20,23,.84);
  --hairline:linear-gradient(90deg,transparent 4%,#0894ff 22%,#c959dd 42%,#ff2e54 62%,#ff9004 80%,transparent 96%)}
button,a,summary,label{-webkit-tap-highlight-color:transparent}

/* floating panels: dropdown lists and "⋯" menus */
.float{position:fixed;inset:auto;margin:0;z-index:80;min-width:210px;max-width:min(380px,calc(100vw - 20px));padding:6px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;color:var(--text);
  background:var(--hairline) top center/200% 1px no-repeat,var(--glass);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 0 0 .5px rgba(0,0,0,.7),0 28px 70px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  animation:float-in .34s var(--out) both,hairline 6s linear infinite}
.float.up{animation-name:float-in-up,hairline}
.float.out{animation:float-out .2s var(--ease) both;pointer-events:none}
.float:focus{outline:0}
@keyframes float-in{from{opacity:0;transform:translateY(-8px) scale(.95);filter:blur(8px)}}
@keyframes float-in-up{from{opacity:0;transform:translateY(8px) scale(.95);filter:blur(8px)}}
@keyframes float-out{to{opacity:0;transform:scale(.96);filter:blur(6px)}}
@keyframes hairline{to{background-position:-200% 0,0 0}}
.float .hl{position:absolute;left:6px;right:6px;top:0;z-index:0;border-radius:10px;background:rgba(255,255,255,.08);opacity:0;pointer-events:none;
  transition:transform .32s var(--out),height .32s var(--out),opacity .2s}
.float .hl.on{opacity:1}
.float [role=option],.float [role=menuitem]{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;text-align:left;font-size:13.5px;color:#e8e8ec;background:none;
  animation:item-in .38s var(--out) both;animation-delay:calc(var(--i,0) * 18ms + 40ms)}
.float [role=option]:hover,.float [role=menuitem]:hover,.pop-menu.float button:hover{background:none;color:#fff}
.float [role=option]:focus-visible,.float [role=menuitem]:focus-visible{outline:0}
.float [role=option]:disabled{opacity:.4}
@keyframes item-in{from{opacity:0;transform:translateY(-5px)}}
.float.up [role=option],.float.up [role=menuitem]{animation-name:item-in-up}
@keyframes item-in-up{from{opacity:0;transform:translateY(5px)}}
.pop-menu.float{min-width:220px}
.pop-menu.float .danger{color:#ff8a80;margin-top:7px}
.pop-menu.float .danger::before{content:'';position:absolute;left:10px;right:10px;top:-4px;height:1px;background:var(--line)}
.pop-menu.float .danger+.danger{margin-top:0}
.pop-menu.float .danger+.danger::before{display:none}

/* dropdowns (every <select>) */
.vs{position:relative;display:block;min-width:0}
.vs-native{display:none!important}
.vs-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:8px 12px 8px 14px;border-radius:12px;text-align:left;font-size:14px;color:var(--text);
  background:#0f0f11;border:1px solid var(--line-2);transition:border-color .25s,background .25s,box-shadow .35s var(--out)}
.vs-trigger:hover:enabled{border-color:rgba(255,255,255,.24);background:#141416}
.vs.open .vs-trigger{border-color:rgba(255,255,255,.38);background:#151518;box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.vs-trigger:disabled{opacity:.45;cursor:not-allowed}
.vs-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-trigger svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--spring),stroke .2s}
.vs.open .vs-trigger svg{transform:rotate(180deg);stroke:var(--text)}
.vs-list .vs-option{display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:14px;row-gap:1px}
.vs-option>span,.vs-option>small{grid-column:1}
.vs-option>small{font-size:12px;color:var(--faint);margin:0}
.vs-option::after{content:'';grid-column:2;grid-row:1/span 2;align-self:center;width:16px;height:16px;background:var(--spectrum);transform:scale(0);transition:transform .35s var(--spring);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.vs-option[aria-selected=true]{color:#fff;font-weight:550}
.vs-option[aria-selected=true]::after{transform:scale(1)}
.pair .vs,label:not(.field)>.vs,.result-card .vs{margin-top:6px}
label.field>.vs{margin-top:6px}
label.field>.label+.vs{margin-top:0}
.phrase .vs{grid-column:2;max-width:170px}
.phrase .vs-trigger{min-height:32px;padding:5px 10px;font-size:12.5px;border-radius:9px}
.ed-words .phrase .vs{display:none}

/* fields: softer focus */
input[type=text],input[type=number],input[type=datetime-local],input[type=password],input[type=search],input[type=email],input[type=url],textarea{transition:border-color .25s,box-shadow .35s var(--out),background .25s}
input[type=text]:focus,input[type=number]:focus,input[type=datetime-local]:focus,input[type=password]:focus,input[type=search]:focus,input[type=email]:focus,textarea:focus{border-color:rgba(255,255,255,.38);box-shadow:0 0 0 4px rgba(255,255,255,.05)}

/* switches instead of check boxes */
.toggle{flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:16px}
.toggle>span{flex:1;min-width:0}
.toggle>span small{display:block;margin-top:2px;color:var(--faint)}
.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:38px;height:22px;margin:0;border-radius:999px;background:#2a2a2d;cursor:pointer;transition:background .3s var(--ease),box-shadow .3s}
.toggle input[type=checkbox]::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#f5f5f7;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .45s var(--spring),width .25s var(--ease)}
.toggle input[type=checkbox]:checked{background:linear-gradient(90deg,#0894ff,#c959dd,#ff2e54,#ff9004);background-size:300% 100%;animation:flow 6s ease-in-out infinite alternate}
.toggle input[type=checkbox]:checked::before{transform:translateX(16px)}
.toggle:active input[type=checkbox]::before{width:22px}
.toggle:active input[type=checkbox]:checked::before{transform:translateX(12px)}
.toggle input[type=checkbox]:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* sliders */
input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#2a2a2d}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#2a2a2d}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--spectrum)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#f5f5f7;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .35s var(--spring),box-shadow .3s}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#f5f5f7;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .35s var(--spring)}
input[type=range]:hover:enabled::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.5)}
input[type=range]:active:enabled::-webkit-slider-thumb{transform:scale(1.3)}
input[type=range]:hover:enabled::-moz-range-thumb{transform:scale(1.15)}
input[type=range]:active:enabled::-moz-range-thumb{transform:scale(1.3)}
input[type=range]:disabled{opacity:.4;cursor:default}

/* expandable sections open and close smoothly */
details{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s var(--out),opacity .3s var(--ease),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
summary{transition:color .2s}
summary:hover{color:var(--text)}
summary::before{transition:transform .4s var(--spring)}
details[open]>summary::before{content:'+';transform:rotate(45deg)}

/* dialogs: rise in with a blur, sink out the same way */
dialog,.login-dialog{background:#0e0e10;border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 50px 120px -30px #000,inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateY(10px) scale(.97);filter:blur(8px);
  transition:opacity .2s var(--ease),transform .25s var(--ease),filter .2s var(--ease),overlay .25s allow-discrete,display .25s allow-discrete}
dialog[open],.login-dialog[open]{opacity:1;transform:none;filter:none;animation:none;
  transition:opacity .35s var(--out),transform .55s var(--spring),filter .35s var(--out),overlay .55s allow-discrete,display .55s allow-discrete}
@starting-style{dialog[open],.login-dialog[open]{opacity:0;transform:translateY(18px) scale(.95);filter:blur(10px)}}
dialog::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--hairline);background-size:200% 100%;opacity:.7;animation:hairline 6s linear infinite;pointer-events:none}
dialog::backdrop,.login-dialog::backdrop{background:rgba(0,0,0,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),overlay .3s allow-discrete,display .3s allow-discrete}
dialog[open]::backdrop,.login-dialog[open]::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@starting-style{dialog[open]::backdrop,.login-dialog[open]::backdrop{background:rgba(0,0,0,0);backdrop-filter:blur(0)}}
dialog .actions button,.ask-actions button{border-radius:999px}
#schedule-dialog h2{font-size:20px;letter-spacing:-.025em}

/* questions (instead of the browser's confirm and prompt) */
.ask-dialog{width:min(420px,calc(100% - 32px));padding:26px 24px 20px}
.ask-dialog h2{margin:0 0 8px;font-size:18px;font-weight:650;line-height:1.35;letter-spacing:-.02em}
.ask-text{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.ask-dialog input{width:100%;margin-top:16px;padding:12px 14px;border-radius:12px}
.ask-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.ask-actions button{padding:10px 18px}
.pill-btn.danger{background:#ff453a;color:#fff}
.pill-btn.danger:hover{background:#ff5f55;box-shadow:0 0 0 4px rgba(255,69,58,.15)}

/* touches: the wave spreading from the finger */
.wave-layer{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.wave{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,currentColor 24%,transparent),transparent)}
.wave.ai{background:radial-gradient(closest-side,rgba(201,89,221,.5),rgba(8,148,255,.28) 55%,rgba(255,144,4,.12) 75%,transparent)}
.ai-btn:hover{box-shadow:0 0 26px -6px rgba(201,89,221,.6),0 0 34px -10px rgba(8,148,255,.55)}

/* sliding tabs: one pill moves to the chosen option */
.has-glide{position:relative}
.has-glide>:not(.glide){position:relative;z-index:1}
.glide{position:absolute;left:0;top:0;z-index:0;opacity:0;pointer-events:none;transition:transform .5s var(--spring),width .5s var(--out),height .5s var(--out),opacity .25s}
.glide.on{opacity:1}
.ed-tabs.has-glide button.on,.tabs.has-glide .tab.on,.segmented.has-glide button.on,.side-nav.has-glide button.on{background:none;box-shadow:none}
.ed-tabs .glide{border-radius:12px;background:#1f1f23;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ed-tabs button,.tabs .tab,.segmented button{transition:color .3s var(--ease)}
.tabs .glide,.segmented .glide{border-radius:7px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2)}
.side-nav .glide{border-radius:10px;background:rgba(255,255,255,.08)}
.side-nav button:hover{background:none}
.lib-filter{background:transparent;transition:color .3s var(--ease),border-color .3s}
.lib-filters.has-glide .lib-filter.on{background:transparent;border-color:transparent}
.lib-filters .glide{border-radius:999px;background:#f5f5f7}

/* messages: a glass pill with the AI dot */
#status{background:var(--glass);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);border-color:rgba(255,255,255,.1);border-radius:16px;
  padding:11px 18px 11px 15px;box-shadow:0 24px 60px -18px rgba(0,0,0,.85);transform:translate(-50%,-16px) scale(.96);filter:blur(6px);
  transition:opacity .25s var(--ease),transform .5s var(--spring),filter .3s var(--ease)}
#status.show{transform:translate(-50%,0);filter:none}
#status::before{background:var(--spectrum-c);animation:spin360 2s linear infinite,breathe 1.8s ease-in-out infinite;box-shadow:0 0 12px rgba(201,89,221,.6)}
#status.error::before{background:#ff453a;box-shadow:0 0 10px rgba(255,69,58,.6);animation:none}

@media(prefers-reduced-motion:reduce){
  .float,.float [role=option],.float [role=menuitem],dialog::before{animation:none}
  dialog,dialog::backdrop,.glide,#status{transition:none}
  details::details-content{transition:none}
}

/* keyboard focus on dropdowns: a soft ring, not a hard outline */
.vs-trigger:focus-visible{outline:0;border-color:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.08)}

/* library header: one tidy row on wide screens */
@media(min-width:1101px){
  .lib-tools{flex-wrap:nowrap;gap:8px}
  .lib-tools input[type=search]{min-width:0;width:230px}
}
.lib-tools input[type=search]{padding-left:38px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%2386868b' stroke-width='2'/%3E%3Cpath d='M16 16l4 4' stroke='%2386868b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14px center/16px no-repeat,var(--surface)}
.lib-tools .primary.sm{border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;white-space:nowrap}

/* one neutral palette: no leftovers of the old green theme */
.style-grid button{background:#121214;border:1px solid var(--line);transition:border-color .25s,background .25s,box-shadow .3s var(--out)}
.style-grid button:hover{border-color:var(--line-2);background:#161618}
.style-grid button.on{background:#17171a;border-color:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.chips button{color:#c9c9cf;background:#121214;border:1px solid var(--line);transition:color .2s,border-color .25s,background .25s}
.chips button.on{color:#fff;background:#1c1c1f;border-color:rgba(255,255,255,.55)}
.titles label{color:#c9c9cf}
.tags button.on{color:#fff}

/* =====================================================================
   v9 · editor: fits one screen, follows the voice, richer timeline
   ===================================================================== */
/* header: the title is edited in place, the state tells what is pending */
.ed-head{gap:14px;padding-bottom:14px}
.ed-name small{display:block;margin-bottom:1px}
#ed-title{width:100%;font-size:19px;font-weight:650;letter-spacing:-.02em;background:none;border:1px solid transparent;padding:5px 9px;margin-left:-9px;border-radius:10px}
#ed-title:hover{border-color:var(--line);background:rgba(255,255,255,.02)}
#ed-title:focus{border-color:rgba(255,255,255,.3);background:#0f0f11}
.ed-state{display:inline-flex;align-items:center;gap:7px;transition:color .3s,background .3s,box-shadow .3s}
.ed-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(48,209,88,.15)}
.ed-state.dirty{color:#fff;background:#1a1a1d;box-shadow:inset 0 0 0 1px var(--line-2)}
.ed-state.dirty::before{background:var(--spectrum-c);box-shadow:0 0 8px rgba(201,89,221,.6);animation:spin360 1.6s linear infinite,breathe 1.6s ease-in-out infinite}
.editor-view:not(.dirty) #ed-discard{display:none}
.editor-view.dirty #ed-discard{animation:rise-in .35s var(--out)}
#ed-save{position:relative;transition:background .3s,color .3s,box-shadow .4s var(--out),transform .35s var(--ease)}
.editor-view:not(.dirty) #ed-save{background:#1c1c1f;color:var(--muted)}
.editor-view.dirty #ed-save{box-shadow:0 0 26px -6px rgba(201,89,221,.65),0 0 34px -10px rgba(8,148,255,.6)}
#ed-save.saving{color:transparent;pointer-events:none}
#ed-save.saving::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(0,0,0,.2);border-top-color:#000;animation:spin .7s linear infinite}

/* stage: a soft AI glow breathes behind the phone while it plays */
.ed-stage{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 80% at 50% 0%,#141418,#08080a)}
.ed-stage::before{content:'';position:absolute;left:50%;top:45%;z-index:-1;width:min(44%,360px);aspect-ratio:9/16;transform:translate(-50%,-50%);border-radius:48px;
  background:var(--spectrum-c);filter:blur(80px);opacity:0;pointer-events:none;transition:opacity .9s var(--ease);animation:spin360 9s linear infinite}
.ed-stage.playing::before{opacity:.26}
.ed-phone .phone{transition:box-shadow .6s var(--ease)}

/* player bar: one glass pill */
.ed-controls{gap:4px;padding:5px 7px 5px 5px;border-radius:999px;background:rgba(22,22,25,.72);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -20px #000;flex-wrap:nowrap;max-width:100%}
.ed-controls .play-btn{width:40px;height:40px;flex:none}
.ed-time{min-width:92px;text-align:center;font-size:13px;color:#d2d2d7}
.ed-sep{flex:none;width:1px;height:20px;margin:0 3px;background:var(--line-2)}
.ed-cut{margin-left:0;gap:4px}
.ed-controls .icon-btn.sm{width:32px;height:32px;flex:none}
.ed-controls .icon-btn.sm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-speed{min-width:48px;padding:6px 10px!important;font-size:12.5px!important;font-variant-numeric:tabular-nums}
.ed-speed.on{color:#fff;border-color:rgba(255,255,255,.45)}
#ed-mute path{transition:opacity .25s,transform .4s var(--spring)}
#ed-mute .cross{opacity:0;transform:scale(.3);transform-origin:18.5px 12px}
#ed-mute.muted{color:#ff8a80}
#ed-mute.muted .cross{opacity:1;transform:none}
#ed-mute.muted .wave1,#ed-mute.muted .wave2{opacity:0;transform:translateX(-4px)}
.pop-menu.float .on{color:#fff;font-weight:600}
.pop-menu.float .on::after{content:'';margin-left:auto;width:14px;height:14px;background:var(--spectrum);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#ed-speed+.float,.pop-menu.float:has(.on){min-width:150px}

/* tabs with icons */
.ed-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ed-tabs svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:opacity .3s}
.ed-tabs button.on svg{opacity:1}
.ed-section .note{text-align:left;margin:0 0 4px}

/* subtitles: the phrase being said lights up and fills with the AI colours */
.ed-words .phrase{position:relative;overflow:hidden;transition:background .3s,box-shadow .3s}
.ed-words .phrase:hover{background:#151518}
.ed-words .phrase::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);transform-origin:left;transform:scaleX(var(--p,0));opacity:0;transition:opacity .3s}
.ed-words .phrase.now{background:#19191d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ed-words .phrase.now::after{opacity:1}
.ed-words .phrase.now .stamp{color:#fff;background:#2a2a2f}
.ed-words .stamp{transition:color .3s,background .3s}

/* timeline: ruler, time under the playhead, hover guide and clip length */
.ed-timeline{padding:10px 16px 14px}
.tl-ruler{position:relative;height:20px;margin-bottom:4px;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;user-select:none}
.tl-ticks i{position:absolute;bottom:0;width:1px;height:5px;background:var(--line-2)}
.tl-ticks span{position:absolute;bottom:7px;left:0;transform:translateX(-50%);white-space:nowrap;font-style:normal}
.tl-now,.tl-hover-time{position:absolute;bottom:3px;z-index:2;transform:translateX(-50%);padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:650;white-space:nowrap;pointer-events:none}
.tl-now{background:#fff;color:#000;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.tl-hover-time{z-index:1;background:#2a2a2e;color:#e8e8ec;opacity:0;transition:opacity .2s}
.tl-ruler.hovering .tl-hover-time{opacity:1}
.tl-track{height:60px}
.tl-hover{position:absolute;top:0;bottom:0;z-index:2;width:1px;background:rgba(255,255,255,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.tl-track:hover .tl-hover{opacity:1}
.tl-track.scrubbing .tl-hover,.tl-track.cutting .tl-hover{opacity:0}
.tl-track.scrubbing{cursor:grabbing}
.tl-len{position:absolute;left:50%;bottom:6px;z-index:1;transform:translateX(-50%);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;color:#fff;white-space:nowrap;pointer-events:none;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s var(--spring)}
.tl-track.cutting .tl-len{transform:translateX(-50%) scale(1.12)}
.tl-h{transition:box-shadow .25s,background .25s}
.tl-h:hover,.tl-track.cutting .tl-h{box-shadow:0 0 16px rgba(255,255,255,.55)}
.tl-clip::after{transition:background .3s}
.tl-track.cutting .tl-clip::after{background:linear-gradient(90deg,rgba(8,148,255,.24),rgba(201,89,221,.24),rgba(255,46,84,.2))}
.tl-word{transition:background .25s,color .25s,border-color .2s}
.tl-word.now{background:#f5f5f7;color:#000}

/* framing tab: tidy source panel */
.frame-source-wrap{border-radius:16px;background:rgba(10,10,12,.72);border-color:var(--line)}
.frame-record-actions button{border-radius:999px;white-space:nowrap}
.frame-record-actions .recording{background:#ff453a;color:#fff;animation:rec 1.4s ease-in-out infinite}
@keyframes rec{50%{box-shadow:0 0 0 6px rgba(255,69,58,.18)}}

/* messages sit at the bottom while editing, away from the title */
body.editing #status{top:auto;bottom:24px;transform:translate(-50%,16px) scale(.96)}
body.editing #status.show{transform:translate(-50%,0)}

/* big screens: the whole editor fits one screen, the phone grows with it */
@media(min-width:1000px){
  body.editing .app main{padding-top:16px;padding-bottom:16px}
  .editor-view{height:calc(100dvh - 32px);min-height:640px;gap:14px}
  .ed-body{min-height:0;grid-template-columns:minmax(0,1fr) minmax(340px,420px)}
  .ed-stage{min-height:0;container-type:size}
  .ed-panel{min-height:0}
  .ed-section{max-height:none;min-height:0}
  .ed-phone .phone{width:auto;min-width:0;height:min(700px,calc(100cqh - 100px));aspect-ratio:9/16}
  .ed-stage:has(.frame-source-wrap:not([hidden])){grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-self:stretch;align-items:center;justify-items:center}
  .ed-stage:has(.frame-source-wrap:not([hidden])) .phone{width:auto;max-width:none;height:calc(100cqh - 110px)}
  .ed-stage:has(.frame-source-wrap:not([hidden])) .frame-source-wrap{max-width:none;width:auto;display:flex;flex-direction:column}
  #frame-source{width:auto;height:auto;max-width:100%;max-height:calc(100cqh - 230px)}
}
@media(min-width:1000px) and (max-width:1280px){
  .ed-body{grid-template-columns:minmax(0,1fr) 340px}
  .tl-meta small{display:none}
}
/* a narrow stage: the player bar takes two tidy rows */
@container (max-width:540px){
  .ed-controls{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;border-radius:22px;padding:6px}
  .ed-controls .ed-sep{display:none}
  .ed-controls .ed-cut{order:5;grid-column:1/-1;justify-content:center;padding-top:4px;border-top:1px solid var(--line)}
}
@media(max-width:999px){
  .ed-phone .phone{width:auto;min-width:0;height:min(58vh,560px);aspect-ratio:9/16}
  .ed-controls{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;border-radius:22px;padding:6px;width:min(100%,420px)}
  .ed-controls .ed-sep{display:none}
  .ed-controls .ed-cut{order:5;grid-column:1/-1;justify-content:center;padding-top:4px;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .ed-tabs button{flex-direction:column;gap:3px;font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.ed-stage::before,.ed-state.dirty::before,.frame-record-actions .recording{animation:none}}
.tl-ticks i.first span{transform:none}
.tl-ticks i.last span{left:auto;right:0;transform:none}
@media(max-width:640px){.editor-view:not(.dirty) .ed-state{display:none}}

/* =====================================================================
   v10 · VenusClip brand: wordmark, star and the logo's violet
   ===================================================================== */
:root{--violet:#a32bff;--violet-2:#bb66ff;--violet-soft:rgba(163,43,255,.16);--violet-glow:rgba(163,43,255,.55)}
.brand{gap:0}
.wordmark{display:block;height:30px;width:auto;user-select:none;-webkit-user-drag:none;transition:filter .5s var(--ease),transform .5s var(--spring)}
.brand:hover .wordmark{filter:drop-shadow(0 0 16px var(--violet-glow))}
.sidebar>.brand .wordmark{height:28px}
.app-top .wordmark,.site-footer .wordmark{height:24px}
@media(max-width:640px){.site-nav .wordmark{height:24px}}

/* the star: login mark and AI buttons */
@keyframes twinkle{0%,72%,100%{transform:none}82%{transform:scale(.8) rotate(45deg)}92%{transform:scale(1.08) rotate(90deg)}}
@keyframes twinkle-once{40%{transform:scale(.78) rotate(45deg)}75%{transform:scale(1.12) rotate(90deg)}100%{transform:rotate(90deg)}}
.brand-star{position:relative;display:inline-grid;place-items:center;width:56px;height:56px}
.brand-star::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--violet);filter:blur(22px);opacity:.65;animation:breathe 3.2s ease-in-out infinite}
.brand-star svg{position:relative;width:100%;height:100%;fill:var(--violet);animation:twinkle 4.5s var(--ease) infinite}
.spark{overflow:visible}
.ai-btn .spark{fill:var(--violet-2)}
.ai-cta .spark{fill:var(--violet)}
.ai-btn:hover:not(.working) .spark,.ai-cta:hover:enabled .spark{animation:twinkle-once .7s var(--ease)}

/* the violet in the interface */
::selection{background:rgba(163,43,255,.42);color:#fff}
:focus-visible{outline-color:var(--violet-2)}
input[type=text]:focus,input[type=number]:focus,input[type=datetime-local]:focus,input[type=password]:focus,input[type=search]:focus,input[type=email]:focus,input[type=url]:focus,textarea:focus{border-color:rgba(187,102,255,.7);box-shadow:0 0 0 4px var(--violet-soft)}
.url-box:focus-within{border-color:rgba(187,102,255,.7);box-shadow:0 0 0 5px var(--violet-soft),0 30px 70px -40px #000}
.vs.open .vs-trigger,.vs-trigger:focus-visible{border-color:rgba(187,102,255,.7);box-shadow:0 0 0 4px var(--violet-soft)}
.vs-option::after,.pop-menu.float .on::after{background:var(--violet-2)}
.toggle input[type=checkbox]:checked{background:linear-gradient(90deg,#7b1fff,var(--violet),#c46dff);background-size:200% 100%}
input[type=range]::-moz-range-progress{background:var(--violet)}
input[type=range]:hover:enabled::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--violet-soft),0 2px 8px rgba(0,0,0,.5)}
.pill-btn:hover{box-shadow:0 0 0 4px var(--violet-soft)}
.side-nav .glide::before{content:'';position:absolute;left:0;top:28%;bottom:28%;width:3px;border-radius:3px;background:var(--violet);box-shadow:0 0 10px var(--violet-glow)}
.credits-head b{background:var(--violet-soft);color:var(--violet-2)}
.credits-up,.empty a,.recent-head a:hover{color:var(--violet-2)}
.plan-tag{background:var(--violet);color:#fff;box-shadow:0 6px 20px -6px var(--violet-glow)}
.lib-filters .glide{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 6px 18px -8px var(--violet-glow)}
.title-opt.on,.hook-styles button.on,.chips button.on{border-color:var(--violet-2)}
.style-grid button.on,.card-options .presets button.on{box-shadow:inset 0 0 0 1.5px var(--violet-2)}
.style-picker button.on{border-color:var(--violet-2)}
@media(prefers-reduced-motion:reduce){.brand-star::before,.brand-star svg{animation:none}}

/* published site: connecting to VenusClip on this computer */
.offline{max-width:560px;margin:56px auto 24px;padding:36px 32px 28px;text-align:center;border-radius:26px;background:#0c0c0e;border:1px solid var(--line-2)}
.offline h2{font-size:22px;letter-spacing:-.025em;margin:14px 0 8px}
.offline p{margin:0 auto;max-width:440px;line-height:1.6}
.offline .pill-btn{margin-top:20px;padding:12px 24px}
.offline-wait{display:inline-flex;align-items:center;gap:10px;margin-top:22px!important;font-size:13px;color:var(--muted)}
.offline-wait i{width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet-glow);animation:breathe 1.4s ease-in-out infinite}
.offline-note{display:block;margin-top:10px;font-size:12px;color:var(--faint)}
body:has(#offline:not([hidden])) .app main>.view{display:none}
#actions-hint.warn{color:#d9c2ff;padding:10px 12px;border-radius:12px;background:var(--violet-soft);border:1px solid rgba(187,102,255,.25)}
.offline h2{display:block;text-align:center}
.status-pill.off::before{background:#ff9f0a;box-shadow:0 0 0 3px rgba(255,159,10,.15)}

.browser-processing-notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1000;width:min(660px,calc(100% - 32px));padding:14px 18px;border:1px solid #bb66ff55;border-radius:16px;background:#21182bf5;color:#f3e9ff;box-shadow:0 8px 32px #0005;font-size:13px;line-height:1.5;backdrop-filter:blur(12px)}
.browser-processing-notice[hidden]{display:none}