/*!
 * xKeryB unified colour system v1.0
 * Copyright (c) 2026 xKeryB. All rights reserved. See /COPYRIGHT.txt.
 *
 * This file is intentionally loaded after every public page bundle and
 * after xkeryb-environment.css. It is the canonical colour layer for all
 * public templates: home, editorial, article, content, library and legal.
 * Layout and platform/status brand colours remain owned by their components.
 */

:root,
html:not([data-site-theme]),
html[data-site-theme="original"] {
  --pal-bg: #10070b;
  --pal-bg-rgb: 16, 7, 11;
  --pal-bg-alt: #251018;
  --pal-surface: rgba(36, 16, 24, .9);
  --pal-surface-rgb: 36, 16, 24;
  --pal-surface-strong: #2e151f;
  --pal-raised: #3c1b29;
  --pal-text: #fff7f4;
  --pal-text-rgb: 255, 247, 244;
  --pal-muted: #dec1c5;
  --pal-muted-rgb: 222, 193, 197;
  --pal-faint: #ad8991;
  --pal-accent: #f08aa7;
  --pal-accent-rgb: 240, 138, 167;
  --pal-accent-hover: #ffadc2;
  --pal-on-accent: #330b17;
  --pal-secondary: #e2bea8;
  --pal-secondary-rgb: 226, 190, 168;
  --pal-line: rgba(240, 138, 167, .22);
  --pal-line-strong: rgba(255, 173, 194, .44);
  --pal-focus: #ffc2d2;
  --pal-selection: #832845;
  --pal-selection-text: #fff8fa;
  --pal-glow: rgba(221, 74, 118, .22);
  --pal-shadow: rgba(5, 0, 2, .62);
}

html[data-site-theme="violet"] {
  --pal-bg: #09050f;
  --pal-bg-rgb: 9, 5, 15;
  --pal-bg-alt: #160c20;
  --pal-surface: rgba(25, 15, 35, .9);
  --pal-surface-rgb: 25, 15, 35;
  --pal-surface-strong: #21152d;
  --pal-raised: #2a183a;
  --pal-text: #fbf7ff;
  --pal-text-rgb: 251, 247, 255;
  --pal-muted: #cdbed8;
  --pal-muted-rgb: 205, 190, 216;
  --pal-faint: #9c8baa;
  --pal-accent: #c89bea;
  --pal-accent-rgb: 200, 155, 234;
  --pal-accent-hover: #d9b5f2;
  --pal-on-accent: #1b0d24;
  --pal-secondary: #8563b8;
  --pal-secondary-rgb: 133, 99, 184;
  --pal-line: rgba(200, 155, 234, .22);
  --pal-line-strong: rgba(225, 196, 255, .42);
  --pal-focus: #e1c4ff;
  --pal-selection: #5b3374;
  --pal-selection-text: #fff9ff;
  --pal-glow: rgba(151, 91, 204, .2);
  --pal-shadow: rgba(3, 0, 8, .62);
}

html[data-site-theme="sapphire"] {
  --pal-bg: #050b14;
  --pal-bg-rgb: 5, 11, 20;
  --pal-bg-alt: #0a1727;
  --pal-surface: rgba(12, 26, 43, .9);
  --pal-surface-rgb: 12, 26, 43;
  --pal-surface-strong: #102238;
  --pal-raised: #15304d;
  --pal-text: #f4f9ff;
  --pal-text-rgb: 244, 249, 255;
  --pal-muted: #b7c8d9;
  --pal-muted-rgb: 183, 200, 217;
  --pal-faint: #8599ac;
  --pal-accent: #72bdea;
  --pal-accent-rgb: 114, 189, 234;
  --pal-accent-hover: #94cef2;
  --pal-on-accent: #061927;
  --pal-secondary: #5879c6;
  --pal-secondary-rgb: 88, 121, 198;
  --pal-line: rgba(114, 189, 234, .22);
  --pal-line-strong: rgba(165, 216, 255, .4);
  --pal-focus: #a5d8ff;
  --pal-selection: #174e78;
  --pal-selection-text: #f7fbff;
  --pal-glow: rgba(47, 137, 210, .2);
  --pal-shadow: rgba(0, 4, 12, .64);
}

html[data-site-theme="emerald"] {
  --pal-bg: #06100c;
  --pal-bg-rgb: 6, 16, 12;
  --pal-bg-alt: #0b1c15;
  --pal-surface: rgba(13, 33, 24, .9);
  --pal-surface-rgb: 13, 33, 24;
  --pal-surface-strong: #112a1f;
  --pal-raised: #15372a;
  --pal-text: #f2fbf6;
  --pal-text-rgb: 242, 251, 246;
  --pal-muted: #b3cbbf;
  --pal-muted-rgb: 179, 203, 191;
  --pal-faint: #829d90;
  --pal-accent: #76cea2;
  --pal-accent-rgb: 118, 206, 162;
  --pal-accent-hover: #9addb9;
  --pal-on-accent: #082217;
  --pal-secondary: #c7ae79;
  --pal-secondary-rgb: 199, 174, 121;
  --pal-line: rgba(118, 206, 162, .22);
  --pal-line-strong: rgba(178, 236, 203, .4);
  --pal-focus: #b2eccb;
  --pal-selection: #1b6041;
  --pal-selection-text: #f4fff9;
  --pal-glow: rgba(57, 165, 112, .18);
  --pal-shadow: rgba(0, 8, 5, .62);
}

html[data-site-theme="ruby"] {
  --pal-bg: #100306;
  --pal-bg-rgb: 16, 3, 6;
  --pal-bg-alt: #21070d;
  --pal-surface: rgba(36, 8, 15, .91);
  --pal-surface-rgb: 36, 8, 15;
  --pal-surface-strong: #2d0c15;
  --pal-raised: #3d111e;
  --pal-text: #fff7f6;
  --pal-text-rgb: 255, 247, 246;
  --pal-muted: #d7b4b8;
  --pal-muted-rgb: 215, 180, 184;
  --pal-faint: #a77d84;
  --pal-accent: #d85a78;
  --pal-accent-rgb: 216, 90, 120;
  --pal-accent-hover: #f07691;
  --pal-on-accent: #26050b;
  --pal-secondary: #a92f4b;
  --pal-secondary-rgb: 169, 47, 75;
  --pal-line: rgba(216, 90, 120, .24);
  --pal-line-strong: rgba(240, 118, 145, .44);
  --pal-focus: #ff9eb3;
  --pal-selection: #6f162d;
  --pal-selection-text: #fff8f8;
  --pal-glow: rgba(171, 30, 63, .22);
  --pal-shadow: rgba(9, 0, 2, .68);
}

html[data-site-theme="champagne"] {
  --pal-bg: #0e0c09;
  --pal-bg-rgb: 14, 12, 9;
  --pal-bg-alt: #1c1811;
  --pal-surface: rgba(37, 32, 23, .91);
  --pal-surface-rgb: 37, 32, 23;
  --pal-surface-strong: #2d271b;
  --pal-raised: #3a3122;
  --pal-text: #fff9ed;
  --pal-text-rgb: 255, 249, 237;
  --pal-muted: #d1c4aa;
  --pal-muted-rgb: 209, 196, 170;
  --pal-faint: #9e9179;
  --pal-accent: #d9b76e;
  --pal-accent-rgb: 217, 183, 110;
  --pal-accent-hover: #e7cc93;
  --pal-on-accent: #241a08;
  --pal-secondary: #9e7c42;
  --pal-secondary-rgb: 158, 124, 66;
  --pal-line: rgba(217, 183, 110, .22);
  --pal-line-strong: rgba(242, 219, 164, .42);
  --pal-focus: #f2dba4;
  --pal-selection: #685127;
  --pal-selection-text: #fff9ed;
  --pal-glow: rgba(185, 146, 66, .18);
  --pal-shadow: rgba(5, 4, 2, .68);
}

html[data-site-theme="teal"] {
  --pal-bg: #04100f;
  --pal-bg-rgb: 4, 16, 15;
  --pal-bg-alt: #08201d;
  --pal-surface: rgba(11, 37, 34, .91);
  --pal-surface-rgb: 11, 37, 34;
  --pal-surface-strong: #0e2e2a;
  --pal-raised: #123b36;
  --pal-text: #f1fcfa;
  --pal-text-rgb: 241, 252, 250;
  --pal-muted: #acccc7;
  --pal-muted-rgb: 172, 204, 199;
  --pal-faint: #7b9f99;
  --pal-accent: #62cebf;
  --pal-accent-rgb: 98, 206, 191;
  --pal-accent-hover: #86ddd1;
  --pal-on-accent: #06211e;
  --pal-secondary: #648ec5;
  --pal-secondary-rgb: 100, 142, 197;
  --pal-line: rgba(98, 206, 191, .22);
  --pal-line-strong: rgba(169, 239, 229, .4);
  --pal-focus: #a9efe5;
  --pal-selection: #14655c;
  --pal-selection-text: #f5fffd;
  --pal-glow: rgba(43, 171, 157, .19);
  --pal-shadow: rgba(0, 8, 8, .66);
}

html[data-site-theme="mono"] {
  --pal-bg: #080808;
  --pal-bg-rgb: 8, 8, 8;
  --pal-bg-alt: #121212;
  --pal-surface: rgba(25, 25, 25, .92);
  --pal-surface-rgb: 25, 25, 25;
  --pal-surface-strong: #202020;
  --pal-raised: #292929;
  --pal-text: #f5f5f3;
  --pal-text-rgb: 245, 245, 243;
  --pal-muted: #c1c1bd;
  --pal-muted-rgb: 193, 193, 189;
  --pal-faint: #90908b;
  --pal-accent: #e0e0dc;
  --pal-accent-rgb: 224, 224, 220;
  --pal-accent-hover: #fff;
  --pal-on-accent: #111;
  --pal-secondary: #8a8a86;
  --pal-secondary-rgb: 138, 138, 134;
  --pal-line: rgba(224, 224, 220, .18);
  --pal-line-strong: rgba(255, 255, 255, .38);
  --pal-focus: #fff;
  --pal-selection: #4b4b49;
  --pal-selection-text: #fff;
  --pal-glow: rgba(255, 255, 255, .1);
  --pal-shadow: rgba(0, 0, 0, .72);
}

/* Bridge every historical namespace to the one canonical palette. */
html[data-site-theme] body.theme-design-system,
html:not([data-site-theme]) body.theme-design-system {
  --bg: var(--pal-bg);
  --card: var(--pal-surface);
  --surface: rgba(var(--pal-accent-rgb), .1);
  --surface-hover: color-mix(in srgb, var(--pal-accent) 12%, var(--pal-surface));
  --text: var(--pal-text);
  --muted: var(--pal-muted);
  --muted-strong: var(--pal-muted);
  --line: var(--pal-line);
  --orange: var(--pal-accent);
  --orange-light: var(--pal-accent-hover);

  --xk-black: var(--pal-bg);
  --xk-warm-black: var(--pal-bg-alt);
  --xk-wine: var(--pal-surface-strong);
  --xk-ruby: var(--pal-accent);
  --xk-rose: var(--pal-accent-hover);
  --xk-champagne: var(--pal-secondary);

  --ux-bg: var(--pal-bg);
  --ux-bg-alt: var(--pal-bg-alt);
  --ux-surface: var(--pal-surface);
  --ux-surface-strong: var(--pal-surface-strong);
  --ux-soft: rgba(var(--pal-accent-rgb), .1);
  --ux-text: var(--pal-text);
  --ux-muted: var(--pal-muted);
  --ux-accent: var(--pal-accent);
  --ux-accent-2: var(--pal-accent-hover);
  --ux-on-accent: var(--pal-on-accent);
  --ux-line: var(--pal-line);
  --ux-shadow: var(--pal-shadow);
  --ux-glow: var(--pal-glow);

  --lux-bg: var(--pal-bg);
  --lux-surface: var(--pal-surface);
  --lux-raised: var(--pal-raised);
  --lux-text: var(--pal-text);
  --lux-muted: var(--pal-muted);
  --lux-accent: var(--pal-accent);
  --lux-accent-2: var(--pal-accent-hover);
  --lux-ink: var(--pal-on-accent);
  --lux-line: var(--pal-line);
  --lux-line-strong: var(--pal-line-strong);
  --lux-shadow: var(--pal-shadow);
  --lux-backdrop: radial-gradient(ellipse at 80% 4%, var(--pal-glow), transparent 26%), linear-gradient(rgba(var(--pal-bg-rgb), .42), rgba(var(--pal-bg-rgb), .66));
  --lux-panel-art: radial-gradient(circle at 100% 0, rgba(var(--pal-accent-rgb), .1), transparent 34%), var(--pal-surface-strong);

  --lab-bg: var(--pal-bg);
  --lab-text: var(--pal-text);
  --lab-muted: var(--pal-muted);
  --lab-line: var(--pal-line);
  --lab-accent: var(--pal-accent);
  --lab-highlight: var(--pal-accent-hover);
  --lab-panel: var(--pal-surface);
  --lab-card: rgba(var(--pal-surface-rgb), .78);
  --lab-chip: rgba(var(--pal-accent-rgb), .1);
  --lab-chip-hover: rgba(var(--pal-accent-rgb), .16);
  --lab-nav-chip: rgba(var(--pal-accent-rgb), .1);
  --lab-arrow-bg: rgba(var(--pal-accent-rgb), .14);
  --lab-control-bg: rgba(var(--pal-surface-rgb), .92);
  --lab-control-surface: rgba(var(--pal-accent-rgb), .12);
  --lab-shadow: var(--pal-shadow);
  --lab-badge-text: var(--pal-accent-hover);
  --lab-backdrop: radial-gradient(circle at 78% 14%, var(--pal-glow), transparent 24%), linear-gradient(140deg, var(--pal-bg), var(--pal-bg-alt) 52%, var(--pal-bg));
  --lab-backdrop-filter: saturate(1.04) brightness(.9) contrast(1.04);
  --lab-overlay: radial-gradient(ellipse at 50% 44%, transparent 28%, rgba(var(--pal-bg-rgb), .18) 58%, rgba(var(--pal-bg-rgb), .74) 100%);
  --lab-frame-line: var(--pal-line);
  --lab-frame-shadow: inset 0 0 120px var(--pal-glow), 0 0 165px var(--pal-shadow);
  --lab-card-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 32px 76px var(--pal-shadow), 0 0 66px var(--pal-glow);
  --lab-card-art: linear-gradient(135deg, rgba(var(--pal-accent-rgb), .1), transparent 62%);

  --theme-global-panel: var(--pal-surface);
  --theme-global-panel-strong: var(--pal-surface-strong);
  --theme-global-card: rgba(var(--pal-surface-rgb), .8);
  --theme-global-card-hover: color-mix(in srgb, var(--pal-accent) 9%, var(--pal-surface-strong));
  --theme-global-text: var(--pal-text);
  --theme-global-muted: var(--pal-muted);
  --theme-global-faint: var(--pal-faint);
  --theme-global-line: var(--pal-line);
  --theme-global-accent: var(--pal-accent);
  --theme-global-shadow: var(--pal-shadow);

  --app-shell-surface: rgba(var(--pal-surface-rgb), .5);
  --app-shell-header: rgba(var(--pal-surface-rgb), .76);
  --app-shell-line: var(--pal-line-strong);
  --app-shell-divider: rgba(var(--pal-accent-rgb), .16);
  --app-shell-text: var(--pal-text);
  --app-shell-muted: var(--pal-muted);
  --app-shell-accent: var(--pal-accent);
  --app-shell-content-layer: linear-gradient(145deg, rgba(255,255,255,.045), transparent 48%, rgba(var(--pal-accent-rgb), .03));
  --app-shell-scroll-track: rgba(var(--pal-bg-rgb), .34);
  --app-shell-scroll-thumb: rgba(var(--pal-accent-rgb), .42);
  --app-shell-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 34px 94px var(--pal-shadow), 0 0 58px var(--pal-glow);
  --app-shell-header-glow: rgba(var(--pal-accent-rgb), .08);
  --app-shell-active: rgba(var(--pal-accent-rgb), .11);
  --app-shell-active-line: rgba(var(--pal-accent-rgb), .28);

  --site-page-backdrop: radial-gradient(ellipse at 78% 9%, var(--pal-glow), transparent 28%), linear-gradient(145deg, var(--pal-bg-alt), var(--pal-bg) 54%);
  color: var(--pal-text);
  background-color: var(--pal-bg) !important;
  accent-color: var(--pal-accent);
  scrollbar-color: rgba(var(--pal-accent-rgb), .42) rgba(var(--pal-bg-rgb), .3);
}

html[data-site-theme] body.theme-design-system.content-v13,
html:not([data-site-theme]) body.theme-design-system.content-v13,
html[data-site-theme] body.theme-design-system .content-v13,
html:not([data-site-theme]) body.theme-design-system .content-v13 {
  --v13-bg: var(--pal-bg);
  --v13-surface: var(--pal-surface);
  --v13-soft: rgba(var(--pal-accent-rgb), .1);
  --v13-line: var(--pal-line);
  --v13-text: var(--pal-text);
  --v13-muted: var(--pal-muted);
  --v13-accent: var(--pal-accent);
  --v13-on-accent: var(--pal-on-accent);
  --v13-shadow: var(--pal-shadow);
}

html[data-site-theme] body.home-spatial-v2,
html:not([data-site-theme]) body.home-spatial-v2 {
  --space-ivory: var(--pal-text-rgb);
  --space-gold: var(--pal-accent-rgb);
  --space-ink: var(--pal-bg-rgb);
  --glitch-background: var(--pal-bg);
  --glitch-ambient-rgb: var(--pal-secondary-rgb);
  --glitch-accent-rgb: var(--pal-accent-rgb);
}

html[data-site-theme] body.theme-design-system .theme-switcher,
html:not([data-site-theme]) body.theme-design-system .theme-switcher {
  --theme-control-bg: rgba(var(--pal-surface-rgb), .9);
  --theme-control-surface: rgba(var(--pal-accent-rgb), .11);
  --theme-control-line: var(--pal-line-strong);
  --theme-control-text: var(--pal-text);
  --theme-control-muted: var(--pal-muted);
  --theme-control-accent: var(--pal-accent);
}

/* Canvas host, chemistry labels and fixed controls follow the selected theme. */
html.xkeryb-attraction-enabled,
html.xkeryb-attraction-enabled body:not(.error-page),
html.xkeryb-attraction-enabled .xkeryb-attraction-scene {
  background: var(--pal-bg) !important;
}

html.xkeryb-attraction-booting,
html.xkeryb-attraction-booting body:not(.error-page) {
  background: var(--pal-bg) !important;
}

.xkeryb-formula-inner {
  color: rgba(var(--pal-text-rgb), .84);
  text-shadow: 0 0 12px rgba(var(--pal-accent-rgb), .42), 0 0 30px var(--pal-glow);
}

.xkeryb-formula-inner::before {
  background: linear-gradient(90deg, rgba(var(--pal-accent-rgb), .78), rgba(var(--pal-secondary-rgb), .22), transparent);
  box-shadow: 44px 0 0 -.25px rgba(var(--pal-text-rgb), .24);
}

.xkeryb-formula-code { color: rgba(var(--pal-text-rgb), .7); }
.xkeryb-formula-signal { color: rgba(var(--pal-accent-rgb), .78); }

/* One balanced shell treatment for every route; page-specific brand cards stay intact. */
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted .profile-card {
  border-color: var(--pal-line-strong) !important;
  background: linear-gradient(145deg, rgba(var(--pal-surface-rgb), .2), rgba(var(--pal-bg-rgb), .1)) !important;
  box-shadow: 0 28px 84px var(--pal-shadow), 0 0 62px var(--pal-glow), inset 0 1px rgba(255,255,255,.065), inset 0 -1px rgba(var(--pal-accent-rgb), .08) !important;
  color: var(--pal-text);
}

html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted :is(.editorial-page, .legal-page) {
  border-color: var(--pal-line-strong) !important;
  background: linear-gradient(145deg, rgba(var(--pal-surface-rgb), .36), rgba(var(--pal-bg-rgb), .22)) !important;
  box-shadow: 0 28px 88px var(--pal-shadow), 0 0 58px var(--pal-glow) !important;
  color: var(--pal-text);
}

html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.editorial-body .editorial-shell,
html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.legal-body .legal-content {
  border-color: var(--pal-line) !important;
  background: rgba(var(--pal-surface-rgb), .82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 20px 72px var(--pal-shadow), 0 0 42px var(--pal-glow) !important;
  color: var(--pal-text);
  -webkit-backdrop-filter: blur(9px) saturate(1.04);
  backdrop-filter: blur(9px) saturate(1.04);
}

html.xkeryb-attraction-enabled[data-site-theme] body.theme-design-system.xkeryb-attraction-mounted .article-hero {
  border-color: var(--pal-line) !important;
  background: radial-gradient(ellipse at 88% 12%, rgba(var(--pal-accent-rgb), .11), transparent 34%), linear-gradient(145deg, rgba(var(--pal-raised-rgb, var(--pal-surface-rgb)), .78), rgba(var(--pal-bg-rgb), .72)) !important;
  color: var(--pal-text);
}

body.theme-design-system :is(.editorial-page, .legal-page) > .editorial-nav {
  border-color: var(--pal-line) !important;
  background: linear-gradient(110deg, rgba(var(--pal-accent-rgb), .065), transparent 40%), rgba(var(--pal-surface-rgb), .74) !important;
  color: var(--pal-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.2) !important;
}

body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) .wordmark,
body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) nav a[aria-current="page"] {
  color: var(--pal-text);
}

body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) .wordmark span,
body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) .wordmark::first-letter {
  color: var(--pal-accent);
}

body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) nav a:not(.nav-cta) { color: var(--pal-muted); }
body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) nav a:is(:hover, :focus-visible, [aria-current="page"]) {
  border-color: rgba(var(--pal-accent-rgb), .28);
  background: rgba(var(--pal-accent-rgb), .1);
  color: var(--pal-text);
}

body.theme-design-system :is(.editorial-nav, .legal-page > .editorial-nav) nav .nav-cta {
  border-color: rgba(var(--pal-accent-rgb), .4);
  background: linear-gradient(135deg, rgba(var(--pal-accent-rgb), .16), transparent), rgba(var(--pal-surface-rgb), .76);
  color: var(--pal-text);
}

/* Theme and language selectors share the same readable glass and interaction states. */
body.theme-design-system :is(.theme-switcher-trigger, .theme-switcher-menu, .language-picker-trigger, .language-picker-menu) {
  border-color: var(--pal-line-strong) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.065), transparent 52%), rgba(var(--pal-surface-rgb), .86) !important;
  color: var(--pal-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 48px var(--pal-shadow), 0 0 22px var(--pal-glow) !important;
}

body.theme-design-system .theme-switcher-menu-heading { color: var(--pal-muted); }
body.theme-design-system :is(.theme-switcher-option, .language-picker-menu a) { color: var(--pal-muted); }
body.theme-design-system :is(.theme-switcher-option, .language-picker-menu a):is(:hover, :focus-visible, .is-active, [aria-current="true"]) {
  border-color: rgba(var(--pal-accent-rgb), .3);
  background: rgba(var(--pal-accent-rgb), .12);
  color: var(--pal-text);
}

body.theme-design-system :is(.theme-switcher-icon, .language-picker-globe) {
  border-color: rgba(var(--pal-accent-rgb), .42);
  background: rgba(var(--pal-accent-rgb), .1);
  color: var(--pal-accent);
}

body.theme-design-system .theme-motion-toggle {
  border-color: var(--pal-line);
  background: rgba(var(--pal-accent-rgb), .08);
  color: var(--pal-muted);
}

body.theme-design-system .theme-motion-toggle.is-active {
  border-color: rgba(var(--pal-accent-rgb), .42);
  background: rgba(var(--pal-accent-rgb), .14);
  color: var(--pal-accent-hover);
}

.theme-switcher-swatch-original { background: linear-gradient(135deg, #10070b, #8b2749 54%, #ffadc2); }
.theme-switcher-swatch-violet { background: linear-gradient(135deg, #09050f, #62407e 54%, #d9b5f2); }
.theme-switcher-swatch-sapphire { background: linear-gradient(135deg, #050b14, #174f7d 54%, #94cef2); }
.theme-switcher-swatch-emerald { background: linear-gradient(135deg, #06100c, #216c4b 54%, #c7ae79); }
.theme-switcher-swatch-ruby { background: linear-gradient(135deg, #100306, #721a33 54%, #f07691); }
.theme-switcher-swatch-champagne { background: linear-gradient(135deg, #0e0c09, #765b2e 54%, #e7cc93); }
.theme-switcher-swatch-teal { background: linear-gradient(135deg, #04100f, #176d64 54%, #86ddd1); }
.theme-switcher-swatch-mono { background: linear-gradient(135deg, #080808, #4b4b49 54%, #f5f5f3); }

/* Home: theme the neutral shell while preserving each platform's own reflected colour. */
body.home-spatial-v2 .identity h1 {
  background-image: linear-gradient(104deg, var(--pal-text) 0%, var(--pal-text) 48%, var(--pal-accent-hover) 78%, var(--pal-text) 100%) !important;
}

body.home-spatial-v2 .site-shortcuts .welcome-link {
  border-color: var(--pal-line);
  background: rgba(var(--pal-surface-rgb), .34);
  color: var(--pal-muted);
}

body.home-spatial-v2 .site-shortcuts .welcome-link::before {
  background: var(--pal-accent);
  box-shadow: 0 0 10px var(--pal-glow);
}

body.home-spatial-v2 .site-shortcuts .welcome-link:is(:hover, :focus-visible) {
  border-color: rgba(var(--pal-accent-rgb), .4);
  background: rgba(var(--pal-accent-rgb), .09);
  color: var(--pal-text);
}

body.home-spatial-v2 .profile-link {
  border-color: var(--pal-line) !important;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.075), transparent 27%), linear-gradient(112deg, rgba(var(--platform-rgb), .05), transparent 38%), rgba(var(--pal-surface-rgb), .58) !important;
  color: var(--pal-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.18) !important;
}

body.home-spatial-v2 .profile-link:is(.profile-link-primary, .profile-link-live) {
  border-color: rgba(var(--platform-rgb), .52) !important;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.1), transparent 28%), linear-gradient(112deg, rgba(var(--platform-rgb), .11), transparent 44%), rgba(var(--pal-surface-rgb), .64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.22), 0 0 18px rgba(var(--platform-rgb), .07) !important;
}

body.home-spatial-v2 .profile-link:is(:hover, :focus-visible) {
  border-color: rgba(var(--platform-rgb), .5) !important;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.13), transparent 29%), linear-gradient(112deg, rgba(var(--platform-rgb), .1), transparent 42%), color-mix(in srgb, var(--pal-accent) 5%, rgba(var(--pal-surface-rgb), .7)) !important;
}

body.home-spatial-v2 .link-copy small { color: rgba(var(--pal-text-rgb), .66); }
body.home-spatial-v2 .link-copy strong { color: var(--pal-text); }
body.home-spatial-v2 .link-detail { color: rgba(var(--pal-text-rgb), .64); }
body.home-spatial-v2 .link-arrow {
  border-color: var(--pal-line);
  background: rgba(var(--pal-accent-rgb), .055);
  color: var(--pal-muted);
}
body.home-spatial-v2 .site-signature { color: rgba(var(--pal-muted-rgb), .7); }

/* Reading hierarchy and semantic surfaces across articles, hubs, content and legal. */
body.theme-design-system :is(.article-hero, .content-hero-v13, .seo-growth-hero, .seo-hub-hero, .seo-directory-hero, .library-hero) :is(h1, h2),
body.theme-design-system :is(.article-body, .content-section-v13, .official-platforms-v13, .legal-content) :is(h1, h2, h3, strong) {
  color: var(--pal-text);
}

body.theme-design-system :is(.editorial-lead, .article-body p, .article-body li, .content-section-v13 p, .content-section-v13 li, .legal-content p, .legal-content li) {
  color: var(--pal-muted);
}

body.theme-design-system :is(.eyebrow, .section-kicker, .article-topic-link span, .content-v13 .section-kicker) { color: var(--pal-accent); }

body.theme-design-system :is(.article-body, .article-breadcrumbs, .related-links, .legal-content, .content-v13) a:not(.official-platform-card-v13):not([data-platform]) {
  text-decoration-color: rgba(var(--pal-accent-rgb), .42);
  text-underline-offset: .18em;
}

body.theme-design-system :is(.article-body, .article-breadcrumbs, .related-links, .legal-content, .content-v13) a:not(.official-platform-card-v13):not([data-platform]):is(:hover, :focus-visible) {
  color: var(--pal-accent-hover);
}

body.theme-design-system :is(.article-toc, .article-topic-link, .series-next, .article-aside, .related-links, .legal-toc-v13, .content-card-v13, .library-card, .content-checklist-v13 li, .legal-prose-grid article, .legal-support-grid article, .legal-callout, .legal-steps li) {
  border-color: var(--pal-line) !important;
}

body.theme-design-system :is(.article-toc, .article-topic-link, .series-next, .article-aside, .related-links, .legal-toc-v13, .content-card-v13, .library-card, .content-checklist-v13 li, .legal-prose-grid article, .legal-support-grid article, .legal-callout, .legal-steps li):not(.official-platform-card-v13) {
  background: linear-gradient(145deg, rgba(var(--pal-accent-rgb), .055), transparent 70%), rgba(var(--pal-surface-rgb), .58) !important;
}

body.library-page-v2 > .editorial-page > .editorial-shell > :is(.library-faq, .library-final, .official-platforms-v13),
body.legal-body > .legal-page > .legal-content > .content-section-v13:nth-of-type(even) {
  background: linear-gradient(135deg, rgba(var(--pal-accent-rgb), .055), transparent 64%) !important;
}

body.theme-design-system .article-reading-progress span {
  background: linear-gradient(90deg, var(--pal-secondary), var(--pal-accent), var(--pal-accent-hover));
  box-shadow: 0 0 16px var(--pal-glow);
}

body.theme-design-system :is(.article-body blockquote, .xkeryb-author-note, .legal-callout) {
  border-color: rgba(var(--pal-accent-rgb), .34) !important;
  background: rgba(var(--pal-accent-rgb), .075) !important;
}

body.theme-design-system :is(code, kbd) {
  border-color: var(--pal-line);
  background: rgba(var(--pal-accent-rgb), .085);
  color: var(--pal-accent-hover);
}

/* Platform and status accents intentionally stay semantic, never theme-coloured. */
body.theme-design-system {
  --status-online: #55d68a;
  --status-live: #ff526f;
  --status-offer: #e6bd67;
  --status-info: #6fb9ef;
}

body.theme-design-system :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--pal-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px var(--pal-bg), 0 0 0 5px rgba(var(--pal-accent-rgb), .24) !important;
}

html[data-site-theme] ::selection,
html:not([data-site-theme]) ::selection {
  background: var(--pal-selection);
  color: var(--pal-selection-text);
}

@media (max-width: 699px) {
  html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.editorial-body .editorial-shell,
  html.xkeryb-attraction-enabled body.theme-design-system.xkeryb-attraction-mounted.legal-body .legal-content {
    background: rgba(var(--pal-surface-rgb), .88) !important;
  }

  body.theme-design-system :is(.theme-switcher-trigger, .language-picker-trigger) {
    background: rgba(var(--pal-surface-rgb), .9) !important;
  }
}

@media (prefers-contrast: more) {
  body.theme-design-system {
    --pal-muted: var(--pal-text);
    --pal-line: var(--pal-line-strong);
  }

  body.home-spatial-v2 .link-detail { color: rgba(var(--pal-text-rgb), .82); }
}

/* Transparent interior V28.
 * Remove the shared tinted glass beneath page content and popup options while
 * preserving cards, controls, active rows, borders and semantic hero surfaces.
 * The first branch also covers initial paint and the legacy renderer; the
 * mounted branch beats the historical mobile and environment shell rules. */
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system:not(.error-page) :is(
  .profile-card,
  .editorial-page,
  .legal-page,
  .profile-content,
  .editorial-shell,
  .legal-content,
  .language-picker-menu,
  .theme-switcher-menu
),
html.xkeryb-attraction-enabled
body.theme-design-system.xkeryb-attraction-mounted:not(.error-page) :is(
  .profile-card,
  .editorial-page,
  .legal-page,
  .profile-content,
  .editorial-shell,
  .legal-content,
  .language-picker-menu,
  .theme-switcher-menu
) {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Transparent popup panels can cross bright chemistry and card copy. Keep the
 * panel itself perfectly clear while giving only its labels a dark edge. */
body.theme-design-system:not(.error-page) :is(
  .theme-switcher-menu-heading,
  .theme-switcher-option,
  .language-picker-menu a
) {
  text-shadow:
    0 1px 2px rgba(var(--pal-bg-rgb), .98),
    0 0 10px rgba(var(--pal-bg-rgb), .9);
}

/* Popup micro-glass V29.
 * CSS blur() does not accept percentages. A light 5px backdrop blur plus an
 * exact five-percent palette tint keeps the scene visible without letting the
 * card copy underneath compete with the menu labels. */
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system:not(.error-page) :is(
  .language-picker > .language-picker-menu,
  .theme-switcher > .theme-switcher-menu
),
html.xkeryb-attraction-enabled
body.theme-design-system.xkeryb-attraction-mounted:not(.error-page) :is(
  .language-picker > .language-picker-menu,
  .theme-switcher > .theme-switcher-menu
) {
  background: rgba(var(--pal-surface-rgb), .05) !important;
  background-color: rgba(var(--pal-surface-rgb), .05) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.02) !important;
  backdrop-filter: blur(5px) saturate(1.02) !important;
}

/* Mobile composition V30.
 * The homepage becomes a deliberate vertical layout instead of a full-height
 * portrait with the navigation and platform list visually laid over it. */
@media (max-width: 699px) {
  body.theme-design-system:not(.error-page) :is(.editorial-page, .legal-page) > .editorial-nav {
    display: grid;
    min-height: 60px;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 18px;
  }

  body.theme-design-system:not(.error-page) :is(.editorial-page, .legal-page) > .editorial-nav .wordmark {
    width: auto;
    font-size: 19px;
    white-space: nowrap;
  }

  body.theme-design-system:not(.error-page) :is(.editorial-page, .legal-page) > .editorial-nav nav {
    display: grid;
    width: 100%;
    max-width: none;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    grid-template-rows: 1fr;
    gap: 5px;
    overflow-x: auto;
    padding: 0 0 2px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body.theme-design-system:not(.error-page) :is(.editorial-page, .legal-page) > .editorial-nav nav::-webkit-scrollbar {
    display: none;
  }

  body.theme-design-system:not(.error-page) :is(.editorial-page, .legal-page) > .editorial-nav nav a {
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 9px 11px;
    font-size: 11px;
    white-space: nowrap;
  }

  body.theme-design-system:not(.error-page) .language-picker-trigger {
    width: 68px;
    min-width: 68px;
    gap: 6px;
    padding: 0 8px;
  }

  body.theme-design-system:not(.error-page) .language-picker-chevron {
    display: none;
  }

  body.home-spatial-v2:not(.error-page) .portrait,
  body.home-spatial-v2.portrait-tilt-enabled:not(.error-page) .portrait {
    border-color: var(--pal-line-strong) !important;
    box-shadow: none !important;
  }

  /* Mobile soft-shadow gate V31.
   * The former 84/62/36/30px layered shadows around the full Home surface and
   * portrait caused a repeatable software-compositor long task. Depth now
   * comes from the scene plus the palette border, without a blurred halo. */
  body.home-spatial-v2.theme-design-system:not(.error-page) .profile-card,
  html.xkeryb-attraction-enabled
  body.theme-design-system.xkeryb-attraction-mounted.home-spatial-v2:not(.error-page) .profile-card {
    box-shadow: none !important;
  }
}

/* Reading progress containment V32.
 * The short-laptop shell reserves wider side lanes than the default desktop
 * layout. Keep the fixed progress track on the same outer edges instead of
 * letting it project through the rounded frame. The tablet seam follows its
 * relocated shell, while mobile keeps its viewport-top behavior but matches
 * the visible page width. */
@media (min-width: 900px) and (max-width: 1353px) and (max-height: 907px) {
  @supports (animation-timeline: scroll()) {
    body.theme-design-system.article-reading-v3 .article-reading-progress {
      width: min(calc(100vw - 120px), var(--app-shell-max-width));
    }
  }
}

@media (min-width: 700px) and (max-width: 899px) and (max-height: 907px) {
  @supports (animation-timeline: scroll()) {
    body.theme-design-system.article-reading-v3 .article-reading-progress {
      top: calc(60px + var(--app-shell-header-height) - 1px);
    }
  }
}

@media (max-width: 699px) {
  @supports (animation-timeline: scroll()) {
    body.theme-design-system.article-reading-v3 .article-reading-progress {
      right: auto;
      left: 50%;
      width: calc(100% - 10px);
      transform: translateX(-50%);
    }
  }
}

@media (max-width: 359px) {
  @supports (animation-timeline: scroll()) {
    body.theme-design-system.article-reading-v3 .article-reading-progress {
      width: calc(100% - 8px);
    }
  }
}

/* FANSLY-BRAND-HOVER-V1-START
 * Fansly uses a deep navy hover language so it does not read as the brighter
 * cyan treatment. Keep every selector brand-specific: the shared card hover
 * system and every other platform remain untouched. */
body.theme-design-system.home-spatial-v2
.official-links > a.profile-link[data-platform="fansly"][data-placement="platform-list"] {
  /* The Home electric-border canvas snapshots this token before interaction. */
  --platform-rgb: 10, 70, 130;
}

@media (hover: hover) and (pointer: fine) {
  body.theme-design-system
  .official-platform-grid-v13 > a.official-platform-card-v13[data-platform="fansly"][data-placement="content-architecture-v13"]:hover {
    --platform-card-accent: #1969a4;
  }

  body.theme-design-system.library-page-v2
  #library-comparison > article.library-card.library-card-fansly:hover {
    --library-card-accent: #1969a4;
    --library-action-ink: #f4fbff;
  }

  :is(html:not([data-site-theme]), html[data-site-theme])
  body.theme-design-system.home-spatial-v2
  .official-links > a.profile-link[data-platform="fansly"][data-placement="platform-list"]:hover,
  :is(html:not([data-site-theme]), html[data-site-theme])
  body.theme-design-system.library-page-v2
  #library-comparison > article.library-card.library-card-fansly:hover,
  :is(html:not([data-site-theme]), html[data-site-theme])
  body.theme-design-system
  .official-platform-grid-v13 > a.official-platform-card-v13[data-platform="fansly"][data-placement="content-architecture-v13"]:hover,
  :is(html:not([data-site-theme]), html[data-site-theme])
  body.theme-design-system.seo-growth-page
  .verified-link-list > a[data-platform="fansly"][data-placement="official-directory"]:hover,
  :is(html:not([data-site-theme]), html[data-site-theme])
  body.theme-design-system.seo-growth-page
  a.seo-growth-primary-cta[data-platform="fansly"][data-placement="seo-landing"]:hover {
    border-color: rgba(31, 112, 171, .78) !important;
    background-image:
      radial-gradient(circle at 12% 8%, rgba(29, 169, 229, .12), transparent 40%),
      linear-gradient(135deg, #0a2638 0%, #071c2b 58%, #15161a 100%) !important;
    background-color: #071c2b !important;
    box-shadow:
      inset 0 1px 0 rgba(201, 239, 255, .16),
      inset 0 0 28px rgba(29, 169, 229, .05),
      0 16px 34px rgba(0, 6, 14, .42),
      0 0 24px rgba(18, 91, 147, .18) !important;
  }

  body.theme-design-system.seo-growth-page
  .verified-link-list > a[data-platform="fansly"][data-placement="official-directory"]:hover > span {
    color: #58b9e5 !important;
  }

  body.theme-design-system.seo-growth-page
  a.seo-growth-primary-cta[data-platform="fansly"][data-placement="seo-landing"]:hover {
    color: #f5fbff !important;
  }
}

body.theme-design-system
.official-platform-grid-v13 > a.official-platform-card-v13[data-platform="fansly"][data-placement="content-architecture-v13"]:focus-visible {
  --platform-card-accent: #1969a4;
}

body.theme-design-system.library-page-v2
#library-comparison > article.library-card.library-card-fansly:has(
  > a[data-platform="fansly"][data-placement="guide-card"]:focus-visible
) {
  --library-card-accent: #1969a4;
  --library-action-ink: #f4fbff;
}

:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system.home-spatial-v2
.official-links > a.profile-link[data-platform="fansly"][data-placement="platform-list"]:focus-visible,
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system.library-page-v2
#library-comparison > article.library-card.library-card-fansly:has(
  > a[data-platform="fansly"][data-placement="guide-card"]:focus-visible
),
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system
.official-platform-grid-v13 > a.official-platform-card-v13[data-platform="fansly"][data-placement="content-architecture-v13"]:focus-visible,
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system.seo-growth-page
.verified-link-list > a[data-platform="fansly"][data-placement="official-directory"]:focus-visible,
:is(html:not([data-site-theme]), html[data-site-theme])
body.theme-design-system.seo-growth-page
a.seo-growth-primary-cta[data-platform="fansly"][data-placement="seo-landing"]:focus-visible {
  border-color: rgba(31, 112, 171, .78) !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(29, 169, 229, .12), transparent 40%),
    linear-gradient(135deg, #0a2638 0%, #071c2b 58%, #15161a 100%) !important;
  background-color: #071c2b !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 239, 255, .16),
    inset 0 0 28px rgba(29, 169, 229, .05),
    0 16px 34px rgba(0, 6, 14, .42),
    0 0 24px rgba(18, 91, 147, .18) !important;
}

body.theme-design-system.seo-growth-page
.verified-link-list > a[data-platform="fansly"][data-placement="official-directory"]:focus-visible > span {
  color: #58b9e5 !important;
}

body.theme-design-system.seo-growth-page
a.seo-growth-primary-cta[data-platform="fansly"][data-placement="seo-landing"]:focus-visible {
  color: #f5fbff !important;
}
/* FANSLY-BRAND-HOVER-V1-END */