/* The docs pages (/docs and /docs/<page>, built by scripts/build-docs.js): the site's subpage
   chassis (dark, one 56px blurred bar) widened into a docs grid of sticky contents, the article
   at about 68 characters and an on-this-page rail. Each how-to's clip sits in the article
   column; its steps under it act as its chapters. Dark only, like the site. */
:root{
  --bg:#141618; --bg2:#1a1d20; --bg3:#1e2124; --surface:#242729; --border:#2e3235; --border-2:#3a3f43;
  --text:#d4d6d8; --text-dim:#8a8f94; --text-bright:#f0f1f2;
  --accent:#d98fa6; --accent-hover:#e6a6bb; --accent-soft:rgba(217,143,166,.12); --accent-line:rgba(217,143,166,.4); --on-accent:#241016;
  --stage:#0b0c0d;
  --ui:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --bar-h:56px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--ui);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;font-size:16px}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;color:var(--text-bright)}
kbd{font-family:var(--mono);font-size:.78rem;color:var(--text-bright);background:var(--surface);border:1px solid var(--border-2);border-bottom-width:2px;border-radius:5px;padding:.05rem .4rem;white-space:nowrap}
code{font-family:var(--mono);font-size:.86em;background:var(--surface);padding:.05rem .3rem;border-radius:4px}
.ui{color:var(--text-bright);font-weight:600}

/* ── The bar (the site's nav, with the docs' own tools) ── */
.bar{position:sticky;top:0;z-index:50;height:var(--bar-h);background:rgba(20,22,24,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.bar-in{height:100%;max-width:1840px;margin:0 auto;display:flex;align-items:center;gap:1.1rem;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.logo{font-weight:700;font-size:1.1rem;color:var(--text-bright);letter-spacing:-.02em}
.logo span{color:var(--accent)}
.logo:hover{color:var(--text-bright)}
.crumb-docs{color:var(--text-dim);font-weight:600;font-size:.9rem;padding-left:1.1rem;border-left:1px solid var(--border);line-height:1.2}
.crumb-docs:hover{color:var(--text-bright)}
.search{flex:0 1 340px;margin-left:auto;position:relative}
.search input{width:100%;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text-bright);font:500 .88rem var(--ui);padding:0 2.2rem 0 .85rem}
.search input::placeholder{color:var(--text-dim)}
.search input:focus{outline:none;border-color:var(--accent-line);background:var(--bg3)}
.search .key{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font-size:.7rem;pointer-events:none}
.bar-links{display:flex;gap:1.4rem;align-items:center}
.bar-links a{color:var(--text-dim);font-size:.85rem;font-weight:500}
.bar-links a:hover{color:var(--text-bright)}
.bar-links .cta{border:1px solid var(--accent);border-radius:6px;padding:.32rem .85rem;color:var(--text-bright)}
.bar-links .cta:hover{background:var(--accent);color:var(--on-accent)}
.toc-btn{display:none;margin-left:auto;height:36px;padding:0 .8rem;border-radius:8px;border:1px solid var(--border);background:var(--bg2);font-weight:600;font-size:.85rem;cursor:pointer;color:var(--text-bright)}

/* ── The docs grid ── */
.shell{max-width:1840px;margin:0 auto;display:grid;grid-template-columns:250px minmax(0,1fr);gap:3rem;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.shell.wide{grid-template-columns:250px minmax(0,1fr)}
.side{position:sticky;top:var(--bar-h);align-self:start;max-height:calc(100vh - var(--bar-h));overflow:auto;padding-block:1.6rem 2rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.side .home{display:block;font-weight:700;font-size:.9rem;color:var(--text-bright);padding:.35rem .6rem;border-radius:7px;margin-bottom:.6rem}
.side .home.cur{background:var(--accent-soft);color:var(--accent)}
.grp{margin-bottom:.35rem}
.grp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;color:var(--text-bright);padding:.35rem .6rem;border-radius:7px;user-select:none}
.grp summary::-webkit-details-marker{display:none}
.grp summary::before{content:"\25B8";font-size:.62rem;color:var(--text-dim);transition:transform .15s}
.grp[open] summary::before{transform:rotate(90deg)}
.grp summary:hover{background:var(--bg2)}
.grp ul{list-style:none;margin:.1rem 0 .5rem .85rem;padding:0 0 0 .9rem;border-left:1px solid var(--border)}
.grp li a{display:flex;align-items:center;gap:.5rem;justify-content:space-between;font-size:.85rem;color:var(--text-dim);padding:.26rem .6rem;border-radius:6px;line-height:1.35}
.grp li a:hover{color:var(--text-bright);background:var(--bg2)}
.grp li a.cur{color:var(--accent);background:var(--accent-soft);font-weight:600}
.nomatch{font-size:.85rem;color:var(--text-dim);padding:.4rem .6rem}
/* A how-to only a Team or Studio licence unlocks */
.tier{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:.02rem .42rem;line-height:1.5;flex:none;white-space:nowrap}
.tier.studio{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.howto h2 .tier{font-size:.68rem;letter-spacing:.06em}
.sec li{display:flex;align-items:center;gap:.45rem}
.main{min-width:0;padding-block:2.4rem 4rem}
/* The words keep a reading width; a clip takes the whole column (.clip below), so it grows with
   the window. No weight of its own, so a part's own width (the lede, a paragraph) still wins. */
:where(.article:not(.home-view)) > :where(:not(.howto)),:where(.howto) > :where(:not(.clip)){max-width:46rem}
.home-view{max-width:62rem}

/* ── Article type ── */
.crumbs{font-size:.82rem;color:var(--text-dim);margin-bottom:.7rem}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--text-bright)}
.article h1{font-size:2.3rem;font-weight:800;line-height:1.15;margin:0 0 .6rem}
.article .lede{font-size:1.08rem;color:var(--text);margin:0 0 .5rem;max-width:40rem}
.meta{font-family:var(--mono);font-size:.74rem;color:var(--text-dim);margin:0 0 2.6rem;display:flex;gap:.9rem;flex-wrap:wrap}
.howto{padding-top:2.6rem;margin-top:2.6rem;border-top:1px solid var(--border)}
.howto:first-of-type{border-top:0;margin-top:0;padding-top:0}
.howto h2{font-size:1.55rem;font-weight:700;margin:0 0 .5rem;scroll-margin-top:calc(var(--bar-h) + 28px);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.howto h2 .anchor{font-size:1rem;color:var(--border-2);opacity:0;transition:opacity .15s}
.howto h2:hover .anchor,.howto h2 .anchor:focus-visible{opacity:1}
.howto h2 .anchor:hover{color:var(--accent)}
.article .howto > p{margin:0 0 1.2rem;max-width:40rem}
.howto h3{font-size:1.02rem;font-weight:700;margin:1.8rem 0 .6rem}
.howto ul:not(.chips){margin:0 0 1rem;padding-left:1.2rem}
.fine{font-size:.88rem;color:var(--text-dim);margin:.6rem 0 0}

/* ── A clip: the video, its versions and its bar; the steps under it are its chapters ── */
.clip{margin:0 0 1.4rem;max-width:1500px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--stage)}
/* Beside the contents, never taller than the screen with its bars: as wide as fits 16:9 under the
   site's bar, less the clip's own head and controls. */
@media (min-width:861px){.clip{max-width:min(1500px,calc((100vh - var(--bar-h) - 8rem) * 16 / 9))}}
.clip-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .7rem;background:var(--bg2);border-bottom:1px solid var(--border)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;color:var(--text-dim);font-size:.78rem;font-weight:600;padding:.22rem .6rem;border-radius:6px;cursor:pointer;line-height:1.4}
.seg button:hover{color:var(--text-bright)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text-bright);box-shadow:inset 0 0 0 1px var(--border-2)}
.seg button:disabled{opacity:.4;cursor:default}
.clip-len{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--text-dim)}
.clip-len.solo{margin-left:0}
.clip-stage{position:relative;aspect-ratio:16/9;background:var(--stage);cursor:pointer}
.clip-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:var(--stage)}
.clip.none .clip-stage{cursor:default;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 40%,#16191b 0%,var(--stage) 70%)}
.clip-wait{margin:0;padding:0 12%;text-align:center;color:var(--text-dim);font-size:.92rem}
/* Play / Replay, in words, in the picture's corner (over the taskbar's tray) so a finished clip's
   result stays in view; gone while the clip plays. */
.stage-btn{position:absolute;right:1.6%;bottom:2.2%;z-index:2;border:1px solid var(--border-2);border-radius:999px;background:rgba(20,22,24,.9);color:var(--text-bright);font-size:.8rem;font-weight:700;line-height:1;padding:.42rem .9rem;cursor:pointer;transition:opacity .2s}
.stage-btn:hover{border-color:var(--accent);color:var(--accent)}
.clip.playing .stage-btn{opacity:0;pointer-events:none}
.clip-bar{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;background:var(--bg2);border-top:1px solid var(--border)}
.pp,.fs{width:30px;height:30px;flex:none;border-radius:7px;border:1px solid var(--border);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--text-bright);padding:0}
.pp:hover,.fs:hover{border-color:var(--border-2)}
.pp svg,.fs svg{width:12px;height:12px}
.track{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--surface)}
.fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--accent-line);width:0}
.head{position:absolute;top:50%;width:2px;height:16px;margin:-8px 0 0 -1px;background:var(--text-bright);border-radius:1px;left:0;pointer-events:none}
.mk{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--bg2);border:2px solid var(--accent);padding:0;cursor:pointer;z-index:2}
.mk.past{background:var(--accent)}
.mk:hover,.mk.hot{transform:scale(1.25)}
.time{font-family:var(--mono);font-size:.74rem;color:var(--text-dim);flex:none;min-width:5.6em;text-align:right;font-variant-numeric:tabular-nums}
.clip:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column;background:#000}
.clip:fullscreen .clip-head{display:none}
.clip:fullscreen .clip-stage{flex:1;aspect-ratio:auto}

.steps{list-style:none;margin:0 0 1.2rem;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:baseline;padding:.6rem .7rem;margin:0 -.7rem;border-radius:9px;transition:background .2s}
.steps li.on{background:var(--accent-soft)}
.tc{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--accent);background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:.08rem .45rem;cursor:pointer;font-variant-numeric:tabular-nums;line-height:1.6}
.tc:hover{border-color:var(--accent-line)}
.steps li.on .tc{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.steps.plain li{grid-template-columns:1.6rem minmax(0,1fr)}
.steps.plain li::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-size:.78rem;color:var(--text-dim);text-align:right}

.opts{display:grid;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:0 0 .4rem}
.opts > div{display:grid;grid-template-columns:minmax(9.5rem,13rem) minmax(0,1fr);gap:1rem;padding:.75rem 1rem;border-top:1px solid var(--border);font-size:.94rem}
.opts > div:first-child{border-top:0}
.opts dt{color:var(--text-bright);font-weight:600;margin:0}
.opts dd{margin:0;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem;padding:0;list-style:none}
.chips li{font-size:.84rem;font-weight:600;color:var(--text-bright);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:.2rem .75rem}
.keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem 1.2rem;margin:0 0 1rem;font-size:.94rem;align-items:baseline}
.keys dt{margin:0;display:flex;gap:.3rem;flex-wrap:wrap}
.keys dd{margin:0}
.aside{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin:1.2rem 0 0;font-size:.94rem}
.aside .lbl{display:block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.25rem}
.aside p{margin:0}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:3rem}
.next a{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1rem 1.15rem;color:var(--text);transition:border-color .15s}
.next a:hover{border-color:var(--accent-line);color:var(--text)}
.next a:last-child:not(:first-child){text-align:right}
.next b{display:block;color:var(--text-bright);font-size:1rem;margin-bottom:.2rem}
.next span:not(.dir){font-size:.9rem;color:var(--text-dim)}
.next .dir{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);display:block;margin-bottom:.35rem;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:860px){.next{grid-template-columns:minmax(0,1fr)}.next a:last-child:not(:first-child){text-align:left}}
.help{margin-top:2.6rem;font-size:.9rem;color:var(--text-dim)}
.help .addr{color:var(--text-bright);user-select:all}

/* ── Docs home ── */
.start-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--accent-line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(217,143,166,.07),var(--bg2));margin:1.6rem 0 2.4rem}
.start-card.solo{grid-template-columns:minmax(0,1fr)}
.start-card .txt{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;justify-content:center}
.start-card h2{margin:0;font-size:1.35rem}
.start-card p{margin:0;color:var(--text)}
.start-card ol{margin:.2rem 0 .4rem;padding-left:1.2rem;font-size:.93rem}
.start-card ol a{color:var(--text)}
.start-card ol a:hover{color:var(--accent)}
.start-card .go{align-self:flex-start;margin-top:.3rem;background:var(--accent);color:var(--on-accent);font-weight:700;border-radius:8px;padding:.5rem 1.1rem;font-size:.92rem}
.start-card .go:hover{background:var(--accent-hover);color:var(--on-accent)}
.thumb{display:block;border-left:1px solid var(--border);background:var(--stage);min-height:100%}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem}
.sec{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.35rem}
.sec h3{margin:0;font-size:1.02rem}
.sec h3 a{color:var(--text-bright)}
.sec p{margin:0 0 .3rem;font-size:.88rem;color:var(--text-dim);line-height:1.5}
.sec ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.sec li a{font-size:.88rem;color:var(--text)}
.sec li a:hover{color:var(--accent)}
.reviewer{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:2.2rem;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:12px;background:var(--bg2)}
.reviewer p{margin:0;max-width:34rem}
.reviewer a{font-weight:700;white-space:nowrap}

/* ── Narrower screens ── */
@media (max-width:1180px){
  .shell{grid-template-columns:232px minmax(0,1fr);gap:2.4rem}
}
@media (max-width:860px){
  .shell,.shell.wide{grid-template-columns:minmax(0,1fr);gap:0}
  .side{position:fixed;z-index:45;top:var(--bar-h);left:0;right:0;max-height:min(72vh,calc(100vh - var(--bar-h)));background:rgba(20,22,24,.98);border-bottom:1px solid var(--border);padding:1rem max(16px,env(safe-area-inset-right,0px)) 1.2rem max(16px,env(safe-area-inset-left,0px));transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s;box-shadow:0 16px 30px rgba(0,0,0,.45)}
  body.toc-open .side{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s,transform .2s,visibility 0s}
  .toc-btn{display:inline-flex;align-items:center}
  .search,.bar-links{display:none}
  .main{padding-block:1.8rem 5rem}
  .article h1{font-size:1.9rem}
  .start-card{grid-template-columns:minmax(0,1fr)}
  .thumb{border-left:0;border-top:1px solid var(--border)}
  .opts > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .crumb-docs{padding-left:.8rem}
}
.search-m{display:none;margin-bottom:.9rem}
@media (max-width:860px){.search-m{display:block}}
.search-m input{width:100%;height:40px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text-bright);font:500 .92rem var(--ui);padding:0 .85rem}
@media (max-width:480px){
  .howto h2{font-size:1.35rem}
  .clip-head{gap:.45rem}
  .seg button{padding:.2rem .45rem;font-size:.74rem}
  .clip-len{display:none}
  .steps li{gap:.6rem}
  .clip-bar{gap:.55rem}
}

footer{border-top:1px solid var(--border);margin-top:1rem}
footer .in{max-width:1840px;margin:0 auto;padding:2rem max(16px,env(safe-area-inset-right,0px)) 2rem max(16px,env(safe-area-inset-left,0px));font-size:.78rem;color:var(--text-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer a{color:var(--text-dim)}
footer a:hover{color:var(--text)}
footer .links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}