/* ═══════════════════════════════════════════════════════════════════════════
   StatBlockFit: the whole site's stylesheet. GENERATED by scripts/build-site.mjs.

   ONE FILE, LINKED BY EVERY PAGE, written by the same script that writes the
   pages so the two cannot drift (#28). The colour values are the app's own
   StatBlockRPG skin from design-tokens.js, repeated here as custom properties
   because a static page cannot import a CommonJS module (#367).

   ONE INLINE SCRIPT AND NO EXTERNAL REQUEST: the pointer light and the
   floating bar read the --mx/--my/--lit and data-scroll that the page's one
   inline script writes; the mobile menu is a <details>, the rest of the
   motion is CSS, the type is the system stack (the app defers custom fonts
   too, so character comes from weight, case and tracking).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #030305;
  --base: #07080C;
  --surface: #0E0F15;
  --elevated: #15161E;
  --overlay: #1C1D27;

  --border-subtle: #1B1C26;
  --border: #282A38;
  --border-strong: #3A3D4F;

  --text-primary: #F2F4FF;
  --text-secondary: #A6ABC6;
  --text-tertiary: #7F859C;
  --text-inverse: #07080C;

  --pulse: #10B981;
  --pulse-glow: #6EE7B7;
  --pulse-faint: #08211B;
  --bone: #F5F3EF;
  --bone-pressed: #DAD6CE;

  --cyan: #2BE4FF;
  --magenta: #FF3DAE;
  --amber: #FFB020;

  --str: #F2453D;
  --dex: #A3E635;
  --con: #FFC53D;
  --int: #4C9AFF;
  --wis: #B18AFF;
  --cha: #FF6BAA;

  --glass: rgba(21, 22, 30, 0.58);
  --glass-strong: rgba(21, 22, 30, 0.78);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.06);

  --text-hero: #CFD3E6;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 18px;
  --wrap: 72rem;
  /* The motion curves: a fast start that settles softly (an object arriving), and a symmetric one for a thing that passes through. Scroll-driven animations map scroll PROGRESS through them, so the reveal completes early in its range and the last third is the settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* main takes every spare pixel, so the footer is pushed to the foot of the viewport on a page shorter than it. */
main { flex: 1 0 auto; display: block; }
footer { flex: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pulse-glow); text-decoration: none; }
a:hover { text-decoration: underline; }
/* No border-radius here: the outline follows the element's own corners, and a 4px radius would square off every pill. */
a:focus-visible, summary:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
address { font-style: normal; }
h1, h2, .h2--xl, .face__title { text-wrap: balance; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* The skip link: off-screen until a keyboard reaches it, then a pill over the top bar. */
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--bone); color: var(--text-inverse); font-weight: 700; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.eyebrow--pulse { color: var(--pulse); }
h2.eyebrow { max-width: none; line-height: 1.4; color: var(--pulse); }
.kicker {
  margin: 0 0 0.5rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--pulse);
}
h1, h2, h3 { color: #fff; }
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
h1.display {
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 60px rgba(16,185,129,0.25);
}
h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 24ch;
}
h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--text-secondary);
  max-width: 56ch;
}
.lede--hero { color: var(--text-hero); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 40ch; }
.avail { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--text-secondary); letter-spacing: 0.01em; }
.section-lede { margin: 1.1rem 0 0; color: var(--text-secondary); max-width: 58ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.65; }
.note { margin: 1.75rem 0 0; font-size: 0.86rem; color: var(--text-tertiary); max-width: 70ch; }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  white-space: nowrap;
}
.pill:hover { text-decoration: none; transform: translateY(-1px); }
.pill--solid { background: var(--bone); color: var(--text-inverse); box-shadow: 0 10px 30px rgba(245,243,239,0.12); }
.pill--solid:hover { background: #fff; }
.pill--solid small { font-weight: 600; color: #5A5750; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.1em; }
.pill--glass {
  position: relative; isolation: isolate;
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pill--glass:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.42); }
.pill--sm { padding: 0.6rem 1.1rem; font-size: 0.84rem; }
.pill[aria-disabled="true"] { cursor: default; opacity: 0.85; transform: none; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ── Glass ────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.03)), var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0,0,0,0.25);
}
/*
 * THE LIGHT UNDER THE GLASS. The script writes the pointer's position into
 * --mx/--my on each surface and --lit while it is near; the ::before is a soft
 * radial light at that point and the ::after is the 1px edge lit from the same
 * point (a gradient border, cut to the border by two masks). Both sit UNDER
 * the content (z-index -1 inside the surface's own stacking context) and both
 * rest at zero, so a page with no pointer, no script or reduced motion is the
 * plain glass. The transitions use the site's own curves (#818).
 */
.glass::before, .store::before, .pill--glass::before, .topbar__in::before, .fact::before, .step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), rgba(110,231,183,0.05) 34%, transparent 64%);
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass::after, .store::after, .pill--glass::after, .topbar__in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.7), rgba(110,231,183,0.22) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass > * { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .glass::before, .glass::after, .store::before, .store::after, .pill--glass::before, .pill--glass::after, .topbar__in::before, .topbar__in::after, .fact::before, .step::before { display: none; }
}
.card { padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* The card's INDEX, drawn large and faint top right; counted per grid so every page numbers its own run. */
.grid { counter-reset: card; }
.grid > .card { counter-increment: card; }
.card__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.card__n { position: absolute; right: 0.6rem; top: -0.35rem; font-size: 4.6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); user-select: none; transition: -webkit-text-stroke-color 420ms var(--ease-out); }
.grid > .card .card__n::before { content: counter(card, decimal-leading-zero); }
@media (hover: hover) { .grid > .card:hover .card__n { -webkit-text-stroke-color: rgba(110,231,183,0.3); } }
/* and a three-across grid breathes: the middle card sits lower on a wide screen */
@media (min-width: 900px) { .grid--3 > .card:nth-child(3n + 2) { margin-top: 2.2rem; } .grid--3 > .card:nth-child(3n) { margin-top: 1.1rem; } }
.card p, .card li { margin: 0; color: var(--text-secondary); font-size: 0.96rem; }
.card ul { margin: 0.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.card .pill { align-self: flex-start; margin-top: 0.7rem; }
.card--quiet { background: var(--glass-strong); }
.card--quiet p { color: var(--text-secondary); }
.chip {
  display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--pulse-glow); background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.35);
}
.chip--free { color: var(--amber); background: rgba(255,176,32,0.12); border-color: rgba(255,176,32,0.35); }

/* ── Top bar: frosted glass, fixed, edge to edge ──────────────────────────── */
/*
 * THE FLOATING BAR (2026-09-18, #820). Detached from the top edge as a glass
 * capsule, it rides the scroll: past the top it tightens, on the way down it
 * lifts out of the way, on the way up it returns, on a spring curve. The
 * direction comes from the script's data-scroll on <html>; with no script (or
 * reduced motion) the bar simply stays, which is the resting state.
 */
.topbar {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 50;
  padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
  pointer-events: none;
  transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out);
}
/* Hidden means hidden: visibility follows the slide so the invisible links leave the tab order and hit testing (WCAG 2.4.7), and the bar returns for keyboard focus or an open menu. */
html[data-scroll="down"] .topbar { transform: translateY(calc(-100% - 24px)); opacity: 0; visibility: hidden; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out), visibility 0s 640ms; }
html[data-scroll="down"] .topbar:focus-within { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
html[data-scroll="down"] .topbar:has(details[open]) { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
.topbar__in {
  pointer-events: auto;
  position: relative; isolation: isolate;
  width: min(100%, 80rem); margin-inline: auto;
  min-height: 60px; padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  display: flex; align-items: center; gap: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.03)), rgba(7, 8, 12, 0.62);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: min-height 420ms var(--ease-out), background 420ms var(--ease-out), box-shadow 420ms var(--ease-out), width 420ms var(--ease-out);
}
html[data-scrolled="1"] .topbar__in { min-height: 54px; width: min(100%, 72rem); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 50%, rgba(255,255,255,0.025)), rgba(7, 8, 12, 0.8); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
.topbar__in > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-primary); font-weight: 800; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 0 10px rgba(16,185,129,0.45)); }
.brand__name { font-size: 1.05rem; }
.navlinks { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.navlink {
  color: var(--text-secondary); font-weight: 600; font-size: 0.93rem;
  padding: 0.5rem 0.8rem; border-radius: 999px;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.navlink:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.navlink[aria-current] { color: #fff; background: rgba(255,255,255,0.09); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* The mobile menu: a <details>, so it needs no script. */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; }
@media (forced-colors: active) { .menu > summary span { background: CanvasText; } }
/* Print, or Save as PDF: the legal pages on paper, black on white, with the chrome and the motion gone. */
@media print {
  html, body, .legal, .band, .cine, .band--raise { background: #fff !important; color: #000 !important; }
  h1, h2, h3, p, li, address, th, td, .legal p, .legal li, .legal address, .lede, .lede--hero, .eyebrow { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .topbar, .foot, .skip, .hero__bg, .cine__bg, .band__bg, .menu, .stores, .store, .pill, .hero__cue { display: none !important; }
  .cine, .band, .legal { padding: 0; margin: 0; border: 0; box-shadow: none; }
  .legal { max-width: none; }
  .legal th, .legal td { border-color: #999; }
  * { animation: none !important; transition: none !important; }
}
.menu__sheet {
  position: absolute; right: 0; top: 52px; min-width: 14rem;
  display: grid; gap: 0.15rem; padding: 0.6rem;
  background: rgba(14,15,21,0.92); border: 1px solid var(--glass-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.menu__sheet .navlink { display: block; }
.menu__sheet .navlink--cta { color: var(--pulse-glow); }

/* ── Cinematic bands ─────────────────────────────────────────────────────── */
.cine {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: 64px;
  background: linear-gradient(to bottom, var(--void) 0%, var(--void) 70%, var(--base) 100%);
}
.cine--hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.cine--sub { min-height: 52svh; display: flex; flex-direction: column; justify-content: center; }
.cine--sub h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.cine--sub .lede { color: var(--text-hero); font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
/* THE GHOST WORD: the page's own eyebrow at display scale, sitting behind the title and running off the edge. Scale contrast, not decoration: the word is the page's. */
.ghost { position: absolute; right: -0.15em; top: 45%; transform: translateY(-50%); z-index: -1; font-size: clamp(6rem, 22vw, 20rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.10); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); }
.cine--neon .ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
.cine--bone .ghost { -webkit-text-stroke-color: rgba(245,243,239,0.12); }
.cine__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cine__bg::after {
  /* the vignette, so the edges fall away and the text sits in the dark */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.55), rgba(3,3,5,0) 28%, rgba(3,3,5,0) 60%, var(--base) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.7) 100%);
}
.floorgrid {
  position: absolute; left: -20%; right: -20%; bottom: -8%; height: 70%;
  background-image:
    linear-gradient(rgba(43,228,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,228,255,0.20) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.9;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
}
.bloom { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 1; }
.bloom--a { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -18vw; bottom: -20vw; background: radial-gradient(circle, rgba(16,185,129,0.42), rgba(16,185,129,0) 65%); }
.bloom--b { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -12vw; top: -14vw; background: radial-gradient(circle, rgba(76,154,255,0.36), rgba(76,154,255,0) 65%); }
.bloom--c { width: 55vw; height: 55vw; max-width: 800px; max-height: 800px; right: -20vw; top: -25vw; background: radial-gradient(circle, rgba(177,138,255,0.20), rgba(177,138,255,0) 65%); }
.cine--neon .bloom--a { background: radial-gradient(circle, rgba(43,228,255,0.28), rgba(43,228,255,0) 65%); }
.cine--neon .bloom--b { background: radial-gradient(circle, rgba(255,61,174,0.22), rgba(255,61,174,0) 65%); }
.cine--bone .bloom--a { background: radial-gradient(circle, rgba(245,243,239,0.14), rgba(245,243,239,0) 65%); }
.cine--bone .bloom--b { background: radial-gradient(circle, rgba(16,185,129,0.22), rgba(16,185,129,0) 65%); }
.scan {
  position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
}
.watermark {
  position: absolute; right: -4%; top: 4%; width: min(78vh, 56vw); aspect-ratio: 1;
  color: var(--cyan); opacity: 0.22;
  filter: drop-shadow(0 0 24px rgba(43,228,255,0.35));
  animation: drift 540s linear infinite;
}
.watermark svg { width: 100%; height: 100%; }
@keyframes drift { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

.cine__body { position: relative; z-index: 1; padding: 5rem 0 4rem; }
.cine__body--hero {
  display: grid; align-items: end; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 4.5rem 0 5rem;
}
.hero__text { max-width: 44rem; }
/* A sub-page hero with the paper-doll showcase beside its copy: the figure is the game's actual art, lit by its own accent's glow. */
.cine__body--art { display: grid; align-items: center; gap: 2.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cine__art { margin: 0; justify-self: center; width: min(100%, 24rem); display: grid; gap: 0.6rem; justify-items: center; filter: drop-shadow(0 0 32px rgba(43,228,255,0.28)); }
.cine__art img { width: 100%; height: auto; display: block; }
.cine__art figcaption { font-size: 0.8rem; color: var(--text-secondary); text-align: center; max-width: 30ch; }

/* The floating card, bottom right, overlapping the hero's lower edge. */
.hero__card {
  justify-self: end; width: min(100%, 26rem);
  padding: 1.35rem 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transform: translateY(1.5rem);
}
.hero__cardhead { display: flex; align-items: center; justify-content: space-between; }
.hero__cardhead .kicker { margin: 0; }
.hero__cardbody { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; }
.hero__cardnote { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.hero__card .pill { align-self: flex-start; }

/* ── Content bands ───────────────────────────────────────────────────────── */
.band { position: relative; padding: clamp(6rem, 9vw, 9rem) 0; }
.band--raise { padding-top: 0; margin-top: -3.5rem; z-index: 2; }
.band--raise > .wrap > :first-child { padding-top: 5.5rem; }
.band--raise > .wrap > .grid:first-child, .band--raise > .wrap > .grid--editions { padding-top: 0; }
.band--deep { background: var(--void); overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -1; }
.grid { display: grid; gap: 1.1rem; margin-top: 2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); align-items: center; }
.steps { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; color: var(--text-secondary); }
.steps b { color: var(--text-primary); }

/* Editions */
.edition { padding: 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.edition__head { display: flex; align-items: center; justify-content: space-between; }
.edition__head .kicker { margin: 0; }
.edition ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; color: var(--text-secondary); }
.edition .cta { margin-top: auto; padding-top: 1rem; }
.edition--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.12); }

/* Media */
.gallery { display: grid; gap: 0.9rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gallery--brand { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.tile { padding: 0.75rem; margin: 0; display: grid; gap: 0.5rem; justify-items: center; }
.tile img { width: 100%; height: auto; image-rendering: auto; }
.tile figcaption { font-size: 0.78rem; color: var(--text-secondary); text-align: center; }
.tile--dark { background: rgba(3,3,5,0.7); }
.tile--light { background: rgba(245,243,239,0.92); }
.tile--light figcaption a { color: #0B5E48; }
.tile--wide { grid-column: span 2; }
.gallery--line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A caption with a second line (the default build's) would stretch the other tiles' rows and drop their names lower; top-aligned, every name sits under its figure at one height. */
.gallery--line .tile, .gallery--looks .tile { align-content: start; }
.gallery--looks { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); margin-top: 1.4rem; }
.gallery__h { margin: 3rem 0 0.6rem; font-size: 1.3rem; }
.tile figcaption b { display: block; color: var(--text-primary); font-size: 0.86rem; }
.tile figcaption span { display: block; margin-top: 0.1rem; }
@media (max-width: 640px) { .gallery--line, .gallery--looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Legal ────────────────────────────────────────────────────────────────── */
.legal { max-width: 52rem; margin: 5.5rem auto 0; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 3rem; background: var(--glass-strong); }
.band--raise > .wrap > .legal:first-child { padding-top: 2.5rem; }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-secondary); }
.legal ul { padding-left: 1.2rem; }
.legal .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.legal table { width: 100%; min-width: 30rem; border-collapse: collapse; margin: 0; font-size: 0.92rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border: 1px solid var(--border-subtle); }
.legal th { background: rgba(255,255,255,0.04); color: var(--text-primary); font-weight: 700; }
.legal td { color: var(--text-secondary); }
.legal address { color: var(--text-secondary); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-subtle); background: var(--void); padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; color: var(--text-tertiary); font-size: 0.9rem; }
.foot__in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: grid; gap: 2.5rem; }
.foot__cols { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(4, 1fr); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--border-subtle); }
.foot h3 { margin: 0 0 0.7rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-secondary); }
.foot__cols a { display: block; color: var(--text-secondary); padding: 0.22rem 0; transition: color 160ms var(--ease-out); }
.foot__cols a:hover { color: #fff; text-decoration: none; }
.foot__cols .brand { display: inline-flex; padding: 0; }
.foot__blurb { margin: 0.8rem 0 0; max-width: 34ch; }
.foot__blurb a { display: inline; padding: 0; color: var(--pulse-glow); }
.foot address { font-style: normal; line-height: 1.7; margin-top: 0.6rem; color: var(--text-tertiary); }
.foot__copy { margin: 0; font-size: 0.82rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTION (2026-09-17): scroll-driven, in CSS.

   The reveals, the hero's fade-out, the chapters' pinned media and their
   phones' own scroll are all driven by the scroll position through CSS
   scroll-driven animations (animation-timeline: view() and scroll()),
   which every evergreen browser ships. Everything is wrapped in @supports so
   a browser without them renders every element's NATURAL state, which is the
   finished one for a reveal, a wipe and a fill, and the resting one for the
   switch (its knob on StatBlockPro): the page is complete on day one and
   gains its choreography where the engine is there. prefers-reduced-motion
   switches all of it off. The top bar's hide-and-return and the pointer's
   light are the two things the page's one inline script drives (#820); the
   features marquee is a plain CSS animation with a pause.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes rv-in { from { opacity: 0; transform: translateY(48px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes hero-out { to { opacity: 0; transform: translateY(-6vh) scale(0.96); } }
@keyframes hero-bg-hide { to { visibility: hidden; } }
@keyframes step-through {
  0% { opacity: 0; transform: translateY(56px); }
  24% { opacity: 1; transform: none; }
  76% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes wipe-in { from { clip-path: inset(22% 10% 10% 10% round 44px); opacity: 0.5; transform: translateY(24px); } to { clip-path: inset(-40% -40% -60% -40% round 40px); opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ap-ring { from { stroke-dashoffset: 249px; } }
@keyframes ap-radar { from { transform: scale(0.06); opacity: 0; } }
/* -100% is the body's own height and 100cqh the view's, less the 90px tab bar over it (9 + 23 + 3 + 12 + 8 and the 34px home inset): the last button ends where the app's own bottom padding puts it. */
@keyframes ap-scroll { to { transform: translateY(calc(-100% + 100cqh - 90px)); } }
@keyframes knob { from { transform: translateX(0); } to { transform: translateX(calc(100% + 0.5rem)); } }
@keyframes track { from { background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; } to { background: rgba(43,228,255,0.22); box-shadow: 0 0 0 1px rgba(43,228,255,0.6) inset, 0 0 40px rgba(43,228,255,0.35); } }
@keyframes label-pro { from { color: #fff; } to { color: var(--text-tertiary); } }
@keyframes label-rpg { from { color: var(--text-tertiary); } to { color: var(--cyan); text-shadow: 0 0 18px rgba(43,228,255,0.6); } }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@keyframes sweep-run { from { transform: translateX(-60%) skewX(-18deg); } to { transform: translateX(160%) skewX(-18deg); } }
@keyframes grid-run { to { background-position: 0 64px; } }
@keyframes cue { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.9; } 50% { transform: translateY(8px) rotate(45deg); opacity: 0.4; } }

@supports (animation-timeline: view()) {
  /* backwards, not both: the finished state IS the natural state, and holding it would pin transform: none over a card's hover lift. cover rather than entry, so a one-line eyebrow reveals over the same scroll distance as a card (an entry range is only as long as the subject is tall). */
  .rv { animation: rv-in var(--ease-out) backwards; animation-timeline: view(); animation-range: cover 0% cover 30%; }
  .rv--late { animation-range: cover 4% cover 34%; }
  .rv--later { animation-range: cover 8% cover 38%; }
  .rv--latest { animation-range: cover 12% cover 42%; }
  /* A reveal yields to keyboard focus: a link tabbed to inside a block not yet in view must not land faded or invisible. */
  .rv:focus-within, .step:focus-within, .wipe:focus-within { animation: none; }
  /* The hero sits under the curtain for the rest of the page; its grid and blooms stop painting once it is covered. */
  .hero__bg { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 100svh 101svh; }
    .hero__inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
  /* Only the LINKS leave the tab order once the curtain has covered them; the heading stays in the accessibility tree. */
  .hero__inner .stores { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 90svh 91svh; }
  .step { animation: step-through var(--ease-inout) both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  /* The chapter's media is sticky, so nothing inside it can key on its own view(): every animation in a chapter reads the CHAPTER's timeline. cover 0% is the chapter's top at the bottom of the screen; the device pins at about cover 23% of a three-step chapter. */
  .chapter { view-timeline: --chapter block; }
  .wipe { animation: wipe-in var(--ease-out) backwards; animation-timeline: --chapter; animation-range: cover 2% cover 20%; }
  .chapter .ap-fill { animation: fill var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-fill--y { animation: fill-y var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-ring__fill { animation: ap-ring var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-radar__poly { animation: ap-radar var(--ease-spring) both; animation-timeline: --chapter; animation-range: cover 12% cover 30%; }
  /* The phone's screen is taller than the phone and SCROLLS as the chapter does, one step ahead of the reader's eye. */
  .chapter .ap-scroll { animation: ap-scroll linear both; animation-timeline: --chapter; animation-range: cover 30% cover 92%; }
  @media (max-width: 980px) {
    .step { animation-name: rv-in; animation-range: entry 8% entry 48%; }
    .device { view-timeline: --device block; }
    .wipe { animation-timeline: --device; animation-range: entry 0% entry 60%; }
    .chapter .ap-fill, .chapter .ap-fill--y, .chapter .ap-ring__fill, .chapter .ap-radar__poly { animation-timeline: --device; animation-range: entry 20% entry 90%; }
    /* The phone is fully in view for a short stretch on a phone; it shows its top there and scrolls its screen as it leaves. */
    .chapter .ap-scroll { animation-timeline: --device; animation-range: exit 0% exit 85%; }
  }
  .switch { view-timeline: --switch block; }
  .toggle__knob { animation: knob var(--ease-spring) both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__track { animation: track linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--pro { animation: label-pro linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--rpg { animation: label-rpg linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  /* The ticker rides the scroll: it travels half its width (one copy) while it crosses the viewport, so it moves exactly as fast as the reader does and stops when they do. */
  .ticker__track { animation: ticker-run linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* ── Hero: pinned, the next section slides over it (the curtain) ─────────── */
.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: max(100svh, 34rem);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate;
  background: var(--void);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.6), rgba(3,3,5,0) 26%, rgba(3,3,5,0) 62%, var(--void) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.72) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 6rem 0 5rem; transform-origin: 50% 40%; will-change: transform, opacity; }
.hero__inner .display { margin-top: 0.2rem; }
.hero .lede--hero { max-width: 34ch; }
.floorgrid--live { animation: grid-run 4s linear infinite; }
.sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 45%, rgba(43,228,255,0.07) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-60%) skewX(-18deg);
  animation: sweep-run 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: screen;
}
.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 1;
  width: 40px; height: 40px; margin-left: -20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
}
.hero__cue:hover { text-decoration: none; border-color: rgba(255,255,255,0.5); }
.hero__cue span { width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: cue 2.2s var(--ease-inout) infinite; }

/* The store buttons: two platforms, honest states. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.store {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1.1rem 0.75rem 1rem; border-radius: 999px;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 32px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  text-decoration: none;
}
/* The sheen: a diagonal light that crosses the pill on hover. */
.store { isolation: isolate; }
/* The sheen crosses the pill as a moving background layer under the light (the pseudo-elements are the light's now). */
.store { background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)); background-size: 300% 100%, 100% 100%; background-position: 130% 0, 0 0; transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-position 700ms var(--ease-inout); }
.store:hover, .face:hover { text-decoration: none; }
@media (hover: hover) { .store:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18); } }
.store:focus-visible {
  text-decoration: none; transform: translateY(-2px);
  border-color: rgba(16,185,129,0.55);
 
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18);
}
@media (hover: hover) { .store:hover { background-position: -30% 0, 0 0; } }
.store:focus-visible { background-position: -30% 0, 0 0; }
.store:active { transform: translateY(0); transition-duration: 80ms; }
.store:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.store__glyph { color: var(--pulse-glow); flex: none; }
.store__arrow { color: var(--text-tertiary); flex: none; margin-left: 0.1rem; transition: transform 260ms var(--ease-out), color 260ms var(--ease-out); }
@media (hover: hover) { .store:hover .store__arrow { transform: translateX(3px); color: var(--pulse-glow); } }
.store:focus-visible .store__arrow { transform: translateX(3px); color: var(--pulse-glow); }
.store__text { display: grid; line-height: 1.15; text-align: left; }
/* The label is primary rather than secondary since #820: the pointer's light lifts the ground under it and secondary fell under 4.5:1 there. */
.store__text small { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-primary); font-weight: 700; }
.store__text b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* The curtain: everything after the hero, on its own layer, so it slides over the pinned hero. */
.curtain { position: relative; z-index: 2; background: var(--base); box-shadow: 0 -40px 100px rgba(0,0,0,0.6); border-radius: 28px 28px 0 0; }
.band--first { padding-top: clamp(6.5rem, 9vw, 8.5rem); }

/* A viewport shorter than the hero (a landscape phone, a docked devtools) would pin a box whose foot nobody can scroll to; there the hero scrolls like any block and the curtain simply follows. */
@media (max-height: 40rem) {
  .hero { position: relative; }
  .hero__inner, .hero__inner .stores, .hero__bg { animation: none; }
}

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.ticker { overflow: clip; border-bottom: 1px solid var(--border-subtle); border-radius: 28px 28px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; padding: 1.1rem 0; }
.ticker__item { white-space: nowrap; padding: 0 1.4rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); position: relative; }
.ticker__item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 10px var(--pulse); }

/* ── Type additions ───────────────────────────────────────────────────────── */
.h2--xl { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 20ch; }

/* ── The two faces ───────────────────────────────────────────────────────── */
.faces { display: grid; gap: 1.1rem; margin-top: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.face { display: grid; gap: 0.4rem; padding: 2.4rem 2.2rem 2.5rem; min-height: 19rem; align-content: end; color: var(--text-primary); transition: transform 520ms var(--ease-spring), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.face::before { z-index: 0; }
/* the face's own word, huge and cut by the card's edge */
.face .face__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.face .face__ghost { position: absolute; right: -0.2em; top: -0.35em; font-size: 9rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); pointer-events: none; transition: transform 700ms var(--ease-spring), -webkit-text-stroke-color 420ms var(--ease-out); }
.face--rpg .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
@media (hover: hover) { .face:hover .face__ghost { transform: translate(-0.08em, 0.06em) rotate(-4deg); -webkit-text-stroke-color: rgba(110,231,183,0.32); } .face--rpg:hover .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.36); } }
@media (hover: hover) { .face:hover { text-decoration: none; transform: translateY(-6px); border-color: rgba(255,255,255,0.24); box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); } }
.face .kicker { margin: 0 0 0.3rem; }
.face--rpg .kicker { color: var(--cyan); }
.face__title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.face__line { color: var(--text-secondary); font-size: 1rem; max-width: 34ch; }
.face__more { margin-top: 0.9rem; font-weight: 700; font-size: 0.9rem; color: var(--pulse-glow); }
.face--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.14); }
.face--rpg .face__more { color: var(--cyan); }

/* ── Chapters: pinned media, text that scrolls through ───────────────────── */
.chapter { position: relative; padding: 4rem 0 3rem; }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.chapter__grid--flip .chapter__media { order: 2; }
.chapter__media { position: sticky; top: 4rem; height: calc(100svh - 4rem); display: flex; align-items: center; justify-content: center; }
/* The phone is 414 x 868 at its own scale (the app's 390 x 844 screen in a 12px bezel) and is zoomed as a whole, never narrowed, so nothing inside it reflows; zoom is layout-affecting, so the sticky box still centres it. */
@media (min-width: 981px) and (max-height: 52rem) { .device { --dz: 0.81; } }
@media (min-width: 981px) and (max-height: 47rem) { .device { --dz: 0.72; } }
@media (min-width: 981px) and (max-height: 42rem) { .device { --dz: 0.63; } }
.chapter__steps { display: grid; }
/* position and isolation: the step's light (its ::before, z-index -1) must sit inside the step, not behind the page (#820). */
.step { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.step h2 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 16ch; }
.step .section-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.step .kicker { margin-bottom: 0.9rem; }

/* The device: a frame drawn in CSS, holding the app's own screen at a phone's own 390pt width, zoomed as a whole. */
.device {
  --dz: 0.9;
  width: 414px; max-width: 100%; aspect-ratio: 414 / 868; border-radius: 40px; zoom: var(--dz);
  padding: 12px; background: linear-gradient(160deg, #2A2C3A, #0B0C12 60%);
  box-shadow: 0 60px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 2px rgba(0,0,0,0.9);
  position: relative; isolation: isolate;
}
.device::before { content: ""; position: absolute; top: 12px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 0 0 14px 14px; background: #06070B; z-index: 3; }
/* The bezel catches the pointer's light like every other surface; the mask keeps it off the screen. */
.device::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 12px; pointer-events: none; z-index: 2;
  /* The frame is zoomed, so the pointer's page-space offset is divided back into the frame's own space. */
  background: radial-gradient(360px circle at calc(var(--mx, 50%) / var(--dz)) calc(var(--my, 50%) / var(--dz)), rgba(255,255,255,0.28), rgba(255,255,255,0.06) 40%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .device::after { display: none; } }

/* ── The app's screen: its palette as custom properties, its ramp, its shape language ── */
.ap {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; display: flex; flex-direction: column;
  background: var(--ap-base); color: var(--ap-t1);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ap * { box-sizing: border-box; margin: 0; }
.ap b { font-weight: 800; }
.ap-status { position: absolute; top: 0; left: 0; right: 0; height: 47px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 15px; font-weight: 600; line-height: 1; }
.ap-status svg { display: block; }
/* ForgeLight: one radial bloom of the brand at the top centre, 260px tall, at full width. The SVG gradient is declared in the ELLIPSE's bounding box (cy 0%, r 70%), so its centre sits at the box's top, 240px above the screen, and the visible edge carries about 1% of the brand; the mask is the ellipse itself. */
.ap-bloom { position: absolute; top: 0; left: 0; right: 0; height: 260px; pointer-events: none; background: radial-gradient(126% 280px at 50% -240px, color-mix(in srgb, var(--ap-pulse) 14%, transparent), color-mix(in srgb, var(--ap-pulse) 4%, transparent) 55%, transparent 100%); -webkit-mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); }
/* Screen.tsx: the header is fixed above a ScrollView; the view clips the body that scrolls beneath it. */
.ap-head { position: relative; flex: none; padding: 55px 20px 12px; }
.ap-view { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.ap-scroll { position: relative; padding: 0 20px; will-change: transform; }
.ap-body { display: grid; gap: 14px; padding: 4px 0 74px; }
.ap-eyebrow { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-pulse); margin-bottom: 5.25px; }
.ap-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ap-title { flex: 1; min-width: 0; font-size: 30px; line-height: 34px; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ap-t1); }
.ap-icons { display: flex; align-items: center; gap: 4px; }
.ap-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.ap-icon svg { display: block; }
.ap-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ap-t3); }
.ap-rule { display: block; margin-top: 12px; width: 100%; height: auto; }
.ap-back { display: flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px 0; margin: 0 0 4px -4px; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-power { text-align: right; }
.ap-power b { display: block; font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-t1); }
.ap-power span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* SectionLabel: the eyebrow, a hairline that takes the rest of the row, an optional right slot. */
.ap-label { display: flex; align-items: center; gap: 12px; }
.ap-label > span:first-child { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-label > i { flex: 1; height: 1px; background: var(--ap-bsub); }
.ap-label__r { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
/*
 * Panel: the notched rectangle. The element is clipped to the notch polygon
 * and painted in the STROKE colour; its ::before is the same polygon inset by
 * the stroke width in the FILL colour (a cut edge inset by s sits 0.586s
 * closer, which is what --ni is); its ::after is the corner hairline from
 * (5, n+7) to (n+7, 5), a 1px line of (n+2)*sqrt2 turned 45 degrees.
 */
.ap-panel {
  position: relative; --n: 14px; --sw: 1px; --ni: calc(var(--n) - 0.586 * var(--sw));
  --fill: var(--ap-surface); --stroke: var(--ap-b); --rule: var(--ap-bstrong); --rule-o: 0.55;
  background: var(--stroke);
  clip-path: polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));
}
.ap-panel::before { content: ""; position: absolute; inset: var(--sw); background: var(--fill); clip-path: polygon(var(--ni) 0, 100% 0, 100% calc(100% - var(--ni)), calc(100% - var(--ni)) 100%, 0 100%, 0 var(--ni)); }
.ap-panel::after { content: ""; position: absolute; height: 1px; width: calc((var(--n) + 2px) * 1.4142); left: calc((var(--n) + 12px) / 2 - (var(--n) + 2px) * 0.7071); top: calc((var(--n) + 12px) / 2 - 0.5px); transform: rotate(-45deg); background: var(--rule); opacity: var(--rule-o); pointer-events: none; }
.ap-panel > * { position: relative; }
/* A toned panel: a 1.5px outline at 90% of the tone, the hairline in the tone at 80%, a 9% tint when tinted. */
.ap-panel[style*="--tone"] { --sw: 1.5px; --stroke: color-mix(in srgb, var(--tone) 90%, var(--ap-base)); --rule: var(--tone); --rule-o: 0.8; }
.ap-card { padding: 16px; }
/* StatusStrip: the flame, the streak line, the load-state line. */
.ap-strip { display: flex; align-items: center; gap: 12px; padding: 12.25px; }
.ap-strip__g { display: grid; }
.ap-strip b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap-strip span:not(.ap-strip__g) { display: block; margin-top: 2px; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
/* HexRing: a flat-top hexagon, the fill drawn from the top-left vertex clockwise by dash offset. */
.ap-ringrow { display: flex; justify-content: space-around; }
.ap-ringbox { position: relative; width: 92px; text-align: center; }
.ap-ring { display: block; }
.ap-ring__track { fill: none; stroke: var(--ap-inset); stroke-width: 7; stroke-linejoin: miter; }
.ap-ring__fill { fill: none; stroke-width: 7; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 249 249; stroke-dashoffset: calc((1 - var(--v)) * 249px); }
.ap-ring__c { position: absolute; top: 0; left: 0; width: 92px; height: 92px; display: grid; place-content: center; }
.ap-ring__c b { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
.ap-ring__c span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-cap { margin-top: 8px; }
.ap-cap b { display: block; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t1); }
.ap-cap span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* The rows inside the Today card that open with a hairline. */
.ap-sep { margin-top: 16px; border-top: 1px solid var(--ap-bsub); padding-top: 12.25px; }
.ap-k { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-2xs { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-2xs-note { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-note { display: block; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap-note--mt { margin-top: 8px; }
.ap-fig { display: block; font-family: "Courier New", Courier, monospace; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-unit { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-mono-sm { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; color: var(--ap-t1); }
.ap-mono-2xs { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-burn { display: flex; align-items: center; gap: 12px; }
.ap-burn > svg { flex: none; }
.ap-burn__c { flex: 1; min-width: 0; }
.ap-burn__n { text-align: right; }
.ap-macro { margin-top: 16px; }
.ap-row2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-row2--h { margin-bottom: 8px; }
.ap-sep .ap-row2--h { margin-bottom: 5.25px; }
.ap-macro__p { display: grid; gap: 4px; }
.ap-macro__p b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap-cols { display: flex; gap: 12px; margin-top: 12px; }
.ap-cols > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
/* Meter: a squared bar; the fill's leading edge is cut at 45 degrees; quarter ticks over it; a 1px outline. */
.ap-meter { position: relative; display: block; height: var(--h, 8px); background: var(--ap-inset); }
.ap-meter__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: var(--c); clip-path: polygon(0 0, calc(100% - var(--h) * 0.6) 0, 100% 100%, 0 100%); }
.ap-meter::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--ap-bsub); background: linear-gradient(var(--ap-base), var(--ap-base)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 75% 0 / 1px 100% no-repeat; opacity: 0.9; }
.ap-notes { margin-top: 16px; display: grid; gap: 4px; }
/* HydrationCard: its own label and a panel nested inside the Today card, abutting the notes. */
.ap-hyd { display: grid; gap: 8px; }
.ap-hyd__panel { --n: 12px; }
.ap-hyd__in { display: flex; align-items: center; gap: 16px; padding: 12px; }
.ap-hyd__in > svg { flex: none; }
.ap-hyd__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-hyd__total { display: flex; align-items: baseline; gap: 5.25px; }
.ap-hyd__total b { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ap-t1); }
.ap-hyd__total span { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-hyd__caf { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-qa { display: flex; gap: 8px; }
.ap-qa > span { flex: 1; min-width: 0; text-align: center; padding: 8px 12px; border: 1px solid var(--ap-b); font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-qa > .ap-qa--on { border-color: color-mix(in srgb, var(--ap-pulse) 55%, transparent); background: color-mix(in srgb, var(--ap-pulse) 12%, transparent); color: var(--ap-pulse); }
/* LoadGauge: a linear bar with a hard threshold tick at its far end; never a ring (#227). */
.ap-gauge { position: relative; display: block; height: 10px; background: var(--ap-inset); }
.ap-gauge__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: color-mix(in srgb, var(--ap-t2) 85%, transparent); }
.ap-gauge::after { content: ""; position: absolute; right: 0; top: -1px; bottom: -1px; width: 1.5px; background: var(--ap-warn); }
.ap-focus { display: flex; align-items: flex-start; gap: 5.25px; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap-focus > i { flex: none; width: 4px; height: 4px; margin-top: 6px; background: var(--ap-t2); }
/* Button: a notched fill with a 1.5px outline and no hairline; the label uppercase, a note under it at 65%. */
.ap-btns { margin-top: 4px; display: grid; gap: 8.75px; }
.ap-btns--sheet { margin-top: 8px; }
.ap-btn { --n: 12px; --sw: 1.5px; --rule-o: 0; padding: 14px 20px; text-align: center; }
.ap-btn::after { display: none; }
.ap-btn b { display: block; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.ap-btn span { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; letter-spacing: 0.4px; opacity: 0.65; }
.ap-btn--compact { --n: 8px; padding: 9px 14px; }
.ap-btn--compact b { font-size: 13px; line-height: 18px; }
.ap-btn--pulse { --fill: var(--ap-pulse); --stroke: var(--ap-glow); color: var(--ap-tinv); }
.ap-btn--secondary { --fill: var(--ap-elev); --stroke: var(--ap-bstrong); color: var(--ap-t1); }
.ap-btn--primary { --fill: var(--ap-bone); --stroke: var(--ap-bone); color: var(--ap-tinv); }
.ap-doors { display: flex; gap: 8px; }
.ap-doors > .ap-btn { flex: 1; min-width: 0; }
/* The tab bar: five slots on the surface, a 2px rail and a 6% wash over the focused one, the home indicator under it. */
.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; padding-bottom: 34px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap-tab { position: relative; flex: 1; display: grid; justify-items: center; padding: 9px 0 8px; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ap-t3); }
.ap-tab svg { width: 23px; height: 23px; margin-bottom: 3px; }
.ap-tab--on { color: var(--ap-pulse); font-weight: 800; background: color-mix(in srgb, var(--ap-pulse) 6%, transparent); }
.ap-tab--on::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ap-pulse); }
.ap-tabs::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ap-t1); }
/* ── The character sheet's own pieces ── */
.ap-orig { --n: 16px; --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-surface)); }
.ap-orig__row { display: flex; align-items: center; gap: 12px; padding: 16px; }
/* the paper doll's square canvas at the card's HEIGHT, cropping only its empty side margins, which is how AvatarRenderer draws it in the sheet's 112 x 122 */
.ap-orig__row > img { flex: none; width: 112px; height: 122px; object-fit: cover; display: block; }
.ap-orig__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-orig__arch { display: block; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-orig__lc { display: flex; gap: 16px; }
.ap-orig__lc > div { flex: 1; min-width: 0; }
.ap-orig__lc b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; }
.ap-orig__btn { padding: 0 16px 16px; }
.ap-radar { position: relative; width: 264px; margin: 0 auto; }
.ap-radar > svg { display: block; }
.ap-radar__poly { transform-box: view-box; transform-origin: 132px 132px; }
.ap-radar__max { position: absolute; left: 0; right: 0; top: 116px; text-align: center; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-t3); }
.ap-legend { margin-top: 4px; display: flex; justify-content: center; gap: 16px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-legend > span { display: flex; align-items: center; gap: 5.25px; }
.ap-legend i { width: 14px; height: 2px; }
/* The stat table: three 49px right-aligned columns (w-14 at NativeWind's 14px rem). */
.ap-tbl__h { display: flex; align-items: center; padding-bottom: 8px; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-tbl__h .ap-tbl__stat { flex: 1; }
.ap-tbl__c { width: 49px; text-align: right; font-family: "Courier New", Courier, monospace; }
.ap-tbl__h .ap-tbl__c { font-family: inherit; }
.ap-tbl__c--pulse { color: var(--ap-pulse); }
.ap-tbl__r { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--ap-bsub); }
.ap-tbl__r .ap-tbl__stat { flex: 1; display: flex; align-items: center; gap: 8px; }
.ap-tbl__stat i { width: 3px; height: 16px; background: var(--tone); }
.ap-tbl__stat b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--tone); }
.ap-tbl__base { font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap-tbl__buff { font-size: 14px; line-height: 20px; color: var(--ap-pulse); }
.ap-tbl__zero { font-size: 14px; line-height: 20px; color: var(--ap-tdis); }
.ap-tbl__total { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-tbl__note { margin-top: 12px; }
/* The record: six cells, three to a row. */
.ap-rec { display: flex; flex-wrap: wrap; }
.ap-rec > div { width: 33.333%; padding: 8px 0; min-width: 0; }
.ap-rec__v { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap-rec__n { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-scrap { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ap-scrap > svg { display: block; }
/* The loadout: two rows of five tiles; an empty slot is an inset panel, a worn item's notch depth and pip count encode its rarity (§9.3). */
/* The two rows are siblings of the ScrollView in the app, so the screen's 14px rhythm separates them; 8px is the gap WITHIN a row. */
.ap-grid { display: grid; gap: 14px; }
.ap-grid__row { display: flex; gap: 8px; }
.ap-tile { flex: 1; min-width: 0; --n: 7px; --fill: var(--ap-inset); display: grid; justify-items: center; gap: 5.25px; padding: 12px 8px; }
.ap-tile > svg { display: block; }
.ap-tile__slot { font-size: 10px; line-height: 12px; height: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap-tile--worn { --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-elev)); }
.ap-tile__name { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap-tile__meta { display: flex; align-items: center; gap: 5.25px; }
.ap-pips { display: flex; gap: 3px; }
.ap-pips i { width: 4px; height: 4px; background: var(--ap-b); opacity: 0.55; }
.ap-pips i.on { background: var(--tone); opacity: 1; }
.ap-tile__slot--tone { color: var(--tone); }
.ap-grid__note { margin-top: -4px; }
.chapter .ap-fill { transform-origin: 0 50%; }
.chapter .ap-fill--y { transform-box: fill-box; transform-origin: 50% 100%; }

/* Guide hub: the Settings screen (StatBlockPro), its App and display group open. */
.ap .gh-grp { --n: 14px; }
.ap .gh-grp--open { --fill: var(--ap-elev); }
.ap .gh-grp__head { display: flex; align-items: center; gap: 12px; padding: 16px; }
.ap .gh-grp__head > svg { flex: none; display: block; }
.ap .gh-grp__ic { flex: none; width: 31.5px; height: 31.5px; display: grid; place-items: center; }
.ap .gh-grp__ic svg { display: block; }
.ap .gh-grp__c { flex: 1; min-width: 0; }
.ap .gh-grp__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gh-grp__c span { display: block; margin-top: 2px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gh-grp__body { display: grid; gap: 14px; padding: 0 16px 20px; }
.ap .gh-stack { display: grid; gap: 8px; }
.ap .gh-row { --n: 12px; display: flex; align-items: center; gap: 12px; padding: 12.25px 16px; }
.ap .gh-row > svg { flex: none; display: block; }
.ap .gh-row b { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap .gh-toggle { --n: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 12.25px; }
.ap .gh-toggle__c { flex: 1; min-width: 0; }
.ap .gh-toggle__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap .gh-toggle__c span { display: block; margin-top: 2px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gh-switch { flex: none; width: 46px; height: 26px; padding: 3px; display: flex; align-items: center; justify-content: flex-start; background: var(--ap-elev); border: 1px solid var(--ap-bsub); }
.ap .gh-switch i { display: block; width: 18px; height: 18px; background: var(--ap-t3); }
.ap .gh-note { margin-top: 12px; }
.ap .gh-cg { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap .gh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8.75px; }
.ap .gh-chip { --n: 7px; flex: 1 1 auto; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t2); }
.ap .gh-chip--on { color: var(--ap-pulse); }

/* Guide: Training (/guide/training/). The live session logger (session/[id].tsx, SetRow.tsx) and the routines list (routines.tsx), drawn from the app's own measurements. */
.ap .gt-shead { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 55px 20px 12px; }
.ap .gt-shead > svg { display: block; flex: none; }
.ap .gt-shead__c { display: grid; justify-items: center; }
.ap .gt-shead__t { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gt-shead__time { font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-shead__sp { width: 26px; height: 26px; }
.ap .gt-rest { flex: none; margin: 0 20px 12px; }
.ap .gt-rest__in { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.ap .gt-rest__k { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-pulse); }
.ap .gt-rest__n { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-pulse); }
.ap .gt-rest__s { font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t3); }
.ap .gt-list { display: grid; gap: 12px; padding-bottom: 32px; }
.ap .gt-ex { --n: 12px; }
.ap .gt-ex__in { padding: 12px; }
.ap .gt-ex__h { display: flex; align-items: center; margin-bottom: 8px; }
.ap .gt-ex__h > svg { display: block; flex: none; }
.ap .gt-ex__name { flex: 1; min-width: 0; }
.ap .gt-ex__name b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-ex__rx { display: block; margin-top: 2px; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-pulse); }
.ap .gt-ex__chip { margin-right: 12px; flex: none; display: flex; }
.ap .gt-ex__icon { margin-right: 12px; display: flex; }
.ap .gt-chip { --n: 5px; --rule-o: 0; display: inline-flex; align-items: center; padding: 3px 7px; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gt-chip::after { display: none; }
.ap .gt-cols { display: flex; align-items: center; gap: 8px; padding: 0 8px 4px; }
.ap .gt-cols > span { flex: 1; text-align: center; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gt-cols > .gt-cols__set { flex: none; width: 34px; }
.ap .gt-cols > i { flex: none; width: 56px; }
.ap .gt-set { display: flex; align-items: center; gap: 8px; padding: 5.25px 8px; border-left: 2px solid transparent; }
.ap .gt-set > svg { display: block; flex: none; }
.ap .gt-set--done { background: var(--ap-pfaint); border-left-color: var(--ap-pulse); }
.ap .gt-set__n { flex: none; width: 34px; text-align: center; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t3); }
.ap .gt-set__n--w { color: var(--ap-warn); }
.ap .gt-set__sp { flex: 1; min-width: 0; }
.ap .gt-cell { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 3px; background: var(--ap-inset); font-size: 15px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ap-t1); }
.ap .gt-cell--ph { color: var(--ap-t3); }
.ap .gt-set__tick { flex: none; display: flex; padding: 0 4px; }
.ap .gt-add { display: flex; gap: 8px; margin-top: 8px; }
.ap .gt-add__set { --n: 7px; --fill: var(--ap-elev); flex: 1; }
.ap .gt-add__wu { --n: 7px; }
.ap .gt-add__set > span, .ap .gt-add__wu > span { display: block; padding: 8px 16px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 700; }
.ap .gt-add__set > span { color: var(--ap-t2); }
.ap .gt-add__wu > span { color: var(--ap-t3); }
.ap .gt-foot { position: relative; flex: none; margin-bottom: 90px; padding: 12px 20px; border-top: 1px solid var(--ap-bsub); background: var(--ap-surface); }
.ap .gt-foot__row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t3); }
.ap .gt-foot__vol { font-family: "Courier New", Courier, monospace; }
.ap .gt-foot__d { display: flex; justify-content: center; margin-top: 8px; }
.ap .gt-ghost { --fill: var(--ap-surface); --stroke: var(--ap-b); color: var(--ap-t2); }
.ap .gt-count { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-rcard { --n: 13px; }
.ap .gt-rcard__in { padding: 16px; }
.ap .gt-rcard__n { display: block; font-size: 16px; line-height: 24px; font-weight: 800; color: var(--ap-t1); }
.ap .gt-rcard__d { display: block; margin-top: 4px; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gt-rcard__chips { display: flex; flex-wrap: wrap; gap: 5.25px; margin-top: 12px; }
.ap .gt-hint { padding: 0 4px; margin-top: -6px; }
.ap .gt-chips { display: flex; gap: 6px; padding: 2px 0; }
.ap .gt-tile { --n: 10px; }
.ap .gt-tile__in { display: flex; align-items: center; gap: 12px; padding: 12.25px; }
.ap .gt-tile__in > svg { display: block; flex: none; }
.ap .gt-tile__c { flex: 1; min-width: 0; }
.ap .gt-tile__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap .gt-tile__c span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gt-tile__r { display: grid; justify-items: end; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap .gt-tile__d { font-family: "Courier New", Courier, monospace; }
/* Guide: nutrition and body (gn-): the food diary screen, from nutrition.tsx, MacroRings.tsx and WeightGoalCard.tsx. */
.ap .gn-body { grid-template-columns: minmax(0, 1fr); }
.ap .gn-edit { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-pulse); }
.ap .gn-rings { display: grid; justify-items: center; gap: 12px; }
.ap .gn-rings > svg { display: block; }
.ap .gn-leg { width: 100%; display: grid; gap: 5.25px; }
.ap .gn-leg__row { display: flex; align-items: center; justify-content: space-between; }
.ap .gn-leg__l { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gn-leg__l i { display: block; width: 3px; height: 14px; }
.ap .gn-leg__r { display: flex; align-items: baseline; gap: 8px; }
.ap .gn-leg__v { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t1); white-space: nowrap; }
.ap .gn-leg__v span { color: var(--ap-t3); }
.ap .gn-leg__rem { width: 80px; text-align: right; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap .gn-leg__rem--over { color: var(--ap-bone); }
.ap .gn-wt { --n: 8px; padding: 12.25px; }
.ap .gn-wt__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ap .gn-wt__k { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gn-wt__v { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap .gn-wt__v span { color: var(--ap-t3); }
.ap .gn-wt__note { display: block; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gn-meal { --n: 12px; padding: 16px; }
.ap .gn-meal__h { display: flex; align-items: center; justify-content: space-between; }
.ap .gn-meal__slot { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap .gn-meal__kcal { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gn-meal__rows { margin-top: 8.75px; display: grid; gap: 8px; }
.ap .gn-srv { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap .gn-srv__c { flex: 1; min-width: 0; }
.ap .gn-srv__n { display: block; font-size: 14px; line-height: 20px; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gn-srv__m { display: block; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gn-srv__k { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap .gn-btns { margin-top: 4px; display: flex; gap: 8px; }
.ap .gn-btns > .ap-btn { flex: 1; min-width: 0; }

/* The guide's character page (/guide/character/): the character creator (CreatorScreen.tsx) and the key on the sheet's legend. */
.ap .gc-prev { --n: 16px; }
.ap .gc-prev__in { display: flex; justify-content: center; padding: 16px 0; }
.ap .gc-prev__in > img { display: block; width: 150px; height: 200px; object-fit: cover; }
.ap .gc-row { display: grid; gap: 8px; min-width: 0; }
.ap .gc-strip { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.ap .gc-strip--end { justify-content: flex-end; }
.ap .gc-strip--sw { gap: 8px; }
.ap .gc-chip { flex: none; --n: 6px; --sw: 1px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11.5px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gc-chip::after, .ap .gc-sw::after { display: none; }
.ap .gc-chip--off { color: var(--ap-t2); }
.ap .gc-chip--on { color: var(--ap-pulse); }
.ap .gc-chip--lock { color: var(--ap-t3); }
.ap .gc-price { display: inline-flex; align-items: center; gap: 3px; font-family: "Courier New", Courier, monospace; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ap .gc-price > svg { display: block; }
.ap .gc-sw { flex: none; width: 40px; height: 40px; --n: 7px; }
.ap .gc-sw--on { --sw: 2px; --stroke: var(--ap-t1); }
/* scrolled a little, as a thumb leaves it, so the Hair row clears the footer */
.ap .gc-scrolled { transform: translateY(-20px); }
.ap .gc-foot { flex: none; margin-bottom: 90px; padding: 12px 20px 46px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap .gc-key--base { background: var(--ap-bone); }
.ap .gc-key--buff { background: var(--ap-pulse); opacity: 0.7; }

/* THE ARENA AND COMBAT GUIDE (/guide/arena/): the live bout's own pieces, from InteractiveFight.tsx, VitalBar.tsx, TurnClock.tsx, D20Die.tsx and StanceButtons.tsx. */
.ap .ga-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap .ga-row--base { align-items: baseline; }
.ap .ga-lbl { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap .ga-vit { display: grid; gap: 12px; padding: 16px; }
.ap .ga-fr { display: grid; gap: 5.25px; }
.ap .ga-fr__name { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-vital { display: grid; gap: 4px; }
.ap .ga-vital__k { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .ga-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
.ap .ga-clock { width: 100%; display: grid; gap: 5.25px; }
.ap .ga-clock__s { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; font-weight: 700; }
.ap .ga-sprites { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; }
.ap .ga-sprites img { display: block; height: 116px; max-width: none; object-fit: cover; }
.ap .ga-sprites .ga-me { width: 86px; }
.ap .ga-sprites .ga-foe { width: 98px; opacity: 0.55; }
.ap .ga-die { position: relative; width: 132px; height: 132px; }
.ap .ga-die > svg { display: block; }
.ap .ga-die__n { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.ap .ga-die__n b { margin-top: -5.28px; font-family: "Courier New", Courier, monospace; font-size: 30px; line-height: 34px; font-weight: 800; }
.ap .ga-read { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ap .ga-read__dc { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t3); }
.ap .ga-read__out { font-size: 16px; line-height: 24px; font-weight: 800; }
.ap .ga-read__line { font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap .ga-read__dice { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .ga-dcnote { margin-top: 4px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); text-align: center; }
.ap .ga-techs { display: grid; gap: 8px; }
.ap .ga-tech--off { opacity: 0.45; }
.ap .ga-tech__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.ap .ga-tech__col { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ap .ga-tech__name { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-tech__row { display: flex; align-items: center; gap: 8px; }
.ap .ga-chip { display: inline-block; padding: 3px 7px; }
.ap .ga-chip::after { display: none; }
.ap .ga-chip > span { display: block; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .ga-tech__why { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; }
.ap .ga-tech__stat { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .ga-stances { display: flex; gap: 8px; }
.ap .ga-stance { flex: 1; min-width: 0; }
.ap .ga-stance__in { display: grid; gap: 4px; padding: 12px; }
.ap .ga-stance__in b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .ga-stance__in span { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .ga-log { display: grid; gap: 4px; }
.ap .ga-log > span { font-size: 14px; line-height: 20px; }

/* The quests-and-loot guide (/guide/quests-and-loot/): StatBlockRPG Home's header with the portrait, Grit's panel with the streak strip, and the Daily quests board. */
.ap .gq-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8.75px; }
.ap .gq-who > img { flex: none; width: 34px; height: 34px; object-fit: cover; object-position: 50% 30%; display: block; }
.ap .gq-q { --n: 10px; }
.ap .gq-q__in { padding: 8.75px 12.25px; }
.ap .gq-q__row { display: flex; align-items: center; gap: 8.75px; }
.ap .gq-pip { flex: none; display: block; width: 3px; height: 26px; }
.ap .gq-q__txt { flex: 1; min-width: 0; }
.ap .gq-q__txt b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gq-q__txt span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gq-q__r { display: grid; justify-items: end; }
.ap .gq-ct { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t3); white-space: nowrap; }
.ap .gq-ct--done { color: var(--ap-pulse); }
.ap .gq-scrap { display: inline-flex; align-items: center; gap: 3px; font-family: "Courier New", Courier, monospace; font-size: 11px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap .gq-scrap > svg { display: block; flex: none; }
.ap .gq-q__m { margin-top: 8px; }
.ap .gq-q__btn { margin-top: 8.75px; }
.ap .gq-q__chips { margin-top: 8px; display: flex; justify-content: flex-end; }
.ap .gq-q--claimed .gq-q__in { opacity: 0.55; }
.ap .gq-q--claimed .gq-q__txt b { color: var(--ap-t3); }
.ap .gq-done { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gq-bands { position: absolute; inset: 1.5px; display: flex; flex-direction: column; pointer-events: none; }
.ap .gq-bands > i { flex: 1; display: block; }
.ap .gq-chip { --n: 5px; --sw: 1px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gq-chip::after { display: none; }
.ap .gq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ap .gq-shop { display: flex; align-items: center; gap: 8px; }
.ap .gq-grit { --n: 18px; }
.ap .gq-grit__in { padding: 16px; }
.ap .gq-grit__row { display: flex; align-items: center; gap: 12px; }
.ap .gq-grit__row > svg { flex: none; display: block; }
.ap .gq-grit__txt { flex: 1; min-width: 0; }
.ap .gq-grit__txt b { display: block; font-size: 18px; line-height: 26px; font-weight: 800; color: var(--ap-t1); }
.ap .gq-grit__txt span { display: block; margin-top: 4px; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gq-power { text-align: right; }
.ap .gq-power b { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
.ap .gq-power span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gq-load { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gq-load > svg { flex: none; display: block; }
.ap .gq-streak { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ap-bsub); }
.ap .gq-streak__row { display: flex; align-items: center; gap: 8px; }
.ap .gq-streak__row > svg { flex: none; display: block; }
.ap .gq-streak__n { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-warn); }
.ap .gq-streak__bar { position: relative; flex: 1; height: 5.25px; background: var(--ap-inset); }
.ap .gq-streak__bar > i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.ap .gq-open { display: flex; align-items: center; gap: 4px; padding: 4px 8px; }
.ap .gq-open > svg { display: block; flex: none; }
.ap .gq-open b { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ap-warn); }
.ap .gq-streak__line { display: block; margin-top: 5.25px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }

/* Guide: Social (/guide/social/). The direct-message thread: a one-line header, bubbles on notch-9 panels (yours toned and tinted), an attachment block with its import button, the report hint, and the composer bar above the tab bar. */
.ap .gs-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 55px 20px 8px; }
.ap .gs-back { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-pulse); }
.ap .gs-peer { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gs-thread { padding: 0 0 16px; }
.ap .gs-row { display: flex; justify-content: flex-start; margin-top: 8px; }
.ap .gs-row--mine { justify-content: flex-end; }
.ap .gs-bubble { max-width: 86%; }
.ap .gs-in { padding: 8px 12px; }
.ap .gs-text { font-size: 14px; line-height: 20px; color: var(--ap-t1); }
.ap .gs-att { margin-top: 8px; padding: 10px; border: 1px solid var(--ap-bsub); display: grid; }
.ap .gs-kind { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gs-att-t { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gs-att-d { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gs-att-n { margin-top: 4px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gs-imp { margin-top: 8.75px; }
.ap .gs-hint { margin-top: 16px; padding: 0 8px; text-align: center; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gs-comp { flex: none; margin-bottom: 90px; display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px 44px; border-top: 1px solid var(--ap-bsub); background: var(--ap-surface); }
.ap .gs-chip { flex: none; padding: 3px 7px; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; color: var(--ap-t2); }
.ap .gs-chip::after { display: none; }
.ap .gs-field { flex: 1; min-width: 0; }
.ap .gs-field > span { display: block; padding: 10px 14px; font-size: 15px; line-height: 20px; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gs-send { flex: none; opacity: 0.4; }

/* ── End of the app screens. publish.test.ts holds every rule from ".ap {" to this line to the screens' own custom properties: no colour is typed above. ── */

/* ── The switch ──────────────────────────────────────────────────────────── */
.switch { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--base) 0%, var(--void) 18%, var(--void) 82%, var(--base) 100%); padding: clamp(8rem, 12vw, 11rem) 0; }
.switch__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.band--download .band__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
.switch__bg { position: absolute; inset: 0; z-index: -1; }
.switch__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; justify-self: center; width: min(100%, 30rem); }
.toggle__label { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(0.95rem, 1.6vw, 1.2rem); color: var(--text-tertiary); white-space: nowrap; }
.toggle__label--pro { color: #fff; }
.toggle__track { position: relative; height: 3.4rem; border-radius: 999px; background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; padding: 0.4rem; }
.toggle__knob { position: absolute; top: 0.4rem; left: 0.4rem; bottom: 0.4rem; width: calc(50% - 0.65rem); border-radius: 999px; background: linear-gradient(180deg, #fff, var(--bone)); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }

/* ── The marquee (2026-09-18, #820): one line per feature, on a loop ─────── */
/*
 * Two copies of the row, the second hidden from assistive technology, slide
 * left by exactly one row's width and repeat, so the loop is seamless. It
 * holds still under the pointer and under keyboard focus (the region is
 * focusable), and under prefers-reduced-motion it does not move at all and
 * scrolls by hand instead. #817 had taken the auto-started marquee OUT of the
 * facts ticker for WCAG 2.2.2; this one is the user's explicit ask, and the
 * pause on hover and focus plus the reduced-motion stop are the mechanism
 * 2.2.2 requires. The speed is set by the row's length so every card gets the
 * same seconds on screen whatever the catalog counts become.
 */
.band--reel { padding-bottom: 3rem; }
.marquee { position: relative; margin-top: 2rem; padding: 1rem 0 1.6rem; display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 1rem; padding-right: 1rem; flex: none; width: max-content; animation: marquee var(--marquee-s, 90s) linear infinite; will-change: transform; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee:focus-visible .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee:focus-visible { outline: 2px solid var(--pulse); outline-offset: -3px; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}
.reel__hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--text-tertiary); }
.reelcard { flex: 0 0 auto; width: min(80vw, 20rem); min-height: 15rem; scroll-snap-align: start; padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 420ms var(--ease-spring); }
@media (hover: hover) { .reelcard:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); transform: translateY(-6px); } }
.reelcard h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.reelcard p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.reelcard .kicker { margin: 0 0 0.4rem; }
.reelcard--rpg .kicker { color: var(--cyan); }
.reelcard--both .kicker { color: var(--amber); }

/* ── The numbers ─────────────────────────────────────────────────────────── */
.band--facts { padding-top: 3rem; background: linear-gradient(180deg, var(--base) 0%, var(--void) 70%, var(--base) 100%); }
.facts { display: grid; gap: 1rem; margin-top: 2.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { position: relative; isolation: isolate; display: grid; align-content: start; gap: 0.2rem; padding: 1.6rem 1.4rem; border-radius: var(--radius); background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); }
.fact__n { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(16,185,129,0.25); font-variant-numeric: tabular-nums; }
.fact__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--pulse); margin-top: 0.3rem; }
.fact__sub { font-size: 0.86rem; color: var(--text-secondary); }

/* ── Download ────────────────────────────────────────────────────────────── */
/* overflow: CLIP, never hidden, on any box whose children reveal on view(): hidden makes a scroll container and view() would measure against a box that never scrolls. */
.band--download { background: linear-gradient(to bottom, var(--base) 0%, var(--void) 14%, var(--void) 100%); overflow: clip; isolation: isolate; padding: clamp(7rem, 11vw, 10rem) 0; }
.band--download .band__bg .floorgrid { opacity: 0.5; }
.download { text-align: center; display: grid; justify-items: center; }
.download .h2--xl { max-width: 30ch; }
.download .section-lede { max-width: 46ch; }
.download .stores { justify-content: center; }


/* ══════════════════════════════════════════════════════════════════════════
 * THE GUIDE (2026-09-26): a hub and one page per area of the app. A side
 * column (this page's sections, then every guide) beside the article; the
 * pieces a section is written with (a UI label, a stat tag, where it is in
 * the app, a numbered walkthrough, a boxed rule, a table, an app screen)
 * are styled here and nowhere else.
 * ══════════════════════════════════════════════════════════════════════════ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 1.1rem; font-size: 0.82rem; color: var(--text-tertiary); }
.crumbs a { color: var(--text-secondary); }
.crumbs [aria-current] { color: var(--text-primary); }
.band--doc { padding-bottom: clamp(4rem, 7vw, 6rem); }
.guide { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.guide__side { position: sticky; top: 5.5rem; display: grid; gap: 1.8rem; max-height: calc(100svh - 7rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 0.25rem 1rem 0; scrollbar-width: thin; }
.toc__h { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.toc ol, .guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.toc a, .guides a { display: block; padding: 0.34rem 0.75rem; border-left: 2px solid var(--border); color: var(--text-secondary); font-size: 0.88rem; line-height: 1.35; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.toc a:hover, .guides a:hover { color: var(--text-primary); border-left-color: var(--border-strong); text-decoration: none; }
.guides a[aria-current] { color: var(--pulse-glow); border-left-color: var(--pulse); }
.guides a small { display: block; margin-top: 0.1rem; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-tertiary); }
.doc { min-width: 0; }
.doc__s { padding: 0 0 3.2rem; margin: 0 0 3.2rem; border-bottom: 1px solid var(--border-subtle); scroll-margin-top: 5.5rem; }
.doc__s:last-of-type { border-bottom: 0; margin-bottom: 1.5rem; }
.doc h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); max-width: 30ch; margin: 0 0 1.1rem; }
.doc h2 a { color: inherit; }
.doc h2 a:hover { text-decoration: none; }
.doc h2 a::after { content: "#"; margin-left: 0.45rem; font-weight: 400; color: var(--text-tertiary); opacity: 0; transition: opacity 160ms var(--ease-out); }
.doc h2 a:hover::after, .doc h2 a:focus-visible::after { opacity: 1; }
.doc h3:not(.ap *) { margin: 2.1rem 0 0.7rem; font-size: 1.16rem; }
/* The article's type never reaches inside a drawn app screen (:not(.ap *)): the screens carry the app's own type ramp, and a
   descendant rule here would out-rank their single-class rules and repaint the phone in the site's greys. */
.doc p:not(.ap *), .doc li:not(.ap *) { color: var(--text-secondary); max-width: 68ch; }
.doc p:not(.ap *) { margin: 0 0 1rem; }
.doc > .doc__s ul:not(.ap *), .doc > .doc__s ol:not(.walk):not(.ap *) { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li:not(.ap *) { margin: 0.3rem 0; }
.doc strong:not(.ap *) { color: var(--text-primary); font-weight: 700; }
.doc .lead { font-size: 1.08rem; color: var(--text-hero); }
.ui { display: inline-block; padding: 0.02rem 0.45rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--elevated); color: var(--text-primary); font-size: 0.84em; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.stat { display: inline-block; padding: 0 0.32rem; border: 1px solid currentColor; border-radius: 4px; font-family: var(--mono); font-size: 0.78em; font-weight: 700; line-height: 1.45; vertical-align: 0.06em; }
.stat--STR { color: var(--str); } .stat--DEX { color: var(--dex); } .stat--CON { color: var(--con); }
.stat--INT { color: var(--int); } .stat--WIS { color: var(--wis); } .stat--CHA { color: var(--cha); }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.3rem; font-size: 0.84rem; color: var(--text-tertiary); }
.where__k { margin-right: 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pulse); }
.where__step { padding: 0.16rem 0.62rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-primary); }
.where__sep { color: var(--text-tertiary); }
.mode { margin-left: 0.35rem; padding: 0.16rem 0.55rem; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; }
.mode--pro { color: var(--bone); border-color: rgba(245,243,239,0.35); background: rgba(245,243,239,0.06); }
.mode--rpg { color: var(--cyan); border-color: rgba(43,228,255,0.35); background: rgba(43,228,255,0.07); }
.mode--both { color: var(--pulse-glow); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.walk { counter-reset: walk; list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 0.75rem; }
.walk > li { counter-increment: walk; position: relative; margin: 0; max-width: none; padding: 1.05rem 1.25rem 1.1rem 3.9rem; border: 1px solid var(--glass-line); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--surface); }
.walk > li::before { content: counter(walk, decimal-leading-zero); position: absolute; left: 1.2rem; top: 1rem; font-family: var(--mono); font-size: 1.02rem; font-weight: 700; color: var(--pulse); }
.walk b { display: block; margin-bottom: 0.3rem; color: var(--text-primary); }
.walk p { margin: 0; }
.walk p + p { margin-top: 0.5rem; }
.callout { display: block; margin: 1.5rem 0 1.75rem; padding: 1.05rem 1.3rem 1.15rem; max-width: 68ch; border: 1px solid var(--glass-line); border-left: 3px solid var(--pulse); border-radius: 12px; background: linear-gradient(160deg, rgba(16,185,129,0.06), rgba(255,255,255,0.01)), var(--surface); }
.callout--tip { border-left-color: var(--cyan); background: linear-gradient(160deg, rgba(43,228,255,0.05), rgba(255,255,255,0.01)), var(--surface); }
.callout--limit { border-left-color: var(--amber); background: linear-gradient(160deg, rgba(255,176,32,0.05), rgba(255,255,255,0.01)), var(--surface); }
.callout__k { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pulse); }
.callout--tip .callout__k { color: var(--cyan); }
.callout--limit .callout__k { color: var(--amber); }
.callout__t { display: block; margin-bottom: 0.35rem; color: var(--text-primary); }
.callout p { margin: 0 0 0.6rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout ul { margin: 0.2rem 0 0.6rem; padding-left: 1.15rem; }
.tbox { margin: 1.3rem 0 1.7rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); overflow: clip; }
.tbox__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.doc-table th, .doc-table td { padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table thead th { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); background: var(--elevated); }
.doc-table tbody th { color: var(--text-primary); font-weight: 600; }
.doc-table td { color: var(--text-secondary); }
.doc p.tbox__note { max-width: none; margin: 0; padding: 0.6rem 0.9rem 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; margin: 0.5rem 0 1.5rem; }
.doc-split__text > :first-child { margin-top: 0; }
.doc-fig { position: sticky; top: 6rem; margin: 0; display: grid; justify-items: center; gap: 0.8rem; }
.doc-fig .device { --dz: 0.64; box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 2px rgba(0,0,0,0.9); }
.doc-fig figcaption { max-width: 16.5rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-tertiary); text-align: center; }
.shots { display: grid; gap: 0.8rem; margin: 1.3rem 0 1.7rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.shot { margin: 0; padding: 0.6rem 0.6rem 0.7rem; border: 1px solid var(--border-subtle); border-radius: 14px; background: radial-gradient(circle at 50% 35%, rgba(16,185,129,0.08), transparent 70%), var(--surface); display: grid; gap: 0.45rem; }
.shot img { width: 100%; height: auto; }
.shot figcaption { font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); text-align: center; }
.shots--line { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.figs { display: grid; gap: 0.8rem; margin: 1.3rem 0 1.7rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.figs__i { padding: 0.9rem 1rem 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); display: grid; gap: 0.2rem; }
.figs__i b { font-size: 1.6rem; line-height: 1.1; color: var(--text-primary); }
.figs__i span { font-size: 0.82rem; line-height: 1.35; color: var(--text-secondary); }
.faq { display: grid; gap: 0.6rem; margin: 1rem 0 0.5rem; }
.faq details { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.faq summary { cursor: pointer; list-style: none; padding: 0.95rem 3rem 0.95rem 1.2rem; position: relative; font-weight: 600; color: var(--text-primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.2rem; color: var(--pulse); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > :not(summary) { margin: 0 1.2rem 1rem; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.pager__a { display: grid; gap: 0.25rem; padding: 1.1rem 1.3rem; color: var(--text-primary); }
.pager__a:hover { text-decoration: none; }
.pager__a--next { text-align: right; }
.pager__k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pulse); }
.pager__a b { font-size: 1.1rem; }
/* The hub: every guide as a card, and the app's two tab bars as a map. */
.guidecards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); margin: 1.3rem 0 1.5rem; }
.guidecard { display: grid; gap: 0.5rem; align-content: start; padding: 1.35rem 1.4rem 1.45rem; color: var(--text-primary); }
.guidecard:hover { text-decoration: none; }
.guidecard b { font-size: 1.15rem; }
.guidecard span.guidecard__d { font-size: 0.92rem; color: var(--text-secondary); }
.guidecard .mode { justify-self: start; margin: 0; }
.appmap { display: grid; gap: 1rem; margin: 1.3rem 0 1.7rem; }
.appmap__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.appmap__cell { display: grid; justify-items: center; gap: 0.35rem; padding: 0.9rem 0.5rem 0.95rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); text-align: center; color: var(--text-secondary); }
.appmap__cell b { color: var(--text-primary); font-size: 0.9rem; }
.appmap__cell span { font-size: 0.76rem; line-height: 1.35; }
.appmap__cell--on { border-color: rgba(16,185,129,0.4); }
.appmap__cell svg { color: var(--pulse); }
.appmap .appmap__h { margin: 0.5rem 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
/* Under 980px the side column dissolves (display: contents) so its two lists become the grid's own items: this page's
   sections as one scrolling row of chips ABOVE the article, and every guide BELOW it, after the pager. Stacked whole above the
   article they pushed the first sentence more than a phone's screen down (measured at 390 wide, 2026-09-26). */
@media (max-width: 980px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .guide__side { display: contents; }
  .toc { order: 0; min-width: 0; }
  .doc { order: 1; }
  .guides { order: 2; padding-top: 1.4rem; border-top: 1px solid var(--border-subtle); }
  .toc ol { display: flex; gap: 0.45rem; overflow-x: auto; overscroll-behavior-x: contain; padding: 0.15rem 1.5rem 0.55rem 0.1rem; scrollbar-width: thin; mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .toc li { flex: none; }
  .toc a { white-space: nowrap; padding: 0.34rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .toc a:hover { border-color: var(--border-strong); }
  .guides ul { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.35rem 1rem; }
  .doc-split { grid-template-columns: minmax(0, 1fr); }
  .doc-fig { position: static; }
  .shots--line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .doc-table { font-size: 0.84rem; }
  .doc-table th, .doc-table td { padding: 0.52rem 0.7rem; }
  .doc-table thead th { letter-spacing: 0.08em; }
  .appmap__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__a--next { text-align: left; }
}
@media print {
  .guide__side, .pager, .doc-fig { display: none; }
  .guide { display: block; }
  .doc p, .doc li, .doc-table td, .walk b, .callout__t { color: #000; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cine__body--hero { grid-template-columns: 1fr; align-items: end; }
  .cine__body--art { grid-template-columns: 1fr; }
  .cine__art { width: min(100%, 18rem); }
  .hero__card { justify-self: start; transform: none; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .chapter__grid { grid-template-columns: 1fr; gap: 2rem; }
  .chapter__grid--flip .chapter__media { order: 0; }
  .chapter__media { position: static; height: auto; padding-top: 3rem; }
  .step { min-height: 0; padding: 1.5rem 0; }
  .switch { padding: 5rem 0; }
  .switch__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .navlinks { display: none; }
  .menu { display: block; }
  .topbar__right .pill { display: none; }
  .cine--hero { min-height: auto; }
  .cine__body--hero { padding: 6rem 0 3.5rem; }
  .hero__cardbody { grid-template-columns: 6rem 1fr; }
  .tile--wide { grid-column: span 1; }
  .foot__cols { grid-template-columns: 1fr; }
  .band { padding: 4.5rem 0; }
  .band--raise { padding-top: 0; }
  .hero { min-height: 0; }
  .hero__inner { padding: 7rem 0 5.5rem; }
  .hero__cue { display: none; }
  .stores { gap: 0.6rem; }
  .store { padding: 0.65rem 0.95rem 0.65rem 0.85rem; }
  .curtain { border-radius: 20px 20px 0 0; }
  .ticker { border-radius: 20px 20px 0 0; }
  .band--first { padding-top: 4.5rem; }
  .device { --dz: 0.72; }
  .toggle { gap: 0.8rem; }
  .toggle__track { height: 2.8rem; }
  .band--download { padding: 5rem 0; }
  .fact__n { font-size: 2.2rem; }
  .toggle { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; width: min(100%, 16rem); }
  .toggle__track { width: 100%; }
  .reelcard { width: 74vw; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .fact { padding: 1.2rem 1rem; }
  .fact__sub { font-size: 0.8rem; }
}
/*
 * Reduced motion switches EVERY animation off, scroll-driven ones included,
 * and each keyframe above is written so its natural state is the finished
 * one: a reveal is visible, the hero is opaque, the top bar is translucent,
 * the knob rests on StatBlockPro. Nothing waits for a scroll that never
 * animates.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero { position: relative; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { width: auto; flex-wrap: wrap; row-gap: 0.4rem; }
  .ticker__track .ticker__item:nth-child(n + 13) { display: none; }
}