/* Genkan site: shared stylesheet.

   Palette and type from the Genkan brand work, direction 1b "Paper House"
   with Yoru as the dark mode. Daylight is the base: washi paper ground,
   sumi-adjacent ink, aizome (Japanese indigo) as the accent, hinoki cypress
   as the warm secondary. The point of the palette is that it is a light you
   shine on a household's internet, not a product defending you from a threat,
   so nothing here is the red-on-black of a security vendor.

   Three theme states, not two: an explicit choice stamps data-theme, and the
   default "system" setting stamps nothing, so the media query has to carry
   the un-stamped case on its own. */

:root{
  /* Daylight: Paper House */
  --ground:#f6f2e9; --ground-2:#f1ece0;
  --surface:#fbf9f3; --surface-edge:#e3dccb;
  --ink:#262b3d; --ink-soft:#4a4f63; --muted:#6f6750;
  --ember:#3d5285; --ember-deep:#31446f; --ember-glow:rgba(61,82,133,.14);
  /* Hinoki is a fill and large-shape colour in daylight: it reaches only
     2.5:1 on washi, so it must never carry small text on this ground. */
  --hinoki:#c98d4e;
  --sage:#476f25; --sage-soft:rgba(111,164,58,.14);
  --hairline:rgba(38,43,61,.12);
  --shadow:0 1px 2px rgba(38,43,61,.05),0 12px 34px -18px rgba(38,43,61,.22);
  --glow-1:rgba(61,82,133,.14); --glow-2:rgba(201,141,78,.10);
  --btn-ink:#f6f2e9;
  --wire:#b3a88f; --wire-dim:rgba(38,43,61,.20);
  /* The bright set, which is also the product's category colour code. */
  --c-gaming:#e2703a; --c-video:#c95d7c; --c-audio:#2fa396; --c-learning:#6fa43a;
  --line:#cfc6ae; --footer-bg:#f0ebdd; --agent-bg:#171923; --code-bg:#f6f2e9;
  --g-bg:#f7e3d7; --g-tx:#9c4a1d; --v-bg:#f4dee6; --v-tx:#8e3653;
  --a-bg:#d9efec; --a-tx:#1d6e64; --l-bg:#e4efd4; --l-tx:#4a7022;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  /* Night: Yoru */
  --ground:#171923; --ground-2:#12141d;
  --surface:#1f2230; --surface-edge:#3a3f5c;
  --ink:#c6cce8; --ink-soft:#9aa3c7; --muted:#6e7691;
  --ember:#82a1e8; --ember-deep:#9db6f0; --ember-glow:rgba(130,161,232,.18);
  --hinoki:#d98a54;
  --sage:#8fc25c; --sage-soft:rgba(143,194,92,.16);
  --hairline:rgba(198,204,232,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.7);
  --glow-1:rgba(130,161,232,.20); --glow-2:rgba(217,138,84,.12);
  --btn-ink:#171923;
  --wire:#565d75; --wire-dim:rgba(198,204,232,.16);
  --c-gaming:#ef8355; --c-video:#dd7794; --c-audio:#48bcae; --c-learning:#8bc356;
  --line:#3a3f5c; --footer-bg:#12141c; --agent-bg:#12141c; --code-bg:#12141c;
  --g-bg:#2b2029; --g-tx:#f0a074; --v-bg:#2a1f2b; --v-tx:#e88ba6;
  --a-bg:#16292c; --a-tx:#6fc9be; --l-bg:#212a18; --l-tx:#a8cf78;
}}
:root[data-theme="dark"]{
  /* Night: Yoru */
  --ground:#171923; --ground-2:#12141d;
  --surface:#1f2230; --surface-edge:#3a3f5c;
  --ink:#c6cce8; --ink-soft:#9aa3c7; --muted:#6e7691;
  --ember:#82a1e8; --ember-deep:#9db6f0; --ember-glow:rgba(130,161,232,.18);
  --hinoki:#d98a54;
  --sage:#8fc25c; --sage-soft:rgba(143,194,92,.16);
  --hairline:rgba(198,204,232,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.7);
  --glow-1:rgba(130,161,232,.20); --glow-2:rgba(217,138,84,.12);
  --btn-ink:#171923;
  --wire:#565d75; --wire-dim:rgba(198,204,232,.16);
  --c-gaming:#ef8355; --c-video:#dd7794; --c-audio:#48bcae; --c-learning:#8bc356;
  --line:#3a3f5c; --footer-bg:#12141c; --agent-bg:#12141c; --code-bg:#12141c;
  --g-bg:#2b2029; --g-tx:#f0a074; --v-bg:#2a1f2b; --v-tx:#e88ba6;
  --a-bg:#16292c; --a-tx:#6fc9be; --l-bg:#212a18; --l-tx:#a8cf78;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Karla","Segoe UI",system-ui,sans-serif; font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.col{max-width:65ch}
/* Newsreader carries the display voice; Karla does the work. The serif is
   what makes the page legible to somebody's mum without it going saccharine. */
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500}
.lbl,.brand,.chip,.btn,nav{font-family:"Karla","Segoe UI",sans-serif}
h1,h2,h3{text-wrap:balance}
.lbl{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);display:inline-block}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}

/* ---- top bar ---- */
nav.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-weight:800;font-size:20px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
/* The mark is the first character of the name: genkan is written 玄関, and 玄
   means dark, hidden, profound. Five strokes, so it still reads at favicon
   size, which the fourteen-stroke 関 does not. Placeholder weight and colour
   until the identity work lands. */
/* The mark: 玄, the first character of 玄関 and the half that means hidden or
   profound. Drawn rather than set in a typeface, so it carries no licence
   condition and so the bar can overhang the body, which is where the wide
   reading comes from. 1.07 wide to tall, and nothing is stretched. */
.mark{flex:none;width:1.15em;height:1.07em;color:var(--ember);overflow:visible}
/* Small is its own drawing. At nav size the strokes have to carry more
   weight than the display mark, or the character reads as a smudge. */
.brand .mark{width:26px;height:24px;stroke-width:10}
nav .spacer{flex:1}
.navlinks{display:flex;gap:18px;align-items:center;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
nav a.navlink{color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
nav a.navlink:hover{color:var(--ink)}
nav a.navlink[aria-current="page"]{color:var(--ember)}
.theme-btn{border:1px solid var(--hairline);background:transparent;color:var(--ink-soft);flex:none;
  border-radius:9px;padding:7px 11px;cursor:pointer;font-size:13px;font-weight:600;font-family:"Karla",sans-serif}
.theme-btn:hover{color:var(--ink);border-color:var(--ember)}
@media(max-width:760px){
  .nav-in{gap:12px}
  nav a.navlink{font-size:13px}
}

/* ---- heroes ---- */
.hero{position:relative;padding:88px 0 40px;overflow:hidden}
.hero .glow,.page-hero .glow{position:absolute;inset:-30% -10% auto -10%;height:640px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 68% 30%,var(--glow-1),transparent 70%),
             radial-gradient(40% 40% at 20% 10%,var(--glow-2),transparent 70%);
  animation:flicker 7s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.82}70%{opacity:.94}}
@media (prefers-reduced-motion:reduce){.hero .glow,.page-hero .glow{animation:none}}
.hero-in{position:relative;z-index:1}
.eyebrow{margin-bottom:22px}
h1{font-size:clamp(40px,7.2vw,78px);line-height:1.02;font-weight:800;letter-spacing:-.025em;max-width:16ch}
h1 em{font-style:normal;color:var(--ember)}
/* Two-beat hero: the charge, then the answer. The second line is smaller and
   softer so the eye reads them in order rather than as one grey slab, and the
   h1 is wider than the default 16ch because two sentences need the room. */
.hero h1.h1-two{max-width:21ch}
.h1-b{display:block;margin-top:.26em;font-size:.6em;font-weight:700;
  letter-spacing:-.015em;line-height:1.08;color:var(--ink-soft)}
@media(max-width:640px){.h1-b{font-size:.68em}}
.sub{margin:26px 0 0;font-size:clamp(19px,2.4vw,23px);color:var(--ink-soft);max-width:46ch;line-height:1.5}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:15.5px;border-radius:999px;
  padding:13px 26px;cursor:pointer;border:1px solid transparent;transition:transform .12s ease}
.btn:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
.btn-primary{background:var(--ember);color:var(--btn-ink);box-shadow:0 10px 24px -12px var(--ember-deep)}
.btn-ghost{border-color:var(--surface-edge);color:var(--ink);background:var(--surface)}
.hero-note{margin-top:18px;font-size:14.5px;color:var(--muted)}

/* subpage hero */
.page-hero{position:relative;padding:72px 0 30px;overflow:hidden}
.page-hero .hero-in{position:relative;z-index:1}
.page-hero h1{font-size:clamp(34px,5.6vw,60px);max-width:20ch}
.page-hero .sub{font-size:clamp(18px,2.2vw,21px)}

/* ---- terminal ---- */
.terminal{margin-top:52px;background:var(--surface);border:1px solid var(--surface-edge);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;max-width:760px}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#e8705f}.dot.y{background:#e6b34d}.dot.g{background:#67b177}
.term-title{margin-left:8px;font-size:12.5px;color:var(--muted)}
.term-body{padding:20px 22px;font-size:16px;line-height:1.9}
.term-body .mono{display:block;white-space:pre-wrap}
.term-body .you{color:var(--ember)}
.term-body .said{color:var(--ink)}
.term-body .did{color:var(--sage)}
.term-body .sys{color:var(--muted)}
.caret{display:inline-block;width:9px;height:17px;vertical-align:-3px;background:var(--ember);
  margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

/* ---- sections ---- */
section{padding:78px 0;border-top:1px solid var(--hairline)}
.sec-head{max-width:60ch;margin-bottom:44px}
h2{font-size:clamp(28px,4.2vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin-top:14px}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:21px}
.lede{font-size:clamp(21px,2.6vw,26px);line-height:1.5;color:var(--ink);max-width:30ch}
.lede em{font-style:italic;color:var(--ember)}
.prose{max-width:65ch}
.prose p{margin-top:16px;color:var(--ink-soft)}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}
.prose h3{margin-top:40px;color:var(--ink)}
.prose ul{margin:16px 0 0 22px;color:var(--ink-soft)}
.prose li{margin-top:8px}
.prose .mono{font-size:.85em;background:var(--ground-2);border:1px solid var(--hairline);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* flow diagram (stacked nodes) */
.flow{display:grid;grid-template-columns:1fr;gap:2px;background:var(--hairline);
  border:1px solid var(--surface-edge);border-radius:16px;overflow:hidden;margin-top:8px}
.node{background:var(--surface);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.node .n-ic{flex:none;width:26px;height:26px;color:var(--ink-soft);margin-top:2px}
.node h3{font-size:18px;font-weight:600}
.node p{font-size:17px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.node.hl{background:linear-gradient(180deg,var(--ember-glow),transparent),var(--surface)}
.node.hl .n-ic{color:var(--ember)}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--surface-edge);border-radius:15px;padding:24px;box-shadow:var(--shadow)}
.card h3{font-size:20px;display:flex;align-items:center;gap:10px}
.card h3 .c-ic{flex:none;width:20px;height:20px;color:var(--ember)}
.card p{font-size:17.5px;color:var(--ink-soft);margin-top:9px;line-height:1.55}
.card .more{display:inline-block;margin-top:12px;font-family:"Karla",sans-serif;font-size:15px;font-weight:600;text-decoration:none}

/* quiz demo card */
.earn-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:760px){.earn-wrap{grid-template-columns:1fr;gap:30px}}
.quiz{background:var(--surface);border:1px solid var(--surface-edge);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.quiz .q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}
.q-badge{font-family:"Karla",sans-serif;font-size:12px;font-weight:600;color:var(--sage);
  background:var(--sage-soft);padding:5px 11px;border-radius:20px;white-space:nowrap}
.quiz .q-q{font-size:20px;font-weight:500;margin-bottom:16px}
.opt{border:1px solid var(--surface-edge);border-radius:11px;padding:12px 15px;margin-bottom:9px;font-size:17px;
  display:flex;align-items:center;gap:11px;cursor:default}
.opt.correct{border-color:var(--sage);background:var(--sage-soft)}
.opt .mk{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none;position:relative}
.opt.correct .mk{border-color:var(--sage);background:var(--sage)}
.opt.correct .mk::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--ground);border-width:0 2px 2px 0;transform:rotate(45deg)}
.quiz .q-foot{margin-top:14px;font-size:16px;color:var(--sage);font-family:"Karla",sans-serif;font-weight:600}

/* honesty list */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:10px}
@media(max-width:680px){.honest{grid-template-columns:1fr}}
.honest .row{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--hairline);align-items:flex-start}
.honest .mark{font-family:"Karla",sans-serif;font-weight:700;font-size:15px;flex:none;
  min-width:34px;white-space:nowrap}
.honest .can .mark{color:var(--sage)}
.honest .cant .mark{color:var(--ember)}
.honest .row p{font-size:17.5px;color:var(--ink-soft);line-height:1.45}
.honest .row b{color:var(--ink);font-weight:500;font-family:"Newsreader",serif}

/* values strip */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--surface-edge);border-radius:16px;overflow:hidden}
.val{background:var(--surface);padding:26px 22px}
.val .v-k{font-family:"Karla",sans-serif;font-weight:800;font-size:15px;color:var(--ember);letter-spacing:.02em}
.val .v-d{font-size:16.5px;color:var(--ink-soft);margin-top:7px;line-height:1.45}

/* bounty */
.bounty{background:linear-gradient(180deg,var(--ember-glow),transparent),var(--surface);
  border:1px solid var(--surface-edge);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.levels{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.level{font-family:"IBM Plex Mono",monospace;font-size:13px;padding:8px 13px;border-radius:9px;
  border:1px solid var(--surface-edge);color:var(--ink-soft);background:var(--ground-2)}
.level b{color:var(--ember);font-weight:600}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--surface-edge);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:17px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--hairline);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:"Karla",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
td{color:var(--ink-soft)}
td b{color:var(--ink);font-weight:600}
td .mono{font-size:13px}
.bounty-min{font-family:"IBM Plex Mono",monospace;color:var(--sage);white-space:nowrap}

/* age tiers */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.tier{background:var(--surface);border:1px solid var(--surface-edge);border-radius:15px;padding:24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px}
.tier .t-age{font-family:"Karla",sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--ember)}
.tier .t-name{font-family:"Karla",sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tier p{font-size:17px;color:var(--ink-soft);line-height:1.5}

/* meter bars */
.meters{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.meter{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center}
@media(max-width:560px){.meter{grid-template-columns:110px 1fr auto}}
.meter .m-k{font-family:"Karla",sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.meter .m-bar{height:10px;border-radius:6px;background:var(--ground-2);border:1px solid var(--hairline);overflow:hidden}
.meter .m-fill{height:100%;border-radius:6px;background:var(--ember)}
.meter.free .m-fill{background:var(--sage)}
.meter .m-v{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.meter.free .m-v{color:var(--sage)}

/* steps list */
.steps{max-width:680px;text-align:left;background:var(--surface);
  border:1px solid var(--surface-edge);border-radius:15px;box-shadow:var(--shadow);overflow:hidden}
.step{display:flex;gap:16px;padding:18px 22px;border-bottom:1px solid var(--hairline);align-items:baseline}
.step:last-child{border-bottom:0}
.step .s-n{font-family:"IBM Plex Mono",monospace;color:var(--ember);font-weight:600;font-size:14px;flex:none}
.step .s-t{font-size:18px;color:var(--ink)}
.step .s-t .mono{color:var(--ink-soft);font-size:15.5px}

/* callout */
.callout{border-left:3px solid var(--ember);background:linear-gradient(90deg,var(--ember-glow),transparent 70%);
  border-radius:0 12px 12px 0;padding:18px 22px;margin-top:28px;max-width:65ch}
.callout p{font-size:18px;color:var(--ink-soft)}
.callout p b{color:var(--ink)}
.callout.sage{border-left-color:var(--sage);background:linear-gradient(90deg,var(--sage-soft),transparent 70%)}

/* ===== the switcheroo stage ===== */
.stage-card{background:var(--surface);border:1px solid var(--surface-edge);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;margin-top:14px}
.stage-scroller{overflow-x:auto}
.stage-svg{display:block;min-width:640px;width:100%;height:auto}
.stage-caption{padding:18px 22px;border-top:1px solid var(--hairline);min-height:86px;
  display:flex;flex-direction:column;gap:4px;justify-content:center}
.stage-caption .sc-t{font-family:"Karla",sans-serif;font-weight:700;font-size:18.5px;color:var(--ink)}
.stage-caption .sc-d{font-size:17px;color:var(--ink-soft);line-height:1.5}
.stage-controls{display:flex;align-items:center;gap:10px;padding:14px 22px 20px;flex-wrap:wrap}
.stage-controls .sdot{width:34px;height:34px;border-radius:50%;border:1px solid var(--surface-edge);
  background:var(--ground-2);color:var(--ink-soft);cursor:pointer;font-family:"IBM Plex Mono",monospace;
  font-size:13px;font-weight:600}
.stage-controls .sdot[aria-current="step"]{background:var(--ember);border-color:var(--ember);color:var(--btn-ink)}
.stage-controls .play{margin-left:auto;border:1px solid var(--surface-edge);background:var(--ground-2);
  color:var(--ink);border-radius:9px;padding:8px 14px;cursor:pointer;font-family:"Karla",sans-serif;
  font-size:13.5px;font-weight:600}
.stage-controls .play:hover{border-color:var(--ember)}

/* svg internals, driven by .s0 .s1 .s2 .s3 on .stage-card */
.stage-svg text{font-family:"Karla","Segoe UI",sans-serif}
.stage-svg .t-lbl{font-size:12px;font-weight:600;fill:var(--muted)}
.stage-svg .t-ssid{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600}
.stage-svg .box{fill:var(--ground-2);stroke:var(--surface-edge)}
.stage-svg .wire{stroke:var(--wire);stroke-width:1.6;fill:none}
.stage-svg .link{stroke:var(--wire-dim);stroke-width:1.6;fill:none;stroke-dasharray:1;stroke-dashoffset:0;pathLength:1}
.stage-svg .link.ember{stroke:var(--ember)}
.stage-svg .dev{stroke:var(--ink-soft);stroke-width:1.6;fill:none}
.stage-svg .chip-bg{rx:9px;stroke-width:1}
.fade{transition:opacity .8s ease}
.draw{transition:stroke-dashoffset 1.1s ease .35s,opacity .3s ease}
@media (prefers-reduced-motion:reduce){.fade,.draw{transition:none}}

/* step logic */
.stage-card .ssid-old{opacity:1}
.stage-card .ssid-new{opacity:0}
.stage-card .old-links{opacity:1}
.stage-card .lost{opacity:0}
.stage-card .genkan-grp{opacity:0}
.stage-card .new-links path{opacity:0;stroke-dashoffset:1}
.stage-card .tags{opacity:0}
.stage-card .glowdot{opacity:0}
.stage-card.s1 .ssid-old,.stage-card.s2 .ssid-old,.stage-card.s3 .ssid-old{opacity:0}
.stage-card.s1 .ssid-new,.stage-card.s2 .ssid-new,.stage-card.s3 .ssid-new{opacity:1}
.stage-card.s1 .old-links,.stage-card.s2 .old-links,.stage-card.s3 .old-links{opacity:0}
.stage-card.s1 .lost,.stage-card.s2 .lost{opacity:1}
.stage-card.s2 .genkan-grp,.stage-card.s3 .genkan-grp{opacity:1}
.stage-card.s2 .glowdot,.stage-card.s3 .glowdot{opacity:1}
.stage-card.s3 .new-links path{opacity:1;stroke-dashoffset:0}
.stage-card.s3 .tags{opacity:1}
.stage-card.s3 .lost{opacity:0}

/* svg text + chip colours */
.stage-svg .t-box{font-size:13px;font-weight:600;fill:var(--ink)}
.stage-svg .t-tag{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;fill:var(--sage)}
.stage-svg .t-lost{font-family:"IBM Plex Mono",monospace;font-size:12.5px;fill:var(--muted)}
.stage-svg .ssid-old-t{fill:var(--ember)}
.stage-svg .ssid-new-t{fill:var(--ink-soft)}
.stage-svg .chip-old{fill:var(--ember-glow);stroke:var(--ember)}
.stage-svg .chip-new{fill:var(--ground-2);stroke:var(--surface-edge)}
.stage-svg .glow-e{fill:var(--ember-glow)}
.stage-svg .pulse{stroke:var(--ember);fill:none;stroke-width:1.5}

/* pulse on the new AP while broadcasting */
.stage-card .pulse{opacity:0;transform-origin:center;transform-box:fill-box}
.stage-card.s2 .pulse{opacity:1;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.stage-card.s2 .pulse{animation:none;opacity:.5}}

/* ---- footer ---- */
footer{border-top:1px solid var(--hairline);padding:44px 0 60px;color:var(--muted);font-size:15.5px}
footer .f-in{display:flex;flex-direction:column;gap:22px}
footer .f-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer .wt{font-family:"Karla",sans-serif}
footer .wt b{color:var(--ink-soft)}
footer .f-nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer .f-nav a{color:var(--muted);text-decoration:none;font-family:"Karla",sans-serif;font-size:14.5px;font-weight:600}
footer .f-nav a:hover{color:var(--ink)}
footer a{color:var(--ink-soft)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================================
   Illustration layer: diagrams, characters, service marks, trust signature.
   Everything here is inline SVG driven by CSS, so both themes and
   prefers-reduced-motion are handled in one place at the bottom.
   ========================================================================= */

/* ---- diagram cards ---- */
.dia{background:var(--surface);border:1px solid var(--surface-edge);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;margin-top:20px}
.dia-scroll{overflow-x:auto}
.dia-svg{display:block;width:100%;height:auto}
.dia-svg.wide{min-width:760px}
.dia-svg.mid{min-width:560px}
.dia-cap{padding:15px 20px;border-top:1px solid var(--hairline);font-size:17px;color:var(--ink-soft);line-height:1.5}
.dia-cap b{color:var(--ink);font-weight:600}
.dia-hint{display:none;padding:9px 20px 13px;font-size:12.5px;color:var(--muted);
  font-family:"Karla",sans-serif}
@media(max-width:760px){.dia-hint{display:block}}

/* shared svg vocabulary */
.dia-svg text,.scene-svg text{font-family:"Karla","Segoe UI",sans-serif}
.dia-svg .d-lbl{font-size:11px;font-weight:700;letter-spacing:.15em;fill:var(--muted)}
.dia-svg .d-t{font-size:14px;font-weight:600;fill:var(--ink)}
.dia-svg .d-s{font-size:11.5px;fill:var(--muted)}
.dia-svg .d-em{fill:var(--ember);font-weight:600}
.dia-svg .d-mono{font-family:"IBM Plex Mono",monospace;font-size:11.5px;fill:var(--ink-soft)}
.dia-svg .d-box{fill:var(--ground-2);stroke:var(--surface-edge);stroke-width:1.3}
.dia-svg .d-box.hot{stroke:var(--ember);stroke-width:1.8}
.dia-svg .d-wire{fill:none;stroke:var(--wire);stroke-width:1.8;stroke-linecap:round}
.dia-svg .d-link{fill:none;stroke:var(--wire-dim);stroke-width:1.6;stroke-linecap:round}
.dia-svg .d-dev{fill:none;stroke:var(--ink-soft);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.dia-svg .d-glow{fill:var(--ember-glow)}
.dia-svg .d-accent{fill:var(--ember);stroke:none}
/* The box in every diagram carries the mark, the way the real one will. */
/* The box in every diagram carries the mark, the way the real one will. */
.dia-svg .d-mark{fill:none;stroke:var(--ember);stroke-width:8;
  stroke-linecap:round;stroke-linejoin:round}
.dia-svg .d-island{fill:none;stroke:var(--sage);stroke-width:1.6;stroke-dasharray:7 6;opacity:.75}
.dia-svg .d-chip{fill:var(--ground-2);stroke:var(--surface-edge);stroke-width:1}
.dia-svg .d-chip.hot{fill:var(--ember-glow);stroke:var(--ember)}
.dia-svg .d-chip.cool{fill:var(--sage-soft);stroke:var(--sage)}
.dia-svg .d-arrow{fill:var(--ember);stroke:none}
.dia-svg .d-arrow.cool{fill:var(--sage)}
.dia-svg .d-ghost{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5;opacity:.6}

/* travelling traffic: zero-length round dashes read as dots on the wire */
.dia-svg .flowdots{fill:none;stroke:var(--ember);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:.01 26;opacity:.9}
.dia-svg .flowdots.cool{stroke:var(--sage)}
.dia.in .flowdots{animation:flowrun 2.8s linear infinite}
@keyframes flowrun{from{stroke-dashoffset:0}to{stroke-dashoffset:-26}}

/* the packet that does not get through */
.dia-svg .badpkt{opacity:0}
.dia-svg .badpkt circle{fill:var(--ember-deep)}
.dia-svg .badpkt path{stroke:var(--btn-ink);stroke-width:1.8;stroke-linecap:round;fill:none}
.dia.in .badpkt{animation:badrun 7.5s ease-in-out infinite}
@keyframes badrun{
  0%{opacity:0;transform:translateX(0)}
  5%{opacity:1;transform:translateX(0)}
  25%{opacity:1;transform:translateX(-74px)}
  30%{opacity:1;transform:translateX(-64px)}
  62%{opacity:1;transform:translateX(-64px)}
  72%,100%{opacity:0;transform:translateX(-64px)}
}
.dia-svg .stopmark{opacity:0}
.dia-svg .stopmark circle{fill:none;stroke:var(--ember-deep);stroke-width:2.4}
.dia-svg .stopmark path{stroke:var(--ember-deep);stroke-width:2.4;stroke-linecap:round}
.dia.in .stopmark,.dia.in .stopchip{animation:stopflash 7.5s ease-in-out infinite}
@keyframes stopflash{0%,22%{opacity:0}29%,64%{opacity:1}74%,100%{opacity:0}}
.dia-svg .stopchip{opacity:0}

/* wifi bloom */
.dia-svg .arc{fill:none;stroke:var(--ember);stroke-width:2;stroke-linecap:round;opacity:.25}
.dia.in .arc{animation:arcpulse 3.2s ease-in-out infinite}
.dia.in .arc:nth-of-type(2){animation-delay:.35s}
.dia.in .arc:nth-of-type(3){animation-delay:.7s}
@keyframes arcpulse{0%,100%{opacity:.18}45%{opacity:.9}}

/* one-shot beats and line draws, fired when the card scrolls in */
.dia-svg .beat{opacity:0}
.dia.in .beat{animation:beatin .55s ease forwards}
.dia.in .b1{animation-delay:.35s}
.dia.in .b2{animation-delay:.95s}
.dia.in .b3{animation-delay:1.55s}
.dia.in .b4{animation-delay:2.15s}
.dia.in .b5{animation-delay:2.75s}
.dia.in .b6{animation-delay:3.35s}
@keyframes beatin{from{opacity:0}to{opacity:1}}
.dia-svg .drawline{stroke-dasharray:1;stroke-dashoffset:1}
.dia.in .drawline{animation:drawin .85s ease forwards}
.dia.in .drawline.b1{animation-delay:.2s}
.dia.in .drawline.b2{animation-delay:.8s}
.dia.in .drawline.b3{animation-delay:1.4s}
.dia.in .drawline.b4{animation-delay:2s}
@keyframes drawin{to{stroke-dashoffset:0}}

/* ---- hand-drawn family characters ---- */
.fig,.scene-svg{overflow:visible}
.fig .ln,.scene-svg .ln{fill:none;stroke:var(--ink-soft);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.fig .hd,.scene-svg .hd{fill:var(--surface);stroke:var(--ink-soft);stroke-width:2.6}
.fig .em,.scene-svg .em{stroke:var(--ember)}
.fig .emf,.scene-svg .emf{fill:var(--ember);stroke:none}
.scene-svg .ground{fill:none;stroke:var(--hairline);stroke-width:2.5;stroke-linecap:round}
.scene-svg .glowbed{fill:var(--ember-glow)}
.scene-band{padding:6px 0 2px}
.scene-band .scene-svg{display:block;width:100%;height:auto;max-width:680px;margin:0 auto}
.scene-cap{text-align:center;color:var(--muted);font-size:15px;margin-top:6px}
.wave{transform-box:fill-box;transform-origin:0% 100%}
.scene-svg .glowbed{animation:flicker 7s ease-in-out infinite}
.dia.in .wave,.scene-band .wave{animation:wavearm 3.6s ease-in-out infinite}
@keyframes wavearm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(11deg)}}

/* ---- service marks: our own artwork, brand colour plus the name ---- */
.svcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.svc{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;
  border:1px solid var(--surface-edge);background:var(--ground-2);color:var(--ink);
  font-family:"Karla",sans-serif;font-size:13.5px;font-weight:600;white-space:nowrap}
.svc .sq{width:23px;height:23px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;line-height:1;letter-spacing:-.02em;
  background:var(--sc);color:var(--sf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.svc .sq.two{font-size:10.5px}
.svc.yt{--sc:#ff0000;--sf:#fff}
.svc.nf{--sc:#e50914;--sf:#fff}
.svc.dp{--sc:#1a3fd4;--sf:#fff}
.svc.pv{--sc:#00a8e1;--sf:#062733}
.svc.tk{--sc:#fe2c55;--sf:#fff}
.svc.rb{--sc:#e2231a;--sf:#fff}
.svc.fn{--sc:#6b4cf6;--sf:#fff}
.svc.sp{--sc:#1db954;--sf:#06301a}
.svc.tw{--sc:#9146ff;--sf:#fff}
.svc.st{--sc:#66c0f4;--sf:#0b2231}
.svc-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px}
.svc-cat{background:var(--surface);border:1px solid var(--surface-edge);border-radius:15px;
  padding:20px;box-shadow:var(--shadow)}
.svc-cat .sc-k{font-family:"Karla",sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.svc-cat.free .sc-k{color:var(--sage)}
.svc-cat .sc-d{font-size:15px;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.svc-note{font-size:14.5px;color:var(--muted);margin-top:16px;max-width:62ch}

/* ---- the sovereignty signature, repeated on every page ---- */
.sig{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:26px 0 0}
.sig .s-i{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--surface-edge);background:var(--surface);color:var(--ink-soft);
  font-family:"Karla",sans-serif;font-size:13.5px;font-weight:600;line-height:1.3}
.sig .s-i b{color:var(--ink);font-weight:700}
.sig .s-i svg{width:19px;height:19px;flex:none;color:var(--ember)}
.sig .s-i.sage svg{color:var(--sage)}

/* ---- sovereignty band with the house-versus-cloud picture ---- */
.sov{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:820px){.sov{grid-template-columns:1fr;gap:24px}}
.sov-art{background:var(--surface);border:1px solid var(--surface-edge);border-radius:18px;
  box-shadow:var(--shadow);padding:8px 8px 0;overflow:hidden}
.sov-art .dia-svg{min-width:0}
.sov h2{margin-top:12px}
.sov p{margin-top:16px;color:var(--ink-soft);font-size:17.5px;line-height:1.55}
.sov p b{color:var(--ink);font-weight:600}
.dia-svg .house{fill:none;stroke:var(--ink-soft);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.dia-svg .keepin{fill:none;stroke:var(--sage);stroke-width:2;stroke-linecap:round}
.dia-svg .nope{fill:none;stroke:var(--ember-deep);stroke-width:2.6;stroke-linecap:round}
.dia-svg .cloudline{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:6 6;opacity:.9}
.dia.in .orbit{animation:orbitrun 9s linear infinite}
@keyframes orbitrun{from{stroke-dashoffset:0}to{stroke-dashoffset:-160}}

/* ---- illustrated step cards ---- */
.stepcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.stepcard{background:var(--surface);border:1px solid var(--surface-edge);border-radius:16px;
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column}
.stepcard .sc-ill{display:block;width:100%;height:auto;background:var(--ground-2);
  border:1px solid var(--hairline);border-radius:12px}
.stepcard .sc-n{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--ember);margin-top:16px}
.stepcard h3{margin-top:4px;font-size:18px}
.stepcard p{font-size:15.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.stepcard p .mono{font-size:.85em;background:var(--ground-2);border:1px solid var(--hairline);
  border-radius:6px;padding:2px 6px}
.sc-ill .fill{fill:var(--ember);opacity:.85}
.dia.in .barfill{animation:barfill 1.6s ease .4s both}
@keyframes barfill{from{width:0}to{width:96px}}
.sc-ill .cursor{fill:var(--ember)}
.dia.in .cursor{animation:blink 1.1s steps(1) infinite}

/* ---- reduced motion: every animation lands on its finished state ---- */
@media (prefers-reduced-motion:reduce){
  .dia.in .flowdots,.dia.in .arc,.dia.in .cursor,
  .scene-svg .glowbed,.dia.in .wave,.scene-band .wave,.dia.in .orbit{animation:none}
  .dia-svg .arc{opacity:.55}
  .dia.in .badpkt{animation:none;opacity:1;transform:translateX(-64px)}
  .dia.in .stopmark,.dia.in .stopchip{animation:none;opacity:1}
  .dia-svg .beat,.dia.in .beat{opacity:1;animation:none}
  .dia-svg .drawline,.dia.in .drawline{stroke-dashoffset:0;animation:none}
  .dia.in .barfill{animation:none;width:96px}
}

/* Generic reveal triggers: any .reveal container that has scrolled in starts
   the animation inside it, whether it is a diagram card, a step card or a band. */
.in .flowdots{animation:flowrun 2.8s linear infinite}
.in .badpkt{animation:badrun 7.5s ease-in-out infinite}
.in .stopmark,.in .stopchip{animation:stopflash 7.5s ease-in-out infinite}
.in .arc{animation:arcpulse 3.2s ease-in-out infinite}
.in .arc.a2{animation-delay:.35s}
.in .arc.a3{animation-delay:.7s}
.in .beat{animation:beatin .55s ease forwards}
.in .b1{animation-delay:.35s}
.in .b2{animation-delay:.95s}
.in .b3{animation-delay:1.55s}
.in .b4{animation-delay:2.15s}
.in .b5{animation-delay:2.75s}
.in .b6{animation-delay:3.35s}
.in .drawline{animation:drawin .85s ease forwards}
.in .drawline.b1{animation-delay:.2s}
.in .drawline.b2{animation-delay:.8s}
.in .drawline.b3{animation-delay:1.4s}
.in .drawline.b4{animation-delay:2s}
.in .orbit{animation:orbitrun 9s linear infinite}
.in .barfill{animation:barfill 1.6s ease .4s both}
.in .cursor{animation:blink 1.1s steps(1) infinite}
.in .wave{animation:wavearm 3.6s ease-in-out infinite}

/* cabling */
.dia-svg .cable{fill:none;stroke-width:3.4;stroke-linecap:round}
.dia-svg .cable.a{stroke:var(--sage)}
.dia-svg .cable.b{stroke:var(--ember)}
.dia-svg .plug{fill:var(--ground-2);stroke:var(--ink-soft);stroke-width:1.6}

@media (prefers-reduced-motion:reduce){
  .in .flowdots,.in .arc,.in .cursor,.in .wave,.in .orbit{animation:none}
  .in .badpkt{animation:none;opacity:1;transform:translateX(-64px)}
  .in .stopmark,.in .stopchip{animation:none;opacity:1}
  .in .beat,.dia-svg .beat{opacity:1;animation:none}
  .in .drawline,.dia-svg .drawline{stroke-dashoffset:0;animation:none}
  .in .barfill{animation:none;width:96px}
}

/* ---- Roadmap -----------------------------------------------------------
   Status is the whole point of a roadmap page, so it is a real visual
   element rather than a word in a sentence. Shipped is sage, being built
   is ember, planned is muted, and nothing is allowed to read as a promise
   it is not. */
.rm{display:grid;gap:16px;margin-top:26px}
.rm .item{border:1px solid var(--surface-edge);background:var(--surface);border-radius:14px;
  padding:20px 22px;box-shadow:var(--shadow);display:grid;gap:9px}
.rm .item h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rm .item p{font-size:17.5px;color:var(--ink-soft);line-height:1.55}
.rm .item ul{margin:2px 0 0 20px;color:var(--ink-soft);font-size:17px;line-height:1.6}
.rm .item li{margin-bottom:5px}
.st{font-family:"Karla",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;border-radius:999px;padding:4px 11px;
  border:1px solid currentColor;white-space:nowrap}
.st.now{color:var(--sage)}
.st.soon{color:var(--ember)}
.st.later{color:var(--muted)}
.rm .item.now{border-left:3px solid var(--sage)}
.rm .item.soon{border-left:3px solid var(--ember)}
.rm .item.later{border-left:3px solid var(--hairline)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{border-top:2px solid var(--ember);padding-top:16px}
.pillar h3{font-size:19px;font-weight:600;margin-bottom:8px}
.pillar p{font-size:17px;color:var(--ink-soft);line-height:1.55}

/* ---- The repo link ------------------------------------------------------
   An open-source project that never shows you the code is asking for trust
   it has not earned, so the link sits in the nav on every page, next to the
   theme control, and again in the footer. The mark carries it on narrow
   screens where the word will not fit. */
.gh{display:inline-flex;align-items:center;gap:7px;flex:none;text-decoration:none;
  color:var(--ink-soft);font-family:"Karla",sans-serif;
  font-size:14px;font-weight:600;border:1px solid var(--hairline);
  border-radius:9px;padding:6px 11px;transition:color .15s,border-color .15s}
.gh:hover{color:var(--ink);border-color:var(--ember)}
.gh svg{width:16px;height:16px;flex:none}
@media(max-width:900px){.gh .ghw{display:none}.gh{padding:6px 8px}}
footer .gh{font-size:13.5px}

/* An inline GitHub mark, sized to whatever text it sits in, so a link inside a
   sentence is marked as leaving the site without breaking the line's rhythm.
   The nav and footer marks use .gh above; this is for prose and buttons. */
.ghi{width:1em;height:1em;vertical-align:-.13em;margin-right:.34em;flex:none}
.btn .ghi{width:1.05em;height:1.05em;margin-right:0}

/* ---- Nav at six items ---------------------------------------------------
   The Switcheroo went missing from the bar when the Roadmap arrived, and the
   owner noticed before anybody else did, which is the right order of events
   but not a good look. Six items fit at desktop widths and clip below about
   1100px, where .navlinks would scroll sideways with no visible affordance:
   "Get started" simply read as "Get sta". So the bar tightens in two steps
   before it has to scroll. Declared in descending order so the narrowest
   rule wins, since these all match at small widths. */
@media(max-width:1150px){
  .nav-in{gap:13px}
  .navlinks{gap:13px}
  nav a.navlink{font-size:14px}
  .gh .ghw{display:none}
  .gh{padding:6px 8px}
}
@media(max-width:1020px){
  .nav-in{gap:10px}
  .navlinks{gap:10px}
  nav a.navlink{font-size:13.5px}
  .brand{font-size:18px}
}
@media(max-width:760px){
  .nav-in{gap:10px}
  nav a.navlink{font-size:13px}
}

/* ---- The overflow menu --------------------------------------------------
   Six links plus a mark plus a theme control had outgrown the bar. Four core
   destinations stay visible; everything else lives behind a menu. Built on
   <details>, so it opens and closes with no JavaScript at all: the script
   only adds click-outside and Escape, which are conveniences, not the
   mechanism. */
.more{position:relative;flex:none}
.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-soft);font-family:"Karla",sans-serif;font-size:14px;font-weight:600;
  border:1px solid var(--hairline);border-radius:9px;padding:6px 11px;white-space:nowrap}
.more>summary::-webkit-details-marker{display:none}
.more>summary:hover,.more[open]>summary{color:var(--ink);border-color:var(--ember)}
.more>summary .chev{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s}
.more[open]>summary .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.more-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:60;min-width:230px;
  background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;
  box-shadow:var(--shadow);padding:7px;display:flex;flex-direction:column}
.more-menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-family:"Karla",sans-serif;
  font-size:14.5px;font-weight:600;white-space:nowrap}
.more-menu a:hover{background:var(--ground-2);color:var(--ember)}
.more-menu a[aria-current="page"]{color:var(--ember)}
.more-menu .sep{height:1px;background:var(--hairline);margin:6px 4px}
.more-menu .grp{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:8px 11px 4px}
.more-menu .ext{margin-left:auto;opacity:.5;font-size:12px}
@media(max-width:620px){.more-menu{min-width:206px}}

/* ---- The tally band -----------------------------------------------------
   A row of real numbers, used on the home page and the map. Everything in it
   is a count somebody can go and verify in the repository, which is the only
   reason it earns the space. */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--surface-edge);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow)}
.tally-i{background:var(--surface);padding:20px 16px;text-align:center}
.tally-i b{display:block;font-family:"Karla",sans-serif;font-weight:800;
  font-size:31px;line-height:1.06;letter-spacing:-.02em;color:var(--ember)}
.tally-i span{display:block;margin-top:7px;font-size:15px;color:var(--ink-soft);line-height:1.38}
@media(max-width:520px){
  .tally{grid-template-columns:1fr 1fr}
  .tally-i{padding:16px 12px}
  .tally-i b{font-size:26px}
  .tally-i span{font-size:14px}
  /* An odd number of figures leaves a dead cell showing the grid gap through
     it. The last one takes the full row instead. */
  .tally-i:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---- The map: pill links inside a card ---------------------------------- */
.map-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.map-links li{margin:0}
.map-links a{display:inline-block;font-family:"Karla",sans-serif;
  font-size:13.5px;font-weight:600;line-height:1.3;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--hairline);border-radius:999px;padding:5px 11px}
.map-links a:hover{color:var(--ember);border-color:var(--ember);background:var(--ground-2)}

/* ---- Badge chips: the ten badges, shown as themselves -------------------- */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge-c{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--surface-edge);border-radius:999px;padding:8px 15px 8px 11px;
  box-shadow:var(--shadow)}
.badge-c i{font-style:normal;font-size:19px;line-height:1}
.badge-c span{font-family:"Karla",sans-serif;font-size:14.5px;font-weight:600;color:var(--ink)}

/* ---- A shelf of subjects, for the curriculum ---------------------------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;margin-top:22px}
.shelf-i{background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;
  padding:18px 20px;box-shadow:var(--shadow)}
.shelf-i h4{font-family:"Karla",sans-serif;font-size:18px;font-weight:700;
  color:var(--ink);line-height:1.25}
/* The region rides above the band name rather than beside it: at three
   columns the two together wrapped in the middle of "Years 4 to 6". */
.shelf-i h4 em{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin-bottom:5px}
.shelf-i p{font-size:16.5px;color:var(--ink-soft);margin-top:8px;line-height:1.45}

/* Four cards in the default auto-fit grid land as three and a lonely fourth
   at this container width. Where a group is exactly four, two by two reads as
   a deliberate shape rather than a leftover. */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* The capability table's last column is a short link per row. Left to wrap it
   broke two-word page names across lines; the wrapper already scrolls. */
.caps th:last-child,.caps td:last-child{white-space:nowrap}
.caps td:nth-child(2){white-space:nowrap}

/* ---- Comparison tables (compare.html) ----------------------------------- */
/* Eight columns will never fit a phone, so the wrapper scrolls and the first
   column pins, otherwise a reader loses track of which row they are on. */
.cmp{min-width:900px;font-size:16px}
.cmp th,.cmp td{padding:12px 14px}
.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;z-index:1;
  background:var(--surface);min-width:210px;border-right:1px solid var(--hairline)}
.cmp .st{margin:0}
.cmp-n{display:block;margin-top:4px;font-size:14.5px;color:var(--muted);
  font-family:"Newsreader",Georgia,serif;line-height:1.35}
/* Header cells are uppercase and letter-spaced. A note inside one must opt out
   of both, or a two-word qualifier stacks three lines tall and drags the whole
   header row down with it. */
.cmp th .cmp-n{text-transform:none;letter-spacing:0;font-weight:400;font-size:13.5px}
@media(max-width:680px){
  .cmp{font-size:15px}
  .cmp th,.cmp td{padding:10px 12px}
  .cmp th:first-child,.cmp td:first-child{min-width:172px}
}


/* ---- below the fold ----
   The hero is one idea: the enemy, the answer, and how to start. The proof
   (what it is, and the counts) sits underneath, where somebody who is already
   interested will actually read it. */
.below-fold{padding:42px 0 4px}
.below-fold .sig{margin-top:0}


/* The mark does NOT animate in the nav.
   The stroke-order draw-on is the right signature for a hero or a loading
   state, but a logo caught mid-draw reads as a broken image, and in the nav
   it is caught mid-draw on every single page load. A logo's job is to be
   complete. The draw-on belongs somewhere it can be watched on purpose. */


/* The rain sits behind the hero content and in front of nothing. It never
   catches a pointer and it is never read aloud: it is weather, not content. */
.hero .rain{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;user-select:none;
  /* Weather, not content, so it gives way to the headline. The mask keeps the
     rain off the text column and lets it run at full strength in the empty
     space to the right, which reads as deliberate rather than as a texture
     somebody forgot to turn down. */
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 34%,rgba(0,0,0,.45) 58%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0%,transparent 34%,rgba(0,0,0,.45) 58%,#000 100%)}
.hero .glow{z-index:0}
.hero-in{position:relative;z-index:1}

/* ---- under the bonnet ----
   The site has two readers at once: a parent who wants to know whether this
   will stop the nightly argument, and a parent who wants to know which nftables
   chain does it. Both are the same person on different evenings.

   So the technical detail is present on every page and folded away by default.
   Open it and you get the real thing, file paths included. Leave it shut and
   the page reads as plain English with nothing missing.

   Deliberately not addressed to "the geeks" or "the dads". Plenty of the people
   who open these are mothers who write software for a living, and a label that
   quietly tells them the technical half is somebody else's is a bad label. */
.bonnet{border:1px solid var(--hairline);border-radius:12px;background:var(--surface);
  margin:22px 0;overflow:hidden}
.bonnet>summary{list-style:none;cursor:pointer;padding:13px 17px;display:flex;
  align-items:center;gap:11px;font-family:"Karla",sans-serif;font-weight:600;
  font-size:15px;color:var(--ink-soft)}
.bonnet>summary::-webkit-details-marker{display:none}
.bonnet>summary:hover{color:var(--ink)}
.bonnet>summary:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.bonnet .b-tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember);
  border:1px solid var(--ember);border-radius:20px;padding:3px 9px;flex:none}
.bonnet .b-chev{margin-left:auto;flex:none;transition:transform .18s ease;color:var(--muted)}
.bonnet[open] .b-chev{transform:rotate(90deg)}
.bonnet .b-body{padding:2px 17px 17px;font-size:16.5px;line-height:1.62;color:var(--ink-soft)}
.bonnet .b-body p+p{margin-top:11px}
.bonnet .b-body code{font-family:"IBM Plex Mono",monospace;font-size:14.5px;
  background:var(--ground-2);border:1px solid var(--hairline);border-radius:5px;padding:1px 5px}
.bonnet .b-body b{color:var(--ink);font-weight:600}
.bonnet .b-body ul{margin:9px 0 0 18px;padding:0}
.bonnet .b-body li{margin:5px 0}
@media (prefers-reduced-motion:reduce){.bonnet .b-chev{transition:none}}

/* ==== the redesign layer, from the Claude Design homepage =================
   The design's grammar: pill buttons, mono eyebrows, Newsreader 500 display,
   lowercase nav, an always-dark agent band, and the step line as a living
   divider with traffic on it. Shared here so every page inherits it. */

/* ---- nav ---- */
.nv{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:1px solid var(--hairline)}
.nv-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:16px 24px}
.nv-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.nv-brand .mark{width:30px;height:28px;color:var(--ember)}
.nv-word{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:22px;letter-spacing:-.02em}
.nv .spacer{flex:1}
.nv-links{display:flex;align-items:center;gap:22px}
.nv-links>a{color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.nv-links>a:hover{color:var(--ink)}
.nv-links>a[aria-current="page"]{color:var(--ember)}
.nv-cta{background:var(--ember);color:var(--btn-ink)!important;padding:9px 18px;border-radius:999px}
.nv-cta:hover{background:var(--ember-deep)}
.nv-theme{border:1.5px solid var(--line);background:transparent;color:var(--muted);width:36px;height:36px;
  border-radius:999px;display:grid;place-items:center;cursor:pointer;font-size:15px;padding:0;flex:none}
.nv-theme:hover{border-color:var(--ember);color:var(--ember)}
/* The overflow menu: the nav stays simple, everything else lives behind it. */
.nv-more{position:relative}
.nv-more>summary{list-style:none;cursor:pointer;width:36px;height:36px;border-radius:999px;
  border:1.5px solid var(--line);display:grid;place-items:center;color:var(--muted);font-weight:700;letter-spacing:.08em}
.nv-more>summary::-webkit-details-marker{display:none}
.nv-more>summary:hover{border-color:var(--ember);color:var(--ember)}
.nv-more[open]>summary{border-color:var(--ember);color:var(--ember)}
.nv-menu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--surface-edge);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:230px;display:flex;flex-direction:column;z-index:50}
.nv-menu a{padding:9px 13px;border-radius:8px;color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:600}
.nv-menu a:hover{background:var(--ground-2);color:var(--ink)}
.nv-menu .sep{height:1px;background:var(--hairline);margin:7px 5px}
/* On a narrow screen the three main links leave the bar, so they lead the
   overflow menu instead of vanishing. At desktop width they hide in the menu,
   because they are already in the bar beside it. */
.nv-menu .m-primary{display:none}
@media(max-width:900px){
  .nv-links>a.nv-lk{display:none}
  .nv-menu a.m-primary{display:block}
  .nv-menu div.m-primary{display:block}
}
@media(max-width:560px){.nv-word{font-size:19px}.nv-in{gap:12px}}

/* ---- the step divider, with traffic on it ---- */
.stepline{display:block;width:100%;max-width:1160px;margin:0 auto}

/* ---- category chips ---- */
.catchips{display:flex;gap:10px;flex-wrap:wrap}
.catchip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  font-family:"Karla",sans-serif;padding:6px 14px;border-radius:999px}
.catchip .dot{width:8px;height:8px;border-radius:999px;flex:none}
.catchip.g{background:var(--g-bg);color:var(--g-tx)}.catchip.g .dot{background:var(--c-gaming)}
.catchip.v{background:var(--v-bg);color:var(--v-tx)}.catchip.v .dot{background:var(--c-video)}
.catchip.a{background:var(--a-bg);color:var(--a-tx)}.catchip.a .dot{background:var(--c-audio)}
.catchip.l{background:var(--l-bg);color:var(--l-tx)}.catchip.l .dot{background:var(--c-learning)}

/* ---- the agent band: dark in both themes, deliberately ----
   The terminal is the one place the geeky underside shows on the homepage,
   and it reads as a terminal precisely because it keeps its own lighting. */
.agent-band{background:var(--agent-bg);transition:background .35s}
.agent-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;
  align-items:center;padding:80px 24px}
.agent-in h2{color:#eef0fa}
.agent-in .lbl{color:#7c85ad}
.agent-in p{color:#9aa3c7}
.agent-term{font-family:"IBM Plex Mono",monospace;font-size:14.5px;line-height:2.1;background:#12141c;
  border:1px solid #2c3046;border-radius:10px;padding:24px 28px;color:#9aa3c7;min-height:121px}
.agent-term .u{color:#5c6488}.agent-term .t{color:#e6e9f5}.agent-term .m{color:#d8a65a}
.agent-term .cur{animation:gk-blink .9s step-end infinite}
@keyframes gk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:860px){.agent-in{grid-template-columns:1fr;gap:26px}}

/* ---- footer ---- */
.ft{background:var(--footer-bg);transition:background .35s}
.ft-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:28px 24px;flex-wrap:wrap}
.ft-tag{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.ft-tag .mark{width:18px;height:17px;color:var(--ember)}
.ft-nav{display:flex;gap:22px;font-size:13.5px;flex-wrap:wrap}
.ft-nav a{color:var(--ink-soft);text-decoration:none}
.ft-nav a:hover{color:var(--ink)}

/* ---- the new hero ---- */
.hero2{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;
  align-items:center;padding:56px 24px 72px}
.hero2 h1{font-size:clamp(34px,4.6vw,56px);line-height:1.12;letter-spacing:-.01em;font-weight:500;
  min-height:4.4em;max-width:none}
.hero2 h1 .hl{color:var(--ember)}
/* The cursor takes NO layout space at all: a zero-by-zero inline-block
   sitting on the baseline, with the bar painted by ::after. A glyph cursor,
   even a zero-width one, still contributes its own line box, and the ▌ in a
   sans face is taller than the serif line it sits in, so the line it was on
   grew a few pixels. That was invisible on lines the locked min-height
   absorbed, and a visible jitter the moment the fourth line typed in. */
.hero2 .cur{position:relative;display:inline-block;width:0;height:0;
  animation:gk-blink .9s step-end infinite}
.hero2 .cur::after{content:"";position:absolute;left:.03em;bottom:-.08em;
  width:.09em;height:.74em;background:var(--ember)}
.hero2 .sub{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:480px}
.hero2 .fine{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.hero2-mark{display:grid;place-items:center;cursor:pointer}
.hero2-mark svg{width:min(330px,66vw);height:auto;color:var(--ink)}
@media(max-width:860px){.hero2{grid-template-columns:1fr;gap:20px;padding-top:36px}
  .hero2 h1{min-height:0}.hero2-mark{order:-1}.hero2-mark svg{width:150px}}

/* ---- homepage sections ---- */
/* The legacy rule gives every <section> a hairline top border, which the
   inner pages still use as their separator. On the new homepage the step
   line IS the separator, so a hairline right underneath it reads as a
   mistake. Off for the redesign's sections only. */
.home-sec,.agent-band,.stats{border-top:0}
.home-sec{max-width:1160px;margin:0 auto;padding:72px 24px}
.home-sec h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.trio .cell{background:var(--surface);border:1px solid var(--surface-edge);border-radius:10px;
  padding:24px;display:flex;flex-direction:column;gap:10px}
.trio .cell.sol{background:var(--ember);border-color:var(--ember)}
.trio .cell.sol .lbl{color:var(--ember-glow);color:rgba(246,242,233,.75)}
.trio .cell.sol p{color:var(--btn-ink)}
.trio .cell p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.jobs a{background:var(--surface);border:1px solid var(--surface-edge);border-radius:10px;padding:26px;
  display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.jobs a:hover{border-color:var(--ember)}
.jobs .jt{font-family:"Newsreader",Georgia,serif;font-weight:600;font-size:22px}
.jobs p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:700px){.jobs{grid-template-columns:1fr}}
.stats{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:6px 24px 72px;flex-wrap:wrap}
.stats .stat{display:flex;flex-direction:column;gap:4px}
.stats .stat-n{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:40px}
.stats .stat-k{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.steps3{display:flex;flex-direction:column;gap:14px}
.steps3 .row3{display:flex;gap:16px;align-items:baseline;background:var(--surface);
  border:1px solid var(--surface-edge);border-radius:10px;padding:18px 22px;font-size:15.5px;line-height:1.5}
.steps3 .n3{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--hinoki);font-weight:600;flex:none}
.steps3 code{font-family:"IBM Plex Mono",monospace;font-size:13.5px;background:var(--code-bg);
  border:1px solid var(--surface-edge);border-radius:5px;padding:2px 8px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.split2{grid-template-columns:1fr;gap:26px}}

/* ---- get started: the trade, stated with a penguin ---- */
/* Tux rides high, beside the heading rather than vertically centred against
   the whole text block, per the red box on Tim's screenshot. */
.gs-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.gs-tux{margin-top:44px}
.gs-hero .sub+.sub{margin-top:14px}
.gs-tux{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.gs-tux img{width:min(200px,42vw);height:auto;filter:drop-shadow(0 14px 28px rgba(38,43,61,.22))}
.gs-tux figcaption{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:250px}
.tux-credit{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted)}
@media(max-width:820px){.gs-hero{grid-template-columns:1fr;gap:22px}
  .gs-tux{flex-direction:row;text-align:left}.gs-tux figcaption{max-width:none}}