/* Claude Meter — base: reset, type, layout, global chrome (band, CTA, menu, banner, cursor, intro).
   Shared; owned by the architect. Sections scope everything under .s--<id>. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;interpolate-size:allow-keywords;scroll-behavior:auto;
  scrollbar-gutter:stable}   /* classic (Windows) scrollbars: locking scroll for a dialog, or Lenis stopping, shifts nothing sideways */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[role="list"],ol[role="list"],.list-reset{list-style:none;padding:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
[hidden]{display:none!important}
::selection{background:var(--teal);color:var(--ink)}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- page ---------- */
html{background:var(--black)}
body{
  min-height:100svh;background:var(--bg);color:var(--fg-text);
  font:400 var(--t-body)/var(--lh-body) var(--f-display);font-stretch:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis:none;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* night backdrop: a fixed layer whose opacity fades (composited), instead of animating body colours */
body::before{content:"";position:fixed;inset:0;background:var(--night);pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity 400ms var(--ease-edit),visibility 0s 400ms}
html[data-night] body::before{opacity:1;visibility:visible;transition:opacity 400ms var(--ease-edit)}
main{display:block;overflow-x:clip} /* islands reserve their pinned size off-canvas; never let that scroll the page sideways */

/* grain: static, never animated */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px;opacity:.06;mix-blend-mode:multiply;
}
html[data-night] body::after{opacity:.08;mix-blend-mode:screen}

/* ---------- type ---------- */
.t-wall{font:900 var(--t-wall)/var(--lh-wall) var(--f-display);font-stretch:150%;letter-spacing:var(--tr-wall)}
.t-mark{font:900 var(--t-mark)/var(--lh-mark) var(--f-display);font-stretch:120%;letter-spacing:var(--tr-mark)}
.t-display{font:560 var(--t-display)/var(--lh-display) var(--f-display);font-stretch:75%;letter-spacing:var(--tr-display)}
.t-h2,.s h2{font:780 var(--t-h2)/var(--lh-h2) var(--f-display);font-stretch:78%;letter-spacing:var(--tr-h2);text-wrap:balance}
.t-h3,.s h3{font:680 var(--t-h3)/var(--lh-h3) var(--f-display);font-stretch:90%;letter-spacing:var(--tr-h3);text-wrap:balance}
.t-lede{font:420 var(--t-lede)/var(--lh-lede) var(--f-display);font-stretch:96%;max-width:36ch;text-wrap:pretty}
.t-body{font:400 var(--t-body)/var(--lh-body) var(--f-display);font-stretch:100%;max-width:60ch;text-wrap:pretty}
.t-label{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.t-data{font:400 var(--t-data)/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* the one serif-italic word per headline */
.serif,h1 em,h2 em,h3 em,.t-display em,.t-h2 em,.t-h3 em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;font-stretch:100%;
  font-size:1.08em;letter-spacing:-.01em;position:relative;top:.03em;
}
/* highlighter mark: add data-reveal="mark" to animate it in */
.mark{position:relative;isolation:isolate;white-space:nowrap}
.mark::after{content:"";position:absolute;z-index:-1;left:-.08em;right:-.08em;bottom:.06em;height:.42em;background:var(--hl-teal);transform:scaleX(var(--mark,1));transform-origin:0 50%}
.mark--amber::after{background:var(--hl-amber)}
/* hand-drawn ink */
.ink,.ink path,.ink line,.ink polyline,.ink circle,.ink ellipse{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ink .ink-fill{fill:currentColor;stroke:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
@media (max-width:767px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.grid>*{grid-column:1/-1}}
.s{position:relative;padding-block:var(--section-pad)}
/* main.js marks offscreen sections: their CSS loops are dropped, not just paused (a paused animation
   still holds a compositor layer). The stage's own loops are class-gated by stage.js and its hero
   reveal is one-shot, so it is left alone (dropping it would replay the reveal). */
.s.is-off:not(.s--stage) *,.s.is-off:not(.s--stage) *::before,.s.is-off:not(.s--stage) *::after{animation-name:none!important}
.s .pin{position:relative}
/* lib/pin.js's own pin-spacer: ScrollTrigger copies the pin's display onto it, and a flex spacer would
   shrink-wrap the pin (it measures the pin live, already inside). Blocks are what sections stack. */
.pin-own{display:block!important}
/* running head: <div class="wrap"><p class="rh"><span>§02 — THE WALL</span><span class="rh__datum">…</span></p></div> */
.rh{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-top:12px;border-top:1px solid var(--rule-c);
  font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--fg-text-2)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;vertical-align:middle}
.dot--teal{background:var(--teal)}.dot--lav{background:var(--lav)}.dot--amber{background:var(--amber)}.dot--red{background:var(--red)}

/* ---------- a11y ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus{outline:none}
/* two-tone ring: the ink outline carries it on paper (teal alone is 1.7:1 there), the teal band on night */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 4px var(--teal);border-radius:4px}
.skip{position:fixed;left:12px;top:-100px;z-index:calc(var(--z-menu) + 10);padding:10px 16px;border-radius:var(--r-pill);
  background:var(--fg);color:var(--ink);font:650 14px/1 var(--f-display);text-decoration:none;transition:top .2s var(--ease-settle)}
.skip:focus-visible{top:calc(var(--band-h) + 8px)}

/* ---------- the band (the Mac's menu bar) ---------- */
.band{position:fixed;inset:0 0 auto;height:var(--band-h);z-index:var(--z-band);color:#fff;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:max(clamp(10px,1.4vw,18px),env(safe-area-inset-left)) max(clamp(10px,1.4vw,18px),env(safe-area-inset-right));
  font:600 14px/1 var(--f-display);font-stretch:100%}
.band::before{content:"";position:absolute;inset:0;background:var(--black);z-index:-1}
.band__left,.band__right{display:flex;align-items:center;gap:2px;min-width:0}
.band__right{justify-content:flex-end;gap:10px}
.band__brand,.band__link{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 8px;border-radius:4px;text-decoration:none;white-space:nowrap;color:#fff}
.band__brand{font-weight:760}
.band__brand img{width:18px;height:18px}
.band__brand:hover,.band__link:hover,.band__brand:focus-visible,.band__link:focus-visible{background:rgb(255 255 255/.12)}
.band__notch{position:relative;width:calc(277px * var(--nav-scale,1.25));height:var(--band-h)}
.band__notch .island{--nav-z:var(--z-nav)}
.band__notch .nav-island{position:absolute;inset:0}
.band__status{font:500 11px/1 var(--f-ui);font-variant-numeric:tabular-nums;white-space:pre}
.st--teal{color:var(--teal)}.st--lav{color:var(--lav)}.st--red{color:var(--red);font-weight:700}
.band__clock{font:400 13px/1 var(--f-mono);color:var(--fg-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.band__dl{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 9px;border-radius:var(--r-pill);background:var(--fg);color:var(--ink);
  font:650 13px/1 var(--f-display);text-decoration:none;white-space:nowrap}
.band__dl svg{width:14px;height:14px}
.band__dl .ring-val{stroke-dasharray:100;stroke-dashoffset:54;transition:stroke-dashoffset .5s var(--ease-settle)}
.band__dl:hover .ring-val,.band__dl:focus-visible .ring-val{stroke-dashoffset:0}
.band__dl-icon{display:none}
/* GitHub star: a menu-title item, with the live count (lib/signup.js; hidden until known, never "0") */
.band__gh{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:4px;color:#fff;text-decoration:none;white-space:nowrap}
.band__gh svg{width:15px;height:15px}
.band__gh:hover,.band__gh:focus-visible{background:rgb(255 255 255/.12)}
.band__gh-n{min-width:calc(1ch + 7px);margin-left:1px;padding-left:7px;border-left:1px solid rgb(255 255 255/.22);font:500 12px/1 var(--f-mono);color:var(--fg-2);font-variant-numeric:tabular-nums}
/* Windows visitors: the band's pill becomes the waitlist (html[data-os] is set before first paint) */
.band__win{display:none}
.band__win-dot{width:12px;height:12px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}   /* the waitlist's dashed clock ring (dashed = forecast), not a green "live" dot */
.band__win-dot circle{stroke-dasharray:5.5 7}
html[data-os="windows"] .band__win{display:inline-flex;padding-left:11px}
html[data-os="windows"] .band__mac{display:none}
.band__caption{position:fixed;top:calc(var(--band-h) + 10px);left:50%;transform:translateX(-50%);z-index:var(--z-band);
  font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--fg-2);background:var(--black);padding:7px 12px;border-radius:var(--r-pill);
  opacity:0;pointer-events:none;white-space:nowrap} /* a HUD pill: it lands over whatever section is below the band */
.band__caption i{font-style:normal;margin-left:10px}
.band__caption i::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:currentColor}
.band__caption .c-teal{color:var(--teal)}.band__caption .c-lav{color:var(--lav)}
/* the nav island reads as an island on the black band: a lifted fill and its rim; the housing stays pure black */
.nav-island .isl-fill{fill:#0D0D0E}
.nav-island .island[data-state="collapsed"] .isl-rim{opacity:1}
@media (max-width:1279px){.band__link{display:none}} /* the nav island's pinned table is the TOC here */
@media (max-width:1023px){.band__clock{display:none}}
@media (max-width:767px){
  .band__brand span,.band__link{display:none}
  .band__dl{padding:0;width:32px;justify-content:center}
  .band__dl-label{display:none}
  .band__gh{display:none}   /* no room beside the phone island; the star lives in the dialogs and sections */
  /* phones: the caption rides at the bottom, clear of the running heads under the band */
  .band__caption{top:auto;bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media (max-width:359px){.band__caption{padding:7px 10px;letter-spacing:.05em}.band__caption .c-lav{display:none}}   /* fits the 16px gutters at 320 */
/* phone TOC (lib/nav.js): the island is display-only there; this button opens the sheet under the band */
.nav-toc-btn{position:absolute;inset:0 -8px -6px;z-index:calc(var(--z-nav) + 1);border-radius:0 0 16px 16px;-webkit-tap-highlight-color:transparent}
.nav-toc{position:fixed;z-index:var(--z-nav);top:calc(var(--band-h) - 1px);
  left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));
  max-height:calc(100svh - var(--band-h) - 16px);overflow:auto;overscroll-behavior:contain;
  padding:10px 18px 18px;border-radius:0 0 24px 24px;background:var(--black);color:var(--fg);box-shadow:var(--sh-island)}
.nav-toc__hd{display:flex;justify-content:space-between;padding:6px 0 10px;border-bottom:1px solid var(--rule-night);
  font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);font-variant-numeric:tabular-nums}
.nav-toc__row{display:grid;grid-template-columns:2.9em minmax(0,1fr) clamp(28px,14vw,64px) 3.1em;align-items:center;gap:10px;min-height:48px;
  border-bottom:1px solid var(--rule-night);color:var(--fg);text-decoration:none;font:600 17px/1.2 var(--f-display);font-stretch:96%}
.nav-toc__n,.nav-toc__v{font:500 13px/1 var(--f-mono);color:var(--fg-2);font-variant-numeric:tabular-nums}
.nav-toc__lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toc__v{text-align:right}
.nav-toc__bar{position:relative;height:4px;border-radius:99px;background:var(--track);overflow:hidden}
.nav-toc__bar i{position:absolute;inset:0;border-radius:inherit;background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.nav-toc__note{margin-top:14px;font:400 14px/1.4 var(--f-display);color:var(--fg-2)}
.nav-toc__dl{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;border-radius:var(--r-pill);
  background:var(--fg);color:var(--ink);font:700 16px/1 var(--f-display);text-decoration:none}

/* screen corners: the viewport reads as a display's top corners */
.corner{position:fixed;top:var(--band-h);width:18px;height:18px;z-index:var(--z-band);pointer-events:none}
.corner--l{left:env(safe-area-inset-left);background:radial-gradient(circle at 100% 100%,transparent 17.5px,var(--black) 18px)}
.corner--r{right:env(safe-area-inset-right);background:radial-gradient(circle at 0 100%,transparent 17.5px,var(--black) 18px)}

/* ---------- cursor tag ---------- */
.cursor-tag{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;height:22px;padding:0 10px;border-radius:11px;
  background:var(--black);color:#fff;font:500 11px/22px var(--f-mono);white-space:nowrap;overflow:hidden;opacity:0;
  clip-path:inset(0 50% 0 50% round 11px);will-change:transform}
.cursor-tag__txt{display:block}

/* ---------- roller ---------- */
.roller{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.roller__vis{display:inline-flex}
.roller__slot{display:inline-grid;overflow:visible}
.roller__slot>*{grid-area:1/1}

/* ---------- CTA: an island that opens ---------- */
.cta-hang{border-top:1px solid var(--rule);display:flex;padding-bottom:calc(var(--cta-open,30px) + 4px)}
.cta-hang--night,[data-night] .cta-hang,.s--stage .cta-hang{border-top-color:var(--rule-night)}
.cta{position:relative;display:block;width:var(--cta-w,272px);height:var(--cta-h0,56px);color:#fff;text-decoration:none;flex:none;
  -webkit-tap-highlight-color:transparent;border-radius:0 0 22px 22px}
/* focus rides the notch itself (cta.js draws .cta__foc): teal, then ink outside it, like the global ring */
.cta:focus-visible,.cta-ghost:focus-visible{outline:none;box-shadow:none}
.cta__foc{fill:none;stroke:var(--teal);stroke-width:3;opacity:0;pointer-events:none}
.cta__foc--ink{stroke:var(--ink);stroke-width:2}
:is(.cta,.cta-ghost):focus-visible .cta__foc{opacity:1}
.cta__shape{position:absolute;left:-2px;top:0;overflow:visible;pointer-events:none}
.cta__shape path:first-of-type{fill:var(--black)}
.cta__shape .rim-hot{fill:none;stroke-width:1;opacity:0}
.cta__row{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:var(--cta-h0,56px)}
.cta__label{font:700 17px/1 var(--f-display);font-stretch:92%;white-space:nowrap}
.cta--l .cta__label{font-size:22px}
.cta--xl .cta__label{font-size:clamp(22px,2vw,27px)}
.cta--xl .cta__ring{width:26px;height:26px}
.cta--xl .cta__meta{font-size:clamp(10.5px,3.1vw,13px);height:32px;padding-inline:20px}
.cta--open{height:var(--cta-h1,110px)}   /* the finale's island: always open, the meta lives inside it */
.cta-hang:has(.cta--open){padding-bottom:4px}
.cta__ring{width:22px;height:22px;flex:none}
.cta__ring svg{width:100%;height:100%;overflow:visible}
.cta__ring circle{fill:none;stroke-width:2.5}
.cta__ring .trk{stroke:rgb(255 255 255/.2)}
.cta__ring .val{stroke:var(--teal);stroke-dasharray:100;stroke-dashoffset:54;stroke-linecap:round;transform:rotate(-90deg);transform-origin:12px 12px}
.cta__ring .arrow{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta.is-hot .cta__ring .val{stroke:var(--red)}
.cta.is-hot .cta__label{font-weight:800}
.cta__meta{position:absolute;left:0;right:0;top:calc(var(--cta-h0,56px) - 8px);height:30px;display:flex;align-items:center;justify-content:center;
  font:400 12px/1 var(--f-mono);color:var(--fg-2);white-space:nowrap;transform-origin:50% 0;font-variant-numeric:tabular-nums}
.cta--night{color:var(--ink)}
.cta--night .cta__shape path:first-of-type{fill:var(--fg)}
.cta--night .cta__ring .trk{stroke:rgb(17 19 17/.2)}
.cta--night .cta__meta{color:var(--ink-2)}
.cta--night .cta__ring .val{stroke:var(--teal-ink)}
.cta.is-static{height:var(--cta-h1,86px)}
@media (max-width:767px){.cta-hang--full .cta{width:100%}}
/* requirements line under every CTA */
.req{margin-top:14px;font:400 13px/1.55 var(--f-mono);color:var(--fg-text-2);font-variant-numeric:tabular-nums}
.cta-hang--night + .req,[data-night] .req{color:var(--fg-2)}

/* ---------- CTA ghost: Windows. The same notch, dashed: on this site dashed means forecast ("coming").
   One label everywhere: "Windows · join the waitlist" (the " · join the" drops where the tab is narrow).
   Hover, keyboard focus or a Windows visitor (html[data-os]) make the forecast real: solid. ---------- */
.cta-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px 3px;flex:none;
  color:var(--fg-text);border-radius:0 0 20px 20px;-webkit-tap-highlight-color:transparent}
.cta-ghost__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cta-ghost__shape path:first-of-type{fill:rgb(0 0 0/0);stroke:var(--fg-text-2);stroke-width:1.25;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;
  transition:fill .3s var(--ease-settle),stroke .3s var(--ease-settle),stroke-dasharray .3s var(--ease-settle)}
.cta-ghost__row{position:relative;display:flex;align-items:center;gap:9px;transition:color .3s var(--ease-settle),scale var(--d-micro) var(--ease-settle)}
.cta-ghost__label{font:700 15px/1 var(--f-display);font-stretch:92%;white-space:nowrap}
.cta-ghost__ring{width:18px;height:18px;flex:none}
.cta-ghost__ring svg{width:100%;height:100%;overflow:visible;transition:rotate .6s var(--ease-settle)}
.cta-ghost__ring circle{fill:none;stroke:currentColor;stroke-width:1.8;stroke-dasharray:5.5 7}
.cta-ghost__ring path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(.cta-ghost:hover,.cta-ghost:focus-visible,html[data-os="windows"] .cta-ghost) .cta-ghost__shape path:first-of-type{fill:var(--fg-text);stroke:var(--fg-text);stroke-dasharray:7 0}
:is(.cta-ghost:hover,.cta-ghost:focus-visible,html[data-os="windows"] .cta-ghost) .cta-ghost__row{color:var(--bg)}
.cta-ghost:is(:hover,:focus-visible) .cta-ghost__ring svg{rotate:90deg}
html[data-os="windows"] .cta-ghost__ring circle{stroke:var(--teal);stroke-dasharray:none}
.cta-ghost:active .cta-ghost__row{scale:.97}
html:not([data-motion]) .cta-ghost{display:none}   /* it opens a form: needs JS */
/* Under a primary tab in the same .cta-hang: it hangs from the tab's flat bottom and rides its peek
   (cta.js writes --cta-w/-h/-rt/-rb on the hang). Anywhere else it hangs from its own hairline. */
.cta-hang:has(> .cta ~ .cta-ghost){position:relative;isolation:isolate;padding-bottom:calc(var(--cta-open,30px) + 56px)}
.cta-hang > .cta{z-index:1}
.cta-hang > .cta ~ .cta-ghost{position:absolute;z-index:0;top:calc(var(--cta-h,56px) - 4px);left:calc(var(--cta-w,272px) / 2);translate:-50% 0;
  width:calc(var(--cta-w,272px) - 2 * var(--cta-rt,10px) - 2 * var(--cta-rb,22px) + 24px);height:52px;padding:4px 16px 3px;container-type:inline-size}
.cta-hang:not(:has(> .cta)){padding-bottom:0}
@container (max-width:250px){.cta-ghost__x{display:none}}

/* ---------- GitHub chip: octocat + label + the live star count (cta.js; hidden until known, never "0").
   Paper by default; it follows the contextual tokens into night sections; .gh-chip--night outside them. ---------- */
.gh-chip{--c:var(--fg-text);--rc:var(--rule-c);display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 15px;flex:none;
  border:1px solid var(--rc);border-radius:var(--r-pill);color:var(--c);text-decoration:none;white-space:nowrap;
  font:650 16px/1 var(--f-display);font-stretch:92%;letter-spacing:-.005em;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--d-ui) var(--ease-settle),background var(--d-ui) var(--ease-settle),scale var(--d-micro) var(--ease-settle)}
.gh-chip__mark{width:17px;height:17px;flex:none;transition:rotate var(--spring-play-dur) var(--spring-play)}
.gh-chip__n{align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:calc(2ch + 21px);margin:8px -8px 8px 3px;padding:0 10px;
  border-left:1px solid var(--rc);font:500 13px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.gh-chip:is(:hover,:focus-visible){border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,transparent)}
.gh-chip:is(:hover,:focus-visible) .gh-chip__mark{rotate:-14deg}
.gh-chip:active{scale:.97}
.gh-chip--night{--c:var(--fg);--rc:rgb(236 237 232/.2)}
.req .seal{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--teal);color:var(--ink);font-size:9px;margin-right:4px;vertical-align:-1px}

/* ---------- context menu (macOS replica) ---------- */
.cm-menu{position:fixed;z-index:var(--z-menu);width:260px;padding:5px;border-radius:var(--r-menu);
  background:rgb(40 40 42/.82);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgb(255 255 255/.12);box-shadow:var(--sh-float);color:var(--fg);font:400 13px/1 var(--f-ui);user-select:none}
.cm-menu--sub{position:absolute;width:180px}
.cm-menu__item{display:flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 4px;border-radius:5px;color:inherit;text-decoration:none;cursor:default;white-space:nowrap;outline:none}
.cm-menu__item:focus,.cm-menu__item[aria-expanded="true"]{background:rgb(176 168 237/.28)}
.cm-menu__item[aria-disabled="true"]{color:rgb(236 237 232/.55);background:none}
.cm-menu__check{width:16px;text-align:center;font-size:12px;flex:none}
.cm-menu__label{flex:1;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums}
.cm-menu__detail{color:var(--fg-2);font-variant-numeric:tabular-nums}
.cm-menu__arrow{font-size:11px;opacity:.85}
.cm-menu__sep{height:1px;margin:5px 8px;background:rgb(255 255 255/.1)}
.cm-about{position:fixed;left:50%;top:30%;translate:-50% 0;z-index:var(--z-menu);width:260px;padding:22px 20px 16px;border-radius:12px;text-align:center;
  background:rgb(40 40 42/.9);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);border:1px solid rgb(255 255 255/.12);
  box-shadow:var(--sh-float);color:var(--fg);font:400 12px/1.4 var(--f-ui)}
.cm-about img{margin:0 auto 10px}
.cm-about__name{font-weight:700;font-size:14px}
.cm-about__ver,.cm-about__by{color:var(--fg-2)}
.cm-about__ok{margin-top:14px;padding:4px 18px;border-radius:6px;background:rgb(255 255 255/.14);font:500 13px/1.4 var(--f-ui)}

/* ---------- macOS banner + toast ---------- */
.cm-banners{position:absolute;top:12px;right:12px;z-index:var(--z-menu);display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100% - 24px));pointer-events:none}
.cm-banners.is-fixed{position:fixed;top:calc(var(--band-h) + 12px)}
.cm-banner{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-banner);pointer-events:auto;
  background:rgb(30 30 32/.9);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6); /* ≥5:1 for the grey body even over paper */
  border:1px solid rgb(255 255 255/.1);box-shadow:var(--sh-float);color:var(--fg);font:400 13px/1.3 var(--f-ui);touch-action:pan-y}
.cm-banner__icon{width:32px;height:32px;flex:none}
.cm-banner__text{flex:1;min-width:0}
.cm-banner__meta{display:flex;justify-content:space-between;font-size:11px;color:var(--fg-2);margin-bottom:2px;letter-spacing:.02em}
.cm-banner__title{font-weight:600}
.cm-banner__body{color:var(--fg-2)}
.cm-banner__close{position:absolute;left:-7px;top:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgb(60 60 62);border:1px solid rgb(255 255 255/.14);color:var(--fg);font:500 13px/1 var(--f-ui);opacity:0;transition:opacity .15s}
.cm-banner__close::before{content:"";position:absolute;inset:-12px} /* 44px hit area */
.cm-banner:hover .cm-banner__close,.cm-banner:focus-within .cm-banner__close,.cm-banner__close:focus-visible{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.cm-banner__close{opacity:1}}
.cm-toast{position:absolute;left:50%;top:12px;translate:-50% 0;z-index:var(--z-menu);padding:8px 14px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);font:500 12px/1.2 var(--f-mono);white-space:nowrap;box-shadow:var(--sh-float)}
.cm-toast.is-fixed{position:fixed;top:calc(var(--band-h) + 44px)}

/* ---------- intro (≤1.2s, once per session) ---------- */
#intro{display:none;position:fixed;inset:0;z-index:var(--z-intro);background:var(--night);pointer-events:auto}
html.is-intro #intro{display:block}
html.is-intro{overflow:hidden}
#intro .intro__housing{position:absolute;left:50%;top:0;translate:-50% 0;width:7px;height:7px;background:var(--black);border-radius:0 0 20px 20px;
  box-shadow:0 1px 0 rgb(255 255 255/.16),0 0 0 1px rgb(255 255 255/.04)}
#intro .intro__lens{position:absolute;left:50%;top:calc(var(--band-h) / 2);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#0A0B10;
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);overflow:hidden}
#intro .intro__lens::after{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgb(90 110 255/.55),transparent 55%)}
#intro .intro__glint{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.7) 50%,transparent 70%);translate:-120% 0}

/* ---------- page-wide pause (lib/loop.js, WCAG 2.2.2): html[data-paused] stops every CSS loop; JS loops stop in
   whileVisible. The hero's one-shot entrance still plays (it reveals content), and retires on #stage.is-entered. ---------- */
html[data-paused] *,html[data-paused] *::before,html[data-paused] *::after{animation-play-state:paused!important}
html[data-paused] #stage:not(.is-entered) *,html[data-paused] .yr-mi.is-blink{animation-play-state:running!important}   /* one-shots: the entrance, a menu row's pick blink */
/* the footer's twin of §03's Pause: a footer link that is a button */
.fin-foot__pause{position:relative;padding:4px 0;color:var(--fg);font:inherit;white-space:nowrap}
.fin-foot__pause::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-edit)}
.fin-foot__pause:is(:hover,:focus-visible)::after{transform:scaleX(1)}
html:not([data-motion="full"]) li:has(> .fin-foot__pause){display:none}

/* ---------- reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}