/* Roxheiris Design System v2 — shared tokens. Load fonts.css before this file. */

/* @tokens base */
:root {
  color-scheme: light dark;

  /* Dawn — primary pink (Roxheiris = "dawn") */
  --dawn-50: #FFF1F6; --dawn-100: #FFE0EC; --dawn-200: #FFC2D8;
  --dawn-300: #FF94BA; --dawn-400: #FF6FA3; --dawn-500: #FF4F8F;
  --dawn-600: #E8337A; --dawn-700: #BF2262; --dawn-800: #8F1A4A;

  /* Sky — secondary cyan */
  --sky-50: #ECFAFE; --sky-100: #D2F3FC; --sky-200: #A6E7F8;
  --sky-300: #6DD6F1; --sky-400: #3DC3E6; --sky-500: #17A9D1;
  --sky-600: #0E88AC; --sky-700: #0D6B88;

  /* Sun — highlight yellow */
  --sun-100: #FFF6D1; --sun-300: #FFE27A; --sun-400: #FFD23F;
  --sun-500: #F5B800; --sun-700: #8A6300;

  /* Ink — cool violet-navy neutrals */
  --ink-0: #FFFFFF; --ink-25: #FAFAFD; --ink-50: #F4F4F9;
  --ink-100: #E9E8F2; --ink-200: #D6D4E4; --ink-300: #B5B2CB;
  --ink-400: #8C88A8; --ink-500: #666283; --ink-600: #4A4666;
  --ink-700: #332F4E; --ink-800: #221F38; --ink-900: #15132A;

  /* Semantic/status colors */
  --success-500: #1FB77A; --success-100: #DBF6EA;
  --warning-500: #F5A100; --warning-100: #FFF0CC;
  --danger-500: #F0435A; --danger-100: #FFE1E5;
  --info-500: var(--sky-500); --info-100: var(--sky-100);

  /* Shibuya Night accent constants */
  --neon-pink: #FF2E88; --neon-cyan: #00E5FF;
  --neon-violet: #B14CFF; --neon-yellow: #FFEA00;

  /* Default palette: Dawn light */
  --brand-primary: var(--dawn-500); --brand-primary-hover: var(--dawn-400);
  --brand-primary-press: var(--dawn-600); --brand-secondary: var(--sky-400);
  --brand-secondary-hover: var(--sky-500); --brand-highlight: var(--sun-400);
  --fg-1: var(--ink-900); --fg-2: var(--ink-600); --fg-3: var(--ink-500);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-dark: #FFFFFF;
  --fg-on-sky: #05020C; --fg-link: var(--dawn-700);
  --surface-page: var(--ink-25); --surface-card: #FFFFFF; --surface-sunken: var(--ink-50);
  --surface-dawn: var(--dawn-50); --surface-sky: var(--sky-50);
  --surface-primary-tint: var(--dawn-50); --surface-secondary-tint: var(--sky-50);
  --surface-night: var(--ink-900); --surface-night-2: var(--ink-800);
  --border-1: var(--ink-100); --border-2: var(--ink-200); --border-strong: var(--ink-900);
  --focus-ring: var(--sky-600); --text-body: var(--fg-1); --text-muted: var(--fg-2);
  --glass-border: rgba(255,255,255,.6); --night-line: rgba(255,255,255,.14);
  --night-muted: rgba(255,255,255,.64); --kana-fill: #FFFFFF; --kana-stroke: 0 transparent;
  --brand-text: var(--brand-primary); --alt-bg-1: var(--surface-page); --alt-bg-2: var(--surface-page);

  /* Typography */
  --font-display: "Dela Gothic One", "M PLUS 2", system-ui, sans-serif;
  --font-sans: "M PLUS 2", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --fs-hero: 88px; --fs-d1: 64px; --fs-d2: 44px; --fs-h1: 32px;
  --fs-h2: 24px; --fs-h3: 19px; --fs-body-lg: 17px; --fs-body: 15px;
  --fs-small: 13px; --fs-micro: 11px;
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900;
  --tracking-display: -0.01em; --tracking-label: 0.14em;

  /* Spacing and radii */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --container-max: 1200px; --tap-min: 44px;

  /* Effects */
  --shadow-1: 0 1px 2px rgba(21,19,42,.06), 0 2px 8px rgba(21,19,42,.05);
  --shadow-2: 0 4px 16px rgba(21,19,42,.08), 0 1px 3px rgba(21,19,42,.06);
  --shadow-3: 0 16px 40px rgba(21,19,42,.14), 0 4px 10px rgba(21,19,42,.06);
  --shadow-pop: 4px 4px 0 var(--border-strong);
  --shadow-pop-sm: 3px 3px 0 var(--border-strong);
  --shadow-pop-lg: 6px 6px 0 var(--border-strong);
  --shadow-pop-dawn: 4px 4px 0 var(--brand-primary);
  --shadow-glow-dawn: 0 8px 24px rgba(255,79,143,.35);
  --btn-glow: none; --glow-text: none; --glow-text-cyan: none; --ticker-glow: none;
  --glass-bg: rgba(255,255,255,.72); --glass-blur: saturate(160%) blur(16px);
  --scrim-bottom: linear-gradient(180deg,rgba(21,19,42,0) 0%,rgba(21,19,42,.72) 100%);
  --dawn-sky: linear-gradient(120deg,var(--dawn-300) 0%,var(--sun-300) 50%,var(--sky-300) 100%);
  --pattern-dots: radial-gradient(var(--ink-200) 1.2px,transparent 1.4px) 0 0/14px 14px;
  --pattern-stripes: repeating-linear-gradient(-45deg,var(--dawn-100) 0 10px,transparent 10px 20px);
  --clip-tab: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);

  /* Motion */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

/* Light palette mappings. These also provide the light fallback for missing/auto mode. */
/* @tokens light:dawn */
:root[data-palette="dawn"] {
  --brand-text: var(--dawn-600); /* display-size accent text (>=3:1) */
  --brand-primary: var(--dawn-500); --brand-primary-hover: var(--dawn-400); --brand-primary-press: var(--dawn-600);
  --brand-secondary: var(--sky-400); --brand-secondary-hover: var(--sky-500); --brand-highlight: var(--sun-400);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--dawn-700);
  --surface-page: var(--ink-25); --surface-card: var(--ink-0); --surface-sunken: var(--ink-50);
  --surface-primary-tint: var(--dawn-50); --surface-secondary-tint: var(--sky-50);
  --surface-dawn: var(--dawn-50); --surface-sky: var(--sky-50);
  --border-strong: var(--ink-900); --focus-ring: var(--sky-600);
  --shadow-pop-dawn: 4px 4px 0 var(--dawn-500); --btn-glow: none;
  --kana-fill: #FFFFFF; --kana-stroke: 0 transparent;
}

/* @tokens light:sky */
:root[data-palette="sky"] {
  --brand-text: var(--sky-600); /* display-size accent text (>=3:1) */
  --brand-primary: var(--sky-400); --brand-primary-hover: var(--sky-500); --brand-primary-press: var(--sky-600);
  --brand-secondary: var(--dawn-500); --brand-secondary-hover: var(--dawn-400); --brand-highlight: var(--sun-400);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--sky-700);
  --surface-page: var(--sky-50); --surface-card: var(--ink-0); --surface-sunken: var(--ink-50);
  --surface-primary-tint: var(--sky-50); --surface-secondary-tint: var(--dawn-50);
  --surface-dawn: var(--dawn-50); --surface-sky: var(--sky-50);
  --border-strong: var(--ink-900); --focus-ring: var(--dawn-700);
  --shadow-pop-dawn: 4px 4px 0 var(--sky-400);
  --shadow-glow-dawn: 0 8px 24px rgba(61,195,230,.35); --btn-glow: none;
  --kana-fill: #FFFFFF; --kana-stroke: 0 transparent;
}

/* @tokens light:sun */
:root[data-palette="sun"] {
  --brand-primary: #E6A800; --brand-primary-hover: #F5B800; --brand-primary-press: #C98F00;
  --brand-text: var(--sun-700); /* brown is for text and links only; fills use the bright sun */
  --brand-secondary: var(--dawn-600); --brand-secondary-hover: var(--dawn-700); --brand-highlight: var(--sun-400);
  --fg-on-brand: #15132A; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--sun-700);
  --surface-page: #FFFBEA; --surface-card: var(--ink-0); --surface-sunken: var(--ink-50);
  --surface-primary-tint: var(--sun-100); --surface-secondary-tint: var(--dawn-50);
  --surface-dawn: var(--sun-100); --surface-sky: var(--dawn-50);
  --alt-bg-1: var(--sun-100); --alt-bg-2: #FFFFFF; /* alternating section grounds (steps, FAQ) */
  --kana-fill: rgba(21,19,42,.09);
  --border-strong: var(--ink-900); --focus-ring: var(--dawn-700);
  --shadow-pop-dawn: 4px 4px 0 var(--sun-700);
  --shadow-glow-dawn: 0 8px 24px rgba(245,184,0,.35); --btn-glow: none;
  --kana-stroke: 0 transparent;
}

/* Shibuya Night foundation. Explicit dark mode and Night palette both use it. */
/* @tokens dark:foundation */
:root[data-theme="dark"],
:root[data-palette="night"] {
  --dawn-50: #2A0B1F; --dawn-100: #3D0F2C; --dawn-200: #6B1748;
  --dawn-300: #FF6FB0; --dawn-400: #FF4A9A; --dawn-500: #FF2E88;
  --dawn-600: #FF5AA3; --dawn-700: #FF85BD; --dawn-800: #FFB3D5;
  --sky-50: #061A26; --sky-100: #0A2A3B; --sky-200: #0F4D66;
  --sky-300: #5CF1FF; --sky-400: #00E5FF; --sky-500: #00C8F0;
  --sky-600: #4DEBFF; --sky-700: #9AF4FF;
  --sun-100: #2A2205; --sun-300: #FFF27A; --sun-400: #FFEA00;
  --sun-500: #FFD000; --sun-700: #FFE680;
  --ink-0: #140D26; --ink-25: #0A0614; --ink-50: #1B1232;
  --ink-100: #2B1F47; --ink-200: #3B2C5E; --ink-300: #5B4B82;
  --ink-400: #8A7BB0; --ink-500: #A99CCB; --ink-600: #C9BFE4;
  --ink-700: #DDD6F0; --ink-800: #EEEAF8; --ink-900: #FFFFFF;
  --success-500: #2BFFA3; --success-100: #06281C;
  --warning-500: #FFB800; --warning-100: #2A1E00;
  --danger-500: #FF4766; --danger-100: #2E0812;
  --info-500: var(--sky-500); --info-100: var(--sky-100);
  --fg-1: #FFFFFF; --fg-2: #C9BFE4; --fg-3: #9C8FC2;
  --fg-on-dark: #FFFFFF; --text-body: var(--fg-1); --text-muted: var(--fg-2);
  --surface-page: #0A0614; --surface-card: #140D26; --surface-sunken: #1B1232;
  --surface-dawn: #1E0A1E; --surface-sky: #07182A;
  --surface-night: #05020C; --surface-night-2: #140B26;
  --border-1: #2B1F47; --border-2: #3B2C5E;
  --glass-bg: rgba(20,13,38,.72); --glass-border: rgba(255,46,136,.35);
  --night-line: rgba(255,255,255,.12); --night-muted: rgba(255,255,255,.62);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-3: 0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,46,136,.18);
  --pattern-dots: radial-gradient(rgba(177,76,255,.28) 1.2px,transparent 1.4px) 0 0/14px 14px;
  --pattern-stripes: repeating-linear-gradient(-45deg,rgba(255,46,136,.16) 0 10px,transparent 10px 20px);
  --dawn-sky: linear-gradient(120deg,var(--neon-pink) 0%,var(--neon-violet) 50%,var(--neon-cyan) 100%);
  color-scheme: dark;
}

/* Dark accent mappings: shared Shibuya grounds, palette-specific neon. */
/* @tokens dark:dawn */
:root[data-palette="dawn"][data-theme="dark"],
:root:not([data-palette])[data-theme="dark"] {
  --brand-text: var(--brand-primary);
  --brand-primary: var(--neon-pink); --brand-primary-hover: var(--dawn-400); --brand-primary-press: var(--dawn-600);
  --brand-secondary: var(--neon-cyan); --brand-secondary-hover: var(--sky-500); --brand-highlight: var(--neon-yellow);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--neon-cyan);
  --surface-primary-tint: var(--dawn-50); --surface-secondary-tint: var(--sky-50);
  --border-strong: var(--neon-pink); --focus-ring: var(--neon-cyan);
  --shadow-pop: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45);
  --shadow-pop-sm: 0 0 12px rgba(255,46,136,.45); --shadow-pop-lg: 0 0 0 1px var(--neon-pink),0 0 32px rgba(255,46,136,.6);
  --shadow-pop-dawn: 0 0 0 1px var(--neon-cyan),0 0 18px rgba(0,229,255,.45);
  --shadow-glow-dawn: 0 0 28px rgba(255,46,136,.75),0 0 4px rgba(255,46,136,.9);
  --btn-glow: 0 0 18px rgba(255,46,136,.55);
  --glow-text: 0 0 12px rgba(255,46,136,.85),0 0 32px rgba(255,46,136,.5);
  --glow-text-cyan: 0 0 14px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4);
  --ticker-glow: 0 0 0 2px var(--neon-pink),0 0 36px rgba(255,46,136,.55);
  --kana-fill: transparent; --kana-stroke: 2px var(--neon-cyan);
}

/* @tokens dark:sky */
:root[data-palette="sky"][data-theme="dark"] {
  --brand-text: var(--brand-primary);
  --brand-primary: var(--neon-cyan); --brand-primary-hover: var(--sky-300); --brand-primary-press: var(--sky-500);
  --brand-secondary: var(--neon-pink); --brand-secondary-hover: var(--dawn-400); --brand-highlight: var(--neon-yellow);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--neon-cyan);
  --surface-primary-tint: var(--sky-50); --surface-secondary-tint: var(--dawn-50);
  --border-strong: var(--neon-cyan); --focus-ring: var(--neon-pink);
  --shadow-pop: 0 0 0 1px var(--neon-cyan),0 0 18px rgba(0,229,255,.45);
  --shadow-pop-sm: 0 0 12px rgba(0,229,255,.45); --shadow-pop-lg: 0 0 0 1px var(--neon-cyan),0 0 32px rgba(0,229,255,.6);
  --shadow-pop-dawn: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45);
  --shadow-glow-dawn: 0 0 28px rgba(0,229,255,.65),0 0 4px rgba(0,229,255,.9);
  --btn-glow: 0 0 18px rgba(0,229,255,.55);
  --glow-text: 0 0 12px rgba(0,229,255,.85),0 0 32px rgba(0,229,255,.5);
  --glow-text-cyan: 0 0 14px rgba(255,46,136,.8),0 0 40px rgba(255,46,136,.4);
  --ticker-glow: 0 0 0 2px var(--neon-cyan),0 0 36px rgba(0,229,255,.55);
  --kana-fill: transparent; --kana-stroke: 2px var(--neon-pink);
}

/* @tokens dark:sun */
:root[data-palette="sun"][data-theme="dark"] {
  --brand-text: var(--brand-primary); --alt-bg-1: var(--surface-page); --alt-bg-2: var(--surface-page); 
  --brand-primary: var(--neon-yellow); --brand-primary-hover: var(--sun-300); --brand-primary-press: var(--sun-500);
  --brand-secondary: var(--neon-pink); --brand-secondary-hover: var(--dawn-400); --brand-highlight: var(--neon-cyan);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--neon-yellow);
  --surface-primary-tint: var(--sun-100); --surface-secondary-tint: var(--dawn-50);
  --border-strong: var(--neon-yellow); --focus-ring: var(--neon-cyan);
  --shadow-pop: 0 0 0 1px var(--neon-yellow),0 0 18px rgba(255,234,0,.4);
  --shadow-pop-sm: 0 0 12px rgba(255,234,0,.4); --shadow-pop-lg: 0 0 0 1px var(--neon-yellow),0 0 32px rgba(255,234,0,.55);
  --shadow-pop-dawn: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45);
  --shadow-glow-dawn: 0 0 28px rgba(255,234,0,.6),0 0 4px rgba(255,234,0,.9);
  --btn-glow: 0 0 18px rgba(255,234,0,.5);
  --glow-text: 0 0 12px rgba(255,234,0,.8),0 0 32px rgba(255,234,0,.45);
  --glow-text-cyan: 0 0 14px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4);
  --ticker-glow: 0 0 0 2px var(--neon-yellow),0 0 36px rgba(255,234,0,.5);
  --kana-fill: transparent; --kana-stroke: 2px var(--neon-cyan);
}

/* @tokens dark:night */
:root[data-palette="night"] {
  --brand-text: var(--brand-primary);
  --brand-primary: var(--neon-pink); --brand-primary-hover: var(--dawn-400); --brand-primary-press: var(--dawn-600);
  --brand-secondary: var(--neon-cyan); --brand-secondary-hover: var(--sky-500); --brand-highlight: var(--neon-yellow);
  --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-on-sky: #05020C; --fg-link: var(--neon-cyan);
  --surface-primary-tint: var(--dawn-50); --surface-secondary-tint: var(--sky-50);
  --border-strong: var(--neon-pink); --focus-ring: var(--neon-cyan);
  --shadow-pop: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45);
  --shadow-pop-sm: 0 0 12px rgba(255,46,136,.45); --shadow-pop-lg: 0 0 0 1px var(--neon-pink),0 0 32px rgba(255,46,136,.6);
  --shadow-pop-dawn: 0 0 0 1px var(--neon-cyan),0 0 18px rgba(0,229,255,.45);
  --shadow-glow-dawn: 0 0 28px rgba(255,46,136,.75),0 0 4px rgba(255,46,136,.9);
  --btn-glow: 0 0 18px rgba(255,46,136,.55);
  --glow-text: 0 0 12px rgba(255,46,136,.85),0 0 32px rgba(255,46,136,.5);
  --glow-text-cyan: 0 0 14px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4);
  --ticker-glow: 0 0 0 2px var(--neon-pink),0 0 36px rgba(255,46,136,.55);
  --kana-fill: transparent; --kana-stroke: 2px var(--neon-cyan);
  color-scheme: dark;
}

/* Missing data-theme or data-theme="auto" follows the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    --dawn-50: #2A0B1F; --dawn-100: #3D0F2C; --dawn-200: #6B1748; --dawn-300: #FF6FB0; --dawn-400: #FF4A9A; --dawn-500: #FF2E88; --dawn-600: #FF5AA3; --dawn-700: #FF85BD; --dawn-800: #FFB3D5;
    --sky-50: #061A26; --sky-100: #0A2A3B; --sky-200: #0F4D66; --sky-300: #5CF1FF; --sky-400: #00E5FF; --sky-500: #00C8F0; --sky-600: #4DEBFF; --sky-700: #9AF4FF;
    --sun-100: #2A2205; --sun-300: #FFF27A; --sun-400: #FFEA00; --sun-500: #FFD000; --sun-700: #FFE680;
    --ink-0: #140D26; --ink-25: #0A0614; --ink-50: #1B1232; --ink-100: #2B1F47; --ink-200: #3B2C5E; --ink-300: #5B4B82; --ink-400: #8A7BB0; --ink-500: #A99CCB; --ink-600: #C9BFE4; --ink-700: #DDD6F0; --ink-800: #EEEAF8; --ink-900: #FFFFFF;
    --success-500: #2BFFA3; --success-100: #06281C; --warning-500: #FFB800; --warning-100: #2A1E00; --danger-500: #FF4766; --danger-100: #2E0812;
    --fg-1: #FFFFFF; --fg-2: #C9BFE4; --fg-3: #9C8FC2; --fg-on-dark: #FFFFFF; --text-body: var(--fg-1); --text-muted: var(--fg-2);
    --surface-page: #0A0614; --surface-card: #140D26; --surface-sunken: #1B1232; --surface-dawn: #1E0A1E; --surface-sky: #07182A; --surface-night: #05020C; --surface-night-2: #140B26;
    --border-1: #2B1F47; --border-2: #3B2C5E; --glass-bg: rgba(20,13,38,.72); --glass-border: rgba(255,46,136,.35); --night-line: rgba(255,255,255,.12); --night-muted: rgba(255,255,255,.62);
    --shadow-1: 0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4); --shadow-2: 0 4px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4); --shadow-3: 0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,46,136,.18);
    --pattern-dots: radial-gradient(rgba(177,76,255,.28) 1.2px,transparent 1.4px) 0 0/14px 14px; --pattern-stripes: repeating-linear-gradient(-45deg,rgba(255,46,136,.16) 0 10px,transparent 10px 20px); --dawn-sky: linear-gradient(120deg,var(--neon-pink) 0%,var(--neon-violet) 50%,var(--neon-cyan) 100%);
    color-scheme: dark;
  }

  :root:not([data-palette]):not([data-theme]), :root:not([data-palette])[data-theme="auto"],
  :root[data-palette="dawn"]:not([data-theme]), :root[data-palette="dawn"][data-theme="auto"] {
    --brand-text: var(--brand-primary);
    --brand-primary: var(--neon-pink); --brand-primary-hover: var(--dawn-400); --brand-primary-press: var(--dawn-600); --brand-secondary: var(--neon-cyan); --brand-secondary-hover: var(--sky-500); --brand-highlight: var(--neon-yellow);
    --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-link: var(--neon-cyan); --surface-primary-tint: var(--dawn-50); --surface-secondary-tint: var(--sky-50); --border-strong: var(--neon-pink); --focus-ring: var(--neon-cyan);
    --shadow-pop: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45); --shadow-pop-sm: 0 0 12px rgba(255,46,136,.45); --shadow-pop-lg: 0 0 0 1px var(--neon-pink),0 0 32px rgba(255,46,136,.6); --shadow-pop-dawn: 0 0 0 1px var(--neon-cyan),0 0 18px rgba(0,229,255,.45); --shadow-glow-dawn: 0 0 28px rgba(255,46,136,.75),0 0 4px rgba(255,46,136,.9); --btn-glow: 0 0 18px rgba(255,46,136,.55); --glow-text: 0 0 12px rgba(255,46,136,.85),0 0 32px rgba(255,46,136,.5); --glow-text-cyan: 0 0 14px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4); --ticker-glow: 0 0 0 2px var(--neon-pink),0 0 36px rgba(255,46,136,.55); --kana-fill: transparent; --kana-stroke: 2px var(--neon-cyan);
  }
  :root[data-palette="sky"]:not([data-theme]), :root[data-palette="sky"][data-theme="auto"] {
    --brand-text: var(--brand-primary);
    --brand-primary: var(--neon-cyan); --brand-primary-hover: var(--sky-300); --brand-primary-press: var(--sky-500); --brand-secondary: var(--neon-pink); --brand-secondary-hover: var(--dawn-400); --brand-highlight: var(--neon-yellow);
    --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-link: var(--neon-cyan); --surface-primary-tint: var(--sky-50); --surface-secondary-tint: var(--dawn-50); --border-strong: var(--neon-cyan); --focus-ring: var(--neon-pink);
    --shadow-pop: 0 0 0 1px var(--neon-cyan),0 0 18px rgba(0,229,255,.45); --shadow-pop-sm: 0 0 12px rgba(0,229,255,.45); --shadow-pop-lg: 0 0 0 1px var(--neon-cyan),0 0 32px rgba(0,229,255,.6); --shadow-pop-dawn: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45); --shadow-glow-dawn: 0 0 28px rgba(0,229,255,.65),0 0 4px rgba(0,229,255,.9); --btn-glow: 0 0 18px rgba(0,229,255,.55); --glow-text: 0 0 12px rgba(0,229,255,.85),0 0 32px rgba(0,229,255,.5); --glow-text-cyan: 0 0 14px rgba(255,46,136,.8),0 0 40px rgba(255,46,136,.4); --ticker-glow: 0 0 0 2px var(--neon-cyan),0 0 36px rgba(0,229,255,.55); --kana-fill: transparent; --kana-stroke: 2px var(--neon-pink);
  }
  :root[data-palette="sun"]:not([data-theme]), :root[data-palette="sun"][data-theme="auto"] {
    --brand-text: var(--brand-primary); --alt-bg-1: var(--surface-page); --alt-bg-2: var(--surface-page); 
    --brand-primary: var(--neon-yellow); --brand-primary-hover: var(--sun-300); --brand-primary-press: var(--sun-500); --brand-secondary: var(--neon-pink); --brand-secondary-hover: var(--dawn-400); --brand-highlight: var(--neon-cyan);
    --fg-on-brand: #05020C; --fg-on-secondary: #05020C; --fg-link: var(--neon-yellow); --surface-primary-tint: var(--sun-100); --surface-secondary-tint: var(--dawn-50); --border-strong: var(--neon-yellow); --focus-ring: var(--neon-cyan);
    --shadow-pop: 0 0 0 1px var(--neon-yellow),0 0 18px rgba(255,234,0,.4); --shadow-pop-sm: 0 0 12px rgba(255,234,0,.4); --shadow-pop-lg: 0 0 0 1px var(--neon-yellow),0 0 32px rgba(255,234,0,.55); --shadow-pop-dawn: 0 0 0 1px var(--neon-pink),0 0 18px rgba(255,46,136,.45); --shadow-glow-dawn: 0 0 28px rgba(255,234,0,.6),0 0 4px rgba(255,234,0,.9); --btn-glow: 0 0 18px rgba(255,234,0,.5); --glow-text: 0 0 12px rgba(255,234,0,.8),0 0 32px rgba(255,234,0,.45); --glow-text-cyan: 0 0 14px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4); --ticker-glow: 0 0 0 2px var(--neon-yellow),0 0 36px rgba(255,234,0,.5); --kana-fill: transparent; --kana-stroke: 2px var(--neon-cyan);
  }
}

/* Base element rules from tokens/base.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
a { color: var(--fg-link); text-decoration: none; font-weight: 700; }
a:hover { color: var(--brand-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--brand-primary); color: var(--fg-on-brand); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Compatibility layer — stable names used by the current site/app. */
:root {
  --surface-base: var(--surface-page); --surface-raised: var(--surface-card);
  --surface-inset: var(--surface-sunken); --surface-overlay: var(--surface-card);
  --border-subtle: var(--border-1); --border-default: var(--border-2);
  --text-primary: var(--fg-1); --text-secondary: var(--fg-2); --text-tertiary: var(--fg-3);
  --text-on-accent: var(--fg-on-brand);
  --accent: var(--brand-primary); --accent-hover: var(--brand-primary-hover); --accent-active: var(--brand-primary-press);
  --accent-subtle: var(--surface-primary-tint); --accent-border: var(--border-strong); --accent-text: var(--fg-link);
  --status-success: var(--success-500); --status-success-subtle: var(--success-100);
  --status-error: var(--danger-500); --status-error-subtle: var(--danger-100);
  --font-ui: var(--font-sans); --shadow-sm: var(--shadow-1); --shadow-card: var(--shadow-2);

  --emotion-neutral: var(--ink-500); --emotion-annoyed: var(--danger-500);
  --emotion-excited: var(--dawn-600); --emotion-proud: var(--sun-700);
  --emotion-happy: var(--sun-500); --emotion-playful: var(--success-500);
  --emotion-gentle: var(--success-500); --emotion-sleepy: var(--sky-500);
  --emotion-thoughtful: var(--sky-600); --emotion-serious: var(--ink-700);
  --emotion-worried: var(--sky-700); --emotion-teasing: var(--dawn-400);
  --emotion-shy: var(--dawn-300); --emotion-pouty: var(--dawn-500);
  --emotion-bored: var(--ink-400); --emotion-current: var(--emotion-neutral);
  --bub-emotion: var(--emotion-current);
}

.stage {
  --mao-x: .5;
  --mao-visible: .62;
  --mao-drop: .10;
}