/* Mindbaton's website, in the app's own "Clean dark" system (DESIGN.md): Radix sand greys, Geist, flat panels on
   hairlines, one warm aurora from the top edge. Tokens are the app's (index.html :root), unchanged. */
@font-face { font-family: "Geist"; src: url(fonts/Geist-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #111110; --panel: #191918; --panel-2: #222221; --panel-3: #2a2a28;
  --line: rgba(255, 253, 243, .07); --line-2: rgba(255, 253, 243, .11); --line-3: rgba(255, 253, 243, .19);
  --fg: #eeeeec; --fg-2: #b5b3ad; --fg-3: #908e87;
  --brand: #eeeeec; --brand-hi: #fff; --brand-ink: #111110;
  --glass: rgba(255, 253, 243, .06); --glass-hi: rgba(255, 253, 243, .11); --glass-rim: rgba(255, 253, 243, .14);
  --ok: #3dd68c; --danger: #ff8fa3; --danger-soft: rgba(233, 61, 130, .14);
  /* the aurora is one light behind the top edge that cools as it spreads: a coral core, crimson, rose, wine underneath,
     and a cold night glow on the far side. Reds, not oranges: dimmed over the dark, red stays wine where orange turns brown. */
  --a1: #ff5a3c; --a2: #f5325e; --a3: #d93a74; --a4: #1c4a6e; --a5: #5c1436;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --r: 10px; --r-sm: 7px; --gut: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  position: relative; overflow-x: clip; font-feature-settings: "ss01"; }
a { color: inherit; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
code, kbd, pre, time { font-family: var(--mono); }
code { font-size: .88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
kbd { font-size: 11.5px; color: var(--fg-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(255, 253, 243, .2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gut); }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* logos: colour marks are images; one-colour marks are masks tinted with the text colour */
.lg { width: 16px; height: 16px; flex: none; display: inline-block; }
.lg.m { background: var(--fg); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.lg.lg-lg { width: 22px; height: 22px; }
.wordmark { display: block; width: 110px; height: 24px; background: var(--fg);
  -webkit-mask: url(brand/wordmark.svg) left center / contain no-repeat; mask: url(brand/wordmark.svg) left center / contain no-repeat; }

/* the aurora: five glows behind the top edge, read as one light. Each fades on an eased curve that reaches zero flat (no
   disc, no rim), and drifts on four sine waves of unrelated lengths (across, down, size, strength), so it never stops,
   never ping-pongs and never repeats. It is dimmest at the very top and brightest just under the top bar, then fades out
   flat, so the small grey text in the bar and the hero keeps 4.5:1 wherever it sits. Transform and opacity only; paused
   off screen (.off, site.js). */
.aurora { position: absolute; left: 0; right: 0; top: 0; height: 820px; overflow: hidden; pointer-events: none; z-index: 0; opacity: .88;
  -webkit-mask: linear-gradient(rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .62) 5%, rgba(0, 0, 0, .86) 10%, #000 16%, rgba(0, 0, 0, .9) 26%, rgba(0, 0, 0, .7) 39%, rgba(0, 0, 0, .46) 53%, rgba(0, 0, 0, .25) 67%, rgba(0, 0, 0, .1) 81%, rgba(0, 0, 0, .02) 93%, transparent 100%);
  mask: linear-gradient(rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .62) 5%, rgba(0, 0, 0, .86) 10%, #000 16%, rgba(0, 0, 0, .9) 26%, rgba(0, 0, 0, .7) 39%, rgba(0, 0, 0, .46) 53%, rgba(0, 0, 0, .25) 67%, rgba(0, 0, 0, .1) 81%, rgba(0, 0, 0, .02) 93%, transparent 100%);
  animation: dawn 2.2s cubic-bezier(.16, 1, .3, 1); }
@keyframes dawn { from { opacity: 0; transform: translateY(-10%); } }  /* once, on load: the light comes up from behind the edge */
/* the edge itself: a hairline of the same light, brightest over the core */
.aurora::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: .7;
  background: linear-gradient(90deg in oklab, transparent, var(--a1) 16%, var(--a2) 34%, var(--a3) 64%, transparent 94%); }
.aurora i { position: absolute; left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--h) / 2); width: var(--w); height: var(--h);
  border-radius: 50%; mix-blend-mode: screen; opacity: var(--o); will-change: transform, opacity;
  background: radial-gradient(closest-side in oklab, var(--c), color-mix(in oklab, var(--c) 93%, transparent) 14%, color-mix(in oklab, var(--c) 76%, transparent) 28%,
    color-mix(in oklab, var(--c) 54%, transparent) 42%, color-mix(in oklab, var(--c) 33%, transparent) 56%, color-mix(in oklab, var(--c) 16%, transparent) 70%,
    color-mix(in oklab, var(--c) 5%, transparent) 84%, color-mix(in oklab, var(--c) 0%, transparent));
  animation: aur-x, aur-y, aur-s, aur-o; animation-timing-function: cubic-bezier(.37, 0, .63, 1); animation-iteration-count: infinite; animation-direction: alternate;
  animation-duration: var(--t), calc(var(--t) * 1.37), calc(var(--t) * .81), calc(var(--t) * .63); animation-delay: calc(var(--t) * -.3), calc(var(--t) * -.9), calc(var(--t) * -.5), calc(var(--t) * -.2); }
@keyframes aur-x { from { translate: calc(var(--dx) * -1) 0; } to { translate: var(--dx) 0; } }
@keyframes aur-y { from { transform: translateY(-18px) rotate(-5deg); } to { transform: translateY(26px) rotate(6deg); } }
@keyframes aur-s { from { scale: .9; } to { scale: 1.14; } }
@keyframes aur-o { from { opacity: calc(var(--o) * .66); } to { opacity: var(--o); } }
.aurora i:nth-child(1) { --c: var(--a5); --x: 42%; --y: -80px; --w: max(160vw, 1100px); --h: 1200px; --o: .8; --t: 37s; --dx: 4%; }
.aurora i:nth-child(2) { --c: var(--a4); --x: 104%; --y: -40px; --w: max(70vw, 520px); --h: 760px; --o: .5; --t: 31s; --dx: 8%; }
.aurora i:nth-child(3) { --c: var(--a3); --x: 66%; --y: -70px; --w: max(88vw, 640px); --h: 900px; --o: .42; --t: 27s; --dx: 9%; }
.aurora i:nth-child(4) { --c: var(--a2); --x: 30%; --y: -50px; --w: max(76vw, 600px); --h: 800px; --o: .44; --t: 23s; --dx: 10%; }
.aurora i:nth-child(5) { --c: var(--a1); --x: 18%; --y: -30px; --w: max(46vw, 420px); --h: 460px; --o: .38; --t: 17s; --dx: 14%; }
.aurora.off i { animation-play-state: paused; }
/* grain on top stops banding on 8-bit screens */
.aurora::after { content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* top bar, like the app's: clear at the top of the page, so the glow runs unbroken behind it; frosted glass with its
   hairline once the page scrolls under it. Where the scroll timeline isn't supported it is frosted all the time. */
.top { position: sticky; top: 0; z-index: 10; background: rgba(17, 17, 16, .62); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@supports (animation-timeline: scroll()) {
  .top { animation: top-clear linear both; animation-timeline: scroll(); animation-range: 0 96px; }
  @keyframes top-clear { from { background-color: rgba(17, 17, 16, 0); border-bottom-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
}
.top-in { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); height: 60px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--fg); text-decoration: none; }
.brand-baton { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand-baton svg { width: 26px; height: 26px; transform-origin: 50% 85%; }
.brand:hover .brand-baton svg { animation: hop .6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes hop { 0% { transform: none; } 30% { transform: translate(2px, -4px) rotate(6deg); } 62% { transform: translate(-1px, 0) rotate(-2deg); } 100% { transform: none; } }
.wordmark-letters { height: 20px; width: auto; display: block; color: var(--fg); }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--fg-2); font-size: 13.5px; padding: 6px 10px; border-radius: 7px; transition: color .15s, background .15s; }
.nav a:hover { color: var(--fg); background: var(--glass); }
.top-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* For agents / For humans: one quiet button that always names the other reading of the page. Two links, one shown;
   #agent in the address shows the Agent view, so it works without the script. */
.view-sw { position: relative; }
.view-sw::after { content: ""; position: absolute; inset: -8px 0; }  /* a taller target than the 28px it is on phones */
.view-sw.to-human, :root:has(#agent:target) .view-sw.to-agent { display: none; }
:root:has(#agent:target) .view-sw.to-human { display: inline-flex; }
/* handing the page over (site.js starts it): the other reading wipes down over this one; coming back, it wipes up */
:root[data-vt]::view-transition-old(root) { animation: none; }
:root[data-vt]::view-transition-new(root) { animation: wipe-down .6s cubic-bezier(.16, 1, .3, 1) both; }
:root[data-vt="human"]::view-transition-new(root) { animation-name: wipe-up; }
@keyframes wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* buttons: the app's .btn, glass over the aurora; primary is warm white */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px; font-weight: 500; font-size: 13px;
  border: 1px solid var(--glass-rim); background: var(--glass); color: var(--fg); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .35); transition: background .15s, border-color .15s; }
.btn:hover { background: var(--glass-hi); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .35); }
.btn.primary:hover { background: var(--brand-hi); border-color: var(--brand-hi); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--fg-2); }
.btn.ghost:hover { color: var(--fg); background: var(--glass); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn .i { width: 14px; height: 14px; }
.btn.done { color: var(--ok); }
.btn.primary.done { color: var(--brand-ink); }

main, .foot { position: relative; z-index: 1; }

/* hero */
.hero { padding-top: clamp(56px, 10vw, 112px); }
h1 { margin: 0; font-size: clamp(44px, 7.4vw, 84px); line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.lede { margin-top: 24px; max-width: 34em; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.cmd { display: flex; align-items: center; gap: 6px; max-width: 760px; margin-top: 32px; padding: 5px 5px 5px 16px; border-radius: 10px;
  background: rgba(25, 25, 24, .72); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cmd code { flex: 1; min-width: 0; background: none; border: 0; padding: 0; font-size: 13px; color: var(--fg); white-space: nowrap; overflow-x: auto;
  scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 16px; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd.sm { margin-top: 12px; max-width: none; padding: 4px 4px 4px 12px; background: var(--bg); border-color: var(--line); backdrop-filter: none; }
.cmd.sm code { font-size: 12.5px; }
.hero-meta { margin-top: 14px; font-size: 13.5px; color: var(--fg-3); }
.hero-meta a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.hero-meta a:hover { color: var(--fg); }
.hero-with { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; font-size: 13.5px; color: var(--fg-3); }
.hero-with .lg { width: 18px; height: 18px; }
.hero-with a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.hero-with a:hover { color: var(--fg); }
.shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 80px -32px rgba(0, 0, 0, .8), 0 12px 24px -12px rgba(0, 0, 0, .5); }
.hero-shot { margin-top: clamp(48px, 7vw, 80px); }
.note { margin-top: 14px; font-size: 13px; color: var(--fg-3); }
.note a { color: var(--fg-2); text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.note a:hover { color: var(--fg); }

/* sections */
.sec { padding-top: clamp(88px, 11vw, 144px); }
.sec-h { max-width: 640px; margin-bottom: 40px; }
h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.sec-h p { margin-top: 12px; color: var(--fg-2); font-size: 16px; text-wrap: pretty; }
h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
h4 { margin: 0; font-size: 13.5px; font-weight: 600; }

.step { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 72px); align-items: start;
  padding: 48px 0; border-top: 1px solid var(--line); }
.step:last-child { padding-bottom: 0; }
.step-t { padding-top: 6px; }
.step-t p { margin-top: 12px; color: var(--fg-2); max-width: 40ch; text-wrap: pretty; }
.step-t h3 + p { margin-top: 14px; }

/* the app's card, row and chip */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.card-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.card-h p { color: var(--fg-3); font-size: 12.5px; }
.rows { list-style: none; margin: 0; padding: 6px; }
.row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border-radius: var(--r-sm);
  transition: background .15s; }
.row:hover { background: var(--panel-2); }
.row .lg { margin-top: 3px; }
.txt { color: var(--fg); font-size: 14px; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }
.meta .k { color: var(--fg-2); }
.meta .hot { color: var(--danger); }
.row time { font-size: 12px; color: var(--fg-3); padding-top: 2px; white-space: nowrap; }
.model { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--line); font: 11.5px var(--mono); color: var(--fg-2); }
.row.old .txt { color: var(--fg-3); }
.row.old s { text-decoration-color: rgba(233, 61, 130, .6); }

.ask { display: grid; gap: 12px; }
.search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 14px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--line-2); color: var(--fg); font-size: 14px; }
.search .i { color: var(--fg-3); }
.search span { flex: 1; }
.search span::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--fg-2);
  animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.search kbd { font-size: 11px; color: var(--fg-3); border-bottom-width: 1px; }
.answer { background: color-mix(in srgb, var(--fg) 4%, var(--panel)); border-color: var(--line-2); }
.answer .a { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.answer .a .i { width: 18px; height: 18px; color: var(--fg-2); }
.answer .rows { padding-top: 0; }

.baton { display: grid; gap: 12px; }
.pick { border: 1px solid rgba(233, 61, 130, .3); border-radius: 12px; background: var(--panel); padding: 14px; display: grid; gap: 12px; }
.pick-h { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.pick-h .lg { margin-top: 1px; }
.pick-h .txt { font-weight: 500; }
.meter { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono); color: var(--danger); padding-left: 34px; }
.meter i { width: 110px; height: 4px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.meter b { display: block; height: 100%; width: 100%; background: var(--danger); border-radius: 2px; }
.pick-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 34px; }
.pick-a .lab { font-size: 12.5px; color: var(--fg-3); margin-right: 4px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); font-size: 13px; color: var(--fg); white-space: nowrap; }
.chip .desc { color: var(--fg-3); }
.chip .i { width: 15px; height: 15px; color: var(--fg-2); }
.pack { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.pack summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 500; border-radius: var(--r); }
.pack summary::-webkit-details-marker { display: none; }
.pack summary::before { content: ""; width: 6px; height: 6px; border: solid var(--fg-3); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(-45deg);
  transition: transform .15s; align-self: center; margin-right: 2px; }
.pack[open] summary::before { transform: translateY(-3px) rotate(45deg); }
.pack summary span { font-weight: 400; color: var(--fg-3); font-size: 12.5px; }
.pack summary:hover { background: var(--panel-2); }
.pack pre { margin: 0; padding: 14px 16px 18px; border-top: 1px solid var(--line); max-height: 440px; overflow: auto; white-space: pre-wrap;
  font-size: 12px; line-height: 1.6; color: var(--fg-2); overflow-wrap: anywhere; }

/* the app's segmented control, used as tabs */
.segs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.segs button { padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--fg-2); display: inline-flex; gap: 8px; align-items: baseline;
  white-space: nowrap; transition: color .15s, background .15s; }
.segs button:hover { color: var(--fg); }
.segs button[aria-selected="true"] { background: var(--panel-3); color: var(--fg); }
.segs .n { font-size: 11.5px; color: var(--fg-3); }
.tabs { margin-top: 16px; }
.tab { margin: 0; }
.tab figcaption { margin-top: 14px; font-size: 13.5px; color: var(--fg-2); }

/* works with: the app's "kind" rows — a label, then chips */
.kinds { padding: 6px 8px; }
.kind { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 8px; }
.kind + .kind { border-top: 1px solid var(--line); }
.kind-n { font-size: 13.5px; font-weight: 500; padding-top: 4px; display: grid; }
.kind-n span { font-weight: 400; font-size: 12.5px; color: var(--fg-3); }

/* privacy: hairline rows */
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--fg-2); max-width: 62ch; }
.facts dd b { color: var(--fg); font-weight: 500; }

/* install */
.inst-h { padding: 12px; border-bottom: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 8px 20px 4px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 16px 0 16px 44px; }
.steps li + li { border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid;
  place-items: center; font: 500 12px var(--mono); color: var(--fg-2); border: 1px solid var(--line-3); }
.steps p { color: var(--fg-2); padding-top: 2px; }
.inst-f { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 16px 20px; border-top: 1px solid var(--line);
  background: rgba(255, 253, 243, .015); border-radius: 0 0 var(--r) var(--r); }
.inst-f p { color: var(--fg-2); font-size: 14px; }
.inst-f b { color: var(--fg); font-weight: 500; }

/* questions */
.qa details + details { border-top: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;
  font-size: 15px; font-weight: 500; transition: background .15s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 7px; height: 7px; border: solid var(--fg-3); border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.qa details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.qa summary:hover { background: var(--panel-2); }
.qa details:first-child summary { border-radius: var(--r) var(--r) 0 0; }
.qa details:last-child:not([open]) summary { border-radius: 0 0 var(--r) var(--r); }
.qa details p { padding: 0 20px 18px; color: var(--fg-2); max-width: 70ch; }

/* the Agent view: site/llms.txt itself, in a flat panel like the hand-off pack. #agent in the address shows it in place
   of the page's sections; the bar with Copy stays under the top bar while the text scrolls with the page. */
#agent { display: none; }
#agent:target { display: block; }
main:has(#agent:target) > :not(#agent) { display: none; }
.agent-view { padding-top: clamp(32px, 5vw, 56px); }
.agent-pane { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: clip; }
.agent-bar { position: sticky; top: 61px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 12px 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.agent-meta { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--fg-2); }
.agent-meta code { flex: none; }
.agent-actions { display: flex; gap: 8px; }
.agent-code { margin: 0; padding: clamp(20px, 3vw, 32px); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }

/* the close: the same light again, rising from behind the footer's line, and the install command once more. The one
   centred moment on the page. The text sits above the bright band, where it keeps its contrast. */
.end { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(88px, 11vw, 144px); padding: clamp(64px, 9vw, 112px) 0 clamp(190px, 22vw, 280px); text-align: center; }
.aurora-end { top: auto; bottom: 0; height: 620px; scale: 1 -1; opacity: .8; animation: none; }
.end-in { position: relative; z-index: 1; }
.end h2 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -.04em; }
.end p { margin: 14px auto 0; max-width: 46ch; color: var(--fg-2); font-size: 16px; text-wrap: pretty; }
.end .cmd { margin-inline: auto; max-width: 640px; text-align: left; }
.end .hero-meta { font-size: 13.5px; }  /* --fg-2, like the line above it: it sits nearer the light than the hero's does */
.foot.foot-flush { margin-top: 0; }
#agent { padding-bottom: clamp(96px, 12vw, 160px); }

/* footer */
.foot { margin-top: clamp(96px, 12vw, 160px); border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; padding-top: 36px; padding-bottom: 48px; }
.foot-a p { margin-top: 10px; color: var(--fg-2); font-size: 13.5px; }
.foot-l { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; font-size: 13.5px; }
.foot-l a { color: var(--fg-2); text-decoration: none; }
.foot-l a:hover { color: var(--fg); }
.fine { grid-column: 1 / -1; font-size: 12.5px; color: var(--fg-3); max-width: 80ch; }
.seal { grid-column: 1 / -1; justify-self: start; display: block; border-radius: 50%; }  /* the maker's seal, last thing on the page */
.seal img { display: block; }

@media (max-width: 960px) {
  .nav { display: none; }
  .step { grid-template-columns: minmax(0, 1fr); padding: 40px 0; gap: 24px; }
  .step-t p { max-width: 60ch; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .aurora { height: 560px; opacity: .78; }  /* a touch dimmer: the bar's small labels sit straight on it here */
  .shot { width: min(292px, 80%); margin-inline: auto; border-radius: 30px; }
  .hero-with .x { display: none; }  /* six marks and the link fit one line */
  .hero-shot + .note, .tab figcaption { text-align: center; }

  /* Safe area & compact top bar for mobile */
  .top-in {
    height: 54px;
    gap: 10px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .brand { gap: 7px; flex-shrink: 1; min-width: 0; }
  .brand-baton { width: 24px; height: 24px; }
  .brand-baton svg { width: 24px; height: 24px; }
  .wordmark-letters { height: 18px; }
  .top-act { gap: 6px; align-items: center; flex-shrink: 0; }
  .view-sw { font-size: 12px; }
  .gh-t { display: none; }
  .top-act .btn.ghost { height: 28px; padding: 0 7px; }
  .top-act .btn.primary { height: 28px; padding: 0 11px; font-size: 12px; }

  /* Hero & typography */
  .hero { padding-top: clamp(40px, 8vw, 64px); }
  h1 { font-size: clamp(34px, 8.5vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
  .lede { margin-top: 18px; font-size: 15.5px; line-height: 1.5; }
  .hero-g { gap: 36px; }
  .cmd { margin-top: 24px; padding: 4px 4px 4px 12px; }
  .cmd button { height: 36px; }
  .hero-shot { margin-top: clamp(36px, 6vw, 48px); }

  /* Relay & cards */
  .relay { max-width: 100%; width: 100%; }
  .rl-card { padding: 10px 12px; }
  .rl-say span, .rl-ask { max-width: 92%; font-size: 13px; }
  .rl-reply { font-size: 13px; }

  /* Section rhythm */
  .sec { padding-top: clamp(64px, 9vw, 96px); }
  .sec-h { margin-bottom: 28px; }
  h2 { font-size: clamp(24px, 6vw, 32px); }
  .sec-h p { font-size: 15px; margin-top: 8px; }
  h3 { font-size: 19px; }

  /* Interactive items & lists */
  .row { grid-template-columns: 22px minmax(0, 1fr); }
  .row time { display: none; }
  .kind, .facts div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kind-n { display: flex; gap: 8px; align-items: baseline; }
  .pick-a, .meter { padding-left: 0; }
  .inst-f { flex-direction: column; align-items: flex-start; }
  .steps { padding-inline: 16px; }

  /* Tabs: swipeable horizontal scroll on touch */
  .segs[role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px;
  }
  .segs[role="tablist"]::-webkit-scrollbar { display: none; }
  .segs[role="tablist"] button { padding: 6px 12px; min-height: 34px; flex-shrink: 0; }
  .segs .n { display: none; }

  /* Accordions & packs */
  .qa summary { padding: 14px 16px; font-size: 14.5px; }
  .qa details p { padding: 0 16px 16px; font-size: 14px; }
  .pack summary { padding: 12px 14px; font-size: 13px; }
  .pack pre { padding: 12px 14px; font-size: 11.5px; }

  /* Agent view on phones */
  .agent-view { padding-top: 20px; }
  .agent-bar { position: static; padding: 12px 14px; }
  .agent-meta { font-size: 12.5px; line-height: 1.4; }
  .agent-actions { width: 100%; }
  .agent-actions .btn { flex: 1; justify-content: center; height: 36px; }
  .agent-code { padding: 14px 16px; font-size: 12px; line-height: 1.6; }

  /* Footer */
  .foot { margin-top: clamp(64px, 10vw, 112px); }
  .foot-in {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
  .foot-l { justify-content: flex-start; gap: 8px 16px; }
}

@media (max-width: 380px) {
  .top-in { padding-inline: max(10px, env(safe-area-inset-left)); gap: 6px; }
  .wordmark-letters { max-width: 80px; height: 16px; }
  .top-act { gap: 4px; }
  .top-act .btn.primary { padding: 0 8px; font-size: 11.5px; }
}

@media (max-width: 330px) {
  .wordmark-letters { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora, .aurora i, .search span::after { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ── Motion (2026-09-29): the product doing its job, not decoration. Everything below is transform/opacity, plays only
   while it's on screen, and under reduced motion the page shows each demo's finished state. ── */
.lg.c { background: var(--i) center / contain no-repeat; }
.lg.mk { background: var(--fg); -webkit-mask: url(brand/mark.svg) center / contain no-repeat; mask: url(brand/mark.svg) center / contain no-repeat; }

/* hero: text left, the relay right */
.hero-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 56px; align-items: center; }
@media (min-width: 1100px) { .hero h1 { font-size: clamp(56px, 5.6vw, 76px); } }

/* the relay: tell one AI → Mindbaton → another AI knows */
.relay { position: relative; display: grid; font-size: 13.5px; }
.rl-card { position: relative; z-index: 1; background: rgba(25, 25, 24, .82); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .7); }
.rl-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rl-h b { font-weight: 500; }
.rl-h .model { margin-left: 2px; }
.rl-s { margin-left: auto; font-size: 12px; color: var(--fg-3); }
.rl-say { margin-top: 10px; display: flex; justify-content: flex-end; }
.rl-say span { max-width: 90%; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: var(--panel-3); color: var(--fg); min-height: 34px; }
.rl-row { padding: 8px 0 0; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; }
.rl-row:hover { background: none; }
.rl-row .txt { font-size: 13.5px; }
.rl-ask { margin: 10px 0 0 auto; width: fit-content; max-width: 90%; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: var(--panel-3); color: var(--fg); }
.rl-reply { margin-top: 10px; color: var(--fg-2); min-height: 42px; }
.rl-used { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--fg-3); }
.rl-used .mk, .rl-h .mk { width: 14px; height: 14px; }
.rl-h .mk { width: 16px; height: 16px; }
.rl-link { position: relative; height: 26px; margin-left: 27px; width: 1px; background: linear-gradient(var(--line-3), var(--line-2)); }
.rl-link .bt { position: absolute; left: -6px; top: -6px; width: 13px; height: 13px; opacity: 0; background: var(--fg);
  -webkit-mask: url(brand/mark.svg) center / contain no-repeat; mask: url(brand/mark.svg) center / contain no-repeat; }
.rl-link.go .bt { animation: carry .62s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes carry { 0% { opacity: 0; transform: translateY(0) rotate(-20deg); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px) rotate(20deg); } }
.caret::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor;
  animation: caret 1s steps(1) infinite; }
.dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* shared states the script toggles */
.rise { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.gone { opacity: 0 !important; }
.fadeable { transition: opacity .35s ease; }
.aurora { transition: opacity 1.2s ease; }
.aurora.pulse { opacity: 1; transition-duration: .35s; }
@media (max-width: 640px) { .aurora.pulse { opacity: .88; } }

/* every AI knows: the old fact is struck as it's replaced */
.row.old s { text-decoration: none; background: linear-gradient(rgba(233, 61, 130, .7), rgba(233, 61, 130, .7)) 0 55% / 100% 1.5px no-repeat; }
.row.old.strike s { animation: strike .6s ease both; }
@keyframes strike { from { background-size: 0 1.5px; } }

/* pass the baton: the meter fills, the baton hops to the next AI */
.pick { position: relative; }
.meter b { transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.4, 0, .2, 1), background-color .3s; }
.meter.cool { color: var(--fg-3); }
.meter.cool b { background: var(--fg-2); }
.passed { display: flex; align-items: center; gap: 8px; padding: 10px 0 0 34px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.passed .mk { width: 14px; height: 14px; }
.hop { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; opacity: 0; pointer-events: none; z-index: 2; }
.chip.lit { border-color: var(--line-3); background: var(--panel-3); transition: background .3s, border-color .3s; }

/* sections rise in as they arrive; the hero screenshot settles as you scroll to it */
.motion .reveal { transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.motion .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.motion .chips.reveal li { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--n, 0) * 22ms); }
.motion .chips.reveal:not(.in) li { opacity: 0; transform: translateY(6px); }
.motion .chips.reveal:not(.in) { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .motion .hero-shot { animation: settle linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; transform-origin: 50% 0; }
  @keyframes settle { from { transform: perspective(1600px) rotateX(16deg) scale(.94); opacity: .55; } }
}
.tab:not([hidden]), #agent:target { animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; } }

@media (max-width: 1099px) {
  .hero-g { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .relay { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .caret::after, .dots i, .rl-link.go .bt, .rise, .tab:not([hidden]), #agent:target, .row.old.strike s { animation: none !important; }
}