html[data-ui="v3"] {--ds-accent:oklch(0.65 0.25 285);--ds-accent-foreground:oklch(0.2 0.03 285);--ds-destructive:oklch(0.64 0.22 25);--ds-success:oklch(0.70 0.16 150);--ds-warning:oklch(0.78 0.16 80);--ds-ease-spatial:cubic-bezier(0.22, 1, 0.36, 1);--ds-font-sans:'Inter', system-ui, -apple-system, sans-serif;}
html[data-ui="v3"][data-theme="light"], html[data-ui="v3"] [data-theme="light"] {--ds-accent:oklch(0.45 0.23 285);--ds-accent-foreground:oklch(0.99 0 0);--ds-destructive:oklch(0.52 0.21 25);--ds-success:oklch(0.48 0.15 150);--ds-warning:oklch(0.52 0.16 75);--ds-ease-spatial:cubic-bezier(0.22, 1, 0.36, 1);--ds-font-sans:'Inter', system-ui, -apple-system, sans-serif;}
html[data-ui="v3"] [data-theme="dark"] {--ds-accent:oklch(0.65 0.25 285);--ds-accent-foreground:oklch(0.2 0.03 285);--ds-destructive:oklch(0.64 0.22 25);--ds-success:oklch(0.70 0.16 150);--ds-warning:oklch(0.78 0.16 80);--ds-ease-spatial:cubic-bezier(0.22, 1, 0.36, 1);--ds-font-sans:'Inter', system-ui, -apple-system, sans-serif;}
/* WP-2.03: self-hosted OFL faces, swap, size-adjusted fallbacks (web/fonts.ts).
   Geist (Vercel) and JetBrains Mono (JetBrains): SIL Open Font License 1.1, notice and text at /assets/fonts/OFL.txt */
@font-face { font-family: "Cas1no Sans"; src: url("/assets/fonts/geist-latin.0cbbe628.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cas1no Sans"; src: url("/assets/fonts/geist-latin-ext.3640f935.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cas1no Display"; src: url("/assets/fonts/geist-latin.0cbbe628.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cas1no Display"; src: url("/assets/fonts/geist-latin-ext.3640f935.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cas1no Mono"; src: url("/assets/fonts/jetbrains-mono-latin.70344343.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cas1no Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 100 499; size-adjust: 103.25%; ascent-override: 97.3%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Cas1no Sans Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 500 900; size-adjust: 101.5%; ascent-override: 99%; descent-override: 29.1%; line-gap-override: 0%; }
@font-face { font-family: "Cas1no Display Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"); font-weight: 100 900; size-adjust: 103.75%; ascent-override: 96.9%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: "Cas1no Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Menlo"), local("Consolas"); font-weight: 100 900; size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
/* WP-2.02: v3 tokens (web/tokens.ts -> web/tokens-css.ts) */
/* Theme: dark is the v3 default. */
html[data-ui="v3"] {
  color-scheme: dark;
  --bg: #10100f;
  --bg-soft: #151514;
  --bg-raised: #1b1a19;
  --bg-card: #1f1e1d;
  --surface-2: #252423;
  --surface-3: #2a2927;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-control: #918c83;
  --text: #f4f2eb;
  --text-muted: #c7c2b9;
  --text-faint: #b6b2aa;
  --accent: #bba7ff;
  --accent-strong: #d3c3ff;
  --accent-ink: #201438;
  --accent-2: #bba7ff;
  --accent-2-strong: #d3c3ff;
  --gold: #f2c14e;
  --gold-strong: #ffd873;
  --gold-ink: #241804;
  --good: #58f6b2;
  --warn: #ffd84a;
  --bad: #ff7a8a;
  --info: #80b7ff;
  --sponsor: #9aa4b8;
  --sponsor-bg: rgba(154, 164, 184, 0.12);
  --border-selected: color-mix(in srgb, var(--accent) 36%, transparent);
  --focus: var(--accent);
  --selected: var(--accent);
  --critical: var(--bad);
  --warning: var(--warn);
  --success: var(--good);
  --rating: var(--gold);
  --elev-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --elev-panel: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px -16px rgba(0, 0, 0, 0.65);
  --elev-overlay: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 8px rgba(0, 0, 0, 0.5), 0 32px 64px -24px rgba(0, 0, 0, 0.8);
}
/* Opt-in light theme for a subtree (or the whole page: <html data-theme="light">). */
html[data-ui="v3"][data-theme="light"],
html[data-ui="v3"] [data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f2;
  --bg-soft: #efede6;
  --bg-raised: #fffefb;
  --bg-card: #fffefb;
  --surface-2: #f1eee8;
  --surface-3: #e8e5dc;
  --border: rgba(8, 10, 18, 0.10);
  --border-strong: rgba(8, 10, 18, 0.20);
  --border-control: #79746c;
  --text: #1b1a18;
  --text-muted: #49453f;
  --text-faint: #5d5952;
  --accent: #5326cc;
  --accent-strong: #3e1b9c;
  --accent-ink: #ffffff;
  --accent-2: #5326cc;
  --accent-2-strong: #3e1b9c;
  --gold: #8a6100;
  --gold-strong: #6e4c00;
  --gold-ink: #ffffff;
  --good: #096b40;
  --warn: #8a5a00;
  --bad: #b3261e;
  --info: #1d4fb8;
  --sponsor: #586174;
  --sponsor-bg: rgba(88, 97, 116, 0.10);
  --border-selected: color-mix(in srgb, var(--accent) 36%, transparent);
  --elev-card: 0 1px 2px rgba(10, 13, 24, 0.08), 0 8px 24px -12px rgba(10, 13, 24, 0.18);
  --elev-panel: 0 2px 4px rgba(10, 13, 24, 0.08), 0 16px 40px -16px rgba(10, 13, 24, 0.24);
  --elev-overlay: 0 4px 8px rgba(10, 13, 24, 0.10), 0 32px 64px -24px rgba(10, 13, 24, 0.32);
}
html[data-ui="v3"] [data-theme="dark"] {
  color-scheme: dark;
  --bg: #10100f;
  --bg-soft: #151514;
  --bg-raised: #1b1a19;
  --bg-card: #1f1e1d;
  --surface-2: #252423;
  --surface-3: #2a2927;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-control: #918c83;
  --text: #f4f2eb;
  --text-muted: #c7c2b9;
  --text-faint: #b6b2aa;
  --accent: #bba7ff;
  --accent-strong: #d3c3ff;
  --accent-ink: #201438;
  --accent-2: #bba7ff;
  --accent-2-strong: #d3c3ff;
  --gold: #f2c14e;
  --gold-strong: #ffd873;
  --gold-ink: #241804;
  --good: #58f6b2;
  --warn: #ffd84a;
  --bad: #ff7a8a;
  --info: #80b7ff;
  --sponsor: #9aa4b8;
  --sponsor-bg: rgba(154, 164, 184, 0.12);
  --elev-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --elev-panel: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px -16px rgba(0, 0, 0, 0.65);
  --elev-overlay: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 8px rgba(0, 0, 0, 0.5), 0 32px 64px -24px rgba(0, 0, 0, 0.8);
}
/* Shape, motion, layers, spacing, voices, type scale (theme independent). */
html[data-ui="v3"] {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-round: 999px;
  --radius: var(--radius-md);
  --radius-card: var(--radius-lg);
  --border-width: 1px;
  --border-width-emphasis: 2px;
  --motion-micro: 120ms;
  --motion-card: 180ms;
  --motion-overlay: 240ms;
  --motion-route: 320ms;
  --motion-hero: 550ms;
  --ease-out-spectral: cubic-bezier(0.22, 0.8, 0.24, 1);
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 60;
  --z-dialog: 70;
  --z-popover: 80;
  --z-drawer: 85;
  --z-critical: 90;
  --z-skip: 100;
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --sp-128: 8rem;
  --target-min: 44px;
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cas1no Display", "Cas1no Display Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Cas1no Sans", "Cas1no Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: "Cas1no Sans", "Cas1no Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cas1no Mono", "Cas1no Mono Fallback", ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --font: var(--font-ui);
  --weight-display: 740;
  --weight-h1: 700;
  --weight-h2: 650;
  --weight-h3: 600;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-data: 560;
  --type-display-xl: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  --type-h1-entity: clamp(2rem, 1.0385rem + 3.846vw, 4.5rem);
  --type-h1-editorial: clamp(2rem, 1.3269rem + 2.692vw, 3.75rem);
  --type-h1-data: clamp(2rem, 1.5192rem + 1.923vw, 3.25rem);
  --type-h2-data: clamp(1.25rem, 1.1538rem + 0.385vw, 1.5rem);
  --type-h2-editorial: clamp(1.75rem, 1.4615rem + 1.154vw, 2.5rem);
  --type-h3: clamp(1.5rem, 1.3077rem + 0.769vw, 2rem);
  --type-subhead: clamp(1.0625rem, 0.9904rem + 0.288vw, 1.25rem);
  --type-h4: clamp(0.9375rem, 0.8894rem + 0.192vw, 1.0625rem);
  --type-card-title: clamp(1rem, 0.9519rem + 0.192vw, 1.125rem);
  --type-body-l: 1.125rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-micro: 0.8125rem;
  --type-data: clamp(0.875rem, 0.7788rem + 0.385vw, 1.125rem);
  --type-stat: clamp(1.75rem, 1.4615rem + 1.154vw, 2.5rem);
  --type-h1: var(--type-h1-entity);
  --type-page-title: var(--type-h1-data);
  --type-h2: var(--type-h2-data);
  --track-display: -0.04em;
  --track-h1: -0.032em;
  --track-h2: -0.02em;
  --track-h3: -0.014em;
  --track-h4: -0.006em;
  --track-label: 0.08em;
  --leading-display: 0.98;
  --leading-h1: 1.04;
  --leading-h2: 1.2;
  --leading-h3: 1.28;
  --leading-body: 1.6;
}
html[data-ui="v3"][data-ui-page="entity"] {
  --type-page-title: var(--type-h1-entity);
}
html[data-ui="v3"][data-ui-page="home"] {
  --type-h1: var(--type-display-xl);
  --type-h2: var(--type-h2-editorial);
}
html[data-ui="v3"][data-ui-page="article"],
html[data-ui="v3"][data-ui-page="content"] {
  --type-page-title: var(--type-h1-editorial);
  --type-h2: var(--type-h2-editorial);
}
html[data-ui="v3"][data-ui-page="error"] {
  --type-page-title: var(--type-display-xl);
}
/* Entity DNA without inline styles (OW-G15) */
html[data-ui="v3"] [data-dna="0"] { --dna-primary: #6c39ff; --dna-secondary: #ff2f9d; }
html[data-ui="v3"] [data-dna="1"] { --dna-primary: #37d8ff; --dna-secondary: #9a4dff; }
html[data-ui="v3"] [data-dna="2"] { --dna-primary: #b8ff45; --dna-secondary: #37d8ff; }
html[data-ui="v3"] [data-dna="3"] { --dna-primary: #ff8a32; --dna-secondary: #ff2f9d; }
html[data-ui="v3"] [data-dna="4"] { --dna-primary: #58f6b2; --dna-secondary: #37d8ff; }
html[data-ui="v3"] [data-dna="5"] { --dna-primary: #ff566b; --dna-secondary: #ff8a32; }
html[data-ui="v3"] [data-dna="6"] { --dna-primary: #80b7ff; --dna-secondary: #9a4dff; }
html[data-ui="v3"] [data-dna="7"] { --dna-primary: #ffd84a; --dna-secondary: #ff566b; }
/* WP-2.03: voices + hierarchy */
:where(html[data-ui="v3"]) body {
  font-family: var(--font-ui);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Weight is never synthesised (a faux bold is thicker than any real cut and shifts widths on
     swap); style IS: Geist ships upright only, so without this <em>, <cite> and <i> would render
     upright and lose the only visible cue of emphasis. The engine slants the face instead. */
  font-synthesis: style;
  font-kerning: normal;
}
/* An unbroken name ("LuckyBandit.club", "Verifiedstreamer.com") must wrap rather than leave the
   viewport (WCAG 1.4.10 reflow at 320 px). `anywhere` also lowers the min-content width, so a flex
   or grid parent can shrink the heading; hyphens give a real word a proper break first. */
:where(html[data-ui="v3"]) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
:where(html[data-ui="v3"]) h1 {
  font-size: var(--type-page-title); font-weight: var(--weight-h1);
  line-height: var(--leading-h1); letter-spacing: var(--track-h1);
}
:where(html[data-ui="v3"]) h2 {
  font-size: var(--type-h2); font-weight: var(--weight-h2);
  line-height: var(--leading-h2); letter-spacing: var(--track-h2);
}
:where(html[data-ui="v3"]) h3 {
  font-size: var(--type-subhead); font-weight: var(--weight-h3);
  line-height: var(--leading-h3); letter-spacing: var(--track-h3);
}
:where(html[data-ui="v3"]) h4 {
  font-size: var(--type-h4); font-weight: var(--weight-h3);
  letter-spacing: var(--track-h4);
}
/* The signature hero (home) and the error page speak in Display XL. */
:where(html[data-ui="v3"][data-ui-page="home"]) .hero h1,
:where(html[data-ui="v3"][data-ui-page="error"]) h1 {
  font-weight: var(--weight-display);
  line-height: var(--leading-display); letter-spacing: var(--track-display);
}
/* Names are not only headings: an entity name also sits in a chip ("similar games"), a breadcrumb,
   the sticky bar and a card link. `overflow-wrap` inherits, so the body gets the cheap guarantee
   (a long word wraps inside its block) and the shrink-to-fit boxes, whose min-content would
   otherwise stay as wide as the word, get `anywhere`. Tables are left alone on purpose:
   `anywhere` there would let auto layout squeeze a column to a single glyph. */
:where(html[data-ui="v3"]) body { overflow-wrap: break-word; }
:where(html[data-ui="v3"]) :is(.chip, .badge, .kind-chip, .signal, .crumbs li,
  .entity-sticky-bar-name, .meta-link, .card h2 a, .card-title a) {
  overflow-wrap: anywhere;
}
/* Controls do not inherit the page's face by default; they speak the same voice. */
:where(html[data-ui="v3"]) :is(button, input, select, textarea, optgroup) {
  font-family: inherit;
}
/* The hero's lead paragraph needs air under a Display XL headline. */
:where(html[data-ui="v3"][data-ui-page="home"]) .hero h1 { margin-bottom: var(--sp-24); }
/* Section titles inside a data layout are labels, not headlines. */
:where(html[data-ui="v3"]) .section-head h2 {
  font-weight: var(--weight-h2); line-height: var(--leading-h3); letter-spacing: var(--track-h3);
}
/* Titles inside cards and rows never out-size the section label they sit under. */
:where(html[data-ui="v3"]) :is(.card, .card-title) :is(h2, h3, h4) {
  font-size: var(--type-card-title); font-weight: var(--weight-strong);
  line-height: var(--leading-h3); letter-spacing: var(--track-h4);
}
/* Data voice: numbers that are compared stand in a column (tabular figures in the UI face) and are
   never a slashed zero: a zero in an identifier must stay a zero. The first group is the markup the
   templates really emit (read off /games, /games/:slug, /casinos, /providers: the card foot holds
   the RTP, a key/value fact holds the max win, badges and chips hold the reliability and counts);
   the second is for new templates (`class="num"`, `class="data-voice"`). */
:where(html[data-ui="v3"]) :is(table, td, th, dd, time, .foot, .meta, .badge, .chip, .signal,
  .pagination, .last-verified, .facet-n, .facet-note, .rating-val, .rating-dim, .compare-table,
  .nav-live-count strong, .nav-live-when, .nav-area-num, .stat strong, .stat span) {
  font-variant-numeric: tabular-nums lining-nums;
}
:where(html[data-ui="v3"]) :is(.data, .metric, .rtp, .pct, .num, .data-voice) {
  font-variant-numeric: tabular-nums lining-nums;
}
/* The language switcher lists every language by its own name, Latin Extended included; in the
   document face that alone fetches the 15 kB latin-ext file on every page. The system face has them. */
:where(html[data-ui="v3"]) .lang-switcher :is(select, option, label, button) {
  font-family: var(--font-system);
}
/* The error page's Display XL title needs the whole column: in the legacy 46 rem prose measure
   "404 — hittades inte" would wrap after the dash and leave it dangling. */
:where(html[data-ui="v3"][data-ui-page="error"]) .prose { max-width: none; }
:where(html[data-ui="v3"]) .data-voice {
  font-family: var(--font-data); font-weight: var(--weight-data); letter-spacing: -0.005em;
}
:where(html[data-ui="v3"]) .stat strong {
  font-family: var(--font-display); font-size: var(--type-stat);
  font-weight: var(--weight-display); letter-spacing: var(--track-h2); line-height: 1.05;
}
/* Code voice: hashes and code-like strings only; ligatures off so an id stays what it was typed as. */
:where(html[data-ui="v3"]) :is(code, kbd, samp, pre, .mono, .case-header) {
  font-family: var(--font-mono);
  font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0;
}
:where(html[data-ui="v3"]) :is(.eyebrow, .nav-eyebrow, .nav-group-heading, .footer-col-heading, .kind-chip) {
  font-weight: 600; letter-spacing: var(--track-label);
}
/* WP-2.02: tokens applied */
:where(html[data-ui="v3"]) .card,
:where(html[data-ui="v3"]) .stat {
  border-radius: var(--radius-card);
  box-shadow: var(--elev-card);
}
:where(html[data-ui="v3"]) .card:hover {
  border-color: var(--border-selected);
}
:where(html[data-ui="v3"]) .card-dna:hover {
  border-color: color-mix(in srgb, var(--dna-primary) 55%, transparent);
  box-shadow: var(--elev-panel), 0 0 40px -14px color-mix(in srgb, var(--dna-primary) 45%, transparent);
}
:where(html[data-ui="v3"]) .card-media { border-radius: var(--radius-md); }
:where(html[data-ui="v3"]) :is(.kv, .toc, .filter-sidebar, .case-file, .notice, .note) {
  border-radius: var(--radius-md);
}
:where(html[data-ui="v3"]) :is(.chip, .filter-chip, .badge, .kind-chip, .sponsor-tag) {
  border-radius: var(--radius-round);
}
:where(html[data-ui="v3"]) .quick-nav {
  /* Legacy paints it flat --bg because it can stick; over v3's atmosphere that is a dark slab. A
     frosted bar in the haze-lit ground colour: it still hides what scrolls under it when it sticks. */
  background: color-mix(in srgb, var(--bg-soft) 58%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:where(html[data-ui="v3"]) :focus-visible {
  outline: 2px solid var(--bg); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus);
}
/* WP-2.07: data visualisation */
:where(html[data-ui="v3"]) .dv {
  --dv-ink: var(--text); --dv-mute: var(--text-muted); --dv-faint: var(--text-faint);
  --dv-acc: var(--accent); --dv-acc2: var(--accent-2);
  --dv-r1: color-mix(in srgb, var(--dv-acc) 14%, var(--bg-card));
  --dv-r2: color-mix(in srgb, var(--dv-acc) 30%, var(--bg-card));
  --dv-r3: color-mix(in srgb, var(--dv-acc) 52%, var(--bg-card));
  --dv-r4: color-mix(in srgb, var(--dv-acc) 76%, var(--bg-card));
  --dv-r5: var(--dv-acc);
  margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); justify-items: start; max-inline-size: 100%;
  overflow-wrap: break-word;
}
:where(html[data-ui="v3"]) .dv > * { min-inline-size: 0; max-inline-size: 100%; }
:where(html[data-ui="v3"]) .dv-cap {
  margin: 0; font-size: var(--type-micro); font-weight: var(--weight-strong);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
:where(html[data-ui="v3"]) .dv-readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8);
  font-size: var(--type-small);
}
:where(html[data-ui="v3"]) .dv-v {
  font-family: var(--font-data); font-size: var(--type-data); font-weight: var(--weight-data);
  font-variant-numeric: tabular-nums;
}
:where(html[data-ui="v3"]) :is(.dv-s, .dv-note, .dv-unknown) { color: var(--text-muted); }
:where(html[data-ui="v3"]) .dv-notes { display: grid; gap: var(--sp-4); }
:where(html[data-ui="v3"]) .dv-note { margin: 0; max-inline-size: 42rem; font-size: var(--type-micro); }
:where(html[data-ui="v3"]) .dv-svg {
  display: block; max-inline-size: 100%; block-size: auto; overflow: visible;
  font-family: var(--font-data); font-size: var(--type-micro); font-variant-numeric: tabular-nums;
}
:where(html[data-ui="v3"]) .dv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); margin: 0; padding: 0; list-style: none; }
:where(html[data-ui="v3"]) .dv-legend li, :where(html[data-ui="v3"]) .dv-ramp { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--type-small); }
:where(html[data-ui="v3"]) .dv-ramp { gap: var(--sp-4); }
:where(html[data-ui="v3"]) .dv-data > summary { cursor: pointer; font-size: var(--type-micro); color: var(--text-muted); }
:where(html[data-ui="v3"]) .dv-scroll { max-inline-size: 100%; overflow-x: auto; }
:where(html[data-ui="v3"]) .dv-table { border-collapse: collapse; font-size: var(--type-micro); font-variant-numeric: tabular-nums; }
:where(html[data-ui="v3"]) .dv-table :is(th, td) { padding: var(--sp-4) var(--sp-12) var(--sp-4) 0; text-align: start; border-bottom: 1px solid var(--border); }
:where(html[data-ui="v3"]) .dv-table caption { text-align: start; color: var(--text-muted); padding-bottom: var(--sp-4); }
:where(html[data-ui="v3"]) .dv-cell { fill: var(--dv-acc); stroke: var(--dv-acc); stroke-opacity: 0.55; stroke-width: 0.75; }
:where(html[data-ui="v3"]) .dv-h1 { fill: var(--dv-r1); }
:where(html[data-ui="v3"]) .dv-h2 { fill: var(--dv-r2); }
:where(html[data-ui="v3"]) .dv-h3 { fill: var(--dv-r3); }
:where(html[data-ui="v3"]) .dv-h4 { fill: var(--dv-r4); }
:where(html[data-ui="v3"]) .dv-h5 { fill: var(--dv-r5); }
:where(html[data-ui="v3"]) a:focus-visible .dv-cell { stroke: var(--focus); stroke-width: 2; stroke-opacity: 1; }
:where(html[data-ui="v3"]) .dv-stage { display: grid; place-items: center; }
:where(html[data-ui="v3"]) .dv-stage > * { grid-area: 1 / 1; }
:where(html[data-ui="v3"]) .dv-over { font-size: var(--type-data); line-height: 1; text-align: center; pointer-events: none; }
:where(html[data-ui="v3"]) :is(.dv-percentile, .dv-ladder, .dv-hist, .dv-radar) .dv-svg { inline-size: 100%; max-inline-size: 28rem; }
:where(html[data-ui="v3"]) .dv-hex .dv-svg { inline-size: 100%; max-inline-size: 34rem; }
:where(html[data-ui="v3"]) .dv-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-40) var(--sp-32); max-inline-size: 72rem; }
:where(html[data-ui="v3"]) .dv-board > div { display: grid; gap: var(--sp-16); align-content: start; min-inline-size: 0; }
:where(html[data-ui="v3"]) .dv-hero { align-items: center; gap: var(--sp-16) var(--sp-32); }
:where(html[data-ui="v3"]) .dv-hero .dv-ring { justify-items: center; }
:where(html[data-ui="v3"]) .dv-hero .dv-ring .dv-svg { inline-size: clamp(9rem, 22vw, 10.5rem); }
:where(html[data-ui="v3"]) .dv-hero .dv-over .dv-v { font-size: var(--type-h4); }
:where(html[data-ui="v3"]) .dv-hero .dv-percentile .dv-s { font-size: var(--type-body-l); color: var(--text); }
:where(html[data-ui="v3"]) .dv-side .dv-steps .dv-svg { inline-size: 8.5rem; }
:where(html[data-ui="v3"]) .dv-side .dv-percentile .dv-svg { max-inline-size: 24rem; }
@media (min-width: 40rem) {
  :where(html[data-ui="v3"]) .dv-hero { grid-template-columns: auto minmax(0, 1fr); }
  :where(html[data-ui="v3"]) .dv-hero .dv-ring { justify-items: start; }
}
@media (min-width: 56rem) {
  :where(html[data-ui="v3"]) .dv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(html[data-ui="v3"]) :is(.dv-hero, .dv-wide) { grid-column: 1 / -1; }
  :where(html[data-ui="v3"]) .dv-split { grid-template-columns: minmax(0, 34rem) minmax(14rem, 22rem); grid-template-rows: auto repeat(3, min-content) 1fr; column-gap: var(--sp-32); align-items: start; }
  :where(html[data-ui="v3"]) .dv-split > .dv-cap { grid-column: 1 / -1; }
  :where(html[data-ui="v3"]) .dv-split > .dv-svg { grid-column: 1; grid-row: 2 / -1; }
  :where(html[data-ui="v3"]) .dv-split > :is(.dv-readout, .dv-notes, .dv-data, .dv-sr) { grid-column: 2; }
}
:where(html[data-ui="v3"]) .dv-delta {
  display: inline-flex; align-items: center; gap: var(--sp-4); padding: 1px var(--sp-8);
  border: 1px solid var(--border-strong); border-radius: var(--radius-round);
  font-family: var(--font-data); font-size: var(--type-micro); font-weight: var(--weight-data);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text);
}
:where(html[data-ui="v3"]) .dv-delta[data-dir="none"] { border-style: dashed; color: var(--text-muted); }
/* Vertical thread of events (Atlas 18.41). */
:where(html[data-ui="v3"]) .dv-timeline { max-inline-size: 40rem; }
:where(html[data-ui="v3"]) .dv-tl { margin: 0; padding: 0; list-style: none; }
:where(html[data-ui="v3"]) .dv-tl-i { position: relative; padding-inline-start: var(--sp-32); padding-block-end: var(--sp-16); }
:where(html[data-ui="v3"]) .dv-tl-i:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 7px; inset-block: 20px 0;
  inline-size: 2px; background: var(--border-strong);
}
:where(html[data-ui="v3"]) .dv-tl-n { position: absolute; inset-inline-start: 0; inset-block-start: 1px; }
:where(html[data-ui="v3"]) .dv-tl-i :is(p) { margin: 0; }
:where(html[data-ui="v3"]) .dv-tl-h { font-family: var(--font-data); font-size: var(--type-small); font-variant-numeric: tabular-nums; }
:where(html[data-ui="v3"]) .dv-tl-st { margin-inline-start: var(--sp-8); font-size: var(--type-micro); letter-spacing: var(--track-label); text-transform: uppercase; }
:where(html[data-ui="v3"]) .dv-tl-t { font-weight: var(--weight-strong); }
:where(html[data-ui="v3"]) .dv-tl-d { color: var(--text-muted); font-size: var(--type-small); }
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-ui="v3"]) .dv-d { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--motion-hero) var(--ease-out-spectral); }
  @starting-style {
    :where(html[data-ui="v3"]) .dv-d { stroke-dashoffset: 1; }
  }
}
@media print {
  :where(html[data-ui="v3"]) .dv { --dv-ink: CanvasText; --dv-mute: CanvasText; --dv-faint: GrayText; --dv-acc: CanvasText; --dv-acc2: CanvasText; --bg-card: Canvas; }
  :where(html[data-ui="v3"]) .dv .dv-sr.visually-hidden { position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}
@media (forced-colors: active) { /* the tokens ARE system colours: an SVG attribute is not recoloured by the browser */
  :where(html[data-ui="v3"]) .dv { --dv-ink: CanvasText; --dv-mute: CanvasText; --dv-faint: GrayText; --dv-acc: Highlight; --dv-acc2: LinkText; --bg-card: Canvas; }
  :where(html[data-ui="v3"]) .dv-delta { border-color: CanvasText; }
}
/* WP-2.05: form and control kit */
html[data-ui="v3"] { --rim-spectrum: linear-gradient(100deg, var(--chroma-pink), var(--chroma-violet) 34%, var(--chroma-cyan) 68%, var(--chroma-lime));
  --rim-quiet: linear-gradient(100deg, color-mix(in srgb, var(--chroma-pink) 45%, var(--accent)), color-mix(in srgb, var(--chroma-violet) 55%, var(--accent)) 34%, var(--accent) 68%, color-mix(in srgb, var(--chroma-lime) 40%, var(--accent)));
  --glass: linear-gradient(180deg, color-mix(in srgb, var(--text) 4.5%, transparent), transparent 62%);
  --aura: 0 0 22px -2px color-mix(in srgb, var(--chroma-violet) 50%, transparent); }
html[data-ui="v3"] .glyph { width: 1.25em; height: 1.25em; flex: none; }
html[data-ui="v3"] :is(.btn, .range__slider)[hidden] { display: none; }
html[data-ui="v3"] :is(.control, .btn, .check input, .switch input, .segmented__opt > span, .chip-choice > span) { transition: background-color var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral), box-shadow var(--motion-micro) var(--ease-out-spectral), color var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] .field { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ui="v3"] .field > legend { padding: 0; margin-bottom: var(--sp-8); }
html[data-ui="v3"] .field__label { font-size: var(--type-small); font-weight: var(--weight-strong); line-height: 1.3; color: var(--text); }
html[data-ui="v3"] .field__opt { margin-inline-start: 0.25em; font-weight: 400; color: var(--text-muted); }
html[data-ui="v3"] .field__hint { margin: 0; max-width: 60ch; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .field__error { display: flex; gap: var(--sp-8); align-items: flex-start; margin: 0; font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--bad); }
html[data-ui="v3"] .field__error .glyph { margin-top: 0.1em; }
html[data-ui="v3"] .field__foot { display: flex; justify-content: flex-end; gap: var(--sp-16); }
html[data-ui="v3"] .field__counter { margin: 0; font-size: var(--type-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .field__counter[data-state="near"] { color: var(--warn); }
html[data-ui="v3"] .field__counter[data-state="over"] { color: var(--bad); font-weight: var(--weight-strong); }
html[data-ui="v3"] .field__choices { display: flex; flex-direction: column; }
html[data-ui="v3"] .field--group { gap: var(--sp-4); }
html[data-ui="v3"] .field--invalid .check input, html[data-ui="v3"] .field--invalid .check input:hover:not(:disabled) { border-color: var(--bad); }
html[data-ui="v3"] .field--disabled .field__label { color: var(--text-muted); }

/* The well */
html[data-ui="v3"] .control { display: block; width: 100%; min-height: 3rem; margin: 0; padding: 0 var(--sp-16); font: inherit; font-size: var(--type-body);
  line-height: 1.4; color: var(--text); background: var(--glass), var(--bg); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent); accent-color: var(--accent); }
html[data-ui="v3"] .control::placeholder { color: var(--text-faint); opacity: 1; }
html[data-ui="v3"] .control:hover:not(:disabled):not([aria-invalid="true"]) { border-color: var(--text-muted); }
html[data-ui="v3"] .control:focus-visible:not([aria-invalid="true"]) { border-color: transparent; background: var(--glass) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--rim-spectrum) border-box; }
html[data-ui="v3"] .control[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
html[data-ui="v3"] .control:user-invalid { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
html[data-ui="v3"] .control:user-invalid:is(:hover:not(:disabled), :focus-visible) { border-color: var(--bad); background: var(--glass), var(--bg); }
html[data-ui="v3"] .control:disabled { color: var(--text-faint); background: var(--bg-soft); border-style: dashed; cursor: not-allowed; }
html[data-ui="v3"] .control[readonly] { background: var(--bg-soft); border-color: var(--border-strong); }
html[data-ui="v3"] .control--area { min-height: 8.5rem; padding-block: var(--sp-12); resize: vertical; line-height: 1.5; }
html[data-ui="v3"] input.control[type="number"], html[data-ui="v3"] input.control[type="date"] { font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .control-wrap { position: relative; }
html[data-ui="v3"] .control-wrap--select .control { appearance: none; padding-inline-end: 2.75rem; text-overflow: ellipsis; cursor: pointer; }
html[data-ui="v3"] .control__chevron { position: absolute; top: 50%; inset-inline-end: var(--sp-16); margin-top: -0.625em; color: var(--text-muted); pointer-events: none; }
html[data-ui="v3"] .control-wrap--affix .control { padding-inline-end: 3.5rem; }
html[data-ui="v3"] .control__affix { position: absolute; top: 50%; inset-inline-end: var(--sp-16); transform: translateY(-50%); font-size: var(--type-small); color: var(--text-muted); pointer-events: none; }
html[data-ui="v3"] .control--file { padding: var(--sp-8); cursor: pointer; }
html[data-ui="v3"] .control--file::file-selector-button { margin-inline-end: var(--sp-16); padding: var(--sp-8) var(--sp-16); font: inherit; font-weight: var(--weight-strong);
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; }
html[data-ui="v3"] .control--file:hover::file-selector-button { border-color: var(--accent); }

/* Check, radio, switch: the control and its words are ONE label, so the hit area is the whole row (44 px). */
html[data-ui="v3"] :is(.check, .switch) { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sp-12); min-height: var(--target-min); padding-block: 0.6875rem; cursor: pointer; }
html[data-ui="v3"] :is(.check, .switch) input { appearance: none; flex: none; display: grid; place-content: center; margin: 0; background: var(--bg); border: 1.5px solid var(--border-control); cursor: pointer; }
html[data-ui="v3"] .check input { width: 1.375rem; height: 1.375rem; border-radius: var(--radius-xs); }
html[data-ui="v3"] .check input[type="radio"] { border-radius: var(--radius-round); }
html[data-ui="v3"] .check input::after { content: ""; width: 0.4rem; height: 0.75rem; margin-top: -0.12rem; border: solid var(--accent-ink); border-width: 0 0.125rem 0.125rem 0; transform: rotate(45deg) scale(0);
  transition: transform var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] .check input[type="radio"]::after { width: 0.625rem; height: 0.625rem; margin: 0; border: 0; border-radius: var(--radius-round); background: var(--accent); transform: scale(0); }
html[data-ui="v3"] .check input:checked { background: var(--accent); border-color: var(--accent); }
html[data-ui="v3"] .check input[type="radio"]:checked { background: var(--bg); }
html[data-ui="v3"] .check input:checked::after { transform: rotate(45deg) scale(1); }
html[data-ui="v3"] .check input[type="radio"]:checked::after { transform: scale(1); }
html[data-ui="v3"] .check input:indeterminate { background: var(--accent); border-color: var(--accent); }
html[data-ui="v3"] .check input:indeterminate::after { width: 0.7rem; height: 0; margin: 0; border-width: 0 0 0.125rem; transform: none; }
html[data-ui="v3"] .switch input { width: 2.75rem; height: 1.5rem; margin-top: 0.0625rem; position: relative; border-radius: var(--radius-round); background: var(--surface-3); }
html[data-ui="v3"] .switch input::after { content: ""; position: absolute; top: 50%; inset-inline-start: 0.25rem; width: 1rem; height: 1rem; margin-top: -0.5rem; border-radius: var(--radius-round); background: var(--text-muted);
  transition: inset-inline-start var(--motion-micro) var(--ease-out-spectral), background-color var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] .switch input:checked { background: var(--accent); border-color: var(--accent); }
html[data-ui="v3"] .switch input:checked::after { inset-inline-start: 1.5rem; background: var(--accent-ink); }
html[data-ui="v3"] :is(.check, .switch) input:hover:not(:disabled) { border-color: var(--text-muted); }
html[data-ui="v3"] :is(.check, .switch) input:disabled { border-style: dashed; background: var(--bg-soft); cursor: not-allowed; }
html[data-ui="v3"] .check input:checked:disabled::after { border-color: var(--text-faint); }
html[data-ui="v3"] .check input[type="radio"]:checked:disabled::after, html[data-ui="v3"] .switch input:checked:disabled::after { background: var(--text-faint); }
html[data-ui="v3"] .switch input:checked:disabled { border-color: var(--text-faint); }
html[data-ui="v3"] :is(.check, .switch) input:disabled ~ * { color: var(--text-faint); cursor: not-allowed; }
html[data-ui="v3"] :is(.check__label, .switch__label) { flex: 1 1 0; min-width: 0; font-size: var(--type-body); line-height: 1.4; overflow-wrap: anywhere; }
html[data-ui="v3"] :is(.check__count, .chip-choice__n) { direction: ltr; unicode-bidi: isolate; }
html[data-ui="v3"] .check__count { margin-inline-start: auto; font-size: var(--type-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .check__hint { flex-basis: 100%; padding-inline-start: 2.375rem; font-size: var(--type-small); color: var(--text-muted); }

/* Segmented control: a well with a clear selected well inside; radios (forms) or links (preferences). */
html[data-ui="v3"] fieldset.segmented { min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ui="v3"] .segmented__legend { padding: 0; margin-bottom: var(--sp-8); font-size: var(--type-small); font-weight: var(--weight-strong); }
html[data-ui="v3"] .segmented__row { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); max-width: 100%; padding: var(--sp-4); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
html[data-ui="v3"] .segmented__opt { position: relative; display: flex; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
html[data-ui="v3"] .segmented__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-ui="v3"] .segmented__opt > span { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--sp-16); font-size: var(--type-small); font-weight: var(--weight-strong);
  color: var(--text-muted); border: 1px solid transparent; border-radius: var(--radius-sm); text-align: center; overflow-wrap: anywhere; }
html[data-ui="v3"] .segmented__opt:hover > span { color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
html[data-ui="v3"] .segmented__opt input:checked + span, html[data-ui="v3"] .segmented__opt[aria-current] > span { color: var(--text); background: var(--rim-spectrum) left bottom / 100% 2px no-repeat, var(--surface-3);
  border-color: var(--border-selected); }
html[data-ui="v3"] .segmented__opt input:disabled + span { color: var(--text-faint); cursor: not-allowed; background: none; border: 1px dashed var(--border-strong); box-shadow: none; }

/* Choice chips and the removable filter capsule */
html[data-ui="v3"] fieldset.chips { min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ui="v3"] fieldset.chips > legend { padding: 0; margin-bottom: var(--sp-8); }
html[data-ui="v3"] .chips__row { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
html[data-ui="v3"] .chip-choice { position: relative; display: inline-flex; max-width: 100%; }
html[data-ui="v3"] .chip-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-ui="v3"] .chip-choice > span { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--target-min); padding: 0 var(--sp-16); font-size: var(--type-small); color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-round); overflow-wrap: anywhere; }
html[data-ui="v3"] .chip-choice:hover > span { border-color: var(--text-muted); }
html[data-ui="v3"] .chip-choice input:checked + span { border-color: transparent; background: linear-gradient(color-mix(in srgb, var(--accent) 14%, var(--bg-card)), color-mix(in srgb, var(--accent) 14%, var(--bg-card))) padding-box, var(--rim-spectrum) border-box; font-weight: var(--weight-strong); }
html[data-ui="v3"] .chip-choice input:checked + span::before { content: ""; width: 0.3rem; height: 0.55rem; margin-inline-end: 0.125rem; border: solid currentColor; border-width: 0 0.125rem 0.125rem 0; transform: rotate(45deg) translateY(-0.1rem); }
html[data-ui="v3"] .chip-choice input:disabled + span { color: var(--text-faint); border-style: dashed; cursor: not-allowed; }
html[data-ui="v3"] .chip-choice__n { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
html[data-ui="v3"] .capsule { display: inline-flex; align-items: stretch; max-width: 100%; min-height: 2.25rem; font-size: var(--type-small); line-height: 1.35; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 1.125rem; overflow: hidden; }
html[data-ui="v3"] .capsule__text { flex: 1 1 auto; min-width: 0; align-self: center; padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12); overflow-wrap: anywhere; }
html[data-ui="v3"] .capsule__facet { color: var(--text-muted); }
html[data-ui="v3"] .capsule__facet::after { content: ":"; }
html[data-ui="v3"] .capsule__value { font-weight: var(--weight-strong); }
html[data-ui="v3"] .capsule__x { display: grid; place-items: center; flex: none; width: 2.25rem; color: var(--text-muted); border-inline-start: 1px solid var(--border); }
html[data-ui="v3"] .capsule__x:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Ranges: the number is the control; the slider is revealed by script and follows it. */
html[data-ui="v3"] .range { display: flex; align-items: center; gap: var(--sp-16); }
html[data-ui="v3"] .range > :is(.control, .control-wrap) { flex: 0 0 8rem; width: 8rem; }
html[data-ui="v3"] .range:not(.range--live) .range__slider { display: none; }
html[data-ui="v3"] .range__slider { flex: 1 1 8rem; min-width: 0; height: var(--target-min); margin: 0; appearance: none; background: transparent; accent-color: var(--accent); cursor: pointer; }
html[data-ui="v3"] .range__slider::-webkit-slider-runnable-track { height: 0.25rem; background: var(--border-control); border-radius: var(--radius-round); }
html[data-ui="v3"] .range__slider::-moz-range-track { height: 0.25rem; background: var(--border-control); border-radius: var(--radius-round); }
html[data-ui="v3"] .range__slider::-webkit-slider-thumb { appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; background: var(--accent); border: 2px solid var(--bg); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--accent); }
html[data-ui="v3"] .range__slider::-moz-range-thumb { width: 1rem; height: 1rem; background: var(--accent); border: 2px solid var(--bg); border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--accent); }
html[data-ui="v3"] fieldset.range-bounds { min-width: 0; margin: 0; padding: 0; border: 0; }
html[data-ui="v3"] .range-bounds__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
html[data-ui="v3"] .range-bounds__cell { min-width: 0; }
html[data-ui="v3"] .range-bounds__label { display: block; margin-bottom: var(--sp-4); font-size: var(--type-small); color: var(--text-muted); }

/* Buttons: four roles, one construction. Custom properties carry the role; the rules carry the states. */
html[data-ui="v3"] .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  min-height: 3rem; padding: var(--sp-8) var(--sp-20); margin: 0; font: inherit; font-size: var(--type-body); font-weight: var(--weight-strong); line-height: 1.3; letter-spacing: var(--track-h4); text-align: center; text-decoration: none; cursor: pointer;
  color: var(--btn-fg, var(--text)); background: var(--btn-bg, var(--surface-2)); border: 1px solid var(--btn-bd, var(--border-strong)); border-radius: var(--radius-sm); box-sizing: border-box; max-width: 100%;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
html[data-ui="v3"] .btn__label { min-width: 0; overflow-wrap: anywhere; }
html[data-ui="v3"] .btn:hover { --btn-bg: var(--surface-3); --btn-bd: var(--accent); text-decoration: none; }
html[data-ui="v3"] .btn:active { transform: translateY(1px); box-shadow: none; }
html[data-ui="v3"] .btn--secondary { --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--border-strong); }
html[data-ui="v3"] .btn__icon { width: 1.125em; height: 1.125em; }
html[data-ui="v3"] .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: transparent; --rim: var(--rim-quiet); border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, white 14%, var(--btn-bg)), var(--btn-bg) 70%) padding-box, var(--rim) border-box; }
html[data-ui="v3"] .btn--primary:hover { --btn-bg: var(--accent-strong); --rim: var(--rim-spectrum);
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--chroma-violet) 55%, transparent), var(--aura); }
html[data-ui="v3"] .btn--primary:active { --btn-bg: color-mix(in srgb, var(--accent) 82%, var(--bg)); }
html[data-ui="v3"] .btn--ghost { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: transparent; isolation: isolate; min-height: var(--target-min); padding-inline: 0; border-inline-width: 0; justify-content: flex-start; text-align: start; background: none; box-shadow: none; }
html[data-ui="v3"] .btn--ghost::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(var(--sp-12) * -1); border-radius: var(--radius-sm); background: var(--btn-bg); }
html[data-ui="v3"] .btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--accent) 12%, transparent); --btn-bd: transparent; }
html[data-ui="v3"] .btn--ghost:is(:disabled, [aria-disabled="true"])::before { background: none; }
html[data-ui="v3"] .btn--danger { --btn-bg: transparent; --btn-fg: var(--bad); --btn-bd: color-mix(in srgb, var(--bad) 55%, transparent); }
html[data-ui="v3"] .btn--danger:hover { --btn-bg: color-mix(in srgb, var(--bad) 14%, transparent); --btn-bd: var(--bad); }
html[data-ui="v3"] .btn--icon { flex: none; width: var(--target-min); min-height: var(--target-min); padding: 0; --btn-bg: transparent; --btn-bd: transparent; box-shadow: none; }
html[data-ui="v3"] .btn[aria-pressed="true"] { --btn-bg: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); --btn-bd: var(--border-selected); background: var(--rim-spectrum) left bottom / 100% 2px no-repeat, var(--btn-bg); }
html[data-ui="v3"] .btn:disabled, html[data-ui="v3"] .btn[aria-disabled="true"]:not([aria-busy]) { --btn-bg: var(--bg-soft); --btn-fg: var(--text-faint); --btn-bd: var(--border-strong); background: var(--btn-bg); border-color: var(--btn-bd); border-style: dashed; box-shadow: none; opacity: 1; cursor: not-allowed; pointer-events: auto; }
html[data-ui="v3"] .btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
html[data-ui="v3"] .btn[aria-busy="true"] .btn__label::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-inline-end: 0.5em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-round); animation: cas-spin 0.8s linear infinite; }
html[data-ui="v3"] .btn--external { --btn-bg: transparent; --btn-bd: var(--sponsor); padding-inline-start: 0; overflow: hidden; }
html[data-ui="v3"] .btn--external:hover { --btn-bg: var(--sponsor-bg); --btn-bd: var(--text-muted); }
html[data-ui="v3"] .btn__ad { align-self: stretch; display: flex; align-items: center; margin-inline-end: var(--sp-4); padding-inline: var(--sp-12); font-size: var(--type-micro); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sponsor); background: var(--sponsor-bg); border-inline-end: 1px solid var(--btn-bd); }
html[data-ui="v3"] .btn--external.is-unavailable { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--sp-8) var(--sp-20); color: var(--text-muted); border-style: dashed; cursor: not-allowed; }
html[data-ui="v3"] .btn__why { font-size: var(--type-micro); font-weight: 400; color: var(--text-muted); }

/* Form composition */
html[data-ui="v3"] .form { display: grid; gap: var(--sp-24); min-width: 0; }
html[data-ui="v3"] fieldset.form-step { min-width: 0; margin: 0; padding: var(--sp-24); border: 1px solid transparent; border-radius: var(--radius-card); box-shadow: var(--elev-card);
  background: var(--glass) padding-box, linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(var(--border), var(--border)) border-box; transition: box-shadow var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] fieldset.form-step:focus-within { background: var(--glass) padding-box, linear-gradient(var(--bg-card), var(--bg-card)) padding-box, var(--rim-quiet) border-box; box-shadow: var(--elev-card), 0 18px 48px -28px color-mix(in srgb, var(--chroma-violet) 60%, transparent); }
html[data-ui="v3"] .form-step > legend { display: flex; align-items: center; gap: var(--sp-12); float: left; width: 100%; margin: 0 0 var(--sp-16); padding: 0; font-family: var(--font-display); font-size: var(--type-card-title); font-weight: var(--weight-h3); letter-spacing: var(--track-h4); }
html[data-ui="v3"] .form-step > legend ~ * { clear: both; }
html[data-ui="v3"] .form-step > .form-note { margin-bottom: var(--sp-16); }
html[data-ui="v3"] .form-step__body { display: grid; gap: var(--sp-20); min-width: 0; }
html[data-ui="v3"] :is(.form-step__no, .intake-steps__no) { position: relative; display: grid; place-items: center; flex: none; font-family: var(--font-data); font-weight: var(--weight-data); color: var(--text); font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .form-step__no { width: 1.75rem; height: 1.75rem; font-size: var(--type-small); }
html[data-ui="v3"] :is(.form-step__no, .intake-steps__no)::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-round); background: conic-gradient(from 200deg, var(--chroma-pink), var(--chroma-violet), var(--chroma-cyan), var(--chroma-lime), var(--chroma-pink));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 1.5px)); transition: transform 700ms var(--ease-out-spectral); }
html[data-ui="v3"] fieldset.form-step:focus-within .form-step__no::before { transform: rotate(120deg); }
html[data-ui="v3"] .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-20); }
html[data-ui="v3"] .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-24); }
html[data-ui="v3"] .form-note { max-width: 52ch; margin: 0; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .form-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
html[data-ui="v3"] .error-summary { padding: var(--sp-16) var(--sp-20); background: color-mix(in srgb, var(--bad) 8%, var(--bg-card)); border: 1px solid var(--bad); border-inline-start-width: 4px; border-radius: var(--radius-md); }
html[data-ui="v3"] .error-summary:focus { outline: 2px solid var(--bad); outline-offset: 2px; box-shadow: none; }
html[data-ui="v3"] .error-summary__title { margin: 0; font-size: var(--type-card-title); line-height: var(--leading-h3); }
html[data-ui="v3"] .error-summary__lead { margin: var(--sp-4) 0 0; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .error-summary ul { margin: var(--sp-12) 0 0; padding-inline-start: var(--sp-20); }
html[data-ui="v3"] .error-summary a { color: var(--text); font-weight: var(--weight-strong); text-decoration: underline; }
html[data-ui="v3"] .search-form { display: flex; gap: var(--sp-8); align-items: stretch; max-width: 36rem; }
html[data-ui="v3"] .search-form__field { position: relative; flex: 1; min-width: 0; }
html[data-ui="v3"] .search-form__icon { position: absolute; top: 50%; inset-inline-start: var(--sp-16); margin-top: -0.625em; color: var(--text-muted); pointer-events: none; }
html[data-ui="v3"] .search-form .control { padding-inline-start: 2.75rem; }

/* Focus: one ring for every kit control (restated last: the controls paint their own box-shadow), an aura outside it,
   and the prism edge inside it that each control's own rule draws (.control above, .btn--primary here). */
html[data-ui="v3"] :is(.control, .btn, .check input, .switch input, .capsule__x, .range__slider):focus-visible,
html[data-ui="v3"] :is(.segmented__opt input, .chip-choice input):focus-visible + span { outline: 2px solid var(--bg); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus), var(--aura); }
html[data-ui="v3"] .btn--primary:focus-visible { --rim: var(--rim-spectrum); }
html[data-ui="v3"] a.segmented__opt:focus-visible { outline-offset: 0; }
@keyframes cas-spin { to { transform: rotate(360deg); } }
@media (pointer: coarse) {
  html[data-ui="v3"] .capsule { min-height: var(--target-min); }
  html[data-ui="v3"] .capsule__x { width: var(--target-min); }
  html[data-ui="v3"] .segmented__opt > span { min-height: var(--target-min); }
}
@media (max-width: 30rem) {
  html[data-ui="v3"] .range { flex-wrap: wrap; }
  html[data-ui="v3"] fieldset.form-step { padding: var(--sp-16); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v3"] :is(.control, .btn, .check input, .check input::after, .switch input, .switch input::after, .segmented__opt > span, .chip-choice > span, fieldset.form-step, .form-step__no::before, .intake-steps__no::before) { transition: none; }
  html[data-ui="v3"] .btn[aria-busy="true"] .btn__label::before { animation: none; border-inline-end-color: transparent; }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .control, html[data-ui="v3"] .btn, html[data-ui="v3"] .check input, html[data-ui="v3"] .switch input, html[data-ui="v3"] .capsule { border-color: ButtonBorder; }
  html[data-ui="v3"] .control[aria-invalid="true"], html[data-ui="v3"] .control:user-invalid { border-width: 3px; }
  html[data-ui="v3"] .control:disabled, html[data-ui="v3"] .btn:disabled, html[data-ui="v3"] .btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  html[data-ui="v3"] fieldset.form-step { background: Canvas; border-color: ButtonBorder; }
  html[data-ui="v3"] .control:focus-visible:not([aria-invalid="true"]), html[data-ui="v3"] fieldset.form-step:focus-within { background: Canvas; border-color: Highlight; }
  html[data-ui="v3"] .chip-choice input:checked + span, html[data-ui="v3"] .btn[aria-pressed="true"] { background: Canvas; }
  html[data-ui="v3"] :is(.form-step__no, .intake-steps__no)::before { background: none; -webkit-mask: none; mask: none; border: 1px solid CanvasText; }
  html[data-ui="v3"] .btn--ghost::before { background: none; }
  html[data-ui="v3"] .check input:checked, html[data-ui="v3"] .switch input:checked { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  html[data-ui="v3"] .check input:checked::after { border-color: HighlightText; }
  html[data-ui="v3"] .check input[type="radio"]:checked { background: Canvas; }
  html[data-ui="v3"] .check input[type="radio"]::after { background: Highlight; }
  html[data-ui="v3"] .switch input::after { background: ButtonText; }
  html[data-ui="v3"] .switch input:checked::after { background: HighlightText; }
  html[data-ui="v3"] .segmented__opt input:checked + span, html[data-ui="v3"] .segmented__opt[aria-current] > span { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  html[data-ui="v3"] .chip-choice input:checked + span { border: 3px solid Highlight; }
  html[data-ui="v3"] .btn--primary { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  html[data-ui="v3"] .btn--primary:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) { background: ButtonFace; color: GrayText; border-color: GrayText; border-style: dashed; }
  html[data-ui="v3"] .btn--primary[aria-busy="true"] { color: ButtonText; border-color: ButtonText; border-style: solid; }
  html[data-ui="v3"] .btn[aria-pressed="true"] { border-width: 3px; }
  html[data-ui="v3"] .error-summary { border-width: 3px; }
  html[data-ui="v3"] :is(.control, .btn, .check input, .switch input, .capsule__x, .range__slider):focus-visible, html[data-ui="v3"] :is(.segmented__opt input, .chip-choice input):focus-visible + span { outline: 3px solid Highlight; outline-offset: 2px; }
}
/* WP-3.01: global shell */
html[data-ui="v3"] { --shell-row-h: 2.75rem; }
html[data-ui="v3"]:has(.secondary-nav:not(.section-row--areas)) { --stick-top: calc(var(--shell-h) + var(--shell-row-h)); }
html[data-ui="v3"] .skip-links { display: contents; }
html[data-ui="v3"] .skip-link { left: auto; inset-inline-start: -9999px; }
html[data-ui="v3"] .skip-link:focus { left: auto; inset-inline-start: var(--sp-16); top: var(--sp-8); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-round); padding: var(--sp-8) var(--sp-16); font-weight: var(--weight-strong); box-shadow: var(--elev-overlay); text-decoration: none; }
html[data-ui="v3"] .skip-link--bar { display: none; }

/* header */
html[data-ui="v3"] .site-header { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--border); }
html[data-ui="v3"] .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
html[data-ui="v3"] .site-header > .wrap { min-height: calc(var(--shell-h) - 1px); padding-block: 0; gap: var(--sp-12); flex-wrap: nowrap; }
/* the wordmark is a Latin brand name: it reads CAS1N in every script and never mirrors with the page */
html[data-ui="v3"] .logo { direction: ltr; unicode-bidi: isolate; flex: none; align-items: center; min-height: var(--target-min); gap: 1px; font-family: var(--font-display); font-weight: 700; font-size: var(--type-body-l); letter-spacing: 0.06em; }
html[data-ui="v3"] .logo:hover { text-decoration: none; }
/* the Portal (src/web/brand/portal.ts) is the ONE logo mark: its ring takes --portal-a/--portal-b of the page's product section (css/ui-v3-icons.ts), its hover is b4's 8 degree turn */
html[data-ui="v3"] .logo .logo-portal { width: 1.2em; height: 1.2em; margin-inline-start: 0.1em; }

/* primary navigation: the ONE glowing indicator of the shell. The section row below it is a quiet pill (never a second underline) */
html[data-ui="v3"] .primary-nav { display: none; align-items: stretch; gap: var(--sp-4); align-self: stretch; }
html[data-ui="v3"] .primary-nav a.pn-wide { display: none; }
html[data-ui="v3"] :is(.primary-nav, .secondary-nav) a { position: relative; display: inline-flex; align-items: center; flex: none; padding: 0 var(--sp-12); border: 0; font-size: var(--type-small); font-weight: 560; white-space: nowrap; color: var(--text-muted); transition: color var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] :is(.primary-nav, .secondary-nav) a:hover { color: var(--text); text-decoration: none; }
html[data-ui="v3"] :is(.primary-nav, .secondary-nav) a[aria-current="page"] { color: var(--text); }
html[data-ui="v3"] .primary-nav a::after { content: ""; position: absolute; inset-inline: var(--sp-12); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--dna-primary, var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--dna-primary, var(--accent)) 70%, transparent); opacity: 0; transform: scaleX(0.4); transition: opacity var(--motion-card) var(--ease-out-spectral), transform var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .primary-nav a:is(:hover, [aria-current="page"])::after { opacity: 1; transform: none; }
html[data-ui="v3"] .primary-nav a:hover:not([aria-current="page"])::after { opacity: 0.55; }

/* search pill */
html[data-ui="v3"] .header-search { display: none; align-items: center; gap: var(--sp-8); flex: 1 1 auto; min-width: 0; max-width: 36rem; height: 2.5rem; margin-inline: auto 0; padding-inline: var(--sp-12) var(--sp-8); border: 1px solid var(--border-strong); border-radius: var(--radius-round); background: color-mix(in srgb, var(--surface-2) 72%, transparent); color: var(--text-faint); transition: border-color var(--motion-micro) var(--ease-out-spectral), background var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] .header-search:hover { border-color: var(--border-control); }
html[data-ui="v3"] .header-search:focus-within { border-color: var(--accent); background: var(--bg-card); outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text); }
html[data-ui="v3"] .header-search .shell-ico { flex: none; }
html[data-ui="v3"] .header-search input[type="search"] { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: var(--type-small); }
html[data-ui="v3"] .header-search input[type="search"]:focus-visible { outline: none; box-shadow: none; }
html[data-ui="v3"] .header-search input::placeholder { color: var(--text-faint); opacity: 1; }
html[data-ui="v3"] .header-search.is-active input { min-width: 0; }
html[data-ui="v3"] .header-search .omni-panel { left: auto; inset-inline: auto 0; width: min(32rem, 92vw); margin-top: var(--sp-8); border-color: var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--elev-overlay); }
html[data-ui="v3"] .shell-kbd { flex: none; font-family: var(--font-system); padding: 2px var(--sp-8); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: transparent; color: var(--text-faint); font-size: var(--type-micro); line-height: 1.3; }

/* the cluster */
html[data-ui="v3"] .header-actions { margin-inline-start: auto; gap: var(--sp-4); flex: none; }
html[data-ui="v3"] .header-actions .nav-menu { margin: 0; }
html[data-ui="v3"] :is(.shell-btn, .header-saved, .nav-menu-toggle) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-width: var(--target-min); min-height: var(--target-min); height: var(--target-min); padding: 0 var(--sp-8); border: 1px solid transparent; border-radius: var(--radius-round); background: transparent; color: var(--text-muted); font-size: var(--type-small); font-weight: 560; cursor: pointer; transition: background var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral), color var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] :is(.shell-btn, .header-saved, .nav-menu-toggle):hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
html[data-ui="v3"] :is(.shell-pop, .nav-menu)[open] > :is(.shell-btn, .nav-menu-toggle) { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
html[data-ui="v3"] .header-saved[aria-current="page"] { color: var(--text); background: var(--surface-2); }
html[data-ui="v3"] .header-saved--has .header-saved-icon path { fill: var(--accent); stroke: var(--accent); }
html[data-ui="v3"] .header-saved-count { top: -1px; inset-inline-end: -2px; min-width: 1.1rem; height: 1.1rem; background: var(--accent); color: var(--accent-ink); }
html[data-ui="v3"] .shell-pop > summary, html[data-ui="v3"] .nav-menu > summary { list-style: none; }
html[data-ui="v3"] .shell-pop > summary::-webkit-details-marker { display: none; }
html[data-ui="v3"] .shell-btn-text { display: none; letter-spacing: 0.04em; }
html[data-ui="v3"] .shell-btn-sub { display: none; color: var(--text-faint); font-weight: 500; }
html[data-ui="v3"] .shell-btn-sub::before { content: "·"; margin-inline-end: var(--sp-4); }
html[data-ui="v3"] .shell-pop--you { display: none; }
html[data-ui="v3"] .nav-menu-icon { width: 1.1rem; gap: 4px; }
/* Menu and Close share one grid cell: the toggle is as wide as the wider word in both states, so opening the menu moves nothing */
html[data-ui="v3"] .nav-menu-labels { display: grid; grid-template-columns: auto; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-ui="v3"] .nav-menu-labels > * { grid-area: 1 / 1; display: block; visibility: hidden; }
html[data-ui="v3"] .nav-menu:not([open]) .nav-menu-label-open, html[data-ui="v3"] .nav-menu[open] .nav-menu-label-close { visibility: visible; }

/* popovers (native <details>; the script adds Escape, light dismiss and one-open-at-a-time) */
html[data-ui="v3"] .shell-pop { position: relative; }
html[data-ui="v3"] .shell-panel { position: absolute; inset-inline-end: 0; top: calc(100% + var(--sp-8)); z-index: var(--z-popover); width: min(22rem, calc(100vw - var(--sp-32))); max-height: calc(100dvh - var(--shell-h) - var(--sp-24)); overflow-y: auto; padding: var(--sp-16); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--elev-overlay); color: var(--text); font-size: var(--type-small); font-weight: 400; text-align: start; }
html[data-ui="v3"] .shell-panel-title { margin: 0 0 var(--sp-8); color: var(--text-faint); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
html[data-ui="v3"] .shell-panel-title:not(:first-child) { margin-top: var(--sp-16); }
html[data-ui="v3"] .shell-note { margin: 0 0 var(--sp-12); color: var(--text-muted); }
html[data-ui="v3"] .shell-market { margin: 0 0 var(--sp-4); color: var(--text); font-weight: 560; }
html[data-ui="v3"] .shell-panel > .shell-market + .shell-note { margin-bottom: 0; }
html[data-ui="v3"] .shell-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html[data-ui="v3"] .shell-list a { display: flex; align-items: center; gap: var(--sp-12); min-height: 2.5rem; padding: 0 var(--sp-12); border-radius: var(--radius-sm); color: var(--text); }
html[data-ui="v3"] .shell-list a:hover { background: var(--surface-2); text-decoration: none; }
html[data-ui="v3"] .shell-list .shell-ico { color: var(--text-faint); }
html[data-ui="v3"] .shell-cta { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; margin-bottom: var(--sp-12); padding: 0 var(--sp-16); border-radius: var(--radius-round); background: var(--accent); color: var(--accent-ink); font-weight: var(--weight-strong); }
html[data-ui="v3"] .shell-cta:hover { background: var(--accent-strong); text-decoration: none; }
/* languages are links, not a select and a submit: the two complete ones as a segmented pair, the rest in a short scrolling list */
html[data-ui="v3"] .lang-pick { display: grid; gap: var(--sp-12); }
html[data-ui="v3"] .lang-pick .shell-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-ui="v3"] .lang-pick .shell-seg .chip { justify-content: center; }
html[data-ui="v3"] .lang-note { margin: 0; color: var(--text-faint); font-size: var(--type-micro); }
html[data-ui="v3"] .lang-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-8); max-height: 13rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
html[data-ui="v3"] .lang-more a { display: flex; align-items: center; min-height: 2.25rem; padding: 0 var(--sp-8); border-radius: var(--radius-sm); color: var(--text); overflow-wrap: anywhere; }
html[data-ui="v3"] .lang-more a:hover { background: var(--surface-2); text-decoration: none; }
html[data-ui="v3"] .lang-more a[aria-current="true"] { background: var(--surface-3); font-weight: 600; }
/* the footer folds the long list behind a disclosure */
html[data-ui="v3"] .lang-fold summary { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 2.25rem; padding: 0 var(--sp-12); border-radius: var(--radius-round); color: var(--text-muted); cursor: pointer; list-style: none; }
html[data-ui="v3"] .lang-fold summary::-webkit-details-marker { display: none; }
html[data-ui="v3"] .lang-fold summary::after { content: "▾" / ""; transition: transform var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .lang-fold summary:hover { color: var(--text); background: var(--surface-2); }
html[data-ui="v3"] .lang-fold[open] summary::after { transform: rotate(180deg); }
html[data-ui="v3"] .lang-fold .lang-note { margin-top: var(--sp-8); }
html[data-ui="v3"] .lang-fold .lang-more { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); max-height: none; margin-top: var(--sp-8); }

/* section row: sticky under the header; scrolls sideways with a visible partial next item */
html[data-ui="v3"] .secondary-nav { display: block; position: sticky; top: var(--shell-h); z-index: calc(var(--z-header) - 1); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-soft) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-ui="v3"] .secondary-nav > .wrap { display: flex; align-items: stretch; gap: 0; min-height: var(--shell-row-h); padding-block: 0; padding-inline: calc(var(--space-3) - var(--sp-12)) var(--sp-32); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-16); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, black var(--sp-8), black calc(100% - var(--sp-32)), transparent); mask-image: linear-gradient(to right, transparent, black var(--sp-8), black calc(100% - var(--sp-32)), transparent); }
html[data-ui="v3"] .secondary-nav > .wrap:dir(rtl) { -webkit-mask-image: linear-gradient(to left, transparent, black var(--sp-8), black calc(100% - var(--sp-32)), transparent); mask-image: linear-gradient(to left, transparent, black var(--sp-8), black calc(100% - var(--sp-32)), transparent); }
html[data-ui="v3"] .secondary-nav > .wrap::-webkit-scrollbar { display: none; }
html[data-ui="v3"] .secondary-nav a { scroll-snap-align: start; font-weight: 520; isolation: isolate; }
/* the current entry is a quiet tonal pill in the section's colour; the hover pill is neutral */
html[data-ui="v3"] .secondary-nav a::before { content: ""; position: absolute; inset-block: 0.4rem; inset-inline: 0; z-index: -1; border-radius: var(--radius-round); background: transparent; transition: background var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .secondary-nav a:hover::before { background: var(--surface-2); }
html[data-ui="v3"] .secondary-nav a[aria-current="page"]::before { background: color-mix(in srgb, var(--sec-hue, var(--dna-primary, var(--accent))) 17%, transparent); }
/* a faint wash of the section's colour behind the row, rising from where the content starts */
html[data-ui="v3"] .secondary-nav--washed { --sec-hue: var(--dna-primary); background-image: radial-gradient(34rem 100% at max(0px, calc((100% - var(--maxw)) / 2)) 0, color-mix(in srgb, var(--dna-primary) 13%, transparent), transparent); }
html[data-ui="v3"] .secondary-nav--washed:dir(rtl) { background-image: radial-gradient(34rem 100% at min(100%, calc(100% - (100% - var(--maxw)) / 2)) 0, color-mix(in srgb, var(--dna-primary) 13%, transparent), transparent); }
html[data-ui="v3"] .section-row--areas { position: static; }

/* bottom bar: Home, Discover, Search, Saved, You — stable order, an active pill */
html[data-ui="v3"] .bottom-nav { display: flex; align-items: stretch; justify-content: space-around; gap: 0; height: calc(var(--shell-bottom-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--sp-4) env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-raised) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
html[data-ui="v3"] .bn-item { position: relative; flex: 1 1 0; min-width: 0; min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 var(--sp-4); color: var(--text-muted); font-size: var(--type-micro); font-weight: 560; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; list-style: none; }
html[data-ui="v3"] .bn-item::-webkit-details-marker { display: none; }
html[data-ui="v3"] .bn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="v3"] .bn-pill { position: relative; display: grid; place-items: center; width: 3.5rem; height: 1.75rem; border: 1px solid transparent; border-radius: var(--radius-round); transition: background var(--motion-card) var(--ease-out-spectral), color var(--motion-card) var(--ease-out-spectral); }
/* Search is the action in the middle, outlined: a filled pill means "you are here" and only one item may say that */
html[data-ui="v3"] .bn-item--search .bn-pill { border-color: var(--border-control); color: var(--text); }
html[data-ui="v3"] .bn-item:hover { color: var(--text); text-decoration: none; }
html[data-ui="v3"] .bn-item[aria-current="page"] { color: var(--text); }
html[data-ui="v3"] .bn-item[aria-current="page"] .bn-pill, html[data-ui="v3"] .bn-you[open] .bn-pill { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-strong); }
html[data-ui="v3"] .bn-count { position: absolute; top: -2px; inset-inline-end: 0.35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-round); background: var(--accent); color: var(--accent-ink); font-size: var(--type-micro); font-weight: 700; line-height: 1; }
html[data-ui="v3"] .bn-you { flex: 1 1 0; min-width: 0; display: flex; }
html[data-ui="v3"] .bn-you > summary { width: 100%; }
html[data-ui="v3"] .bottom-nav .shell-panel .shell-list a { flex-direction: row; justify-content: flex-start; min-width: 0; letter-spacing: 0; text-transform: none; font-size: var(--type-small); color: var(--text); }
html[data-ui="v3"] .bottom-nav .shell-panel .shell-cta { flex-direction: row; justify-content: center; min-width: 0; letter-spacing: 0; text-transform: none; font-size: var(--type-small); color: var(--accent-ink); }
html[data-ui="v3"] .bn-you .shell-panel { position: fixed; inset-inline: var(--sp-8); top: auto; bottom: calc(var(--shell-bottom-h) + env(safe-area-inset-bottom, 0px) + var(--sp-8)); width: auto; }

/* the gallery shows the fixed layers in the flow */
html[data-ui="v3"] .bottom-nav.bottom-nav--inline { position: static; display: flex; max-width: 28rem; margin-inline: auto; }

/* sticky layers read the one number */
html[data-ui="v3"] .entity-sticky-group { top: var(--stick-top); }

@media (min-width: 30rem) {
  html[data-ui="v3"] .shell-btn-text { display: inline; }
}
@media (max-width: 47.9375rem) {
  /* the pill is display:none here: the skip link goes to the bottom bar's Search item instead (a link to a hidden field does nothing) */
  html[data-ui="v3"] .skip-link--pill { display: none; }
  html[data-ui="v3"] .skip-link--bar { display: block; }
}
@media (max-width: 29.9375rem) {
  html[data-ui="v3"] .shell-pop--locale { position: static; }
  html[data-ui="v3"] .shell-pop--locale .shell-panel { position: fixed; inset-inline: var(--sp-8); top: calc(var(--shell-h) + var(--sp-8)); width: auto; }
}
@media (min-width: 40rem) { html[data-ui="v3"] .shell-btn-sub { display: inline; } }
@media (min-width: 48rem) {
  html[data-ui="v3"] .header-search { display: flex; }
  html[data-ui="v3"] .header-actions { margin-inline-start: var(--sp-8); }
  html[data-ui="v3"] .shell-pop--you { display: block; }
  html[data-ui="v3"] .bottom-nav { display: none; }
  html[data-ui="v3"] .nav-menu-toggle { padding-inline: var(--sp-12) var(--sp-16); }
  html[data-ui="v3"] .nav-menu-labels { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (max-width: 74.9375rem) { html[data-ui="v3"] .shell-kbd { display: none; } }
/* priority+: from 64 rem the header carries four of the five areas (the labelled Menu has the rest); from 75 rem all five */
@media (min-width: 64rem) {
  html[data-ui="v3"] .primary-nav { display: flex; }
  html[data-ui="v3"] .section-row--areas { display: none; }
  html[data-ui="v3"] .secondary-nav a.sr-dup-64 { display: none; }
  html[data-ui="v3"] .header-search { max-width: 26rem; margin-inline-start: auto; }
}
@media (min-width: 75rem) {
  html[data-ui="v3"] .primary-nav a.pn-wide { display: inline-flex; }
  html[data-ui="v3"] .secondary-nav a.sr-dup-75 { display: none; }
}

@media (pointer: coarse) {
  html[data-ui="v3"] .header-search { height: var(--target-min); }
  html[data-ui="v3"] .shell-list a, html[data-ui="v3"] .lang-more a { min-height: var(--target-min); }
}

@media (forced-colors: active) {
  html[data-ui="v3"] .primary-nav a[aria-current="page"]::after { background: Highlight; box-shadow: none; }
  html[data-ui="v3"] .secondary-nav a[aria-current="page"]::before { border: 1px solid Highlight; }
  html[data-ui="v3"] :is(.bn-item[aria-current="page"], .bn-you[open]) .bn-pill { border: 1px solid Highlight; }
  html[data-ui="v3"] :is(.shell-pop, .nav-menu)[open] > summary { border-color: Highlight; }
  html[data-ui="v3"] .logo .logo-portal { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="v3"] :is(.primary-nav, .secondary-nav) a, html[data-ui="v3"] .primary-nav a::after, html[data-ui="v3"] .secondary-nav a::before, html[data-ui="v3"] :is(.shell-btn, .header-saved, .nav-menu-toggle), html[data-ui="v3"] .header-search, html[data-ui="v3"] .bn-pill, html[data-ui="v3"] .lang-fold summary::after { transition: none; }
}
/* WP-2.08: icons, glyphs, portal */
:where(html[data-ui="v3"]) :is(.ic, .mg, .mg-ev, .portal) { flex: none; }
:where(html[data-ui="v3"]) .ic-sprite { position: absolute; }
:where(html[data-ui="v3"]) [dir="rtl"] .ic-mirror { transform: scaleX(-1); }
html[data-ui="v3"] { --portal-a: var(--chroma-violet); --portal-b: var(--chroma-cyan); }
html[data-ui="v3"]:is([data-ui-area="casinos"]) { --portal-b: var(--chroma-orange); }
html[data-ui="v3"]:is([data-ui-area="bonuses"], [data-ui-area="discover"]) { --portal-a: var(--chroma-pink); --portal-b: var(--chroma-orange); }
html[data-ui="v3"]:is([data-ui-area="complaints"], [data-ui-area="content"], [data-ui-area="payments"]) { --portal-a: var(--chroma-cyan); --portal-b: var(--chroma-mint); }
html[data-ui="v3"]:is([data-ui-area="regulators"], [data-ui-area="organizations"]) { --portal-a: var(--chroma-ice); --portal-b: var(--chroma-violet); }
html[data-ui="v3"]:is([data-ui-area="news"], [data-ui-area="learn"]) { --portal-b: var(--chroma-coral); }
:where(html[data-ui="v3"]) .portal {
  --pt0: var(--portal-a);
  --pt1: color-mix(in srgb, var(--portal-b) 17%, var(--portal-a));
  --pt2: color-mix(in srgb, var(--portal-b) 33%, var(--portal-a));
  --pt3: color-mix(in srgb, var(--portal-b) 50%, var(--portal-a));
  --pt4: color-mix(in srgb, var(--portal-b) 67%, var(--portal-a));
  --pt5: color-mix(in srgb, var(--portal-b) 83%, var(--portal-a));
  --pt6: var(--portal-b);
}
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-ui="v3"]) .portal .pt-ring { transform-origin: 24px 24px; transition: transform var(--motion-micro) var(--ease-out-spectral); }
  :where(html[data-ui="v3"]) :is(a, button):is(:hover, :focus-visible) .portal .pt-ring { transform: rotate(8deg); }
}
/* Mechanic chip: bare glyph + 8 px class mark; the edge repeats the class (solid / dashed / dotted). */
:where(html[data-ui="v3"]) .mech-ic { display: inline-flex; align-items: flex-end; gap: 2px; }
:where(html[data-ui="v3"]) .mech-chip {
  display: inline-flex; align-items: center; gap: var(--sp-8); padding: 2px var(--sp-12) 2px var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-round);
  font-size: var(--type-small); color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
:where(html[data-ui="v3"]) .mech-chip[data-evidence="derived"] { border-style: dashed; }
:where(html[data-ui="v3"]) .mech-chip[data-evidence="numbers"] { border-style: dotted; }
:where(html[data-ui="v3"]) a.mech-chip:hover { background: var(--surface-2); border-color: var(--border-selected); }
:where(html[data-ui="v3"]) a.mech-chip[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (pointer: coarse) { :where(html[data-ui="v3"]) a.mech-chip { min-block-size: var(--target-min); } }
:where(html[data-ui="v3"]) .mech-legend ul { display: grid; gap: var(--sp-12); margin: var(--sp-16) 0; padding: 0; list-style: none; }
:where(html[data-ui="v3"]) .mech-legend li { display: flex; align-items: center; gap: var(--sp-12); }
/* WP-3.01: mega menu */
html[data-ui="v3"] .nav-overlay { inset: var(--shell-h) 0 0; overscroll-behavior: contain; border-top: 1px solid var(--border-strong); background: radial-gradient(60% 55% at 12% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%), radial-gradient(45% 45% at 92% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 93%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); }
html[data-ui="v3"] .nav-overlay.nav-overlay--inline { position: static; inset: auto; }
html[data-ui="v3"] .nav-overlay-inner.mega { max-width: var(--maxw); padding-block: var(--sp-24) calc(var(--shell-bottom-h) + var(--sp-32)); }
html[data-ui="v3"][data-ui-area="compare"] .nav-overlay-inner.mega { max-width: var(--maxw-wide); }
html[data-ui="v3"] .mega-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-32); align-items: start; }
html[data-ui="v3"] :where(.mega-core, .mega-browse, .mega-grid > .nav-live-rail) { grid-column: 1 / -1; min-width: 0; }
html[data-ui="v3"] .nav-eyebrow { margin-block: 0 var(--sp-8); color: var(--accent); }
html[data-ui="v3"] .nav-overlay-heading { margin: 0 0 var(--sp-16); font-size: var(--type-h3); font-weight: 600; }

/* core: five areas as a poster list */
html[data-ui="v3"] .mega-core .nav-areas-grid { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
html[data-ui="v3"] .mega-core .nav-area-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-16); row-gap: 2px; padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-20); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; box-shadow: none; transition: background var(--motion-card) var(--ease-out-spectral), border-color var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .mega-core .nav-area-card::before { content: ""; position: absolute; inset-block: var(--sp-12); inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--dna-primary, var(--accent)); opacity: 0; transition: opacity var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .mega-core .nav-area-card::after { content: "→" / ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--text-muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--motion-card) var(--ease-out-spectral), transform var(--motion-card) var(--ease-out-spectral); }
html[data-ui="v3"] .mega-core .nav-area-card:dir(rtl)::after { content: "←" / ""; transform: translateX(4px); }
html[data-ui="v3"] .mega-core .nav-area-card:is(:hover, :focus-visible, [aria-current="page"]) { background: color-mix(in srgb, var(--dna-primary, var(--accent)) 8%, transparent); border-color: color-mix(in srgb, var(--dna-primary, var(--accent)) 16%, transparent); box-shadow: none; text-decoration: none; }
html[data-ui="v3"] .mega-core .nav-area-card:is(:hover, :focus-visible, [aria-current="page"])::before { opacity: 1; }
html[data-ui="v3"] .mega-core .nav-area-card:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
html[data-ui="v3"] .mega-core .nav-area-num { grid-row: 1 / span 2; align-self: center; color: var(--text-faint); }
html[data-ui="v3"] .mega-core .nav-area-card strong { grid-column: 2; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 600; letter-spacing: var(--track-h3); line-height: 1.15; }
html[data-ui="v3"] .mega-core .nav-area-desc { grid-column: 2; color: var(--text-muted); font-size: var(--type-small); }

/* browse: the groups sit in two columns that are balanced by what they hold (nav-registry: NAV_V3_MEGA_COLUMNS), so a group is never cut in two */
html[data-ui="v3"] .mega-browse .nav-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
html[data-ui="v3"] .nav-col { display: grid; align-content: start; gap: var(--sp-12); min-width: 0; }
html[data-ui="v3"] .nav-group { margin: 0; }
html[data-ui="v3"] .nav-group-heading { margin: 0 0 var(--sp-4); opacity: 1; color: var(--text-faint); }
html[data-ui="v3"] .nav-group a { display: flex; align-items: center; min-height: 1.875rem; margin: 0; padding: 0 var(--sp-8) 0 6px; border: 0; border-inline-start: 2px solid transparent; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: var(--type-small); line-height: 1.25; overflow-wrap: anywhere; }
html[data-ui="v3"] .nav-group a:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--text); border-inline-start-color: var(--dna-primary, var(--accent)); background: var(--surface-2); }

/* the live signal rail (nav-live.ts): a stat, then a quiet list; sub-hour ages read "<1 h", never "0h" */
html[data-ui="v3"] .mega-grid > .nav-live-rail { display: grid; gap: var(--sp-16); margin: 0; padding: var(--sp-16) 0 0; border-top: 1px solid var(--border); }
html[data-ui="v3"] .nav-live-block { display: grid; gap: var(--sp-8); align-content: start; }
html[data-ui="v3"] .nav-live-rail .nav-eyebrow { display: flex; align-items: center; gap: var(--sp-8); margin: 0; color: var(--text-muted); }
html[data-ui="v3"] .nav-live-block:first-child .nav-eyebrow::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
html[data-ui="v3"] .nav-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-12); margin: 0; }
html[data-ui="v3"] .nav-stat strong { color: var(--text); font-family: var(--font-display); font-size: var(--type-stat); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .nav-stat span { color: var(--text-muted); font-size: var(--type-small); line-height: 1.3; }
html[data-ui="v3"] .nav-live-list { margin: 0; }
html[data-ui="v3"] .nav-live-list li { align-items: center; min-height: 1.75rem; padding: 0; }
html[data-ui="v3"] .nav-live-list a, html[data-ui="v3"] .nav-live-deltas a { color: var(--text); }
html[data-ui="v3"] .nav-live-deltas { margin: 0; }

@media (min-width: 40rem) { html[data-ui="v3"] .mega-browse .nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) {
  html[data-ui="v3"] .mega-core, html[data-ui="v3"] .mega-browse { grid-column: span 6; }
  html[data-ui="v3"] .nav-overlay-inner.mega { padding-bottom: var(--sp-24); }
}
@media (min-width: 64rem) {
  html[data-ui="v3"] .mega-core { grid-column: span 5; }
  html[data-ui="v3"] .mega-browse { grid-column: span 4; }
  html[data-ui="v3"] .mega-browse:last-child { grid-column: span 7; }
  html[data-ui="v3"] .mega-grid > .nav-live-rail { grid-column: span 3; position: sticky; top: 0; padding: 0 0 0 var(--sp-24); border-top: 0; border-inline-start: 1px solid var(--border); }
}
@media (pointer: coarse) {
  html[data-ui="v3"] .nav-group a { min-height: var(--target-min); }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .mega-core .nav-area-card:is(:hover, :focus-visible, [aria-current="page"]) { border-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v3"] .mega-core .nav-area-card, html[data-ui="v3"] .mega-core .nav-area-card::before, html[data-ui="v3"] .mega-core .nav-area-card::after { transition: none; }
  html[data-ui="v3"] .mega-core .nav-area-card::after { transform: none; }
}
/* WP-2.10: state kit */
html[data-ui="v3"] .banner[hidden] { display: none; }

/* One-line states: stale, restriction, offline, and the in-form notices */
html[data-ui="v3"] .banner { --tone: var(--accent); display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); font-size: var(--type-small); color: var(--text);
  background: color-mix(in oklab, var(--tone) 8%, var(--bg-card)); border: 1px solid color-mix(in oklab, var(--tone) 38%, transparent); border-inline-start: 3px solid var(--tone); border-radius: var(--radius-md); }
html[data-ui="v3"] .banner[data-error-summary]:focus { outline: 2px solid var(--tone); outline-offset: 2px; box-shadow: none; }
html[data-ui="v3"] .banner__icon { margin-top: 0.1em; color: var(--tone); }
html[data-ui="v3"] .banner__body { display: grid; gap: var(--sp-4); min-width: 0; }
html[data-ui="v3"] .banner__title { margin: 0; font-weight: var(--weight-strong); }
html[data-ui="v3"] .banner__text { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
html[data-ui="v3"] .banner__text .btn { justify-content: flex-start; min-height: var(--target-min); padding-inline: 0; font-size: var(--type-small); }
html[data-ui="v3"] .banner a:not(.btn) { color: var(--text); text-decoration: underline; }
html[data-ui="v3"] .banner__source { margin-inline-start: var(--sp-4); }
html[data-ui="v3"] :is(.banner--stale, .banner--warning) { --tone: var(--warn); }
html[data-ui="v3"] .banner--restriction { --tone: var(--accent-2); }
html[data-ui="v3"] .banner--offline { --tone: var(--info); }
html[data-ui="v3"] .banner--success { --tone: var(--good); }
html[data-ui="v3"] .banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-4); }

/* Empty, filtered-empty, source-down, restricted, market-blocked, demo-unavailable */
html[data-ui="v3"] .state-block { --tone: var(--accent); display: flex; align-items: flex-start; gap: var(--sp-20); max-width: 46rem; padding: var(--sp-24); background: var(--bg-card); border: 1px solid color-mix(in oklab, var(--tone) 30%, var(--border-strong)); border-radius: var(--radius-card); }
html[data-ui="v3"] :is(.state-block[data-state="empty"], .state-block[data-state="filtered-empty"]) { border-style: dashed; }
html[data-ui="v3"] .state-block[data-state="source-down"] { --tone: var(--warn); }
html[data-ui="v3"] :is(.state-block[data-state="restricted"], .state-block[data-state="market-blocked"]) { --tone: var(--accent-2); }
html[data-ui="v3"] .state-block[data-state="demo-unavailable"] { --tone: var(--info); }
html[data-ui="v3"] .state-block__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; color: var(--tone); background: color-mix(in oklab, var(--tone) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--tone) 45%, transparent); border-radius: var(--radius-round); }
html[data-ui="v3"] .state-block__icon .glyph { width: 1.5rem; height: 1.5rem; }
html[data-ui="v3"] .state-block__body { display: grid; gap: var(--sp-8); min-width: 0; }
html[data-ui="v3"] .state-block__kicker { margin: 0; font-family: var(--font-data); font-size: var(--type-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tone); }
html[data-ui="v3"] .state-block__title { margin: 0; font-size: var(--type-subhead); line-height: var(--leading-h3); }
html[data-ui="v3"] .state-block__why { margin: 0; max-width: 56ch; color: var(--text-muted); }
html[data-ui="v3"] .state-block__label { margin: var(--sp-8) 0 0; font-size: var(--type-micro); font-weight: var(--weight-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
html[data-ui="v3"] .state-block__filters { display: grid; gap: var(--sp-4); }
html[data-ui="v3"] .state-block__actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
html[data-ui="v3"] .state-block__ref { margin: var(--sp-8) 0 0; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .state-block .chips__row { margin-top: var(--sp-8); }

/* The whole-page error state */
html[data-ui="v3"] .state-page { display: grid; gap: var(--sp-48); padding-block: var(--sp-40) var(--sp-64); }
html[data-ui="v3"] .state-page__main { min-width: 0; max-width: 40rem; }
html[data-ui="v3"] .state-code { margin: 0 0 var(--sp-8); font-family: var(--font-display); font-size: var(--type-display-xl); font-weight: var(--weight-display); line-height: 1; letter-spacing: var(--track-display); color: var(--text); font-variant-numeric: tabular-nums; }
html[data-ui="v3"] .state-zero { display: inline-block; width: 0.6em; height: 0.8em; margin-inline: 0.03em; vertical-align: -0.02em; border-radius: var(--radius-round);
  background: conic-gradient(from 200deg, var(--chroma-pink), var(--chroma-violet), var(--chroma-cyan), var(--chroma-lime), var(--chroma-pink));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.12em), black calc(100% - 0.12em + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 0.12em), black calc(100% - 0.12em + 1px));
  filter: drop-shadow(0 0 0.18em color-mix(in srgb, var(--chroma-violet) 55%, transparent)); }
html[data-ui="v3"] .state-zero--solo { display: inline-grid; place-items: center; width: 0.9em; height: 0.9em; color: var(--accent); background: none; border: 0.08em solid var(--accent); -webkit-mask: none; mask: none; filter: none; }
html[data-ui="v3"] .state-zero--solo .glyph { width: 0.4em; height: 0.4em; }
html[data-ui="v3"] .state-page h1 { margin: 0 0 var(--sp-16); font-size: var(--type-h1-data); }
html[data-ui="v3"] .state-page__why { margin: 0; max-width: 56ch; font-size: var(--type-body-l); color: var(--text-muted); }
html[data-ui="v3"] .state-page__address { margin: 0 0 var(--sp-12); font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .state-page__path { font-family: var(--font-mono); overflow-wrap: anywhere; color: var(--text); }
html[data-ui="v3"] .state-page__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-24); }
html[data-ui="v3"] .state-page__search { margin-top: var(--sp-32); }
html[data-ui="v3"] .state-page__label { margin: 0 0 var(--sp-8); font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text); }
html[data-ui="v3"] .state-ref { margin-top: var(--sp-32); padding-top: var(--sp-16); border-top: 1px solid var(--border); }
html[data-ui="v3"] .state-ref__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin: 0; }
html[data-ui="v3"] .state-ref__label { font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .state-ref__id { padding: var(--sp-4) var(--sp-8); font-family: var(--font-mono); font-size: var(--type-small); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
html[data-ui="v3"] .state-ref__help { margin: var(--sp-4) 0 0; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .state-page__next { min-width: 0; align-self: start; padding: var(--sp-24); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--elev-card); }
html[data-ui="v3"] .state-page__h2 { margin: 0 0 var(--sp-8); font-size: var(--type-card-title); }
html[data-ui="v3"] .state-dests { margin: 0; padding: 0; list-style: none; }
html[data-ui="v3"] .state-dest a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "desc go"; align-items: center; column-gap: var(--sp-16); row-gap: var(--sp-4); min-height: var(--target-min); padding: var(--sp-12) 0; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); }
html[data-ui="v3"] .state-dest:first-child a { border-top: 0; }
html[data-ui="v3"] .state-dest a:hover .state-dest__name { color: var(--accent); }
html[data-ui="v3"] .state-dest__name { grid-area: name; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
html[data-ui="v3"] .state-dest__desc { grid-area: desc; font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .state-dest__go { grid-area: go; color: var(--text-muted); transition: transform var(--motion-micro) var(--ease-out-spectral), color var(--motion-micro) var(--ease-out-spectral); }
html[data-ui="v3"] .state-dest a:hover .state-dest__go { color: var(--accent); transform: translateX(0.25rem); }

/* Toast: the visual states (the engine that places and times them is the overlay epic's) */
html[data-ui="v3"] .toast-stack { display: flex; flex-direction: column; gap: var(--sp-8); }
html[data-ui="v3"] .toast-region { position: fixed; z-index: var(--z-critical); inset-inline: var(--sp-16); inset-block-end: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px)); max-width: 26rem; margin-inline: auto; }
html[data-ui="v3"] .toast { --tone: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon msg close" ". action ."; align-items: start; column-gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); font-size: var(--type-small); color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--tone); border-radius: var(--radius-md); box-shadow: var(--elev-overlay);
  animation: cas-rise var(--motion-overlay) var(--ease-out-spectral); }
html[data-ui="v3"] .toast__icon { grid-area: icon; margin-top: 0.1em; color: var(--tone); }
html[data-ui="v3"] .toast__msg { grid-area: msg; min-width: 0; margin: 0; overflow-wrap: anywhere; }
html[data-ui="v3"] .toast__action { grid-area: action; justify-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); margin-block: 0 calc(var(--sp-12) * -1); font-weight: var(--weight-strong); color: var(--accent); text-decoration: underline; }
html[data-ui="v3"] .toast__close { grid-area: close; max-width: none; margin-block: calc(var(--sp-12) * -1); margin-inline-end: calc(var(--sp-12) * -1); }
html[data-ui="v3"] .toast--info { --tone: var(--accent); }
html[data-ui="v3"] .toast--success { --tone: var(--good); }
html[data-ui="v3"] .toast--warning { --tone: var(--warn); }
html[data-ui="v3"] .toast--error { --tone: var(--bad); }
@keyframes cas-rise { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes cas-sheen { to { transform: translateX(100%); } }

/* Skeletons: stated geometry, ~6 % luminance, one faint sheen */
html[data-ui="v3"] .skel { position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, var(--bg-card)); border-radius: var(--radius-sm); }
html[data-ui="v3"] .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: cas-sheen 3.2s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accent-2) 10%, transparent) 45%, color-mix(in srgb, var(--accent) 12%, transparent) 55%, transparent 80%); }
html[data-ui="v3"] .skel-group { display: grid; gap: var(--sp-16); }
html[data-ui="v3"] :is(.skel-grid > :nth-child(3n + 2), .skel-table > :nth-child(3n + 2), .skel-row:nth-child(3n + 2)) .skel::after { animation-delay: 0.35s; }
html[data-ui="v3"] :is(.skel-grid > :nth-child(3n + 3), .skel-table > :nth-child(3n + 3), .skel-row:nth-child(3n + 3)) .skel::after { animation-delay: 0.7s; }
html[data-ui="v3"] .skel-th { display: block; }
html[data-ui="v3"] .skel-line { height: 0.875rem; border-radius: var(--radius-round); }
html[data-ui="v3"] .skel-line--s { width: 40%; }
html[data-ui="v3"] .skel-line--m { width: 65%; }
html[data-ui="v3"] .skel-line--l { width: 90%; }
html[data-ui="v3"] .skel-title { width: 80%; height: 2.5rem; }
html[data-ui="v3"] .skel-title--short { width: 55%; }
html[data-ui="v3"] .skel-pill { width: 5.5rem; height: 2rem; border-radius: var(--radius-round); }
html[data-ui="v3"] .skel-pill--lg { width: 8rem; height: 3rem; }
html[data-ui="v3"] .skel-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-round); }
html[data-ui="v3"] .skel-card { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-12); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
html[data-ui="v3"] .skel-card__media { width: 100%; border-radius: var(--radius-md); }
html[data-ui="v3"] .skel-card--poster .skel-card__media { aspect-ratio: 4 / 5; }
html[data-ui="v3"] .skel-card--wide .skel-card__media { aspect-ratio: 16 / 9; }
html[data-ui="v3"] .skel-card--square .skel-card__media { aspect-ratio: 1 / 1; }
html[data-ui="v3"] .skel-card__body { display: grid; gap: var(--sp-8); }
html[data-ui="v3"] .skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-16); }
html[data-ui="v3"] .skel-row { display: flex; align-items: center; gap: var(--sp-16); min-height: 4.5rem; padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--border); }
html[data-ui="v3"] .skel-row__text { display: grid; flex: 1; gap: var(--sp-8); min-width: 0; }
html[data-ui="v3"] .skel-table { overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
html[data-ui="v3"] :is(.skel-head, .skel-tr) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-16); align-items: center; padding: 0 var(--sp-16); border-bottom: 1px solid var(--border); }
html[data-ui="v3"] .skel-head { height: 2.75rem; }
html[data-ui="v3"] .skel-tr { height: 3.25rem; }
html[data-ui="v3"] .skel-td { width: 70%; height: 0.875rem; border-radius: var(--radius-round); }
html[data-ui="v3"] .skel-hero { display: grid; gap: var(--sp-16); max-width: 40rem; padding-block: var(--sp-32); }
html[data-ui="v3"] .skel-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

@media (min-width: 64rem) {
  html[data-ui="v3"] .state-page:not(.state-page--stacked) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-64); }
}
@media (max-width: 47.99rem) {
  html[data-ui="v3"] .toast-region { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 30rem) {
  html[data-ui="v3"] .state-block { flex-direction: column; gap: var(--sp-16); padding: var(--sp-16); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v3"] .skel::after { animation: none; display: none; }
  html[data-ui="v3"] .toast { animation: none; }
  html[data-ui="v3"] .state-dest__go { transition: none; }
  html[data-ui="v3"] .state-dest a:hover .state-dest__go { transform: none; }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .skel { border: 1px solid GrayText; }
  html[data-ui="v3"] .state-zero { background: none; -webkit-mask: none; mask: none; filter: none; border: 0.1em solid CanvasText; }
  html[data-ui="v3"] :is(.banner, .state-block, .toast) { border-color: CanvasText; border-width: 1px; border-inline-start-width: 4px; }
  html[data-ui="v3"] :is(.banner__icon, .toast__icon, .state-block__icon) { color: CanvasText; }
}
/* WP-2.05: complaint intake layout */
html[data-ui="v3"] .intake { padding-block: var(--sp-32) var(--sp-48); }
html[data-ui="v3"] .intake__head { max-width: 48rem; margin-bottom: var(--sp-32); }
html[data-ui="v3"] .intake__eyebrow { margin: 0 0 var(--sp-8); font-family: var(--font-data); font-size: var(--type-small); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); }
html[data-ui="v3"] .intake h1 { margin: 0 0 var(--sp-16); font-size: var(--type-h1-editorial); font-weight: var(--weight-h1); line-height: var(--leading-h1); letter-spacing: var(--track-h1); }
html[data-ui="v3"] .intake h1:focus { outline: none; box-shadow: none; }
html[data-ui="v3"] .intake__lead { max-width: 60ch; margin: 0; font-size: var(--type-body-l); color: var(--text-muted); }
html[data-ui="v3"] .intake__lead a { color: var(--text); text-decoration: underline; }
html[data-ui="v3"] .intake__grid { display: grid; gap: var(--sp-32); align-items: start; }
html[data-ui="v3"] .intake__aside { display: grid; gap: var(--sp-16); min-width: 0; }
html[data-ui="v3"] .intake-card { padding: var(--sp-20); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--elev-card); }
html[data-ui="v3"] .intake-card h2 { margin: 0 0 var(--sp-12); font-size: var(--type-card-title); }
html[data-ui="v3"] .intake-card .form { gap: var(--sp-16); }
html[data-ui="v3"] .intake-card .form .btn { justify-self: start; }
html[data-ui="v3"] .intake-steps { display: grid; gap: var(--sp-12); margin: 0; padding: 0; list-style: none; }
html[data-ui="v3"] .intake-steps li { position: relative; display: flex; align-items: flex-start; gap: var(--sp-12); font-size: var(--type-small); color: var(--text-muted); }
html[data-ui="v3"] .intake-steps li:not(:last-child)::before { content: ""; position: absolute; inset-block: 1.75rem calc(var(--sp-12) * -1 + 0.25rem); inset-inline-start: 0.75rem; width: 1px; background: var(--border-strong); }
html[data-ui="v3"] .intake-steps__no { width: 1.5rem; height: 1.5rem; font-size: var(--type-micro); }
html[data-ui="v3"] .receipt { display: flex; align-items: flex-start; gap: var(--sp-16); min-width: 0; padding: var(--sp-24); background: color-mix(in oklab, var(--good) 7%, var(--bg-card)); border: 1px solid color-mix(in oklab, var(--good) 40%, transparent); border-radius: var(--radius-card); box-shadow: var(--elev-card); }
html[data-ui="v3"] .receipt__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; color: var(--good); border: 1px solid color-mix(in oklab, var(--good) 50%, transparent); border-radius: var(--radius-round); }
html[data-ui="v3"] .receipt__body { display: grid; gap: var(--sp-12); flex: 1; min-width: 0; }
html[data-ui="v3"] .receipt__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-12); row-gap: var(--sp-4); margin: 0; }
html[data-ui="v3"] .receipt__id { padding: var(--sp-8) var(--sp-16); font-family: var(--font-mono); font-size: var(--type-subhead); font-weight: var(--weight-strong); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
html[data-ui="v3"] .receipt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); margin: var(--sp-4) 0 0; }
@media (min-width: 64rem) {
  html[data-ui="v3"] .intake__grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-48); }
  html[data-ui="v3"] .intake__aside { position: sticky; top: var(--sp-80); }
}
@media (max-width: 30rem) {
  html[data-ui="v3"] .receipt { flex-direction: column; padding: var(--sp-16); }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .intake-steps li:not(:last-child)::before { background: CanvasText; }
  html[data-ui="v3"] :is(.receipt, .intake-card) { border-color: CanvasText; }
  html[data-ui="v3"] .receipt__icon { color: CanvasText; border-color: CanvasText; }
}
/* WP-2.04: containers, breadcrumbs, targets, scroll padding. Heights of the fixed layers are tokens, read by everything that sticks or offsets */
html[data-ui="v3"] { --shell-h: 3.5rem; --shell-bottom-h: 4rem; --stick-top: var(--shell-h); }
html[data-ui="v3"] { scroll-padding-top: calc(var(--stick-top) + var(--sp-16)); scroll-padding-bottom: calc(var(--shell-bottom-h) + var(--sp-16)); }
html[data-ui="v3"]:has(.entity-sticky-group) { scroll-padding-top: calc(var(--stick-top) + var(--sp-64)); }
html[data-ui="v3"]:has(.compare-tray) { scroll-padding-bottom: calc(var(--shell-bottom-h) + 6rem); }
/* a wide page widens header, row, crumb, content and footer together and keeps a gutter: at 1440 px a 16 px one put the logo 112 px left of its peers */
html[data-ui="v3"][data-ui-area="compare"] { --gutter: clamp(var(--space-3), 5vw, var(--sp-48)); }
html[data-ui="v3"][data-ui-area="compare"] :is(.site-header, .secondary-nav, .site-footer, main) > .wrap { max-width: var(--maxw-wide); padding-inline: var(--gutter); }
html[data-ui="v3"][data-ui-area="compare"] .secondary-nav > .wrap { padding-inline-start: calc(var(--gutter) - var(--sp-12)); }

/* breadcrumb: inside .wrap, 13 px muted, chevrons, the middle collapses on a phone */
html[data-ui="v3"] .crumbs--v3 { margin: 0; padding: var(--sp-12) 0; color: var(--text-muted); font-size: var(--type-micro); }
html[data-ui="v3"] .crumbs--v3 ol { flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
html[data-ui="v3"] .crumbs--v3 li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
/* the chevron LEADS its item: a wrapped trail never leaves one hanging at the end of the line above (the default trailing slash is off) */
html[data-ui="v3"] .crumbs--v3 li::after { content: none; }
html[data-ui="v3"] .crumbs--v3 li:not(:first-child)::before { content: "›" / ""; flex: none; margin-inline-end: var(--sp-8); color: var(--text-faint); }
html[data-ui="v3"] .crumbs--v3 li:not(:first-child):dir(rtl)::before { content: "‹" / ""; }
html[data-ui="v3"] .crumbs--v3 a { color: var(--text-muted); }
html[data-ui="v3"] .crumbs--v3 a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
html[data-ui="v3"] .crumbs--v3 [aria-current="page"] { color: var(--text); }
html[data-ui="v3"][data-ui-page="entity"] .crumbs--v3 { padding-bottom: var(--sp-20); }
html[data-ui="v3"] .crumbs--v3 .crumb-gap { display: none; }

@media (max-width: 47.9375rem) {
  html[data-ui="v3"] body { padding-bottom: calc(var(--shell-bottom-h) + env(safe-area-inset-bottom, 0px)); }
  html[data-ui="v3"] .compare-tray { bottom: calc(var(--shell-bottom-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 39.9375rem) {
  html[data-ui="v3"] .crumbs--v3 .crumb-gap { display: inline-flex; }
  html[data-ui="v3"] .crumbs--v3 li:not(:first-child, .crumb-gap, :nth-last-child(-n + 2)) { display: none; }
}

/* A short viewport (a window 400 % zoomed, 320 x 256): the fixed layers must not eat the page. The section row scrolls away
   with the page; the bottom bar joins the flow at the end of it; scroll padding follows what is still fixed. */
@media (max-height: 36rem) {
  html[data-ui="v3"] .secondary-nav { position: static; }
  html[data-ui="v3"]:has(.secondary-nav:not(.section-row--areas)) { --stick-top: var(--shell-h); }
}
@media (max-height: 26rem) and (max-width: 47.9375rem) {
  html[data-ui="v3"] .bottom-nav { position: static; }
  html[data-ui="v3"] body { padding-bottom: 0; }
  html[data-ui="v3"] .compare-tray { bottom: 0; }
  html[data-ui="v3"], html[data-ui="v3"]:has(.compare-tray) { scroll-padding-bottom: var(--sp-16); }
}
@media print { html[data-ui="v3"] :is(.bottom-nav, .secondary-nav) { display: none; } }

@media (pointer: coarse) {
  html[data-ui="v3"] :is(a.chip, button.chip, .pagination a, .pagination span, .filter-chip, .quick-nav a) { display: inline-flex; align-items: center; min-height: var(--target-min); }
  html[data-ui="v3"] .crumbs--v3 li { min-height: var(--target-min); }
}
/* WP-2.05: footer controls on the kit */
html[data-ui="v3"] .lang-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); margin: 0; }
html[data-ui="v3"] .lang-switcher label { font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text-muted); }
html[data-ui="v3"] .lang-switcher :is(select, option, label, button) { font-family: var(--font-system); }
html[data-ui="v3"] .lang-switcher select { appearance: none; min-height: 2.75rem; max-width: 100%; padding: 0 2.5rem 0 var(--sp-16); font-size: var(--type-small); color: var(--text); cursor: pointer;
  background-color: var(--bg); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat; border: 1px solid var(--border-control); border-radius: var(--radius-sm); }
html[data-ui="v3"] .lang-switcher button { min-height: 2.75rem; padding: 0 var(--sp-16); font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text); cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
html[data-ui="v3"] :is(.lang-switcher select:hover, .lang-switcher button:hover) { border-color: var(--accent); }
html[data-ui="v3"] .lang-switcher button:hover { background: var(--surface-3); }
html[data-ui="v3"] .lang-switcher :is(select, button):focus-visible { outline: 2px solid var(--bg); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus), var(--aura); }
html[data-ui="v3"] .market-chip { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 2.75rem; padding: 0; font-size: var(--type-small); background: none; border: 0; border-radius: 0; cursor: default; }
html[data-ui="v3"] .market-chip__label { color: var(--text-muted); }
html[data-ui="v3"] .market-chip__code { font-family: var(--font-data); font-weight: var(--weight-strong); color: var(--text); }
html[data-ui="v3"] .market-chip__guess { color: var(--text-muted); }
html[data-ui="v3"] .market-chip__guess::before { content: "("; }
html[data-ui="v3"] .market-chip__guess::after { content: ")"; }
html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0; padding: var(--sp-4); background: var(--glass), var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg)::before { content: attr(aria-label); content: attr(aria-label) / ""; padding-inline: var(--sp-12) var(--sp-8); font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text-muted); }
html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) .chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--sp-16); font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text-muted); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; }
html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) .chip:hover { color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) .chip[aria-current] { color: var(--text); background: var(--rim-spectrum) left bottom / 100% 2px no-repeat, var(--surface-3); border-color: var(--border-selected); }
@media (pointer: coarse) {
  html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) .chip { min-height: var(--target-min); }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .lang-switcher select { forced-color-adjust: none; color: CanvasText; background-color: Canvas;
    background-image: linear-gradient(45deg, transparent 50%, CanvasText 50%), linear-gradient(135deg, CanvasText 50%, transparent 50%); }
  html[data-ui="v3"] :is(.lang-switcher select, .lang-switcher button, .site-footer nav.chip-row:not(.shell-seg)) { border-color: ButtonBorder; }
  html[data-ui="v3"] .site-footer nav.chip-row:not(.shell-seg) .chip[aria-current] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
}
/* WP-3.16: footer */
html[data-ui="v3"] .site-footer { position: relative; margin-top: var(--sp-32); padding: var(--sp-96) 0 var(--sp-48); border-top: 0; background: radial-gradient(50% 5rem at 50% 5rem, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent), linear-gradient(to bottom, transparent 0, var(--bg-raised) 14rem); color: var(--text-muted); font-size: var(--type-small); }
html[data-ui="v3"] .site-footer > .wrap { display: block; }
html[data-ui="v3"] .site-footer::before { content: ""; position: absolute; inset-inline: 0; top: calc(var(--sp-96) - var(--sp-16)); height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 38%, transparent) 28%, color-mix(in srgb, var(--accent-2) 38%, transparent) 72%, transparent); pointer-events: none; }
html[data-ui="v3"] .site-footer a { color: var(--text-muted); }
html[data-ui="v3"] .site-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

html[data-ui="v3"] .rg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); padding: var(--sp-16) var(--sp-20); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-card) 78%, transparent); box-shadow: var(--elev-card); }
html[data-ui="v3"] .rg-strip .trust-18 { width: 2.25rem; height: 2.25rem; border-width: 1.5px; border-color: var(--text-muted); color: var(--text); font-size: var(--type-small); }
html[data-ui="v3"] .rg-strip p { flex: 1 1 18rem; margin: 0; color: var(--text-muted); }
html[data-ui="v3"] .rg-strip strong { color: var(--text); font-weight: var(--weight-strong); }
html[data-ui="v3"] .rg-strip a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--sp-16); border: 1px solid var(--border-control); border-radius: var(--radius-round); color: var(--text); font-weight: 560; text-decoration: none; }
html[data-ui="v3"] .rg-strip a:hover { background: var(--surface-2); text-decoration: none; }

html[data-ui="v3"] .footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); margin-top: var(--sp-48); }
html[data-ui="v3"] .footer-brand p { max-width: 34rem; margin: var(--sp-12) 0 0; }
html[data-ui="v3"] .footer-brand .footer-fine { color: var(--text-faint); font-size: var(--type-micro); }
html[data-ui="v3"] .logo--footer { font-size: var(--type-h4); }
html[data-ui="v3"] .footer-prefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; gap: var(--sp-16) var(--sp-24); padding: var(--sp-20); border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
html[data-ui="v3"] .footer-prefs :is(.footer-col-heading, .lang-pick, .market-chip) { grid-column: 1 / -1; margin: 0; }
html[data-ui="v3"] .footer-prefs .market-chip { justify-self: start; border-color: var(--border-control); color: var(--text); }
html[data-ui="v3"] .footer-prefs .lang-pick .shell-seg { display: inline-flex; justify-self: start; }
html[data-ui="v3"] .shell-pref { display: grid; gap: var(--sp-4); }
html[data-ui="v3"] .shell-pref-label { margin: 0; color: var(--text-muted); font-size: var(--type-micro); }
html[data-ui="v3"] .shell-seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border-control); border-radius: var(--radius-round); background: var(--bg-soft); }
html[data-ui="v3"] .shell-seg .chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--sp-12); border: 0; border-radius: var(--radius-round); background: transparent; color: var(--text-muted); font-weight: 560; white-space: nowrap; }
html[data-ui="v3"] .shell-seg .chip:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
html[data-ui="v3"] .shell-seg .chip:is([aria-current="true"], [aria-current="page"]) { background: var(--accent); color: var(--accent-ink); }

html[data-ui="v3"] .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-24); margin-top: var(--sp-48); padding-top: var(--sp-32); border-top: 1px solid var(--border); }
html[data-ui="v3"] .footer-col-heading { color: var(--text-faint); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); }
html[data-ui="v3"] .footer-cols nav { gap: 2px; align-items: stretch; }
html[data-ui="v3"] .footer-cols nav a { display: inline-flex; align-items: center; min-height: 2rem; overflow-wrap: anywhere; }
html[data-ui="v3"] .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-48); padding-top: var(--sp-16); border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--type-micro); }
html[data-ui="v3"] .footer-base a { color: var(--text-muted); }

@media (min-width: 40rem) { html[data-ui="v3"] .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  html[data-ui="v3"] .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html[data-ui="v3"] .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  html[data-ui="v3"] .footer-cols nav a, html[data-ui="v3"] .footer-base a { min-height: var(--target-min); }
  html[data-ui="v3"] .shell-seg .chip { min-height: var(--target-min); }
}
@media (forced-colors: active) {
  html[data-ui="v3"] .shell-seg .chip:is([aria-current="true"], [aria-current="page"]) { border: 1px solid Highlight; }
}
html[data-ui="v3"]{.lv{display: inline-flex;align-items: center;min-block-size: 1.5rem;min-inline-size: 1.5rem;color: inherit;text-decoration: none;border-radius: var(--radius-xs);transition: color var(--motion-micro) var(--ease-out-spectral), background-color var(--motion-micro) var(--ease-out-spectral);}.lv:is(:hover, :focus-visible){color: var(--accent-strong);background: color-mix(in srgb, var(--accent) 12%, transparent);text-decoration: underline dotted;text-decoration-thickness: 1px;text-underline-offset: 0.24em;}.lv--chip{display: inline-flex;align-items: center;min-block-size: 1.75rem;padding-block: 0;padding-inline: var(--sp-8);font-size: var(--type-small);text-decoration: none;background: var(--surface-2);border: 1px solid var(--border-strong);border-radius: var(--radius-round);}.lv--chip:hover{border-color: var(--accent);}.lv--k-category:not(.badge, .lv--chip){display: inline-flex;align-items: center;padding-inline: var(--sp-8);background: color-mix(in srgb, var(--text) 7%, transparent);border-radius: var(--radius-sm);}.lv--k-category:not(.badge, .lv--chip):is(:hover, :focus-visible){background: color-mix(in srgb, var(--accent) 16%, transparent);}.lv--k-number{font-variant-numeric: tabular-nums;}.lv--k-ordinal[data-lv-step]::before{content: "";display: inline-block;inline-size: 1.25rem;block-size: 0.375rem;margin-inline-end: var(--sp-8);border-radius: 1px;background: linear-gradient(90deg, var(--accent) calc(var(--lv-step) * 16.667%), color-mix(in srgb, currentColor 22%, transparent) 0);-webkit-mask-image: repeating-linear-gradient(90deg, CanvasText 0 3px, transparent 3px 4px);mask-image: repeating-linear-gradient(90deg, CanvasText 0 3px, transparent 3px 4px);}.lv--k-ordinal[data-lv-step]:not(.lv--chip){display: inline-flex;align-items: center;white-space: nowrap;padding-inline: var(--sp-8);background: color-mix(in srgb, var(--text) 7%, transparent);border-radius: var(--radius-sm);}.lv[data-lv-step="1"]{--lv-step: 1;}.lv[data-lv-step="2"]{--lv-step: 2;}.lv[data-lv-step="3"]{--lv-step: 3;}.lv[data-lv-step="4"]{--lv-step: 4;}.lv[data-lv-step="5"]{--lv-step: 5;}.lv[data-lv-step="6"]{--lv-step: 6;}.card :is(.meta, .foot) .meta-link{display: inline-flex;align-items: center;justify-content: center;min-block-size: 1.5rem;min-inline-size: 1.5rem;}.lv-none{color: var(--text-faint);}.dt-dl .lv-none > [aria-hidden="true"]{display: none;}.dt-dl .lv-none > .visually-hidden{position: static;inline-size: auto;block-size: auto;margin: 0;overflow: visible;clip: auto;white-space: normal;}.lv-peer{display: grid;gap: var(--sp-16);min-inline-size: 0;}.ov-panel-content.lv-peer{gap: var(--sp-20);}.lv-lede{margin: 0;font-size: var(--type-body-l);line-height: var(--leading-body);overflow-wrap: anywhere;}.lv-sec{display: grid;gap: var(--sp-8);min-inline-size: 0;}.lv-peer .lv-sec > :is(h2, h3){margin: 0;font-size: var(--type-micro);font-weight: var(--weight-strong);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}.lv-bars{display: grid;gap: var(--sp-4);margin: 0;padding: 0;list-style: none;}.lv-bar{display: grid;grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 6rem) auto;align-items: center;column-gap: var(--sp-12);padding-inline: var(--sp-8);border-radius: var(--radius-sm);}.lv-bar[data-current="true"]{background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));box-shadow: inset 2px 0 0 var(--accent);}.lv-bname{display: flex;align-items: center;min-block-size: var(--target-min);color: var(--text);text-decoration: none;overflow-wrap: anywhere;}.lv-bname:hover{color: var(--accent-strong);text-decoration: underline;}.lv-bar[data-current="true"] .lv-bname{font-weight: var(--weight-strong);}.lv-meter{display: block;inline-size: 100%;block-size: 0.5rem;}.lv-meter-track{fill: color-mix(in srgb, var(--accent) 14%, var(--bg-card));}.lv-meter-fill{fill: color-mix(in srgb, var(--accent) 55%, var(--bg-card));}.lv-meter-cur{fill: var(--accent);}.lv-count{min-inline-size: 3.25rem;font-family: var(--font-data);font-variant-numeric: tabular-nums;text-align: end;color: var(--text);}.lv-n{margin-inline-start: var(--sp-4);font-size: var(--type-micro);color: var(--text-muted);}.lv-kv dd{font-variant-numeric: tabular-nums;}.lv-pos{margin: 0;font-family: var(--font-data);font-variant-numeric: tabular-nums;color: var(--text-muted);}.lv-table{inline-size: 100%;border-collapse: collapse;font-size: var(--type-small);font-variant-numeric: tabular-nums;}.lv-table :is(th, td){padding-block: var(--sp-8);padding-inline: var(--sp-8);text-align: start;letter-spacing: normal;text-transform: none;border-block-end: 1px solid var(--border);vertical-align: top;}.lv-table thead th{font-weight: var(--weight-strong);color: var(--text);}.lv-table tbody th{font-weight: var(--weight-body);color: var(--text-muted);}.lv-links{display: flex;flex-wrap: wrap;gap: var(--sp-8);margin: 0;padding: 0;list-style: none;}.dt{--dt-sel-w: 0px;display: grid;gap: var(--sp-12);min-inline-size: 0;}.dt--sel{--dt-sel-w: 2.75rem;}.dt--sel-js[data-dt-js]{--dt-sel-w: 2.75rem;}.dt:not([data-dt-js]) .dt-js, .dt[data-dt-js] .dt-nojs{display: none;}.dt-toolbar{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--sp-12);}.dt-filter{display: flex;flex: 1 1 16rem;align-items: center;gap: var(--sp-8);max-inline-size: 30rem;}.dt-q{flex: 1 1 auto;min-inline-size: 0;}.dt-tools{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-8);}.dt :is(.btn, .dt-cols-sum, .dt-dbtn){min-block-size: var(--target-min);}.dt .btn{min-height: var(--target-min);padding-block: 0;padding-inline: var(--sp-16);font-size: var(--type-small);}.dt-cols{position: relative;}.dt-cols-sum{display: inline-flex;align-items: center;padding-inline: var(--sp-16);font-size: var(--type-small);font-weight: var(--weight-strong);color: var(--text);list-style: none;cursor: pointer;background: var(--surface-2);border: 1px solid var(--border-control);border-radius: var(--radius-sm);}.dt-cols-sum::-webkit-details-marker{display: none;}.dt-cols-sum:hover{border-color: var(--accent);}.dt-cols[open] > .dt-cols-form{position: absolute;inset-inline-start: 0;inset-block-start: calc(100% + var(--sp-4));z-index: var(--z-popover);inline-size: max-content;max-inline-size: min(20rem, 86vw);padding: var(--sp-12);background: var(--bg-raised);border: 1px solid var(--border-strong);border-radius: var(--radius-md);box-shadow: var(--elev-panel);}.dt-cols-form fieldset{margin: 0;padding: 0;border: 0;min-inline-size: 0;}.dt-cols-form legend{padding: 0;margin-block-end: var(--sp-8);font-size: var(--type-micro);font-weight: var(--weight-strong);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}.dt-cols-list{display: grid;gap: var(--sp-4);margin: 0;padding: 0;list-style: none;}.dt-cols-list li{display: flex;align-items: center;justify-content: space-between;gap: var(--sp-12);}.dt-check{display: inline-flex;align-items: center;gap: var(--sp-8);min-block-size: var(--target-min);font-size: var(--type-small);cursor: pointer;}.dt-check input{inline-size: 1.25rem;block-size: 1.25rem;accent-color: var(--accent);}.dt-note-s{font-size: var(--type-micro);color: var(--text-muted);}.dt-cols-actions{display: flex;flex-wrap: wrap;gap: var(--sp-8);margin: var(--sp-12) 0 0;}.dt-density{display: inline-flex;border: 1px solid var(--border-control);border-radius: var(--radius-sm);overflow: hidden;}.dt-dbtn{padding-block: 0;padding-inline: var(--sp-12);font: inherit;font-size: var(--type-small);color: var(--text-muted);background: transparent;border: 0;cursor: pointer;}.dt-dbtn[aria-pressed="true"]{color: var(--text);background: var(--surface-3);box-shadow: inset 0 -2px 0 var(--accent);}.dt-dbtn:hover{color: var(--text);}.dt-selbar{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-12);padding-block: var(--sp-8);padding-inline: var(--sp-12);background: var(--surface-2);border: 1px solid var(--border-strong);border-radius: var(--radius-md);}.dt[data-dt-js] .dt-selbar[data-has-selection="false"]{display: none;}.dt-selcount{flex: 1 1 12rem;margin: 0;font-size: var(--type-small);color: var(--text-muted);}.dt-selform{margin: 0;}.dt-selbar .btn:disabled{opacity: 0.6;cursor: not-allowed;}.dt-scroll{position: relative;overflow: auto;max-block-size: min(78vh, 64rem);overscroll-behavior-x: contain;background: var(--bg-card);border: 1px solid var(--border-strong);border-radius: var(--radius-card);box-shadow: var(--elev-card);}.dt-table{inline-size: 100%;min-inline-size: 38rem;border-collapse: separate;border-spacing: 0;font-size: var(--type-small);}.dt-th{position: sticky;inset-block-start: 0;z-index: var(--z-content);padding-block: 0;padding-inline: var(--sp-8);text-align: start;white-space: nowrap;font-size: var(--type-micro);font-weight: var(--weight-strong);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);background: var(--surface-2);border-block-end: 1px solid var(--border-strong);}.dt-th[aria-sort="ascending"], .dt-th[aria-sort="descending"]{color: var(--text);box-shadow: inset 0 -2px 0 var(--accent);}.dt-sort{display: inline-flex;align-items: center;gap: var(--sp-4);min-block-size: var(--target-min);color: inherit;text-decoration: none;}.dt-sort:hover{color: var(--accent-strong);}.dt-sort--on{color: var(--accent-strong);}.dt-arrow{flex: none;inline-size: 0.875rem;block-size: 0.875rem;}.dt-arrow--idle{display: inline-block;text-align: center;line-height: 1;}.dt-arrow--idle::before{content: "\2195";font-size: var(--type-micro);color: var(--text-faint);opacity: 0.55;}.dt-sort:hover .dt-arrow--idle::before{opacity: 1;color: var(--accent-strong);}.dt-th-in{display: inline-flex;align-items: center;gap: 0;}.dt-th.dt-num .dt-th-in{justify-content: flex-end;inline-size: 100%;}.dt-colinfo{display: inline-flex;align-items: center;justify-content: center;flex: none;inline-size: 1.5rem;block-size: 1.5rem;padding: 0;color: var(--text-faint);background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);cursor: pointer;opacity: 0;}.dt-th:is(:hover, :focus-within) .dt-colinfo, .dt-colinfo:focus-visible{opacity: 0.7;}.dt-colinfo:is(:hover, :focus-visible){color: var(--accent-strong);opacity: 1;border-color: var(--border-strong);background: var(--surface-3);}.dt-skip{position: absolute;inline-size: 1px;block-size: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;}.dt-skip:focus{position: static;inline-size: auto;block-size: auto;margin: 0;overflow: visible;clip-path: none;display: inline-block;padding-block: var(--sp-8);padding-inline: var(--sp-16);color: var(--accent-ink);background: var(--accent);border-radius: var(--radius-round);}.dt-toolbar--small{justify-content: flex-end;}.dt-td{padding-block: var(--sp-8);padding-inline: var(--sp-8);letter-spacing: normal;vertical-align: middle;border-block-end: 1px solid var(--border);background: var(--bg-card);overflow-wrap: break-word;}.dt-td[data-facet]{cursor: pointer;}.dt[data-dt-density="compact"] .dt-td{padding-block: 0;}.dt[data-dt-density="compact"] .dt-open{block-size: 1.5rem;inline-size: 1.5rem;}.dt-row:last-child > .dt-td{border-block-end: 0;}.dt-row:hover > .dt-td{background: var(--surface-2);cursor: default;}.dt-row[data-selected="true"] > .dt-td{background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));}.dt-row[data-selected="true"] > .dt-c-sel{box-shadow: inset 3px 0 0 var(--accent);}.dt-num{text-align: end;font-family: var(--font-data);font-variant-numeric: tabular-nums;white-space: nowrap;}.dt-th.dt-num{font-family: var(--font-ui);}.dt-c-sel{position: sticky;inset-inline-start: 0;z-index: var(--z-content);inline-size: 2.75rem;min-inline-size: 2.75rem;padding-inline: var(--sp-8);text-align: center;}.dt-th.dt-c-sel{z-index: var(--z-sticky);background: var(--surface-2);}.dt-th-name, .dt-td-name{position: sticky;inset-inline-start: var(--dt-sel-w);z-index: var(--z-content);min-inline-size: 9rem;text-align: start;font-weight: var(--weight-strong);border-inline-end: 1px solid var(--border);}.dt-th-name{z-index: var(--z-sticky);}.dt-td-name a{color: var(--text);text-decoration: none;}.dt-td-name a:hover{color: var(--accent-strong);text-decoration: underline;}.dt-pick, .dt-all{appearance: none;-webkit-appearance: none;position: relative;display: inline-block;inline-size: 1.5rem;block-size: 1.5rem;margin: 0;padding: 0;vertical-align: middle;background: transparent;border: 0;cursor: pointer;}.dt-pick::before, .dt-all::before{content: "";position: absolute;inset: 0.1875rem;box-sizing: border-box;border: 1.5px solid var(--border-control);border-radius: var(--radius-xs);background: transparent;transition: background-color var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral);}.dt-pick:hover::before, .dt-all:hover::before{border-color: var(--accent);}.dt-pick:is(:checked, :indeterminate)::before, .dt-all:is(:checked, :indeterminate)::before{background: var(--accent);border-color: var(--accent);}.dt-pick:checked::after, .dt-all:checked::after{content: "";position: absolute;inset: 0.4375rem;background: var(--accent-ink);clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);}.dt-all:indeterminate::after{content: "";position: absolute;inset-block-start: 0.6875rem;inset-inline: 0.4375rem;block-size: 2px;background: var(--accent-ink);}.dt-c-act{inline-size: 1%;white-space: nowrap;text-align: end;}.dt-open{display: inline-flex;align-items: center;justify-content: center;inline-size: 2rem;block-size: 2rem;padding: 0;font: inherit;color: var(--text-muted);background: transparent;border: 1px solid transparent;border-radius: var(--radius-round);cursor: pointer;opacity: 0.4;transition: opacity var(--motion-micro) var(--ease-out-spectral);}.dt-row:is(:hover, :focus-within) .dt-open, .dt-open:focus-visible{opacity: 1;}.dt-open:hover{color: var(--text);border-color: var(--border-strong);background: var(--surface-3);}.dt-cmp{display: inline-flex;align-items: center;min-block-size: var(--target-min);padding-inline: var(--sp-8);font-size: var(--type-small);color: var(--text-muted);text-decoration: underline;}.dt-tick{display: block;margin-block-start: var(--sp-4);margin-inline-start: auto;inline-size: 3.75rem;block-size: 0.625rem;}.dt-tick-rail, .dt-strip .dt-tick-rail{fill: none;stroke: var(--border-strong);stroke-width: 1;}.dt-tick-dot{fill: var(--accent);stroke: var(--bg-card);stroke-width: 1;}&[dir="rtl"] .dt-tick, [dir="rtl"] .dt-tick{transform: scaleX(-1);}.dt-status{margin: 0;font-size: var(--type-small);color: var(--text-muted);}.dt-note{margin: 0;font-size: var(--type-micro);color: var(--text-muted);}.dt-ev{font-size: var(--type-small);color: var(--accent-strong);white-space: nowrap;}.dt-dl{margin-block: var(--sp-12) var(--sp-16);}.dt-dl dd{overflow-wrap: anywhere;}.dt--empty{display: block;}.lv-card{position: fixed;inset: auto;margin: 0;z-index: var(--z-popover);box-sizing: border-box;inline-size: max-content;max-inline-size: min(19rem, 86vw);padding-block: var(--sp-12);padding-inline: var(--sp-16);overflow: visible;color: var(--text);background: color-mix(in srgb, var(--surface-3) 96%, transparent);border: 1px solid var(--border-strong);border-radius: var(--radius-md);box-shadow: var(--elev-panel);font-size: var(--type-small);line-height: 1.45;text-align: start;}.lv-brief{display: grid;gap: var(--sp-8);}.lv-brief > p{margin: 0;}.lv-brief-k{font-size: var(--type-micro);font-weight: var(--weight-strong);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}.lv-brief-at{color: var(--text-muted);}.lv-brief-h{font-size: var(--type-micro);color: var(--text-faint);}.lv-brief .lv-meter{block-size: 0.375rem;}.dt-strip{display: block;inline-size: 100%;max-inline-size: 22rem;block-size: auto;}.dt-strip-dots{fill: none;stroke: color-mix(in srgb, var(--accent) 55%, transparent);stroke-width: 1.5;stroke-linecap: round;}.dt-context{display: grid;gap: var(--sp-12);margin-block: var(--sp-16);padding-block-start: var(--sp-12);border-block-start: 1px solid var(--border);}.dt-context > .ov-note{margin: 0;}.dt-dtbtn{min-block-size: 1.5rem;padding: 0;font: inherit;color: inherit;text-align: start;background: none;border: 0;cursor: pointer;}.dt-dtbtn:is(:hover, :focus-visible){color: var(--accent-strong);text-decoration: underline dotted;text-underline-offset: 0.24em;}.dt-detail > .ov-note:first-child{margin-block-end: var(--sp-8);}.dt-detail > .ov-actions{margin-block-start: var(--sp-16);}.dt-list{display: grid;gap: var(--sp-4);margin: 0;padding: 0;list-style: none;}.dt-list a{display: inline-flex;align-items: center;min-block-size: 1.5rem;}.dt-sortbar{display: none;}}@media (max-width: 47.99rem){html[data-ui="v3"]{.dt-sortbar{display: block;overflow-x: auto;}.dt-sortbar ul{display: flex;gap: var(--sp-8);margin: 0;padding: 0;list-style: none;}.dt-chip{display: inline-flex;align-items: center;min-block-size: var(--target-min);padding-inline: var(--sp-12);font-size: var(--type-small);color: var(--text);white-space: nowrap;text-decoration: none;background: var(--surface-2);border: 1px solid var(--border-strong);border-radius: var(--radius-round);}.dt-chip[aria-current="true"]{color: var(--accent-strong);border-color: var(--accent);}.dt-scroll{overflow: visible;max-block-size: none;background: transparent;border: 0;box-shadow: none;}.dt-table{min-inline-size: 0;}:is(.dt-table, .dt-row, .dt-td){display: block;}.dt-table :is(thead, tbody){display: block;}.dt-table thead{position: absolute;inline-size: 1px;block-size: 1px;overflow: hidden;clip-path: inset(50%);}.dt-row{position: relative;margin-block-end: var(--sp-12);padding: var(--sp-12);background: var(--bg-card);border: 1px solid var(--border-strong);border-radius: var(--radius-card);box-shadow: var(--elev-card);scroll-margin-top: calc(var(--stick-top, 0px) + var(--sp-16));}.dt-row[data-selected="true"]{border-color: var(--accent);}.dt-td, .dt-row:hover > .dt-td, .dt-row[data-selected="true"] > .dt-td{display: flex;align-items: baseline;justify-content: space-between;gap: var(--sp-16);padding-block: var(--sp-4);padding-inline: 0;background: transparent;border: 0;box-shadow: none;text-align: end;}.dt-td::before{content: attr(data-label);flex: 0 0 40%;font-size: var(--type-small);color: var(--text-muted);text-align: start;}.dt-td{overflow-wrap: anywhere;}.dt-td-name{position: static;padding-inline-end: var(--sp-48);font-size: var(--type-subhead);line-height: var(--leading-h3);text-align: start;border-inline-end: 0;}.dt-td-name::before, .dt-c-sel::before, .dt-c-act::before{content: none;}.dt-c-sel{position: absolute;inset-block-start: var(--sp-8);inset-inline: auto var(--sp-8);inline-size: auto;min-inline-size: 0;min-block-size: var(--target-min);align-items: center;justify-content: center;}.dt-row > .dt-c-act, .dt-row:hover > .dt-c-act, .dt-row[data-selected="true"] > .dt-c-act{justify-content: flex-end;padding-block-start: var(--sp-8);inline-size: auto;}.dt-td .lv{display: inline-flex;align-items: center;min-inline-size: 1.5rem;min-block-size: 1.5rem;}.dt-td .lv-none > [aria-hidden="true"]{display: none;}.dt-td .lv-none > .visually-hidden{position: static;inline-size: auto;block-size: auto;margin: 0;overflow: visible;clip: auto;white-space: normal;}.dt-num{font-family: var(--font-data);}.dt-tick{margin-inline-start: var(--sp-8);}.dt-open{opacity: 1;}.dt-cols[open] > .dt-cols-form{position: static;inline-size: auto;max-inline-size: none;margin-block-start: var(--sp-8);box-shadow: none;}}}html[data-ui="v3"]{.dt .dt-row > :is(td, th)[hidden], .dt thead th[hidden]{display: none;}.lv-card[hidden]{display: none;}.lv-card--inline{position: static;}}@media (pointer: coarse){html[data-ui="v3"]{.dt[data-dt-density] .dt-open{block-size: var(--target-min);inline-size: var(--target-min);opacity: 1;}.dt-colinfo{inline-size: var(--target-min);block-size: var(--target-min);opacity: 0.7;}.dt[data-dt-density="compact"] .dt-td{padding-block: var(--sp-12);}}}@media (prefers-reduced-motion: reduce){html[data-ui="v3"]{.lv, .dt-open, .dt-pick::before, .dt-all::before{transition: none;}}}@media (forced-colors: active){html[data-ui="v3"]{.lv--chip, .dt-scroll, .dt-selbar, .dt-cols-sum, .dt-density, .dt-row, .dt-chip{border-color: CanvasText;}.dt-th[aria-sort="ascending"], .dt-th[aria-sort="descending"], .dt-dbtn[aria-pressed="true"], .lv-bar[data-current="true"]{box-shadow: none;outline: 2px solid Highlight;outline-offset: -2px;}.dt-row[data-selected="true"] > .dt-td{outline: 1px solid Highlight;outline-offset: -1px;}.dt-tick-rail{stroke: CanvasText;}.dt-tick-dot{fill: Highlight;stroke: Canvas;}.dt-strip-dots{stroke: CanvasText;}.lv-meter-track{fill: Canvas;stroke: CanvasText;}.lv-meter-fill, .lv-meter-cur{fill: Highlight;}.lv-card{border-color: CanvasText;background: Canvas;color: CanvasText;}.lv--k-category:not(.badge, .lv--chip), .lv--k-ordinal[data-lv-step]:not(.lv--chip){color: LinkText;border: 1px solid LinkText;}.lv--k-ordinal[data-lv-step]::before{background: linear-gradient(90deg, Highlight calc(var(--lv-step) * 16.667%), CanvasText 0);}.dt-pick::before, .dt-all::before{border-color: CanvasText;}.dt-pick:is(:checked, :indeterminate)::before, .dt-all:is(:checked, :indeterminate)::before{background: Highlight;border-color: Highlight;}.dt-pick:checked::after, .dt-all:checked::after{background: HighlightText;}.dt-all:indeterminate::after{background: HighlightText;}}}
html[data-ui="v3"]{&.ov-lock{overflow: hidden;padding-inline-end: var(--ov-sbw, 0px);}.ov:where(dialog){--ov-dir: 1;--ov-glow-x: 100%;--ov-wash: var(--accent);--ov-bg: var(--bg-raised);position: fixed;box-sizing: border-box;margin: 0;padding: 0;max-inline-size: none;max-block-size: none;flex-direction: column;overflow: hidden;overscroll-behavior: contain;z-index: var(--z-drawer);color: var(--text);background: var(--ov-bg);border: var(--border-width) solid var(--border-strong);box-shadow: var(--elev-overlay);opacity: 0;translate: calc(var(--ov-dir) * 100%) 0;transition: translate var(--motion-overlay) var(--ease-out-spectral), scale var(--motion-overlay) var(--ease-out-spectral), opacity var(--motion-overlay) var(--ease-out-spectral), display var(--motion-overlay) allow-discrete, overlay var(--motion-overlay) allow-discrete;&:dir(rtl){--ov-dir: -1;--ov-glow-x: 0%;}&:is([open], :target){display: flex;opacity: 1;translate: 0 0;}&:not(:modal):is([open], :target){box-shadow: var(--elev-overlay), 0 0 0 100vmax color-mix(in srgb, var(--bg) 46%, transparent);}&::backdrop{background: transparent;transition: background-color var(--motion-overlay) var(--ease-out-spectral), display var(--motion-overlay) allow-discrete, overlay var(--motion-overlay) allow-discrete;}&[open]::backdrop{background: color-mix(in srgb, var(--bg, black) 44%, transparent);}&::after{content: "";position: absolute;inset: 0;pointer-events: none;opacity: 0;background: color-mix(in srgb, var(--bg) 42%, transparent);transition: opacity var(--motion-overlay) var(--ease-out-spectral);}}.ov-drawer{inset-block: 0;inset-inline: auto 0;inline-size: min(30rem, calc(100vw - var(--sp-40)));block-size: 100vh;block-size: 100dvh;border-block: 0;border-inline-end: 0;transform-origin: 100% 50%;box-shadow: var(--elev-overlay), calc(var(--ov-dir) * -2px) 0 44px -12px color-mix(in srgb, var(--accent) 24%, transparent);&:dir(rtl){transform-origin: 0 50%;}&::before{content: "";position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: 2px;pointer-events: none;opacity: 0.9;background: linear-gradient(to bottom, var(--accent), var(--accent-2) 58%, color-mix(in srgb, var(--accent) 30%, transparent));}}.ov-sheet{inset-block: auto 0;inset-inline: 0;inline-size: 100%;max-block-size: min(88dvh, 44rem);border-block-end: 0;border-inline: 0;padding-block-end: env(safe-area-inset-bottom);border-start-start-radius: var(--radius-xl);border-start-end-radius: var(--radius-xl);translate: 0 100%;&:is([open], :target){translate: 0 var(--ov-drag, 0px);}&[data-dragging]{transition: none;}&::before{content: "";position: absolute;inset-block-start: 0;inset-inline: var(--sp-24);block-size: 1px;pointer-events: none;background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);}}.ov[data-ov-instant], .ov[data-ov-instant]::backdrop{transition: none;}.ov-grab{flex: none;display: grid;place-items: center;min-block-size: var(--sp-24);cursor: grab;touch-action: none;& span{inline-size: var(--sp-40);block-size: var(--sp-4);border-radius: var(--radius-round);background: var(--border-control);}}.ov-dialog, .ov-command{inset: 0;margin: auto;inline-size: min(34rem, calc(100vw - var(--sp-32)));max-block-size: min(86dvh, 40rem);border-radius: var(--radius-lg);translate: 0 var(--sp-16);scale: 0.98;z-index: var(--z-dialog);&:is([open], :target){scale: 1;}}.ov-command{inset-block: var(--sp-64) auto;inline-size: min(40rem, calc(100vw - var(--sp-32)));max-block-size: calc(100dvh - var(--sp-96));}.ov-dialog[open]::backdrop, .ov-command[open]::backdrop{background: color-mix(in srgb, var(--bg, black) 56%, transparent);}.ov-head{flex: none;display: flex;align-items: flex-start;justify-content: space-between;gap: var(--sp-12);padding-block: var(--sp-16) var(--sp-12);padding-inline-start: var(--sp-24);padding-inline-end: var(--sp-12);border-block-end: var(--border-width) solid var(--border);background: radial-gradient(120% 170% at var(--ov-glow-x) 0%, color-mix(in srgb, var(--ov-wash) 16%, transparent), transparent 62%), linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent), transparent);box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 13%, transparent);}.ov-headline{min-inline-size: 0;display: grid;gap: var(--sp-4);padding-block-start: var(--sp-8);}.ov-kicker{margin: 0;font-size: var(--type-micro);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}.ov-title{margin: 0;font-family: var(--font-display);font-size: var(--type-subhead);font-weight: var(--weight-h3);line-height: var(--leading-h3);letter-spacing: var(--track-h3);color: var(--text);overflow-wrap: anywhere;text-wrap: balance;}.ov-close, .ov-toast-x{display: inline-grid;place-items: center;flex: none;min-inline-size: var(--target-min);min-block-size: var(--target-min);padding: 0;border: var(--border-width) solid transparent;border-radius: var(--radius-round);background: transparent;color: var(--text-muted);font: inherit;cursor: pointer;text-decoration: none;transition: background-color var(--motion-micro) var(--ease-out-spectral), color var(--motion-micro) var(--ease-out-spectral);&:hover{background: var(--surface-3);color: var(--text);}}.ov-back{display: inline-flex;align-items: center;gap: var(--sp-4);justify-self: start;box-sizing: border-box;min-block-size: var(--target-min);margin-block: calc(var(--sp-12) * -1) calc(var(--sp-8) * -1);padding: 0;padding-inline-end: var(--sp-16);border: 0;background: none;color: var(--accent);font: inherit;font-size: var(--type-small);cursor: pointer;&:hover{color: var(--accent-strong);text-decoration: underline;text-underline-offset: 0.2em;}& .ov-chev-back{inline-size: var(--sp-16);block-size: var(--sp-16);margin-inline-start: calc(var(--sp-4) * -1);}&:dir(rtl) .ov-chev-back{scale: -1 1;}}.ov-icon{inline-size: var(--sp-20);block-size: var(--sp-20);}.ov-body{flex: 1 1 auto;min-block-size: 0;overflow: auto;overscroll-behavior: contain;padding-block: var(--sp-20) var(--sp-24);padding-inline: var(--sp-24);&:focus-visible{outline: 3px solid var(--focus);outline-offset: -3px;box-shadow: none;}> :first-child{margin-block-start: 0;}> :last-child{margin-block-end: 0;}}.ov-foot, .ov-confirm-form{display: flex;flex-wrap: wrap;justify-content: flex-end;gap: var(--sp-12);}.ov-foot{flex: none;padding-block: var(--sp-12);padding-inline: var(--sp-24);padding-block-end: max(var(--sp-12), env(safe-area-inset-bottom));border-block-start: var(--border-width) solid var(--border);}.ov-confirm-form{inline-size: 100%;margin: 0;}.ov-confirm{--ov-wash: var(--bad);}.ov-confirm::before{content: "";position: absolute;inset-block-start: 0;inset-inline: 0;block-size: 2px;pointer-events: none;background: linear-gradient(to right, var(--bad), transparent 75%);}.ov-danger{background: var(--bad);border-color: var(--bad);color: var(--bg);}.ov-hint{margin: 0;padding-block: var(--sp-8) var(--sp-16);padding-inline: var(--sp-24);font-size: var(--type-small);color: var(--text-muted);}.ov-facts{display: grid;gap: var(--sp-16);margin: 0;> div{display: grid;gap: var(--sp-4);}& dt{font-size: var(--type-micro);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}& dd{margin: 0;font-size: var(--type-body);overflow-wrap: anywhere;}}.ov-list{margin: 0;padding-inline-start: var(--sp-20);}.ov-body .filter-chip-label{white-space: nowrap;}.ov-command-form{padding-block: var(--sp-16) 0;padding-inline: var(--sp-24);margin: 0;}.ov-command .omni-field{position: relative;}.ov-command .omni-input{inline-size: 100%;box-sizing: border-box;min-block-size: var(--target-min);padding-block: 0;padding-inline: var(--sp-16);color: var(--text);font: inherit;font-size: var(--type-body);background: var(--surface-2);border: var(--border-width) solid var(--border-control);border-radius: var(--radius-sm);}.ov-command .omni-panel{position: static;margin-block-start: var(--sp-8);max-block-size: 50dvh;overflow: auto;box-shadow: none;}.ov-trigger{display: inline-flex;align-items: center;gap: var(--sp-8);min-block-size: var(--target-min);padding-block: 0;padding-inline: var(--sp-12);cursor: pointer;border: var(--border-width) solid var(--border-control);border-radius: var(--radius-round);background: transparent;color: var(--text);font: inherit;font-size: var(--type-small);&:hover{background: var(--surface-2);border-color: var(--accent);}&[aria-expanded="true"]{background: var(--surface-3);border-color: var(--accent);}}.ov-popover{--ov-dir: 1;box-sizing: border-box;max-inline-size: min(22rem, calc(100vw - var(--sp-32)));padding-block: var(--sp-12);padding-inline: var(--sp-16);color: var(--text);font-size: var(--type-small);line-height: 1.5;background: var(--bg-raised);border: var(--border-width) solid var(--border-strong);border-radius: var(--radius-md);box-shadow: var(--elev-panel);overflow: visible;&:dir(rtl){--ov-dir: -1;}&:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px;}&[data-ov-side]::before{content: "";position: absolute;inline-size: var(--sp-12);block-size: var(--sp-12);background: var(--bg-raised);pointer-events: none;inset-inline-start: calc(var(--ov-tail, 24px) - 6px);rotate: calc(var(--ov-dir) * 45deg);border: 0 solid var(--border-strong);}&[data-ov-side="below"]::before{inset-block-start: -7px;border-block-start-width: var(--border-width);border-inline-start-width: var(--border-width);}&[data-ov-side="above"]::before{inset-block-end: -7px;border-block-end-width: var(--border-width);border-inline-end-width: var(--border-width);}}.ov-pop-title{margin: 0 0 var(--sp-4);font-weight: var(--weight-strong);}.ov-pop-body{> :first-child{margin-block-start: 0;}> :last-child{margin-block-end: 0;}}.ov-tip{position: relative;display: inline-block;}.ov-tip-trigger{appearance: none;padding: 0;border: 0;border-block-end: var(--border-width) dotted var(--text-faint);border-radius: 0;background: none;color: inherit;font: inherit;cursor: help;}.ov-tooltip{position: absolute;z-index: var(--z-popover);inset-block-end: calc(100% + var(--sp-8));inset-inline-start: 50%;box-sizing: border-box;translate: calc(-50% + var(--ov-nudge, 0px)) 0;inline-size: max-content;max-inline-size: min(18rem, 80vw);padding-block: var(--sp-8);padding-inline: var(--sp-12);color: var(--text);background: var(--surface-3);border: var(--border-width) solid var(--border-strong);border-radius: var(--radius-sm);box-shadow: var(--elev-panel);font-size: var(--type-small);line-height: 1.45;font-weight: 400;text-align: start;white-space: normal;opacity: 0;visibility: hidden;transition: opacity var(--motion-micro) var(--ease-out-spectral), visibility 0s linear var(--motion-micro);&::before{content: "";position: absolute;inset-inline: 0;inset-block-start: 100%;block-size: var(--sp-8);}&[popover]{position: fixed;inset: auto;margin: 0;translate: none;opacity: 1;visibility: visible;overflow: visible;z-index: var(--z-popover);transition: opacity var(--motion-micro) var(--ease-out-spectral);&::before{display: none;}}}.ov-tip:is(:hover, :focus-within):not([data-dismissed]) .ov-tooltip{opacity: 1;visibility: visible;transition-delay: 100ms, 100ms;}.ov-toasts{position: fixed;z-index: var(--z-critical);inset: auto;inset-inline: 0;inset-block-end: calc(4rem + var(--sp-8) + env(safe-area-inset-bottom));inline-size: auto;block-size: auto;max-inline-size: none;max-block-size: none;margin: 0;padding: 0;padding-inline: var(--sp-16);border: 0;background: transparent;color: inherit;overflow: visible;display: flex;flex-direction: column;align-items: center;gap: var(--sp-8);pointer-events: none;}.ov > .ov-toasts{inset-block: var(--ov-toast-top, var(--sp-16)) auto;}.ov-toast-list{display: flex;flex-direction: column;gap: var(--sp-8);inline-size: min(100%, 26rem);&:empty{display: none;}}.ov-toast{--ov-tone: var(--info);position: relative;pointer-events: auto;box-sizing: border-box;display: grid;grid-template-columns: auto minmax(0, 1fr) auto auto;align-items: center;gap: var(--sp-4) var(--sp-12);padding-block: var(--sp-8);padding-inline-start: var(--sp-16);padding-inline-end: var(--sp-8);color: var(--text);background: var(--surface-2);border: var(--border-width) solid var(--border-strong);border-inline-start: 3px solid var(--ov-tone);border-radius: var(--radius-md);box-shadow: var(--elev-panel);font-size: var(--type-small);transition: opacity var(--motion-overlay) var(--ease-out-spectral), translate var(--motion-overlay) var(--ease-out-spectral);&[data-tone="success"]{--ov-tone: var(--good);}&[data-tone="warning"]{--ov-tone: var(--warn);}&[data-tone="error"]{--ov-tone: var(--bad);}&[data-tone="pending"]{--ov-tone: var(--accent);}&[data-leaving]{opacity: 0;translate: 0 var(--sp-4);}&[data-tone="pending"] [data-ico="pending"], &[data-tone="success"] [data-ico="success"], &[data-tone="info"] [data-ico="info"], &[data-tone="warning"] [data-ico="warning"], &[data-tone="error"] [data-ico="error"]{display: grid;}}.ov-toast-ico{display: grid;color: var(--ov-tone);> [data-ico]{display: none;}}.ov-toast-msg{margin: 0;min-inline-size: 0;padding-block: var(--sp-4);line-height: 1.45;overflow-wrap: anywhere;}.ov-toast-tone{font-weight: var(--weight-strong);color: var(--ov-tone);}.ov-toast-act{grid-column: 3;grid-row: 1;justify-self: end;min-block-size: var(--target-min);display: inline-flex;align-items: center;padding-block: 0;padding-inline: var(--sp-8);border: 0;background: none;color: var(--accent);font: inherit;font-weight: var(--weight-strong);text-decoration: underline;text-underline-offset: 0.2em;cursor: pointer;}.ov-toast-x{grid-column: 4;grid-row: 1;}.ov-panel-content{display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--sp-24);& :is(h2, h3){margin: 0;font-size: var(--type-h4);letter-spacing: var(--track-h4);color: var(--text);}}.ov-status{--ov-tone: var(--text-muted);display: grid;grid-template-columns: auto minmax(0, 1fr);gap: var(--sp-4) var(--sp-12);align-items: start;padding-block: var(--sp-12);padding-inline: var(--sp-16);border: var(--border-width) solid color-mix(in srgb, var(--ov-tone) 28%, var(--border));border-inline-start: 3px solid var(--ov-tone);border-radius: var(--radius-md);background: color-mix(in srgb, var(--ov-tone) 7%, var(--bg-card));&[data-status="documented"]{--ov-tone: var(--good);}&[data-status="conflicted"], &[data-status="stale"]{--ov-tone: var(--warn);}&[data-status="rejected"]{--ov-tone: var(--bad);}&[data-status="catalogue"]{--ov-tone: var(--info);}&[data-status="none"]{border-style: dashed;border-color: var(--border-control);background: transparent;}& p:not(.ov-status-title){grid-column: 2;margin: 0;color: var(--text-muted);font-size: var(--type-small);line-height: 1.5;}}.ov-status-ico{color: var(--ov-tone);}.ov-status-title, .ov-state-title{margin: 0;font-weight: var(--weight-strong);}.ov-chain{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--sp-16);}.ov-node{display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--sp-12);padding: var(--sp-16);border: var(--border-width) solid var(--border-strong);border-radius: var(--radius-md);background: var(--bg-card);box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);&[data-state="withdrawn"], &[data-state="stale"], &[data-state="rejected"]{border-style: dashed;border-color: var(--border-control);}&[data-state="withdrawn"] .ov-value, &[data-state="stale"] .ov-value, &[data-state="rejected"] .ov-value{color: var(--text-muted);}&[aria-current]{border-color: var(--accent);}& p{margin: 0;}}.ov-node-k{font-size: var(--type-micro);letter-spacing: var(--track-label);text-transform: uppercase;color: var(--text-muted);}.ov-node-v{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-8) var(--sp-12);}.ov-node-v > *{min-inline-size: 0;}.ov-node-s a, .ov-node-links a, .ov-src a{color: var(--accent);text-decoration: underline;text-underline-offset: 0.2em;}.ov-body :is(p, li) a:not([class*="btn"]){text-decoration: underline;text-underline-offset: 0.2em;}.ov-value, .ov-code{font-family: var(--font-data);font-variant-numeric: tabular-nums;overflow-wrap: anywhere;}.ov-value{font-size: var(--type-stat);font-weight: var(--weight-data);line-height: 1.05;letter-spacing: -0.02em;}.ov-unit{font-size: var(--type-body-l);font-weight: var(--weight-body);letter-spacing: 0;color: var(--text-muted);}.ov-code{font-size: var(--type-small);}.ov-chip{--ov-tone: var(--text-muted);display: inline-flex;align-items: center;gap: var(--sp-4);padding-block: var(--sp-4);padding-inline: var(--sp-8);border: var(--border-width) solid color-mix(in srgb, var(--ov-tone) 50%, var(--border));border-radius: var(--radius-round);background: color-mix(in srgb, var(--ov-tone) 9%, transparent);color: var(--text);font-size: var(--type-small);line-height: 1.2;&[data-tone="good"]{--ov-tone: var(--good);}&[data-tone="bad"]{--ov-tone: var(--bad);}& svg{inline-size: var(--sp-16);block-size: var(--sp-16);flex: none;color: var(--ov-tone);}}.ov-src{display: grid;gap: var(--sp-8);margin: 0;padding-block-start: var(--sp-12);border-block-start: var(--border-width) solid var(--border);font-size: var(--type-small);> div{display: grid;grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);gap: var(--sp-12);align-items: baseline;}& dt{color: var(--text-muted);}& dd{margin: 0;overflow-wrap: anywhere;}}.ov-fresh{display: inline-flex;align-items: center;gap: var(--sp-4);margin-inline-start: var(--sp-8);color: var(--text-muted);&[data-fresh="stale"]{color: var(--warn);}& svg{inline-size: var(--sp-16);block-size: var(--sp-16);flex: none;}}.ov-warn{display: flex;align-items: flex-start;gap: var(--sp-8);color: var(--warn);font-size: var(--type-small);line-height: 1.45;& svg{inline-size: var(--sp-16);block-size: var(--sp-16);flex: none;margin-block-start: 1px;}}.ov-kv{display: grid;grid-template-columns: minmax(0, max-content) minmax(0, 1fr);gap: var(--sp-8) var(--sp-16);margin: 0;font-size: var(--type-small);& dt{color: var(--text-muted);}& dd{margin: 0;overflow-wrap: anywhere;}}.ov-note{margin: 0;font-size: var(--type-small);line-height: 1.5;color: var(--text-muted);}.ov-evidence{--ov-tone: var(--accent);display: inline-flex;align-items: center;gap: var(--sp-8);box-sizing: border-box;max-inline-size: 100%;min-block-size: var(--target-min);padding-block: 0;padding-inline-start: var(--sp-12);padding-inline-end: var(--sp-8);border: var(--border-width) solid color-mix(in srgb, var(--ov-tone) 40%, var(--border-strong));border-radius: var(--radius-round);background: linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent), transparent), color-mix(in srgb, var(--ov-tone) 7%, transparent);box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent);color: var(--text);font-size: var(--type-small);text-decoration: none;transition: background-color var(--motion-micro) var(--ease-out-spectral), border-color var(--motion-micro) var(--ease-out-spectral);&:hover{border-color: var(--ov-tone);background-color: color-mix(in srgb, var(--ov-tone) 13%, transparent);}&[data-state="unchecked"], &[data-state="unreviewed"], &[data-state="none"]{--ov-tone: var(--text-muted);}&[data-state="none"]{border-style: dashed;}&[data-state="stale"], &[data-state="conflicted"]{--ov-tone: var(--warn);}&[data-state="rejected"]{--ov-tone: var(--bad);}&[data-state="catalogue"]{--ov-tone: var(--info);}& > svg:first-child{inline-size: var(--sp-20);block-size: var(--sp-20);flex: none;color: var(--ov-tone);}& > .ov-chev{inline-size: var(--sp-16);block-size: var(--sp-16);flex: none;color: var(--text-muted);}&:dir(rtl) .ov-chev{scale: -1 1;}}.ov-ev-text{display: inline-flex;align-items: baseline;gap: var(--sp-4);min-inline-size: 0;white-space: nowrap;}.ov-ev-k{font-weight: var(--weight-strong);}.ov-ev-sep, .ov-ev-date{color: var(--text-muted);}.ov-ev-name{min-inline-size: 0;max-inline-size: 16ch;overflow: hidden;text-overflow: ellipsis;}.ov-page .ov-panel-content{max-inline-size: 44rem;}.ov-panel-content section{display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--sp-12);}.ov-state{display: grid;gap: var(--sp-12);justify-items: start;}.ov-actions{display: flex;flex-wrap: wrap;gap: var(--sp-12);margin: 0;}.ov-skel{display: grid;gap: var(--sp-12);& i{display: block;block-size: var(--sp-16);border-radius: var(--radius-xs);background: var(--surface-3);}& i:nth-child(1){inline-size: 55%;block-size: var(--sp-24);}& i:nth-child(3){inline-size: 88%;}& i:nth-child(4){inline-size: 70%;}}.ov-loading{margin: var(--sp-12) 0 0;color: var(--text-muted);font-size: var(--type-small);}.ov[data-ov-under]{scale: 0.97;&::backdrop{background: transparent;}&::after{opacity: 1;}}.ov-dialog[data-ov-under], .ov-command[data-ov-under]{translate: 0 calc(var(--sp-8) * -1);}}@starting-style{html[data-ui="v3"]{.ov:where(dialog)[open]{opacity: 0;translate: calc(var(--ov-dir) * 100%) 0;}.ov:where(dialog)[open]::backdrop{background: transparent;}.ov-sheet[open]{translate: 0 100%;}.ov-dialog[open], .ov-command[open]{scale: 0.98;translate: 0 var(--sp-16);}.ov-toast{opacity: 0;translate: 0 var(--sp-8);}.ov-tooltip[popover]:popover-open{opacity: 0;}}}@supports (backdrop-filter: blur(1px)){html[data-ui="v3"] :is(.ov-drawer, .ov-sheet){--ov-bg: color-mix(in srgb, var(--bg-raised) 82%, transparent);-webkit-backdrop-filter: blur(22px) saturate(1.25);backdrop-filter: blur(22px) saturate(1.25);}html[data-ui="v3"] :is(.ov-dialog, .ov-command)[open]::backdrop{-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);}html[data-ui="v3"] .ov-toast{background: color-mix(in srgb, var(--surface-2) 90%, transparent);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);}}@supports selector(:popover-open){html[data-ui="v3"] .ov-popover{position: fixed;inset: 0;margin: auto;z-index: var(--z-popover);&[data-ov-anchored="js"]{inset: auto;margin: 0;}}html[data-ui="v3"] .ov-toasts[popover]:not(:popover-open){display: none;}}@supports (position-area: block-end){html[data-ui="v3"] .ov-popover[data-ov-anchored="css"]{inset: auto;margin-block: var(--sp-8);margin-inline: 0;position-area: block-end span-inline-end;position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;}html[data-ui="v3"] .ov-tooltip[popover][data-ov-anchored="css"]{margin-block: var(--sp-8);margin-inline: 0;position-area: block-start span-inline-end;position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;}}@media (min-width: 48rem){@starting-style{html[data-ui="v3"] .ov-sheet.ov-adaptive[open]{translate: calc(var(--ov-dir) * 100%) 0;}}html[data-ui="v3"]{.ov-sheet.ov-adaptive{inset-block: 0;inset-inline: auto 0;inline-size: min(30rem, 100vw);max-block-size: none;block-size: 100dvh;border-block: 0;border-inline-end: 0;border-radius: 0;padding-block-end: 0;translate: calc(var(--ov-dir) * 100%) 0;&:is([open], :target){translate: 0 0;}.ov-grab{display: none;}&::before{inset-block: 0;inset-inline: auto;inset-inline-start: 0;inline-size: 2px;block-size: auto;background: linear-gradient(to bottom, var(--accent), var(--accent-2) 58%, color-mix(in srgb, var(--accent) 30%, transparent));}}.ov-toasts{inset-block: auto var(--sp-24);inset-inline: auto var(--sp-24);align-items: stretch;padding-inline: 0;}.ov > .ov-toasts{inset-block: auto var(--sp-24);}.ov-toast-list{inline-size: 26rem;}}}@media (max-width: 20rem), (max-height: 16rem){html[data-ui="v3"]{.ov-head{padding-inline-start: var(--sp-12);}.ov-body, .ov-foot, .ov-hint, .ov-command-form{padding-inline: var(--sp-12);}}}@media (forced-colors: active){html[data-ui="v3"]{.ov:where(dialog), .ov-popover, .ov-tooltip, .ov-toast, .ov-node, .ov-status, .ov-evidence, .ov-chip{border: 1px solid CanvasText;background: Canvas;color: CanvasText;}.ov:where(dialog)::backdrop{background: color-mix(in srgb, Canvas 70%, transparent);}.ov-drawer::before, .ov-sheet::before, .ov-grab span{background: CanvasText;}.ov-popover::before{background: Canvas;border-color: CanvasText;}.ov-close:focus-visible, .ov-toast-x:focus-visible, .ov-back:focus-visible{outline: 2px solid Highlight;}.ov-toast-act, .ov-node-s a, .ov-src a, .ov-back{color: LinkText;}.ov-status, .ov-node[data-state="stale"]{border-style: solid;}}}@media (prefers-reduced-motion: reduce){html[data-ui="v3"]{.ov:where(dialog), .ov:where(dialog)::backdrop, .ov:where(dialog)::after, .ov-toast, .ov-tooltip, .ov-close, .ov-toast-x, .ov-evidence{transition: none;}}}@media (prefers-reduced-transparency: reduce){html[data-ui="v3"] :is(.ov-drawer, .ov-sheet){--ov-bg: var(--bg-raised);-webkit-backdrop-filter: none;backdrop-filter: none;}html[data-ui="v3"] .ov-toast{background: var(--surface-2);-webkit-backdrop-filter: none;backdrop-filter: none;}}

/* ── Game DNA covers ───────────────────────────────────────────────────── */
:where(html[data-ui="v3"]) .game-dna { display: block; width: 100%; height: auto; }
:where(html[data-ui="v3"]) .game-dna--avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius); }
:where(html[data-ui="v3"]) .card-media--game-dna { aspect-ratio: 1 / 1; background: none; border: 1px solid var(--border); }
:where(html[data-ui="v3"]) .card-media--game-dna .game-dna { height: 100%; }
:where(html[data-ui="v3"]) .game-hero-media--game-dna .game-dna { border-radius: var(--radius); border: 1px solid var(--border); }
:where(html[data-ui="v3"]) .compare-game-dna { display: inline-flex; vertical-align: middle; margin-right: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-ui="v3"]) .card-media--game-dna .game-dna { transition: transform var(--motion-card) var(--ease-out-spectral); }
  :where(html[data-ui="v3"]) .card-dna:hover .card-media--game-dna .game-dna, :where(html[data-ui="v3"]) .card-dna:focus-within .card-media--game-dna .game-dna { transform: scale(1.025); }
}

/* ── /dev/game-dna gallery + legend ────────────────────────────────────── */
:where(html[data-ui="v3"]) .game-dna-page > p, :where(html[data-ui="v3"]) .game-dna-page > table { max-width: 60rem; }
:where(html[data-ui="v3"]) .game-dna-page table.data { margin: var(--space-3) 0; }
:where(html[data-ui="v3"]) .game-dna-og { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
:where(html[data-ui="v3"]) .game-dna-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-3); margin: var(--space-3) 0; padding: 0; list-style: none; }
:where(html[data-ui="v3"]) .game-dna-gallery--wide { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
:where(html[data-ui="v3"]) .game-dna-tile { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
:where(html[data-ui="v3"]) .game-dna-tile figcaption { font-size: var(--type-small); color: var(--text-muted); overflow-wrap: anywhere; }
:where(html[data-ui="v3"]) .game-dna-tile figcaption strong { color: var(--text); display: block; }
:where(html[data-ui="v3"]) .game-dna-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
:where(html[data-ui="v3"]) .game-dna-light { background: var(--text); padding: var(--space-3); border-radius: var(--radius); }
:where(html[data-ui="v3"]) .game-dna-light .game-dna-tile figcaption, :where(html[data-ui="v3"]) .game-dna-light .game-dna-tile figcaption strong { color: var(--bg); }
:where(html[data-ui="v3"]) .game-dna-legend { max-width: 46rem; margin: var(--space-4) 0; }
:where(html[data-ui="v3"]) .game-dna-legend ul { padding-left: var(--space-4); }
:where(html[data-ui="v3"]) .game-dna-legend-note { color: var(--text-muted); }

:where(html[data-ui="v3"]) .card-dna h2 > a {
  display: inline-block;
  line-height: 24px;
  min-height: 24px;
  min-width: 24px;
}
html[data-ui="v3"] {
  .h3-home { display: grid; gap: var(--sp-48); min-width: 0; padding-block-end: var(--sp-48); }
  .h3-home > * { min-width: 0; }
  .h3-section { min-width: 0; margin: 0; }
  .h3-note { margin: 0; padding: var(--sp-12) var(--sp-16); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--type-small); }
  .h3-unknown { color: var(--text-faint); }
  .h3-home a:not([class]) { text-underline-offset: 0.2em; }
  
}
html[data-ui="v3"] {
  .h3-hero__head { min-width: 0; }
  .h3-hero__search { min-width: 0; }
  
  .h3-search { margin: 0; max-width: none; padding: 0; background: none; border: 0; }
  .h3-search .omni-field { position: relative; }
  .h3-search .omni-row:hover { border-color: var(--text-faint); }
  .h3-search__icon { display: inline-flex; flex: none; color: var(--text-muted); }
  .h3-search input.omni-input::placeholder { color: var(--text-faint); opacity: 1; }
  .h3-search input.omni-input::-webkit-search-cancel-button { display: none; }
  .h3-search .omni-panel { inset-inline: 0; border-radius: var(--radius-md); }
  .h3-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); margin-block-start: var(--sp-12); }
  .h3-try__label { margin: 0; color: var(--text-faint); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
  .h3-chips--end { justify-content: flex-end; }
  .h3-chips > li { margin: 0; min-width: 0; }
  
  .h3-find > * { position: relative; z-index: var(--z-content); }
  .h3-find__kicker { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); margin: 0; color: var(--text-muted); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-find__day { font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--text-faint); }
  .h3-find__main { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
  .h3-find__cover { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); }
  .h3-find__metric { margin: 0; color: var(--text-muted); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-find__fig { margin: var(--sp-4) 0 var(--sp-8); }
  .h3-find__figure { display: inline-block; margin: 0; font-family: var(--font-display); font-size: var(--type-stat); font-weight: var(--weight-display); letter-spacing: var(--track-h2); line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; }
  .h3-find__who { margin: 0; color: var(--text-muted); font-size: var(--type-small); }
  .h3-find__game { color: var(--text); font-weight: 600; text-decoration: none; }
  .h3-find__game:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-find__ruler { position: relative; }
  .h3-find__ruler .dv { margin: 0; }
  
  .h3-find__hit, .h3-prov__hit { position: absolute; inset: 0; z-index: var(--z-content); inline-size: auto; block-size: auto; min-block-size: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; text-decoration: none; }
  .h3-find__hit:hover, .h3-prov__hit:hover, .h3-find__hit[aria-expanded="true"], .h3-prov__hit[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 0; }
  .h3-find__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
  .h3-find .ov-evidence { min-inline-size: 0; }
  .h3-find .ov-ev-text { flex-wrap: wrap; white-space: normal; }
  .h3-find__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); margin: 0; color: var(--text-faint); font-size: var(--type-micro); line-height: 1.5; }
  
  .h3-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); margin: 0; padding: 0; list-style: none; }
  .h3-tile::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--sp-16); block-size: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--tile-hue), transparent); opacity: 0.7; }
  .h3-tile:hover, .h3-tile:focus-within { border-color: color-mix(in srgb, var(--tile-hue) 45%, var(--border)); }
  .h3-tile--casinos { --tile-hue: var(--chroma-orange); }
  .h3-tile--providers { --tile-hue: var(--chroma-cyan); }
  .h3-tile--bonuses { --tile-hue: var(--chroma-pink); }
  .h3-tile__head { display: flex; align-items: center; gap: var(--sp-8); }
  .h3-tile__icon { display: inline-grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); color: var(--tile-hue); background: color-mix(in srgb, var(--tile-hue) 14%, transparent); }
  .h3-tile__title { margin: 0; font-family: var(--font-ui); font-size: var(--type-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
  .h3-tile__title a { color: var(--text); text-decoration: none; }
  .h3-tile__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-tile__figure { margin: var(--sp-4) 0 0; min-width: 0; }
  .h3-tile__caption { margin: 0; color: var(--text-muted); font-size: var(--type-small); line-height: 1.35; }
  .h3-tile__sub { margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--type-small); line-height: 1.4; }
  .h3-tile__chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-12) 0 0; padding: 0; list-style: none; }
  .h3-tile__chips > li { margin: 0; min-width: 0; }
  .h3-tile__chips .chip { max-inline-size: 100%; overflow-wrap: anywhere; font-size: var(--type-small); }
  .h3-tile__delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin: var(--sp-8) 0 0; padding-block-start: var(--sp-8); border-block-start: 1px solid var(--border); color: var(--text-muted); font-size: var(--type-small); margin-block-start: auto; }
  .h3-tiles > .h3-note { margin-block-end: var(--sp-12); }
  .h3-tile__viz { margin-block-start: var(--sp-8); }
  .h3-tile__viz svg { display: block; inline-size: 100%; block-size: 0.5rem; }
  .h3-tile__delta .h3-val { text-align: start; flex-wrap: wrap; }
  
  .h3-seg { stroke: var(--bg-card); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .h3-seg--0 { fill: var(--accent); }
  .h3-seg--1 { fill: var(--chroma-violet); }
  .h3-seg--2 { fill: var(--chroma-pink); }
  .h3-seg--3 { fill: var(--chroma-orange); }
  .h3-seg--4 { fill: var(--chroma-lime); }
  .h3-seg--5 { fill: var(--chroma-mint); }
  .h3-seg--rest { fill: none; stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  
  .h3-num { font-family: var(--font-display); font-size: var(--type-stat); font-weight: var(--weight-display); letter-spacing: var(--track-h2); line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; color: var(--text); overflow-wrap: anywhere; }
  
  .h3-num:not(.h3-num--text), .h3-metric__v { direction: ltr; unicode-bidi: isolate; }
  .h3-num--sm { font-size: var(--type-subhead); font-weight: 650; letter-spacing: var(--track-h4); }
  .h3-num--text { font-size: var(--type-subhead); font-weight: 650; letter-spacing: var(--track-h4); line-height: 1.2; }
  .h3-num--unknown { color: var(--text-faint); }
  .h3-val { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: baseline; gap: var(--sp-4); min-block-size: 1.5rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  text-decoration: underline dotted var(--text-faint); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  .h3-val:hover, .h3-val[aria-expanded="true"] { background: none; border: 0; color: var(--accent-strong); text-decoration-color: var(--accent); }
  .h3-val:hover .h3-num, .h3-val[aria-expanded="true"] .h3-num { color: var(--accent-strong); }
  .h3-val.h3-linkbtn { text-decoration: none; padding-block: var(--sp-8); padding-inline: var(--sp-12); border: 1px solid var(--border-control); border-radius: var(--radius-round); color: var(--text); font-size: var(--type-small); }
  .h3-val.h3-linkbtn:hover, .h3-val.h3-linkbtn[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); }
  
  .h3-val--sub, .h3-val--line, .h3-val--lines, .h3-val--note { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); min-block-size: 1.5rem; padding-block: 0.125rem; font: inherit; color: inherit; text-align: start; text-wrap: pretty; }
  .h3-val--lines { align-items: flex-start; }
  .h3-val--figure { display: inline-flex; align-items: baseline; }
  .h3-src { color: inherit; text-decoration: underline dotted var(--text-faint); text-underline-offset: 0.2em; }
  .h3-src:hover { color: var(--accent-strong); text-decoration-color: var(--accent); }
  
  .h3-box__meta { margin: var(--sp-8) 0 0; color: var(--text-faint); font-size: var(--type-micro); font-variant-numeric: tabular-nums; }
  .h3-box__sub { margin: var(--sp-12) 0 var(--sp-4); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
  .h3-open { margin: var(--sp-12) 0 0; }
  .h3-peers { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
  
  .h3-peers li { display: grid; grid-template-columns: minmax(min(40%, 10ch), 1fr) auto auto; align-items: baseline; gap: var(--sp-8); }
  
  .h3-peers li.h3-peers__stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h3-peers__stack .h3-peers__n { text-align: start; }
  .h3-peers li > a, .h3-cmp__k > a { display: inline-flex; align-items: center; min-block-size: 1.5rem; min-width: 0; overflow-wrap: anywhere; }
  .h3-peers__n { min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: end; }
  .h3-peek { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
  
  .h3-cmp { display: grid; gap: var(--sp-8); margin: var(--sp-8) 0 0; padding: 0; list-style: none; }
  .h3-cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-12); row-gap: var(--sp-4); }
  .h3-cmp__k { min-width: 0; overflow-wrap: anywhere; }
  .h3-cmp__v { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: end; }
  .h3-cmp__sub { grid-column: 1 / -1; min-width: 0; color: var(--text-faint); font-size: var(--type-micro); line-height: 1.5; overflow-wrap: anywhere; }
  .h3-cmp__sub a { color: var(--text-muted); }
  .h3-cmp .h3-cov__bar { grid-column: 1 / -1; }
  .h3-rung--here .h3-cmp__k { font-weight: 600; }
  .h3-rung__tag { color: var(--accent-strong); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-16); margin: var(--sp-8) 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
  .h3-months__m { display: flex; justify-content: space-between; gap: var(--sp-8); padding-block: var(--sp-4); border-block-end: 1px solid var(--border); }
  .h3-months__v { color: var(--text-muted); }
  .h3-months__tag { color: var(--text-faint); font-size: var(--type-micro); }
  .h3-dist { margin-block-start: var(--sp-8); }
  .h3-dist .dv { margin: 0; }
  .h3-dist .dv-svg { inline-size: 100%; block-size: auto; }
  
  .h3-box .ov-pop-x { position: absolute; inset-block-start: var(--sp-8); inset-inline-end: var(--sp-8); display: inline-grid; place-items: center; min-inline-size: 1.75rem; min-block-size: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; color: var(--text-muted); cursor: pointer; }
  .h3-box .ov-pop-x:hover { background: var(--surface-3); color: var(--text); }
  .h3-box .ov-pop-x::before, .h3-box .ov-pop-x::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 0.875rem; block-size: 2px; border-radius: 1px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
  .h3-box .ov-pop-x::after { rotate: -45deg; }
  .h3-box .ov-pop-title { padding-inline-end: var(--sp-32); }
  .h3-box { text-align: start; }
  
  .h3-home .ov-popover.h3-box:popover-open { display: flex; flex-direction: column; max-block-size: min(86dvh, 36rem); }
  .h3-box .ov-pop-title { flex: none; }
  .h3-box .ov-pop-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@supports (position-try-order: most-block-size) {
  html[data-ui="v3"] {
    
    .h3-home .ov-popover.h3-box[data-ov-anchored="css"]:popover-open { position-try-order: most-block-size; max-block-size: min(calc(100% - var(--sp-16)), 36rem); }
  }
}
html[data-ui="v3"] {
  
  .h3-home .ov-popover.h3-box { min-inline-size: min(20rem, calc(100vw - var(--sp-32))); }
  .h3-home .ov-popover.h3-box--wide { min-inline-size: min(26rem, calc(100vw - var(--sp-32))); max-inline-size: min(28rem, calc(100vw - var(--sp-32))); }
  
  .h3-duo { display: grid; gap: var(--sp-16); }
  .h3-card { position: relative; display: grid; align-content: start; gap: var(--sp-12); min-width: 0; padding: var(--sp-20); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--glass), var(--bg-card); box-shadow: var(--elev-card); }
  .h3-card__title { margin: 0; font-size: var(--type-h2); font-weight: 650; line-height: 1.2; letter-spacing: var(--track-h2); }
  .h3-card__lead { margin: 0; color: var(--text-muted); font-size: var(--type-small); max-width: 46rem; }
  .h3-card__foot { margin: 0; color: var(--text-faint); font-size: var(--type-micro); line-height: 1.5; }
  .h3-ledger__rows, .h3-cov__list { display: grid; margin: 0; padding: 0; list-style: none; }
  .h3-ledger__row, .h3-cov { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-16); padding-block: var(--sp-12); border-block-start: 1px solid var(--border); }
  .h3-ledger__row:first-child, .h3-cov:first-child { border-block-start: 0; padding-block-start: var(--sp-4); }
  .h3-ledger__what, .h3-cov__label { min-width: 0; color: var(--text); font-size: var(--type-body); line-height: 1.35; }
  .h3-ledger__val { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
  .h3-ledger__val .h3-val { gap: var(--sp-8); align-items: center; }
  
  .h3-ledger__row { position: relative; }
  .h3-ledger__val .h3-val::after { content: ""; position: absolute; inset: 0; }
  .h3-ledger__row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
  .h3-strip { grid-column: 1 / -1; display: block; inline-size: 100%; block-size: 1.25rem; }
  .h3-strip--s { max-inline-size: 10rem; }
  .h3-strip__b { fill: var(--accent); opacity: 0.8; }
  .h3-strip__0 { fill: var(--text-faint); }
  .h3-strip__now { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
  .h3-cov { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-8); }
  .h3-cov__bar { grid-column: 1 / -1; display: block; inline-size: 100%; block-size: 0.5rem; }
  .h3-cov__unk { fill: none; stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  .h3-cov__known { fill: var(--accent); }
  
  .h3-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-8) var(--sp-16); margin-block-end: var(--sp-16); }
  .h3-head > div { min-width: 0; }
  .h3-head__kicker { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: var(--type-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-head__title { margin: 0; font-size: var(--type-h2); font-weight: 650; line-height: 1.15; letter-spacing: var(--track-h2); }
  .h3-head__lead { margin: var(--sp-4) 0 0; max-width: 52rem; color: var(--text-muted); font-size: var(--type-small); }
  .h3-head__all { flex: none; display: inline-flex; align-items: center; min-block-size: 1.5rem; color: var(--accent-strong); font-size: var(--type-small); font-weight: 600; text-decoration: none; padding-block: var(--sp-4); }
  .h3-head__all:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-rule { margin: 0 0 var(--sp-16); max-width: 64rem; color: var(--text-muted); font-size: var(--type-small); }
  .h3-rule__k { color: var(--text); font-weight: 600; }
  .h3-rule a { text-decoration: underline; text-underline-offset: 0.2em; }
  
  .h3-rail__track { position: relative; display: flex; gap: var(--sp-16); margin: 0; padding-block: var(--sp-8); padding-inline: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .h3-rail__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
  .h3-rail__track > li { flex: 0 0 auto; scroll-snap-align: start; }
  .h3-rail__track--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); overflow: visible; }
  .h3-rail__track--grid > li { flex: none; }
  
  .h3-game { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); inline-size: 11.5rem; min-width: 0; }
  .h3-game__cover { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--elev-card); background: var(--bg-card); }
  .h3-game:hover .h3-game__cover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .h3-game__body { display: grid; gap: var(--sp-4); min-width: 0; }
  .h3-game__name { min-block-size: 2.6em; margin: 0; font-family: var(--font-ui); font-size: var(--type-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
  .h3-game__name a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
  .h3-game__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-lg); }
  .h3-game__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-game__by { position: relative; z-index: var(--z-content); justify-self: start; display: inline-flex; align-items: center; min-block-size: 1.5rem; color: var(--text-muted); font-size: var(--type-small); text-decoration: none; overflow-wrap: anywhere; }
  .h3-game__by:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-game .h3-val { position: relative; z-index: var(--z-content); inline-size: 100%; text-decoration: none; padding-block: var(--sp-4); border-radius: var(--radius-sm); }
  .h3-game .h3-val:hover { background: var(--surface-2); }
  .h3-metrics { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--sp-8); inline-size: 100%; }
  .h3-metric { display: grid; gap: 1px; min-width: 0; }
  .h3-metric__k { color: var(--text-faint); font-size: var(--type-micro); letter-spacing: var(--track-label); text-transform: uppercase; }
  .h3-metric__v { color: var(--text); font-size: var(--type-small); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .h3-game__when { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin: 0; color: var(--text-faint); font-size: var(--type-micro); }
  .h3-game__src::before { content: "· "; }
  .h3-evidence { margin: var(--sp-4) 0 0; padding: 0; color: var(--text-muted); font-size: var(--type-micro); }
  
  .h3-rail__track--prov > li { inline-size: 13.5rem; }
  .h3-prov { display: grid; align-content: start; gap: var(--sp-8); padding: var(--sp-16); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--glass), var(--bg-card); box-shadow: var(--elev-card); }
  .h3-prov__name { margin: 0; font-family: var(--font-ui); font-size: var(--type-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
  .h3-prov__name a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
  .h3-prov__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-prov__spark { position: relative; }
  .h3-prov__spark .dv { margin: 0; }
  .h3-prov__spark .dv-svg { inline-size: 100%; block-size: auto; }
  
  .h3-rank__list { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
  .h3-rank__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-4) var(--sp-16); padding: var(--sp-12) var(--sp-16); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
  .h3-rank__n { grid-row: span 2; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--border-strong); border-radius: var(--radius-round); color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--type-small); }
  .h3-rank__row a { min-block-size: 1.5rem; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
  .h3-rank__ev { grid-column: 2; color: var(--text-muted); font-size: var(--type-small); }
  .h3-evidence { display: block; }
  .h3-evidence__list { display: grid; gap: var(--sp-4); }
  .h3-rail__omit { margin: var(--sp-8) 0 0; max-inline-size: 60rem; color: var(--text-faint); font-size: var(--type-small); }
  .h3-rail__omit a { text-decoration: underline; text-underline-offset: 0.2em; }
  .h3-rail--thin .h3-head { margin-block-end: var(--sp-8); }
  .h3-page-title { margin: 0 0 var(--sp-12); font-size: var(--type-h1-data); font-weight: var(--weight-h1); line-height: var(--leading-h1); letter-spacing: var(--track-h1); }
  
  .h3-method__list { display: grid; gap: var(--sp-16) var(--sp-32); margin: 0; }
  .h3-method__list dt { margin: 0 0 var(--sp-4); font-weight: 600; }
  .h3-method__list dd { margin: 0; max-width: 60ch; color: var(--text-muted); font-size: var(--type-small); line-height: 1.6; }
  .h3-rg { padding: var(--sp-20); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-raised); }
  .h3-rg__title { margin: 0 0 var(--sp-8); font-size: var(--type-h4); font-weight: 600; letter-spacing: var(--track-h4); }
  .h3-rg p { margin: 0 0 var(--sp-8); max-width: 72ch; color: var(--text-muted); font-size: var(--type-small); }
  .h3-rg p:last-child { margin-block-end: 0; }
  .h3-slot { min-height: 0; }
  
  .h3-land__stage { display: grid; gap: var(--sp-12); min-width: 0; padding: var(--sp-20); border: 1px solid transparent; border-radius: var(--radius-card); background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, var(--rim-quiet) border-box; box-shadow: var(--elev-panel); }
  .h3-land__scroll { min-width: 0; }
  .h3-land__table { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: var(--sp-4); }
  .h3-land__ch, .h3-land__rh, .h3-land__corner { color: var(--text-muted); font-size: var(--type-micro); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
  .h3-land__ch { padding-block-end: var(--sp-4); text-align: center; white-space: nowrap; }
  .h3-land__rh { inline-size: 7.5rem; padding-inline-end: var(--sp-8); text-align: end; }
  .h3-land__corner { inline-size: 7.5rem; padding-inline-end: var(--sp-8); text-align: end; color: var(--text-faint); font-weight: 400; vertical-align: bottom; }
  .h3-land__ch--u, .h3-land__rh--u { color: var(--text-faint); }
  .h3-land__ch--u { white-space: normal; }
  .h3-land__td { --land: transparent; position: relative; block-size: 2.75rem; padding: 0; border-radius: var(--radius-sm); background: var(--land); text-align: center; font-variant-numeric: tabular-nums; }
  .h3-land__td--d1 { --land: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); }
  .h3-land__td--d2 { --land: color-mix(in srgb, var(--accent) 30%, var(--bg-card)); }
  .h3-land__td--d3 { --land: color-mix(in srgb, var(--accent) 52%, var(--bg-card)); }
  .h3-land__td--d4 { --land: color-mix(in srgb, var(--accent) 76%, var(--bg-card)); }
  .h3-land__td--d5 { --land: var(--accent); }
  .h3-land__td--d4 .h3-land__n, .h3-land__td--d5 .h3-land__n { color: var(--bg); }
  .h3-land__td--u { background: none; outline: 1px dashed var(--text-faint); outline-offset: -1px; }
  .h3-land__td--u .h3-land__n { color: var(--text-muted); }
  .h3-land__td--0 { box-shadow: inset 0 0 0 1px var(--border); }
  .h3-land__zero { color: var(--text-faint); font-size: var(--type-micro); line-height: 2.75rem; }
  .h3-land__td .h3-val { inline-size: 100%; block-size: 100%; justify-content: center; align-items: center; padding: 0; border-radius: inherit; text-decoration: none; }
  .h3-land__td .h3-val:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
  .h3-land__n { font-size: var(--type-small); font-weight: 600; color: var(--text); }
  .h3-land__ring { position: absolute; inset: 3px; border: 2px solid var(--text); border-radius: var(--radius-xs); box-shadow: 0 0 0 1px var(--bg-card); pointer-events: none; }
  .h3-land__td--viewed:not(.h3-land__td--find) .h3-land__ring { border-style: dotted; }
  .h3-land__td--find.h3-land__td--d4 .h3-land__ring, .h3-land__td--find.h3-land__td--d5 .h3-land__ring { border-color: var(--bg); box-shadow: 0 0 0 1px var(--text); }
  .h3-land__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); color: var(--text-muted); font-size: var(--type-micro); }
  .h3-land__legend-u, .h3-land__legend-m { display: inline-flex; align-items: center; gap: var(--sp-4); margin-inline-start: var(--sp-8); }
  .h3-land__sw { display: inline-block; inline-size: 0.875rem; block-size: 0.875rem; border-radius: var(--radius-xs); background: var(--land); }
  .h3-land__sw--u { --land: transparent; border: 1px dashed var(--text-faint); }
  .h3-land__sw--find, .h3-land__sw--viewed { --land: transparent; border: 2px solid var(--text); }
  .h3-land__sw--viewed { border-style: dotted; }
  .h3-land__cov { margin: 0; color: var(--text); font-size: var(--type-small); line-height: 1.5; }
  .h3-land__note { margin: 0; color: var(--text-faint); font-size: var(--type-micro); line-height: 1.5; max-inline-size: 64rem; }
  .h3-land__mark { margin: var(--sp-8) 0 0; color: var(--accent-strong); font-weight: 600; }
  
}
@media (min-width: 48rem) {
  html[data-ui="v3"] {
    .h3-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
    .h3-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-24); }
    .h3-method__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h3-game { inline-size: 12.5rem; }
    .h3-rank__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
@media (min-width: 64rem) {
  html[data-ui="v3"] {
    .h3-home { gap: var(--sp-48); }
  }
}
@media (max-width: 47.9375rem) {
  html[data-ui="v3"] {
    
    .h3-home .ov-popover.h3-box:popover-open:not([data-ov-anchored="js"]) { display: flex; flex-direction: column; inset-block-start: auto; inset-block-end: 0; inset-inline: 0; margin: 0; inline-size: auto; max-inline-size: none; max-block-size: min(86dvh, 44rem); overflow: hidden; position-area: none; border-block-end: 0; border-inline: 0; border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl); padding-block: var(--sp-16) max(var(--sp-16), env(safe-area-inset-bottom)); padding-inline: var(--sp-20); }
    .h3-home .ov-popover.h3-box:not([data-ov-anchored="js"])::before { display: none; }
    .h3-home .ov-popover.h3-box:not([data-ov-anchored="js"])::backdrop { background: color-mix(in srgb, var(--bg) 56%, transparent); }
    .h3-box:not([data-ov-anchored="js"]) .ov-pop-title { flex: none; }
    .h3-box:not([data-ov-anchored="js"]) .ov-pop-body { flex: 1 1 auto; min-block-size: 0; max-block-size: none; }
    .h3-box .ov-pop-x { inset-block-start: var(--sp-12); }
    .h3-land__stage { padding: var(--sp-8); }
    .h3-land__table { border-spacing: 2px; }
    
    .h3-land__rh, .h3-land__corner { inline-size: 4rem; padding-inline-end: var(--sp-4); white-space: normal; line-height: 1.15; }
    .h3-land__ch { white-space: normal; line-height: 1.15; }
    .h3-land__n { font-size: var(--type-micro); letter-spacing: -0.02em; }
    .h3-kicker { display: none; }
    .h3-lede { font-size: var(--type-body); }
    .h3-find__main { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .h3-search .omni-row { min-block-size: 3.5rem; padding-inline-start: var(--sp-16); }
    .h3-search .h3-search__go { padding-inline: var(--sp-16); }
    .h3-game { inline-size: 10rem; }
    .h3-rail__track { margin-inline: calc(-1 * var(--sp-16)); padding-inline: var(--sp-16); scroll-padding-inline: var(--sp-16); }
    .h3-chips--end { justify-content: flex-start; }
  }
}
@media (pointer: coarse) {
  html[data-ui="v3"] {
    .h3-val { min-block-size: var(--target-min); align-items: center; }
    .h3-box .ov-pop-x { min-inline-size: var(--target-min); min-block-size: var(--target-min); }
    .h3-peers li > a, .h3-cmp__k > a { min-block-size: var(--target-min); }
    .h3-head__all, .h3-game__by { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
  }
}
html[data-ui="v3"] {
  
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="v3"] {
    .h3-tile:hover { box-shadow: var(--elev-panel); }
  }
}
html[data-ui="v3"] {
  
}
@media (max-width: 21.25rem) {
  html[data-ui="v3"] {
    .h3-land__stage { padding: var(--sp-4); }
    .h3-land__rh, .h3-land__corner { inline-size: 3.25rem; padding-inline-end: 2px; }
    
    .h3-land__n { display: inline-block; font-variant-numeric: proportional-nums; letter-spacing: -0.03em; transform: scale(0.84); }
    .h3-land__rh, .h3-land__ch { letter-spacing: -0.03em; }
  }
}
@media (forced-colors: active) {
  html[data-ui="v3"][data-ui-area="home"] main#main::before, html[data-ui="v3"] .h3-find::after, html[data-ui="v3"] .h3-tile::before { display: none; }
  html[data-ui="v3"] {
    .h3-find, .h3-search .omni-row:focus-within { background: Canvas; border-color: CanvasText; }
    .h3-search .omni-row { border-color: ButtonBorder; background: Canvas; }
    .h3-tile, .h3-card, .h3-prov, .h3-rank__row { border-color: CanvasText; background: Canvas; }
    .h3-accent { color: LinkText; }
    .h3-cov__known { fill: Highlight; }
    .h3-cov__unk { stroke: CanvasText; }
    .h3-val { text-decoration-color: LinkText; }
    .h3-land__stage { background: Canvas; border-color: CanvasText; }
    .h3-land__td { background: Canvas; outline: 1px solid CanvasText; outline-offset: -1px; }
    .h3-land__td--u { outline: 1px dashed GrayText; outline-offset: -1px; }
    .h3-land__n, .h3-land__td--d3 .h3-land__n, .h3-land__td--d4 .h3-land__n, .h3-land__td--d5 .h3-land__n { color: CanvasText; }
    .h3-land__ring { border-color: Highlight; box-shadow: none; }
    .h3-seg { fill: CanvasText; stroke: Canvas; }
    .h3-seg--rest, .h3-strip__now { stroke: CanvasText; }
    .h3-strip__b, .h3-strip__0 { fill: CanvasText; opacity: 1; }
    .h3-find__hit:hover, .h3-prov__hit:hover { background: Highlight; opacity: 0.2; }
  }
}

:where(html[data-ui="v3"]) .h3-find__cover .game-dna { display: block; inline-size: 100%; block-size: 100%; }
:where(html[data-ui="v3"]) .h3-game__cover .game-dna { display: block; inline-size: 100%; block-size: 100%; transition: transform var(--motion-card) var(--ease-out-spectral); }
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-ui="v3"]) .h3-game:hover .h3-game__cover .game-dna { transform: scale(1.03); }
}
html[data-ui="v3"] {

& {
  --obs-rule: var(--border-strong);--obs-signal: var(--accent-2);--signal-new: var(--info);--ease-out-spectral: var(--ds-ease-spatial);}
& .logo .brand-lockup { inline-size: 8.25rem;max-inline-size: 132px;block-size: auto;}
& body { background: var(--bg);}
& body::before { content: none;}
& .atmosphere { background: radial-gradient(100% 80% at 0 0, var(--obs-signal), transparent 70%);opacity: var(--atmo-violet);}
& :is(.site-header, .bottom-nav) { background: var(--bg);backdrop-filter: none;-webkit-backdrop-filter: none;}
& .site-header::before { content: none;}
& .primary-nav a::after { background: var(--accent);box-shadow: none;}
& .header-search { background: var(--bg-soft);border-radius: var(--radius-xs);}
& .shell-btn, & .nav-menu > summary { border-radius: var(--radius-xs);}
& .secondary-nav { border-block-end: 1px solid var(--border);}
& :is(.card, .panel, .state-block, .stat, .filter-panel) { border-radius: var(--radius-sm);box-shadow: none;}
& .catalog-filters { background: transparent;border-inline: 0;border-block: 1px solid var(--obs-rule);border-radius: 0;padding-inline: 0;box-shadow: none;}
& :where(form:not(.omnibox, .header-search)) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { border: 1px solid var(--border-control);border-radius: var(--radius-xs);background: var(--bg);min-block-size: 2.75rem;}
& :where(p, dd, td) > a:where(:not([class])) { text-decoration: underline;text-underline-offset: 0.2em;}
& .btn { border-radius: var(--radius-xs);}
& .btn--primary { background: var(--accent);color: var(--accent-ink);box-shadow: none;}
& .btn--primary:hover { background: var(--accent-strong);color: var(--accent-ink);}
& :is(.section-head h2, .page-head h1, .hero h1) { text-wrap: balance;}
& .site-footer { background: var(--bg-raised);border-block-start: 1px solid var(--border-strong);}
& .site-footer::before { background: none;}
& .shell-pref { border-radius: var(--radius-xs);box-shadow: none;}

&[data-ui-area="home"] main#main::before { content: none;}
& .h3-home { gap: var(--sp-48);counter-reset: obs-section;}
& .h3-hero { display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--sp-32);padding-block: var(--sp-16) var(--sp-32);border-block-end: 1px solid var(--obs-rule);}
& .obs-hero-main { display: grid;align-content: start;gap: var(--sp-16);min-inline-size: 0;}
& .h3-kicker { display: flex;align-items: center;gap: var(--sp-8);margin: 0;font-size: var(--type-small);text-transform: uppercase;color: var(--text-muted);font-weight: 500;letter-spacing: var(--track-label);margin-block-end: var(--sp-16);}
& .h3-kicker__mark { display: inline-flex;color: var(--obs-signal);}
& .h3-hero h1 { max-inline-size: 13ch;margin-block-end: var(--sp-16);font-size: var(--type-page-title);line-height: 1.04;font-weight: 560;letter-spacing: -0.045em;text-wrap: initial;}
& .h3-accent { display: block;color: var(--obs-signal);}
& .h3-lede { margin: 0;max-inline-size: 37rem;font-size: var(--type-body);line-height: 1.6;}
& .h3-search .omni-row { position: relative;display: flex;align-items: center;gap: var(--sp-8);padding: var(--sp-8);padding-inline-start: var(--sp-16);border: 1px solid var(--border-control);border-radius: var(--radius-xs);background: var(--bg-raised);backdrop-filter: none;-webkit-backdrop-filter: none;box-shadow: none;min-block-size: 3.75rem;}
& .h3-search .omni-row:focus-within { outline: 2px solid var(--focus);outline-offset: 2px;background: var(--bg-raised);border-color: var(--accent);box-shadow: none;}
& .h3-search input.omni-input[type="search"] { flex: 1 1 auto;min-inline-size: 0;min-block-size: 2.75rem;padding: 0;margin: 0;border: 0;border-radius: 0;background: transparent;color: var(--text);font-family: var(--font-ui);box-shadow: none;outline: none;appearance: none;text-overflow: ellipsis;font-size: var(--type-body);}
& .h3-search .h3-search__go { flex: none;min-block-size: 2.75rem;padding-inline: var(--sp-16);}
& .h3-search .omni-hint { margin: var(--sp-8) 0 0;color: var(--text-faint);font-size: var(--type-micro);max-inline-size: 38rem;}
& .h3-try { column-gap: var(--sp-12);}
& .h3-home .chip { border-radius: var(--radius-xs);background: transparent;}
& .h3-chips { gap: var(--sp-4) var(--sp-8);}

& .obs-atlas { display: none;margin: 0;min-inline-size: 0;color: var(--text-faint);}
& .obs-atlas__drawing { display: block;inline-size: 100%;block-size: auto;overflow: visible;}
& .obs-atlas__grid { stroke: var(--border);stroke-width: 1;}
& .obs-atlas__ticks { stroke: var(--text-faint);stroke-width: 1;}
& .obs-atlas__orbit { stroke: var(--text-faint);stroke-width: 1;stroke-dasharray: 2 6;}
& .obs-atlas__nodes { fill: var(--bg);stroke: var(--obs-signal);stroke-width: 2;}
& .obs-atlas__corners { stroke: var(--text-faint);stroke-width: 1;}
& .obs-atlas figcaption { display: flex;flex-direction: column;gap: var(--sp-4);margin-block-start: var(--sp-12);text-align: center;font-size: var(--type-micro);}
& .obs-atlas figcaption span:first-child { color: var(--text-muted);}

& .obs-journeys { min-inline-size: 0;}
& .obs-section-head { display: flex;flex-wrap: wrap;justify-content: space-between;align-items: end;gap: var(--sp-16) var(--sp-24);margin-block-end: var(--sp-24);}
& .obs-eyebrow { margin: 0 0 var(--sp-8);color: var(--text-faint);font-size: var(--type-micro);letter-spacing: var(--track-label);text-transform: uppercase;}
& .obs-section-head h2 { margin: 0;font-size: var(--type-h2-editorial);font-weight: 550;letter-spacing: var(--track-h2);line-height: var(--leading-h2);}
& .obs-section-head > p { margin: 0;max-inline-size: 25rem;font-size: var(--type-small);color: var(--text-muted);}
& .obs-journeys__list { display: grid;grid-template-columns: minmax(0, 1fr);list-style: none;padding: 0;margin: 0;border-block: 1px solid var(--obs-rule);}
& .obs-journeys__list > li { min-inline-size: 0;margin: 0;}
& .obs-journeys__list > li + li { border-block-start: 1px solid var(--obs-rule);}
& .obs-journeys__list a { display: grid;grid-template-columns: 2rem minmax(0, 1fr);gap: var(--sp-8) var(--sp-16);align-content: start;block-size: 100%;padding: var(--sp-24) var(--sp-16);color: var(--text);text-decoration: none;overflow-wrap: anywhere;transition: background-color var(--motion-micro) var(--ease-out-spectral);}
& .obs-journeys__list a:hover { background: var(--bg-soft);}
& .obs-journeys__list a:focus-visible { position: relative;outline: 2px solid var(--focus);outline-offset: -2px;box-shadow: none;}
& .obs-journey__number { grid-row: span 3;padding-block-start: var(--sp-4);color: var(--obs-signal);font-family: var(--font-mono);font-size: var(--type-micro);font-variant-numeric: tabular-nums;}
& .obs-journeys__list h3 { margin: 0;font-size: var(--type-subhead);font-weight: 550;letter-spacing: var(--track-h3);}
& .obs-journeys__list p { margin: 0;max-inline-size: 34ch;font-size: var(--type-small);color: var(--text-muted);line-height: var(--leading-body);}
& .obs-journey__action { display: flex;justify-content: space-between;gap: var(--sp-16);align-items: center;padding-block-start: var(--sp-16);color: var(--accent);font-size: var(--type-small);font-weight: 550;}
& .obs-journey__action > span { font-size: var(--type-body-l);}
& .obs-principles { display: flex;flex-wrap: wrap;gap: var(--sp-8) var(--sp-24);margin: var(--sp-16) 0 0;padding: 0;list-style: none;color: var(--text-muted);font-size: var(--type-micro);}
& .obs-principles li { display: flex;gap: var(--sp-8);align-items: center;}
& .obs-principles li::before { content: '';inline-size: 0.3rem;block-size: 0.3rem;background: var(--obs-signal);}

& .h3-find { position: relative;display: grid;gap: var(--sp-16);min-inline-size: 0;padding: var(--sp-20);grid-template-columns: minmax(0, 1fr);border: 1px solid var(--obs-rule);border-inline-start: 3px solid var(--obs-signal);border-radius: var(--radius-xs);background: var(--bg-soft);box-shadow: none;}
& .h3-find::after { content: none;}
& .h3-tiles__grid { gap: 0;border-block: 1px solid var(--obs-rule);}
& .h3-tile { position: relative;display: flex;flex-direction: column;gap: var(--sp-4);min-inline-size: 0;margin: 0;background: transparent;border: 0;border-radius: 0;box-shadow: none;padding: var(--sp-24);}
& .h3-tile::before, & .h3-tile::after { content: none;}
& .h3-tile:nth-child(even) { border-inline-start: 1px solid var(--obs-rule);}
& .h3-tile:nth-child(n + 3) { border-block-start: 1px solid var(--obs-rule);}
& :is(.h3-ledger, .h3-coverage, .h3-method, .h3-land) { background: var(--bg-soft);box-shadow: none;border-radius: var(--radius-xs);}
& :is(.h3-game, .h3-prov, .h3-ranked) { box-shadow: none;border-radius: var(--radius-sm);}
& .h3-section > .h3-section__head { padding-block-start: var(--sp-16);border-block-start: 1px solid var(--obs-rule);}
& .h3-home .h3-num { font-weight: 500;letter-spacing: -0.04em;}

@media (min-width: 48rem) {
  & .obs-journeys__list { grid-template-columns: repeat(3, minmax(0, 1fr));}
  & .obs-journeys__list > li + li { border-block-start: 0;border-inline-start: 1px solid var(--obs-rule);}
  & .obs-journeys__list a { grid-template-columns: minmax(0, 1fr);padding: var(--sp-24);}
  & .obs-journey__number { grid-row: auto;margin-block-end: var(--sp-16);}
  & .obs-journey__action { align-self: end;}
}
@media (min-width: 64rem) {
  & .catalog-filters .f-group:has(input[type="search"]) { flex-basis: 20rem;flex-grow: 2;}
  & .h3-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);align-items: center;gap: var(--sp-48);padding-block: var(--sp-16) var(--sp-48);}
  & .obs-atlas { display: block;max-inline-size: 28rem;justify-self: end;}
  & .h3-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr));}
  & .h3-tile + .h3-tile { border-inline-start: 1px solid var(--obs-rule);}
  & .h3-tile:nth-child(n + 3) { border-block-start: 0;}
}
@media (min-width: 64rem) {
  & .primary-nav a { padding-inline: var(--sp-8);}
  & .primary-nav a::after { inset-inline: var(--sp-8);}
}
@media (max-width: 74.9375rem) {
  & .logo .brand-lockup { max-inline-size: 108px;}
}
@media (max-width: 29.9375rem) {
  & .h3-hero { padding-block-start: var(--sp-8);padding-block-end: var(--sp-24);}
  & .obs-hero-main { gap: var(--sp-12);}
  & .h3-kicker { font-size: var(--type-micro);margin-block-end: var(--sp-12);}
  & .h3-hero h1 { font-size: var(--type-page-title);margin-block-end: var(--sp-12);}
  & .h3-search .omni-row { padding-inline-start: var(--sp-12);}
  & .h3-tile { padding: var(--sp-16);}
  & .obs-journeys__list a { padding-inline: var(--sp-8);}
  & .obs-principles { flex-direction: column;}
}
@media (prefers-reduced-motion: reduce) {
  & .obs-journeys__list a { transition: none;}
}
@media (forced-colors: active) {
  & .nav-menu-icon > span { border-block-start: 2px solid ButtonText;}
  & .obs-atlas { color: CanvasText;}
  & .h3-tile { border: 1px solid CanvasText;}
  & .obs-journeys__list, & .obs-journeys__list > li + li { border-color: CanvasText;}
  & .obs-principles li::before { background: CanvasText;}
}

}
html[data-ui="v3"] {
& .obs-catalogue-head { display: grid;grid-template-columns: minmax(0,1fr);gap: var(--sp-24);padding-block: var(--sp-16) var(--sp-32);margin-block-end: var(--sp-24);border-block-end: 1px solid var(--border-strong);}
& .obs-catalogue-head h1 { margin: 0 0 var(--sp-16);}
& .obs-catalogue-head__index { color: var(--text-faint);font: var(--type-micro) var(--font-mono);letter-spacing: var(--track-label);text-transform: uppercase;margin: 0 0 var(--sp-16);}
& .obs-catalogue-head__intro { color: var(--text-muted);max-inline-size: 48rem;margin: 0;}
& .obs-catalogue-head__links { display: flex;flex-wrap: wrap;gap: var(--sp-8) var(--sp-24);margin-block-start: var(--sp-16);}
& .obs-catalogue-head__links a { display: inline-flex;align-items: center;gap: var(--sp-12);min-block-size: 2.75rem;font-size: var(--type-small);text-underline-offset: 0.2em;}
& .obs-catalogue-head__count { display: flex;align-items: baseline;flex-wrap: wrap;column-gap: var(--sp-16);margin: 0;padding: var(--sp-16) 0 0;border-block-start: 1px solid var(--border-strong);}
& .obs-catalogue-head__count dt { color: var(--text-faint);font-size: var(--type-small);}
& .obs-catalogue-head__count dd { order: -1;margin: 0;font-size: var(--type-h2-editorial);line-height: var(--leading-display);font-weight: 500;letter-spacing: var(--track-display);font-variant-numeric: tabular-nums;}
& :is(#catalogue-results,#catalogue-filters) { scroll-margin-block-start: calc(var(--sp-48) * 2);}
& .obs-catalogue-toolbar { display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: var(--sp-12) var(--sp-24);padding-block: var(--sp-16);margin-block-start: var(--sp-16);border-block-start: 1px solid var(--border-strong);}
& .obs-catalogue-toolbar > p, & .obs-catalogue-toolbar .chip-row { margin: 0;}
& .obs-catalogue-toolbar > div { min-inline-size: 0;}
& .obs-catalogue .casino-card .unassessed { max-inline-size: 100%;white-space: normal;overflow-wrap: anywhere;}
& .obs-catalogue input:is([type="search"], [type="text"], [type="number"]):not([aria-invalid="true"]):not(:invalid):not(:disabled):not(:focus) { border-color: var(--border-control);}
@media (min-width: 64rem) {
& .obs-catalogue-head { grid-template-columns: minmax(0,1fr) minmax(10rem,0.2fr);gap: var(--sp-48);}
& .obs-catalogue-head__count { align-content: start;flex-direction: column;border-block-start: 0;border-inline-start: 1px solid var(--border-strong);padding-block: var(--sp-16);padding-inline: var(--sp-24) 0;gap: var(--sp-12);}
& .obs-catalogue-head__count dd { font-size: var(--type-page-title);}
}
@media (max-width: 63.9375rem) {
& .obs-catalogue-head { gap: var(--sp-8);padding-block: 0 var(--sp-16);margin-block-end: var(--sp-16);}
& .obs-catalogue-head :is(h1,.obs-catalogue-head__index) { margin-block-end: var(--sp-8);}
& .obs-catalogue-head__links { margin-block-start: var(--sp-8);}
& .obs-catalogue-head__count { border-block-start: 0;padding-block-start: 0;}
}
@media (forced-colors: active) { & .obs-catalogue-head, & .obs-catalogue-head__count, & .obs-catalogue-toolbar { border-color: CanvasText;} }
}
html[data-ui="v3"][data-ui-area="games"][data-ui-page="entity"] .game-hero-media :is(img, .game-dna) { border-radius: var(--radius-xs); border: 1px solid var(--obs-rule); }
html[data-ui="v3"][data-ui-area="games"][data-ui-page="entity"] {
& .game-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); margin-block: var(--sp-32); padding-block-end: var(--sp-32); border-block-end: 1px solid var(--obs-rule); }
& .game-hero-media { min-inline-size: 0; }
& .game-hero-body { gap: var(--sp-16); padding-inline-start: var(--sp-20); border-inline-start: 2px solid var(--obs-signal); }
& .game-hero-meta { flex-direction: column; align-items: start; gap: var(--sp-12); }
& .game-hero-rating { padding-block-start: var(--sp-16); border-block-start: 1px solid var(--obs-rule); }
& .game-hero-actions :is(.chip, .cta) { border-radius: var(--radius-xs); min-block-size: 2.75rem; }
& #game-facts .tab { border-radius: 0; border-width: 0 0 2px; border-color: transparent; background: transparent; color: var(--text-muted); }
& #game-facts .tabs[data-enhanced] .tab[aria-selected="true"] { background: transparent; border-color: var(--obs-signal); color: var(--text); }
& #game-facts .key-metrics { padding: var(--sp-24) 0; background: transparent; border-inline: 0; border-block: 1px solid var(--obs-rule); border-radius: 0; }
& .key-metrics .detail-grid { gap: 0; }
& .key-metrics .kv { padding: var(--sp-16); border: 0; border-inline-start: 1px solid var(--obs-rule); border-radius: 0; background: transparent; }
& .key-metrics .kv dd { font-size: var(--type-subhead); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
& #game-facts .key-metrics .note { border: 0; border-radius: 0; background: transparent; padding: 0; margin-block: var(--sp-8); }
& .key-metrics .metric-provenance { padding-block-start: var(--sp-12); margin-block-start: var(--sp-16); border-block-start: 1px solid var(--obs-rule); }
@media (min-width: 48rem) {
  & .game-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-32); align-items: center; }
  & .game-hero-body { padding: var(--sp-24); }
}
@media (max-width: 29.9375rem) {
  & .game-hero { margin-block: var(--sp-24); padding-block-end: var(--sp-24); }
}
@media (forced-colors: active) {
  & .game-hero-body, & #game-facts .tabs[data-enhanced] .tab[aria-selected="true"] { border-color: Highlight; }
  & .key-metrics .kv, & #game-facts .key-metrics { border-color: CanvasText; }
}
}
@media (forced-colors: active) {
html[data-ui="v3"][data-ui-area="games"][data-ui-page="entity"] .game-hero-media :is(img, .game-dna) { border-color: CanvasText; }
}