/* AUTO-GENERATED from static/css/themes/**/*.css — do not edit. */

/* theme: aurora (dark) */
html[data-theme="aurora"] {
  color-scheme: dark;
  --primary-color: #76e7c8;
  --secondary-color: #b384ff;
  --accent-color: #ff9ee2;
  --background-color: #07101f;
  --text-color: #e4ecf6;
  --color-1: #112a3c;
  --color-2: #1a1c4a;
  --color-3: #251a44;
  --color-4: #0f2638;
  --color-5: #1a1340;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(118,231,200,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30), 0 2px 4px -1px rgba(179,132,255,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.36), 0 0 14px rgba(118,231,200,0.12), 0 4px 6px -2px rgba(179,132,255,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.42), 0 0 22px rgba(255,158,226,0.12), 0 10px 10px -5px rgba(0,0,0,0.20);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 12s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(16px) saturate(1.5) brightness(0.85);
}

/* theme: crimson (dark) */
html[data-theme="crimson"] {
  color-scheme: dark;
  --primary-color: #ff6b7a;
  --secondary-color: #ff9ba5;
  --accent-color: #ff8591;
  --background-color: #0e0508;
  --text-color: #f8dde0;
  --color-1: #1e0c10;
  --color-2: #240e13;
  --color-3: #2a1016;
  --color-4: #1a0b0e;
  --color-5: #160a0c;
  --theme-page-texture:
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--accent-color) 30%, transparent), transparent 34%),
    linear-gradient(12deg, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 42%, color-mix(in srgb, var(--secondary-color) 14%, transparent));
  --theme-surface-pattern:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 54%);
  --theme-hover-transform: translateY(-3px) scale(1.01);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.36), 0 0 5px rgba(255,107,122,0.12);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.44), 0 0 12px rgba(255,107,122,0.16), 0 2px 4px -1px rgba(0,0,0,0.26);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 0 20px rgba(255,107,122,0.20), 0 4px 6px -2px rgba(0,0,0,0.28);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 0 28px rgba(255,107,122,0.24), 0 10px 10px -5px rgba(0,0,0,0.28);
  --transition-duration: 0.25s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 22s;
  --site-bg-orb-duration: 28s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.4);
  --glass-filter: blur(14px) saturate(1.4) brightness(0.86);
}

/* theme: dark (dark) */
html[data-theme="dark"] {
  color-scheme: dark;
  --primary-color: #40f2e3;
  --secondary-color: #4fb9ee;
  --accent-color: #62f8ec;
  --background-color: #0b1120;
  --text-color: #e2e8f0;
  --color-1: #0d4440;
  --color-2: #0e3e4e;
  --color-3: #0f3357;
  --color-4: #0e4835;
  --color-5: #0e3a36;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.20), 0 1px 3px 0 rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.28), 0 2px 4px -1px rgba(0,0,0,0.16);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -2px rgba(0,0,0,0.20);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.40), 0 10px 10px -5px rgba(0,0,0,0.20);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(14px) saturate(1.3) brightness(0.9);
}

/* theme: discord (dark) */
html[data-theme="discord"] {
  color-scheme: dark;
  --primary-color: #5865f2;
  --secondary-color: #00a8fc;
  --accent-color: #5865f2;
  --background-color: #313338;
  --text-color: #dbdee1;
  --color-1: #2b2d31;
  --color-2: #232428;
  --color-3: #1e1f22;
  --color-4: #2e3035;
  --color-5: #404249;
  --site-font: "Inter", "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --border-radius: 8px;
}

/* Scoped after glass.css; wins by cascade order (same specificity as the dark-mode glass defaults) */
html[data-theme="discord"] {
  --ap-page-base: #313338;
  --ap-page-base-2: #2b2d31;
  --ap-page-base-3: #1e1f22;
  --ap-text: #dbdee1;
  --ap-text-soft: rgba(219, 222, 225, 0.76);
  --ap-text-faint: rgba(219, 222, 225, 0.50);

  /* Flat Discord-modal surfaces — no glassy blur, solid dark fills */
  --ap-panel:
    linear-gradient(180deg,
      rgba(43, 45, 49, 0.98) 0%,
      rgba(35, 36, 40, 0.98) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(49, 51, 56, 0.99) 0%,
      rgba(43, 45, 49, 0.99) 100%);
  --ap-panel-border: rgba(255, 255, 255, 0.06);
  --ap-panel-highlight: rgba(88, 101, 242, 0.08);
  --ap-panel-shadow:
    0 4px 4px rgba(0, 0, 0, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ap-panel-shadow-flat:
    0 4px 4px rgba(0, 0, 0, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.28);
  --ap-panel-blur: blur(0px) saturate(1);
  --ap-local-tint: rgba(88, 101, 242, 0.08);
  --ap-local-tint-strong: rgba(88, 101, 242, 0.14);

  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.97;
  --theme-control-alpha: 0.97;
  --theme-surface-pattern:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(88, 101, 242, 0.12), transparent 50%);
  --theme-hover-transform: translateY(-1px);
}

/* theme: dracula (dark) */
html[data-theme="dracula"] {
  color-scheme: dark;
  --primary-color: #bd93f9;
  --secondary-color: #ff79c6;
  --accent-color: #50fa7b;
  --background-color: #282a36;
  --text-color: #f8f8f2;
  --color-1: #353746;
  --color-2: #3c3f52;
  --color-3: #44475a;
  --color-4: #343646;
  --color-5: #2f3141;
  --site-font: "Fira Code", "JetBrains Mono", monospace;
  --border-radius: 8px;
  --theme-page-texture:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent 36%);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 46%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary-color) 10%, transparent), transparent);
  --theme-backdrop-filter: blur(14px) saturate(1.9);
  --theme-text-effect: 0 0 12px color-mix(in srgb, var(--accent-color) 28%, transparent);
  --theme-hover-transform: translateY(-3px) scale(1.012);
  --theme-bg-animation: themeNeonSweep;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 0 rgba(189,147,249,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.38), 0 2px 4px -1px rgba(189,147,249,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.44), 0 0 14px rgba(189,147,249,0.12), 0 4px 6px -2px rgba(0,0,0,0.24);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.50), 0 0 22px rgba(189,147,249,0.14), 0 10px 10px -5px rgba(255,121,198,0.10);
  --transition-duration: 0.28s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 22px;
  --radius-pill: 999px;
  --site-surface-blur: blur(20px) saturate(1.3);
  --glass-filter: blur(12px) saturate(1.3) brightness(0.92);
}

/* theme: emerald (dark) */
html[data-theme="emerald"] {
  color-scheme: dark;
  --primary-color: #2ecc8f;
  --secondary-color: #1d8a64;
  --accent-color: #5cf2bb;
  --background-color: #051512;
  --text-color: #d2f1e1;
  --color-1: #082822;
  --color-2: #0a3128;
  --color-3: #0d3a30;
  --color-4: #08291f;
  --color-5: #0a3024;
  --theme-page-texture:
    radial-gradient(ellipse at 16% 18%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 28%),
    radial-gradient(ellipse at 84% 72%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 30%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 8%, transparent), transparent 60%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.24), 0 1px 3px 0 rgba(46,204,143,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.32), 0 2px 4px -1px rgba(46,204,143,0.12);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.38), 0 0 14px rgba(46,204,143,0.14), 0 4px 6px -2px rgba(0,0,0,0.22);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.44), 0 0 22px rgba(46,204,143,0.16), 0 10px 10px -5px rgba(0,0,0,0.22);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(14px) saturate(1.4) brightness(0.88);
}

/* theme: forest (dark) */
html[data-theme="forest"] {
  color-scheme: dark;
  --primary-color: #7fc88a;
  --secondary-color: #4f9263;
  --accent-color: #a7e0aa;
  --background-color: #0a1611;
  --text-color: #d6ecd5;
  --color-1: #15301f;
  --color-2: #1a3a23;
  --color-3: #1c4129;
  --color-4: #163521;
  --color-5: #122a1c;
  --theme-page-texture:
    radial-gradient(ellipse at 16% 18%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 28%),
    radial-gradient(ellipse at 84% 72%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 30%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 8%, transparent), transparent 60%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.22), 0 1px 3px 0 rgba(79,146,99,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30), 0 2px 4px -1px rgba(79,146,99,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.36), 0 0 10px rgba(127,200,138,0.08), 0 4px 6px -2px rgba(0,0,0,0.20);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.42), 0 0 16px rgba(127,200,138,0.10), 0 10px 10px -5px rgba(0,0,0,0.20);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(14px) saturate(1.3) brightness(0.88);
}

/* theme: github (dark) */
html[data-theme="github"] {
  color-scheme: dark;
  --primary-color: #58a6ff;
  --secondary-color: #79c0ff;
  --accent-color: #58a6ff;
  --background-color: #0d1117;
  --text-color: #c9d1d9;
  --color-1: #161b22;
  --color-2: #1c2128;
  --color-3: #21262d;
  --color-4: #13181f;
  --color-5: #0f141b;
  --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --border-radius: 6px;
}

/* Scoped after glass.css; wins by cascade order (same specificity as the dark-mode glass defaults) */
html[data-theme="github"] {
  --ap-page-base: #0d1117;
  --ap-page-base-2: #161b22;
  --ap-page-base-3: #21262d;
  --ap-text: #c9d1d9;
  --ap-text-soft: rgba(201, 209, 217, 0.76);
  --ap-text-faint: rgba(201, 209, 217, 0.50);

  /* Flat GitHub-style surfaces — solid fills, 1px #30363d borders, no blur */
  --ap-panel:
    linear-gradient(180deg,
      rgba(22, 27, 34, 0.98) 0%,
      rgba(18, 22, 28, 0.98) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(28, 33, 40, 0.99) 0%,
      rgba(22, 27, 34, 0.99) 100%);
  --ap-panel-border: rgba(48, 54, 61, 1);
  --ap-panel-highlight: rgba(88, 166, 255, 0.04);
  --ap-panel-shadow:
    0 0 0 1px rgba(48, 54, 61, 0.9),
    0 2px 6px rgba(1, 4, 9, 0.6),
    0 8px 24px rgba(1, 4, 9, 0.4);
  --ap-panel-shadow-flat:
    0 0 0 1px rgba(48, 54, 61, 0.9),
    0 2px 6px rgba(1, 4, 9, 0.6);
  --ap-panel-blur: blur(0px) saturate(1);
  --ap-local-tint: rgba(88, 166, 255, 0.05);
  --ap-local-tint-strong: rgba(88, 166, 255, 0.10);

  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.98;
  --theme-control-alpha: 0.98;
  --theme-surface-pattern:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(88, 166, 255, 0.06), transparent 50%);
  --theme-hover-transform: translateY(-1px);
}

/* theme: ice (dark) */
html[data-theme="ice"] {
  color-scheme: dark;
  --primary-color: #a0e4ff;
  --secondary-color: #6cb6e0;
  --accent-color: #d4f3ff;
  --background-color: #07131e;
  --text-color: #e0f0fa;
  --color-1: #0e2536;
  --color-2: #112c40;
  --color-3: #143348;
  --color-4: #0e2335;
  --color-5: #122c40;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.22), 0 1px 3px 0 rgba(160,228,255,0.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.28), 0 2px 4px -1px rgba(160,228,255,0.12);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.34), 0 0 14px rgba(160,228,255,0.14), 0 4px 6px -2px rgba(0,0,0,0.18);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.38), 0 0 22px rgba(160,228,255,0.16), 0 10px 10px -5px rgba(0,0,0,0.18);
  --transition-duration: 0.25s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(36px) saturate(1.6);
  --glass-filter: blur(20px) saturate(1.6) brightness(0.86);
}

/* theme: matrix (dark) */
html[data-theme="matrix"] {
  color-scheme: dark;
  --primary-color: #38f96b;
  --secondary-color: #1cb050;
  --accent-color: #82ffa1;
  --background-color: #020a04;
  --text-color: #c8ffd5;
  --color-1: #06180c;
  --color-2: #0a2410;
  --color-3: #0d2c14;
  --color-4: #061a0a;
  --color-5: #082010;
  --site-font: "Fira Code", "JetBrains Mono", "Cascadia Code", monospace;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(57, 255, 20, 0.06) 0 1px, transparent 1px 18px);
  --theme-surface-pattern:
    repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.10) 0 1px, transparent 1px 5px);
  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.78;
  --theme-control-alpha: 0.72;
  --theme-hover-transform: translate(2px, -2px);
  --theme-text-effect: 0 0 8px color-mix(in srgb, var(--accent-color) 36%, transparent);
  --theme-bg-animation: themeScanlinePan;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.40), 0 0 4px rgba(56,249,107,0.15);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.46), 0 0 10px rgba(56,249,107,0.20), 0 2px 4px -1px rgba(0,0,0,0.28);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 0 18px rgba(56,249,107,0.28), 0 4px 6px -2px rgba(0,0,0,0.30);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 0 28px rgba(56,249,107,0.32), 0 10px 10px -5px rgba(0,0,0,0.30);
  --transition-duration: 0.18s;
  --transition-easing: steps(8, end);
  --site-bg-motion-duration: 8s;
  --site-bg-orb-duration: 10s;
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-3xl: 18px;
  --radius-pill: 999px;
  --site-surface-blur: blur(0px) saturate(1);
  --glass-filter: blur(0px) saturate(1) brightness(0.9);
}

/* theme: midnight (dark) */
html[data-theme="midnight"] {
  color-scheme: dark;
  --primary-color: #8eb4ff;
  --secondary-color: #b8d0ff;
  --accent-color: #aac4ff;
  --background-color: #060b14;
  --text-color: #dce8f8;
  --color-1: #0d1426;
  --color-2: #101a30;
  --color-3: #14213d;
  --color-4: #0e1729;
  --color-5: #0a1325;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.28), 0 1px 3px 0 rgba(142,180,255,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.36), 0 2px 4px -1px rgba(142,180,255,0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.42), 0 0 12px rgba(142,180,255,0.08), 0 4px 6px -2px rgba(0,0,0,0.24);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.50), 0 0 20px rgba(142,180,255,0.10), 0 10px 10px -5px rgba(0,0,0,0.24);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 36s;
  --site-bg-orb-duration: 44s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(16px) saturate(1.3) brightness(0.85);
}

/* theme: neon (dark) */
html[data-theme="neon"] {
  color-scheme: dark;
  --primary-color: #ff3df0;
  --secondary-color: #3df0ff;
  --accent-color: #d8ff3d;
  --background-color: #050010;
  --text-color: #f0e6ff;
  --color-1: #1a0033;
  --color-2: #00263a;
  --color-3: #1e1a00;
  --color-4: #200033;
  --color-5: #00352f;
  --theme-page-texture:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent 36%);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 46%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary-color) 10%, transparent), transparent);
  --theme-backdrop-filter: blur(14px) saturate(1.9);
  --theme-text-effect: 0 0 12px color-mix(in srgb, var(--accent-color) 28%, transparent);
  --theme-hover-transform: translateY(-3px) scale(1.012);
  --theme-bg-animation: themeNeonSweep;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.40), 0 0 6px rgba(255,61,240,0.18);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.46), 0 0 12px rgba(255,61,240,0.22), 0 2px 4px -1px rgba(0,0,0,0.28);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 0 20px rgba(255,61,240,0.30), 0 4px 6px -2px rgba(0,0,0,0.30);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 0 30px rgba(255,61,240,0.35), 0 10px 10px -5px rgba(61,240,255,0.15);
  --transition-duration: 0.18s;
  --transition-easing: cubic-bezier(0.25, 0, 1, 1);
  --site-bg-motion-duration: 6s;
  --site-bg-orb-duration: 8s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(16px) saturate(2.4);
  --glass-filter: blur(10px) saturate(2.0) brightness(0.8);
}

/* theme: netflix (dark) */
html[data-theme="netflix"] {
  color-scheme: dark;
  --primary-color: #e50914;
  --secondary-color: #b1060f;
  --accent-color: #e50914;
  --background-color: #141414;
  --text-color: #f5f5f1;
  --color-1: #181818;
  --color-2: #1f1f1f;
  --color-3: #0e0e0e;
  --color-4: #221111;
  --color-5: #1a1a1a;
  --site-font: "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --border-radius: 4px;

  /* Netflix-modal surfaces: flat near-black panels, no glass, hard-edged */
  --ap-panel:
    linear-gradient(180deg,
      rgba(24, 24, 24, 0.98) 0%,
      rgba(20, 20, 20, 0.98) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(31, 31, 31, 0.99) 0%,
      rgba(24, 24, 24, 0.99) 100%);
  --ap-panel-border: rgba(255, 255, 255, 0.06);
  --ap-panel-highlight: rgba(229, 9, 20, 0.10);
  --ap-panel-shadow:
    0 4px 4px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --ap-panel-shadow-flat:
    0 4px 4px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5);
  --ap-panel-blur: blur(0px) saturate(1);
  --ap-local-tint: rgba(229, 9, 20, 0.10);
  --ap-local-tint-strong: rgba(229, 9, 20, 0.18);

  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.98;
  --theme-control-alpha: 0.98;
  --theme-surface-pattern:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(229, 9, 20, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 30%);
  --theme-hover-transform: scale(1.04);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 10px 10px -5px rgba(0,0,0,0.3);
  --transition-duration: 0.15s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 0s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-pill: 999px;
}

/* theme: obsidian (dark) */
html[data-theme="obsidian"] {
  color-scheme: dark;
  --primary-color: #9c8df0;
  --secondary-color: #6b5dd1;
  --accent-color: #c6b9ff;
  --background-color: #04040a;
  --text-color: #ecebf5;
  --color-1: #0a0a14;
  --color-2: #0e0e1c;
  --color-3: #121225;
  --color-4: #08081a;
  --color-5: #0c0c1e;
  --theme-page-texture:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
    repeating-linear-gradient(135deg, rgba(127, 139, 155, 0.035) 0 1px, transparent 1px 18px);
  --theme-surface-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%);
  --theme-surface-alpha: 0.68;
  --theme-control-alpha: 0.62;
  --theme-hover-transform: translateY(-1px);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.36), 0 1px 3px 0 rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.44), 0 2px 4px -1px rgba(0,0,0,0.28);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -2px rgba(0,0,0,0.32);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.56), 0 10px 10px -5px rgba(0,0,0,0.32);
  --transition-duration: 0.2s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --site-surface-blur: blur(0px) saturate(1);
  --glass-filter: blur(0px) saturate(1) brightness(0.88);
}

/* theme: ocean (dark) */
html[data-theme="ocean"] {
  color-scheme: dark;
  --primary-color: #6dd0e6;
  --secondary-color: #4d8ec4;
  --accent-color: #8af3ff;
  --background-color: #06121f;
  --text-color: #d2e8f4;
  --color-1: #0e2a3c;
  --color-2: #112f44;
  --color-3: #133a55;
  --color-4: #0e2839;
  --color-5: #102e44;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.22), 0 1px 3px 0 rgba(109,208,230,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30), 0 2px 4px -1px rgba(109,208,230,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.36), 0 0 12px rgba(109,208,230,0.10), 0 4px 6px -2px rgba(0,0,0,0.20);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.42), 0 0 20px rgba(109,208,230,0.12), 0 10px 10px -5px rgba(0,0,0,0.20);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(36px) saturate(1.6);
  --glass-filter: blur(18px) saturate(1.5) brightness(0.88);
}

/* theme: slate (dark) */
html[data-theme="slate"] {
  color-scheme: dark;
  --primary-color: #94a8c4;
  --secondary-color: #b0c4d8;
  --accent-color: #a8bcd0;
  --background-color: #080c10;
  --text-color: #d8e4f0;
  --color-1: #101620;
  --color-2: #141c28;
  --color-3: #18222e;
  --color-4: #0e1420;
  --color-5: #0c1018;
  --theme-page-texture:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
    repeating-linear-gradient(135deg, rgba(127, 139, 155, 0.04) 0 1px, transparent 1px 18px);
  --theme-surface-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 48%);
  --theme-surface-alpha: 0.68;
  --theme-control-alpha: 0.62;
  --theme-hover-transform: translateY(-1px);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.28), 0 1px 3px 0 rgba(148,168,196,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.36), 0 2px 4px -1px rgba(148,168,196,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.42), 0 0 12px rgba(148,168,196,0.08), 0 4px 6px -2px rgba(0,0,0,0.24);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.48), 0 0 18px rgba(148,168,196,0.10), 0 10px 10px -5px rgba(0,0,0,0.24);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 36s;
  --site-bg-orb-duration: 44s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(14px) saturate(1.2) brightness(0.88);
}

/* theme: spotify (dark) */
html[data-theme="spotify"] {
  color-scheme: dark;
  --primary-color: #1ed760;
  --secondary-color: #1db954;
  --accent-color: #1ed760;
  --background-color: #121212;
  --text-color: #e8f5ec;
  --color-1: #181818;
  --color-2: #1a2e20;
  --color-3: #0e1f14;
  --color-4: #191919;
  --color-5: #16281c;
  --site-font: "Circular Std", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --theme-page-texture:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 40%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-color) 60%, transparent) 70%);
  --theme-surface-pattern:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 6%, transparent), transparent 55%);
  --theme-hover-transform: translateY(-2px) scale(1.015);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4), 0 0 4px rgba(30,215,96,0.16);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 0 14px rgba(30,215,96,0.22), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 0 24px rgba(30,215,96,0.26), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 0 34px rgba(30,215,96,0.3), 0 10px 10px -5px rgba(0,0,0,0.3);
  --transition-duration: 0.2s;
  --transition-easing: cubic-bezier(0.3, 0, 0.2, 1);
  --site-bg-motion-duration: 22s;
  --site-bg-orb-duration: 28s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --site-surface-blur: blur(22px) saturate(1.3);
  --glass-filter: blur(12px) saturate(1.5) brightness(0.86);
}

/* theme: synthwave (dark) */
html[data-theme="synthwave"] {
  color-scheme: dark;
  --primary-color: #f92aad;
  --secondary-color: #7b2fff;
  --accent-color: #00e5ff;
  --background-color: #0d0221;
  --text-color: #f4f0ff;
  --color-1: #1a0840;
  --color-2: #220a50;
  --color-3: #2a0e5e;
  --color-4: #160630;
  --color-5: #1e0a48;
  --site-font: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --border-radius: 2px;
  --theme-page-texture:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent 36%);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 46%),
    linear-gradient(90deg, color-mix(in srgb, var(--secondary-color) 10%, transparent), transparent);
  --theme-backdrop-filter: blur(14px) saturate(1.9);
  --theme-text-effect: 0 0 12px color-mix(in srgb, var(--accent-color) 28%, transparent);
  --theme-hover-transform: translateY(-3px) scale(1.012);
  --theme-bg-animation: themeNeonSweep;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.40), 0 0 8px rgba(249,42,173,0.20);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.46), 0 0 16px rgba(249,42,173,0.26), 0 2px 4px -1px rgba(123,47,255,0.16);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.52), 0 0 24px rgba(249,42,173,0.32), 0 4px 6px -2px rgba(0,229,255,0.14);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.58), 0 0 36px rgba(249,42,173,0.36), 0 10px 10px -5px rgba(0,229,255,0.18);
  --transition-duration: 0.18s;
  --transition-easing: cubic-bezier(0.25, 0, 1, 1);
  --site-bg-motion-duration: 8s;
  --site-bg-orb-duration: 10s;
  --radius-xs: 0px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-2xl: 6px;
  --radius-3xl: 8px;
  --radius-pill: 999px;
  --site-surface-blur: blur(16px) saturate(2.0);
  --glass-filter: blur(10px) saturate(2.0) brightness(0.78);
}

/* theme: terminal (dark) */
html[data-theme="terminal"] {
  color-scheme: dark;
  --primary-color: #00ff41;
  --secondary-color: #00cc33;
  --accent-color: #39ff14;
  --background-color: #0c0c0c;
  --text-color: #ccffcc;
  --color-1: #001400;
  --color-2: #001a00;
  --color-3: #002200;
  --color-4: #001000;
  --color-5: #001800;
  --site-font: "IBM Plex Mono", "Fira Code", "Courier New", monospace;
  --border-radius: 0px;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.06) 0 1px, transparent 1px 18px);
  --theme-surface-pattern:
    repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.10) 0 1px, transparent 1px 5px);
  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.78;
  --theme-control-alpha: 0.72;
  --theme-hover-transform: translate(2px, -2px);
  --theme-text-effect: 0 0 8px color-mix(in srgb, var(--accent-color) 36%, transparent);
  --theme-bg-animation: themeScanlinePan;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.50), 0 0 4px rgba(0,255,65,0.20);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.56), 0 0 10px rgba(0,255,65,0.28), 0 2px 4px -1px rgba(0,0,0,0.36);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.60), 0 0 18px rgba(0,255,65,0.36), 0 4px 6px -2px rgba(0,0,0,0.38);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.65), 0 0 28px rgba(0,255,65,0.40), 0 10px 10px -5px rgba(0,0,0,0.38);
  --transition-duration: 0.08s;
  --transition-easing: steps(4, end);
  --site-bg-motion-duration: 99999s;
  --site-bg-orb-duration: 99999s;
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-pill: 0px;
  --site-surface-blur: blur(0px) saturate(1);
  --glass-filter: blur(0px) saturate(1) brightness(0.9);
}

/* theme: volcano (dark) */
html[data-theme="volcano"] {
  color-scheme: dark;
  --primary-color: #ff5e3a;
  --secondary-color: #c93222;
  --accent-color: #ffae3a;
  --background-color: #100806;
  --text-color: #f5d8ce;
  --color-1: #2a0e08;
  --color-2: #34120a;
  --color-3: #3d160c;
  --color-4: #220c08;
  --color-5: #2e1208;
  --theme-page-texture:
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--accent-color) 30%, transparent), transparent 34%),
    linear-gradient(12deg, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 42%, color-mix(in srgb, var(--secondary-color) 14%, transparent));
  --theme-surface-pattern:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 54%);
  --theme-hover-transform: translateY(-3px) scale(1.01);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.36), 0 0 5px rgba(255,94,58,0.18);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.44), 0 0 12px rgba(255,94,58,0.22), 0 2px 4px -1px rgba(0,0,0,0.26);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 0 20px rgba(255,94,58,0.28), 0 4px 6px -2px rgba(0,0,0,0.28);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 0 30px rgba(255,94,58,0.32), 0 10px 10px -5px rgba(255,174,58,0.15);
  --transition-duration: 0.22s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 18s;
  --site-bg-orb-duration: 24s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.6) brightness(0.82);
}

/* theme: windows (dark) */
html[data-theme="windows"] {
  color-scheme: dark;
  --primary-color: #60cdff;
  --secondary-color: #0078d4;
  --accent-color: #60cdff;
  --background-color: #202020;
  --text-color: #f3f3f3;
  --color-1: #2c2c2c;
  --color-2: #262626;
  --color-3: #1c1c1c;
  --color-4: #23272e;
  --color-5: #2a2e35;
  --site-font: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --theme-page-texture:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 34%),
    radial-gradient(ellipse at 82% 78%, color-mix(in srgb, var(--secondary-color) 14%, transparent), transparent 32%);
  --theme-surface-pattern:
    linear-gradient(160deg, color-mix(in srgb, var(--primary-color) 6%, transparent), transparent 55%);
  --theme-hover-transform: translateY(-1px);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3), 0 0 1px rgba(96,205,255,0.14);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.38), 0 0 8px rgba(96,205,255,0.10), 0 2px 4px -1px rgba(0,0,0,0.24);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.44), 0 0 16px rgba(96,205,255,0.12), 0 4px 6px -2px rgba(0,0,0,0.26);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 0 24px rgba(96,205,255,0.14), 0 10px 10px -5px rgba(0,0,0,0.26);
  --transition-duration: 0.28s;
  --transition-easing: cubic-bezier(0.2, 0.9, 0.3, 1);
  --site-bg-motion-duration: 32s;
  --site-bg-orb-duration: 40s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-pill: 999px;
  /* Mica/acrylic material: heavy layered blur, low saturation, true Fluent feel */
  --site-surface-blur: blur(36px) saturate(1.1);
  --glass-filter: blur(20px) saturate(1.15) brightness(0.92);
}

/* theme: blossom (light) */
html[data-theme="blossom"] {
  color-scheme: light;
  --primary-color: #d96aa6;
  --secondary-color: #b73e83;
  --accent-color: #ff9bc3;
  --background-color: #fdf0f6;
  --text-color: #421f31;
  --color-1: #fbd5e7;
  --color-2: #f6c4dc;
  --color-3: #fcd9ea;
  --color-4: #f5bbd6;
  --color-5: #fde0ee;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(217,106,166,0.12), 0 1px 3px 0 rgba(183,62,131,0.07);
  --shadow-md: 0 4px 6px -1px rgba(217,106,166,0.15), 0 2px 4px -1px rgba(183,62,131,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(217,106,166,0.18), 0 4px 6px -2px rgba(183,62,131,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(217,106,166,0.20), 0 10px 10px -5px rgba(183,62,131,0.10);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-3xl: 38px;
  --radius-pill: 999px;
  --site-surface-blur: blur(32px) saturate(1.4);
  --glass-filter: blur(14px) saturate(1.4) brightness(1.06);
}

/* theme: candy (light) */
html[data-theme="candy"] {
  color-scheme: light;
  --primary-color: #e36ab0;
  --secondary-color: #7c66e3;
  --accent-color: #ffaa5c;
  --background-color: #fef4fb;
  --text-color: #3a1c44;
  --color-1: #ffd4ec;
  --color-2: #dccbff;
  --color-3: #fde2c0;
  --color-4: #f9c9e0;
  --color-5: #e7d7ff;
  --site-font: "Nunito", "Inter", system-ui, sans-serif;
  --border-radius: 60px;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(227,106,176,0.12), 0 1px 3px 0 rgba(124,102,227,0.07);
  --shadow-md: 0 4px 6px -1px rgba(227,106,176,0.16), 0 2px 4px -1px rgba(124,102,227,0.09);
  --shadow-lg: 0 10px 15px -3px rgba(227,106,176,0.18), 0 4px 6px -2px rgba(124,102,227,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(227,106,176,0.20), 0 10px 10px -5px rgba(124,102,227,0.10);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-bg-motion-duration: 24s;
  --site-bg-orb-duration: 30s;
  --radius-xs: 12px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.35) brightness(1.07);
}

/* theme: coffee (light) */
html[data-theme="coffee"] {
  color-scheme: light;
  --primary-color: #6f4a2f;
  --secondary-color: #4a2f1f;
  --accent-color: #b6804f;
  --background-color: #f1e6d4;
  --text-color: #2e1d10;
  --color-1: #e1cdb1;
  --color-2: #d5bb98;
  --color-3: #e6d1ab;
  --color-4: #d0b08c;
  --color-5: #ead7b8;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(92, 58, 24, 0.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 7px);
  --theme-surface-pattern:
    linear-gradient(135deg, rgba(255, 250, 232, 0.48), rgba(255, 239, 202, 0.16));
  --theme-backdrop-filter: blur(10px) saturate(1.05);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(111,74,47,0.10), 0 1px 3px 0 rgba(74,47,31,0.06);
  --shadow-md: 0 4px 6px -1px rgba(111,74,47,0.13), 0 2px 4px -1px rgba(74,47,31,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(111,74,47,0.15), 0 4px 6px -2px rgba(74,47,31,0.09);
  --shadow-xl: 0 20px 25px -5px rgba(111,74,47,0.17), 0 10px 10px -5px rgba(74,47,31,0.09);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 60s;
  --site-bg-orb-duration: 70s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(10px) saturate(1.2) brightness(1.04);
}

/* theme: colorblind (light) */
html[data-theme="colorblind"] {
  color-scheme: light;
  /* Okabe–Ito qualitative palette — distinguishable across all color vision types */
  --primary-color: #0072b2;   /* blue */
  --secondary-color: #d55e00; /* vermillion */
  --accent-color: #e69f00;    /* orange */
  --background-color: #ffffff;
  --text-color: #101418;
  --color-1: #e8eef3;
  --color-2: #dde7ef;
  --color-3: #eef3f7;
  --color-4: #d9e4ed;
  --color-5: #f2f6f9;
  --site-font: "Inter", system-ui, sans-serif;
  --border-radius: 8px;

  /* High-contrast accessible surfaces — clean white/off-white, blue-bordered, minimal decoration */
  --ap-panel:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(248, 251, 255, 0.74) 55%,
      rgba(232, 238, 243, 0.60) 100%);
  --ap-panel-strong:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(248, 251, 255, 0.84) 52%,
      rgba(232, 238, 243, 0.72) 100%);
  --ap-panel-border: rgba(0, 114, 178, 0.22);
  --ap-panel-highlight: rgba(255, 255, 255, 0.92);
  --ap-panel-shadow:
    0 4px 16px rgba(0, 114, 178, 0.10),
    0 1px 4px rgba(0, 114, 178, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --ap-panel-shadow-flat:
    0 4px 16px rgba(0, 114, 178, 0.10),
    0 1px 4px rgba(0, 114, 178, 0.08);
  --ap-local-tint: rgba(0, 114, 178, 0.10);
  --ap-local-tint-strong: rgba(0, 114, 178, 0.18);

  --theme-surface-pattern:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), transparent 50%);
  --theme-page-texture: none;
  --theme-surface-alpha: 0.82;
  --theme-control-alpha: 0.78;
  --theme-hover-transform: translateY(-2px);
}

/* theme: cotton (light) */
html[data-theme="cotton"] {
  color-scheme: light;
  --primary-color: #5ba4cf;
  --secondary-color: #3b82a0;
  --accent-color: #f7c5d5;
  --background-color: #f0f8ff;
  --text-color: #1a2e3d;
  --color-1: #ddeefa;
  --color-2: #cce4f6;
  --color-3: #e4f2fb;
  --color-4: #c2daf0;
  --color-5: #eaf4fc;
  --site-font: "Nunito", "Inter", system-ui, sans-serif;
  --border-radius: 48px;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(91,164,207,0.10), 0 1px 3px 0 rgba(59,130,160,0.06);
  --shadow-md: 0 4px 6px -1px rgba(91,164,207,0.14), 0 2px 4px -1px rgba(59,130,160,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(91,164,207,0.16), 0 4px 6px -2px rgba(59,130,160,0.09);
  --shadow-xl: 0 20px 25px -5px rgba(91,164,207,0.18), 0 10px 10px -5px rgba(59,130,160,0.09);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-3xl: 48px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.3);
  --glass-filter: blur(12px) saturate(1.3) brightness(1.05);
}

/* theme: discord-light (light) */
html[data-theme="discord-light"] {
  color-scheme: light;
  --primary-color: #5865f2;
  --secondary-color: #00a8fc;
  --accent-color: #5865f2;
  --background-color: #ffffff;
  --text-color: #060607;
  --color-1: #f2f3f5;
  --color-2: #ebedef;
  --color-3: #e3e5e8;
  --color-4: #f9f9fb;
  --color-5: #dbdee1;
  --site-font: "Inter", "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --border-radius: 8px;

  /* Discord-light modal surfaces: crisp white panels, blurple-tinted borders */
  --ap-panel:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(242, 243, 245, 0.90) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(249, 249, 251, 0.98) 100%);
  --ap-panel-border: rgba(6, 6, 7, 0.08);
  --ap-panel-highlight: rgba(88, 101, 242, 0.10);
  --ap-panel-shadow:
    0 4px 4px rgba(6, 6, 7, 0.04),
    0 8px 24px rgba(6, 6, 7, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ap-panel-shadow-flat:
    0 4px 4px rgba(6, 6, 7, 0.04),
    0 8px 24px rgba(6, 6, 7, 0.08);
  --ap-local-tint: rgba(88, 101, 242, 0.08);
  --ap-local-tint-strong: rgba(88, 101, 242, 0.14);

  --theme-surface-pattern:
    linear-gradient(180deg, rgba(6, 6, 7, 0.02), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(88, 101, 242, 0.08), transparent 50%);
  --theme-hover-transform: translateY(-1px);
}

/* Scoped after glass.css; wins by cascade order (same specificity as the light-mode glass defaults) */
html[data-theme="discord-light"] {
  --ap-page-base: #ffffff;
  --ap-page-base-2: #f2f3f5;
  --ap-page-base-3: #ebedef;
  --ap-text: #060607;
  --ap-text-soft: rgba(6, 6, 7, 0.72);
  --ap-text-faint: rgba(6, 6, 7, 0.50);

  /* Flat Discord-modal surfaces — no glassy blur, solid light fills */
  --ap-panel:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(242, 243, 245, 0.98) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(249, 249, 251, 0.99) 100%);
  --ap-panel-border: rgba(6, 6, 7, 0.08);
  --ap-panel-highlight: rgba(88, 101, 242, 0.06);
  --ap-panel-shadow:
    0 4px 4px rgba(6, 6, 7, 0.03),
    0 8px 24px rgba(6, 6, 7, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ap-panel-shadow-flat:
    0 4px 4px rgba(6, 6, 7, 0.03),
    0 8px 24px rgba(6, 6, 7, 0.06);
  --ap-panel-blur: blur(0px) saturate(1);
  --ap-local-tint: rgba(88, 101, 242, 0.06);
  --ap-local-tint-strong: rgba(88, 101, 242, 0.12);

  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.97;
  --theme-control-alpha: 0.97;
  --theme-surface-pattern:
    linear-gradient(180deg, rgba(6, 6, 7, 0.02), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(88, 101, 242, 0.08), transparent 50%);
  --theme-hover-transform: translateY(-1px);
}

/* theme: dusk (light) */
html[data-theme="dusk"] {
  color-scheme: light;
  --primary-color: #c07a3a;
  --secondary-color: #8a5020;
  --accent-color: #e0a060;
  --background-color: #fdf8f2;
  --text-color: #2e1c08;
  --color-1: #f8e8d4;
  --color-2: #f4dcc0;
  --color-3: #f9ead8;
  --color-4: #efd4b0;
  --color-5: #fcf0e4;
  --site-font: "Merriweather", "Georgia", serif;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(92, 58, 24, 0.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 7px);
  --theme-surface-pattern:
    linear-gradient(135deg, rgba(255, 250, 232, 0.48), rgba(255, 239, 202, 0.16));
  --theme-backdrop-filter: blur(10px) saturate(1.05);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(192,122,58,0.09), 0 1px 3px 0 rgba(138,80,32,0.05);
  --shadow-md: 0 4px 6px -1px rgba(192,122,58,0.12), 0 2px 4px -1px rgba(138,80,32,0.07);
  --shadow-lg: 0 10px 15px -3px rgba(192,122,58,0.14), 0 4px 6px -2px rgba(138,80,32,0.08);
  --shadow-xl: 0 20px 25px -5px rgba(192,122,58,0.16), 0 10px 10px -5px rgba(138,80,32,0.08);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 50s;
  --site-bg-orb-duration: 60s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(10px) saturate(1.2) brightness(1.04);
}

/* theme: flashbang (light) */
html[data-theme="flashbang"] {
  color-scheme: light;
  /* Maximum brightness. Pure blinding white. You were warned. */
  --primary-color: #9aa0a6;
  --secondary-color: #c4c7cc;
  --accent-color: #d6d9de;
  --background-color: #ffffff;
  --text-color: #0a0a0a;
  --color-1: #fbfbfb;
  --color-2: #f6f6f6;
  --color-3: #fdfdfd;
  --color-4: #f2f2f2;
  --color-5: #fefefe;
  --site-font: "Inter", system-ui, sans-serif;
  --border-radius: 10px;

  /* Fully white surfaces — barely visible, maximum brightness */
  --ap-panel:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(253, 253, 253, 0.86) 55%,
      rgba(250, 250, 250, 0.82) 100%);
  --ap-panel-strong:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(254, 254, 254, 0.94) 52%,
      rgba(252, 252, 252, 0.90) 100%);
  --ap-panel-border: rgba(0, 0, 0, 0.06);
  --ap-panel-highlight: rgba(255, 255, 255, 1);
  --ap-panel-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  --ap-panel-shadow-flat: 0 1px 3px rgba(0, 0, 0, 0.04);
  --ap-local-tint: rgba(255, 255, 255, 0.60);
  --ap-local-tint-strong: rgba(255, 255, 255, 0.80);
  --ap-panel-blur: blur(8px) saturate(1.0) brightness(1.1);

  --theme-surface-pattern: none;
  --theme-page-texture: none;
  --theme-surface-alpha: 0.94;
  --theme-control-alpha: 0.92;
  --theme-backdrop-filter: blur(8px) saturate(1.0) brightness(1.1);
  --theme-hover-transform: translateY(-1px);
}

/* theme: lavender (light) */
html[data-theme="lavender"] {
  color-scheme: light;
  --primary-color: #8665c4;
  --secondary-color: #5e4097;
  --accent-color: #b48fe5;
  --background-color: #f5f0fb;
  --text-color: #2c1f4a;
  --color-1: #e8d8f4;
  --color-2: #dcc8f0;
  --color-3: #e7d8f6;
  --color-4: #d4c2eb;
  --color-5: #f1e3f8;
  --site-font: "Raleway", "Inter", system-ui, sans-serif;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(134,101,196,0.10), 0 1px 3px 0 rgba(94,64,151,0.06);
  --shadow-md: 0 4px 6px -1px rgba(134,101,196,0.14), 0 2px 4px -1px rgba(94,64,151,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(134,101,196,0.18), 0 4px 6px -2px rgba(134,101,196,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(134,101,196,0.20), 0 10px 10px -5px rgba(94,64,151,0.10);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(32px) saturate(1.4);
  --glass-filter: blur(14px) saturate(1.4) brightness(1.06);
}

/* theme: light (light) */
html[data-theme="light"] {
  color-scheme: light;
  --primary-color: #0da598;
  --secondary-color: #136eae;
  --accent-color: #0ac2b2;
  --background-color: #f8fafc;
  --text-color: #0f172a;
  --color-1: #b1f1eb;
  --color-2: #aadfee;
  --color-3: #a2c3eb;
  --color-4: #abedd7;
  --color-5: #bdefeb;
  --theme-page-texture:
    conic-gradient(from 160deg at 50% 20%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%);
  --shadow-sm: 0 1px 2px 0 rgba(13,165,152,0.07), 0 1px 3px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(13,165,152,0.10), 0 2px 4px -1px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(13,165,152,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(13,165,152,0.12), 0 10px 10px -5px rgba(0,0,0,0.04);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.3) brightness(1.05);
}

/* theme: marble (light) */
html[data-theme="marble"] {
  color-scheme: light;
  --primary-color: #4b5563;
  --secondary-color: #1f2937;
  --accent-color: #7c8ba0;
  --background-color: #f5f3ef;
  --text-color: #161a23;
  --color-1: #e2dfd9;
  --color-2: #d6d2cb;
  --color-3: #ddd9d2;
  --color-4: #cfcac2;
  --color-5: #e6e3dc;
  --site-font: "Montserrat", "Inter", system-ui, sans-serif;
  --theme-page-texture:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    repeating-linear-gradient(135deg, rgba(127, 139, 155, 0.055) 0 1px, transparent 1px 18px);
  --theme-surface-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 48%);
  --theme-surface-alpha: 0.68;
  --theme-control-alpha: 0.62;
  --theme-hover-transform: translateY(-1px);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(75,85,99,0.08), 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(75,85,99,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(75,85,99,0.11), 0 4px 6px -2px rgba(0,0,0,0.07);
  --shadow-xl: 0 20px 25px -5px rgba(75,85,99,0.13), 0 10px 10px -5px rgba(0,0,0,0.07);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0, 0, 0.2, 1);
  --site-bg-motion-duration: 60s;
  --site-bg-orb-duration: 70s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.2) brightness(1.04);
}

/* theme: minimal (light) */
html[data-theme="minimal"] {
  color-scheme: light;
  --primary-color: #2c3138;
  --secondary-color: #525a65;
  --accent-color: #6b7280;
  --background-color: #ffffff;
  --text-color: #1a1d24;
  --color-1: #f0f1f3;
  --color-2: #e8eaed;
  --color-3: #f3f4f6;
  --color-4: #e1e3e6;
  --color-5: #f6f7f9;
  --site-font: "Inter", system-ui, sans-serif;
  --theme-page-texture:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    repeating-linear-gradient(135deg, rgba(127, 139, 155, 0.055) 0 1px, transparent 1px 18px);
  --theme-surface-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 48%);
  --theme-surface-alpha: 0.68;
  --theme-control-alpha: 0.62;
  --theme-hover-transform: translateY(-1px);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 2px 4px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 8px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-xl: 0 8px 16px -2px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --transition-duration: 0.18s;
  --transition-easing: cubic-bezier(0, 0, 0.2, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(8px) saturate(1.1) brightness(1.02);
}

/* theme: netflix-light (light) */
html[data-theme="netflix-light"] {
  color-scheme: light;
  --primary-color: #e50914;
  --secondary-color: #b1060f;
  --accent-color: #e50914;
  --background-color: #ffffff;
  --text-color: #141414;
  --color-1: #f5f5f1;
  --color-2: #eeeeee;
  --color-3: #fafafa;
  --color-4: #f0e0e1;
  --color-5: #e8e8e8;
  --site-font: "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --border-radius: 4px;

  /* Netflix marketing-site surfaces: flat crisp white panels, hard-edged, bold red */
  --ap-panel:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(245, 245, 241, 0.96) 100%);
  --ap-panel-strong:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(250, 250, 250, 0.99) 100%);
  --ap-panel-border: rgba(20, 20, 20, 0.08);
  --ap-panel-highlight: rgba(229, 9, 20, 0.08);
  --ap-panel-shadow:
    0 4px 4px rgba(20, 20, 20, 0.04),
    0 8px 24px rgba(20, 20, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ap-panel-shadow-flat:
    0 4px 4px rgba(20, 20, 20, 0.04),
    0 8px 24px rgba(20, 20, 20, 0.08);
  --ap-panel-blur: blur(0px) saturate(1);
  --ap-local-tint: rgba(229, 9, 20, 0.06);
  --ap-local-tint-strong: rgba(229, 9, 20, 0.12);

  --theme-backdrop-filter: none;
  --theme-surface-alpha: 0.98;
  --theme-control-alpha: 0.98;
  --theme-surface-pattern:
    linear-gradient(180deg, rgba(20, 20, 20, 0.02), transparent 40%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(229, 9, 20, 0.08), transparent 45%);
  --theme-hover-transform: scale(1.04);
  --shadow-sm: 0 1px 2px 0 rgba(20,20,20,0.08);
  --shadow-md: 0 4px 6px -1px rgba(20,20,20,0.10), 0 2px 4px -1px rgba(20,20,20,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(20,20,20,0.12), 0 4px 6px -2px rgba(20,20,20,0.06);
  --shadow-xl: 0 20px 25px -5px rgba(20,20,20,0.14), 0 10px 10px -5px rgba(20,20,20,0.06);
  --transition-duration: 0.15s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 0s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-pill: 999px;
}

/* theme: nordic (light) */
html[data-theme="nordic"] {
  color-scheme: light;
  --primary-color: #5e81ac;
  --secondary-color: #4c6fa5;
  --accent-color: #88c0d0;
  --background-color: #eceff4;
  --text-color: #2e3440;
  --color-1: #d8dee9;
  --color-2: #d0d8e8;
  --color-3: #dde4f0;
  --color-4: #c8d4e6;
  --color-5: #e4e9f2;
  --site-font: "Inter", system-ui, sans-serif;
  --border-radius: 6px;
  --theme-page-texture:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    repeating-linear-gradient(135deg, rgba(127, 139, 155, 0.055) 0 1px, transparent 1px 18px);
  --theme-surface-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 48%);
  --theme-surface-alpha: 0.68;
  --theme-control-alpha: 0.62;
  --theme-hover-transform: translateY(-1px);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(94,129,172,0.08), 0 1px 3px 0 rgba(46,52,64,0.05);
  --shadow-md: 0 4px 6px -1px rgba(94,129,172,0.10), 0 2px 4px -1px rgba(46,52,64,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(94,129,172,0.12), 0 4px 6px -2px rgba(46,52,64,0.07);
  --shadow-xl: 0 20px 25px -5px rgba(94,129,172,0.14), 0 10px 10px -5px rgba(46,52,64,0.07);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 40s;
  --site-bg-orb-duration: 50s;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 14px;
  --radius-3xl: 20px;
  --radius-pill: 999px;
  --site-surface-blur: blur(24px) saturate(1.1);
  --glass-filter: blur(10px) saturate(1.1) brightness(1.03);
}

/* theme: paper (light) */
html[data-theme="paper"] {
  color-scheme: light;
  --primary-color: #a05b2c;
  --secondary-color: #6b3f1f;
  --accent-color: #c97a3b;
  --background-color: #f6efe1;
  --text-color: #3a2a18;
  --color-1: #efe1c4;
  --color-2: #e7d3ad;
  --color-3: #f0d9b2;
  --color-4: #e9d1ae;
  --color-5: #efe2cb;
  --site-font: "Lato", Georgia, "Times New Roman", serif;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(92, 58, 24, 0.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 7px);
  --theme-surface-pattern:
    linear-gradient(135deg, rgba(255, 250, 232, 0.48), rgba(255, 239, 202, 0.16));
  --theme-backdrop-filter: blur(10px) saturate(1.05);
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(160,91,44,0.09), 0 1px 3px 0 rgba(90,60,30,0.05);
  --shadow-md: 0 4px 6px -1px rgba(160,91,44,0.12), 0 2px 4px -1px rgba(90,60,30,0.07);
  --shadow-lg: 0 10px 15px -3px rgba(160,91,44,0.13), 0 4px 6px -2px rgba(90,60,30,0.08);
  --shadow-xl: 0 20px 25px -5px rgba(160,91,44,0.15), 0 10px 10px -5px rgba(90,60,30,0.08);
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 60s;
  --site-bg-orb-duration: 70s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(10px) saturate(1.2) brightness(1.04);
}

/* theme: peach (light) */
html[data-theme="peach"] {
  color-scheme: light;
  --primary-color: #e2845b;
  --secondary-color: #d35c54;
  --accent-color: #ffa97a;
  --background-color: #fef0e6;
  --text-color: #3e1e15;
  --color-1: #ffd6bf;
  --color-2: #ffc7b1;
  --color-3: #ffd9c1;
  --color-4: #ffc4ad;
  --color-5: #ffe6d6;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(226,132,91,0.10), 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(226,132,91,0.14), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(226,132,91,0.16), 0 4px 6px -2px rgba(0,0,0,0.07);
  --shadow-xl: 0 20px 25px -5px rgba(226,132,91,0.18), 0 10px 10px -5px rgba(0,0,0,0.07);
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --site-bg-motion-duration: 28s;
  --site-bg-orb-duration: 34s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.3) brightness(1.05);
}

/* theme: retro (light) */
html[data-theme="retro"] {
  color-scheme: light;
  --primary-color: #d44000;
  --secondary-color: #8b2500;
  --accent-color: #f5a623;
  --background-color: #fdf6e3;
  --text-color: #2d1a00;
  --color-1: #f5e6c8;
  --color-2: #f0d8a8;
  --color-3: #f7e8cc;
  --color-4: #ebd09a;
  --color-5: #f9edd8;
  --site-font: "IBM Plex Mono", "Courier New", monospace;
  --border-radius: 4px;
  --theme-page-texture:
    repeating-linear-gradient(0deg, rgba(45, 26, 0, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(212, 64, 0, 0.12), transparent 34%, rgba(245, 166, 35, 0.12));
  --theme-surface-pattern:
    repeating-linear-gradient(90deg, rgba(45, 26, 0, 0.08) 0 1px, transparent 1px 8px);
  --theme-backdrop-filter: none;
  --theme-hover-transform: translate(2px, -2px);
  --theme-control-alpha: 0.72;
  --theme-bg-animation: themeTexturePan;
  --shadow-sm: 0 1px 2px 0 rgba(212,64,0,0.10), 0 1px 3px 0 rgba(139,37,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(212,64,0,0.13), 0 2px 4px -1px rgba(139,37,0,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(212,64,0,0.15), 0 4px 6px -2px rgba(139,37,0,0.09);
  --shadow-xl: 0 20px 25px -5px rgba(212,64,0,0.18), 0 10px 10px -5px rgba(139,37,0,0.09);
  --transition-duration: 0.12s;
  --transition-easing: steps(6, end);
  --site-bg-motion-duration: 60s;
  --site-bg-orb-duration: 70s;
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 6px;
  --radius-3xl: 8px;
  --radius-pill: 4px;
  --site-surface-blur: blur(0px) saturate(1);
  --glass-filter: blur(0px) saturate(1) brightness(1);
}

/* theme: rose (light) */
html[data-theme="rose"] {
  color-scheme: light;
  --primary-color: #e05c8a;
  --secondary-color: #b83a6a;
  --accent-color: #f08daa;
  --background-color: #fdf4f7;
  --text-color: #3a1228;
  --color-1: #fce4ed;
  --color-2: #f8d4e3;
  --color-3: #fbe8ef;
  --color-4: #f5c8db;
  --color-5: #fdeef4;
  --site-font: "Lora", "Georgia", serif;
  --theme-page-texture:
    radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--accent-color) 24%, transparent) 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 68% 88%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0 1.2rem, transparent 1.25rem);
  --theme-surface-pattern:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 60%);
  --theme-hover-transform: translateY(-4px) scale(1.018);
  --shadow-sm: 0 1px 2px 0 rgba(224,92,138,0.09), 0 1px 3px 0 rgba(184,58,106,0.05);
  --shadow-md: 0 4px 6px -1px rgba(224,92,138,0.13), 0 2px 4px -1px rgba(184,58,106,0.07);
  --shadow-lg: 0 10px 15px -3px rgba(224,92,138,0.15), 0 4px 6px -2px rgba(184,58,106,0.08);
  --shadow-xl: 0 20px 25px -5px rgba(224,92,138,0.17), 0 10px 10px -5px rgba(184,58,106,0.08);
  --transition-duration: 0.35s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 30s;
  --site-bg-orb-duration: 38s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.3);
  --glass-filter: blur(12px) saturate(1.3) brightness(1.05);
}

/* theme: sage (light) */
html[data-theme="sage"] {
  color-scheme: light;
  --primary-color: #4a7c59;
  --secondary-color: #2f5d44;
  --accent-color: #7fae6e;
  --background-color: #f1f5ef;
  --text-color: #1f3024;
  --color-1: #d6e7d2;
  --color-2: #c8dec3;
  --color-3: #dbeae0;
  --color-4: #c2dcc9;
  --color-5: #e2ecd9;
  --theme-page-texture:
    radial-gradient(ellipse at 16% 18%, color-mix(in srgb, var(--primary-color) 24%, transparent), transparent 28%),
    radial-gradient(ellipse at 84% 72%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 30%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px);
  --theme-surface-pattern:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 60%);
  --shadow-sm: 0 1px 2px 0 rgba(74,124,89,0.08), 0 1px 3px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(74,124,89,0.11), 0 2px 4px -1px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(74,124,89,0.12), 0 4px 6px -2px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 25px -5px rgba(74,124,89,0.14), 0 10px 10px -5px rgba(0,0,0,0.06);
  --transition-duration: 0.35s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 32s;
  --site-bg-orb-duration: 40s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.25) brightness(1.04);
}

/* theme: skype (light) */
html[data-theme="skype"] {
  color-scheme: light;
  --primary-color: #00aff0;
  --secondary-color: #0078d4;
  --accent-color: #0364b8;
  --background-color: #f0f6fb;
  --text-color: #1b2733;
  --color-1: #dceefb;
  --color-2: #cbe6fa;
  --color-3: #e3f2fd;
  --color-4: #bfe3fb;
  --color-5: #eaf5fe;
  --site-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --border-radius: 12px;

  /* Clean Skype-style: bright blue-tinted glass, rounded, friendly */
  --ap-panel:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(224, 240, 251, 0.52) 55%,
      rgba(203, 230, 250, 0.38) 100%);
  --ap-panel-strong:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(224, 240, 251, 0.62) 52%,
      rgba(203, 230, 250, 0.48) 100%);
  --ap-panel-border: rgba(0, 175, 240, 0.28);
  --ap-panel-highlight: rgba(255, 255, 255, 0.88);
  --ap-panel-shadow:
    0 8px 32px rgba(0, 120, 212, 0.14),
    0 2px 8px rgba(0, 175, 240, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ap-panel-shadow-flat:
    0 8px 32px rgba(0, 120, 212, 0.14),
    0 2px 8px rgba(0, 175, 240, 0.10);
  --ap-local-tint: rgba(0, 175, 240, 0.16);
  --ap-local-tint-strong: rgba(0, 175, 240, 0.26);

  --theme-surface-pattern:
    linear-gradient(135deg, rgba(0, 175, 240, 0.10), transparent 60%);
  --theme-page-texture:
    conic-gradient(from 180deg at 50% 20%, rgba(0, 175, 240, 0.14), transparent, rgba(3, 100, 184, 0.10), transparent);
  --theme-hover-transform: translateY(-3px) scale(1.01);
}

/* theme: spotify-light (light) */
html[data-theme="spotify-light"] {
  color-scheme: light;
  --primary-color: #1db954;
  --secondary-color: #169c46;
  --accent-color: #1ed760;
  --background-color: #f7fbf8;
  --text-color: #191414;
  --color-1: #e3f8e9;
  --color-2: #d3f2dd;
  --color-3: #eafbef;
  --color-4: #c8efd4;
  --color-5: #f0fbf3;
  --site-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ap-panel:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(227, 248, 233, 0.55) 55%,
      rgba(211, 242, 221, 0.4) 100%);
  --ap-panel-strong:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(227, 248, 233, 0.66) 52%,
      rgba(211, 242, 221, 0.5) 100%);
  --ap-panel-border: rgba(29, 185, 84, 0.26);
  --ap-panel-highlight: rgba(255, 255, 255, 0.9);
  --ap-panel-shadow:
    0 8px 32px rgba(29, 185, 84, 0.16),
    0 2px 8px rgba(30, 215, 96, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ap-panel-shadow-flat:
    0 8px 32px rgba(29, 185, 84, 0.16),
    0 2px 8px rgba(30, 215, 96, 0.12);
  --ap-local-tint: rgba(29, 185, 84, 0.14);
  --ap-local-tint-strong: rgba(29, 185, 84, 0.24);

  --theme-surface-pattern:
    linear-gradient(135deg, rgba(30, 215, 96, 0.12), transparent 60%);
  --theme-page-texture:
    radial-gradient(ellipse at 50% 0%, rgba(30, 215, 96, 0.14), transparent 45%);
  --theme-hover-transform: translateY(-2px) scale(1.015);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
}

/* theme: sunset (light) */
html[data-theme="sunset"] {
  color-scheme: light;
  --primary-color: #d35a31;
  --secondary-color: #b3306d;
  --accent-color: #f1873d;
  --background-color: #fdeee2;
  --text-color: #4a1f15;
  --color-1: #fad7c1;
  --color-2: #f7c1b1;
  --color-3: #fbd7a3;
  --color-4: #f5b8a7;
  --color-5: #fde0c4;
  --theme-page-texture:
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--accent-color) 42%, transparent), transparent 34%),
    linear-gradient(12deg, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 42%, color-mix(in srgb, var(--secondary-color) 18%, transparent));
  --theme-surface-pattern:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 54%);
  --theme-hover-transform: translateY(-3px) scale(1.01);
  --shadow-sm: 0 1px 2px 0 rgba(211,90,49,0.10), 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(211,90,49,0.14), 0 2px 4px -1px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px -3px rgba(211,90,49,0.15), 0 4px 6px -2px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 25px -5px rgba(211,90,49,0.17), 0 10px 10px -5px rgba(0,0,0,0.08);
  --transition-duration: 0.25s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --site-bg-motion-duration: 22s;
  --site-bg-orb-duration: 28s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --site-surface-blur: blur(28px) saturate(1.25);
  --glass-filter: blur(12px) saturate(1.3) brightness(1.06);
}

/* theme: windows-light (light) */
html[data-theme="windows-light"] {
  color-scheme: light;
  --primary-color: #0078d4;
  --secondary-color: #005a9e;
  --accent-color: #0078d4;
  --background-color: #f3f3f3;
  --text-color: #1b1b1b;
  --color-1: #e9f3fb;
  --color-2: #dcedfa;
  --color-3: #f6fbff;
  --color-4: #cfe7f8;
  --color-5: #eef6fc;
  --site-font: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --theme-page-texture:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 34%),
    radial-gradient(ellipse at 82% 78%, color-mix(in srgb, var(--secondary-color) 8%, transparent), transparent 32%);
  --theme-surface-pattern:
    linear-gradient(160deg, color-mix(in srgb, var(--primary-color) 6%, transparent), transparent 55%);
  --theme-hover-transform: translateY(-1px);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06), 0 0 1px rgba(0,120,212,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.12), 0 10px 10px -5px rgba(0,0,0,0.05);
  --transition-duration: 0.28s;
  --transition-easing: cubic-bezier(0.2, 0.9, 0.3, 1);
  --site-bg-motion-duration: 32s;
  --site-bg-orb-duration: 40s;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-pill: 999px;
  /* Mica/acrylic material: heavy layered blur, low saturation, true Fluent feel */
  --site-surface-blur: blur(36px) saturate(1.05);
  --glass-filter: blur(20px) saturate(1.1) brightness(1.02);
}