/* ==========================================================================
   Random Picker System — design system + app styles
   Tiers: primitives -> semantic tokens (light/dark) -> component tokens.
   User customisation (colour, radius, density, motion, font, background, card
   style, text size) only changes tokens / data-* attributes on <html>.
   ========================================================================== */
@layer tokens, base, layout, components, app, overlays, content, utilities;

/* ---------------------------------------------------------------- TOKENS */
@layer tokens {
  :root {
    /* primitives */
    --teal: #0b7a75;  --gold: #f2b632;  --ink-900: #0f1b2d;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
    /* type scale (1.25) */
    --fs-2xs: .74rem; --fs-xs: .8rem; --fs-sm: .875rem; --fs-ui: .95rem; --fs-md: 1rem; --fs-lead: 1.1rem; --fs-lg: 1.25rem; --fs-xl: 1.563rem; --fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.441rem); --fs-3xl: clamp(2.1rem, 1.3rem + 3.2vw, 3.052rem);
    --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --scale: 1;
    /* shape (scaled by data-radius) */
    --r-scale: 1; --r-sm: calc(6px * var(--r-scale)); --r-md: calc(10px * var(--r-scale)); --r-lg: calc(16px * var(--r-scale)); --r-pill: 999px;
    /* density */
    --row-pad: .7rem; --ctl-h: 2.75rem;
    /* motion */
    --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms;
    --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
    /* layout */
    --wrap: 76rem; --header-h: 4rem;
    /* z */
    --z-header: 40; --z-dock: 45; --z-overlay: 80; --z-toast: 120;

    /* semantic: light */
    color-scheme: light;
    --bg: #edf1f5; --surface: #fff; --surface-2: #f5f7fa; --surface-3: #e6ecf2;
    --ink: #0f1b2d; --ink-2: #44526a; --ink-3: #5b6980;
    --line: #d5dce6; --line-strong: #7b8798;
    --primary: #0b7a75; --primary-strong: #0b6f6a; --on-primary: #fff;
    --accent: #f2b632; --on-accent: #1a1300;
    --danger: #b42318; --success: #17784a; --warn: #8a5a00; --info: #1d5fb8;
    --stage-bg: #dfe7ee; --paper: #fff; --paper-ink: #0f1b2d; --led: #f2b632;
    --shadow-1: 0 1px 2px rgb(15 27 45 / .08);
    --shadow-2: 0 6px 18px -6px rgb(15 27 45 / .18), 0 2px 4px rgb(15 27 45 / .06);
    --shadow-3: 0 24px 48px -16px rgb(15 27 45 / .32), 0 6px 12px rgb(15 27 45 / .08);
    --scrim: rgb(10 18 32 / .55);
    --focus: #1d4ed8; --focus-halo: #fff;
    --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
    --primary-hover: color-mix(in srgb, var(--primary) 88%, #000);
    --accent-soft: color-mix(in srgb, var(--accent) 24%, var(--surface));
  }
  :root[data-theme="dark"] { color-scheme: dark; --_dark: 1;
    --bg: #0a1220; --surface: #121c2e; --surface-2: #182438; --surface-3: #1f2e46;
    --ink: #eaf0f8; --ink-2: #a9b6c9; --ink-3: #8c9bb2;
    --line: #26364f; --line-strong: #7487a2;
    --primary-strong: #54d4c8;
    --danger: #ff8d82; --success: #5fd49a; --warn: #f0c060; --info: #8db8ff;
    --stage-bg: #070d18; --paper: #f4f6f8; --paper-ink: #0f1b2d;
    --shadow-2: 0 8px 22px -8px rgb(0 0 0 / .6); --shadow-3: 0 28px 56px -16px rgb(0 0 0 / .7);
    --scrim: rgb(2 6 14 / .7);
    --focus: #8db8ff; --focus-halo: #0a1220;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] { color-scheme: dark;
      --bg: #0a1220; --surface: #121c2e; --surface-2: #182438; --surface-3: #1f2e46;
      --ink: #eaf0f8; --ink-2: #a9b6c9; --ink-3: #8c9bb2;
      --line: #26364f; --line-strong: #7487a2;
      --primary-strong: #54d4c8;
      --danger: #ff8d82; --success: #5fd49a; --warn: #f0c060; --info: #8db8ff;
      --stage-bg: #070d18; --paper: #f4f6f8; --paper-ink: #0f1b2d;
      --shadow-2: 0 8px 22px -8px rgb(0 0 0 / .6); --shadow-3: 0 28px 56px -16px rgb(0 0 0 / .7);
      --scrim: rgb(2 6 14 / .7);
      --focus: #8db8ff; --focus-halo: #0a1220;
    }
  }
  /* user customisation hooks (set from JS) */
  :root[data-radius="sharp"] { --r-scale: .25; }
  :root[data-radius="round"] { --r-scale: 1.6; }
  :root[data-density="compact"] { --row-pad: .4rem; --ctl-h: 2.4rem; }
  :root[data-size="s"] { --scale: .92; } :root[data-size="l"] { --scale: 1.12; } :root[data-size="xl"] { --scale: 1.25; }
  :root[data-font="system"]   { --font-display: system-ui, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, "Segoe UI", Roboto, sans-serif; }
  :root[data-font="poppins"]  { --font-display: "Poppins", system-ui, sans-serif; --font-body: "Poppins", system-ui, sans-serif; }
  :root[data-font="roboto"]   { --font-display: "Roboto", system-ui, sans-serif; --font-body: "Roboto", system-ui, sans-serif; }
  :root[data-font="opensans"] { --font-display: "Open Sans", system-ui, sans-serif; --font-body: "Open Sans", system-ui, sans-serif; }
  :root[data-font="montserrat"] { --font-display: "Montserrat", system-ui, sans-serif; --font-body: "Montserrat", system-ui, sans-serif; }
  :root[data-font="playfair"] { --font-display: "Playfair Display", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; }
  :root[data-font="atkinson"] { --font-display: "Atkinson Hyperlegible", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; }
  :root[data-motion="reduced"] { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
  @media (prefers-reduced-motion: reduce) { :root[data-motion="auto"] { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; } }
  /* Graceful fallback for browsers without color-mix() (before 2023): static values for the default palette */
  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root { --primary-soft: #e1eeed; --primary-hover: #096a66; --accent-soft: #fbeed0; }
    :root[data-theme="dark"] { --primary-soft: #14323a; --accent-soft: #3a3320; }
  }
}

/* ------------------------------------------------------------------ BASE */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); font-size: calc(100% * var(--scale)); overflow-x: clip; }
  body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
  h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; font-weight: 700; }
  p { margin: 0; text-wrap: pretty; }
  a { color: var(--primary-strong); text-underline-offset: .18em; text-decoration-thickness: .08em; }
  a:hover { text-decoration-thickness: .14em; }
  img, svg { max-width: 100%; }
  ul, ol { margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
  ::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
  kbd { font: 600 var(--fs-2xs)/1 var(--font-body); padding: .22rem .4rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }

  /* One focus language everywhere: real outline (survives forced-colors) + halo for contrast on any surface */
  :focus { outline: none; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: var(--r-sm); }
  @media (forced-colors: active) { :focus-visible { outline-color: Highlight; box-shadow: none; } .btn, .tab, .chip { border: 1px solid ButtonText; } }

  .i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; left: .75rem; top: -4rem; z-index: 200; background: var(--ink); color: var(--bg); padding: .7rem 1rem; border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--t-fast); }
  .skip-link:focus { top: .75rem; }
  /* thin themed scrollbars */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; }
}

/* ---------------------------------------------------------------- LAYOUT */
@layer layout {
  .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
  .wrap--narrow { width: min(100% - 2rem, 46rem); margin-inline: auto; }

  .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
  .header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--space-4); }
  .brand { display: inline-flex; align-items: center; gap: .6rem; font: 750 var(--fs-lg)/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
  .brand__mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: calc(var(--r-md) * .9); background: var(--primary); color: var(--on-primary); transform: rotate(-6deg); }
  .brand__mark .i { width: 1.35rem; height: 1.35rem; }
  .site-nav { display: flex; gap: .15rem; margin-left: var(--space-4); }
  .site-nav a { padding: .5rem .8rem; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: var(--fs-sm); }
  .site-nav a:hover { background: var(--surface-3); color: var(--ink); }
  .site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--primary); }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

  .crumbs { width: min(100% - 2rem, var(--wrap)); margin: var(--space-4) auto 0; font-size: var(--fs-sm); color: var(--ink-2); }
  .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ink-3); }
  .crumbs a { color: var(--ink-2); }

  .site-footer { margin-top: var(--space-8); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-7) var(--space-5); }
  .footer-brand p { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-sm); max-width: 28ch; }
  .footer-h { font: 700 var(--fs-ui)/1 var(--font-display); margin-bottom: var(--space-3); color: var(--ink); }
  .site-footer ul { list-style: none; display: grid; gap: .1rem; }
  .site-footer li a, .link-btn { display: inline-block; padding: .3rem 0; min-height: 1.75rem; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
  .site-footer li a:hover, .link-btn:hover { color: var(--primary-strong); text-decoration: underline; }
  .link-btn { background: none; border: 0; padding: .3rem 0; cursor: pointer; text-align: left; }
  .footer-base { border-top: 1px solid var(--line); padding-block: var(--space-4); color: var(--ink-3); font-size: var(--fs-xs); }

  @media (max-width: 62rem) {
    .site-nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 auto 0; flex-direction: column; margin: 0; padding: .75rem 1rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-3); transform: translateY(-.75rem); opacity: 0; visibility: hidden; transition: transform var(--t-med) var(--ease), opacity var(--t-med), visibility 0s var(--t-med); }
    .site-nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
    .site-nav a { padding: .85rem 1rem; font-size: var(--fs-md); min-height: 2.75rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
  }
  .brand { white-space: nowrap; }
  @media (max-width: 40rem) { .header-inner { gap: .4rem; } .brand { font-size: 1.02rem; gap: .5rem; } .hide-sm { display: none !important; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
}

/* ------------------------------------------------------------ COMPONENTS */
@layer components {
  :root { --on-danger: #fff; }
  :root[data-theme="dark"] { --on-danger: #2a0a07; }
  @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --on-danger: #2a0a07; } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--ctl-h); padding: 0 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-ui); line-height: 1.1; text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
  .btn:hover { background: var(--surface-3); }
  .btn:active { transform: translateY(1px) scale(.985); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
  .btn--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), var(--shadow-1); }
  .btn--primary:hover { background: var(--primary-hover); }
  .btn--soft { background: var(--primary-soft); color: var(--primary-strong); border-color: transparent; }
  .btn--soft:hover { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
  .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
  .btn--ghost:hover { background: var(--surface-3); color: var(--ink); }
  .btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, var(--line-strong)); }
  .btn--danger-solid { background: var(--danger); color: var(--on-danger); border-color: transparent; }
  .btn--danger-solid:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }
  .btn--icon { width: var(--ctl-h); padding: 0; border-color: transparent; background: transparent; color: var(--ink-2); }
  .btn--icon:hover { background: var(--surface-3); color: var(--ink); }
  .btn--icon.is-on { color: var(--primary-strong); background: var(--primary-soft); }
  .btn--sm { min-height: 2.35rem; padding: 0 .85rem; font-size: var(--fs-sm); }
  .btn--xl { min-height: 3.9rem; padding: 0 2rem; font-size: var(--fs-lg); border-radius: calc(var(--r-md) * 1.35); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
  .btn--block { width: 100%; }
  .btn kbd { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }

  /* forms */
  .field { display: grid; gap: .4rem; min-width: 0; }
  .field > .lbl, .lbl { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
  .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); }
  .input, .select, .textarea { width: 100%; min-height: var(--ctl-h); padding: .55rem .85rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 52%, calc(100% - .8rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat; }
  .textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
  .input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
  .help { color: var(--ink-2); font-size: var(--fs-sm); }
  .form-error { display: flex; gap: .45rem; align-items: flex-start; color: var(--danger); font-size: var(--fs-sm); font-weight: 550; }
  .form-error:empty { display: none; }

  .switch { display: flex; align-items: center; gap: .85rem; min-height: 2.75rem; cursor: pointer; }
  .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .switch__track { flex: none; width: 2.9rem; height: 1.65rem; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line-strong); position: relative; transition: background-color var(--t-med), border-color var(--t-med); }
  .switch__track::after { content: ""; position: absolute; top: 50%; left: .2rem; width: 1.15rem; height: 1.15rem; margin-top: -.575rem; border-radius: 50%; background: var(--ink-2); transition: transform var(--t-med) var(--ease-spring), background-color var(--t-med); }
  .switch input:checked + .switch__track { background: var(--primary); border-color: var(--primary); }
  .switch input:checked + .switch__track::after { transform: translateX(1.2rem); background: var(--on-primary); }
  .switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
  .switch__text { display: grid; line-height: 1.3; font-weight: 600; font-size: var(--fs-ui); } .switch__text small { font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); }

  .range { display: grid; gap: .35rem; }
  .range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .range output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primary-strong); font-size: var(--fs-sm); }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.75rem; background: transparent; margin: 0; }
  input[type="range"]::-webkit-slider-runnable-track { height: .45rem; border-radius: var(--r-pill); background: linear-gradient(var(--primary), var(--primary)) 0 / var(--fill, 50%) 100% no-repeat, var(--surface-3); border: 1px solid var(--line-strong); }
  input[type="range"]::-moz-range-track { height: .45rem; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line-strong); }
  input[type="range"]::-moz-range-progress { height: .45rem; border-radius: var(--r-pill); background: var(--primary); }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: calc(-.75rem + .22rem); border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-shadow: var(--shadow-2); transition: transform var(--t-fast) var(--ease-spring); }
  input[type="range"]::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-shadow: var(--shadow-2); }
  input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

  .seg { display: flex; flex-wrap: wrap; gap: .35rem; padding: .25rem; border-radius: calc(var(--r-md) + 4px); background: var(--surface-3); }
  .seg label { flex: 1 1 auto; position: relative; }
  .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .seg span { display: grid; place-items: center; min-height: 2.35rem; padding: 0 .85rem; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
  .seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
  .seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .6rem; }
  .swatch { display: grid; gap: .4rem; justify-items: center; padding: .6rem .4rem .5rem; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
  .swatch:hover { transform: translateY(-2px); border-color: var(--line-strong); }
  .swatch[aria-pressed="true"] { border-color: var(--primary); color: var(--ink); background: var(--primary-soft); }
  .swatch__dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55), 0 0 0 1px rgb(0 0 0 / .18); }
  .color-field { display: flex; align-items: center; gap: .7rem; }
  .color-field input[type="color"] { width: 3rem; height: var(--ctl-h); padding: .2rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; }
  .color-field code { font: 600 var(--fs-sm) var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-2); }

  .tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
  .tab { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 .95rem; background: none; border: 0; color: var(--ink-2); font-weight: 650; font-size: var(--fs-ui); white-space: nowrap; border-radius: var(--r-md) var(--r-md) 0 0; transition: color var(--t-fast), background-color var(--t-fast); }
  .tab:hover { color: var(--ink); background: var(--surface-3); }
  .tab[aria-selected="true"] { color: var(--ink); }
  .tab::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform var(--t-med) var(--ease); }
  .tab[aria-selected="true"]::after { transform: scaleX(1); }
  .count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.4rem; padding: 0 .4rem; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: 700 var(--fs-2xs)/1 var(--font-body); font-variant-numeric: tabular-nums; }
  .tab[aria-selected="true"] .count { background: var(--primary); color: var(--on-primary); }
  .count.bump { animation: bump var(--t-slow) var(--ease-spring); }

  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
  .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: 650 var(--fs-2xs)/1.2 var(--font-body); }
  .badge--accent { background: var(--accent-soft); color: var(--ink); }
  .badge--primary { background: var(--primary-soft); color: var(--primary-strong); }
  .progress { height: .4rem; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--primary); border-radius: inherit; transition: width var(--t-med) var(--ease); }
  .progress.is-busy > i { width: 40%; animation: indeterminate 1.1s var(--ease) infinite; }

  /* lists of entrants / winners */
  .entries { list-style: none; display: grid; }
  .entry { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; align-items: center; padding: var(--row-pad) .5rem; border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 3.6rem; animation: row-in var(--t-med) var(--ease) both; }
  .entry:last-child { border-bottom: 0; }
  .entry:hover { background: var(--surface-2); }
  .entry__n { justify-self: center; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font: 700 var(--fs-2xs)/1 var(--font-body); font-variant-numeric: tabular-nums; }
  .entry--winner .entry__n { background: var(--accent); color: var(--on-accent); }
  .entry__name { font-weight: 650; overflow-wrap: anywhere; }
  .entry__meta { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
  .entry__meta b { font-weight: 600; color: var(--ink-3); }
  .entry__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
  .entry__actions { display: flex; gap: .1rem; }
  .entry__actions .btn--icon { width: 2.4rem; min-height: 2.4rem; }
  @media (hover: hover) { .entry__actions { opacity: 0; transition: opacity var(--t-fast); } .entry:hover .entry__actions, .entry:focus-within .entry__actions { opacity: 1; } }
  .more-row { display: flex; justify-content: center; padding: var(--space-3); }

  .empty { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: var(--space-6) var(--space-4); color: var(--ink-2); }
  .empty__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); }
  .empty__icon .i { width: 1.6rem; height: 1.6rem; }
  .empty h3 { font-size: var(--fs-lead); color: var(--ink); }
  .empty p { max-width: 34ch; font-size: var(--fs-sm); }
  .empty .btn { margin-top: .4rem; }
}

/* ------------------------------------------------------------------- APP */
@layer app {
  body { isolation: isolate; }
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--bg-i, .6); }
  :root[data-bg="circles"] body::before, :root:not([data-bg]) body::before { background:
    radial-gradient(42rem 42rem at 92% -12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 62%),
    radial-gradient(34rem 34rem at -8% 38%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    radial-gradient(30rem 30rem at 72% 112%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%); }
  :root[data-bg="aurora"] body::before { background:
    radial-gradient(40rem 30rem at 15% 10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 62%),
    radial-gradient(36rem 30rem at 85% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 62%),
    radial-gradient(40rem 30rem at 50% 105%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%); background-size: 140% 140%; animation: drift 22s ease-in-out infinite alternate; }
  :root[data-bg="dots"] body::before { background: radial-gradient(color-mix(in srgb, var(--ink) 30%, transparent) 1.2px, transparent 1.7px) 0 0 / 22px 22px; mask-image: linear-gradient(#000, transparent 85%); -webkit-mask-image: linear-gradient(#000, transparent 85%); }
  :root[data-bg="waves"] body::before { background: repeating-radial-gradient(ellipse 70rem 20rem at 50% 125%, color-mix(in srgb, var(--primary) 22%, transparent) 0 2px, transparent 2px 26px); }
  :root[data-bg="grid"] body::before { background: linear-gradient(var(--line-strong) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, var(--line-strong) 1px, transparent 1px) 0 0 / 34px 34px; mask-image: radial-gradient(ellipse at 50% 0, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0, #000, transparent 70%); opacity: calc(var(--bg-i, .6) * .5); }
  :root[data-bg="none"] body::before { display: none; }

  .hero { padding-block: var(--space-4) var(--space-3); }
  .hero h1 { font-size: clamp(1.55rem, 1rem + 1.7vw, 2.2rem); max-width: none; }
  .hero p { margin-top: var(--space-1); color: var(--ink-2); max-width: 90ch; font-size: var(--fs-md); }
  .trust { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 550; list-style: none; }
  .trust li { display: inline-flex; gap: .4rem; align-items: center; } .trust .i { color: var(--primary-strong); }

  .app__grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

  /* ---- STAGE ---- */
  .stage { position: relative; display: grid; gap: var(--space-5); padding: var(--space-5); border-radius: calc(var(--r-lg) * 1.25); background: var(--stage-bg); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
  .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--ink) 4%, transparent) 46px 47px); }
  .stage__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.4rem; }
  .stage__event { font: 700 var(--fs-lead)/1.2 var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stage__event small { display: block; font: 500 var(--fs-xs)/1.2 var(--font-body); color: var(--ink-2); margin-top: .15rem; }
  .stage__tools { display: flex; gap: .2rem; }

  /* ---- SLOT MACHINE ---- */
  .machine { --m-body: color-mix(in srgb, var(--primary) 62%, #05080d); --m-body-2: color-mix(in srgb, var(--primary) 36%, #05080d);
    --brass-1: color-mix(in srgb, var(--accent) 55%, #fff); --brass-2: var(--accent); --brass-3: color-mix(in srgb, var(--accent) 55%, #000);
    --payline: #ff4d3d; --lcd-bg: #070a10; --plate-fg: #fff; --plate-fg-2: rgb(255 255 255 / .72); --bulb: #ffe9a8;
    --card-w: clamp(8.4rem, 26cqw, 13rem); --card-h: 6.6rem; --card-hv: 4.2rem; --card-name-max: 1.7rem;
    position: relative; container-type: inline-size; padding: .85rem .85rem 1.1rem; border-radius: calc(var(--r-lg) * 1.35); color: var(--plate-fg);
    background: linear-gradient(165deg, var(--m-body), var(--m-body-2));
    box-shadow: 0 22px 34px -16px rgb(0 0 0 / .6), 0 0 0 3px var(--brass-3), 0 0 0 5px var(--brass-1), inset 0 2px 0 rgb(255 255 255 / .2), inset 0 -10px 24px rgb(0 0 0 / .35); }
  .machine__marquee { position: relative; height: 1.1rem; margin: 0 .4rem .7rem; border-radius: var(--r-pill); background: rgb(0 0 0 / .45); box-shadow: inset 0 1px 3px #000; overflow: hidden; }
  .machine__marquee::before, .machine__marquee::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--bulb) 0 .2rem, transparent .3rem) 0 50% / 1.5rem 100% repeat-x; filter: drop-shadow(0 0 3px var(--accent)); }
  .machine__marquee::after { background-position: .75rem 50%; opacity: .3; }
  .machine[data-state="drawing"] .machine__marquee::before { animation: bulb-a 520ms steps(1) infinite; }
  .machine[data-state="drawing"] .machine__marquee::after { animation: bulb-b 520ms steps(1) infinite; }
  .machine[data-state="revealed"] .machine__marquee::after { opacity: 1; animation: bulb-win 900ms ease-in-out 3; }
  .machine__cabinet { position: relative; }
  .reel-frame { padding: .5rem; border-radius: calc(var(--r-lg) * 1.1); background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 45%, var(--brass-3)); box-shadow: 0 6px 14px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .6); }
  .reel-window { position: relative; overflow: hidden; container-type: inline-size; height: calc(var(--card-h) + 1.6rem); border-radius: var(--r-lg); background: radial-gradient(120% 150% at 50% 50%, #1c2840, #070a10 80%); box-shadow: inset 0 6px 16px #000, inset 0 -3px 10px rgb(0 0 0 / .6); }
  .reel-strip { position: absolute; inset: 0; will-change: filter; }
  .reel-card { position: absolute; left: 50%; top: 50%; width: var(--card-w); height: var(--card-h); margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2); padding: .35rem; container-type: inline-size; will-change: transform, opacity; }
  .reel-card__face { height: 100%; display: grid; place-items: center; text-align: center; border-radius: var(--r-md); color: var(--paper-ink); background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 84%, #8a96a8)); border: 2px solid color-mix(in srgb, var(--accent) 45%, #fff); box-shadow: 0 5px 12px rgb(0 0 0 / .45), inset 0 -3px 0 rgb(0 0 0 / .08); }
  .reel-card__name { padding: 0 .45rem; max-width: 100%; font: 800 clamp(var(--fs-ui), 14cqw, var(--card-name-max))/1.12 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .reel-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--card-w); margin-left: calc(var(--card-w) / -2); pointer-events: none; border: 3px solid var(--payline); border-radius: var(--r-md); box-shadow: 0 0 0 1px rgb(0 0 0 / .55), 0 0 18px color-mix(in srgb, var(--payline) 65%, transparent), inset 0 0 18px color-mix(in srgb, var(--payline) 22%, transparent); }
  .reel-pointer::before, .reel-pointer::after { content: ""; position: absolute; left: 50%; margin-left: -.6rem; border: .6rem solid transparent; }
  .reel-pointer::before { top: -.2rem; border-top-color: var(--payline); border-bottom-width: 0; }
  .reel-pointer::after { bottom: -.2rem; border-bottom-color: var(--payline); border-top-width: 0; }
  .reel-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent 30%), linear-gradient(90deg, #070a10, transparent 20%, transparent 80%, #070a10); }
  /* vertical reel */
  .machine[data-dir="vertical"] .reel-window { height: calc(var(--card-hv) * 3.15); }
  .machine[data-dir="vertical"] .reel-card { width: calc(100cqw - 1.4rem); height: var(--card-hv); margin: calc(var(--card-hv) / -2) 0 0 calc((100cqw - 1.4rem) / -2); }
  .machine[data-dir="vertical"] .reel-card__name { font-size: clamp(var(--fs-lead), 6cqw, calc(var(--card-name-max) * 1.15)); -webkit-line-clamp: 1; }
  .machine[data-dir="vertical"] .reel-pointer { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: var(--card-hv); margin: calc(var(--card-hv) / -2) .5rem 0; }
  .machine[data-dir="vertical"] .reel-pointer::before, .machine[data-dir="vertical"] .reel-pointer::after { left: auto; top: 50%; margin: -.6rem 0 0; border-color: transparent; }
  .machine[data-dir="vertical"] .reel-pointer::before { left: -.25rem; border-left-color: var(--payline); border-right-width: 0; border-top-width: .6rem; border-bottom-width: .6rem; }
  .machine[data-dir="vertical"] .reel-pointer::after { right: -.25rem; bottom: auto; border-right-color: var(--payline); border-left-width: 0; border-top-width: .6rem; border-bottom-width: .6rem; }
  .machine[data-dir="vertical"] .reel-glass { background: linear-gradient(180deg, #070a10, transparent 24%, transparent 76%, #070a10), linear-gradient(90deg, rgb(255 255 255 / .06), transparent 30%); }
  /* lever */
  .lever { position: absolute; right: -1.55rem; top: 14%; width: 1.7rem; height: 7rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border: 0; background: none; padding: 0; cursor: pointer; z-index: 2; }
  .lever__ball { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7d, #d1281b 55%, #7a0f08); box-shadow: 0 3px 6px rgb(0 0 0 / .5); flex: none; }
  .lever__stick { width: .5rem; height: 4.2rem; flex: none; border-radius: 1rem; background: linear-gradient(90deg, #8d97a6, #fff 45%, #6f7a8a); box-shadow: 0 2px 4px rgb(0 0 0 / .5); }
  .lever::after { content: ""; width: 1.7rem; height: .6rem; border-radius: .3rem; margin-top: -.1rem; background: linear-gradient(var(--brass-1), var(--brass-3)); box-shadow: 0 2px 4px rgb(0 0 0 / .5); }
  .machine[data-state="drawing"] .lever__stick { animation: lever-pull 1000ms var(--ease) both; }
  /* plate (LED readout) */
  .machine__plate { display: grid; gap: .25rem; margin: .8rem .3rem 0; padding: .65rem 1rem .8rem; border-radius: var(--r-md); background: var(--lcd-bg); container-type: inline-size; box-shadow: inset 0 2px 8px #000, 0 0 0 2px color-mix(in srgb, var(--brass-3) 80%, #000); }
  .plate__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
  .lcd { font: 700 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--led); text-shadow: 0 0 8px color-mix(in srgb, var(--led) 65%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .plate__label { display: flex; align-items: center; gap: .45rem; color: var(--plate-fg-2); font-size: var(--fs-sm); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .plate__label .i { color: var(--led); flex: none; }
  .plate__name { min-height: 1.15em; font: 800 clamp(var(--fs-xl), 9cqw, var(--name-max, 3rem))/1.1 var(--font-display); letter-spacing: -.025em; color: var(--plate-fg); overflow-wrap: anywhere; text-wrap: balance; }
  .plate__name.is-placeholder { color: var(--plate-fg-2); font-weight: 700; font-size: clamp(var(--fs-lg), 5.5cqw, 2rem); }
  .plate__details { min-height: 1.3em; color: color-mix(in srgb, var(--led) 78%, #fff); font-size: var(--fs-sm); overflow-wrap: anywhere; }
  .plate__prize { font: 650 var(--fs-2xs)/1.25 var(--font-body); color: var(--plate-fg-2); overflow-wrap: anywhere; text-align: right; }
  .spin-progress { position: absolute; left: 1.3rem; right: 1.3rem; bottom: .4rem; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .16); overflow: hidden; opacity: 0; transition: opacity var(--t-med); }
  .spin-progress i { display: block; height: 100%; width: var(--sp, 0%); background: var(--accent); }
  .machine[data-state="drawing"] .spin-progress { opacity: 1; }
  /* states */
  .machine[data-state="drawing"] .plate__name { opacity: .7; }
  .machine[data-state="revealed"] .reel-pointer { border-color: var(--accent); animation: pointer-win 900ms ease-in-out 3; }
  .machine[data-state="revealed"] .reel-card:not(.is-winner) .reel-card__face { filter: saturate(.3) brightness(.62); }
  .reel-card.is-winner .reel-card__face { box-shadow: 0 0 0 3px var(--accent), 0 0 28px color-mix(in srgb, var(--accent) 75%, transparent), 0 5px 12px rgb(0 0 0 / .45); animation: winner-pop 650ms var(--ease-spring) both; }
  .machine[data-state="revealed"] .plate__name { animation: nm-pop 620ms var(--ease-spring) both; }
  .machine[data-state="revealed"] .plate__serial { animation: bump var(--t-slow) var(--ease-spring) 120ms both; }
  /* machine styles (user setting) */
  :root[data-card="neon"] .machine { --m-body: #070a14; --m-body-2: #0b1020; --brass-1: var(--accent); --brass-2: var(--primary); --brass-3: #000; --payline: var(--accent);
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px #000, 0 0 30px color-mix(in srgb, var(--primary) 70%, transparent), 0 0 70px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 0 40px color-mix(in srgb, var(--primary) 22%, transparent); }
  :root[data-card="neon"] .reel-frame { background: #000; box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent); }
  :root[data-card="neon"] .reel-card__face { border-color: var(--primary); box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 0 0 1px #fff; }
  :root[data-card="minimal"] .machine, :root[data-card="glass"] .machine { --plate-fg: var(--ink); --plate-fg-2: var(--ink-2); --lcd-bg: var(--surface-2); --led: var(--primary-strong); --payline: var(--primary); }
  :root[data-card="minimal"] .machine { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); }
  :root[data-card="minimal"] .machine__marquee, :root[data-card="minimal"] .lever, :root[data-card="glass"] .machine__marquee { display: none; }
  :root[data-card="minimal"] .reel-frame { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
  :root[data-card="minimal"] .reel-window { background: var(--surface-2); box-shadow: inset 0 1px 4px rgb(15 27 45 / .15); }
  :root[data-card="minimal"] .reel-glass { background: linear-gradient(90deg, var(--surface-2), transparent 18%, transparent 82%, var(--surface-2)); }
  :root[data-card="minimal"] .machine[data-dir="vertical"] .reel-glass { background: linear-gradient(180deg, var(--surface-2), transparent 24%, transparent 76%, var(--surface-2)); }
  :root[data-card="minimal"] .machine__plate { box-shadow: inset 0 0 0 1px var(--line); } :root[data-card="minimal"] .reel-card__face { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
  :root[data-card="glass"] .machine { background: color-mix(in srgb, var(--surface) 42%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), var(--shadow-3), inset 0 1px 0 rgb(255 255 255 / .5); }
  :root[data-card="glass"] .reel-frame { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent); }
  :root[data-card="glass"] .machine__plate { background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); }

  /* controls */
  .controls { display: grid; gap: var(--space-3); }
  .draw-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .btn--draw { width: 100%; position: relative; overflow: hidden; }
  .btn--draw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 0s; }
  .btn--draw:hover:not([disabled])::after { background-position: -30% 0; transition: background-position 700ms var(--ease); }
  .btn--draw.is-busy .i { animation: spin 900ms linear infinite; }
  .controls__opts { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); align-items: end; }
  .controls__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .controls__row .btn { flex: 1 1 8rem; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); list-style: none; }
  .stats div { text-align: center; padding: .6rem .4rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line); }
  .stats dt { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; } .stats dd { margin: 0; font: 800 var(--fs-xl)/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
  .stats dd.bump { animation: bump var(--t-slow) var(--ease-spring); }
  .start { display: grid; gap: var(--space-2); }
  .start__title { font: 700 var(--fs-lead) var(--font-display); text-align: center; margin-bottom: .1rem; }
  .start .btn--primary { min-height: 3.4rem; font-size: var(--fs-lead); }
  .saved-note { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-2); }
  .saved-note .i { color: var(--success); }

  /* ---- LISTS ---- */
  .lists { display: flex; flex-direction: column; position: sticky; top: calc(var(--header-h) + .75rem); max-height: calc(100dvh - var(--header-h) - 1.5rem); min-height: 22rem; overflow: hidden; }
  .lists__tools { display: flex; align-items: center; gap: .4rem; padding: .7rem .75rem; border-bottom: 1px solid var(--line); }
  .search { position: relative; flex: 1; min-width: 0; }
  .search .i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
  .search .input { padding-left: 2.4rem; }
  .lists__body { overflow: auto; flex: 1; overscroll-behavior: contain; }
  .tabpanel[hidden] { display: none; }
  .lists__foot { display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); align-items: center; }

  /* ---- MOBILE DOCK ---- */
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); display: none; align-items: center; gap: var(--space-3); padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgb(15 27 45 / .35); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
  .dock.is-visible { transform: none; }
  .dock__stat { font: 800 var(--fs-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; } .dock__stat small { display: block; font: 600 var(--fs-2xs)/1.2 var(--font-body); color: var(--ink-2); }
  .dock .btn { flex: 1; }

  /* ---- STAGE MODE (projector view) ---- */
  body.stage-mode, body.has-overlay { overflow: hidden; }
  body.stage-mode .stage { position: fixed; inset: 0; z-index: var(--z-overlay); border-radius: 0; border: 0; padding: clamp(1rem, 4vw, 3rem); align-content: center; justify-items: center; animation: fade-in var(--t-med) var(--ease); }
  body.stage-mode .stage > * { width: min(100%, 78rem); }
  body.stage-mode .machine { --name-max: 6rem; --card-w: clamp(11rem, 24cqw, 22rem); --card-h: clamp(8rem, 24vh, 14rem); --card-hv: clamp(5.2rem, 15vh, 9rem); --card-name-max: 3.6rem; padding: 1.2rem 1.4rem 1.5rem; }
  body.stage-mode .plate__name { font-size: clamp(2.4rem, 7cqw, 6rem); }
  body.stage-mode .controls__opts, body.stage-mode .controls__row, body.stage-mode .saved-note, body.stage-mode .start { display: none; }
  body.stage-mode .controls { max-width: 34rem; }
  .stage-exit { display: none; }
  body.stage-mode .stage-exit { display: inline-flex; }
  body.stage-mode .dock { display: none; }

  @media (max-width: 62rem) {
    .app__grid { grid-template-columns: minmax(0, 1fr); }
    .lists { position: static; max-height: none; min-height: 0; }
    .lists__body { max-height: 32rem; }
  }
  @media (max-width: 40rem) {
    .hero h1 { font-size: var(--fs-xl); }
    .stage { padding: var(--space-4); border-radius: var(--r-lg); }
    .machine { --card-w: clamp(7rem, 40cqw, 10rem); --card-h: 5.6rem; --card-hv: 3.7rem; padding: .65rem .65rem .95rem; }
    .lever { display: none; }
    .reel-frame { padding: .35rem; }
    .dock { display: flex; }
    body:not(.stage-mode) { padding-bottom: 4.5rem; }
    .controls__opts { grid-template-columns: 6.5rem 1fr; }
  }
}

/* -------------------------------------------------------------- OVERLAYS */
@layer overlays {
  .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
  .overlay[hidden] { display: none; }
  .overlay__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fade-in var(--t-med) ease both; }
  .overlay__panel { position: relative; display: flex; flex-direction: column; width: min(100%, 34rem); max-height: min(92dvh, 46rem); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: modal-in var(--t-med) var(--ease-spring) both; }
  .overlay[data-size="lg"] .overlay__panel { width: min(100%, 52rem); }
  .overlay[data-size="sm"] .overlay__panel { width: min(100%, 26rem); }
  .overlay__head, .overlay__foot, .overlay__panel > .tabs { flex: none; }
  .overlay__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 1rem 1rem 1rem 1.4rem; border-bottom: 1px solid var(--line); }
  .overlay__head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .6rem; } .overlay__head h2 .i { color: var(--primary-strong); }
  .overlay__body { padding: 1.3rem 1.4rem; overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
  .overlay__body > * { flex: none; }
  .overlay__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: .9rem 1.4rem calc(.9rem); border-top: 1px solid var(--line); background: var(--surface-2); }
  .overlay[data-state="closing"] .overlay__scrim { animation: fade-out var(--t-med) ease both; }
  .overlay[data-state="closing"] .overlay__panel { animation: modal-out var(--t-med) ease both; }
  .overlay[data-variant="drawer"] { place-items: stretch end; padding: 0; }
  .overlay[data-variant="drawer"] .overlay__panel { width: min(100%, 27rem); max-height: none; height: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: 0; animation-name: drawer-in; animation-timing-function: var(--ease); }
  .overlay[data-variant="drawer"][data-state="closing"] .overlay__panel { animation-name: drawer-out; }
  .overlay[data-variant="full"] { padding: 0; } .overlay[data-variant="full"] .overlay__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; background: var(--stage-bg); }
  .overlay[data-variant="full"] .overlay__head { background: transparent; border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
  @media (max-width: 40rem) {
    .overlay:not([data-variant="full"]):not([data-variant="drawer"]) { place-items: end center; padding: 0; }
    .overlay:not([data-variant="full"]):not([data-variant="drawer"]) .overlay__panel { width: 100%; max-height: 92dvh; border-radius: calc(var(--r-lg) * 1.3) calc(var(--r-lg) * 1.3) 0 0; border-bottom: 0; animation-name: sheet-in; animation-timing-function: var(--ease); }
    .overlay:not([data-variant="full"]):not([data-variant="drawer"])[data-state="closing"] .overlay__panel { animation-name: sheet-out; }
    .overlay:not([data-variant="full"]):not([data-variant="drawer"]) .overlay__panel::before { content: ""; position: absolute; top: .45rem; left: 50%; width: 2.6rem; height: .28rem; margin-left: -1.3rem; border-radius: var(--r-pill); background: var(--line-strong); opacity: .6; }
    .overlay__foot > .btn { flex: 1 1 auto; }
    .overlay[data-variant="drawer"] .overlay__panel { width: 100%; border-radius: 0; }
  }

  /* import dialog */
  .dropzone { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 1.8rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-med) var(--ease-spring); cursor: pointer; }
  .dropzone:hover, .dropzone.is-dragging { border-color: var(--primary); background: var(--primary-soft); }
  .dropzone.is-dragging { transform: scale(1.015); }
  .dropzone .i { width: 2.2rem; height: 2.2rem; color: var(--primary-strong); }
  .dropzone strong { font: 700 var(--fs-lead) var(--font-display); }
  .file-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .file-card .i { width: 1.8rem; height: 1.8rem; color: var(--success); }
  .file-card p { font-weight: 650; overflow-wrap: anywhere; } .file-card small { color: var(--ink-2); }
  .file-card .progress { grid-column: 1 / -1; }
  .preview { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); max-height: 12rem; }
  .preview table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); } .preview th, .preview td { padding: .4rem .65rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
  .preview th { background: var(--surface-3); position: sticky; top: 0; font-weight: 650; }

  /* winner dialog */
  .winner { position: relative; display: grid; justify-items: center; gap: .7rem; text-align: center; padding: 2.2rem 1.4rem 1.6rem; background: radial-gradient(70% 60% at 50% 0, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%), var(--surface); overflow: hidden; }
  .winner__crown { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 80%, #000); animation: crown-in 700ms var(--ease-spring) both; }
  .winner__crown .i { width: 2.4rem; height: 2.4rem; }
  .winner__kicker { font-weight: 650; color: var(--ink-2); }
  .winner__name { font: 800 clamp(1.9rem, 7vw, 3rem)/1.1 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; animation: nm-pop 600ms var(--ease-spring) 180ms both; }
  .winner__details { color: var(--ink-2); overflow-wrap: anywhere; } .winner__prize { display: inline-flex; gap: .4rem; align-items: center; }
  .winner-list { list-style: none; display: grid; gap: .5rem; width: 100%; text-align: left; margin-top: .4rem; max-height: 18rem; overflow: auto; }
  .winner-list li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; align-items: center; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); animation: row-in var(--t-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .winner-list b { font-weight: 700; } .winner-list small { display: block; color: var(--ink-2); }
  .sparkle { position: absolute; width: .7rem; height: .7rem; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; opacity: .0; pointer-events: none; }

  /* showcase (winners review + participants gallery) */
  .showcase { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; height: 100%; }
  .showcase__stage { display: grid; place-items: center; padding: 1rem; position: relative; overflow: hidden; }
  .showcase__card { width: min(100%, 36rem); display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2.4rem 1.6rem; border-radius: calc(var(--r-lg) * 1.3); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
  .showcase__card.card-enter { animation: card-enter 520ms var(--ease-spring) both; } .showcase__card.card-exit { animation: card-exit 260ms ease both; }
  .avatar { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000)); color: var(--on-primary); font: 800 2.2rem/1 var(--font-display); box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--accent); }
  .showcase__name { font: 800 clamp(1.7rem, 6vw, 2.8rem)/1.1 var(--font-display); overflow-wrap: anywhere; }
  .showcase__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); flex-wrap: wrap; }
  .showcase__count { font: 700 var(--fs-md) var(--font-display); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: center; }

  /* settings drawer */
  .settings-tabs .tab { padding: 0 .6rem; gap: .35rem; font-size: var(--fs-sm); }
  .settings-tabs { padding: 0 .4rem; background: var(--surface); position: sticky; top: 0; z-index: 2; }
  .settings-group { display: grid; gap: var(--space-4); }
  .settings-group > h3 { font-size: var(--fs-md); display: flex; gap: .5rem; align-items: center; } .settings-group > h3 .i { color: var(--primary-strong); }
  .saved-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 650; color: var(--success); opacity: 0; transition: opacity var(--t-med); } .saved-chip.is-on { opacity: 1; }
  .contrast-note { display: flex; gap: .5rem; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--accent-soft); font-size: var(--fs-sm); }

  /* teams */
  .teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); }
  .team { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; animation: row-in var(--t-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .team h4 { padding: .55rem .8rem; background: var(--primary); color: var(--on-primary); font-size: var(--fs-ui); display: flex; justify-content: space-between; gap: .5rem; }
  .team ol { list-style: none; padding: .4rem .8rem .6rem; display: grid; gap: .2rem; font-size: var(--fs-sm); } .team li { overflow-wrap: anywhere; }

  .curve { margin: 0; display: grid; gap: .45rem; } .curve svg { width: 100%; height: 5.4rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .curve__axis { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .curve__mid { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  .curve__line { fill: none; stroke: var(--primary-strong); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .shortcuts { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; align-items: center; } .shortcuts dt { display: flex; gap: .3rem; } .shortcuts dd { margin: 0; color: var(--ink-2); }

  /* ---- TOASTS ---- */
  :root { --tc-success: #5fd49a; --tc-error: #ff8d82; --tc-warn: #f0c060; --tc-info: #8db8ff; }
  :root[data-theme="dark"] { --tc-success: #17784a; --tc-error: #b42318; --tc-warn: #8a5a00; --tc-info: #1d5fb8; }
  @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --tc-success: #17784a; --tc-error: #b42318; --tc-warn: #8a5a00; --tc-info: #1d5fb8; } }
  .toasts { position: fixed; z-index: var(--z-toast); right: 1rem; top: calc(var(--header-h) + .75rem + env(safe-area-inset-top)); width: min(25rem, calc(100vw - 2rem)); display: grid; gap: .6rem; pointer-events: none; }
  .toast-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-med) var(--ease), opacity var(--t-med); }
  .toast-wrap.is-leaving { grid-template-rows: 0fr; opacity: 0; margin-bottom: -.6rem; }
  .toast { --tc: var(--tc-info); pointer-events: auto; position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .75rem; align-items: start; padding: .85rem .6rem .95rem .95rem; border-radius: var(--r-md); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-3); animation: toast-in var(--t-slow) var(--ease-spring) both; touch-action: pan-y; }
  .toast[data-type="success"] { --tc: var(--tc-success); } .toast[data-type="error"] { --tc: var(--tc-error); } .toast[data-type="warn"] { --tc: var(--tc-warn); }
  .toast__icon { color: var(--tc); margin-top: .1rem; } .toast__icon .i { width: 1.35rem; height: 1.35rem; }
  .toast__title { font-weight: 700; font-size: var(--fs-ui); line-height: 1.35; } .toast__msg { grid-column: 2; font-size: var(--fs-sm); opacity: .88; overflow-wrap: anywhere; }
  .toast__title + .toast__msg { margin-top: -.1rem; }
  .toast__act { grid-column: 2; justify-self: start; margin-top: .35rem; padding: .35rem .75rem; min-height: 2rem; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent); background: transparent; color: var(--bg); font-weight: 650; font-size: var(--fs-sm); }
  .toast__act:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); }
  .toast__x { grid-column: 3; grid-row: 1; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: 50%; opacity: .75; } .toast__x:hover { opacity: 1; background: color-mix(in srgb, var(--bg) 16%, transparent); }
  .toast .toast__x:focus-visible, .toast__act:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 5px var(--ink); }
  .toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); transform-origin: 0 50%; animation: toast-bar var(--dur, 5s) linear forwards; }
  .toast:hover .toast__bar, .toast:focus-within .toast__bar { animation-play-state: paused; }
  @media (max-width: 40rem) { .toasts { right: .75rem; left: .75rem; width: auto; top: auto; bottom: calc(5.2rem + env(safe-area-inset-bottom)); } body.stage-mode .toasts { bottom: 1rem; } }
  body.stage-mode .toasts { top: 1rem; }

  /* ---- CONSENT ---- */
  .consent { position: fixed; z-index: calc(var(--z-toast) - 1); left: 50%; translate: -50% 0; bottom: calc(.75rem + env(safe-area-inset-bottom)); width: min(62rem, calc(100vw - 1.5rem)); padding: .65rem .75rem .65rem 1.1rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem; align-items: center; animation: bar-in var(--t-slow) var(--ease) both; }
  .consent p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; } .consent p strong { color: var(--ink); }
  .consent__btns { display: flex; flex-wrap: nowrap; gap: .45rem; } .consent__btns .btn { flex: 0 0 auto; }
  @media (max-width: 62rem) { .consent { grid-template-columns: 1fr; width: calc(100vw - 1rem); padding: .8rem; } .consent__btns { flex-wrap: wrap; } .consent__btns .btn { flex: 1 1 auto; } }
}

/* --------------------------------------------------------------- CONTENT */
@layer content {
  :root { interpolate-size: allow-keywords; }
  .section { padding-block: var(--space-7); }
  .section--tint { background: color-mix(in srgb, var(--surface) 86%, transparent); border-block: 1px solid var(--line); }
  .section h2, .section__head h2 { font-size: var(--fs-2xl); max-width: 24ch; }
  .section__lead { margin-top: .7rem; color: var(--ink-2); max-width: 62ch; font-size: var(--fs-lead); }
  .section__head { margin-bottom: var(--space-5); }

  /* steps: a real sequence, drawn as a perforated stub line */
  .steps { list-style: none; counter-reset: s; display: grid; gap: var(--space-5); margin-top: var(--space-5); max-width: 46rem; }
  .steps li { counter-increment: s; position: relative; padding-left: 3.6rem; }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font: 800 var(--fs-lead) var(--font-display); transform: rotate(-4deg); }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: -1.4rem; border-left: 2px dashed var(--line-strong); }
  .steps h3 { font-size: var(--fs-lg); } .steps p { color: var(--ink-2); margin-top: .25rem; max-width: 56ch; }

  .usecases { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5) var(--space-6); margin-top: var(--space-5); }
  .usecase { display: grid; grid-template-columns: auto 1fr; gap: .2rem .85rem; align-items: start; }
  .usecase .i { grid-row: span 2; width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--primary-strong); } .usecase h3 { font-size: var(--fs-lead); } .usecase p { color: var(--ink-2); font-size: var(--fs-sm); }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
  .checks { list-style: none; display: grid; gap: .6rem; margin-top: var(--space-4); } .checks li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; } .checks .i { color: var(--success); margin-top: .2rem; }

  .faq { border-bottom: 1px solid var(--line); }
  .faq:first-of-type { border-top: 1px solid var(--line); }
  .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .25rem; font: 650 var(--fs-lead)/1.35 var(--font-display); cursor: pointer; min-height: 3.25rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform var(--t-med) var(--ease); margin-right: .3rem; }
  .faq[open] summary::after { transform: rotate(225deg); }
  .faq summary:hover { color: var(--primary-strong); }
  .faq__a { padding: 0 .25rem 1.1rem; color: var(--ink-2); max-width: 66ch; } .faq__a p + p { margin-top: .6rem; }
  @supports (selector(::details-content)) { .faq::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; } .faq[open]::details-content { block-size: auto; } }

  .guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); margin-top: var(--space-5); list-style: none; }
  .guide-card { display: grid; gap: .5rem; align-content: start; height: 100%; padding: 1.2rem 1.3rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-med); }
  .guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--primary); }
  .guide-card h3 { font-size: var(--fs-lead); } .guide-card p { color: var(--ink-2); font-size: var(--fs-sm); } .guide-card .badge { justify-self: start; }

  /* articles + legal */
  .page-head { padding-block: var(--space-5) var(--space-5); } .page-head h1 { font-size: var(--fs-3xl); max-width: 22ch; }
  .prose .page-head { padding-block: var(--space-4) 0; } .prose .page-head h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); max-width: 26ch; } .prose .page-head .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); } .page-head p.lead { margin-top: .8rem; color: var(--ink-2); font-size: var(--fs-lead); max-width: 60ch; }
  .meta-line { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-sm); color: var(--ink-3); }
  .article { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-7); align-items: start; padding-bottom: var(--space-5); }
  .article--single { grid-template-columns: minmax(0, 46rem); justify-content: center; }
  .aside { display: grid; gap: var(--space-4); align-content: start; position: sticky; top: calc(var(--header-h) + 1rem); }
  .aside .panel { padding: 1.1rem; display: grid; gap: .6rem; } .aside h2 { font-size: var(--fs-md); } .aside ul { list-style: none; display: grid; gap: .35rem; font-size: var(--fs-sm); } .aside li a { display: block; padding: .15rem 0; }
  .prose { font-size: var(--fs-lead); line-height: 1.75; max-width: 68ch; color: color-mix(in srgb, var(--ink) 92%, var(--bg)); }
  .prose h1, .prose h2, .prose h3 { color: var(--ink); }
  .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: var(--fs-xl); margin-top: 2.1em; scroll-margin-top: 5rem; } .prose h3 { font-size: var(--fs-lg); margin-top: 1.7em; }
  .prose ul, .prose ol { padding-left: 1.4rem; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--primary-strong); }
  .prose strong { font-weight: 650; color: var(--ink); } .prose code { font: 600 .9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-3); padding: .12em .4em; border-radius: var(--r-sm); }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); display: block; overflow-x: auto; } .prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; } .prose th { background: var(--surface-3); font-weight: 650; white-space: nowrap; }
  .callout { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--r-md); background: var(--primary-soft); border-left: 4px solid var(--primary); font-size: var(--fs-md); line-height: 1.6; } .callout .i { color: var(--primary-strong); margin-top: .2rem; }
  .callout--warn { background: var(--accent-soft); border-left-color: var(--accent); } .callout--warn .i { color: var(--warn); }
  .cta-box { display: grid; gap: .7rem; justify-items: start; padding: 1.5rem 1.6rem; border-radius: var(--r-lg); background: var(--ink); color: var(--bg); } .cta-box h2 { font-size: var(--fs-xl); margin: 0; color: var(--bg); } .cta-box p { opacity: .85; max-width: 46ch; } .cta-box .btn--primary { box-shadow: none; }
  .legal h2 { counter-increment: sec; } .legal h2::before { content: counter(sec) ". "; color: var(--ink-3); } .legal { counter-reset: sec; }
  .legal-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-6); align-items: start; }
  .contact-card { padding: 1.4rem; display: grid; gap: 1rem; } .contact-card .item { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; } .contact-card .item .i { grid-row: span 2; color: var(--primary-strong); margin-top: .2rem; } .contact-card small { color: var(--ink-2); }
  .err-page { min-height: 60dvh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1rem; padding: var(--space-7) 1rem; } .err-page .big { font: 800 clamp(5rem, 22vw, 11rem)/1 var(--font-display); color: var(--primary); letter-spacing: -.05em; }

  /* ad slots: zero height until Google reports the slot as filled, always labelled, never inside the app stage */
  .ad-slot { height: 0; overflow: hidden; margin: 0; text-align: center; clear: both; }
  .ad-slot.is-filled { height: auto; overflow: visible; margin: var(--space-6) auto; padding: .35rem 0 .6rem; max-width: 100%; }
  .ad-slot__label { display: block; font: 600 var(--fs-2xs)/1 var(--font-body); color: var(--ink-3); letter-spacing: .06em; text-transform: none; margin-bottom: .35rem; }
  .ad-slot ins { display: block; width: 100%; min-width: 250px; }

  @media (max-width: 62rem) { .article { grid-template-columns: minmax(0, 1fr); } .aside { position: static; } .split, .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
  @media (max-width: 40rem) { .section { padding-block: var(--space-6); } .prose { font-size: var(--fs-md); } }
}

/* ------------------------------------------------------------- UTILITIES */
@layer utilities {
  .nav-toggle { display: none; }
  @media (max-width: 62rem) { .nav-toggle { display: inline-grid; } }
  .more-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
  .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .grow { flex: 1; } .stack { display: grid; gap: var(--space-3); } .center { text-align: center; } .muted { color: var(--ink-2); }
  .print-only { display: none; }
}

/* ------------------------------------------------------------- KEYFRAMES */
@keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes sheet-in { from { transform: translateY(100%); } } @keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(100%); } } @keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes bar-in { from { opacity: 0; transform: translateY(100%); } }
@media (max-width: 40rem) { @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } } } @keyframes toast-bar { to { transform: scaleX(0); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes drift { to { background-position: 100% 100%; transform: scale(1.06); } }
@keyframes nm-pop { from { opacity: 0; transform: translateY(.35em) scale(.93); } }
@keyframes bulb-a { 50% { opacity: .3; } }
@keyframes bulb-b { 0% { opacity: .3; } 50% { opacity: 1; } }
@keyframes bulb-win { 50% { opacity: .35; } }
@keyframes lever-pull { 0% { height: 4.2rem; } 38% { height: 1.5rem; } 100% { height: 4.2rem; } }
@keyframes pointer-win { 50% { box-shadow: 0 0 0 1px rgb(0 0 0 / .55), 0 0 34px var(--accent), inset 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); } }
@keyframes winner-pop { from { transform: scale(.92); } 60% { transform: scale(1.06); } to { transform: scale(1.02); } }
@keyframes crown-in { from { opacity: 0; transform: translateY(-1.4rem) rotate(-14deg) scale(.5); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }
@keyframes card-enter { from { opacity: 0; transform: translateX(3rem) scale(.94) rotate(2deg); } } @keyframes card-exit { to { opacity: 0; transform: translateX(-3rem) scale(.94) rotate(-2deg); } }

/* Reduced motion: honour the OS setting (data-motion=auto) or the in-app switch (data-motion=reduced). */
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] *, :root[data-motion="auto"] *::before, :root[data-motion="auto"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* Print: winners report only (JS injects .print-only) */
@media print {
  body > *:not(.print-only) { display: none !important; }
  .print-only { display: block !important; color: #000; background: #fff; padding: 1.5cm; font: 12pt/1.5 system-ui, sans-serif; }
  .print-only h1 { font-size: 20pt; margin: 0 0 .3cm; } .print-only table { width: 100%; border-collapse: collapse; margin-top: .6cm; } .print-only th, .print-only td { border: 1px solid #888; padding: 4pt 8pt; text-align: left; }
}