/* ── shared bits ─────────────────────────────────────────────────────────── */
.key{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.30em;font-weight:500;letter-spacing:0;line-height:1;
  height:2.6em;min-width:2.6em;padding:0 .72em;margin:0 .06em 0 .02em;border-radius:.62em;vertical-align:middle;position:relative;top:-.32em;
  background:var(--muted);border:1px solid var(--border);box-shadow:inset 0 -.12em 0 rgba(10,10,10,.06);color:inherit;
  transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out}
.key + .key{margin-left:.3em}
.key.on,.land.holding .lt .key{background:#0A0A0A;color:#fff;border-color:transparent;box-shadow:none}
.key.on{background:var(--foreground);color:#fff}
.key.s{font-size:11px;height:20px;min-width:20px;padding:0 5px;border-radius:5px;top:0;vertical-align:1px;margin:0 1px}
.switch{width:34px;height:20px;border-radius:999px;background:rgba(10,10,10,.14);position:relative;transition:background .18s ease-out;flex:0 0 auto}
.switch i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:999px;background:#fff;transition:transform .18s ease-out}
.switch.on{background:var(--foreground)}
.switch.on i{transform:translateX(14px)}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:2px}
.seg button{font-size:12px;font-weight:500;padding:4px 11px;border-radius:999px;color:var(--muted-foreground)}
.seg button.on{background:var(--foreground);color:#fff}
.num{width:22px;height:22px;border-radius:999px;background:var(--foreground);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.thumb{width:44px;height:30px;border-radius:5px;background:var(--muted);box-shadow:inset 0 0 0 1px var(--border);position:relative;flex:0 0 auto;overflow:hidden}
.thumb i{position:absolute;left:6px;border-radius:2px;background:rgba(10,10,10,.75)}
.th-headline i:first-child,.th-h i:first-child{top:8px;height:6px;width:28px}
.th-headline i:last-child,.th-h i:last-child{top:18px;height:3px;width:20px;background:rgba(10,10,10,.2)}
.th-sub i:first-child{top:9px;height:3px;width:30px;background:rgba(10,10,10,.6)}
.th-sub i:last-child{top:16px;height:3px;width:22px;background:rgba(10,10,10,.35)}
.th-cta i:first-child,.th-b i:first-child{top:10px;height:10px;width:24px;border-radius:999px}
.th-cta i:last-child,.th-b i:last-child{display:none}
.th-s i:first-child{top:6px;height:8px;width:30px;background:rgba(10,10,10,.35)}
.th-s i:last-child{top:16px;height:8px;width:30px;background:rgba(10,10,10,.75)}
body.full .rail{display:none}
body.full main{margin-left:0}
body.full .toast{left:50%}

/* ── 01 landing ─────────────────────────────────────────────────────────── */
.land{position:relative;min-height:100vh;background:#fff;color:var(--foreground);overflow:hidden;user-select:none;-webkit-user-select:none;transition:color .3s ease-out}
.lbar{position:relative;z-index:4;display:flex;align-items:center;gap:16px;height:64px;padding:0 clamp(16px,3vw,32px);mix-blend-mode:multiply;transition:opacity .18s ease-out}
.lword{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:color .2s ease-out .25s}
.lword .o{width:26px;height:26px;--crop:2.2}
.lsp{flex:1}
.lvar{display:inline-flex;gap:2px;font-size:13px}
.lvar button{padding:5px 10px;border-radius:999px;color:var(--muted-foreground);transition:background .15s ease-out,color .15s ease-out}
.lvar button.on{color:var(--foreground);background:var(--muted)}
.lfull{font-size:13px;color:var(--muted-foreground);text-decoration:none}
.land.holding .lvar,.land.holding .lfull{opacity:0;transition:opacity .18s ease-out}
.lhero{min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 140px;position:relative}
/* the mark: also the pointer's body while you hold; moved by a spring in landing.js */
.lorb{position:relative;z-index:6;width:min(40vh,64vw,420px);aspect-ratio:1;cursor:pointer;touch-action:none;mix-blend-mode:multiply;will-change:transform;transform-origin:50% 50%}
.land.dark .lbar,.land.dark .lorb{mix-blend-mode:screen}
.land.dark{color:#fff}
.lt{position:relative;transition:opacity .22s ease-out,color .3s ease-out}
.land h1.lt{font-size:clamp(36px,4.6vw,52px);line-height:1.05;font-weight:500;letter-spacing:-.035em;margin-top:calc(min(40vh,64vw,420px) * -.06);max-width:none}
.hl{display:inline-block}
/* the headline's second line: one request at a time, all in one cell so the line keeps its size.
   The last one blurs away first; the next comes into focus a beat later and settles on a long
   ease-out, so the two never read over each other (his note, 10-20: the roll's dynamics) */
.hl-say{display:inline-grid;white-space:nowrap}
.hl-say>.say{grid-area:1/1;opacity:0;filter:blur(8px);transform:translateY(.08em) scale(.99);
  transition:opacity .38s cubic-bezier(.16,1,.3,1) .1s,filter .42s cubic-bezier(.16,1,.3,1) .1s,transform .7s cubic-bezier(.16,1,.3,1) .1s}
.hl-say>.say.on{opacity:1;filter:blur(0);transform:none}
.hl-say>.say.off{opacity:0;filter:blur(8px);transform:translateY(-.05em) scale(.99);transition:opacity .18s ease-in,filter .18s ease-in,transform .18s ease-in}
.hl-say>.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:560px){.hl-say{white-space:normal}}
@media (prefers-reduced-motion:reduce){.hl-say>.say,.hl-say>.say.off{transform:none;filter:none}}
.land h1.lt.one{max-width:none;white-space:nowrap}
.land h1.lt.one br{display:none}
.land h1.lt.one .hl + br + .hl{margin-left:.26em}
.lsub{margin-top:14px;font-size:17px;line-height:1.5;max-width:42ch;color:var(--muted-foreground);transition:color .7s ease-out,opacity .22s ease-out}
.lsub.fixed{color:var(--foreground)}
.lcta{margin-top:26px}
.lcta .btn{transition:none}
/* the optics over the live page */
.lfx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none;transition:opacity .4s ease-out}
.lfx.on{opacity:1;transition:none}
/* the words, riding on the mark */
.ltip{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .16s ease-out}
.ltip.on{opacity:1}
.ltip span{display:inline-block;font-size:13px;font-weight:500;line-height:1;padding:8px 12px 9px;border-radius:999px;white-space:nowrap;background:#0A0A0A;color:#fff;
  transition:background .2s ease-out,color .2s ease-out}
.ltip.hint span,.ltip.miss span{background:#F2F2F3;color:var(--muted-foreground)}
.land.dark .ltip span{background:#fff;color:#0A0A0A}
.land.dark .ltip.hint span,.land.dark .ltip.miss span{background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
/* INSPECTOR: framed, measured, the rest dimmed */
.land.holding[data-variant="inspector"] .lt{opacity:.22}
.land.holding[data-variant="inspector"] .lt.focus{opacity:1}
.linsp{position:absolute;left:0;top:0;z-index:5;pointer-events:none;border:1px solid #0A0A0A;border-radius:6px;opacity:0;
  transition:opacity .15s ease-out,transform .22s cubic-bezier(.2,.9,.3,1),width .22s cubic-bezier(.2,.9,.3,1),height .22s cubic-bezier(.2,.9,.3,1)}
.linsp.on{opacity:1}
.linsp i{position:absolute;left:-1px;top:-24px;font-style:normal;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;color:#fff;background:#0A0A0A;padding:3px 6px;border-radius:4px;white-space:nowrap}
.linsp b{position:absolute;width:7px;height:7px;background:#fff;border:1px solid #0A0A0A;border-radius:1px}
.linsp b:nth-of-type(1){left:-4px;top:-4px}.linsp b:nth-of-type(2){right:-4px;top:-4px}.linsp b:nth-of-type(3){left:-4px;bottom:-4px}.linsp b:nth-of-type(4){right:-4px;bottom:-4px}
/* COMMAND: a bar for the words */
.lcmd{position:absolute;left:50%;top:92px;z-index:7;width:min(560px,calc(100% - 32px));height:56px;display:flex;align-items:center;gap:12px;padding:0 18px 0 12px;
  background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--border),0 10px 30px rgba(0,0,0,.07);pointer-events:none;
  opacity:0;transform:translate(-50%,-10px) scale(.985);transition:opacity .18s ease-out,transform .32s cubic-bezier(.2,.9,.3,1)}
.lcmd.on{opacity:1;transform:translate(-50%,0)}
.lcmd-o{width:32px;height:32px;--crop:1.9;mix-blend-mode:multiply}
.lcmd-t{flex:1;min-width:0;font-size:18px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcmd-t:empty::before{content:attr(data-ph);color:var(--muted-foreground)}
.lcmd-k{font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.land.holding[data-variant="command"].has-focus .lt{opacity:.45}
.land.holding[data-variant="command"].has-focus .lt.focus{opacity:1}
/* SPOTLIGHT: into the dark through the ring; the page comes up lit, the target brightest */
.land.lit .lt{z-index:5;animation:litin .45s ease-out}
@keyframes litin{from{opacity:0}}
.land.lit h1.lt{color:#fff}
.land.lit .lsub{color:rgba(255,255,255,.6)}
.land.lit .lsub.fixed{color:#fff}
.land.lit .btn.dark{background:#fff;color:#0A0A0A}
.land.lit.holding .lt .key{background:#fff;color:#0A0A0A;border-color:transparent;box-shadow:none}
.land.lit.has-focus .lt{opacity:.18}
.land.lit.has-focus .lt.focus{opacity:1}
/* the notes */
.ltray{position:absolute;right:clamp(16px,3vw,32px);bottom:28px;width:300px;background:#fff;color:var(--foreground);border-radius:14px;padding:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 28px rgba(0,0,0,.08);opacity:0;transform:translateY(10px);transition:opacity .22s ease-out,transform .22s ease-out;pointer-events:none;z-index:8}
.ltray.has{opacity:1;transform:none;pointer-events:auto}
.ltray header{display:flex;justify-content:space-between;align-items:baseline;padding:2px 6px 8px;font-size:13px}
.ltray header span{color:var(--muted-foreground)}
.ltray ol{list-style:none;display:flex;flex-direction:column;gap:4px}
.lnote{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:var(--muted);transition:opacity .2s ease-out}
.lnote .num{width:20px;height:20px;font-size:11px}
.lnote .tx{display:flex;flex-direction:column;min-width:0}
.lnote b{font-weight:500;font-size:13px}
.lnote em{font-style:normal;font-size:12px;color:var(--muted-foreground)}
.ltray footer{display:none;gap:4px;padding-top:8px}
.ltray.done footer{display:flex}

/* ── 02 identity ────────────────────────────────────────────────────────── */
.mark-hero{min-height:420px}
.mark-svg{width:min(340px,70%);height:auto;color:var(--foreground)}
.live-mark{width:min(420px,100%);aspect-ratio:1;cursor:pointer}
.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pose{border:1px solid var(--border);border-radius:var(--r);background:#fff;padding:18px 18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color .15s ease-out}
.pose svg{width:72%;height:auto}
.pose span{font-size:12px;color:var(--muted-foreground)}
.pose.on{border-color:var(--foreground)}
.lock{display:flex;align-items:center;justify-content:center}
.lock.h{gap:28px}
.lock.v{flex-direction:column;gap:18px}
.word{font-weight:600;letter-spacing:-.03em;line-height:1}
.con{display:flex;gap:56px;align-items:center;flex-wrap:wrap;justify-content:center}
.con-fig{position:relative}
.con-clear{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(10,10,10,.05) 0 1px,transparent 1px 8px);border:1px dashed rgba(10,10,10,.25)}
.con-mark{position:absolute;background:#fff;outline:1px solid rgba(10,10,10,.35)}
.dim{position:absolute;font-size:12px;color:var(--muted-foreground);display:flex;align-items:center;justify-content:center;white-space:nowrap}
.dh{height:16px;border-top:1px solid rgba(10,10,10,.35)}
.dv{width:40px;border-left:1px solid rgba(10,10,10,.35);justify-content:flex-start;padding-left:6px}
.du{border-right:1px solid rgba(10,10,10,.35);border-bottom:1px solid rgba(10,10,10,.35);font-size:11px}
.facts{display:grid;grid-template-columns:auto auto;gap:6px 28px;font-size:14px}
.facts div{display:contents}
.facts dt{color:var(--muted-foreground)}
.facts dd{font-weight:500}
.icons{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.icon-row{display:flex;align-items:flex-end;gap:28px;padding:28px;border:1px solid var(--border);border-radius:var(--r);background:#F3F3F4;flex-wrap:wrap}
.icon-row.dark{background:#1A1A1A}
.icon-row figure{display:flex;flex-direction:column;align-items:center;gap:10px}
.icon-row figcaption{font-size:12px;color:var(--muted-foreground)}
.icon-row.dark figcaption{color:rgba(255,255,255,.45)}
.ico{display:block}
.swatch .chipc{height:96px}
.swatch .cap{align-items:flex-start}
.swatch .cap span{line-height:1.4}
.type-spec{align-items:flex-start;justify-content:center;padding:32px}
.spec{display:flex;flex-direction:column;gap:12px;text-align:left}
.measure{width:100%;aspect-ratio:4/5;display:block}
.gtile{text-align:left;padding:0}
.gtile .o{width:100%;aspect-ratio:1;--crop:1.25}

/* ── 03 kit ─────────────────────────────────────────────────────────────── */
.panels{display:flex;flex-direction:column;gap:12px;margin-top:24px;align-items:flex-start;padding:28px;background:var(--muted);border:1px solid var(--border);border-radius:var(--r)}
.hud{width:min(100%,560px);background:var(--instrument);color:#fff;border-radius:12px;padding:12px 18px 12px 12px;display:flex;align-items:center;gap:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.07)}
.hud-o{width:44px;height:44px;border-radius:8px;--crop:1.9;position:relative;display:grid;place-items:center}
.hud-o svg{width:100%;height:100%}
.hud .t{flex:1;min-width:0;text-align:left}
.hud .t i{display:block;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.42)}
.hud .t p{font-size:15px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-side{font-size:12px;color:rgba(255,255,255,.42);white-space:nowrap}
.hud.fail .t i{color:#fff}
.hud-x{width:26px;height:26px;border-radius:999px;border:1.5px solid #fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.hud-check{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:999px;background:#fff}
.hud-check::after{content:"";position:absolute;left:4px;top:3px;width:4px;height:6px;border:solid #0E0E0E;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.mbar{width:100%;height:32px;display:flex;align-items:center;gap:16px;padding:0 14px;background:rgba(242,242,242,.95);border-bottom:1px solid var(--border);font-size:13px;font-weight:500}
.mspace{flex:1}
.mitem{display:flex;align-items:center;height:24px;padding:0 6px;border-radius:5px}
.mitem.on{background:rgba(10,10,10,.08)}
.mitem .o{width:20px;height:20px;--crop:2.2}
.menu{align-self:flex-end;margin:6px 70px 24px 0;width:260px;background:#fff;border:1px solid var(--border-strong);border-radius:10px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.mhead{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.mhead span{margin-left:auto;font-size:12px;color:var(--muted-foreground)}
.menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:6px 8px;border-radius:6px;font-size:13px;text-align:left}
.menu button:hover{background:var(--muted)}
.menu button span{display:flex;gap:3px;color:var(--muted-foreground);font-size:12px}
.menu hr{border:0;border-top:1px solid var(--border);margin:4px 0}
.pass{width:min(100%,380px);background:#fff;border:1px solid var(--border-strong);border-radius:14px;padding:12px}
.pass header{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.pass header span{margin-left:auto;font-size:12px;color:var(--muted-foreground)}
.pass ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.pass li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:var(--muted)}
.pass .tx{display:flex;flex-direction:column;min-width:0}
.pass b{font-weight:500;font-size:13px}
.pass em{font-style:normal;font-size:12px;color:var(--muted-foreground)}
.pass footer{display:flex;gap:6px;padding-top:10px}
.setup,.settings{width:min(100%,440px);text-align:left}
.shead{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--border)}
.shead b{font-size:16px;font-weight:600}
.shead p{color:var(--muted-foreground);margin-top:2px}
.perm{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.perm div{flex:1}.perm b{font-weight:500}.perm p{color:var(--muted-foreground);font-size:13px}
.pdot{width:8px;height:8px;border-radius:999px;border:1.5px solid rgba(10,10,10,.35);flex:0 0 auto}
.pdot.ok{background:var(--foreground);border-color:var(--foreground)}
.pok{font-size:12px;color:var(--muted-foreground)}
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:0}
.sval{color:var(--muted-foreground)}
.seg.sm button{padding:3px 9px}
.row-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.row-btns.keys{font-size:44px}
.kplus{font-size:12px;color:var(--muted-foreground);margin-left:8px}
.rec{width:124px;height:124px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--border);touch-action:none}
.kstat{font-size:12px;color:var(--muted-foreground)}
.field{display:flex;align-items:center;gap:8px;width:min(100%,340px);height:44px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;padding:0 6px 0 14px}
.field input{flex:1;border:0;outline:0;background:none;font-size:14px;min-width:0}
.field input::placeholder{color:var(--faint)}
.field .o{width:32px;height:32px;--crop:1.8;border-radius:8px}
.sw-row{display:flex;justify-content:space-between;align-items:center;width:min(100%,300px);font-size:14px}
.ktoast{display:flex;align-items:center;gap:12px;background:var(--instrument);color:#fff;border-radius:12px;padding:10px 16px 10px 10px}
.ktoast.in{animation:ktin .26s ease-out}
@keyframes ktin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ktoast-o{width:32px;height:32px;border-radius:8px;--crop:1.9}
.ktoast em{display:block;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.42)}
.kloadst{min-height:260px}
.kload{width:200px;height:200px;--crop:1.35}

/* ── 04 applications ────────────────────────────────────────────────────── */
.mstage{min-height:620px;background:#F2F2F3;flex-direction:column;gap:30px;padding:56px 24px 40px}
.mbk{width:min(100%,780px)}
.mbk-screen{position:relative;aspect-ratio:16/10;background:#fff;border:9px solid #0B0B0C;border-radius:18px 18px 0 0;overflow:hidden;container-type:inline-size;
  box-shadow:0 0 0 1px #2C2C2E}
.mbk-screen::before{content:"";position:absolute;left:50%;top:0;width:13%;height:2.9cqw;transform:translateX(-50%);background:#0B0B0C;border-radius:0 0 1cqw 1cqw;z-index:3}
.mbk-bar{height:2.9cqw;display:flex;align-items:center;gap:1.9cqw;padding:0 1.6cqw;background:#F5F5F7;font-size:1.3cqw;font-weight:500;color:#1D1D1F;position:relative;z-index:2}
.mbk-bar b{font-weight:600}
.mbk-bar i{flex:1}
.mbk-stat{position:relative;display:block;width:2cqw;height:2cqw}
.mbk-stat .o{width:100%;height:100%;--crop:2.2;mix-blend-mode:multiply;transition:opacity .2s ease-out}
.mbk-stat em{position:absolute;right:-.7cqw;top:-.35cqw;min-width:1.25cqw;height:1.25cqw;border-radius:999px;background:#0A0A0A;color:#fff;font-style:normal;font-size:.85cqw;font-weight:600;
  display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.5,.6,1)}
.mbk-stat em.on{transform:scale(1)}
.mbk-tool{height:4.2cqw;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}
.mbk-tool span{font-size:1.2cqw;color:var(--muted-foreground);background:#F2F2F4;border-radius:.8cqw;padding:.45cqw 9cqw}
.mbk-site{position:relative;height:calc(100% - 7.1cqw);display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.6cqw 6cqw 0}
.mbk-site nav{align-self:stretch;display:flex;align-items:center;gap:2.6cqw;font-size:1.3cqw;color:var(--muted-foreground);margin-bottom:13cqw}
.mbk-site nav b{font-size:1.7cqw;font-weight:600;letter-spacing:-.02em;color:#0A0A0A}
.mbk-site nav i{flex:1}
.mshot{border-radius:1.4cqw;padding:1.4cqw 2.6cqw;margin:-1.4cqw 0 0;transition:background .18s ease-out;transform-origin:50% 50%}
.mshot.shot{background:rgba(10,10,10,.05)}
.mshot h3{font-size:6.4cqw;line-height:1.02;font-weight:600;letter-spacing:-.035em;color:#0A0A0A;transition:opacity .3s ease-out,font-size .7s cubic-bezier(.3,1.35,.5,1)}
.mshot h3.big{font-size:8.8cqw}
.mbk-pill{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;font-size:1.2cqw;font-weight:500;color:#fff;background:#0A0A0A;border-radius:999px;padding:.5cqw 1.1cqw;
  transition:opacity .16s ease-out;z-index:5;pointer-events:none}
.mbk-pill.on{opacity:1}
.mbk-site p.mt{font-size:1.75cqw;color:var(--muted-foreground);margin-top:.6cqw}
.mbtn{margin-top:3cqw;font-size:1.4cqw;font-weight:500;background:#0A0A0A;color:#fff;border-radius:999px;padding:1cqw 2.4cqw}
.mbk-site .mt{transition:opacity .22s ease-out}
.mbk-site.holding .mt,.mbk-site.holding .mshot h3{opacity:.32}
.mbk-site.focus .mt{opacity:.10}
.mbk-site.focus .mshot h3{opacity:1}
.mbk-line{position:absolute;left:0;right:0;bottom:5.5cqw;font-size:1.7cqw;color:#0A0A0A;min-height:1em}
.mbk-o{position:absolute;left:0;top:0;width:128px;height:128px;--crop:1.5;mix-blend-mode:multiply;transform-origin:50% 50%;opacity:0;transition:opacity .15s ease-out;z-index:4;pointer-events:none}
.mbk-base{position:relative;height:15px;margin:0 -7%;background:linear-gradient(#E6E6E9,#C6C6CB);border-radius:2px 2px 16px 16px;box-shadow:0 14px 22px -16px rgba(0,0,0,.45)}
.mbk-base i{position:absolute;left:50%;top:0;width:13%;height:5px;transform:translateX(-50%);background:#C2C2C7;border-radius:0 0 7px 7px}
.mbk-keys{display:flex;gap:2px;font-size:46px;line-height:1}
.mchrome{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#F4F4F5;border-bottom:1px solid var(--border);font-size:10px;color:var(--muted-foreground)}
.mchrome i{width:9px;height:9px;border-radius:999px;background:#D4D4D8}
.mchrome span{margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:6px;padding:1px 40px}
.phone{position:relative;width:300px;aspect-ratio:9/19.5;background:#0A0A0A;border:10px solid #111;border-radius:46px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ph-type{position:absolute;left:0;right:0;top:34%;bottom:6%;width:100%;height:60%}
.ph-o{position:absolute;left:50%;top:8%;width:46%;aspect-ratio:1;transform:translateX(-50%);--crop:1.3}
.ph-word{position:absolute;left:0;right:0;bottom:3%;text-align:center;color:rgba(255,255,255,.55);font-size:12px;font-weight:600}
.poster{position:relative;width:330px;aspect-ratio:3/4;background:#0A0A0A;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.poster canvas{position:absolute;inset:0;width:100%;height:100%}
.po-mark{position:absolute;left:7%;top:5%;width:12%;aspect-ratio:1}
.po-foot{position:absolute;right:7%;top:6%;color:#fff;font-size:11px;font-weight:600}
.dock{display:flex;align-items:flex-end;gap:10px;padding:10px 14px;border-radius:22px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 10px 30px rgba(0,0,0,.08)}
.dicon{width:58px;height:58px;border-radius:14px;position:relative;display:block}
.dicon svg{width:100%;height:100%;display:block}
.dicon.amb{width:58px;height:58px;transform:translateY(-6px)}
.drun{position:absolute;left:50%;bottom:-11px;width:4px;height:4px;border-radius:999px;background:#0A0A0A;transform:translateX(-50%)}
.dsep{width:1px;height:48px;background:rgba(10,10,10,.12)}
.browser{width:min(100%,520px);background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.wland{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px 40px;text-align:center}
.wland b{font-size:26px;font-weight:500;letter-spacing:-.035em;margin-top:4px}
.wland p{color:var(--muted-foreground);font-size:13px}
.social{width:min(100%,420px)}
.sprof{display:flex;gap:16px;align-items:center}
.savatar{width:84px;height:84px;border-radius:999px;background:#0A0A0A;flex:0 0 auto;overflow:hidden;display:block}
.sprof b{font-size:16px}.sprof p{color:var(--muted-foreground);font-size:13px}.sstats{font-size:12px;color:var(--faint)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:16px}
.sgrid span{aspect-ratio:4/5;display:block}
.mail{width:min(100%,440px);background:#fff;border-radius:12px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.08);text-align:left}
.mhead2{display:flex;align-items:center;gap:8px;font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px}
.mhead2 em{margin-left:auto;font-style:normal;font-weight:400;font-size:12px;color:var(--muted-foreground)}
.mail h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.mail p{color:var(--muted-foreground);margin:10px 0}
.mfoot{font-size:12px;color:var(--faint)}

/* ── 05 launch ──────────────────────────────────────────────────────────── */
.lchead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.player{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:20px;margin-top:20px;align-items:start}
@media(max-width:860px){.player{grid-template-columns:1fr}}
.pview{border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);background:#fff;aspect-ratio:4/5;position:relative}
.pview canvas{width:100%;height:100%}
.pside{display:flex;flex-direction:column;gap:14px}
.pframes{list-style:none;display:flex;flex-direction:column;gap:2px;max-width:320px}
.pframes button{display:flex;gap:14px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;color:var(--muted-foreground);font-size:14px}
.pframes button span{color:var(--faint);font-size:12px}
.pframes button:hover{background:var(--muted)}
.pframes button.on{background:var(--muted);color:var(--foreground);font-weight:500}
.pauto{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted-foreground);padding-left:10px}

/* ── 06 release ─────────────────────────────────────────────────────────── */
.rel{display:flex;flex-direction:column;gap:20px}
.relcard{display:flex;align-items:center;gap:18px;padding:18px;border:1px solid var(--border);border-radius:var(--r)}
.relico{width:72px;height:72px;display:block}
.relico svg{width:100%;height:100%}
.relcard div{flex:1}.relcard b{font-size:18px;font-weight:600}.relcard p{color:var(--muted-foreground)}
.sha{font-size:12px}
.steps{list-style:none;border:1px solid var(--border);border-radius:var(--r)}
.steps li{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border);align-items:flex-start}
.steps li:last-child{border-bottom:0}
.steps li > div{flex:1;min-width:0}
.steps b{font-weight:500}
.steps p{color:var(--muted-foreground);margin-top:2px}
.steps em{font-style:normal;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--muted-foreground);white-space:nowrap}
.steps li.done em{background:var(--muted)}
.steps li.block em{background:var(--foreground);color:#fff;border-color:var(--foreground)}
.sdot{width:10px;height:10px;border-radius:999px;margin-top:6px;border:1.5px solid rgba(10,10,10,.3);flex:0 0 auto}
.steps li.done .sdot{background:var(--foreground);border-color:var(--foreground)}
.steps li.block .sdot{border-color:var(--foreground)}
.cmd{font-family:inherit;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;font-size:12px;line-height:1.6;background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:10px;white-space:pre-wrap;word-break:break-all}
.cpy{margin-top:6px}

.seq{list-style:none;display:flex;flex-direction:column;gap:18px}
.seq li{display:flex;align-items:baseline;gap:16px;font-size:30px;font-weight:500;letter-spacing:-.02em}
.seq li span{font-size:12px;font-weight:500;color:var(--faint);width:14px}
.strip6{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}
.strip6 figure{cursor:pointer;display:flex;flex-direction:column;gap:6px}
.strip6 canvas{width:100%;height:auto;border-radius:8px;box-shadow:inset 0 0 0 1px var(--border)}
.strip6 figcaption{font-size:12px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.strip6{grid-template-columns:repeat(4,1fr)}}
.ph-scene{position:absolute;inset:0;width:100%;height:100%}
.po-scene{position:absolute;inset:0;width:100%;height:100%}
/* launch suite: three resolutions × three elements */
.suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;align-items:start;margin-top:14px}
.sfig figcaption b{font-weight:500;color:var(--foreground);margin-right:4px}
.seg.sm button{font-size:12px;padding:4px 9px}
.srowh{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin-top:20px;font-size:14px}
.srowh:first-child{margin-top:0}
.srowh b{font-weight:500}
.srowh span{color:var(--muted-foreground)}
.sfig{display:flex;flex-direction:column;gap:6px;margin:0}
.sfig figcaption{font-size:12px;color:var(--muted-foreground)}
.stile{position:relative;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);background:#fff;aspect-ratio:4/5}
.stile canvas{position:absolute;inset:0;width:100%;height:100%}
.sacts{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s ease-out}
.stile:hover .sacts{opacity:1}
.sacts button{font-size:11px;font-weight:500;padding:4px 8px;border-radius:999px;background:#fff;color:#0A0A0A;box-shadow:0 0 0 1px var(--border)}
.irefs{min-height:300px;overflow:hidden}
.iref{width:min(100%,420px);aspect-ratio:1;--crop:1.7}

/* kit: setup and settings as small macOS windows */
.setwin{width:min(100%,420px);background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--border),0 6px 20px rgba(0,0,0,.05);overflow:hidden;text-align:left}
.setwin header{position:relative;height:38px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:#FAFAFA;border-bottom:1px solid var(--border)}
.setwin .tl{position:absolute;left:13px;top:50%;display:flex;gap:7px;transform:translateY(-50%)}
.setwin .tl i{width:11px;height:11px;border-radius:999px;background:#E3E3E6}
.setbody{display:flex;flex-direction:column;gap:10px;padding:14px;background:#F5F5F7}
.setintro{display:flex;align-items:center;gap:12px;padding:2px 2px 4px;font-size:13px;line-height:1.45;color:var(--muted-foreground)}
.setintro svg{flex:0 0 auto}
.setgroup{background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--border)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 12px;font-size:13px}
.setrow + .setrow{border-top:1px solid var(--border)}
.setrow.tall{min-height:58px;padding:9px 12px}
.setrow.tall b{display:block;font-weight:500}
.setrow.tall em{display:block;font-style:normal;font-size:12px;color:var(--muted-foreground);margin-top:1px}
.setok{font-size:12px;color:var(--muted-foreground)}
.setsel{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground);white-space:nowrap}
.setsel i{font-style:normal;font-size:11px}
.setkeys{display:inline-flex;gap:3px}
.setfoot{font-size:12px;color:var(--muted-foreground);text-align:center;padding-top:2px}
/* kit: motion suite tiles */
.mstage2{padding:0;aspect-ratio:4/3;min-height:0}
.mstage2 canvas{width:100%;height:100%;display:block}
.stile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border);pointer-events:none}
/* once let go, the dimmed page comes back before the ring passes over it */
.land.done:not(.lit) .lt{opacity:1}
/* motion area */
.mgroup{margin-top:40px}
.mgroup:first-child{margin-top:8px}
.mghead{margin-bottom:14px}
.mghead h2{font-size:18px;font-weight:500;letter-spacing:-.01em}
.micro .stage{position:relative}
.micro:hover .sacts{opacity:1}
/* capture: any asset, anywhere */
.capchip{position:fixed;left:0;top:0;z-index:200;display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .12s ease-out}
.capchip.on{opacity:1;pointer-events:auto}
.capchip button{font-size:11px;font-weight:500;padding:4px 9px;border-radius:999px;background:#fff;color:#0A0A0A;box-shadow:0 0 0 1px var(--border),0 2px 8px rgba(0,0,0,.08)}
.capchip button[hidden]{display:none}
/* compose */
.bdbar{gap:12px}
.bstage{margin-top:16px;display:flex;justify-content:center;width:100%}
.bstage canvas{border-radius:12px;box-shadow:0 0 0 1px var(--border);display:block}
.bnext{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}
.bthumb{display:block;padding:0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--border);transition:box-shadow .15s ease-out;background:none}
.bthumb:hover{box-shadow:0 0 0 1px #0A0A0A}
.bthumb canvas{width:100%;height:auto;display:block}

/* ── app: the refreshed windows, a proposal (ax-) ─────────────────────── */
.axdesk{margin-top:24px;padding:40px 28px;border-radius:var(--r);border:1px solid var(--border);display:flex;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#2A2A2C 0%,#141415 70%)}
.axdesk.light{background:radial-gradient(120% 90% at 50% 0%,#F7F7F8 0%,#E9E9EC 80%)}
.axstack{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.axstack .hud{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.36)}
.axkeys{display:inline-flex;gap:2px;margin:0 2px;vertical-align:1px}
.hud .axkeys .key.s{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none}
.axchip{flex:0 0 auto;font-size:12px;font-weight:500;color:rgba(255,255,255,.6);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);white-space:nowrap}
.axchip.strong{color:#fff;background:rgba(255,255,255,.12)}
.axcount{flex:0 0 auto;min-width:22px;height:22px;border-radius:999px;background:#fff;color:#0E0E0E;font-size:12px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.axcaret{display:inline-block;width:1.5px;height:15px;margin-left:2px;background:#fff;vertical-align:-2px;animation:axblink 1s steps(1) infinite}
@keyframes axblink{50%{opacity:0}}
.axbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;background:#fff;color:#0E0E0E;font-size:13px;font-weight:500;white-space:nowrap}
.axbtn.ghost{background:transparent;color:rgba(255,255,255,.7)}
.axbtn.ghost:hover{color:#fff;background:rgba(255,255,255,.08)}
.axbtn kbd{border:0;padding:0;font-size:12px;color:rgba(14,14,14,.45)}
.axgrow{flex:1}
.axwin{position:relative;width:min(100%,540px);border-radius:12px;text-align:left}
.axwin.dark{background:var(--instrument);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.36)}
.axwin header{display:flex;align-items:center;gap:8px;padding:14px 16px 12px;font-size:14px}
.axwin header b{font-weight:600}
.axwin header em{font-style:normal;font-size:12px;color:rgba(255,255,255,.4);margin-right:auto}
.seg.dark{border-color:rgba(255,255,255,.14)}
.seg.dark button{color:rgba(255,255,255,.55)}
.seg.dark button.on{background:#fff;color:#0E0E0E}
.axwin ol{list-style:none;margin:0;padding:0 8px}
.axwin li{position:relative;display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;transition:background .15s ease-out}
.axwin li:hover{background:rgba(255,255,255,.05)}
.axn{width:14px;font-size:12px;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums;text-align:right}
.axth{position:relative;flex:0 0 auto;width:76px;height:50px;border-radius:5px;background:#F4F4F5;overflow:hidden}
.axth i{position:absolute;left:12px;border-radius:999px;background:#0A0A0A}
.axth.btn i:first-child{top:18px;width:36px;height:13px}
.axth.btn i:last-child{display:none}
.axth.head i:first-child{top:16px;width:52px;height:7px;border-radius:2px}
.axth.head i:last-child{top:27px;width:30px;height:7px;border-radius:2px}
.axth.sub i:first-child{top:18px;width:50px;height:4px;border-radius:2px;background:#C9C9CE}
.axth.sub i:last-child{top:26px;width:38px;height:4px;border-radius:2px;background:#C9C9CE}
.axtx{flex:1;min-width:0}
.axtx b{display:block;font-size:13px;font-weight:500;outline:none;border-radius:4px}
.axtx b:focus{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.axtx em{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.axacts{display:flex;gap:4px;opacity:0;transition:opacity .15s ease-out}
.axwin li:hover .axacts{opacity:1}
.axacts button{font-size:12px;color:rgba(255,255,255,.6);padding:3px 8px;border-radius:6px}
.axacts button:hover{background:rgba(255,255,255,.08);color:#fff}
.axwin footer{display:flex;align-items:center;gap:8px;padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.axtoast{position:absolute;left:50%;bottom:64px;transform:translate(-50%,6px);opacity:0;pointer-events:none;background:#fff;color:#0E0E0E;font-size:13px;font-weight:500;
  padding:6px 14px;border-radius:999px;transition:opacity .2s ease-out,transform .2s ease-out}
.axtoast.on{animation:axtoast 1.8s ease-out forwards}
@keyframes axtoast{0%{opacity:0;transform:translate(-50%,6px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
.setwin.axw,.setwin.axs{width:min(100%,480px)}
.setwin.axs{width:min(100%,460px)}
.axstep{min-height:250px;justify-content:center}
.axstep h3{font-size:18px;font-weight:600;letter-spacing:-.01em;padding:0 2px}
.axhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 18px}
.axhero h3{font-size:21px;letter-spacing:-.02em}
.axhero p{font-size:13px;line-height:1.5;color:var(--muted-foreground);max-width:36ch}
.axnote{font-size:12px;color:var(--muted-foreground);padding:0 2px;line-height:1.45}
.axtry{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 0;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--border)}
.axtip{font-size:12px;font-weight:500;color:#fff;background:#0E0E0E;padding:5px 11px;border-radius:999px}
.axwf{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:#fff}
.axdots{display:flex;gap:6px}
.axdots i{width:6px;height:6px;border-radius:999px;background:#D9D9DD;transition:background .2s ease-out}
.axdots i.on{background:#0A0A0A}
.axlink{font-size:12px;font-weight:500;color:var(--foreground);padding:3px 8px;border-radius:6px;margin-left:4px}
.axlink:hover{background:var(--muted)}
.axlink.danger{text-decoration:underline;text-underline-offset:3px}
.axmb{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.axmb .mbar{gap:14px}
.axmb .mbar b{width:14px;height:14px;border-radius:3px;background:#0A0A0A}
.axsi{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 5px;border-radius:5px}
.axsi:hover{background:rgba(0,0,0,.06)}
.axsi em{font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.axsi.live{position:relative;width:26px;overflow:hidden}
.axsi.live canvas{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.axmrow{display:flex;align-items:flex-start;justify-content:space-between;padding:0 24px 0 28px}
.axcap{font-size:12px;color:var(--muted-foreground);padding-top:14px}
.axmrow .menu{margin:6px 0 28px}

/* ── marks: more states of the same glass ─────────────────────────────── */
.mkst{position:relative;padding:0;aspect-ratio:1/1;min-height:0;display:grid;place-items:center}
.mkst canvas{width:74%;height:auto;aspect-ratio:1/1;display:block}
.mkst .mklive{position:absolute;left:13%;top:13%;width:74%;height:74%;display:none}
.mkuse{position:absolute;right:10px;bottom:10px;opacity:0;transition:opacity .15s ease-out}
.mk:hover .mkuse{opacity:1}
/* ── frames: one graphic, full bleed ──────────────────────────────────── */
.frstage{margin-top:16px;display:flex;justify-content:center;padding:28px;background:var(--muted);border:1px solid var(--border);border-radius:var(--r)}
.frstage canvas{display:block;box-shadow:0 0 0 1px var(--border),0 6px 24px rgba(0,0,0,.06)}

/* ── marks v2: a map of the glass ─────────────────────────────────────── */
.mkdial{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground)}
.mkdial input,.mkside input[type=range]{accent-color:var(--foreground);width:110px}
.mkmapwrap{position:relative;margin-top:16px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff}
.mkmapwrap canvas{display:block;width:100%;cursor:crosshair}
.mkaxis{position:absolute;font-size:12px;color:var(--faint);pointer-events:none}
.mkaxis.x{right:12px;bottom:8px}
.mkaxis.y{left:8px;top:12px;writing-mode:vertical-rl}
.mkhover{position:absolute;left:12px;bottom:8px;font-size:12px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;pointer-events:none}
.mkloupe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
.mkbig{aspect-ratio:1/1;padding:0;min-height:0;display:grid;place-items:center}
.mkbig .o{width:86%;height:86%}
.mkside{display:flex;flex-direction:column;gap:16px}
.mksizes{display:flex;align-items:flex-end;gap:18px;padding:18px;border:1px solid var(--border);border-radius:var(--r);background:#fff}
.mkgene{font-size:12px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;line-height:1.5}
.mkkept{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mkk{width:96px;height:96px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--border);background:#fff}
.mkk canvas{width:96px;height:96px;display:block}
@media(max-width:860px){.mkloupe{grid-template-columns:1fr}}
.bhint{margin-top:10px;font-size:12px;color:var(--muted-foreground)}

/* ── landing, below the hero: the developer's page (docs.js) ──────────── */
.ldocs{padding-bottom:80px}
.lsec{padding:72px 0;border-top:1px solid var(--border)}
.lsec:first-child{border-top:0}
.lsec h2{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-top:10px}
.lsl{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted-foreground);max-width:46ch}
.lsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.lstile{aspect-ratio:4/3;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--border);background:#fff}
.lstile canvas,.lb canvas{display:block;width:100%;height:100%}
.lsn{margin-top:16px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.lstep h3{margin-top:4px;font-size:16px;font-weight:500;letter-spacing:-.005em}
.lsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.lbrief{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--border);overflow:hidden}
.lbrief header{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;color:var(--muted-foreground);border-bottom:1px solid var(--border);background:#FAFAFA}
.lbrief ol{list-style:none;margin:0;padding:14px 16px;counter-reset:ln}
.lbrief li{counter-increment:ln;display:flex;gap:14px;font-size:13px;line-height:1.7;white-space:normal}
.lbrief li::before{content:counter(ln);min-width:18px;text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}
.lbrief li.head{font-weight:500}
.lbrief li.app,.lbrief li.path{color:var(--muted-foreground)}
.lbrief li.foot{color:var(--muted-foreground);font-size:12.5px}
.lbento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lb{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--border);background:#fff;min-height:0}
.lb1{grid-column:span 2;aspect-ratio:1.6/1}
.lb2{background:#0A0A0A;aspect-ratio:4/5}
.lb3{aspect-ratio:4/5}
.lb3 canvas{height:auto;aspect-ratio:4/3;margin-top:22%}
.lb4{grid-column:span 4;aspect-ratio:4/1}
.lspecs{display:flex;flex-direction:column;margin:0}
.lspecs div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}
.lspecs dt{font-size:13px;color:var(--muted-foreground)}
.lspecs dd{margin:0;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
.lints{display:flex;gap:8px;flex-wrap:wrap;padding-top:40px}
.lints span{font-size:14px;font-weight:500;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--muted-foreground)}
.lints span.on{background:var(--foreground);color:#fff;box-shadow:none}
.lfaq details{border-bottom:1px solid var(--border);padding:14px 0}
.lfaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-size:15px;font-weight:500}
.lfaq summary::-webkit-details-marker{display:none}
.lfaq summary::after{content:"+";color:var(--faint);transition:transform .2s ease-out}
.lfaq details[open] summary::after{transform:rotate(45deg)}
.lfaq p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted-foreground);max-width:60ch}
.lclose{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.lclose h2{font-size:42px;letter-spacing:-.035em;max-width:16ch;line-height:1.08}
@media(max-width:860px){.lsteps,.lsplit{grid-template-columns:1fr}.lbento{grid-template-columns:repeat(2,minmax(0,1fr))}.lb4{grid-column:span 2;aspect-ratio:2/1}}

/* ── landing v2: centred micro layouts, the glass at the edges (docs.js) ── */
.ldocs{padding-bottom:0}
.lx{position:relative;min-height:440px;display:grid;place-items:center;border-top:1px solid var(--border);overflow:hidden;background:#fff}
.lx-c{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:72px 20px}
.lx-q{font-size:13px;font-weight:300;color:rgba(10,10,10,.3);max-width:46ch;line-height:1.5}
.lx-l{font-size:20px;font-weight:500;letter-spacing:-.01em}
.lx-logos{display:flex;gap:34px;align-items:center;margin-bottom:6px}
.lx-logos .logo,.lx-apple .logo{display:block;width:40px;height:40px}
.lx-apple .logo{width:30px;height:30px}
.lx-logos .soon{opacity:.3}
.lx-narrow{max-width:640px;width:100%;align-items:stretch;text-align:left}
.lx-narrow .label{text-align:center;margin-bottom:8px}
.lx-get{min-height:560px}

/* ── art: the glass, smeared ─────────────────────────────────────────── */
.ardials{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px;font-size:12px;color:var(--muted-foreground)}
.ardials label{display:inline-flex;align-items:center;gap:8px}
.ardials input{accent-color:var(--foreground);width:120px}

.logo.inv{filter:invert(1)}
.btn .logo{width:16px;height:16px;display:block;margin:-2px 0 0}
.lx-logos{gap:26px}
.lx-logos .logo{width:24px;height:24px}
/* landing v3: no dividers */
.lx{border-top:0}
/* the maker, in the bar: quiet, linked (his note, 10-19) */
.lmade{font-size:12px;color:var(--muted-foreground);white-space:nowrap;margin-left:16px}
.lmade a{color:var(--foreground);text-decoration:none}
.lmade a:hover{text-decoration:underline;text-underline-offset:3px}
.land.holding .lmade{opacity:0;transition:opacity .18s ease-out}
/* the public site: no design tools in the bar */
body.site .lvar,body.site .lfull{display:none}
.lx-beta{max-width:52ch;margin-top:-4px}
@media(max-width:640px){.lmade{font-size:11px}.lmade .lby{display:none}}

/* ── 07 app: the app as it is, rendered from its own code (appui.js) ───── */
.apstamp{margin-top:6px;font-size:12px;color:var(--faint)}
.apshot{display:block;margin-top:14px}
.apshot img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--border)}
.apmenus{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:14px;align-items:start}
.apmenu{background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--border),0 4px 14px rgba(10,10,10,.06);padding:6px}
.aphead{font-size:12px;color:var(--faint);padding:6px 10px 4px}
.aprow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 10px;border-radius:5px}
.aprow i{font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
.aprow.off span{color:var(--faint)}
.apmenu hr{border:0;border-top:1px solid var(--border);margin:5px 8px}
.apstates .aprow{flex-direction:column;gap:0}
.apstates .aprow i{font-size:12px}

/* ── landing, second pass (10-19): the wall, the fast line, the maker, the accents ── */
/* the wall: HTML cards on one camera, pinned while the scroll pulls it back (wall.js) */
.lx-bn{display:block;place-items:normal;min-height:0;height:320vh;overflow:visible;background:#fff}
.bn-stage{position:sticky;top:0;width:100%;height:100vh;overflow:hidden}
.bn-cam{position:absolute;left:0;top:0;transform-origin:50% 50%}
.bn-card{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:10px;background:#fff;color:#0A0A0A;
  box-shadow:0 0 0 1px rgba(10,10,10,.08);overflow:hidden;text-decoration:none;contain:layout paint style}
.bn-card.dark{background:#0A0A0A;color:#fff;box-shadow:none}
.bn-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * .55);padding:calc(var(--u) * 1.4)}
.bn-tex{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease-out}
.bn-card.has-tex .bn-tex{opacity:1}
.bn-h{font-size:var(--h);font-weight:500;letter-spacing:-.035em;line-height:1.04}
.bn-f{font-size:var(--f);font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.bn-l{font-size:var(--l);line-height:1.35;color:rgba(10,10,10,.46);max-width:30ch}
.bn-card.dark .bn-l{color:rgba(255,255,255,.56)}
.bn-logos{display:flex;gap:calc(var(--u) * 2.2);margin-bottom:calc(var(--u) * .9)}
.bn-logos .logo{width:calc(var(--u) * 2.8);height:calc(var(--u) * 2.8);display:block}
.bn-keys{display:flex;gap:calc(var(--key) * .14);margin-bottom:calc(var(--u) * .9)}
.bn-keys kbd{width:var(--key);height:var(--key);display:grid;place-items:center;border-radius:calc(var(--key) * .22);background:#F4F4F5;color:#0A0A0A;
  box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.07),0 1px 0 rgba(10,10,10,.06);font:500 calc(var(--key) * .44)/1 Geist,-apple-system,sans-serif}
.bn-keys kbd:last-child{font-size:calc(var(--key) * .5)}
/* the live panel, as the app draws it */
.k-hud .bn-in{width:100%;gap:calc(var(--u) * .9)}
.bn-hud{width:min(100%,calc(var(--u) * 46));text-align:left;background:#161617;border-radius:calc(var(--u) * .8);padding:calc(var(--u) * 1) calc(var(--u) * 1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bn-hud-top{display:flex;align-items:center;gap:calc(var(--u) * .6);font-size:var(--l);font-weight:500}
.bn-hud-top em{margin-left:auto;font-style:normal;font-weight:400;color:rgba(255,255,255,.5)}
.bn-wave{display:inline-flex;align-items:center;gap:2px;height:calc(var(--u) * 1.2)}
.bn-wave b{display:block;width:2px;height:100%;border-radius:1px;background:#fff;transform:scaleY(.3);animation:bnwave 1.1s ease-in-out infinite}
.bn-wave b:nth-child(2){animation-delay:-.2s}.bn-wave b:nth-child(3){animation-delay:-.45s}.bn-wave b:nth-child(4){animation-delay:-.7s}.bn-wave b:nth-child(5){animation-delay:-.9s}
@keyframes bnwave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.bn-hud-t{margin:calc(var(--u) * .7) 0 calc(var(--u) * .8);font-size:calc(var(--u) * 1.5);line-height:1.3;min-height:1.3em;letter-spacing:-.01em}
.bn-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#fff;animation:bncaret 1s steps(1) infinite}
@keyframes bncaret{50%{opacity:0}}
.bn-chip{display:inline-flex;align-items:center;font-size:var(--l);padding:.3em .85em;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);white-space:nowrap}
.bn-card:not(.dark) .bn-chip{background:rgba(10,10,10,.05);color:rgba(10,10,10,.6)}
.bn-chip-lg{font-size:var(--chip);margin-bottom:calc(var(--u) * .9);max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* a screenshot from a note: the page, and the ring where the pointer was */
.bn-shot{position:relative;width:78%;aspect-ratio:4/3;border-radius:calc(var(--u) * .7);background:#F4F4F5;overflow:hidden;margin-bottom:calc(var(--u) * 1.1);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.06)}
.bn-shot i{position:absolute;left:12%;height:5%;border-radius:2px;background:rgba(10,10,10,.12)}
.bn-shot i:nth-child(1){top:18%;width:52%;height:9%;background:#0A0A0A}
.bn-shot i:nth-child(2){top:38%;width:70%}.bn-shot i:nth-child(3){top:49%;width:62%}
.bn-shot i:nth-child(4){top:70%;width:30%;height:11%;border-radius:999px;background:#0A0A0A}
.bn-ring{position:absolute;left:52%;top:62%;width:22%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 calc(2px + .18em) #0A0A0A,inset 0 0 0 2px #fff;
  animation:bnring 2.4s ease-out infinite}
@keyframes bnring{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.12)}}
.bn-pill{font-size:var(--f);font-weight:500;letter-spacing:-.02em;padding:.32em .9em;border-radius:999px;background:#fff;color:#0A0A0A;margin-bottom:calc(var(--u) * .8);white-space:nowrap}
.bn-apple .logo{display:block;width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6);margin-bottom:calc(var(--u) * .4)}
.k-download{cursor:pointer;transition:background .2s ease-out}
.k-download:hover{background:#1C1C1E}
/* narrow and portrait: a column of two, each card revealed as it enters */
.lx-bn.stack{height:auto}
.lx-bn.stack .bn-stage{position:relative;height:auto;overflow:visible}
.lx-bn.stack .bn-cam{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:24px 16px;width:auto !important;height:auto !important;transform:none !important}
.lx-bn.stack .bn-card{position:relative}
.lx-bn.stack .bn-card.wide{grid-column:span 2}
.lx-bn.stack .bn-card[hidden]{display:none}

/* the fast line: features, benefits, outcomes, one at a time */
.lx-tick{min-height:0;padding:14vh 0 10vh}
.tk{position:relative;width:min(1100px,92vw);height:calc(clamp(52px,7.4vw,112px) * 1.05 + 46px)}
.tk-i{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(14px);
  transition:opacity .24s ease-out,transform .24s ease-out}
.tk-i.on{opacity:1;transform:none}
.tk-i.out{opacity:0;transform:translateY(-14px)}
.tk-i b{font-size:clamp(52px,7.4vw,112px);font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.tk-i span{font-size:16px;color:var(--muted-foreground)}
.tk-dots{display:flex;gap:7px;margin-top:20px}
.tk-dots i{width:6px;height:6px;border-radius:50%;background:rgba(10,10,10,.13);cursor:pointer;transition:background .2s ease-out}
.tk-dots i.on{background:#0A0A0A}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* who made it: a quiet badge under the download, the mark as tall as the capitals */
.lmaker{display:inline-flex;align-items:baseline;gap:6px;margin-top:40px;padding:7px 14px 8px;border-radius:999px;font-size:12px;color:rgba(10,10,10,.4);
  text-decoration:none;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08);transition:color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out}
.lmaker:hover{color:#0A0A0A;transform:scale(1.04);box-shadow:inset 0 0 0 1px rgba(10,10,10,.16)}
.lmark{height:.72em;width:auto;fill:currentColor}

/* the glass in the margins (accents.js): one layer, multiplied into the page */
.lacc{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;mix-blend-mode:multiply}
.lacc-i{position:absolute;display:block;opacity:0;transition:opacity .6s ease-out}
/* the header over the edge glass: a difference blend, every colour set to its complement, so on white paper it
   reads exactly as before and over the glass it reads white */
.land.on-glass .lbar{mix-blend-mode:difference}
.land.on-glass .lword{color:#f5f5f5}
.land.on-glass .lvar button,.land.on-glass .lfull,.land.on-glass .lmade{color:#8c8c8c}
.land.on-glass .lvar button.on{color:#f5f5f5;background:#0b0b0a}
.land.on-glass .lmade a{color:#f5f5f5}
.land.on-glass.dark .lbar{mix-blend-mode:screen}
.lacc-i canvas,.lacc-i .still{position:absolute;inset:0;width:100%;height:100%;display:block}
.lacc-i.on{opacity:1}
.lacc-i.l{left:0}.lacc-i.r{right:0}
.land.dark ~ .lacc{opacity:0}
@media(max-width:899px){.lacc{display:none}}

/* reveals: driven by the scroll itself, so a browser that can't run them shows everything */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv,.lx-bn.stack .bn-card,.lx-tick .lx-c{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes rv{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}
/* 06 bento lab, second pass: five behaviours, one after another */
.bnh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:18px}
.bnh .btn.on{background:var(--foreground);color:#fff;box-shadow:none}
/* the live panel's card: its title beside the panel on the wall, under it in the column */
.k-hud .bn-in{flex-direction:row;align-items:center;gap:calc(var(--u) * 2.2);text-align:left}
.bn-txt{display:flex;flex-direction:column;gap:calc(var(--u) * .55);flex:0 0 auto;max-width:36%}
.k-hud .bn-hud{flex:1 1 auto}
.lx-bn.stack .k-hud .bn-in{flex-direction:column-reverse;text-align:center}
.lx-bn.stack .bn-txt{max-width:none;align-items:center}
/* the fast line on a phone: long items wrap to two balanced lines */
@media(max-width:640px){
  .tk{height:calc(clamp(38px,11vw,56px) * 2.1 + 46px)}
  .tk-i b{font-size:clamp(38px,11vw,56px);white-space:normal;text-wrap:balance;text-align:center}
}

/* ── landing, third pass (10-19): live accents, the line with its mark, open questions, five footers ── */
/* live accents (accents.js): fixed edges, one glass behind the page, or long live accents down it */
.lacc-live{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3;transition:opacity .35s ease-out}
.lacc-live.off{opacity:0}
.lacc-live.part,.lacc-live.zoom{z-index:0}
.lacc-live.morph{position:absolute;width:100%;mix-blend-mode:multiply}
.lacc-edge{position:fixed;top:0;height:100vh;display:block;mix-blend-mode:multiply}
.lacc-bg{position:fixed;top:0;height:100vh;display:block}
body.acc-under #a-landing > :not(.lsand):not(.lacc-live){position:relative;z-index:1}
body.acc-under #a-landing .land:not(.dark){background:transparent}
body.acc-under #a-landing .lx:not(.lx-bn){background:transparent}
.land.dark ~ .lacc-live,.land.dark ~ * .lacc-live{opacity:0}

/* the line, beside a live mark whose expression is the line's */
.lx-tick{min-height:0;padding:16vh 0 12vh}
.tk2{flex-direction:row;align-items:center;justify-content:center;gap:28px;padding:0 24px;text-align:left}
.tk-mark{position:relative;flex:0 0 auto;width:96px;height:96px}
.tk-mark canvas,.tk-gl{display:block;width:100%;height:100%}
.tk-words{position:relative;width:min(520px,62vw);height:96px}
.tk2 .tk-i{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;opacity:0;transform:translateY(10px);
  transition:opacity .24s ease-out,transform .24s ease-out}
.tk2 .tk-i.on{opacity:1;transform:none}
.tk2 .tk-i.out{opacity:0;transform:translateY(-10px)}
.tk2 .tk-i b{font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1.02;white-space:nowrap}
.tk2 .tk-i span{font-size:15px;color:var(--muted-foreground)}
@media(max-width:640px){.tk2{gap:16px}.tk-mark{width:64px;height:64px}.tk-words{height:84px}.tk2 .tk-i b{font-size:28px;white-space:normal}}

/* the questions, answered in the open: two columns, no accordion */
.lx-faq{min-height:0;display:block;padding:8vh 24px 10vh}
.lfq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;max-width:900px;margin:0 auto}
.lfq-i h3{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.lfq-i p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted-foreground)}
@media(max-width:760px){.lfq{grid-template-columns:1fr;gap:28px}}

/* the download, five layouts; one rhythm: 12 between what belongs together, 32 between groups */
.lx-get{min-height:0;display:block;padding:14vh 24px 56px}
.lg{max-width:980px;margin:0 auto;position:relative}
.lg-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.lg-meta,.lg-beta{font-size:12.5px;line-height:1.5;color:var(--muted-foreground)}
.lg-beta{max-width:52ch;color:var(--faint)}
.lg-h{font-size:clamp(30px,3.4vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.lg-xl{font-size:clamp(52px,7.6vw,112px);font-weight:500;letter-spacing:-.045em;line-height:.98}
.lg-sub{font-size:16px;color:var(--muted-foreground)}
.lg .lmaker{margin-top:0}
.lg-stack{display:flex;flex-direction:column;align-items:center;gap:32px}
.lg-split{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.lg-split .lg-in{align-items:flex-start;text-align:left}
.lg-r{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lg-r .lmaker{margin-top:20px}
.lg-statement{display:flex;flex-direction:column;align-items:center;gap:40px}
.lg-statement .lg-in{gap:18px}
.lg-statement .lg-in .btn{margin-top:10px}
.lg-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px}
.lg-bar{display:flex;flex-direction:column;align-items:center;gap:28px}
.lg-strip{width:100%;display:flex;align-items:center;gap:20px;padding:14px 14px 14px 22px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border)}
.lg-strip .lg-meta{flex:1;text-align:left}
.lg-name{font-size:15px;font-weight:600;letter-spacing:-.02em}
.lg-frame{display:flex;flex-direction:column;align-items:center;gap:32px;min-height:78vh;justify-content:center;max-width:none;margin:-14vh -24px -56px;padding:14vh 24px 56px}
.lg-glass{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease-out}
.lg-glass.on{opacity:1}
.lg-frame .lg-in,.lg-frame .lmaker{position:relative}
.lg-frame .lmaker{background:#fff}
@media(max-width:760px){.lg-split{grid-template-columns:1fr}.lg-row{flex-direction:column}.lg-strip{flex-wrap:wrap;border-radius:18px}}

/* the sandbox, in the OS only: accents and footer */
.lsand{position:fixed;left:calc(var(--rail,0px) + 216px);bottom:14px;z-index:20;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--border),0 8px 24px rgba(10,10,10,.08);font-size:12px;max-width:min(560px,60vw)}
.lsand-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.lsand-row span{width:56px;color:var(--faint)}
.lsand button{padding:4px 10px;border-radius:999px;color:var(--muted-foreground);transition:background .15s ease-out,color .15s ease-out}
.lsand button:hover{background:var(--muted);color:var(--foreground)}
.lsand button.on{background:var(--foreground);color:#fff}
.lsand-note{color:var(--muted-foreground);line-height:1.4;padding-left:60px}
#a-landing:not(.on) .lsand{display:none}

/* ── landing, fourth pass (10-20): the questions as an accordion ── */
/* one clean column, centred (his note, 10-20: the split layout didn't work) */
.lfq3{max-width:680px;margin:0 auto}
.lfq3-list details{border-top:1px solid var(--border)}
.lfq3-list details:last-child{border-bottom:1px solid var(--border)}
.lfq3-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;
  font-size:17px;font-weight:500;letter-spacing:-.01em;transition:color .2s ease-out}
.lfq3-list summary::-webkit-details-marker{display:none}
.lfq3-list summary:hover{color:var(--muted-foreground)}
.lfq3-list summary i{position:relative;flex:0 0 auto;width:12px;height:12px;transition:transform .25s ease-out}
.lfq3-list summary i::before,.lfq3-list summary i::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1.5px;margin-top:-.75px;border-radius:1px;background:var(--muted-foreground)}
.lfq3-list summary i::after{transform:rotate(90deg)}
.lfq3-list details[open] summary i{transform:rotate(45deg)}
.lfq3-list details p{padding:0 0 22px;font-size:15px;line-height:1.6;color:var(--muted-foreground);max-width:58ch}
@supports (interpolate-size: allow-keywords){
  .lfq3-list{interpolate-size:allow-keywords}
  .lfq3-list details::details-content{height:0;overflow:clip;transition:height .25s ease-out,content-visibility .25s ease-out allow-discrete}
  .lfq3-list details[open]::details-content{height:auto}
}

/* 14 · Distribute */
.dsub{color:var(--muted-foreground);margin:6px 0 20px;max-width:68ch}
.block h2 + .dgrid,.block h2 + .steps,.block h2 + #dPosts,.block h2 + #dAmp{margin-top:20px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dgrid{display:grid;gap:20px;align-items:start}
.dgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.dgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.dcard{display:flex;flex-direction:column;gap:10px}
.dcard p{color:var(--muted-foreground);font-size:14px}
.dcard .btn{align-self:flex-start}
.dvid{width:100%;border-radius:10px;overflow:hidden;background:var(--muted);border:1px solid var(--border);max-height:520px}
.dvid video{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.dempty{display:grid;place-items:center;color:var(--faint);font-size:12px}
.dmeta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dmeta b{font-weight:500}
.dmeta em,.post header em{font-style:normal;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;border:1px solid var(--border-strong);color:var(--muted-foreground);white-space:nowrap;font-variant-numeric:tabular-nums}
.dmeta em.on{background:var(--foreground);color:#fff;border-color:var(--foreground)}
.dnotes{margin:0 0 20px;color:var(--muted-foreground);font-size:14px}
.dnotes summary{cursor:pointer;color:var(--foreground);font-weight:500}
.dnotes ul{margin:10px 0 0 18px;display:grid;gap:6px;max-width:80ch}
.dposts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.post{border:1px solid var(--border);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
.post header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post header b{font-weight:500}
.post header em{margin-left:auto}
.post .chip{font-size:12px;color:var(--muted-foreground);background:var(--muted);border-radius:999px;padding:2px 9px}
.post h3{font-size:16px;font-weight:500}
.ptext{white-space:pre-wrap;font-size:15px;line-height:1.5}
.preply{white-space:pre-wrap;font-size:14px;color:var(--muted-foreground);border-left:2px solid var(--border-strong);padding-left:12px}
.preply span{display:block;font-size:12px;color:var(--faint);margin-bottom:2px}
.post footer{display:flex;gap:8px;margin-top:auto}
#dAmp a{color:var(--muted-foreground);font-size:14px}
@media (max-width:900px){.dgrid.three,.dgrid.four,.dposts{grid-template-columns:minmax(0,1fr)}}

/* ── landing, fifth pass (10-20): the questions as first made, at a fixed width; room under the download ── */
.lx-faq{display:block;min-height:0;padding:12vh 24px}
.lx-faq .lx-c{width:100%;max-width:640px;margin:0 auto;padding:0;align-items:stretch;text-align:left;gap:0}
.lx-faq .label{text-align:center;margin-bottom:16px}
.lx-get{padding-bottom:34vh}
/* the repo, beside who made it: GitHub's mark and an invitation, the stars once there are enough to say something */
.lgit{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--foreground);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.lgit .logo{width:14px;height:14px}
.lgit:hover span{text-decoration:underline;text-underline-offset:3px}
.land.holding .lgit{opacity:0;transition:opacity .18s ease-out}
@media(max-width:640px){.lgit span{display:none}}
/* over the glass the bar is a difference blend: the link takes the complement, as the name beside it does */
.land.on-glass .lgit{color:#f5f5f5}
.land.on-glass .lgit .logo{filter:invert(1)}