/* ============================================================================
   whipfx.net — the site's look

   One world: the loading screen's blueprint, carried down the page. The sheet is the blueprint's
   navy with its fine grid; the features are drawn with whip's own pieces (night glass, the white
   pill, Signal Blue, the Director's card colours). Bricolage Grotesque for headings, Barlow for text,
   IBM Plex Mono for code only — whip's own faces, served from /assets/fonts.
   ============================================================================ */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url('fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url('fonts/bricolage-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('fonts/ibmplexmono-400-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  /* the sheet */
  --sheet: #071a33;
  --sheet-deep: #04101f;
  --grid-minor: rgba(191, 224, 255, 0.04);
  --grid-major: rgba(191, 224, 255, 0.08);
  --rule: rgba(191, 224, 255, 0.12);
  /* ink */
  --ink: #f1f6fd;
  --text: rgba(226, 236, 250, 0.84);
  --text-mid: rgba(214, 228, 248, 0.68);
  --signal: #60a5fa;
  --signal-ink: #93c5fd;
  /* whip's UI */
  --glass: rgb(10, 12, 18);
  --glass-line: rgba(255, 255, 255, 0.08);
  --pill: rgba(255, 255, 255, 0.93);
  --pill-ink: rgb(10, 12, 18);
  /* type */
  --display: 'Bricolage Grotesque', 'Barlow', 'Segoe UI', sans-serif;
  --body: 'Barlow', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  /* one column edge for every section: the content is at most --wrap wide, and never nearer the
     screen's side than the gutter. --edge is that edge as side padding on a full-width block. */
  --wrap: 1168px;
  --edge: max(var(--gutter), (100% - var(--wrap)) / 2);
}

* { box-sizing: border-box; }

html {
  background: var(--sheet-deep);
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--sheet);
  /* the blueprint's grid, a stronger line every fifth */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(96, 165, 250, 0.4); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sheet-deep); }
::-webkit-scrollbar-thumb { background: rgba(191, 224, 255, 0.2); border-radius: 5px; border: 2px solid var(--sheet-deep); }
::-webkit-scrollbar-thumb:hover { background: rgba(191, 224, 255, 0.34); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
}

/* ---- nav: over the hero it is just links; past it, a solid bar with the wordmark ---- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--edge) 14px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-solid {
  background: rgba(4, 12, 24, 0.94);
  border-bottom-color: var(--rule);
}
.site-nav__mark {
  display: block;
  width: 72px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.site-nav.is-solid .site-nav__mark { opacity: 1; transform: none; }
.site-nav__mark svg { display: block; width: 100%; height: auto; fill: #fff; }
.site-nav__links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.site-nav__links a, .site-nav--docs a {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: rgba(241, 246, 253, 0.86);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: color 0.15s;
}
.site-nav__links a:hover { color: #fff; }
.site-nav__gh {
  padding: 8px 16px;
  border: 1px solid rgba(214, 233, 255, 0.34);
  border-radius: 999px;
  text-shadow: none !important;
}
.site-nav__gh:hover { border-color: rgba(214, 233, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

/* ---- hero: the game's loading screen, full screen ---- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: #000;
}
.hero__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;   /* nothing to click in it, and the wheel scrolls the page */
}
.hero__next {
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(241, 246, 253, 0.82);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  transition: color 0.15s;
}
.hero__next:hover { color: #fff; }
.hero__next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- intro ---- */
.intro, .features, .also, .closing {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.intro { padding-block: clamp(80px, 12vw, 136px) clamp(56px, 8vw, 88px); }
.intro h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
/* "Made for FiveM Legacy & Enhanced": a stamp on the sheet, ticked like a wizard's finished step */
.made-for {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(191, 224, 255, 0.3);
  border-radius: 8px;
  background: rgba(4, 12, 24, 0.5);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.made-for::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.intro__lede {
  margin: 24px 0 0;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.5;
  max-width: 52ch;
  color: var(--text);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(214, 233, 255, 0.3);
  border-radius: 999px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(214, 233, 255, 0.6); }
.btn--pill { background: var(--pill); color: var(--pill-ink); border-color: transparent; }
.btn--pill:hover { background: #fff; border-color: transparent; }

/* ---- features ---- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--rule);
}
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature__copy { order: 2; }
.feature h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.feature p { margin: 18px 0 0; max-width: 52ch; }
.more {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  color: var(--signal-ink);
  text-decoration: underline;
  text-decoration-color: rgba(147, 197, 253, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s;
}
.more:hover { text-decoration-color: var(--signal-ink); }

/* a few figures under a section's text */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 24px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-mid);
}
.facts b {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.feature__art { margin: 0; min-width: 0; }
.feature__art figcaption { margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--text-mid); }

/* A drawing's ground: dark, like the screen it comes from. */
.art-arch svg, .art-director svg, .art-code pre, .pad-scene, .wpm, .tile__art {
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* 1. whip_core on the server, resources plugged in, players' games asking */
.art-arch svg {
  display: block;
  width: 100%;
  height: auto;
  background: #0b1220;
  font-family: var(--body);
}
.art-arch .sat rect { fill: rgba(10, 12, 18, 0.9); stroke: rgba(255, 255, 255, 0.16); }
.art-arch .sat rect:nth-of-type(4) { stroke: rgba(147, 197, 253, 0.7); stroke-dasharray: 5 4; }
.art-arch .sat text { fill: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 600; text-anchor: middle; }
.art-arch .sat text:nth-of-type(4) { fill: var(--signal-ink); }
.art-arch .plug path { stroke: var(--signal); stroke-width: 2; }
.art-arch .plug circle { fill: var(--signal); }
.art-arch .plug-label { fill: var(--signal-ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; }
.art-arch .core { fill: rgba(10, 12, 18, 0.94); stroke: rgba(255, 255, 255, 0.14); }
.art-arch .core-title { fill: #fff; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.art-arch .core-sub { fill: rgba(255, 255, 255, 0.5); font-size: 13.5px; }
.art-arch .owns circle { fill: #4ade80; }
.art-arch .owns text { fill: rgba(255, 255, 255, 0.9); font-size: 15px; font-weight: 600; }
.art-arch .flow path { fill: none; stroke-width: 2; }
.art-arch .flow .ask { stroke: rgba(255, 255, 255, 0.6); }
.art-arch .flow .ans { stroke: #4ade80; }
.art-arch .flow-label { fill: rgba(255, 255, 255, 0.62); font-size: 12.5px; font-weight: 600; }
.art-arch .flow-label--ans { fill: #4ade80; }
.art-arch .client rect { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.24); }
.art-arch .client text { fill: rgba(255, 255, 255, 0.72); font-size: 13.5px; font-weight: 500; text-anchor: middle; }

/* 2. Director cards in the editor's Board style (whip's director.css .dr-board; colours: base.css --dr-solid-*,
   --dr-board-*, the canvas --dr-canvas). Each card's head in its kind's colour under dark ink, its step in the run
   at the end; the outcomes that went wrong red; the wires in the colour of the card they leave, red dots from a bad
   outcome; cards on a hard shadow over the canvas's dot grid. */
.art-director svg {
  display: block;
  width: 100%;
  height: auto;
  background: rgb(8, 14, 26);
  font-family: var(--body);
}
.art-director #dr-dots circle { fill: rgb(33, 47, 72); }
.k-events { --k: rgb(255, 123, 107); }
.k-goals  { --k: rgb(255, 210, 63); }
.k-player { --k: rgb(190, 156, 255); }
.k-dialog { --k: rgb(79, 209, 197); }
.art-director .card .lift { fill: rgba(0, 0, 0, 0.55); }
.art-director .card .body { fill: rgb(16, 22, 34); }
.art-director .card .head { fill: var(--k); }
.art-director .card .title { fill: rgb(10, 12, 18); font-family: var(--display); font-size: 15.5px; font-weight: 800; letter-spacing: -0.2px; }
.art-director .card .step { fill: rgb(10, 12, 18); fill-opacity: 0.38; font-family: var(--display); font-size: 20px; font-weight: 800; }
.art-director .card .pin { fill: rgb(16, 22, 34); stroke: rgba(255, 255, 255, 0.93); stroke-width: 2; }
.art-director .card .pin.wired { fill: rgba(255, 255, 255, 0.93); }
.art-director .card .pin.bad { stroke: #f87171; }
.art-director .card .pin.bad.wired { fill: #f87171; }
.art-director .card .pin-l { fill: rgba(255, 255, 255, 0.93); font-size: 12.5px; font-weight: 700; }
.art-director .card .pin-l.bad { fill: #f87171; }
.art-director .card .rule { stroke: rgba(255, 255, 255, 0.08); }
.art-director .card .label { fill: rgba(255, 255, 255, 0.48); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; }
.art-director .card .val { fill: rgba(255, 255, 255, 0.93); font-size: 13px; font-weight: 600; }
.art-director .card .who { fill: var(--k); font-family: var(--display); font-size: 13px; font-weight: 800; }
.art-director .card .quote { fill: rgba(255, 255, 255, 0.93); font-size: 13px; }
.art-director .card .edge { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.art-director .wires path { fill: none; stroke: var(--k); stroke-width: 2.5; stroke-linecap: round; }
.art-director .wires .bad { stroke: #f87171; stroke-dasharray: 2 6; }
/* after a Test (director.css .ran, .ran-end): the cards the run went through ringed green, the one it ended on
   glowing, and the wires it took green */
.art-director .card.ran .edge { stroke: rgba(74, 222, 128, 0.5); stroke-width: 1.5; }
.art-director .card.ran-end .edge { stroke: #4ade80; stroke-width: 2.5; }
.art-director .card .glow { fill: rgba(74, 222, 128, 0.5); }
.art-director .wires .ran { stroke: #4ade80; stroke-width: 2.6; }

/* 4. SecureEvent code + the Event Monitor */
.art-code pre {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  background: rgba(3, 9, 19, 0.92);
  border: 1px solid var(--glass-line);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: #dce8f8;
  tab-size: 4;
}
.art-code .c { color: rgba(214, 228, 248, 0.5); }
.art-code .s { color: #f4d59c; }
.art-code .n { color: #86efac; }
.art-code .k { color: #c4b5fd; }
.art-code .f { color: #93c5fd; }
.monitor {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  font-size: 14px;
}
.monitor__head { font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 6px; }
.monitor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.monitor__row .ev { font-family: var(--mono); font-size: 13px; color: rgba(255, 255, 255, 0.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor__row .st { font-weight: 600; }
.monitor__row .ok { color: #86efac; }
.monitor__row .no { color: #fcd34d; }
.monitor__row .ms { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }
/* a refusal, marked as the Event Monitor marks it (event-monitor.css .mon-refused: amber on the left) */
.monitor__row--no { box-shadow: inset 3px 0 0 #fbbf24; padding-left: 14px; margin-left: -14px; }

/* 3. The inventory on a pad (inventory.css): a slot in the controller's highlight, the left stick's circle on it,
   and the item card where the circle put it (16 px right, 16 px up), its buttons at the foot. Drawn at whip's own
   sizes and zoomed as a whole, as the game zooms the inventory. */
.pad-scene {
  position: relative;
  height: 470px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, rgba(96, 165, 250, 0.08), transparent 60%), #0b0f16;
}
/* the two scenes, one at a time (site.js swaps .is-on) */
.pad-scene__one {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.pad-scene__one.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.pad-scene__one--rad { display: block; padding: 0; }

/* The radial's quick-select wheel (ui.css "5. RADIAL MENU", ui.js radBuild / hkSelect): glass slabs in a ring,
   the aimed one lifted 14 out and white, a beam to it, and the stat disc in the middle showing it. Built by
   site.js at ui.js's geometry, in its 560 design px, zoomed as the game zooms it. */
.pad-rad { position: absolute; left: 50%; top: 200px; width: 0; height: 0; }
.pad-rad .rad { position: relative; width: 0; height: 0; zoom: 0.62; font-family: var(--body); user-select: none; }
.rad-wheel { position: absolute; left: -280px; top: -280px; width: 560px; height: 560px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5)); }
.rad-wheel > svg, .rad-slab > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.rad-beam { opacity: 0; transition: opacity 0.2s ease; }
.rad.chosen .rad-beam { opacity: 1; }
.rad-slab { position: absolute; left: 0; top: 0; width: 560px; height: 560px; transition: transform 0.22s var(--ease); }
.rad-slab.on { transform: translate(var(--lx), var(--ly)); }
.rad-shape { fill: rgba(10, 12, 18, 0.84); stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; stroke-linejoin: round; transition: fill 0.15s ease, stroke 0.15s ease; }
.rad-slab.on .rad-shape { fill: rgba(255, 255, 255, 0.95); stroke: rgba(255, 255, 255, 0.95); }
.rad-face { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* the picture alone: 88 design px, clear of the slab's edges at every slab angle (ui.js RAD_HK_PIC) */
.rad-icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; }
.rad-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.rad-slab.on .rad-art { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25)); }
.rad-disc { position: absolute; left: 192px; top: 192px; width: 176px; height: 176px; isolation: isolate; }
.rad-disc-clip { position: absolute; inset: 17px; border-radius: 50%; overflow: hidden; }
.rad-disc-core { position: absolute; inset: 0; border-radius: 50%; background: rgba(12, 14, 20, 0.96); box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.55); }
.rad-disc-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(255, 255, 255, 0.93); transition: height 0.25s ease; }
.rad.chosen .rad-disc-fill.full { height: 100%; transition: height 0.5s var(--ease); }
.rad-disc-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.85);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rad.chosen .rad-disc-ring { border-color: #60a5fa; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.9), 0 0 18px rgba(96, 165, 250, 0.35), 0 0 42px rgba(96, 165, 250, 0.15); }
.rad-hero { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); display: none; align-items: center; justify-content: center; }
.rad.chosen .rad-hero { display: flex; }
.rad-hero img { width: 100%; height: 100%; object-fit: contain; }
/* neutral, on a pad: the stick cap being pushed round in the disc (R: the right stick works this wheel) */
.rad-hint { position: absolute; inset: 0; display: none; }
.rad:not(.chosen) .rad-hint { display: block; }
.rad-stick-well { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); box-sizing: border-box; }
.rad-stick-cap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: rgb(10, 12, 18);
  transform: translate(-50%, -50%);
  animation: radStickCap 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes radStickCap {
  0%, 12%, 100% { transform: translate(-50%, -50%); }
  25%  { transform: translate(-50%, calc(-50% - 9px)); }
  37%  { transform: translate(-50%, -50%); }
  50%  { transform: translate(calc(-50% + 9px), -50%); }
  62%  { transform: translate(-50%, -50%); }
  75%  { transform: translate(-50%, calc(-50% + 9px)); }
  87%  { transform: translate(calc(-50% - 9px), -50%); }
}
.rad-pill {
  position: absolute;
  left: 0;
  top: 294px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
.rad-pill-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.75); }
.rad.chosen .rad-pill-name { color: rgba(255, 255, 255, 0.93); }
.rad-pill-desc, .rad-pill-how { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.rad.chosen .rad-pill-how, .rad:not(.chosen) .rad-pill-desc, .rad-pill-desc:empty { display: none; }
/* the hint strip under the wheels, on a pad */
.pad-rad-hints { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.pad-rad-hints span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.93); }
.pad-rad-hints img { height: 22px; width: auto; }
.pad-inv { position: relative; width: 446px; height: 300px; zoom: 1.25; font-family: var(--body); }
@media (max-width: 760px) { .pad-inv { zoom: 1; } }
.pad-slot {
  position: absolute;
  left: 0;
  top: 48px;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(96, 165, 250, 0.15);                     /* --ui-slot-bg-chosen */
  border: 2px solid rgba(255, 255, 255, 0.93);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.93), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pad-slot img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.pad-slot__num { position: absolute; top: 4px; left: 6px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.48); }
.pad-circle {                                               /* #inv-pad-cursor .inv-pad-ring, over something it can pick */
  position: absolute;
  left: 107px;
  top: 74px;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.93);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.45);
  transform: scale(0.78);
}
.pad-circle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.93); }
.inv-card {                                                 /* .inv-tooltip .inv-pop */
  position: absolute;
  left: 144px;
  top: 79px;
  width: 300px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(10, 12, 18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.inv-card__name { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.93); }
.inv-card__desc { margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.5); }
.inv-card__rows { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }   /* .inv-tooltip-rows */
.inv-card__row { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.48); }
.inv-card__row span:last-child { color: rgba(255, 255, 255, 0.93); font-variant-numeric: tabular-nums; }
.inv-card__hints {                                          /* .inv-pad-hints: on a pad only, at the card's foot */
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.inv-card__hints span { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.93); }
.inv-card__hints img { height: 20px; width: auto; }
.dial-frame { display: block; width: 100%; border: 0; pointer-events: none; }

/* ---- 6-10: the tiles ---- */
.also {
  padding-block: clamp(56px, 8vw, 96px) clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.also__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.022em; margin-bottom: clamp(28px, 4vw, 44px); }
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
}
.tile { min-width: 0; }
.tile--wide { grid-column: 1 / -1; }
.tile__art { position: relative; height: 340px; overflow: hidden; margin-bottom: 24px; }
.tile h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.12; letter-spacing: -0.015em; }
.tile p { margin: 12px 0 0; max-width: 60ch; font-size: 17px; }
.tile .more { margin-top: 14px; }

/* 6. Prompts in the world (html/interact3d/badge.html, the keycap: faint, in reach, looked at) */
.world {
  background-color: #0b1d36;
  background-image:
    linear-gradient(rgba(191, 224, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 224, 255, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* The column: every option is the focused keycap (white, the icon dark), the chosen one whole and the rest
   at 45%, a step of 1.6 caps apart (the cell is the cap / 0.78, the step 1.25 cells). The chosen one sits at
   the anchor and the list slides through it; its name hangs off its right edge and rides the slide with it.
   --shift is how far the list has slid (site.js: 0 at rest, 1 mid-step). */
.opts-view {
  --cap: 52px;
  --step: calc(var(--cap) * 1.6);
  --slide: 260ms;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(transparent 7%, #000 32%, #000 68%, transparent 95%);
  mask-image: linear-gradient(transparent 7%, #000 32%, #000 68%, transparent 95%);
}
.opts-col {
  position: absolute;
  left: clamp(26px, 22%, 130px);
  top: calc(46% - var(--cap) / 2);
  width: var(--cap);
  height: var(--cap);
  transform: translateY(calc(var(--shift, 0) * var(--step) * -1));
  transition: transform var(--slide) cubic-bezier(0.22, 0.8, 0.3, 1);
}
.opt {
  position: absolute;
  left: 0;
  top: calc(var(--k) * var(--step));
  display: flex;
  align-items: center;
  height: var(--cap);
}
.opt__cap {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--cap);
  height: var(--cap);
  border-radius: 26%;
  background: #fff;
  color: rgb(10, 12, 18);
  box-shadow: inset 0 calc(var(--cap) * -0.11) 0 rgba(10, 12, 18, 0.16), 0 0 0 3px rgba(0, 0, 0, 0.9), 0 4px 6px rgba(0, 0, 0, 0.55);
  opacity: 0.45;
  transition: opacity var(--slide) ease;
}
.opt__cap svg { width: 59%; height: 59%; margin-top: calc(var(--cap) * -0.05); }
.opt__name {
  margin-left: calc(var(--cap) * 0.42);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000,
    -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000,
    0 4px 14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 140ms ease;
}
.opt.is-sel .opt__cap, .opt.is-sel .opt__name { opacity: 1; }
/* re-seated after a step (site.js): the same picture, so nothing may animate */
.opts-col.is-reseat, .opts-col.is-reseat .opt__cap, .opts-col.is-reseat .opt__name { transition: none; }

/* 7. A player's gauges (whip's black HUD skin, hud-skin.css: a black disc in a white rim, the RIM is the
   reading, draining clockwise from the top) over a car's (vhud/demo.html: the dial's own gauges, no dial) */
@property --sh-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 100;
}
.art-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: radial-gradient(110% 80% at 50% 110%, #24303f, #0b0f16 70%);
}
.art-stats__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.art-stats__label + .hb-row { margin: 8px 0 22px; }
/* as wide as the car's row under it (vhud/demo.js fills 92% of the frame), the gauges sized to fill it */
.hb-row {
  flex: none;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 64px));
  justify-content: center;
  gap: 7px;
  width: 92%;
}
.hb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  --rim: #fff;
  --track: rgba(255, 255, 255, 0.16);
  transition: --sh-p 1.4s linear;
}
.hb::before {           /* the badge's black edge round the rim */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px #000, 0 2px 8px rgba(0, 0, 0, 0.55);
}
.hb-disc {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #07080b;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.9);
}
.hb::after {            /* the rim: white up to the level, the track after it */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(var(--rim) calc(var(--sh-p) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.hb svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  fill: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
.hb.critical { --rim: #f87171; --track: rgba(248, 113, 113, 0.22); }
.hb.critical svg { fill: #f87171; }
/* talking: the voice gauge's rim and glyph in the accent, the edge glowing (hud-skin.css .talking) */
.hb.talking { --rim: #60a5fa; --track: rgba(96, 165, 250, 0.15); }
.hb.talking svg { fill: #60a5fa; }
.hb.talking::before { box-shadow: 0 0 0 2.5px #000, 0 0 12px rgba(96, 165, 250, 0.45); }
.art-stats .dial-frame { flex: none; height: 128px; margin-top: 4px; }

/* 8. A piece of furniture with the furnisher's arrows on it (furnisher.css .fz-gz-*), drawn as a blueprint */
.art-home {
  background-color: #0d2240;
  background-image:
    linear-gradient(rgba(191, 224, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 224, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.art-home svg { display: block; width: 100%; height: 100%; font-family: var(--body); }
.art-home .sofa rect, .art-home .sofa path { fill: rgba(214, 233, 255, 0.05); stroke: rgba(214, 233, 255, 0.78); stroke-width: 2; }
.art-home .dim path { stroke: rgba(214, 233, 255, 0.5); stroke-width: 1.5; }
.art-home .dim text { fill: rgba(214, 233, 255, 0.72); font-family: var(--mono); font-size: 13px; text-anchor: middle; }
.art-home .gizmo .under { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 7; stroke-linecap: round; }
.art-home .gizmo .ax { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.art-home .gizmo .x { stroke: #f25f5c; }
.art-home .gizmo .y { stroke: #5ccf7f; }
.art-home .gizmo .z { stroke: #5b8def; }
.art-home .gizmo text { font-size: 14px; font-weight: 700; }
.art-home .gizmo .lx { fill: #f25f5c; }
.art-home .gizmo .ly { fill: #5ccf7f; }
.art-home .gizmo .lz { fill: #5b8def; }
.art-home .gizmo .dot { fill: rgba(255, 255, 255, 0.92); stroke: rgba(0, 0, 0, 0.6); stroke-width: 2; }

/* 9. The pockets (inventory.css: the house panel, the weight bar, slots with keycaps 1-5) */
.art-inv {
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(110% 80% at 50% 110%, #1f2836, #0b0f16 70%);
}
.inv {
  width: min(100%, 460px);
  padding: 16px;
  border-radius: 16px;
  background: radial-gradient(120% 60% at 0% 0%, rgba(96, 165, 250, 0.07), transparent 60%), rgb(10, 12, 18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.inv__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.inv__title { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.93); }
.inv__weight { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.inv__weight b { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.inv__weight i {
  display: block;
  width: 140px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(#60a5fa, #60a5fa) 0 0 / var(--w) 100% no-repeat, rgba(255, 255, 255, 0.08);
}
.inv__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.slot img { position: absolute; left: 50%; top: 44%; width: 52%; height: 62%; object-fit: contain; transform: translate(-50%, -50%); }
.slot__key {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: rgb(10, 12, 18);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.slot__name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot__n { position: absolute; top: 4px; right: 6px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; }
.slot--empty { background: rgba(255, 255, 255, 0.015); border-style: dashed; border-color: rgba(255, 255, 255, 0.1); }

/* 10. Performance: three before-and-after figures */
.perf {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 14px;
  background: rgba(4, 12, 24, 0.62);
  border: 1px solid var(--rule);
}
.perf__copy p { margin: 12px 0 0; font-size: 17px; }
.perf__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.perf__nums dt {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.perf__nums dd { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-mid); }

/* 5. The /whip panel (whip-panel.css), drawn at 640 x 410 and zoomed to the column by site.js (460 wide,
   without the list column, on a phone). Its pieces at whip's own sizes, a little under: the group words
   and tabs in the display face, the chosen card (a blue tint in a white ring), the white pill for the
   primary action only, the semantic colours on pills and marks. */
.wpm-fit { width: 100%; }
.wpm {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 410px;
  overflow: hidden;
  background: radial-gradient(120% 60% at 0% 0%, rgba(96, 165, 250, 0.07), transparent 60%), var(--glass);
  border: 1px solid var(--glass-line);
  color: rgba(255, 255, 255, 0.93);
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.35;
}
.wpm.is-compact { width: 460px; }
.wpm-head { display: flex; flex: none; align-items: flex-end; gap: 22px; padding: 16px 16px 8px; }
.wpm-title { padding-bottom: 6px; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.wpm-words { display: flex; align-items: flex-end; gap: 14px; }
.wpm-word {
  position: relative;
  padding: 0 0 6px;
  border: 0;
  background: none;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.34);
  white-space: nowrap;
  transition: color 0.16s ease;
}
button.wpm-word { cursor: pointer; }
button.wpm-word:hover { color: rgba(255, 255, 255, 0.62); }
button.wpm-word:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.6); outline-offset: 3px; border-radius: 3px; }
.wpm-word.is-on, .wpm-word.is-on:hover { color: rgba(255, 255, 255, 0.93); }
.wpm-word.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--pill); }
.wpm-scenes { position: relative; flex: 1; min-height: 0; }
.wpm-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.wpm-scene.is-on { opacity: 1; visibility: visible; }
.wpm-tabs {
  position: relative;
  display: flex;
  flex: none;
  gap: 16px;
  margin: 0 16px;
  padding-top: 4px;
  overflow: hidden;
  background: linear-gradient(var(--glass-line), var(--glass-line)) left bottom / 100% 1px no-repeat;
}
.wpm-tabs span { position: relative; flex: none; padding-bottom: 8px; font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.wpm-tabs .is-on { color: rgba(255, 255, 255, 0.93); }
.wpm-tabs .is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--pill); }

/* a list beside what is picked from it */
.wpm-split { display: grid; flex: 1; grid-template-columns: 196px minmax(0, 1fr); min-height: 0; }
.wpm-list { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; overflow: hidden; border-right: 1px solid var(--glass-line); }
.wpm-detail { min-width: 0; padding: 12px 16px; overflow: hidden; }
.wpm-search {
  display: flex;
  align-items: center;
  flex: none;
  height: 26px;
  margin-bottom: 6px;
  padding: 0 10px 0 27px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='M11.2 11.2L15.5 15.5'/%3E%3C/svg%3E") 9px 50% / 11px no-repeat;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}
/* chips: a segmented choice (.wp-tab), the chosen one the white pill */
.wpm-chips { display: flex; flex: none; gap: 4px; margin-bottom: 6px; overflow: hidden; }
.wpm-chips span { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.wpm-chips .is-on { background: var(--pill); color: var(--pill-ink); font-weight: 700; }
.wpm-row {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
}
.wpm-row b, .wpm-line b, .wpm-status b { overflow: hidden; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wpm-row small, .wpm-line small { grid-column: 1 / -1; margin-top: 1px; overflow: hidden; font-size: 10px; color: rgba(255, 255, 255, 0.5); text-overflow: ellipsis; white-space: nowrap; }
.wpm-row--av { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
.wpm-row--av .wpm-av { grid-row: 1 / span 2; }
.wpm-row--av small { grid-column: 2; }
.wpm-row.is-on { background: rgba(96, 165, 250, 0.15); border-color: rgba(255, 255, 255, 0.65); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65); }
.wpm-row.is-on b { font-weight: 700; }
/* someone's initials in a disc; the dot says they are online */
.wpm-av {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
}
.wpm-dot { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px var(--glass), 0 0 4px #4ade80; }
.wpm-av--lg { width: 52px; height: 52px; font-size: 18px; }
.wpm-av--lg .wpm-dot { right: 2px; bottom: 2px; width: 11px; height: 11px; }
.wpm-av--sm { width: 24px; height: 24px; font-size: 8.5px; }
.wpm-av--sm .wpm-dot { width: 7px; height: 7px; }
.wpm-who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wpm-h { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.wpm-id { font-family: var(--body); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.wpm-pills { display: flex; gap: 4px; margin-top: 6px; }
.wpm-pill { flex: none; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.wpm-pill--ok { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.wpm-pill--warn { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.wpm-pill--err { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.wpm-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.wpm-btns--top { margin: 10px 0 6px; }
.wpm-gap { flex: 1; }
.wpm-btn { flex: none; padding: 5px 10px; border: 1px solid var(--glass-line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); font-size: 10px; font-weight: 700; white-space: nowrap; }
.wpm-btn--primary { border-color: var(--pill); background: var(--pill); color: var(--pill-ink); }
.wpm-btn--danger { border-color: #f87171; background: rgba(248, 113, 113, 0.12); color: #f87171; }
.wpm-btn--ghost { border-color: transparent; background: none; color: rgba(255, 255, 255, 0.5); }
/* a pane's groups: flat runs under a display-face head, a hairline between them; the caret turns down when open */
.wpm-gh { display: flex; align-items: center; gap: 6px; padding: 9px 0 6px; border-top: 1px solid var(--glass-line); font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.62); }
.wpm-btns + .wpm-gh { border-top: 0; }
.wpm-gh::before {
  content: '';
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wpm-gh.is-open { color: rgba(255, 255, 255, 0.93); }
.wpm-gh.is-open::before { transform: rotate(90deg); }
.wpm-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 3px 0 5px 17px; }
.wpm-line .wpm-av { grid-row: 1 / span 2; }
.wpm-line small { grid-column: 2; }

/* a wizard: its title, the step rail (the current step the white pill, a done one ticked green, the rest
   not reached yet), then the step */
.wpm-pane { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 12px 16px 14px; overflow: hidden; }
.wpm-steps { display: flex; flex: none; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; padding: 9px 0 10px; border-bottom: 1px solid var(--glass-line); }
.wpm-steps span { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.wpm-steps i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 8.5px; font-style: normal; font-weight: 700; }
.wpm-steps .is-now { background: var(--pill); color: var(--pill-ink); font-weight: 700; }
.wpm-steps .is-now i { background: rgba(10, 12, 18, 0.14); }
.wpm-steps .is-done i { background: rgba(74, 222, 128, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.wpm-steps .is-locked { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.25); }
.wpm-pick { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 164px; gap: 14px; min-height: 0; }
.wpm-pick-main { min-width: 0; }
.wpm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wpm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 9.5px;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
.wpm-tile img { width: 100%; height: 44px; object-fit: contain; }
.wpm-tile.is-on { background: rgba(96, 165, 250, 0.15); border-color: rgba(255, 255, 255, 0.65); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65); }
.wpm-pick-side { display: flex; flex-direction: column; min-width: 0; }
.wpm-pick-side img { width: 100%; height: 92px; margin-bottom: 8px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); object-fit: contain; }
.wpm-pick-side b { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.wpm-pick-side small { font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.wpm-pick-side .wpm-field { margin-top: 10px; }
.wpm-input--hint { color: rgba(255, 255, 255, 0.3); }
.wpm-ranks { display: flex; flex-direction: column; gap: 6px; }
.wpm-rank {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px auto 56px;
  align-items: end;
  gap: 10px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
}
.wpm-rank.is-top { border-color: rgba(255, 255, 255, 0.65); }
.wpm-rank > small { align-self: center; font-size: 10px; color: rgba(255, 255, 255, 0.5); text-align: center; }
.wpm-rank > .wpm-btn { align-self: center; }
.wpm-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wpm-field em { font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); }
.wpm-input { display: flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--glass-line); border-radius: 7px; background: rgba(255, 255, 255, 0.04); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpm-toggles { display: flex; gap: 4px; padding-bottom: 2px; }
.wpm-toggles span { padding: 3px 9px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.28); }
.wpm-toggles .is-on { border-color: rgba(255, 255, 255, 0.65); background: rgba(96, 165, 250, 0.15); color: rgba(255, 255, 255, 0.93); }
.wpm-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 10px; }

/* status rows: one part of a thing and how it stands (a tick in a ring, the tick breaking out of it) */
.wpm-status { display: grid; grid-template-columns: 16px 80px minmax(0, 1fr); align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--glass-line); }
.wpm-status:last-child { border-bottom: 0; }
.wpm-status small { overflow: hidden; font-size: 10px; color: rgba(255, 255, 255, 0.48); text-overflow: ellipsis; white-space: nowrap; }
.wpm-mk {
  width: 16px;
  height: 16px;
  background: #4ade80;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='10' r='6.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5.4 9.6 8.6 12.9 16.4 2.6' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='10' r='6.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5.4 9.6 8.6 12.9 16.4 2.6' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Config: a card per setting, config.lua's default beside it; a changed one blue in a blue ring until Apply */
.wpm-detail--cfg { display: flex; flex-direction: column; gap: 7px; }
.wpm-cfg { flex: none; padding: 10px 14px 11px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.wpm-cfg.is-edited { border-color: rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.07); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.3); }
.wpm-cfg-head { display: flex; align-items: baseline; gap: 8px; }
.wpm-cfg-head b { font-family: var(--display); font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.wpm-cfg-head code { font-family: var(--mono); font-size: 8.5px; color: rgba(255, 255, 255, 0.48); }
.wpm-cfg-edit { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.wpm-cfg-edit .wpm-input { width: 110px; }
.wpm-cfg-edit small { font-size: 10px; color: rgba(255, 255, 255, 0.48); }
.wpm-cfg-edit .wpm-btn { margin-left: auto; }
.wpm-apply { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 7px 8px 7px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.wpm-apply span:first-child { flex: 1; font-size: 11px; font-weight: 600; }

/* a phone: the picked thing without the list it was picked from */
.wpm.is-compact .wpm-title, .wpm.is-compact .wpm-list, .wpm.is-compact .wpm-pick-side { display: none; }
.wpm.is-compact .wpm-head { padding-top: 14px; }
.wpm.is-compact .wpm-words { gap: 11px; }
.wpm.is-compact .wpm-split, .wpm.is-compact .wpm-pick { grid-template-columns: minmax(0, 1fr); }

/* ---- closing ---- */
.closing {
  padding-block: clamp(72px, 10vw, 128px);
  border-top: 1px solid var(--rule);
}
.closing h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.028em; }
.closing p { margin: 20px 0 0; max-width: 56ch; font-size: 20px; }

/* ---- footer ---- */
.site-foot {
  padding: 36px var(--edge) calc(36px + env(safe-area-inset-bottom, 0px));
  background: var(--sheet-deep);
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--text-mid);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--text); text-underline-offset: 3px; }

/* ---- narrow screens ---- */
@media (max-width: 900px) {
  .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__copy { order: 0; }
  .art-code pre { font-size: 12.5px; padding: 18px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .perf { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .perf__nums { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tile__art { height: 300px; }
  .pad-scene { height: 410px; }
  .pad-scene__one { padding: 20px 8px; }
  .pad-inv { zoom: 0.76; }
  .pad-rad { top: 172px; }
  .pad-rad .rad { zoom: 0.54; }
  .pad-rad-hints { gap: 6px 12px; }
  /* nine gauges do not fit a phone's row at a readable size: two rows of them */
  .hb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 258px; }
  .hb { width: 44px; }
  .art-stats__label + .hb-row { margin-bottom: 14px; }
  .art-stats .dial-frame { height: 104px; }
  .opts-view { --cap: 46px; }
  .opts-col { left: 26px; }
  .opt__name { font-size: 21px; }
  .facts b { font-size: 26px; }
  /* the pockets at phone width: the pictures carry it, the names would not fit */
  .slot__name { display: none; }
  .slot img { top: 52%; width: 60%; height: 66%; }
  .slot__n { font-size: 9.5px; }
  /* the architecture drawing shrinks to half: its words grow to stay readable */
  .art-arch .sat text { font-size: 17px; }
  .art-arch .plug-label, .art-arch .flow-label { font-size: 15px; }
  .art-arch .core-title { font-size: 30px; }
  .art-arch .core-sub { font-size: 17px; }
  .art-arch .owns text { font-size: 18px; }
  .art-arch .client text { font-size: 17px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .site-nav__links a { font-size: 15px; }
  .site-nav__gh { padding: 6px 12px; }
  .monitor__row { grid-template-columns: minmax(0, 1fr) auto; }
  .monitor__row .ms { display: none; }
  .made-for { font-size: 12.5px; letter-spacing: 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav, .site-nav__mark { transition: none; }
}