/* Pulse: the cave look. Pure black, Grove Void greys, warm off-white type.
   Chloe's Look and feel picks (Oct 14): H3 long fade on her own 16:9 banner, G0 no grain,
   no frosted top bar (plain on black), A3 off-white accent with no color. */
:root{
  --bg:#000; --card:#1c1c1c; --card-touch:#242424; --card-3:#2e2e2e;
  --line:rgba(255,255,255,.08);
  --text:#f3efe8; --text-2:#9a9893; --text-3:#5f5e5b;
  --accent:#f3efe8; --accent-ink:#000; /* A3 off-white, no color. Only on New, Export, the playhead and the selected clip */
  /* H3: the long, moody fade. Smootherstep so the banner melts into the black with no visible edge */
  --fade:78%;
  --melt:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.009) 10%,rgba(0,0,0,.058) 20%,rgba(0,0,0,.163) 30%,rgba(0,0,0,.317) 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.683) 60%,rgba(0,0,0,.837) 70%,rgba(0,0,0,.942) 80%,rgba(0,0,0,.991) 90%,#000 100%);
  --r-card:22px; --r-btn:14px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);height:100%}
/* (0.9.0) the app page never zooms (Chloe's screenshot: the whole page zoomed in, the Export button off screen): no pinch
   or double-tap zoom on the page (Pulse's own timeline pinch is done in script, so it still works), and every text field
   at 16px or more, so iPhone doesn't zoom in when one is focused */
html,body{touch-action:pan-x pan-y}
/* (0.9.1) every scrolling area too: touch-action stops at a scroll container, so Home, its rows, Settings and the tool row
   had pinch zoom back (Chloe: "even when on the homepage I pinch to zoom it zooms") */
.home,.row,.set-body,.ed-trow,.sheet,.modal{touch-action:pan-x pan-y}
button,a,label,[role=button]{touch-action:manipulation}
input,select,textarea{font-size:16px}
body{overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;left:0;top:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h2{margin:0;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--text)}

.app{position:fixed;inset:0;display:flex}
.home{position:relative;scrollbar-width:none;flex:1;min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + 18px) 0 calc(var(--sal) + 18px)}

.top{padding:4px 0 10px}
.brand{font-size:13px;font-weight:650;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.path{min-height:0;font-size:13px;color:var(--text-2);margin-top:4px}
.path:empty{display:none}

.sec{margin-top:22px;position:relative;z-index:2}

/* Hero: Chloe's own 16:9 image or GIF, edge to edge on the phone, melting into black (H3) */
.hero{position:relative;margin:2px calc(-18px - var(--sar)) 0 calc(-18px - var(--sal))}
.hero-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;transition:opacity .2s ease}
.hero-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fade);background:var(--melt);pointer-events:none;z-index:1}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:none;-webkit-user-drag:none}
.hero.has-img .hero-img{display:block}
.hero-empty{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-bottom:9%;
  background:linear-gradient(180deg,#272727 0%,#1c1c1c 40%,#111 100%);text-align:center}
.hero.is-empty .hero-empty{display:flex}
.hero-empty>span{position:relative;z-index:2}
.he-ico{width:50px;height:50px;border-radius:50%;background:var(--card-3);display:grid;place-items:center;margin-bottom:6px;color:var(--text);transition:transform .15s ease,background .15s ease}
.he-ico svg{width:24px;height:24px}
.hero-empty:active .he-ico{transform:scale(.94);background:#383838}
.he-t{font-size:16px;font-weight:600;color:var(--text)}
.he-s{font-size:13px;color:var(--text-2)}
.hero.busy .hero-frame{opacity:.55}
.hero+.sec{margin-top:18px}

/* sheet: slides up from the bottom, nothing bounces */
.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0);transition:background .22s ease;display:flex;align-items:flex-end;justify-content:center}
.sheet-back.open{background:rgba(0,0,0,.6)}
.sheet{width:100%;max-width:460px;background:var(--card);border-radius:var(--r-card) var(--r-card) 0 0;padding:8px calc(14px + var(--sar)) calc(var(--sab) + 14px) calc(14px + var(--sal));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.sheet-back.open .sheet{transform:translateY(0)}
.sheet-grip{width:38px;height:5px;border-radius:3px;background:var(--card-3);margin:2px auto 12px}
.sheet-title{font-size:13px;color:var(--text-2);text-align:center;margin-bottom:10px}
.sheet-btn{display:block;width:100%;padding:15px 16px;border-radius:var(--r-btn);background:var(--card-touch);font-size:16px;text-align:center;margin-top:8px;transition:background .15s ease}
.sheet-btn:active{background:var(--card-3)}
.sheet-btn.cancel{background:transparent;color:var(--text-2)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.empty{margin:10px 0 0;font-size:13px;color:var(--text-2)}

.row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-18px - var(--sar)) 0 calc(-18px - var(--sal));padding:0 calc(18px + var(--sar)) 2px calc(18px + var(--sal));scroll-snap-type:x proximity}
.row::-webkit-scrollbar{display:none}
.row>*{flex:none;scroll-snap-align:start}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.foot-space{height:calc(var(--sab) + 110px)}

.fab{position:fixed;z-index:30;right:calc(var(--sar) + 20px);bottom:calc(var(--sab) + 20px);width:58px;height:58px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px rgba(0,0,0,.6);display:grid;place-items:center;transition:transform .15s ease,filter .15s ease}
.fab:active{transform:scale(.94);filter:brightness(.9)}
.fab span{position:relative;width:22px;height:22px}
.fab span::before,.fab span::after{content:"";position:absolute;background:currentColor;border-radius:2px;left:50%;top:50%;transform:translate(-50%,-50%)}
.fab span::before{width:22px;height:2.5px}.fab span::after{width:2.5px;height:22px}

.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 92px);transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--card-touch);color:var(--text);font-size:14px;padding:11px 16px;border-radius:var(--r-btn);transition:opacity .2s ease,transform .2s ease;width:max-content;max-width:calc(100vw - 40px);text-align:center;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
/* phone on its side: keep the banner from filling the whole screen */
@media (orientation:landscape) and (max-height:520px) and (max-width:899px){
  .hero{margin-left:0;margin-right:0;max-width:calc(68vh * 16 / 9)}
  .hero-frame{border-radius:var(--r-card)}
}
/* computer: same app, wider, with the library in a sidebar on the left */
.side{display:none}
@media (min-width:900px){
  .side{display:flex;flex-direction:column;width:250px;flex:none;height:100%;padding:calc(var(--sat) + 22px) 14px 22px calc(var(--sal) + 18px);background:#0b0b0b;border-right:1px solid var(--line)}
  .side .brand{padding:0 10px 18px}
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-btn);font-size:14px;color:var(--text-2);text-align:left}
  .side-item.on{background:var(--card);color:var(--text)}
  .side-item:disabled{cursor:default;opacity:.7}
  .si-ico{width:16px;height:16px;border-radius:5px;border:1.6px solid currentColor;display:inline-block}
  .si-ico.recent{border-radius:50%}
  .side-label{margin:26px 10px 8px;font-size:12px;color:var(--text-3);letter-spacing:.04em}
  .side-empty{margin:0 10px;font-size:13px;color:var(--text-2)}
  .home{padding-left:36px;padding-right:36px}
  .home .top .brand{display:none}
  .row{margin:0;padding:0 0 2px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .home>*{max-width:1100px}
  .hero{margin:4px 0 0;max-width:min(1100px, calc(62vh * 16 / 9))}
  .hero-frame{border-radius:var(--r-card)}
  .sheet{border-radius:var(--r-card);margin-bottom:24px}
}

/* Oct 14 fixes from Chloe: no scroll bar, and no black band above the banner on the phone */
.home::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;-webkit-appearance:none}
@media (orientation:portrait) and (max-width:899px){
  .home{padding-top:0}
  .top{position:absolute;z-index:4;top:calc(var(--sat) + 14px);left:calc(var(--sal) + 18px);right:calc(var(--sar) + 18px);padding:4px 0 10px;pointer-events:none}
  .top .path{pointer-events:auto}
  .brand{text-shadow:0 1px 12px rgba(0,0,0,.55)}
  .hero{margin-top:0}
  .hero-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--sat) + 70px);background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));pointer-events:none;z-index:1}
  .hero-empty{padding-top:calc(var(--sat) + 30px);padding-bottom:4%}
}
/* Oct 14: Chloe doesn't want the Pulse name in the app */
.brand{display:none!important}

/* ---------- Oct 14 (Home polish): rows line up with the headings, quiet empty states, add-profile circle ---------- */
/* the first card or circle starts exactly under the heading: scroll snapping now respects the row's inner padding (safe areas included) */
.row{scroll-padding-inline:calc(18px + var(--sal)) calc(18px + var(--sar))}
.row:empty,.grid:empty{display:none}
.sec-head+.empty{margin-top:0}
.empty{line-height:1.4}
.empty.inline{flex:none;align-self:center;margin:0 0 22px 4px;scroll-snap-align:none;white-space:nowrap}
.bubble{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.bubble i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center}
.bubble b{font-size:12px;font-weight:500;color:var(--text-2);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bubble.add i{box-shadow:inset 0 0 0 1.5px rgba(243,239,232,.32);color:var(--text);transition:transform .15s ease,background .15s ease}
.bubble.add i svg{width:26px;height:26px}
.bubble.add:active i{transform:scale(.94);background:var(--card)}

/* account button: round, top right over the banner, like YouTube and Instagram */
.acct{position:absolute;z-index:3;top:12px;right:calc(12px + var(--sar));width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:rgba(18,18,18,.55);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35);color:var(--text);transition:transform .15s ease,background .15s ease}
.acct:active{transform:scale(.92);background:rgba(18,18,18,.75)}
.acct-ph{display:grid;place-items:center}
.acct svg{width:21px;height:21px}

/* Settings: a full sheet that slides up from the bottom and follows your finger down to close */
.set-back{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,0);transition:background .24s ease}
.set-back.open{background:rgba(0,0,0,.6)}
.set{position:absolute;left:0;right:0;bottom:0;top:calc(var(--sat) + 10px);display:flex;flex-direction:column;background:#0d0d0d;border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:0 -1px 0 var(--line);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}
.set-back.open .set{transform:translateY(0)}
.set.dragging{transition:none}
.set-head{flex:none;padding:8px calc(16px + var(--sar)) 6px calc(16px + var(--sal));touch-action:none;cursor:grab}
.set-head .sheet-grip{margin:0 auto 8px}
.set-bar{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.set-bar h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
.set-done{padding:8px 16px;border-radius:999px;background:var(--card-touch);font-size:15px;font-weight:600;transition:background .15s ease,transform .15s ease}
.set-done:active{background:var(--card-3);transform:scale(.96)}
.set-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding:10px calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
.set-body::-webkit-scrollbar{display:none}
.set-end{height:max(calc(var(--sab) + 28px),48px)} /* phones with no home bar (SE) still get breathing room under the last row */
.grp{background:var(--card);border-radius:18px;overflow:hidden}
.grp.pad{padding:14px}
.grp-label{margin:26px 6px 8px;font-size:13px;font-weight:500;color:var(--text-2)}
.grp-foot{margin:8px 6px 0;font-size:12.5px;line-height:1.4;color:var(--text-2);opacity:.8}
.acct-card{display:flex;align-items:center;gap:14px;padding:16px}
.acct-big{flex:none;width:56px;height:56px;border-radius:50%;background:var(--card-3);display:grid;place-items:center;color:var(--text-2)}
.acct-big svg{width:30px;height:30px}
.acct-txt b{display:block;font-size:17px;font-weight:600}
.acct-txt span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--text-2)}
.rowbtn,.rowinfo{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:14px 16px;font-size:16px;text-align:left}
.grp>.rowbtn+.rowbtn,.grp>.rowinfo+.rowinfo,.grp>.rowinfo+.rowbtn,.grp>.rowbtn+.rowinfo{box-shadow:inset 0 1px 0 var(--line)}
.rowbtn{transition:background .15s ease}
.rowbtn:active{background:var(--card-touch)}
.rowbtn:disabled{opacity:.4;cursor:default}
.rowbtn:disabled:active{background:none}
.rowinfo em,.rowbtn em{font-style:normal;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.chev{flex:none;width:8px;height:8px;margin-right:3px;border-top:1.6px solid var(--text-3);border-right:1.6px solid var(--text-3);transform:rotate(45deg)}
.ban-prev{position:relative;aspect-ratio:16/9;margin:12px 12px 6px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#272727 0%,#1c1c1c 40%,#111 100%);display:grid;place-items:center}
.ban-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.ban-prev.has img{display:block}
.ban-prev.has .ban-none{display:none}
.ban-none{font-size:13px;color:var(--text-2)}
.opt-label{margin:16px 2px 8px;font-size:13px;color:var(--text-2)}
.opt-label:first-child{margin-top:2px}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:#121212}
.seg button{flex:1;min-width:0;min-height:40px;padding:8px 4px;border-radius:11px;font-size:14px;font-weight:500;color:var(--text-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:background .15s ease,color .15s ease}
.seg button[aria-checked="true"]{background:var(--card-3);color:var(--text)}
.seg button:active{background:var(--card-touch)}
.seg.ratios button{min-height:64px;font-size:12.5px;font-variant-numeric:tabular-nums}
.seg.ratios i{display:block;border:1.5px solid currentColor;border-radius:3px}
@media (orientation:portrait) and (max-width:899px){
  .acct{top:calc(var(--sat) + 10px)}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:899px){
  .acct{right:12px}
  .set{top:8px;left:calc(var(--sal) + 40px);right:calc(var(--sar) + 40px)}
  .set-head,.set-body{padding-left:16px;padding-right:16px}
}
@media (min-width:900px){
  .row{scroll-padding-inline:0}
  .acct{right:14px;top:14px}
  .set-back{display:flex;align-items:center;justify-content:center}
  .set{position:relative;inset:auto;width:min(560px,calc(100vw - 48px));height:min(820px,calc(100vh - 64px));border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.6)}
  .set-head .sheet-grip{display:none}
  .set-head{padding-top:14px;cursor:default}
}

/* ---------- Oct 14 (Chloe): no black strip under the sheets ----------
   On iPhone the screen can run a little past the bottom of the page (the home bar area), and that bit showed the black page
   behind it, so the Settings and banner sheets looked cut off above the home bar. The sheets now carry their own color down
   past the bottom edge, and while one is open the page behind them takes the same color, so the grey runs to the very bottom.
   The safe-area padding inside each sheet stays, so the last row still clears the home bar. */
.app{background:var(--bg)}
.set::after,.sheet::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:max(160px,40vh);background:inherit;pointer-events:none}
.sheet{position:relative}
@media (orientation:portrait) and (max-width:899px){
  html.set-up,html.set-up body{background:#0d0d0d!important}
  html.sheet-up,html.sheet-up body{background:var(--card)!important}
}
@media (min-width:900px){
  .set::after,.sheet::after{display:none}
}

/* ---------- Oct 14 (Login and sync): Settings > Account ----------
   Signed out: "Sign in with email". Then the email, then the 6-digit code from the email (iPhone can fill it in from Mail).
   Signed in: the email, when it last synced, Sync now and Sign out. Same greys and SF Pro as the rest; no accent here
   (the off-white accent stays for New, Export, the playhead and the selected clip). */
#acctGrp .only-out,#acctGrp .only-email,#acctGrp .only-code,#acctGrp .only-in{display:none}
#acctGrp[data-auth="out"] .only-out,#acctGrp[data-auth="in"] .only-in{display:flex}
#acctGrp[data-auth="email"] .only-email,#acctGrp[data-auth="code"] .only-code{display:block}
#acctGrp>.acct-card+.rowbtn,#acctGrp>.acct-card+.signin{box-shadow:inset 0 1px 0 var(--line)}
.acct-big{position:relative;overflow:hidden}
.acct-big i{position:absolute;inset:0;display:none;place-items:center;font-style:normal;font-size:24px;font-weight:600;color:var(--text);background:var(--card-3)}
#acctGrp[data-auth="in"] .acct-big i{display:grid}
#acctGrp[data-auth="in"] .acct-big svg{visibility:hidden}
.acct-txt{min-width:0}
.acct-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signin{padding:14px 16px 16px}
.si-label{display:block;margin:0 2px 8px;font-size:13px;color:var(--text-2)}
.si-note{margin:0 2px 12px;font-size:14px;line-height:1.45;color:var(--text-2)}
.si-note b{color:var(--text);font-weight:600;word-break:break-all}
.si-input{display:block;width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border:0;border-radius:var(--r-btn);background:#121212;color:var(--text);
  font:inherit;font-size:17px;outline:none;box-shadow:inset 0 0 0 1px var(--line);-webkit-appearance:none;appearance:none}
.si-input::placeholder{color:var(--text-3)}
.si-input:focus{box-shadow:inset 0 0 0 1.5px rgba(243,239,232,.35)}
.si-code{font-size:28px;font-weight:600;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums;padding-left:calc(14px + .32em)}
.si-code::placeholder{letter-spacing:.32em}
.si-err{min-height:0;margin:8px 2px 0;font-size:13px;line-height:1.4;color:#e6a29a}
.si-err:empty{display:none}
.si-go{display:block;width:100%;min-height:50px;margin-top:12px;border-radius:var(--r-btn);background:var(--card-3);color:var(--text);font-size:16px;font-weight:600;transition:background .15s ease,transform .15s ease,opacity .15s ease}
.si-go:active{transform:scale(.98);background:#383838}
.si-go:disabled{opacity:.5}
.si-links{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.si-link{display:block;padding:12px 2px 2px;font-size:14px;color:var(--text-2)}
.si-link:active{color:var(--text)}
#cancelSignIn{margin:4px auto 0}
.si-when{font-style:normal;font-size:14px;color:var(--text-2);text-align:right}
.acct-in{display:none;font-size:16px;font-weight:600;line-height:1;color:var(--text)}
html.signed-in .acct-in{display:block}
html.signed-in .acct-ph{display:none}

/* ---------- Import step (Oct 14): Recent cards, New project, the simple project screen ---------- */
.recent-row{align-items:flex-start}
.pcard{display:flex;flex-direction:column;align-items:stretch;text-align:left;color:var(--text);transition:transform .15s ease}
.pcard:active{transform:scale(.98)}
.pc-thumb{position:relative;display:block;width:100%;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#242424,#141414);box-shadow:inset 0 0 0 1px var(--line)}
.pc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
.pc-thumb img.on{opacity:1}
.pc-ratio{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:8px;background:rgba(0,0,0,.55);font-size:11px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pcard b{display:block;margin-top:8px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.grp-label.first{margin-top:12px}
.np-name{font-size:17px}
.np-ratios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.np-ratios button{display:flex;flex-direction:column;align-items:center;padding:10px 2px 10px;border-radius:16px;background:var(--card);color:var(--text-2);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.np-ratios button[aria-checked="true"]{background:var(--card-3);color:var(--text);box-shadow:inset 0 0 0 1.5px rgba(243,239,232,.5)}
.np-box{display:grid;place-items:center;height:52px;width:100%}
.np-box i{display:block;border-radius:5px;border:1.6px solid currentColor;box-sizing:border-box}
.np-ratios button[aria-checked="true"] .np-box i{background:rgba(243,239,232,.12)}
.np-ratios b{margin-top:6px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.np-ratios em{margin-top:2px;font-style:normal;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.np-wm em{margin-left:auto}
.np-sw{flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:var(--card-3);opacity:.45}
.np-sw i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--text-2)}
.np-go{display:block;width:100%;min-height:54px;margin-top:28px;border-radius:var(--r-btn);background:var(--card-3);color:var(--text);font-size:17px;font-weight:600;transition:background .15s ease,transform .15s ease}
.np-go:active{transform:scale(.98);background:#383838}
.np-hint{text-align:center}

.proj{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:#000;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}
.proj.open{transform:translateY(0)}
/* ---------- the editor (Screen design > Editor on the phone) ---------- */
.ed{--tlh:calc(50dvh - 64px);--toolh:64px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto var(--toolh) var(--tlh);
  grid-template-areas:"top" "stage" "bar" "tools" "tl"}
.ed-top{grid-area:top;display:flex;align-items:center;gap:2px;padding:calc(var(--sat) + 4px) calc(8px + var(--sar)) 4px calc(6px + var(--sal));min-width:0}
.pj-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--text);transition:background .15s ease}
.pj-icon:active{background:var(--card-touch)}
.pj-icon svg{width:24px;height:24px}
.ed-name{display:flex;align-items:center;gap:3px;min-width:0;height:40px;padding:0 8px;border-radius:12px;font-size:16px;font-weight:650;transition:background .15s ease}
.ed-name:active{background:var(--card-touch)}
.ed-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-name svg{flex:none;width:16px;height:16px;color:var(--text-2)}
.ed-gap{flex:1}
.ed-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text);transition:background .15s ease}
.ed-ic:active{background:var(--card-touch)}
.ed-ic svg{width:22px;height:22px}
.ed-ic.off{color:var(--text-3)}
.ed-export{flex:none;height:34px;margin-left:6px;padding:0 15px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:14.5px;font-weight:650}
.ed-export.off{opacity:.38}
/* the preview: the project's real shape on black, sharp edges */
.ed-stage{grid-area:stage;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px calc(10px + var(--sar)) 6px calc(10px + var(--sal));background:#000}
.ed-frame{position:relative;flex:none;overflow:hidden;background:#000;border-radius:0;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.ed-frame video,.ed-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;border-radius:0}
.ed-frame video{z-index:0;background:#000}
.ed-frame .on{opacity:1;z-index:2}
/* Frame engine (test setting): Pulse's own drawing over the players, and a small line with its numbers */
.ed-frame .ed-cv{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none;background:#000;display:block;padding:0;margin:0;border:0;box-sizing:border-box;flex:none}
.ed-frame .ed-cv.vis{opacity:1}
.ed-eng{position:absolute;left:6px;top:6px;right:6px;z-index:4;width:max-content;max-width:calc(100% - 12px);padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;line-height:1.35;font-variant-numeric:tabular-nums;pointer-events:none}
.ed-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:12px;text-align:center;font-size:13px;color:var(--text-3)}
.ed-fsx{display:none}
.ed-bar{grid-area:bar;position:relative;display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 calc(10px + var(--sar)) 0 calc(16px + var(--sal))}
.ed-t{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--text)}
.ed-tot{color:var(--text-2)}
.ed-t2{display:flex;align-items:center;gap:2px}
.ed-play{position:absolute;left:50%;top:50%;width:44px;height:40px;margin:-20px 0 0 -22px;border-radius:12px;display:grid;place-items:center;color:var(--text);transition:background .15s ease}
.ed-play:active{background:var(--card-touch)}
.ed-play svg{width:24px;height:24px}
.ed-play .i-pause,.ed.playing .ed-play .i-play{display:none}
.ed.playing .ed-play .i-pause{display:block}
/* tools: a row of small rounded buttons */
.ed-tools{grid-area:tools;min-width:0;min-height:0;border-top:1px solid var(--line);position:relative}
.ed-trow{display:flex;gap:2px;height:100%;padding:0 calc(6px + var(--sar)) 0 calc(6px + var(--sal));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ed-trow::-webkit-scrollbar{display:none}
.ed-tool{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:62px;height:100%;border-radius:12px;color:var(--text);transition:background .15s ease}
.ed-tool:active{background:var(--card-touch)}
.ed-tool svg{width:22px;height:22px}
.ed-tool span{font-size:11px;font-weight:500;color:var(--text-2);white-space:nowrap}
.ed-tool.later svg{opacity:.55}
.ed-tback{width:52px}
/* the timeline: playhead fixed in the middle, the edit slides under it */
.ed-tl{grid-area:tl;position:relative;min-height:0;overflow:hidden;border-top:1px solid var(--line);background:#000}
.ed-sc{position:absolute;inset:0;overflow-x:auto;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior:contain;overscroll-behavior-x:none}
.ed-sc::-webkit-scrollbar{display:none}
.ed-in{position:relative;height:100%;min-width:100%;overflow-x:clip}  /* (0.9.4) nothing reaches past the project's end: the scroll stops there */
.ed-ruler{position:absolute;top:0;left:0;height:24px;pointer-events:none}
.ed-lane{position:absolute;left:0;right:0}
.ed-vid{top:34px;height:54px}
.ed-aud{top:98px;height:40px}
.ed-clip{position:absolute;top:0;bottom:0;border-radius:9px;overflow:hidden;background:var(--card);cursor:pointer}
.ed-clip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ed-clip.sel::after{box-shadow:inset 0 0 0 2px var(--accent)}
/* (0.9.6) hold a clip to reorder it: the clips shrink to thumbnails, the held one lifts and follows the finger */
.ed-clip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ed-vid.reo .ed-clip{opacity:0}
.ed-reo{position:absolute;left:0;right:0;z-index:30;pointer-events:none}
.ed-rt{position:absolute;top:0;height:100%;border-radius:8px;background-color:var(--card);background-repeat:no-repeat;box-sizing:border-box;transition:left .2s ease,width .2s ease}
.ed-reo:not(.on) .ed-rt{transition:none}
.ed-rt.lift{z-index:2;transition:width .2s ease;transform:scale(1.12);box-shadow:0 0 0 2px var(--accent),0 6px 18px rgba(0,0,0,.6)}
.ed-tile{position:absolute;top:0;bottom:0;background-color:#141414;background-repeat:no-repeat}
.ed-clip.photo .ed-tile{background-size:cover;background-position:center}
.ed-cdur{position:absolute;left:5px;top:4px;z-index:1;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.6);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none;white-space:nowrap}
.ed-cbar{position:absolute;left:0;bottom:0;height:2px;background:var(--text-2);z-index:1;pointer-events:none}
.ed-song{position:absolute;top:0;bottom:0;border-radius:9px;overflow:hidden;background:#161616;cursor:pointer}
.ed-song canvas{position:absolute;top:0;height:100%;pointer-events:none}
.ed-sname{position:absolute;left:6px;top:3px;z-index:1;max-width:calc(100% - 12px);font-size:10.5px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ed-chip{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:9px;background:#121212;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap}
.ed-chip svg{width:16px;height:16px}
.ed-chip:active{background:var(--card-touch)}
.ed-ph{position:absolute;top:0;width:2px;height:146px;background:var(--accent);pointer-events:none;z-index:3}
/* (0.8.5) extracted sound: lanes under the video (the song under them), moved by dragging when selected, trimmed by its ends.
   Fades: a shaded corner with a sloped edge at the start (fade in) and the end (fade out) */
.ed-xl{top:98px;height:0}
.ed-xs{position:absolute;height:40px;border-radius:9px;overflow:hidden;background:#14201d;cursor:pointer}
.ed-xs canvas{position:absolute;top:0;height:100%;pointer-events:none}
.ed-xs::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2}
.ed-xs.sel{touch-action:none;z-index:1}
.ed-xs.sel::after{box-shadow:inset 0 0 0 2px var(--accent)}
.ed-xs.drag{opacity:.85}
.ed-xs.ed-aud{background:#161a24}   /* (0.9.11) audio on a lane of its own */
.ed-addau{white-space:nowrap}
.ed-xh{display:none;position:absolute;top:0;bottom:0;width:16px;background:var(--accent);z-index:3;touch-action:none;cursor:ew-resize}
.ed-xh::after{content:"";position:absolute;left:7px;top:13px;bottom:13px;width:2px;border-radius:1px;background:rgba(255,255,255,.9)}
.ed-xh.l{left:0;border-radius:9px 0 0 9px}
.ed-xh.r{right:0;border-radius:0 9px 9px 0}
.ed-xs.sel .ed-xh{display:block}
.ed-xs.sel .ed-sname{left:20px}
.ed-xs.sel .ed-cvol{left:20px}
/* (0.8.9) the song selected like an extracted sound: outline, trim handles, dragged to slide it */
.ed-song::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2}
.ed-song.sel{touch-action:none;z-index:1}
.ed-song.sel::after{box-shadow:inset 0 0 0 2px var(--accent)}
.ed-song.drag{opacity:.85}
.ed-song.sel .ed-xh{display:block}
.ed-song.sel .ed-sname,.ed-song.sel .ed-cvol{left:20px}
.ed-fade{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none}
/* (0.9.7) CapCut's fades: an eased filled shape, no line. Sounds: lighter under the curve, darker outside it. Clips: a soft dark wedge */
.ed-fade.fi{left:0}
.ed-fade.fo{right:0}
.ed-fade svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ed-fade.fo svg{transform:scaleX(-1)}
.ed-fade path{stroke:none}
.ed-fade .fu{fill:rgba(255,255,255,.13)}
.ed-fade .fv{fill:rgba(0,0,0,.5)}
.ed-clip .ed-fade .fu{fill:rgba(255,255,255,0)}
.ed-clip .ed-fade .fv{fill:rgba(0,0,0,.46)}
.ed-fslide{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 8px 0 6px}
.ed-fslide input{width:100%;min-width:0;accent-color:var(--accent);height:26px}
.ed-fslide input:disabled{opacity:.4}
/* (0.9.7) the Fade panel as in CapCut: "Fade in" and "Fade out" sliders, each a thin track filled blue up to a white ring
   handle (--p, set by the editor), and a bar along the bottom with "Fade" centred and a check mark on the right that closes it.
   On a phone held upright the tool row grows to hold it (the preview gives up the room); sideways it fills the tool column */
.ed{--fade-blue:#3b82f6}
#edFadeRow[hidden]{display:none}
.ed-fl{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:600;color:var(--text-2)}
.ed-fl .ed-vval{min-width:0;font-size:12px}
.ed-add{position:absolute;top:41px;right:calc(10px + var(--sar));z-index:4;width:40px;height:40px;border-radius:11px;background:var(--card-3);color:var(--text);display:grid;place-items:center;box-shadow:0 0 0 4px #000;transition:background .15s ease}
.ed-add:active{background:#3a3a3a}
/* (0.8.2) video track mute: at the left of the video track. On: a speaker. Muted: inverted (light button, crossed speaker) */
/* (0.8.4) the track mute buttons, as in CapCut: each sits at the very start of its own track, just before 0:00, inside the
   timeline, so it scrolls with it (out of view going forward, back at the start). left is set by the editor: 0:00 - 50px */
.ed-tmute.ed-smute{top:98px}
.ed-tmute[hidden]{display:none}
.ed-tmute{position:absolute;top:41px;left:0;z-index:2;transform:translateZ(0);width:40px;height:40px;border-radius:11px;background:var(--card-3);color:var(--text);display:grid;place-items:center;box-shadow:0 0 0 4px #000;transition:background .15s ease,color .15s ease}
.ed-tmute:active{background:#3a3a3a}
.ed-tmute svg{width:22px;height:22px;grid-area:1/1}
.ed-tmute .ic-off,.ed-tmute.on .ic-on,.ed-vmute .ic-off,.ed-vmute.on .ic-on{display:none}
.ed-tmute.on .ic-off,.ed-vmute.on .ic-off{display:block}
.ed-tmute.on{background:var(--text);color:#000}
.ed-tmute.on:active{background:#cfcfcf}
.ed-vmute.on svg{color:var(--text-3,#8a8a8a)}
.ed-vrow{align-items:center}
.ed-vslide{flex:1 1 auto;min-width:150px;display:flex;align-items:center;gap:10px;padding:0 8px 0 6px}
.ed-vslide input{flex:1;min-width:0;accent-color:var(--accent);height:30px}
.ed-vval{min-width:42px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.ed-cvol{position:absolute;left:5px;bottom:4px;z-index:1;display:flex;align-items:center;gap:2px;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.6);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none;white-space:nowrap}
.ed-cvol svg{width:12px;height:12px}
.ed-add svg{width:22px;height:22px}
.ed-work{position:absolute;left:calc(16px + var(--sal));right:calc(16px + var(--sar));top:152px;margin:0;font-size:12px;line-height:1.35;color:var(--text-3);pointer-events:none}
html.proj-up .toast{bottom:calc(var(--tlh) + var(--toolh) + 50px)}
/* full screen preview */
/* full screen: the picture is fitted to the whole screen and centred, like the Photos app; only the close button keeps clear of the notch and home bar */
.ed.fs .ed-stage{position:fixed;inset:0;width:100%;height:100%;grid-area:auto;z-index:6;padding:0;margin:0}
.proj.fsmode{transform:none;will-change:auto;transition:none}
.ed.fs .ed-frame{box-shadow:none}
.ed.fs .ed-fsx{display:grid;place-items:center;position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 10px);z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(28,28,28,.7);color:var(--text)}
.ed.fs .ed-fsx svg{width:20px;height:20px}
/* sideways phone and computer: tools move to the right of the preview, timeline across the whole bottom */
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed{--tlh:max(150px,calc(42dvh - 10px));--toolh:0px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto var(--tlh);
    grid-template-areas:"top top" "stage tools" "bar tools" "tl tl"}
  .ed-top{padding-top:calc(var(--sat) + 2px);padding-bottom:2px}
  .ed-tools{border-top:0;border-left:1px solid var(--line);width:calc(152px + var(--sar))}
  .ed-trow{display:grid;grid-template-columns:repeat(2,70px);grid-auto-rows:58px;align-content:start;gap:4px;padding:6px calc(6px + var(--sar)) 6px 6px;overflow-x:hidden;overflow-y:auto;height:100%}
  .ed-tool{width:auto;height:58px}
  .ed-tback{width:auto}
  .ed-vslide{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px;padding:4px 2px;min-width:0}
  .ed-fslide{grid-column:1/-1;min-width:0;padding:4px 2px}
  .ed-vval{text-align:center}
  .ed-bar{height:36px}
  html.proj-up .toast{bottom:calc(var(--tlh) + 46px)}
}
@media (orientation:landscape) and (min-aspect-ratio:4/3) and (max-height:500px){
  .ed-top .pj-icon,.ed-ic{width:38px;height:38px}
  .ed-name{height:36px}
  .ed-export{height:30px}
}
@media (min-width:900px) and (min-height:600px){
  .ed{--tlh:max(220px,36dvh)}
  .ed-top{padding-left:16px;padding-right:20px}
  .ed-stage{padding:12px}
}
.sheet-sub{margin:-4px 8px 6px;font-size:12.5px;line-height:1.4;color:var(--text-3);text-align:center;font-variant-numeric:tabular-nums}
.sheet-title{overflow-wrap:anywhere}
.sheet-btn.danger{color:#e8b4a8}
html.proj-up .fab{visibility:hidden}
@media (min-width:900px){
}
@media (prefers-reduced-motion:reduce){ .proj{transition:none} }

/* (0.9.2) the note over the fades when the sound being faded can't be heard */
.ed-fnote{position:absolute;left:calc(8px + var(--sal));right:calc(8px + var(--sar));bottom:calc(100% + 6px);z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 10px;border-radius:12px;background:rgba(32,32,32,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:13px;line-height:1.3;color:#eee}
.ed-fnote[hidden],#edFadeRow[hidden] ~ .ed-fnote{display:none!important}
.ed-fnt{flex:1 1 180px;min-width:0}
.ed-fna{display:flex;gap:6px;flex:0 0 auto}
.ed-fnb{font:inherit;font-weight:600;color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;padding:6px 11px;min-height:32px;white-space:nowrap}
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  /* the tools are a narrow column on the right: the note sits just left of it, over the picture's edge */
  .ed-fnote{left:auto;right:calc(100% + 8px);top:8px;bottom:auto;width:min(330px,46vw);font-size:12.5px}
  .ed-fna{flex-wrap:wrap}
}
/* (0.9.3) a clip tool that can't be used right now (Split with the playhead off the clip, Grab last frame on a photo) */
.ed-tool.dis svg,.ed-tool.dis span{opacity:.4}
.sheet-img{display:block;max-width:100%;max-height:38dvh;margin:4px auto 12px;border-radius:10px;object-fit:contain;background:#111}

/* (0.9.4) Speed panel */
.ed-spdp{display:flex;gap:6px;align-items:center;padding:0 8px 0 2px;flex:0 0 auto}
.ed-spb{min-width:44px;height:32px;padding:0 8px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ed-spb.on{background:var(--accent);border-color:var(--accent);color:#111}
.ed-srow .ed-fl .ed-vval{min-width:0}
#edSpdRow[hidden] ~ #edSpdNote{display:none!important}
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed-spdp{grid-column:1/-1;justify-content:space-between;padding:0 2px}
  .ed-spb{min-width:0;flex:1 1 0;padding:0 4px}
}
/* (0.9.7) the panel is .ed-crv: as .ed-cv (0.9.5) its rules also hit the frame engine's canvas (.ed-cv), padding it and shrinking the picture */
/* (0.9.5) Speed curve: CapCut's custom curve editor, over the tools and the timeline (the picture and Play stay up) */
.ed-cvb{display:inline-flex;align-items:center;gap:4px}
.ed-cvb svg{width:16px;height:16px;flex:none}
.ed-crv{position:fixed;z-index:40;background:#0b0b0b;border-top:1px solid var(--line);display:flex;flex-direction:column;padding:10px 14px calc(8px + env(safe-area-inset-bottom,0px));box-sizing:border-box;color:var(--text);touch-action:none;user-select:none;-webkit-user-select:none}
.ed-crv[hidden]{display:none}
.ed-cv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.ed-cv-dur{font-size:13px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.ed-cv-beat{height:30px;padding:0 13px;border-radius:15px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:650;border:0}
.ed-cv-beat.del{background:rgba(255,255,255,.12);color:var(--text)}
.ed-cv-spd{flex:none;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.ed-cv-graph{flex:1 1 auto;min-height:90px;position:relative}
.ed-cv-graph svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overflow:visible}
.ed-crv .cv-guide{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:4 5}
.ed-crv .cv-guide.mid{stroke:rgba(255,255,255,.45)}
.ed-crv .cv-lab{fill:rgba(255,255,255,.55);font-size:11px;text-anchor:end;font-family:inherit}
.ed-crv .cv-line{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ed-crv .cv-pt{fill:#0b0b0b;stroke:#fff;stroke-width:2;cursor:grab}
.ed-crv .cv-pt.sel{fill:#fff}
.ed-crv .cv-ph{stroke:var(--accent);stroke-width:2;pointer-events:none}
.ed-cv-mid{flex:none;display:flex;justify-content:center;margin:4px 0}
.ed-cv-reset{height:28px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--text);font:inherit;font-size:13px;border:0}
.ed-cv-bot{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line);padding-top:6px}
.ed-cv-hint{font-size:11px;color:rgba(255,255,255,.45);line-height:1.2}
.ed-cv-title{font-size:14px;font-weight:650}
.ed-cv-ok{justify-self:end;width:40px;height:36px;border:0;background:none;color:var(--text);display:grid;place-items:center}
.ed-cv-ok svg{width:24px;height:24px}

/* ---------- (0.9.9) CapCut's phone layout and one premium slider ----------
   Phone held upright: the preview keeps one fixed size, the play row under it, the timeline takes the middle, and the tool
   bar sits along the very bottom (above the home bar), icons over small labels, scrolling sideways. A tool's panel (Fade,
   Speed, Volume) opens as a sheet in that bottom area in place of the bar, its title centred along its bottom with a check
   mark on the right; when it needs more room the timeline gives it up, never the preview. Sideways and on a computer the
   tools stay in their column at the right. */
@media not all and (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed{--stageh:max(150px,calc(50dvh - var(--sat) - 94px));grid-template-rows:auto var(--stageh) auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "bar" "tl" "tools"}
  .ed-tools{height:auto;border-top:1px solid rgba(255,255,255,.07);padding-bottom:var(--sab);background:#000}
  .ed-trow{height:62px;padding-top:2px}
  .ed-tool{width:60px;gap:5px}
  .ed-tool svg{width:23px;height:23px}
  .ed-tool span{font-size:10.5px;letter-spacing:.01em}
  .ed-tback{width:48px}
  .ed-sheet{height:auto;padding:6px calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
  .ed-fnote{bottom:calc(100% + 8px)}
  html.proj-up .toast{bottom:calc(var(--sab) + 150px)}
}
/* the panels: a sheet with the controls above and a bar along the bottom (title centred, check on the right, no Back) */
.ed-sheet{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;background:#000}
.ed-sheet[hidden]{display:none!important}
.ed-sheet .ed-psl{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:4px 0}
.ed-pbot{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;border-top:1px solid rgba(255,255,255,.07)}
.ed-ptitle{font-size:14px;font-weight:600;letter-spacing:.01em;color:#f2f2f2}
.ed-pok{justify-self:end;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:#f2f2f2;display:grid;place-items:center;cursor:pointer}
.ed-pok svg{width:22px;height:22px}
.ed-pok:active{opacity:.6}
/* one row: name, slider, value at the end */
#edTools .ed-prow{flex:none;display:grid;grid-template-columns:64px minmax(0,1fr) 46px;align-items:center;column-gap:10px;min-height:44px;padding:0;min-width:0}
#edTools .ed-prow .ed-fl{display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:.01em;white-space:nowrap}
#edTools .ed-prow .ed-vval{min-width:0;text-align:right;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88);white-space:nowrap}
#edSpdRow .ed-prow{grid-template-columns:52px minmax(0,1fr) 88px}
#edVolRow .ed-prow{grid-template-columns:40px minmax(0,1fr) 46px}
/* Volume's sound on / off: a small round button at the start of the row */
#edVolRow .ed-vmute{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);gap:0;padding:0}
#edVolRow .ed-vmute svg{width:19px;height:19px}
#edVolRow .ed-vmute span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#edVolRow .ed-vmute.on{background:#f2f2f2;color:#111}
#edVolRow .ed-vmute.on svg{color:#111}
/* Speed: the presets under the slider, quiet chips */
#edSpdRow .ed-spdp{display:flex;justify-content:center;gap:8px;padding:2px 0 8px}
#edSpdRow .ed-spb{min-width:52px;height:30px;padding:0 12px;border-radius:15px;border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);font-size:12.5px;font-weight:500}
#edSpdRow .ed-spb.on{background:#f2f2f2;color:#111}
/* the slider, everywhere in the editor: a 2.5 px track, light up to the knob and dim grey after it; a small solid white knob
   with a soft shadow; a 36 px tall touch area. --p (the filled share) is kept by pslider.js */
#edTools input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:36px;margin:0;padding:0;background:transparent;accent-color:#f2f2f2;--p:0%;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#edTools input[type=range]:focus{outline:none}
#edTools input[type=range]::-webkit-slider-runnable-track{height:2.5px;border:0;border-radius:2px;background:linear-gradient(to right,#f2f2f2 0,#f2f2f2 var(--p),rgba(255,255,255,.2) var(--p),rgba(255,255,255,.2) 100%)}
#edTools input[type=range]::-moz-range-track{height:2.5px;border:0;border-radius:2px;background:rgba(255,255,255,.2)}
#edTools input[type=range]::-moz-range-progress{height:2.5px;border-radius:2px;background:#f2f2f2}
#edTools input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.75px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.2);transition:transform .14s ease}
#edTools input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#edTools input[type=range].drag::-webkit-slider-thumb{transform:scale(1.18)}
#edTools input[type=range]:disabled{opacity:.35;cursor:default}
/* the value bubble over the knob while it is dragged */
.ed-bub{position:fixed;left:0;top:0;z-index:80;transform:translate(-50%,-100%) scale(.9);transform-origin:50% 100%;padding:4px 9px;border-radius:8px;background:#f2f2f2;color:#111;
  font-size:12px;font-weight:600;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 4px 14px rgba(0,0,0,.45);
  transition:opacity .12s ease,transform .12s ease}
.ed-bub::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;transform:rotate(45deg);border-radius:1.5px}
.ed-bub.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
/* sideways and computer: the same sheets fill the tool column */
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed-sheet{display:flex;padding:4px calc(10px + var(--sar)) 0 10px;height:100%}
  .ed-sheet .ed-psl{flex:none;justify-content:flex-start;gap:2px;padding-top:2px}
  #edTools .ed-prow{grid-template-columns:minmax(0,1fr) auto;row-gap:0;column-gap:6px;min-height:0}
  #edTools .ed-prow .ed-fl{font-size:12px;line-height:16px}
  #edTools .ed-prow input[type=range]{grid-column:1/-1;grid-row:2;height:30px}
  #edVolRow .ed-prow{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  #edVolRow .ed-prow .ed-vmute{grid-row:1}
  #edVolRow .ed-prow .ed-vval{grid-row:1;align-self:center}
  #edSpdRow .ed-prow{grid-template-columns:minmax(0,1fr) auto}
  .ed-sheet .ed-psl{flex:1 1 auto;min-height:0;overflow-y:auto}
  #edSpdRow .ed-spdp{flex-wrap:nowrap;gap:4px;padding:2px 0 6px}
  #edSpdRow .ed-spb{min-width:0;flex:1 1 auto;height:26px;padding:0 4px;font-size:11.5px}
  .ed-pbot{margin-top:auto;height:38px}
  .ed-ptitle{font-size:13.5px}
}

/* ---------- (0.9.14) the editor: a bigger preview, Undo and Redo by the thumb, and soft dark surfaces ----------
   Charlie 1, Oct 17 (Chloe: "fix the layout, make it how I'd like it" and "isn't the pitch black background a bit off?").
   * Surfaces: only the preview stage stays pure black, so the video's edges stand out. Everything you work on is lifted to
     warm, very dark greys in two quiet levels: s1 (top bar, play row, timeline) and s2, one step up, for what sits under
     the thumb (the tool bar, its sheets, the speed curve panel). Text stays warm off-white; light only on Export, the
     playhead and the selected clip.
   * Phone held upright: the timeline is only as tall as its lanes plus room for one more (editor.js keeps --tlneed, the
     lanes' height plus one spare lane and a 12 px margin, so a tall sheet still leaves the timeline 120 px; it grows with extra sound lanes up to 40% of the screen, then scrolls). The
     preview gets all the rest. The preview's height is fixed from those numbers, so a sheet that opens taller than the tool
     bar takes its room from the timeline and the preview never jumps (as in 0.9.9).
   * Undo and Redo moved from the top corner into the play row, right of Play, next to full screen (CapCut's place). The
     time reads "now / total" on the left. Export stays at the top. */
.ed{--ed-s1:#121110;--ed-s2:#1a1917;--ed-line:rgba(255,244,228,.06);background:var(--ed-s1)}
.ed-top{background:var(--ed-s1)}
.ed-stage{background:#000}
.ed-bar{background:var(--ed-s1)}
.ed-tl{background:var(--ed-s1);border-top-color:var(--ed-line)}
.ed-tools{background:var(--ed-s2)}
.ed-sheet{background:var(--ed-s2)}
.ed-pbot{border-top-color:var(--ed-line)}
.ed-crv{background:var(--ed-s2);border-top-color:var(--ed-line)}
.ed-crv .cv-pt{fill:var(--ed-s2)}
/* what lies on the timeline, a touch lighter than the surface so it still reads as a separate thing */
.ed-clip{background:#24221f}
.ed-tile{background-color:#1f1d1b}
.ed-song{background:#201e1b}
.ed-chip{background:#1c1a18;box-shadow:inset 0 0 0 1px rgba(255,244,228,.07)}
.ed-chip:active{background:#262421}
.ed-tmute,.ed-add{background:#2b2926;box-shadow:0 0 0 4px var(--ed-s1)}
.ed-tmute:active,.ed-add:active{background:#363431}
.ed-tmute.on{background:var(--text);color:#000}
.ed-tmute.on:active{background:#cfcbc4}
/* the song and sound trim handles: the grip line was white on off-white; now dark, so you can see where to hold */
.ed-xh::after{background:rgba(20,18,16,.62)}
/* the play row: time on the left, Play in the middle, Undo, Redo and full screen on the right */
.ed-time{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap}
.ed-tsep{font-size:12px;color:var(--text-3)}
.ed-t2{gap:0}
.ed-t2 .ed-ic{width:38px}
@media not all and (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed{--tlh:min(calc(var(--tlneed,206px) + 1px),40dvh);
    --stageh:max(150px,calc(100dvh - var(--sat) - var(--sab) - 48px - 44px - 63px - var(--tlh)));
    grid-template-rows:auto var(--stageh) auto minmax(0,1fr) auto}
  .ed-top{height:calc(var(--sat) + 48px);padding-top:var(--sat);padding-bottom:0}
  .ed-bar{height:44px;padding-right:calc(6px + var(--sar))}
  .ed-tools{border-top:1px solid var(--ed-line);background:var(--ed-s2)}
}
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed-tools{border-left-color:var(--ed-line)}
}

/* ===== 0.9.16 · Immersive editor: no hard lines, soft depth, a real computer layout =====
   Surfaces melt into each other: top bar (s1) -> a deep stage well with a faint warm glow behind the video -> play row
   and timeline (s1) -> the toolbar (s2) rising out of a soft fade and running all the way down behind the home bar.
   Light stays only on Export, the playhead and the selected clip. Keep the computer layout in mind for every change. */
.ed{--ed-deep:#0a0908;--ed-glow:255,236,212;--vh:100dvh}
/* Home-screen app (iOS 26): with a translucent status bar, height:100% and inset:0 can stop one status bar short of
   the bottom and leave a black "chin". 100vh is the full screen there, and the root is painted toolbar-grey anyway. */
html[data-standalone="1"],html[data-standalone="1"] body{height:100vh}
html[data-standalone="1"] .app,html[data-standalone="1"] .proj{bottom:auto;height:100vh}
html[data-standalone="1"] .ed{--vh:100vh}
html.proj-up{background:#1a1917!important}
html.proj-up body{background:#1a1917}
/* the stage: a cave, not a black box */
.ed-stage{background:
  radial-gradient(ellipse 62% 56% at 50% 50%,rgba(var(--ed-glow),.06) 0%,rgba(var(--ed-glow),.04) 26%,rgba(var(--ed-glow),.02) 52%,rgba(var(--ed-glow),.007) 76%,rgba(var(--ed-glow),0) 100%),
  linear-gradient(180deg,var(--ed-s1) 0%,#100f0e 8%,#0d0c0b 18%,var(--ed-deep) 34%,var(--ed-deep) 66%,#0d0c0b 82%,#100f0e 92%,var(--ed-s1) 100%)}
.ed-frame{border-radius:8px;box-shadow:0 26px 60px -18px rgba(0,0,0,.75),0 0 70px rgba(var(--ed-glow),.05)}
.ed-frame:has(> .ed-empty:not([hidden])){border-radius:20px;background:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(var(--ed-glow),.075),rgba(var(--ed-glow),.04) 55%,rgba(var(--ed-glow),.022) 100%);box-shadow:0 30px 70px -24px rgba(0,0,0,.85),0 0 90px rgba(var(--ed-glow),.045),inset 0 0 40px rgba(var(--ed-glow),.025)}
.ed-empty{color:rgba(243,239,232,.5)}
.ed.fs .ed-stage{background:#000}
.ed.fs .ed-frame{border-radius:0;box-shadow:none}
/* 0.9.17 · square preview: the frame shows the whole picture exactly as it exports, so its corners are never rounded
   (phone, computer, every ratio, full screen, and the empty frame too). The glow and drop shadow stay outside the frame;
   the empty frame's faint inner light is only there while there is no picture. */
.ed-frame,.ed-frame:has(> .ed-empty:not([hidden])),.ed.fs .ed-frame{border-radius:0}
.ed-frame video,.ed-frame img,.ed-frame .ed-cv{border-radius:0;clip-path:none;-webkit-mask:none;mask:none}
/* 0.9.17 · a bit more deep black around the frame, so it sits set into the dark. All of it is outside the picture:
   the frame's own outer shadows (a close soft halo, two side shadows that never spill up or down into the bars, the drop
   shadow) and, behind the frame, a soft darkening toward the stage's sides that fades out before the stage's top and
   bottom, where the stage meets the bars in their own grey. The warm glow stays, only further out. Nothing in the frame. */
.ed-frame{z-index:1;box-shadow:0 0 12px rgba(0,0,0,.5),-34px 0 64px -28px rgba(0,0,0,.62),34px 0 64px -28px rgba(0,0,0,.62),0 26px 60px -18px rgba(0,0,0,.8),0 0 110px 10px rgba(var(--ed-glow),.04)}
.ed-frame:has(> .ed-empty:not([hidden])){box-shadow:0 0 12px rgba(0,0,0,.45),-34px 0 64px -28px rgba(0,0,0,.55),34px 0 64px -28px rgba(0,0,0,.55),0 30px 70px -24px rgba(0,0,0,.85),0 0 110px 10px rgba(var(--ed-glow),.04),inset 0 0 40px rgba(var(--ed-glow),.025)}
.ed-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.3) 6%,rgba(0,0,0,.16) 14%,rgba(0,0,0,.06) 24%,rgba(0,0,0,0) 36%,rgba(0,0,0,0) 64%,rgba(0,0,0,.06) 76%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.3) 94%,rgba(0,0,0,.42) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 10%,#000 26%,#000 74%,rgba(0,0,0,.35) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 10%,#000 26%,#000 74%,rgba(0,0,0,.35) 90%,transparent 100%)}
.ed.fs .ed-stage::before{display:none}
.ed.fs .ed-frame{box-shadow:none}
/* no hairlines anywhere: the bands share their colour or fade into each other */
.ed-tl{border-top:0}
.ed-pbot,.ed-cv-bot{border-top:0}
.ed-crv{border-top:0;box-shadow:0 -24px 48px rgba(0,0,0,.45)}
.ed-fnote{border:0;background:rgba(36,34,31,.97);box-shadow:0 14px 40px rgba(0,0,0,.55)}
/* soft fills instead of borders, with a whisper of inner light */
.ed-chip{box-shadow:inset 0 1px 0 rgba(255,244,228,.05),0 8px 18px -10px rgba(0,0,0,.7);background:linear-gradient(180deg,rgba(255,244,228,.095),rgba(255,244,228,.05))}
.ed-tmute,.ed-add{background:linear-gradient(180deg,#2f2d2a,#252321)}
.ed-ph{box-shadow:0 0 10px rgba(243,239,232,.3)}
.ed-export{box-shadow:0 6px 20px -6px rgba(243,239,232,.32)}
.ed-export.off{box-shadow:none}
.ed-tool{border-radius:14px}
.ed-tool:active{background:rgba(255,244,228,.07)}
.ed-spb{border:0;background:rgba(255,244,228,.06)}
@media not all and (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed-tools{position:relative;z-index:5;border-top:0;background:var(--ed-s2)}
  /* the toolbar rises out of a soft fade over the last bit of the timeline */
  .ed-tools::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;pointer-events:none;
    background:linear-gradient(180deg,rgba(26,25,23,0) 0%,rgba(26,25,23,.18) 30%,rgba(26,25,23,.5) 60%,rgba(26,25,23,.85) 85%,#1a1917 100%)}
  /* a short tool row sits in the middle (iPad); a long one still scrolls from the left edge */
  .ed-trow::before,.ed-trow::after{content:"";flex:1 0 0}
  .ed{--stageh:max(150px,calc(var(--vh) - var(--sat) - var(--sab) - 48px - 44px - 63px - var(--tlh)))}
}
@media (orientation:landscape) and (min-aspect-ratio:4/3){
  .ed-tools{border-left:0;background:linear-gradient(90deg,var(--ed-s1) 0,var(--ed-s2) 22px)}
}
/* ---- the computer (and iPad sideways): big preview, a floating tool palette, the timeline only as tall as it needs ---- */
@media (orientation:landscape) and (min-aspect-ratio:4/3) and (min-width:900px) and (min-height:600px){
  .ed{--tlh:min(max(calc(var(--tlneed,206px) + 10px),200px),40dvh);grid-template-rows:auto minmax(0,1fr) auto var(--tlh)}
  .ed-top{height:calc(56px + var(--sat));padding-left:calc(14px + var(--sal));padding-right:calc(18px + var(--sar))}
  .ed-stage{padding:16px 22px 8px}
  .ed-bar{height:48px}
  .ed-tools{align-self:center;display:flex;flex-direction:column;width:auto;max-height:calc(100% - 24px);margin:0 calc(16px + var(--sar)) 0 2px;padding:6px;border-radius:22px;overflow:hidden;
    background:radial-gradient(130% 70% at 50% 0%,rgba(255,244,228,.05),rgba(255,244,228,0) 70%),var(--ed-s2);
    box-shadow:0 30px 70px -28px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.25)}
  .ed-trow{height:auto;flex:0 1 auto;min-height:0;padding:2px;grid-template-columns:repeat(2,72px);grid-auto-rows:60px;gap:4px}
  .ed-sheet{height:auto;min-height:0;width:152px;padding:8px 6px 0;box-sizing:border-box}
  .ed-fnote{right:calc(100% + 12px)}
}
@media (orientation:landscape) and (min-aspect-ratio:4/3) and (min-width:1600px) and (min-height:950px){
  .ed-trow{grid-template-columns:repeat(2,80px);grid-auto-rows:66px}
  .ed-sheet{width:168px}
  .ed-tool svg{width:24px;height:24px}
}
/* a mouse gets hover light; touch never sees it */
@media (hover:hover) and (pointer:fine){
  .ed button,.ed .ed-clip,.ed .ed-chip{cursor:pointer}
  .ed .pj-icon,.ed-ic,.ed-play,.ed-tool,.ed-name{transition:background-color .16s ease,color .16s ease}
  .ed .pj-icon:hover,.ed-ic:hover,.ed-play:hover,.ed-name:hover{background:rgba(255,244,228,.07)}
  .ed-tool:hover{background:rgba(255,244,228,.065)}
  .ed-tool:hover span{color:var(--text)}
  .ed-tool.later:hover svg{opacity:.6}
  .ed-chip:hover{background:linear-gradient(180deg,rgba(255,244,228,.13),rgba(255,244,228,.075))}
  .ed-tmute:hover,.ed-add:hover{background:linear-gradient(180deg,#383532,#2c2a27)}
  .ed-export:not(.off):hover{box-shadow:0 8px 26px -6px rgba(243,239,232,.45)}
  .ed-clip:not(.sel):hover::after{box-shadow:inset 0 0 0 1.5px rgba(243,239,232,.28)}
  .ed-spb:hover{background:rgba(255,244,228,.1)}
}