/* hop.fun in Half Moon: Night on :root, Day under the system's light setting and
   [data-theme="light"] (theme.js sets it before the first paint; the nav's sun and moon switch
   flips it). Hop Bounce for display, the system face for reading. The hero is the montage, styled
   exactly as before; under it, Hop's own window drawn in the app's colours is the hero object of
   every section (the "Window" design, picked 2026-10-23). */
@font-face {
  font-family: "Hop Bounce";
  src: url("/fonts/HopBounce.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* the stage and its type (branding/colour/halfmoon-tokens.json, site.night) */
  --ground: #1b1917;
  --cream: #f8f3ec; /* the bunny's colour of the half: cream at Night, ink by Day */
  --head: #fffdf8;
  --text: #c7c3bd;
  --muted: #95918c;
  --kick: rgba(255, 253, 248, 0.8);
  --hero-ground: #191715;
  /* surfaces (the app's Night tokens) */
  --panel: #22201e;
  --panel-2: #2a2825;
  --sunken: #151411;
  --line: rgba(248, 243, 236, 0.1);
  --line-2: rgba(248, 243, 236, 0.18);
  /* interface tones: sky leads, as the app's default accent (2026-10-31); blossom stays in the art */
  --accent: #93cdf0;
  --btn: #93cdf0;
  --btn-fg: #1d1a17;
  --up: #9ae989;
  --down: #ec5b57;
  /* the art colours, one value in both halves */
  --blossom: #f29bc5;
  --gold: #fbc749;
  --sky: #93cdf0;
  --deep: #bb3d83;
  --twilight: #517cbc;
  --blush: #f2c4b0;
  /* icon tones: the art colours at Night; by Day the app's own deeper tones (--bolt, the accents) */
  --i-gold: #fbc749;
  --i-sky: #93cdf0;
  --i-blossom: #f29bc5;
  --i-twilight: #517cbc;
  /* the art's own neutrals, which turn over with the half */
  --art-line: #605d59;
  --art-far: #242e3d;
  /* the burrow's landscape (the first round's footer): hills far to near in moon-grey steps (a little
     further apart than the footer's, to read at this size), the hole Hop peeks out of, his eyes, and
     the half moon's unlit half */
  --hill-1: #383532;
  --hill-2: #2d2b28;
  --hill-3: #242220;
  --hole: #121110;
  --eye: #121110;
  --moon-dark: #34312e;
  --ink: #1d1a17;
  --card-shadow: 0 22px 54px rgba(0, 0, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.32);
  --display: "Hop Bounce", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, monospace;
  --wrap: 1200px;
  --page: 1200px; /* the page's one column: nav, hero and every section share its edges */
  --milk: #fffdf8; /* the stickers' white, the same in both halves */
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f9f8f5;
    --cream: #1d1a17;
    --head: #1d1a17;
    --text: #4d4b48;
    --muted: #6c6a67;
    --kick: rgba(29, 26, 23, 0.78);
    --hero-ground: #f9f8f5;
    --panel: #ffffff;
    --panel-2: #f3f1ee;
    --sunken: #f2f1ee;
    --line: rgba(29, 26, 23, 0.1);
    --line-2: rgba(29, 26, 23, 0.18);
    --accent: #3d73a8;
    --btn: #3d73a8;
    --btn-fg: #ffffff;
    --up: #418032;
    --down: #940403;
    --art-line: #c0bdb8;
    --art-far: #d1e0ee;
    --hill-1: #d1e0ee;
    --hill-2: #c9c6c1;
    --hill-3: #ebe9e6;
    --hole: #b7b3ad;
    --eye: #f9f8f5;
    --i-gold: #d18b0a;
    --i-sky: #3d73a8;
    --i-blossom: #bb3d83;
    --card-shadow: 0 18px 44px rgba(29, 26, 23, 0.16), 0 2px 8px rgba(29, 26, 23, 0.08);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #f9f8f5;
  --cream: #1d1a17;
  --head: #1d1a17;
  --text: #4d4b48;
  --muted: #6c6a67;
  --kick: rgba(29, 26, 23, 0.78);
  --hero-ground: #f9f8f5;
  --panel: #ffffff;
  --panel-2: #f3f1ee;
  --sunken: #f2f1ee;
  --line: rgba(29, 26, 23, 0.1);
  --line-2: rgba(29, 26, 23, 0.18);
  --accent: #3d73a8;
  --btn: #3d73a8;
  --btn-fg: #ffffff;
  --up: #418032;
  --down: #940403;
  --art-line: #c0bdb8;
  --art-far: #d1e0ee;
  --hill-1: #d1e0ee;
  --hill-2: #c9c6c1;
  --hill-3: #ebe9e6;
  --hole: #b7b3ad;
  --eye: #f9f8f5;
  --i-gold: #d18b0a;
  --i-sky: #3d73a8;
  --i-blossom: #bb3d83;
  --card-shadow: 0 18px 44px rgba(29, 26, 23, 0.16), 0 2px 8px rgba(29, 26, 23, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* loading (2026-10-26): the body arrives hidden (its hidden attribute) on the ground theme.js has put on
   the window from the first frame, so neither the browser's white nor the bare page ever shows;
   theme.js lifts it once these styles, the display face and two frames are in, and it fades in.
   Without scripts it shows anyway after 3 s. */
body[hidden] { display: block; opacity: 0; animation: hop-reveal 1ms linear 3s forwards; }
body { transition: opacity 420ms cubic-bezier(.2, .7, .2, 1); }
@keyframes hop-reveal { to { opacity: 1; } }
a { color: var(--cream); }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--cream); color: var(--ground); padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--cream); margin: 0; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; }
code, kbd { font: 0.9em var(--mono); color: var(--cream); }

/* ---------------------------------------------------------------- icons (icons.mjs)
   Hop's own set as the app draws it: each icon's size, pen and master are set when it's built, so
   nothing here may scale one (a 16 or 20 px glyph is fitted to the pixel grid). A tone is an art
   colour, deeper by Day where the app has a Day tone for it (--i-*, in the tokens). */
.ic { display: block; flex: none; color: var(--cream); }
.ic .ic-b { fill: var(--blush); }
.t-gold { color: var(--i-gold); } .t-sky { color: var(--i-sky); } .t-blossom { color: var(--i-blossom); }
.t-twilight { color: var(--i-twilight); } .t-muted { color: var(--muted); }

/* the wordmark o's dash: blossom wherever the lockup is (branding/hop, since 2026-10-25) */
.wm-dash { fill: var(--blossom); }

/* the sites' own logos (128 px PNGs): their colours, never recoloured */
.logo { width: 40px; height: 40px; border-radius: 10px; }

/* ---------------------------------------------------------------- art classes for inline SVG
   (the CSP blocks style="" and <style>, so art takes its colours from these) */
.f-blossom { fill: var(--blossom); } .f-gold { fill: var(--gold); } .f-sky { fill: var(--sky); }
.f-deep { fill: var(--deep); } .f-twilight { fill: var(--twilight); } .f-blush { fill: var(--blush); }
.f-cream { fill: var(--cream); } .f-ground { fill: var(--ground); } .f-panel { fill: var(--panel); }
.f-panel2 { fill: var(--panel-2); } .f-sunken { fill: var(--sunken); } .f-line { fill: var(--art-line); }
.f-far { fill: var(--art-far); } .f-text { fill: var(--text); } .f-muted { fill: var(--muted); }
.f-up { fill: var(--up); } .f-down { fill: var(--down); } .f-none { fill: none; } .f-milk { fill: var(--milk); }
.f-hill1 { fill: var(--hill-1); } .f-hill2 { fill: var(--hill-2); } .f-hill3 { fill: var(--hill-3); }
.f-hole { fill: var(--hole); } .f-eye { fill: var(--eye); } .f-moond { fill: var(--moon-dark); }
/* art for one half only: the burrow's moon and twinkles at Night, its sun and cloud by Day */
.bw-day { display: none; }
:root[data-theme="light"] .bw-day { display: inline; }
:root[data-theme="light"] .bw-night { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bw-day { display: inline; }
  :root:not([data-theme="dark"]) .bw-night { display: none; }
}
.st { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-cream { stroke: var(--cream); } .st-line { stroke: var(--art-line); } .st-blossom { stroke: var(--blossom); }
.st-gold { stroke: var(--gold); } .st-sky { stroke: var(--sky); } .st-deep { stroke: var(--deep); }
.st-twilight { stroke: var(--twilight); } .st-muted { stroke: var(--muted); } .st-ground { stroke: var(--ground); }
.st-up { stroke: var(--up); } .st-down { stroke: var(--down); } .st-text { stroke: var(--text); }
.st-milk { stroke: var(--milk); } .st-ink { stroke: var(--ink); }

/* ---------------------------------------------------------------- nav: the lockup, the sections in a pill
   at the centre (the sun and moon switch at its end), the download at the right. All three are one
   height (--nav-h; the lockup's ink fills it, its box runs a little past) on one centre line, and
   the lockup and the download sit flush with the page's column, the hero card's edges (2026-10-25).
   The pill's cream chip follows the section you're reading (site.js); none over the hero. */
.nav {
  --nav-h: 48px;
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 16px max(var(--gutter), calc((100% - var(--page)) / 2));
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: blur(12px);
}
.nav-home { justify-self: start; display: block; color: var(--cream); line-height: 0; }
/* the lockup's ink is 91 % of its box (lockup.svg), so this box puts its ink at --nav-h */
.nav-home svg { height: calc(var(--nav-h) / 0.91); width: auto; margin: calc(var(--nav-h) * -0.045) 0; }
.nav-pill {
  position: relative; display: flex; align-items: center; gap: 2px; height: var(--nav-h); padding: 4px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
}
.nav-pill a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: calc(var(--nav-h) - 10px); padding: 0 18px;
  border-radius: 999px; color: var(--text); text-decoration: none; font: 400 18px/1 var(--display); white-space: nowrap;
  transition: color 200ms;
}
.nav-pill a:hover { color: var(--cream); }
.nav-pill a.on { color: var(--ground); }
.nav-ind {
  position: absolute; z-index: 0; left: 0; top: 4px; width: 0; height: calc(var(--nav-h) - 10px); border-radius: 999px; background: var(--cream);
  opacity: 0; transition: transform 420ms cubic-bezier(.3, 1.25, .45, 1), width 420ms cubic-bezier(.3, 1.25, .45, 1), opacity 220ms;
}
.nav-sep { flex: none; width: 1px; height: 22px; margin: 0 4px 0 8px; background: var(--line-2); }
.nav-pill .theme { width: calc(var(--nav-h) - 10px); height: calc(var(--nav-h) - 10px); border: 0; }
.nav-pill .theme:hover { background: var(--panel-2); }
.btn.nav-dl { justify-self: end; height: var(--nav-h); padding: 0 22px 0 18px; gap: 10px; font-size: 18px; }
.btn .ic { color: inherit; }
.theme {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  color: var(--cream); background: none; border: 1px solid var(--line-2); cursor: pointer;
}
.theme:hover { border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.theme .sun { display: none; }
:root[data-theme="light"] .theme .sun { display: block; }
:root[data-theme="light"] .theme .moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme .sun { display: block; }
  :root:not([data-theme="dark"]) .theme .moon { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 999px;
  font: 400 21px/1 var(--display); text-decoration: none; white-space: nowrap;
  transition: transform 160ms cubic-bezier(.2, .8, .3, 1.2), background-color 160ms, border-color 160ms;
}
.btn.primary { background: var(--btn); color: var(--btn-fg); }
.btn.primary:hover { transform: translateY(-2px); }
.btn.primary:active { transform: translateY(1px); }
.btn.ghost { color: var(--cream); border: 1.5px solid color-mix(in srgb, var(--cream) 28%, transparent); }
.btn.ghost:hover { border-color: var(--cream); }
.btn.soon { background: transparent; color: var(--cream); border: 1.5px dashed color-mix(in srgb, var(--cream) 40%, transparent); cursor: default; }
.btn.big { height: 66px; padding: 0 34px; font-size: 26px; }

/* ---------------------------------------------------------------- the hero: the montage in a card, a
   little smaller than the page and set down from the nav, so the pill above it has air (2026-10-25;
   the montage itself is motion/montage's) */
.hero { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 0; }
.hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(440px, min(46vw, calc(100svh - 236px)), 700px);
  border-radius: clamp(20px, 2.2vw, 30px);
  background: var(--hero-ground); touch-action: pan-y;
}
.hero-card canvas.hm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-copy {
  position: absolute; inset: 0; padding: 24px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hm-h { max-width: 11.5ch; font-size: clamp(46px, 7.4vw, 108px); line-height: 0.95; color: var(--head); text-wrap: balance; }
.hm-copy .btn { pointer-events: auto; margin-top: clamp(26px, 3vw, 42px); height: clamp(52px, 4.6vw, 64px); padding: 0 clamp(26px, 2.4vw, 34px); font-size: clamp(21px, 1.9vw, 26px); }

@media (max-width: 760px) {
  .nav { --nav-h: 40px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px var(--gutter); }
  .nav-pill { justify-self: end; padding: 0; border: 0; background: none; }
  .nav-pill a, .nav-sep, .nav-ind { display: none; }
  .nav-pill .theme { width: var(--nav-h); height: var(--nav-h); border: 1px solid var(--line-2); }
  .btn.nav-dl { padding: 0 16px 0 13px; font-size: 17px; }
  .hero { padding-top: 12px; }
}

/* ================================================================ the page under the hero
   Hop itself, drawn flat in the app's own Half Moon tokens (and Hop's icon set, art/ui.svg), is the
   hero object of every section; a few of the montage's toys round it. Quiet panels, sunken stages,
   one accent per section, lots of air. Spacing scale: 8 16 24 40 64 96 128 160.
   The page's rhythm (2026-10-26, the user: "space everything out ... not crammed"): one gap between
   sections, one from a section's tab to its headline, one from its head to what it introduces, one
   between the blocks inside a section, one between cards. Each runs from its phone value at 390 px
   to its desktop value at 1333 px and up.
   The order, by how much each part matters to a trader (2026-10-26, the user: "re arrange ... based
   on how important the information is ... so the website actually has flow"): the speed race right
   under the hero, the features, the open-source card, everything Hop supports, then the orbit with
   the trading sites circling Hop as the page's last section (the download). */
:root {
  --s-sec: clamp(104px, 12vw, 160px);  /* section to section */
  --s-tab: clamp(32px, 3.6vw, 48px);   /* a section's tab to its headline */
  --s-head: clamp(48px, 5.4vw, 72px);  /* a section's lede to its content */
  --s-block: clamp(88px, 9.6vw, 128px); /* one block to the next inside a section */
  --s-grid: clamp(12px, 1.8vw, 24px);  /* between cards */
}

/* ================================================================ tokens */
:root {
  /* the app, Night (src/ui/common/base.css); its rgba hover and tint tones flattened to solids */
  --w-bg: #151411;
  --w-chrome: #151411;
  --w-toolbar: #201f1c;
  --w-field: #181715;
  --w-surface: #1b1917;
  --w-surface2: #242320;
  --w-raised: #22201e;
  --w-line: #2d2b29;
  --w-line2: #3d3c39;
  --w-text: #eeebe5;
  --w-text2: #b0aea9;
  --w-text3: #7b7974;
  --w-hover: #2c2b29;
  --w-shown: #1d1c19;
  --w-row: #2c2a28;
  --w-accent: #93cdf0;
  --w-accent-fg: #1d1a17;
  --w-accent-soft: #2d3438;
  --w-accent-tint: #2b2d2d;
  --w-accent-line: #67899d;
  --w-mark: #f8f3ec;
  --w-ok: #9ae989;
  --w-bad: #ec5b57;
  --w-bolt: #fbc749;
  --w-bolt-tint: #312a1b;
  --w-blk: #2a2825;
  --w-blk2: #363431;
  /* the stand-in browser: plain cool greys, no brand */
  --g-chrome: #1d1e21;
  --g-toolbar: #2c2d31;
  --g-field: #1d1e21;
  --g-page: #222326;
  --g-line: #303135;
  --g-line2: #45474c;
  --g-text: #e4e5e8;
  --g-text2: #a7a9ae;
  --g-text3: #76787d;
  --g-blk: #303135;
  --g-blk2: #3b3d41;
  /* constants: the app icon, and the token button (it floats over other sites, so it keeps
     Half Moon's Night tones in both halves, as the app draws it) */
  --icon-tile: #1b1917;
  --icon-bunny: #f8f3ec;
  --chip-bg: #22201e;
  --chip-fg: #eeebe5;
  --chip-line: #93cdf0;
  /* the warning page: red in both themes, on purpose (src/ui/pages/warning) */
  --warn-red: #6f1419;
  --warn-card: #5a0f14;
  --warn-line: #93474b;
  --warn-text: #ffffff;
  --warn-soft: #e5c3c5;
  --warn-fake: #ffb4b4;
  --warn-real-bg: #1f3a24;
  --warn-real-line: #5d9a72;
  --warn-real: #9ff5c3;
  --warn-btn-fg: #8f1d22;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --w-bg: #f6f4f1; --w-chrome: #ebe9e6; --w-toolbar: #ffffff; --w-field: #f2f1ee; --w-surface: #ffffff; --w-surface2: #f6f4f1;
    --w-raised: #ffffff; --w-line: #dedcd9; --w-line2: #cac9c6; --w-text: #1d1a17; --w-text2: #615f5d; --w-text3: #8e8d8b;
    --w-hover: #f1f0ee; --w-shown: #f9f8f6; --w-row: #eeedeb; --w-accent: #3d73a8; --w-accent-fg: #ffffff; --w-accent-soft: #e2eaf2;
    --w-accent-tint: #f1f5f9; --w-accent-line: #8babcb; --w-mark: #1d1a17; --w-ok: #418032; --w-bad: #940403; --w-bolt: #d18b0a;
    --w-bolt-tint: #eee6d5; --w-blk: #efede9; --w-blk2: #e3e1dd;
    --g-chrome: #dfe1e5; --g-toolbar: #ffffff; --g-field: #eef0f3; --g-page: #ffffff; --g-line: #dadce0; --g-line2: #c5c8cd;
    --g-text: #1f2124; --g-text2: #5c6066; --g-text3: #8a8e94; --g-blk: #eceef1; --g-blk2: #e0e3e7;
  }
}
:root[data-theme="light"] {
  --w-bg: #f6f4f1; --w-chrome: #ebe9e6; --w-toolbar: #ffffff; --w-field: #f2f1ee; --w-surface: #ffffff; --w-surface2: #f6f4f1;
  --w-raised: #ffffff; --w-line: #dedcd9; --w-line2: #cac9c6; --w-text: #1d1a17; --w-text2: #615f5d; --w-text3: #8e8d8b;
  --w-hover: #f1f0ee; --w-shown: #f9f8f6; --w-row: #eeedeb; --w-accent: #3d73a8; --w-accent-fg: #ffffff; --w-accent-soft: #e2eaf2;
  --w-accent-tint: #f1f5f9; --w-accent-line: #8babcb; --w-mark: #1d1a17; --w-ok: #418032; --w-bad: #940403; --w-bolt: #d18b0a;
  --w-bolt-tint: #eee6d5; --w-blk: #efede9; --w-blk2: #e3e1dd;
  --g-chrome: #dfe1e5; --g-toolbar: #ffffff; --g-field: #eef0f3; --g-page: #ffffff; --g-line: #dadce0; --g-line2: #c5c8cd;
  --g-text: #1f2124; --g-text2: #5c6066; --g-text3: #8a8e94; --g-blk: #eceef1; --g-blk2: #e0e3e7;
}

/* ================================================================ page frame */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wx { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding-top: var(--s-sec); scroll-margin-top: 40px; }
.measure { max-width: 640px; }

/* the section label is a browser tab: a favicon and a title, open into the section below it */
.tabl { position: relative; display: flex; align-items: flex-end; height: 48px; margin: 0 0 var(--s-tab); }
.tabl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); }
.tabl > span {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px 0 14px; margin-left: 24px;
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--ground);
  font: 400 21px/1 var(--display); color: var(--cream);
}
.tabl > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ground); }

.h2 { font-size: clamp(46px, 6vw, 88px); line-height: 0.96; }
.lede { margin-top: 24px; font-size: 20px; line-height: 1.55; color: var(--text); }
.h3 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1; }
.h4 { font-size: 26px; line-height: 1.08; }
.body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--text); }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.cr { color: var(--cream); font-weight: 600; }
kbd.k {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 11px;
  border-radius: 9px; border: 1px solid var(--line-2); border-bottom-width: 3px; background: var(--panel);
  font: 600 14px/1 var(--body); color: var(--cream);
}
.keys { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.keys .plus { color: var(--muted); font-size: 15px; }
.keys .say { margin-left: 8px; font-size: 15px; color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; }
.stage { position: relative; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); border-radius: 28px; }

/* toys: the montage's flat shapes, layered round a window (never touching each other) */
.toy { position: absolute; display: block; overflow: visible; pointer-events: none; }
.art { position: relative; }
.art > .win { position: relative; z-index: 1; }
.toy.back { z-index: 0; }
.toy.front { z-index: 2; }

/* ================================================================ the drawn window */
/* sizes are the app's own px times --u, so one component draws at any scale */
.win {
  --u: 1px;
  display: flex; flex-direction: column; overflow: hidden; text-align: left;
  border: 1px solid var(--w-line2); border-radius: calc(12 * var(--u)); background: var(--w-chrome);
  font: 400 calc(12 * var(--u))/1.25 var(--body); color: var(--w-text);
}
.win.gen {
  --w-bg: var(--g-page); --w-chrome: var(--g-chrome); --w-toolbar: var(--g-toolbar); --w-field: var(--g-field);
  --w-surface: var(--g-page); --w-line: var(--g-line); --w-line2: var(--g-line2); --w-text: var(--g-text);
  --w-text2: var(--g-text2); --w-text3: var(--g-text3); --w-blk: var(--g-blk); --w-blk2: var(--g-blk2);
}
.wi { display: block; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2; }
.win .logo { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); flex: none; }
.win .mark { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; color: var(--w-mark); }

/* tab strip */
.ws { flex: none; display: flex; align-items: flex-end; height: calc(40 * var(--u)); padding-left: calc(6 * var(--u)); background: var(--w-chrome); }
.wt {
  position: relative; flex: 0 1 calc(196 * var(--u)); min-width: 0; height: calc(34 * var(--u));
  display: flex; align-items: center; gap: calc(7 * var(--u)); padding: 0 calc(7 * var(--u)) calc(1 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0; color: var(--w-text2); white-space: nowrap;
}
.wt.on { background: var(--w-toolbar); color: var(--w-text); }
.wt.shown { color: var(--w-text); }
.wt.shown::before { content: ""; position: absolute; inset: calc(3 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--w-shown); }
.wt.shown > * { position: relative; }
.wt.dv::after { content: ""; position: absolute; right: 0; top: calc(10 * var(--u)); bottom: calc(11 * var(--u)); width: 1px; background: var(--w-line2); }
.wt > .wc { position: absolute; bottom: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u)); background: var(--w-toolbar); }
.wt > .wc::before { content: ""; position: absolute; inset: 0; background: var(--w-chrome); }
.wt > .wc.l { left: calc(-9 * var(--u)); }
.wt > .wc.l::before { border-bottom-right-radius: calc(9 * var(--u)); }
.wt > .wc.r { right: calc(-9 * var(--u)); }
.wt > .wc.r::before { border-bottom-left-radius: calc(9 * var(--u)); }
.wt-t { flex: 1; min-width: 0; overflow: hidden; }
.wt .bolt { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--w-bolt); }
.wt .x { width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin: 0 calc(3 * var(--u)); color: var(--w-text3); }
.wt.on .x { color: var(--w-text2); }
.wt .pb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(16 * var(--u)); height: calc(16 * var(--u));
  padding: 0 calc(3 * var(--u)); border-radius: calc(4 * var(--u)); border: 1px solid var(--w-line2); color: var(--w-text3); font-size: calc(10 * var(--u));
}
.wt.on .pb { border-color: var(--w-accent-line); color: var(--w-accent); }

.wnew { flex: none; display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin: 0 0 calc(3 * var(--u)) calc(2 * var(--u)); color: var(--w-text2); }
.wcap { margin-left: auto; align-self: stretch; display: flex; color: var(--w-text2); }
.wcap .wi { width: calc(46 * var(--u)); height: 100%; padding: 0 calc(15 * var(--u)); box-sizing: border-box; }

/* toolbar */
.wb { flex: none; display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(6 * var(--u)); background: var(--w-toolbar); border-bottom: 1px solid var(--w-line); container-type: inline-size; }
.ib { flex: none; display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--w-text2); }
.ib.dim { color: var(--w-text3); }
.ib.on { background: var(--w-hover); color: var(--w-text); }
/* the address bar keeps the app's room either side, like Firefox's flexible spaces: (window width
   - 960) / 4 app px, at most 112, measured on the drawn window (the toolbar is its container) */
.wo {
  flex: 1; min-width: 0; height: calc(32 * var(--u));
  margin: 0 calc(6 * var(--u) + clamp(0px, (100cqw - 960 * var(--u)) / 4, 112 * var(--u)));
  padding: 0 calc(4 * var(--u)) 0 calc(14 * var(--u));
  display: flex; align-items: center; gap: calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--w-field);
  font-size: calc(13 * var(--u)); white-space: nowrap; overflow: hidden;
}
.wo .wi { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.wo-t { flex: 1; min-width: 0; overflow: hidden; }
.wo-h { color: var(--w-text); }
.wo-r { color: var(--w-text3); }
.wo-p { color: var(--w-text3); }

.wo .caret { display: inline-block; width: calc(1.5 * var(--u)); height: calc(15 * var(--u)); margin-left: 1px; vertical-align: calc(-3 * var(--u)); background: var(--w-text); }

.sb { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--w-text3); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.sb.trading { color: var(--w-bolt); background: var(--w-bolt-tint); }
.sb.danger { color: var(--w-bad); font-size: calc(13 * var(--u)); padding: 0; }
.wr { flex: none; display: flex; align-items: center; gap: calc(2 * var(--u)); }
/* the layout button: the current layout's glyph and a caret; its menu lists all five */
.ib.lay { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); width: auto; padding: 0 calc(5 * var(--u)) 0 calc(6 * var(--u)); }
.ib.lay .cv { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--w-text3); }

.gprof { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--g-blk2); }

/* page area */
.wp { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--w-surface); }
.wp.bg { background: var(--w-bg); }

/* anonymous page content: flat blocks and lines only */
.ln { display: block; height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--w-blk); }
.ln.s { background: var(--w-blk2); }
.ln.t { height: calc(11 * var(--u)); border-radius: calc(6 * var(--u)); }
.w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }
.av { flex: none; display: block; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--w-blk2); }
.feed { display: flex; flex-direction: column; width: 100%; max-width: calc(440 * var(--u)); margin: 0 auto; border-left: 1px solid var(--w-line); border-right: 1px solid var(--w-line); min-height: 100%; }
.post { display: flex; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-bottom: 1px solid var(--w-line); }
.post .pl { flex: 1; display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding-top: calc(3 * var(--u)); }
.post .img { display: block; height: calc(120 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--w-blk); margin-top: calc(4 * var(--u)); }

/* ================================================================ 2 · speed */
/* the claim on one line and why under it, then the race */
.spd-head .lede { max-width: 760px; }
.spd-stage { margin-top: var(--s-head); padding: 44px 48px 48px; }
/* the race (2026-10-25): each browser under its name alone ("chrome" in Hop Bounce on the wordmark's
   box, so the two names set at one size and on one baseline); the trading tab waits in the background
   and its hover card shows what that tab is doing right now. The tallies count every update since
   you looked away, and the ratio between them sits between them. */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.side { min-width: 0; }
.side-h { display: flex; justify-content: center; margin: 0 0 24px; }
.who { display: inline-flex; color: var(--cream); }
.who > svg { display: block; height: 50px; width: auto; color: var(--cream); }
.duo .art { height: 392px; }
.w-spd { position: absolute; left: 0; right: 0; top: 0; height: 392px; }
.w-spd .feed { max-width: 380px; }
/* the background tab: Chrome's and Hop's hover state, drawn over the active tab's corner so its
   rounded end stays whole */
.wt.hov { z-index: 1; color: var(--w-text); }
.wt.hov::before { content: ""; position: absolute; inset: calc(3 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--w-hover); }
.wt.hov > * { position: relative; }
.win.gen .wt.hov::before { background: var(--g-toolbar); }

.peek {
  --u: 1px;
  position: absolute; z-index: 3; left: calc(8 * var(--u)); top: calc(45 * var(--u)); width: min(calc(452 * var(--u)), calc(100% - 16 * var(--u)));
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u));
  background: var(--w-raised); border: 1px solid var(--w-line2); box-shadow: var(--card-shadow); color: var(--w-text); text-align: left;
}
.peek.gen { --w-raised: var(--g-toolbar); --w-line2: var(--g-line2); --w-text: var(--g-text); --w-text2: var(--g-text2); --w-text3: var(--g-text3); }
.pk-h { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.pk-h .logo { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); }
.pk-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-t b { font: 650 calc(14 * var(--u))/1.15 var(--body); color: var(--w-text); }
.pk-t .sub { font-size: calc(12 * var(--u)); line-height: 1.2; color: var(--w-text3); white-space: nowrap; }
.pk-h .px { margin-left: auto; font: 600 calc(16 * var(--u))/1 var(--mono); color: var(--w-text); }
.pk-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(10 * var(--u)); }
.peek .xr-chart { width: 100%; height: auto; margin-top: calc(10 * var(--u)); }
.peek .xr-t { font-size: 16px; }

.tally { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.tally .num { min-width: 3.4ch; font: 400 58px/0.9 var(--display); color: var(--g-text3); text-align: right; }
.tally.hop .num { color: var(--i-gold); }
.tally .what { font-size: 15px; line-height: 1.3; color: var(--muted); }
/* the ratio, centred between the two tallies */
.x21 {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 18px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2); white-space: nowrap;
}
.x21 b { font: 400 34px/1 var(--display); color: var(--i-gold); }
.x21 span { font-size: 13px; line-height: 1.2; color: var(--text); }
.xr-chart { width: 100%; height: auto; margin-top: 12px; }
.xr-axis { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.xr-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xr-chrome .xr-line { stroke: var(--g-text3); stroke-width: 4.5; }
.xr-hop .xr-line { stroke: var(--w-bolt); stroke-width: 3.6; }
.xr-ticks { fill: none; stroke-linecap: round; }
.xr-chrome .xr-ticks { stroke: var(--g-text3); stroke-width: 3; }
.xr-hop .xr-ticks { stroke: var(--w-bolt); stroke-width: 1.7; }
.xr-ring { fill: none; stroke: var(--w-bolt); stroke-width: 2.2; }
.xr-dot { fill: var(--w-bolt); }
.xr-hollow { fill: var(--panel); stroke: var(--g-text3); stroke-width: 3.5; }
.state { display: inline-flex; align-items: center; gap: 8px; height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(9 * var(--u)); border-radius: 999px; background: var(--w-surface2); font: 600 calc(13 * var(--u))/1 var(--body); color: var(--w-text2); white-space: nowrap; }
.peek.gen .state { background: var(--g-blk); }
.state.live { color: var(--w-bolt); background: var(--w-bolt-tint); }
.spd-say { max-width: 760px; margin: 44px auto 0; text-align: center; font-size: 20px; line-height: 1.5; color: var(--text); }
.spd-say b { color: var(--cream); font-weight: 600; }

.f-ink { fill: var(--ink); }

/* an icon set in a line of text */
.inl .ic { display: inline-block; margin: 0 0.1em; vertical-align: -3px; }

/* ================================================================ 3 · features: under the hood and the
   tools in one section (2026-10-25). First the engine, eight readouts set like a spec sheet, then the
   tools as cards, each a drawn window and a few lines, then the rest of the kit one line each. */
.ft-head .lede { max-width: 760px; }

/* the engine: Hop's number big, Chrome's struck under it where there's one to beat */
.eng { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid); margin-top: var(--s-head); }
.eng-t { min-width: 0; display: flex; flex-direction: column; padding: 26px 26px 30px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); }
.eng-k { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.eng-v { align-self: flex-start; margin-top: 30px; font: 400 clamp(38px, 3.4vw, 48px)/1 var(--display); color: var(--cream); white-space: nowrap; transform-origin: 50% 100%; }
/* a unit Hop Bounce has no glyph for (µ) is set in the text face, smaller, on purpose */
.eng-v .unit { margin-left: 0.14em; font: 600 0.42em/1 var(--body); color: var(--muted); }
.eng-c { margin-top: 12px; font: 500 13px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.eng-c s { position: relative; margin-right: 6px; text-decoration: none; color: var(--text); }
.eng-c s::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--strike, 1));
}
.eng-p { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--text); }

/* the tools: a card each, its window on a stage at the top */
.tools-h { margin-top: var(--s-block); }
/* and beside it the first round's footer made small (2026-10-26, the user: "a mini version of this old
   footer ... on like a little divider", then "the ground goes all the way across under the text and
   then the mountains end right before the text"): the ground, a rule like the footer's, runs the
   column's whole width under the words, and the burrow's hills fill the room from right after the
   words to the column's edge (scenes.js fits them to it), standing on the rule, which covers their cut */
.tools-top { position: relative; display: flex; align-items: flex-end; gap: 16px; margin-top: var(--s-block); padding-bottom: 16px; }
.tools-top::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 3px; background: var(--art-line); }
.tools-top .tools-h { flex: none; margin-top: 0; }
.burrow { position: relative; flex: 1; align-self: stretch; min-width: 0; }
.burrow-art { position: absolute; left: 0; bottom: -13px; width: 100%; height: 150px; }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid); margin-top: 40px; }
.tool { min-width: 0; display: flex; flex-direction: column; padding: 10px 10px 30px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 96px; }
.tool .stage { height: 400px; border-radius: 20px; }
.tool .stage > .art { position: absolute; }
.tool-copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 18px 0; }
.tool-copy .kick { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 600 15px/1 var(--body); color: var(--muted); }
.tool-copy .h4 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.05; }
.tool-copy .body { margin-bottom: 22px; font-size: 16px; max-width: 36em; }
.tool .keys { margin-top: auto; }
.tool .spec { align-self: stretch; margin-top: auto; }

/* the rest of the kit */
/* the rest of the kit: a row of small cards closing the tools' grid, on the same gap (a bento) */
.kit { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid); margin: var(--s-grid) 0 0; padding: 0; }
.kit li { min-width: 0; padding: 28px 26px 30px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); }
.kit h4 { margin-top: 18px; font-size: 22px; line-height: 1.1; }
.kit p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text); }
.kit kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; font: 600 12.5px/1.4 var(--body); white-space: nowrap; }

/* each feature's numbers, set like a spec sheet under its copy */
.spec { display: flex; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.spec > div { flex: 1 1 0; min-width: 0; padding: 20px 20px 0 0; }
.spec > div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.spec dt { font: 400 clamp(30px, 2.8vw, 40px)/1 var(--display); color: var(--cream); white-space: nowrap; }
/* a unit Hop Bounce has no glyph for (µ) is set in the text face, smaller, on purpose */
.spec .unit { margin-left: 0.18em; font: 600 0.5em/1 var(--body); color: var(--muted); }
.spec dd { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* 1 · layouts */
.st-split .art { left: 40px; right: 40px; top: 40px; bottom: 40px; }
.st-split .win { --u: 0.78px; height: 100%; }
.grid4 { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(2 * var(--u)); background: var(--w-line); }
.cell { position: relative; overflow: hidden; background: var(--w-surface); }
.cell.focus::after { content: ""; position: absolute; inset: 0; border: calc(2 * var(--u)) solid var(--w-accent); pointer-events: none; }
.pulse { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)); }
.pulse .hd { display: flex; gap: calc(8 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.prow { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--w-surface2); }
.prow .cn { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7 * var(--u)); }
.prow .tx { flex: 1; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.prow .vl { flex: none; width: calc(36 * var(--u)); }
.cn.c1 { background: var(--gold); } .cn.c2 { background: var(--blossom); } .cn.c3 { background: var(--sky); } .cn.c4 { background: var(--deep); }
.up { background: var(--w-ok); } .down { background: var(--w-bad); }
.minifeed { display: flex; flex-direction: column; }
.minifeed .post { padding: calc(12 * var(--u)); }
.minifeed .av { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.candles { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(40 * var(--u)); bottom: calc(14 * var(--u)); width: calc(100% - 24 * var(--u)); height: calc(100% - 54 * var(--u)); }
.cd-up { fill: var(--w-ok); } .cd-down { fill: var(--w-bad); }
.wk-up { stroke: var(--w-ok); stroke-width: 1.5; } .wk-down { stroke: var(--w-bad); stroke-width: 1.5; }
.cellhead { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.table { display: flex; flex-direction: column; padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.trow { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.8fr; align-items: center; gap: calc(10 * var(--u)); height: calc(26 * var(--u)); border-bottom: 1px solid var(--w-line); }
.trow .ln { height: calc(7 * var(--u)); }

/* 3 · token buttons: a crop round the post with the address, the window running off the stage */
.st-token .art { --u: 1px; left: 30px; top: 30px; width: 700px; }
.st-token .win { --u: 1px; height: 560px; }
.tok-wrap { display: flex; height: 100%; }
.rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--u)); width: calc(64 * var(--u)); padding-top: calc(20 * var(--u)); }
.rail .wi { width: calc(21 * var(--u)); height: calc(21 * var(--u)); stroke-width: 1.6; color: var(--w-text2); }
.tok-page { display: flex; flex-direction: column; width: calc(470 * var(--u)); min-height: 100%; border-left: 1px solid var(--w-line); border-right: 1px solid var(--w-line); }
/* a post on X, drawn: placeholder accounts with toy avatars, the name row, the text, the actions */
.tok-post { position: relative; display: flex; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--w-line); }
.tok-post .pl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.pav { flex: none; display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; }
.pav.c-sky { background: var(--sky); } .pav.c-blossom { background: var(--blossom); } .pav.c-gold { background: var(--gold); }
.pav svg { width: 56%; height: 56%; }
.ph { display: flex; align-items: baseline; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--w-text3); white-space: nowrap; }
.ph b { font-weight: 700; color: var(--w-text); }
.pt { font-size: calc(13.5 * var(--u)); line-height: 1.35; color: var(--w-text); white-space: nowrap; }
.pa { display: flex; gap: calc(30 * var(--u)); margin-top: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1; color: var(--w-text3); }
.pa span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.pa .wi { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.tok-post .ca { padding: calc(2 * var(--u)) calc(3 * var(--u)); border-radius: calc(3 * var(--u)); font: calc(12 * var(--u))/1.3 var(--mono); color: var(--w-text); background: var(--w-hover); }
/* the token button sits where the app puts it: on the address's left end, 34 px above it */
/* the address on its own paragraph after a blank line, the way calls are posted, so the button has room above it */
.ca-at { position: relative; align-self: flex-start; margin: calc(30 * var(--u)) 0 calc(2 * var(--u)); }
.tokchip {
  position: absolute; z-index: 2; left: 0; bottom: calc(100% + 8 * var(--u));
  display: inline-flex; align-items: center; height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u));
  border-radius: 999px; border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-fg);
  font: 600 calc(12 * var(--u))/1 system-ui, sans-serif; white-space: nowrap;
}
.cursor { position: absolute; z-index: 3; width: calc(18 * var(--u)); height: auto; overflow: visible; }
.cursor .cf { fill: var(--cream); stroke: var(--ground); stroke-width: 1.4; stroke-linejoin: round; }
.win .cursor .cf { fill: var(--w-text); stroke: var(--w-surface); }
.ca-at .tc { left: calc(150 * var(--u)); top: calc(8 * var(--u)); }

/* 2 · keybinds: Settings > Keyboard shortcuts, as the app draws it (src/ui/pages/settings), its
   first row recording a combo; the window runs off the stage's bottom */
.st-keys .art { left: 32px; right: 32px; top: 40px; bottom: -1px; }
.st-keys .win { --u: 0.74px; height: 100%; border-bottom: 0; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
.win .wi.gl { color: var(--w-text2); }
.kbcard { overflow: hidden; }
.kb-filter { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: 1px solid var(--w-line); color: var(--w-text3); font-size: calc(13 * var(--u)); }
.kb-filter .wi { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.kb-cat { padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-text3); }
.kb-row { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(36 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)); color: var(--w-text); }
.kb-row::before { content: ""; position: absolute; inset: 0; background: var(--w-accent-soft); opacity: 0; }
.kb-row > * { position: relative; }
.kb-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-k { flex: none; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.kbd {
  display: inline-flex; align-items: center; height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(5 * var(--u));
  border: 1px solid var(--w-line2); border-bottom-width: 2px; background: var(--w-surface); color: var(--w-text2);
  font-size: calc(11.5 * var(--u)); white-space: nowrap;
}
.kb-rec { display: none; color: var(--w-accent); font-weight: 650; font-size: calc(12 * var(--u)); white-space: nowrap; }
.kb-rec span { color: var(--w-text3); font-weight: 400; }
.kb-a { flex: none; display: flex; color: var(--w-text2); opacity: 0.55; }
.kb-a .wi { width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: calc(6 * var(--u)); box-sizing: border-box; }
/* recording (scenes.js): the row tints, its keys give way to the prompt, its buttons come up */
.kb-row.rec::before { opacity: 1; }
.kb-row.rec .kbd { display: none; }
.kb-row.rec .kb-rec { display: inline; }
.kb-row.rec .kb-a, .kb-row.hov .kb-a { opacity: 1; }
.kb-row.hov::before { background: var(--w-hover); opacity: 1; }
.st-keys > .cursor { --u: 1px; left: 0; top: 0; z-index: 4; visibility: hidden; }
.st-keys > .cursor .cf { fill: var(--w-text); stroke: var(--w-surface); }
/* Settings, as the app draws it (the keybinds window) */
.set { position: absolute; inset: 0; display: grid; grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr); grid-template-rows: calc(64 * var(--u)) minmax(0, 1fr); background: var(--w-bg); }
.set-top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(40 * var(--u)); padding: 0 calc(24 * var(--u)); border-bottom: 1px solid var(--w-line); }
.set-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); width: calc(150 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; color: var(--w-text); }
.set-brand .mark { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.set-search { flex: 1; max-width: calc(520 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--w-surface); border: 1px solid var(--w-accent-line); outline: calc(3 * var(--u)) solid var(--w-accent-soft); color: var(--w-text3); font-size: calc(14 * var(--u)); }
.set-search .wi { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.set-nav { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(20 * var(--u)) calc(12 * var(--u)); }
.set-nav span { display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); color: var(--w-text2); font-size: calc(13 * var(--u)); white-space: nowrap; }
.set-nav span.on { background: var(--w-row); color: var(--w-text); }
.set-nav span.on .wi { color: var(--w-accent); }
.set-main { padding: calc(28 * var(--u)) calc(28 * var(--u)) 0 calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.set-h { display: flex; align-items: center; gap: calc(11 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; color: var(--w-text); }
.set-h .box { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--w-surface2); color: var(--w-text2); }
.set-card { border-radius: calc(14 * var(--u)); border: 1px solid var(--w-line); background: var(--w-surface); }

/* 4 · shield: the ad-blocked article behind at the top right, the fake site's warning in front */
.st-shield .sh-ads { right: 24px; top: 24px; width: 74%; height: 58%; }
.st-shield .sh-fake { left: 24px; bottom: 24px; width: 66%; height: 62%; z-index: 2; }
.st-shield .art > .win { --u: 0.6px; height: 100%; }
.st-shield .sh-fake .win { box-shadow: var(--card-shadow); }
.sh-fake .wt .wi.bad, .sh-fake .wo .wi.bad { color: var(--w-bad); }
.warnpage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--warn-red); color: var(--warn-text); }
.warncard { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); width: calc(480 * var(--u)); text-align: center; }
.warncard .wi.big { width: calc(52 * var(--u)); height: calc(52 * var(--u)); stroke-width: 1.333; color: var(--warn-text); }
.warncard h4 { margin: 0; font: 700 calc(24 * var(--u))/1.2 var(--body); letter-spacing: -0.02em; color: var(--warn-text); }
.warncard .lead { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); width: 100%; }
.warncard .lead i { display: block; height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--warn-line); }
.hosts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); width: 100%; margin-top: calc(6 * var(--u)); }
.host { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); text-align: left; background: var(--warn-card); border: 1px solid var(--warn-line); }
.host .k { font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn-soft); }
.host .v { font: 600 calc(13 * var(--u))/1.2 var(--mono); }
.host.fake .v { color: var(--warn-fake); text-decoration: line-through; }
.host.real { background: var(--warn-real-bg); border-color: var(--warn-real-line); }
.host.real .v { color: var(--warn-real); }
.wbtns { display: flex; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
.wbtn { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 650; }
.wbtn.p { background: var(--warn-text); color: var(--warn-btn-fg); }
.wbtn.p .wi { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.wbtn.s { border: 1px solid var(--warn-soft); color: var(--warn-text); }
/* the blocked ads */
.sb.shield { color: var(--w-text2); font-variant-numeric: tabular-nums; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) calc(170 * var(--u)); gap: calc(28 * var(--u)); padding: calc(28 * var(--u)) calc(36 * var(--u)); }
.article .col { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.article .hero-b { height: calc(130 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--w-blk); margin: calc(6 * var(--u)) 0; }
.adslot {
  position: relative; display: grid; place-items: center; border-radius: calc(10 * var(--u));
  border: calc(1.5 * var(--u)) dashed var(--w-text3); color: var(--w-text3);
}
.adslot .wi { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.6; color: var(--i-sky); }
.adslot.wide { height: calc(36 * var(--u)); margin: calc(2 * var(--u)) 0; }
.adslot.tall { height: calc(210 * var(--u)); }
.adslot.gone { height: calc(14 * var(--u)); border-style: dashed; }

/* ================================================================ open source: a sky sticker card after the
   features (2026-10-25 after the toybox round's card; moved there from under the hero 2026-10-26). It
   and its art look the same in Night and Day: ink type on sky, the box drawn in the art colours, the
   button in ink. */
.os-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 32px;
  padding: 56px 48px 56px 64px; border-radius: clamp(20px, 2.2vw, 30px); background: var(--sky); color: var(--ink);
}
.os-h { font-size: clamp(52px, 6.2vw, 88px); line-height: 0.94; color: var(--ink); }
.os-lede { margin-top: 24px; font: 500 21px/1.45 var(--body); color: var(--ink); }
.nw { white-space: nowrap; }
/* the card's two buttons on one line, one height: the download, then the code (2026-10-26) */
.os-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
/* the download: a milk pill with the download glyph; until the installer is public it isn't a link,
   and a "coming soon" tag sits in it (the owner: "just make it say Coming soon") */
.os-dl {
  display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px 0 22px;
  border-radius: 999px; background: var(--milk); color: var(--ink); font: 400 24px/1 var(--display); text-decoration: none; white-space: nowrap;
  transition: transform 160ms cubic-bezier(.2, .8, .3, 1.2);
}
.os-dl .ic { color: var(--ink); }
a.os-dl:hover { transform: translateY(-2px); }
a.os-dl:active { transform: translateY(1px); }
.os-dl.soon { padding-right: 12px; cursor: default; }
.os-dl .tag { margin-left: 4px; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--milk); font: 600 13px/1 var(--body); }
/* read the code: GitHub's mark in Hop's pen on an ink pill */
.gh-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px 0 22px;
  border-radius: 999px; background: var(--ink); color: var(--milk); font: 400 24px/1 var(--display); text-decoration: none; white-space: nowrap;
  transition: transform 160ms cubic-bezier(.2, .8, .3, 1.2);
}
.gh-btn .ic { color: var(--milk); }
.gh-btn .gh-go { color: var(--sky); }
a.gh-btn:hover { transform: translateY(-2px); }
a.gh-btn:active { transform: translateY(1px); }
.gh-btn .tag { margin-left: 4px; padding: 7px 11px; border-radius: 999px; background: var(--sky); color: var(--ink); font: 600 13px/1 var(--body); }
.os-card :focus-visible { outline-color: var(--ink); }
.os-art .oc-art { display: block; width: 100%; max-width: 500px; height: auto; margin-left: auto; overflow: visible; }
.oc-toy, .oc-code { transform-box: fill-box; transform-origin: 50% 50%; }
.oc-lid { transform-box: view-box; transform-origin: 404px 222px; }

/* ================================================================ supported: every site Hop knows and the
   extensions that run in it (2026-10-25), a row for each way Hop goes with them, built in first; every
   brand's own logo at one size (house marks until 2026-10-26), every tile one size */
.stack-head .lede { max-width: 760px; }
.stack { margin-top: var(--s-head); border-top: 1px solid var(--line-2); }
.stk { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 64px; padding: 40px 0; border-bottom: 1px solid var(--line-2); }
/* every row's tag one pill, "built in" and "works with" alike (2026-10-26, the user) */
.stk-tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 10px; border-radius: 999px; font: 600 13px/1 var(--body); white-space: nowrap; color: var(--cream); background: var(--panel); border: 1px solid var(--line-2); }
.stk-h h3 { margin-top: 16px; font-size: 30px; line-height: 1.05; }
.stk-h > p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text); }
.stk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-content: start; }
.stk-list li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 108px; padding: 8px;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-align: center;
}
/* each brand's own logo in its app-icon form, a rounded square (2026-10-26, the user: "use their
   actual logos, not the house made ones", then "drawn like an app ... with rounded corners") */
.stk-list .brand { width: 40px; height: 40px; border-radius: 10px; }
.stk-list span { font-size: 13px; line-height: 1.2; color: var(--text); }

/* ================================================================ download: the app icon inside its ring,
   and round it a dotted ring as wide as the column where the trading sites ride as planets
   (2026-10-25); the page's last section since 2026-10-26, after the list of everything Hop supports,
   so the sites you just read about circle Hop; nothing under it until the installer is up */
.dl { padding-top: var(--s-sec); text-align: center; }
.dl-art { position: relative; }
.orbit-art { width: 100%; height: auto; overflow: visible; }
.orbit-line, .orbit-dots { fill: none; stroke: var(--art-line); stroke-width: 7; stroke-linecap: round; }
.icon-tile { fill: var(--icon-tile); stroke: var(--line-2); stroke-width: 3; }
.icon-bunny { fill: var(--icon-bunny); }
/* a planet's mark: ink on its gold, sky or blossom disc, in both halves */
.pl { color: var(--ink); }
.dl-go { margin-top: 24px; }
.dl .say { max-width: 34em; margin: 24px auto 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ================================================================ footer: Hop peeking up over its rule, then
   the nav's bookend (2026-10-26, the user: "its not properly centered ... redesign the footer bottom
   part"): the lockup at the left, the sections in a pill at the page's true centre, @hopbrowser in a
   pill at the right, all three one height on one centre line like the nav, a quiet copyright under */
.foot { margin-top: var(--s-sec); padding-bottom: 40px; }
/* the rule draws over his cut, so he looks to stand behind it */
.foot-line { position: relative; height: 6px; }
.foot-line::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 3px; background: var(--art-line); }
.foot-peek { position: absolute; right: 24px; bottom: 3px; width: 96px; height: auto; }
.foot-row { --nav-h: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-top: 48px; }
.foot-home { justify-self: start; display: block; color: var(--cream); line-height: 0; }
/* the lockup's ink at --nav-h, as in the nav */
.foot-home svg { height: calc(var(--nav-h) / 0.91); width: auto; margin: calc(var(--nav-h) * -0.045) 0; }
.foot-links { display: flex; align-items: center; gap: 2px; height: var(--nav-h); padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.foot-links a {
  display: inline-flex; align-items: center; height: calc(var(--nav-h) - 10px); padding: 0 18px; border-radius: 999px;
  color: var(--text); text-decoration: none; font: 400 18px/1 var(--display); white-space: nowrap; transition: color 200ms, background-color 200ms;
}
.foot-links a:hover { color: var(--cream); background: var(--panel-2); }
.foot-x {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: var(--nav-h); padding: 0 20px 0 10px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--cream); text-decoration: none; font: 400 18px/1 var(--display); white-space: nowrap;
  transition: border-color 160ms;
}
.foot-x:hover { border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
/* X's own app icon, rounded like every brand's tile */
.foot-x .logo { width: 30px; height: 30px; border-radius: 8px; }
.foot-copy { margin-top: 40px; text-align: center; font-size: 13px; line-height: 1; color: var(--muted); }
/* narrower than the three fit: stacked on the centre line */
@media (max-width: 1000px) {
  .foot-row { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
  .foot-home, .foot-x { justify-self: center; }
}

/* ================================================================ the toys, composed per stage
   Each stage: one big shape cropped by the stage edge and one or two small ones in clear space; no toy
   touches another or sits on UI. Positions are measured from the stage (desktop: 568 x 400). */
.stage > .art { z-index: 1; }
.duo .art .toy.back { z-index: 0; }

/* speed: Hop's window only (Chrome stays plain) */
.hp1 { width: 250px; right: -150px; top: -118px; }
.hp2 { width: 52px; right: -36px; top: 196px; }

/* layouts: a big gold blob behind the bottom-left corner, a ring and a spark in the top margin */
.st-split .k1 { width: 220px; left: -110px; bottom: -120px; }
.st-split .k2 { width: 26px; right: 132px; top: 8px; }
.st-split .k3 { width: 28px; left: 8px; top: 6px; }
/* keybinds: a big blossom blob behind the top-right corner, a gold spark in the top-left margin */
.st-keys .k1 { width: 230px; right: -125px; top: -118px; }
.st-keys .k2 { width: 28px; left: 8px; top: 7px; }
/* token buttons: a big sky blob behind the left edge, the dots over the empty top right */
.st-token .k1 { width: 220px; left: -160px; top: 200px; }
.st-token .k3 { width: 54px; right: 36px; top: 2px; }
/* shield: a big sky blob behind the bottom-right corner, a gold spark in the clear top left */
.st-shield .k1 { width: 230px; right: -125px; bottom: -125px; }
.st-shield .k2 { width: 40px; left: 48px; top: 46px; }

/* ================================================================ tablet */
@media (max-width: 1180px) {
  .eng, .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .stk { grid-template-columns: 1fr; gap: 24px; }
  .duo { grid-template-columns: 1fr; gap: 56px; }
  .x21 { position: static; transform: none; justify-self: center; margin-top: -16px; }
  .tools { grid-template-columns: 1fr; }
  .os-card { grid-template-columns: 1fr; padding: 40px 40px 48px; }
  .os-art { order: -1; }
  .os-art .oc-art { max-width: 420px; margin: 0 auto; }
}

/* ================================================================ phone */
@media (max-width: 760px) {
  .stk { padding: 28px 0 32px; }
  .stk-h h3 { font-size: 26px; }
  .stk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stk-list li { height: 96px; border-radius: 16px; gap: 10px; }
  .stk-list span { font-size: 12px; }

  .tabl { height: 44px; }
  .tabl > span { height: 44px; margin-left: 8px; font-size: 19px; padding: 0 18px 0 12px; }
  .lede { font-size: 18px; }

  .spd-stage { padding: 28px 16px 32px; border-radius: 24px; }
  .duo { gap: 48px; }
  .side-h { margin-bottom: 16px; }
  .who > svg { height: 40px; }
  .duo .art { height: 300px; }
  .w-spd { height: 300px; --u: 0.86px; }
  .w-spd .lay, .w-spd .wcap, .w-spd .gm, .w-spd .gx, .w-spd .wr { display: none; }
  .w-spd .wt { flex-basis: calc(150 * var(--u)); }
  .peek { --u: 0.86px; padding: 12px; }
  .tally { margin-top: 18px; }
  .tally .num { font-size: 48px; }
  .x21 { margin-top: -8px; height: 50px; }
  .x21 b { font-size: 30px; }
  .spd-say { font-size: 17px; margin-top: 32px; text-align: left; }
  .hp1 { width: 170px; right: -110px; top: -96px; }
  .duo .hp2 { display: none; }

  .eng-t { padding: 16px 14px 18px; border-radius: 18px; }
  .eng-k { gap: 8px; font-size: 10.5px; letter-spacing: 0.06em; }
  .eng-v { margin-top: 20px; font-size: 28px; }
  .eng-c { margin-top: 8px; font-size: 11.5px; white-space: normal; }
  .eng-p { margin-top: 12px; font-size: 13.5px; }

  .tools { margin-top: 28px; }
  /* the burrow under the words, on the same ground */
  .tools-top { flex-direction: column; align-items: stretch; gap: 0; }
  .burrow { flex: none; height: 137px; }
  .tool { padding: 8px 8px 24px; border-radius: 22px; }
  .tool .stage { height: 300px; border-radius: 16px; }
  .tool-copy { padding: 22px 12px 0; }
  .tool .spec dt { font-size: 28px; }
  .kit { grid-template-columns: 1fr; }
  .kit li { padding: 22px 20px 24px; border-radius: 20px; }

  .st-split .art { left: 16px; right: 16px; top: 24px; bottom: 24px; }
  .st-split .win { --u: 0.6px; }
  .st-keys .art { left: 16px; right: -1px; top: 24px; }
  .st-keys .win { --u: 0.8px; border-right: 0; border-radius: calc(12 * var(--u)) 0 0 0; }
  .st-keys .set { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .st-keys .set-top, .st-keys .set-nav, .st-keys .set-search { display: none; }
  .st-keys .set-main { padding-left: calc(20 * var(--u)); }
  .st-token .art { --u: 0.82px; left: 16px; top: 24px; width: 700px; }
  .st-token .win { --u: 0.82px; height: 400px; }
  .st-token .rail { display: none; }
  .st-shield .sh-ads { right: 14px; top: 16px; width: 80%; height: 58%; }
  .st-shield .sh-fake { left: 14px; bottom: 16px; width: 74%; height: 62%; }
  .st-shield .art > .win { --u: 0.5px; }
  .st-split .lay, .st-split .wcap, .st-split .wr .ib, .st-shield .wcap, .st-shield .wr, .st-keys .wcap, .st-keys .wr { display: none; }
  /* phone: the big cropped shape and one small toy per stage, in a clear strip */
  .st-split .k1 { width: 150px; left: -80px; bottom: -80px; }
  .st-split .k2 { display: none; }
  .st-split .k3 { width: 20px; left: 40px; top: 2px; }
  .st-keys .k1 { width: 150px; right: -84px; top: -84px; }
  .st-keys .k2 { width: 20px; left: 60px; top: 2px; }
  .st-token .k1 { display: none; }
  .st-token .k3 { width: 34px; right: 30px; top: -7px; }
  .st-shield .k1 { width: 150px; right: -80px; bottom: -80px; }
  .st-shield .k2 { display: none; }

  .os-card { padding: 28px 22px 34px; gap: 20px; border-radius: 22px; }
  .os-h { font-size: 48px; }
  .os-lede { margin-top: 16px; font-size: 18px; }
  /* a phone: the two buttons stacked, each the card's width, one height */
  .os-btns { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
  .gh-btn, .os-dl { height: 56px; padding: 0 18px 0 16px; gap: 10px; font-size: 21px; justify-content: center; }
  .os-dl.soon { padding-right: 10px; }
  .gh-btn .tag, .os-dl .tag { padding: 6px 9px; font-size: 12px; }

  /* the rings run off both edges, so the icon stays big enough to read (the toys' ring as wide as
     it was before the planets came) */
  .dl { overflow: hidden; }
  .dl-art { width: 173%; margin-left: -36.5%; }
  .foot-peek { right: 8px; width: 72px; }
  .foot-row { --nav-h: 40px; padding-top: 36px; }
  /* a phone: the links two by two on the centre line, without the pill */
  .foot-links { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; height: auto; gap: 4px 8px; padding: 0; border: 0; background: none; }
  .foot-links a { height: 36px; padding: 0 12px; font-size: 17px; }
  .foot-copy { margin-top: 32px; }
}
/* a narrow phone: the engine's readouts one to a row, with room for their numbers and lines */
@media (max-width: 560px) {
  .eng { grid-template-columns: minmax(0, 1fr); }
  .eng-t { padding: 20px 20px 22px; }
  .eng-k { font-size: 11.5px; }
  .eng-v { margin-top: 18px; font-size: 36px; }
  .eng-c { font-size: 12.5px; }
  .eng-p { font-size: 15px; }
}

/* smooth scrolling only for a reader's own jumps (a focused nav link), so scripted scrolls land at once */
html { scroll-behavior: auto; }
html:focus-within { scroll-behavior: smooth; }

/* the phone cut of the x-ray: the last 3 seconds, heavier lines, ticks that still stand apart */
.xr-t { font: 500 12px/1 var(--body); fill: var(--muted); }
.xr-m { display: none; }
.xr-m .xr-line { stroke-width: 6; }
.xr-hop.xr-m .xr-line { stroke-width: 5; }
.xr-chrome.xr-m .xr-ticks { stroke-width: 4.5; }
.xr-hop.xr-m .xr-ticks { stroke-width: 2.6; }
.xr-m .xr-axis { stroke-width: 2; }
.xr-m .xr-t { font-size: 17px; }
@media (max-width: 760px) {
  .xr-d { display: none; }
  .xr-m { display: block; }
}

/* room under the sticky nav for in-page jumps */
.stage, .dl { scroll-margin-top: 96px; }

/* ================================================================ 404
   One screen: the message up top, Hop peeking up from the bottom edge, a few toys round him. */
.lost { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.lost-in { width: 100%; padding-top: clamp(28px, 6vh, 72px); }
.lost-home { display: inline-block; color: var(--cream); line-height: 0; margin-bottom: clamp(32px, 6vh, 64px); }
.lost-home .lockup { height: 32px; width: auto; }
.lost .tabl { margin-bottom: clamp(24px, 4vh, 40px); }
.lost .h2 { max-width: 12ch; font-size: clamp(46px, 6vw, 84px); }
.lost .lede { max-width: 30em; margin-top: 20px; }
.lost .btn { margin-top: 28px; }
.lost-stage { position: relative; flex: 1 0 auto; min-height: clamp(200px, 30vh, 330px); margin-top: 24px; }
.lost-peek { position: absolute; left: 50%; bottom: 0; width: min(400px, 72vw); transform: translateX(-50%); color: var(--cream); line-height: 0; }
.lost-peek .peek-art { width: 100%; height: auto; }
.lost .lt1 { width: clamp(180px, 22vw, 300px); left: -90px; bottom: -120px; }
.lost .lt2 { width: 56px; left: calc(50% + min(250px, 38vw)); top: 22%; }
.lost .lt3 { width: 40px; left: calc(50% - min(290px, 42vw)); top: 38%; }

/* ================================================================ motion hooks (scenes.js)
   the feature windows' moving parts: where each grows from, and its in-between states */
.tokchip { transform-origin: 0 100%; }
.cursor { transform-origin: 0 0; }
.warncard .wi.big { transform-origin: 50% 100%; }
.wo .caret.off, .wt .pb.off { display: none; }
.sh-fake .wt .wi.bad.calm, .sh-fake .wo .wi.bad.calm { color: var(--w-text2); }
.tok-post .ca.idle { background: none; }
.keys .k.down { height: 34px; margin-top: 2px; border-bottom-width: 1px; }
.wo .wo-r.typing { color: var(--w-text); }
/* split view: the pointer that drags a divider, and the divider while it's held */
.st-split > .cursor { --u: 1px; left: 0; top: 0; z-index: 4; visibility: hidden; }
.st-split > .cursor .cf { fill: var(--w-text); stroke: var(--w-surface); }
.grid4.drag { background: var(--w-accent); }
@media (max-width: 760px) {
  .st-split > .cursor, .st-keys > .cursor { --u: 0.8px; }
}