/* generated — edit design/tokens.json, then run `python3 design/generate.py`. Do not edit by hand. */
/* Pop Riot — design tokens as CSS custom properties + a few utilities.
   Theme: <html data-theme="day|night|kids|kids-night">; no attribute = follow prefers-color-scheme
   (Day/Night). data-theme="kids" also follows the system into Kids Night. Self-hosted font, no CDN. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var.woff2") format("woff2-variations"), url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-var.woff2") format("woff2-variations"), url("/fonts/vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --pr-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pr-font-latin: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pr-control-pad-x: 0px;
  --pr-control-pad-y: 0px;
  --pr-chip-line: 1;
  --pr-display-size: 2.75rem;
  --pr-display-weight: 800;
  --pr-display-tracking: -0.02em;
  --pr-display-line: 1.0;
  --pr-title-size: 1.875rem;
  --pr-title-weight: 800;
  --pr-title-tracking: -0.015em;
  --pr-title-line: 1.05;
  --pr-headline-size: 1.25rem;
  --pr-headline-weight: 700;
  --pr-headline-tracking: -0.005em;
  --pr-headline-line: 1.15;
  --pr-label-size: 1.125rem;
  --pr-label-weight: 800;
  --pr-label-tracking: 0.01em;
  --pr-label-line: 1.1;
  --pr-body-size: 1.062rem;
  --pr-body-weight: 400;
  --pr-body-tracking: 0.0em;
  --pr-body-line: 1.35;
  --pr-body-strong-size: 1.062rem;
  --pr-body-strong-weight: 600;
  --pr-body-strong-tracking: 0.0em;
  --pr-body-strong-line: 1.35;
  --pr-caption-size: 0.8125rem;
  --pr-caption-weight: 600;
  --pr-caption-tracking: 0.01em;
  --pr-caption-line: 1.25;
  --pr-micro-size: 0.6875rem;
  --pr-micro-weight: 600;
  --pr-micro-tracking: 0.02em;
  --pr-micro-line: 1.2;
  --pr-card-text-weight: 800;
  --pr-card-text-line: 1.12;
  --pr-space-xxs: 2px;
  --pr-space-xs: 4px;
  --pr-space-s: 8px;
  --pr-space-m: 12px;
  --pr-space-l: 16px;
  --pr-space-xl: 20px;
  --pr-space-xxl: 24px;
  --pr-space-x3: 32px;
  --pr-space-x4: 40px;
  --pr-space-x5: 56px;
  --pr-space-x6: 72px;
  --pr-space-gutter: 16px;
  --pr-stroke-hairline: 1.5px;
  --pr-stroke-chip: 2.5px;
  --pr-stroke-tile: 3.0px;
  --pr-stroke-button: 3.0px;
  --pr-stroke-card: 3.5px;
  --pr-shadow-small: 3px 3px 0;
  --pr-shadow-medium: 4px 4px 0;
  --pr-shadow-large: 6px 6px 0;
  --pr-shadow-pressed: 1px 1px 0;
  --pr-dur-instant: 80ms;
  --pr-dur-fast: 150ms;
  --pr-dur-base: 250ms;
  --pr-dur-slow: 400ms;
  --pr-dur-slower: 600ms;
  --pr-dur-flip: 450ms;
  --pr-dur-handoff: 550ms;
  --pr-dur-stamp: 320ms;
  --pr-dur-drumroll: 1600ms;
  --pr-dur-confetti: 2400ms;
  /* springs approximated as cubic-béziers for CSS transitions */
  --pr-ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pr-ease-bouncy: cubic-bezier(0.34, 1.8, 0.5, 1);
  --pr-ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --pr-wiggle-amp: 1.2deg;
  --pr-wiggle-period: 3.2s;
  --pr-wiggle-phase: 0.37s;
  --pr-press-scale-x: 1.04;
  --pr-press-scale-y: 0.94;
  --pr-badge-family-fill: #5cf29a;
  --pr-badge-family-text: #1a0b2e;
  --pr-badge-teen-fill: #7ee8ff;
  --pr-badge-teen-text: #1a0b2e;
  --pr-badge-adult-fill: #ff3d7f;
  --pr-badge-adult-text: #1a0b2e;
  --pr-game-truth-or-dare: #ff3d7f;
  --pr-game-truth-or-dare-pastel: #ffd6e6;
  --pr-game-never-have-i-ever: #7ee8ff;
  --pr-game-never-have-i-ever-pastel: #c6f7ff;
  --pr-game-would-you-rather: #c4a8ff;
  --pr-game-would-you-rather-pastel: #e9dcff;
  --pr-game-most-likely-to: #ffcf2e;
  --pr-game-most-likely-to-pastel: #fff6b8;
  --pr-game-kiss-marry-kill: #ff5a5f;
  --pr-game-kiss-marry-kill-pastel: #ffd9d6;
  --pr-game-hot-seat: #ff7a2e;
  --pr-game-hot-seat-pastel: #ffe0c7;
  --pr-game-do-or-drink: #c8ff5a;
  --pr-game-do-or-drink-pastel: #e8ffb3;
  --pr-game-sip-or-strip: #ff6bd5;
  --pr-game-sip-or-strip-pastel: #ffe0f6;
  --pr-game-fill-in-the-blank: #6bffc8;
  --pr-game-fill-in-the-blank-pastel: #d4ffe9;
  --pr-game-charades: #8f9bff;
  --pr-game-charades-pastel: #e3e6ff;
  --pr-game-forehead: #2ee6d6;
  --pr-game-forehead-pastel: #ccfaf5;
  --pr-game-sketch-it: #5ab0ff;
  --pr-game-sketch-it-pastel: #d6ebff;
  color-scheme: light;
  --pr-bg: linear-gradient(170deg, #ff3d7f 0%, #ff7a2e 55%, #ffcf2e 100%);
  --pr-bg-solid: #ff7a2e;
  --pr-surface: #fff8f2;
  --pr-surface-raised: #ffffff;
  --pr-ink: #1a0b2e;
  --pr-outline: #1a0b2e;
  --pr-shadow: #1a0b2e;
  --pr-text-primary: #1a0b2e;
  --pr-text-secondary: #2b1240;
  --pr-text-on-surface: #1a0b2e;
  --pr-text-on-surface-secondary: #5a4570;
  --pr-accent: #1a0b2e;
  --pr-on-accent: #ffcf2e;
  --pr-accent-shadow: #ffffff;
  --pr-chip: #1a0b2e;
  --pr-on-chip: #ffffff;
  --pr-chip-shadow: #ffffff;
  --pr-danger: #c8102e;
  --pr-on-danger: #ffffff;
  --pr-success: #137a3c;
  --pr-on-success: #ffffff;
  --pr-warning: #ffcf2e;
  --pr-on-warning: #1a0b2e;
  --pr-tile-outline: #1a0b2e;
  --pr-tile-shadow: #1a0b2e;
  --pr-tile-ink: #1a0b2e;
  --pr-tile-ink-secondary: #4a3560;
  --pr-accent-fill: #1a0b2e;
  --pr-wordmark: #1a0b2e;
  --pr-tile-0: #fff3f8;
  --pr-tile-1: #c6f7ff;
  --pr-tile-2: #e8ffb3;
  --pr-tile-3: #e9dcff;
  --pr-tile-4: #ffe7c2;
  --pr-tile-5: #fff6b8;
  --pr-tile-6: #d4ffe9;
  --pr-tile-7: #ffd6e6;
  --pr-radius-chip: 12px;
  --pr-radius-button: 16px;
  --pr-radius-tile: 18px;
  --pr-radius-card: 24px;
  --pr-radius-sheet: 28px;
  --pr-radius-badge: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --pr-bg: radial-gradient(120% 70% at 50% 0%, #3b0f4f 0%, #170826 60%, #0d0516 100%);
    --pr-bg-solid: #170826;
    --pr-surface: #241036;
    --pr-surface-raised: #2f1646;
    --pr-ink: #1a0b2e;
    --pr-outline: #ffffff;
    --pr-shadow: #ff3d7f;
    --pr-text-primary: #ffffff;
    --pr-text-secondary: #d9c6ef;
    --pr-text-on-surface: #ffffff;
    --pr-text-on-surface-secondary: #cdb8e6;
    --pr-accent: #ff3d7f;
    --pr-on-accent: #1a0b2e;
    --pr-accent-shadow: #ffcf2e;
    --pr-chip: #ffcf2e;
    --pr-on-chip: #1a0b2e;
    --pr-chip-shadow: #ff3d7f;
    --pr-danger: #ff5a6e;
    --pr-on-danger: #1a0b2e;
    --pr-success: #5cf29a;
    --pr-on-success: #1a0b2e;
    --pr-warning: #ffcf2e;
    --pr-on-warning: #1a0b2e;
    --pr-tile-outline: #ffffff;
    --pr-tile-shadow: #ff3d7f;
    --pr-tile-ink: #1a0b2e;
    --pr-tile-ink-secondary: #3d2456;
    --pr-accent-fill: linear-gradient(90deg, #ff3d7f, #ff7a2e);
    --pr-wordmark: linear-gradient(90deg, #ff3d7f, #ff7a2e, #ffcf2e);
    --pr-tile-0: #ff8fb6;
    --pr-tile-1: #7ee8ff;
    --pr-tile-2: #c8ff5a;
    --pr-tile-3: #c4a8ff;
    --pr-tile-4: #ffb36b;
    --pr-tile-5: #ffe066;
    --pr-tile-6: #6bffc8;
    --pr-tile-7: #ff9ee0;
    --pr-radius-chip: 12px;
    --pr-radius-button: 16px;
    --pr-radius-tile: 18px;
    --pr-radius-card: 24px;
    --pr-radius-sheet: 28px;
    --pr-radius-badge: 8px;
  }
}

[data-theme="day"] {
  color-scheme: light;
  --pr-bg: linear-gradient(170deg, #ff3d7f 0%, #ff7a2e 55%, #ffcf2e 100%);
  --pr-bg-solid: #ff7a2e;
  --pr-surface: #fff8f2;
  --pr-surface-raised: #ffffff;
  --pr-ink: #1a0b2e;
  --pr-outline: #1a0b2e;
  --pr-shadow: #1a0b2e;
  --pr-text-primary: #1a0b2e;
  --pr-text-secondary: #2b1240;
  --pr-text-on-surface: #1a0b2e;
  --pr-text-on-surface-secondary: #5a4570;
  --pr-accent: #1a0b2e;
  --pr-on-accent: #ffcf2e;
  --pr-accent-shadow: #ffffff;
  --pr-chip: #1a0b2e;
  --pr-on-chip: #ffffff;
  --pr-chip-shadow: #ffffff;
  --pr-danger: #c8102e;
  --pr-on-danger: #ffffff;
  --pr-success: #137a3c;
  --pr-on-success: #ffffff;
  --pr-warning: #ffcf2e;
  --pr-on-warning: #1a0b2e;
  --pr-tile-outline: #1a0b2e;
  --pr-tile-shadow: #1a0b2e;
  --pr-tile-ink: #1a0b2e;
  --pr-tile-ink-secondary: #4a3560;
  --pr-accent-fill: #1a0b2e;
  --pr-wordmark: #1a0b2e;
  --pr-tile-0: #fff3f8;
  --pr-tile-1: #c6f7ff;
  --pr-tile-2: #e8ffb3;
  --pr-tile-3: #e9dcff;
  --pr-tile-4: #ffe7c2;
  --pr-tile-5: #fff6b8;
  --pr-tile-6: #d4ffe9;
  --pr-tile-7: #ffd6e6;
  --pr-radius-chip: 12px;
  --pr-radius-button: 16px;
  --pr-radius-tile: 18px;
  --pr-radius-card: 24px;
  --pr-radius-sheet: 28px;
  --pr-radius-badge: 8px;
}

[data-theme="night"] {
  color-scheme: dark;
  --pr-bg: radial-gradient(120% 70% at 50% 0%, #3b0f4f 0%, #170826 60%, #0d0516 100%);
  --pr-bg-solid: #170826;
  --pr-surface: #241036;
  --pr-surface-raised: #2f1646;
  --pr-ink: #1a0b2e;
  --pr-outline: #ffffff;
  --pr-shadow: #ff3d7f;
  --pr-text-primary: #ffffff;
  --pr-text-secondary: #d9c6ef;
  --pr-text-on-surface: #ffffff;
  --pr-text-on-surface-secondary: #cdb8e6;
  --pr-accent: #ff3d7f;
  --pr-on-accent: #1a0b2e;
  --pr-accent-shadow: #ffcf2e;
  --pr-chip: #ffcf2e;
  --pr-on-chip: #1a0b2e;
  --pr-chip-shadow: #ff3d7f;
  --pr-danger: #ff5a6e;
  --pr-on-danger: #1a0b2e;
  --pr-success: #5cf29a;
  --pr-on-success: #1a0b2e;
  --pr-warning: #ffcf2e;
  --pr-on-warning: #1a0b2e;
  --pr-tile-outline: #ffffff;
  --pr-tile-shadow: #ff3d7f;
  --pr-tile-ink: #1a0b2e;
  --pr-tile-ink-secondary: #3d2456;
  --pr-accent-fill: linear-gradient(90deg, #ff3d7f, #ff7a2e);
  --pr-wordmark: linear-gradient(90deg, #ff3d7f, #ff7a2e, #ffcf2e);
  --pr-tile-0: #ff8fb6;
  --pr-tile-1: #7ee8ff;
  --pr-tile-2: #c8ff5a;
  --pr-tile-3: #c4a8ff;
  --pr-tile-4: #ffb36b;
  --pr-tile-5: #ffe066;
  --pr-tile-6: #6bffc8;
  --pr-tile-7: #ff9ee0;
  --pr-radius-chip: 12px;
  --pr-radius-button: 16px;
  --pr-radius-tile: 18px;
  --pr-radius-card: 24px;
  --pr-radius-sheet: 28px;
  --pr-radius-badge: 8px;
}

[data-theme="kids"] {
  color-scheme: light;
  --pr-bg: linear-gradient(170deg, #7ad8ff 0%, #a98bff 55%, #ffb3e0 100%);
  --pr-bg-solid: #a98bff;
  --pr-surface: #fbf8ff;
  --pr-surface-raised: #ffffff;
  --pr-ink: #23125a;
  --pr-outline: #23125a;
  --pr-shadow: #23125a;
  --pr-text-primary: #23125a;
  --pr-text-secondary: #2e1a6b;
  --pr-text-on-surface: #23125a;
  --pr-text-on-surface-secondary: #55488a;
  --pr-accent: #23125a;
  --pr-on-accent: #ffffff;
  --pr-accent-shadow: #ffffff;
  --pr-chip: #ffffff;
  --pr-on-chip: #23125a;
  --pr-chip-shadow: #23125a;
  --pr-danger: #c41d5a;
  --pr-on-danger: #ffffff;
  --pr-success: #137a52;
  --pr-on-success: #ffffff;
  --pr-warning: #ffe066;
  --pr-on-warning: #23125a;
  --pr-tile-outline: #23125a;
  --pr-tile-shadow: #23125a;
  --pr-tile-ink: #23125a;
  --pr-tile-ink-secondary: #4d4185;
  --pr-accent-fill: #23125a;
  --pr-wordmark: #23125a;
  --pr-tile-0: #fffbe0;
  --pr-tile-1: #e0fff4;
  --pr-tile-2: #ffe9f6;
  --pr-tile-3: #e6f0ff;
  --pr-tile-4: #fff0d9;
  --pr-tile-5: #efe6ff;
  --pr-tile-6: #e3f9ff;
  --pr-tile-7: #f0ffd9;
  --pr-radius-chip: 999px;
  --pr-radius-button: 999px;
  --pr-radius-tile: 26px;
  --pr-radius-card: 30px;
  --pr-radius-sheet: 32px;
  --pr-radius-badge: 999px;
}

[data-theme="kids-night"] {
  color-scheme: dark;
  --pr-bg: linear-gradient(170deg, #2b2a7a 0%, #3a2477 55%, #5a2a6e 100%);
  --pr-bg-solid: #3a2477;
  --pr-surface: #2f2a6e;
  --pr-surface-raised: #3a3480;
  --pr-ink: #23125a;
  --pr-outline: #ffffff;
  --pr-shadow: #ff9ed8;
  --pr-text-primary: #ffffff;
  --pr-text-secondary: #e2dcff;
  --pr-text-on-surface: #ffffff;
  --pr-text-on-surface-secondary: #d6cff7;
  --pr-accent: #ffe066;
  --pr-on-accent: #23125a;
  --pr-accent-shadow: #ff9ed8;
  --pr-chip: #ffffff;
  --pr-on-chip: #23125a;
  --pr-chip-shadow: #ff9ed8;
  --pr-danger: #ff8aa8;
  --pr-on-danger: #23125a;
  --pr-success: #7cf0b8;
  --pr-on-success: #23125a;
  --pr-warning: #ffe066;
  --pr-on-warning: #23125a;
  --pr-tile-outline: #ffffff;
  --pr-tile-shadow: #ff9ed8;
  --pr-tile-ink: #23125a;
  --pr-tile-ink-secondary: #4d4185;
  --pr-accent-fill: #ffe066;
  --pr-wordmark: linear-gradient(90deg, #7ad8ff, #c9b6ff, #ffb3e0);
  --pr-tile-0: #fff3b0;
  --pr-tile-1: #b8f5e0;
  --pr-tile-2: #ffcdea;
  --pr-tile-3: #c8dcff;
  --pr-tile-4: #ffdcb0;
  --pr-tile-5: #dccdff;
  --pr-tile-6: #b8ecff;
  --pr-tile-7: #dcf5b0;
  --pr-radius-chip: 999px;
  --pr-radius-button: 999px;
  --pr-radius-tile: 26px;
  --pr-radius-card: 30px;
  --pr-radius-sheet: 32px;
  --pr-radius-badge: 999px;
}

@media (prefers-color-scheme: dark) {
  [data-theme="kids"] {
    color-scheme: dark;
    --pr-bg: linear-gradient(170deg, #2b2a7a 0%, #3a2477 55%, #5a2a6e 100%);
    --pr-bg-solid: #3a2477;
    --pr-surface: #2f2a6e;
    --pr-surface-raised: #3a3480;
    --pr-ink: #23125a;
    --pr-outline: #ffffff;
    --pr-shadow: #ff9ed8;
    --pr-text-primary: #ffffff;
    --pr-text-secondary: #e2dcff;
    --pr-text-on-surface: #ffffff;
    --pr-text-on-surface-secondary: #d6cff7;
    --pr-accent: #ffe066;
    --pr-on-accent: #23125a;
    --pr-accent-shadow: #ff9ed8;
    --pr-chip: #ffffff;
    --pr-on-chip: #23125a;
    --pr-chip-shadow: #ff9ed8;
    --pr-danger: #ff8aa8;
    --pr-on-danger: #23125a;
    --pr-success: #7cf0b8;
    --pr-on-success: #23125a;
    --pr-warning: #ffe066;
    --pr-on-warning: #23125a;
    --pr-tile-outline: #ffffff;
    --pr-tile-shadow: #ff9ed8;
    --pr-tile-ink: #23125a;
    --pr-tile-ink-secondary: #4d4185;
    --pr-accent-fill: #ffe066;
    --pr-wordmark: linear-gradient(90deg, #7ad8ff, #c9b6ff, #ffb3e0);
    --pr-tile-0: #fff3b0;
    --pr-tile-1: #b8f5e0;
    --pr-tile-2: #ffcdea;
    --pr-tile-3: #c8dcff;
    --pr-tile-4: #ffdcb0;
    --pr-tile-5: #dccdff;
    --pr-tile-6: #b8ecff;
    --pr-tile-7: #dcf5b0;
    --pr-radius-chip: 999px;
    --pr-radius-button: 999px;
    --pr-radius-tile: 26px;
    --pr-radius-card: 30px;
    --pr-radius-sheet: 32px;
    --pr-radius-badge: 999px;
  }
}

/* Arabic-script UI (fa, ar, ur, ps, ckb, sd, ug): Vazirmatn, zero letter-spacing (any tracking breaks
   letter joining — enforced with !important over page rules), taller leading, body/caption bump and
   roomier controls. Latin islands inside (lang="en" gloss, wordmark, room codes) keep the base family. */
:lang(fa), :lang(ar), :lang(ur), :lang(ps), :lang(ckb), :lang(sd), :lang(ug) {
  --pr-font: "Vazirmatn", var(--pr-font-latin);
  --pr-display-size: 2.75rem;
  --pr-display-weight: 800;
  --pr-display-tracking: 0em;
  --pr-display-line: 1.35;
  --pr-title-size: 1.875rem;
  --pr-title-weight: 800;
  --pr-title-tracking: 0em;
  --pr-title-line: 1.35;
  --pr-headline-size: 1.3rem;
  --pr-headline-weight: 700;
  --pr-headline-tracking: 0em;
  --pr-headline-line: 1.4;
  --pr-label-size: 1.17rem;
  --pr-label-weight: 800;
  --pr-label-tracking: 0em;
  --pr-label-line: 1.35;
  --pr-body-size: 1.147rem;
  --pr-body-weight: 400;
  --pr-body-tracking: 0em;
  --pr-body-line: 1.65;
  --pr-body-strong-size: 1.147rem;
  --pr-body-strong-weight: 600;
  --pr-body-strong-tracking: 0em;
  --pr-body-strong-line: 1.65;
  --pr-caption-size: 0.8938rem;
  --pr-caption-weight: 600;
  --pr-caption-tracking: 0em;
  --pr-caption-line: 1.55;
  --pr-micro-size: 0.7562rem;
  --pr-micro-weight: 600;
  --pr-micro-tracking: 0em;
  --pr-micro-line: 1.5;
  --pr-card-text-weight: 700;
  --pr-card-text-line: 1.4;
  --pr-control-pad-x: 4px;
  --pr-control-pad-y: 2px;
  --pr-chip-line: 1.55;
  letter-spacing: 0 !important;
}

:where([lang]:not(:lang(fa)):not(:lang(ar)):not(:lang(ur)):not(:lang(ps)):not(:lang(ckb)):not(:lang(sd)):not(:lang(ug))) {
  --pr-font: var(--pr-font-latin);
  --pr-display-size: 2.75rem;
  --pr-display-weight: 800;
  --pr-display-tracking: -0.02em;
  --pr-display-line: 1.0;
  --pr-title-size: 1.875rem;
  --pr-title-weight: 800;
  --pr-title-tracking: -0.015em;
  --pr-title-line: 1.05;
  --pr-headline-size: 1.25rem;
  --pr-headline-weight: 700;
  --pr-headline-tracking: -0.005em;
  --pr-headline-line: 1.15;
  --pr-label-size: 1.125rem;
  --pr-label-weight: 800;
  --pr-label-tracking: 0.01em;
  --pr-label-line: 1.1;
  --pr-body-size: 1.062rem;
  --pr-body-weight: 400;
  --pr-body-tracking: 0.0em;
  --pr-body-line: 1.35;
  --pr-body-strong-size: 1.062rem;
  --pr-body-strong-weight: 600;
  --pr-body-strong-tracking: 0.0em;
  --pr-body-strong-line: 1.35;
  --pr-caption-size: 0.8125rem;
  --pr-caption-weight: 600;
  --pr-caption-tracking: 0.01em;
  --pr-caption-line: 1.25;
  --pr-micro-size: 0.6875rem;
  --pr-micro-weight: 600;
  --pr-micro-tracking: 0.02em;
  --pr-micro-line: 1.2;
  --pr-card-text-weight: 800;
  --pr-card-text-line: 1.12;
  --pr-control-pad-x: 0px;
  --pr-control-pad-y: 0px;
  --pr-chip-line: 1;
  font-family: var(--pr-font);
}

/* ---- utilities ---- */
.pr-bg { background: var(--pr-bg-solid); background-image: var(--pr-bg); color: var(--pr-text-primary); font-family: var(--pr-font); }
.pr-display { font: var(--pr-display-weight) var(--pr-display-size)/var(--pr-display-line) var(--pr-font); letter-spacing: var(--pr-display-tracking); }
.pr-title { font: var(--pr-title-weight) var(--pr-title-size)/var(--pr-title-line) var(--pr-font); letter-spacing: var(--pr-title-tracking); }
.pr-headline { font: var(--pr-headline-weight) var(--pr-headline-size)/var(--pr-headline-line) var(--pr-font); letter-spacing: var(--pr-headline-tracking); }
.pr-body { font: var(--pr-body-weight) var(--pr-body-size)/var(--pr-body-line) var(--pr-font); }
.pr-caption { font: var(--pr-caption-weight) var(--pr-caption-size)/var(--pr-caption-line) var(--pr-font); letter-spacing: var(--pr-caption-tracking); }
.pr-wordmark { background: var(--pr-wordmark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-hard-shadow { box-shadow: var(--pr-shadow-medium) var(--pr-shadow); }
.pr-tile { position: relative; background: var(--pr-tile-fill, var(--pr-tile-0)); color: var(--pr-tile-ink);
  border: var(--pr-stroke-tile) solid var(--pr-tile-outline); border-radius: var(--pr-radius-tile);
  box-shadow: var(--pr-shadow-medium) var(--pr-tile-shadow); transform: rotate(var(--pr-tilt, 0deg)); }
.pr-tile:nth-child(8n+1) { --pr-tile-fill: var(--pr-tile-0); --pr-tilt: -2.0deg; --pr-i: 0; }
.pr-tile:nth-child(8n+2) { --pr-tile-fill: var(--pr-tile-1); --pr-tilt: 1.5deg; --pr-i: 1; }
.pr-tile:nth-child(8n+3) { --pr-tile-fill: var(--pr-tile-2); --pr-tilt: -1.0deg; --pr-i: 2; }
.pr-tile:nth-child(8n+4) { --pr-tile-fill: var(--pr-tile-3); --pr-tilt: 2.0deg; --pr-i: 3; }
.pr-tile:nth-child(8n+5) { --pr-tile-fill: var(--pr-tile-4); --pr-tilt: 1.0deg; --pr-i: 4; }
.pr-tile:nth-child(8n+6) { --pr-tile-fill: var(--pr-tile-5); --pr-tilt: -1.5deg; --pr-i: 5; }
.pr-tile:nth-child(8n+7) { --pr-tile-fill: var(--pr-tile-6); --pr-tilt: 2.5deg; --pr-i: 6; }
.pr-tile:nth-child(8n+8) { --pr-tile-fill: var(--pr-tile-7); --pr-tilt: -2.5deg; --pr-i: 7; }
.pr-tile.pr-wiggle { animation: pr-wiggle var(--pr-wiggle-period) ease-in-out infinite alternate; animation-delay: calc(var(--pr-i, 0) * var(--pr-wiggle-phase)); }
@keyframes pr-wiggle { from { transform: rotate(calc(var(--pr-tilt, 0deg) - var(--pr-wiggle-amp))); } to { transform: rotate(calc(var(--pr-tilt, 0deg) + var(--pr-wiggle-amp))); } }
.pr-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: calc(var(--pr-space-l) + var(--pr-control-pad-y)) calc(var(--pr-space-xxl) + var(--pr-control-pad-x));
  font: var(--pr-label-weight) var(--pr-label-size)/var(--pr-label-line) var(--pr-font); letter-spacing: var(--pr-label-tracking);
  background: var(--pr-accent-fill); color: var(--pr-on-accent); border: var(--pr-stroke-button) solid var(--pr-accent); border-radius: var(--pr-radius-button);
  box-shadow: var(--pr-shadow-large) var(--pr-accent-shadow); cursor: pointer; text-decoration: none;
  transition: transform var(--pr-dur-fast) var(--pr-ease-snappy), box-shadow var(--pr-dur-fast) var(--pr-ease-snappy); }
.pr-button:active { transform: scale(var(--pr-press-scale-x), var(--pr-press-scale-y)); box-shadow: var(--pr-shadow-pressed) var(--pr-accent-shadow); }
.pr-button:focus-visible, .pr-tile:focus-visible { outline: 3px solid var(--pr-text-primary); outline-offset: 4px; }
.pr-chip { display: inline-flex; gap: var(--pr-space-s); padding: calc(var(--pr-space-s) + var(--pr-control-pad-y)) calc(var(--pr-space-m) + var(--pr-control-pad-x));
  background: var(--pr-chip); color: var(--pr-on-chip); border-radius: var(--pr-radius-chip); box-shadow: var(--pr-shadow-medium) var(--pr-chip-shadow);
  font: var(--pr-caption-weight) var(--pr-caption-size)/var(--pr-chip-line) var(--pr-font); transform: rotate(-1.5deg); }
.pr-badge { display: inline-block; padding: 2px var(--pr-space-s); border: var(--pr-stroke-chip) solid #1a0b2e; border-radius: var(--pr-radius-badge);
  font: 800 0.8125rem/1.2 var(--pr-font-latin); box-shadow: var(--pr-shadow-small) #1a0b2e; transform: rotate(4.0deg); }
.pr-badge[data-age="family"] { background: var(--pr-badge-family-fill); color: var(--pr-badge-family-text); }
.pr-badge[data-age="teen"] { background: var(--pr-badge-teen-fill); color: var(--pr-badge-teen-text); }
.pr-badge[data-age="adult"] { background: var(--pr-badge-adult-fill); color: var(--pr-badge-adult-text); }

@media (prefers-reduced-motion: reduce) {
  .pr-tile.pr-wiggle { animation: none; }
  .pr-button, .pr-tile { transition: none; }
  .pr-button:active { transform: none; }
}