/* Katomu visual matrix. The only palette authority for Chat, Fic and admin. */
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/shared/assets/fonts/manrope-cyrillic.woff2?v=c268b459a932') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/shared/assets/fonts/manrope-cyrillic-ext.woff2?v=de37de877dc1') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/shared/assets/fonts/manrope-latin.woff2?v=a30ddcd34970') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    /* Bounded ramps for diagrams and legacy presentation aliases. */
    --neutral-0: #0b0d0f;
    --neutral-1: #0f1116;
    --neutral-2: #14171d;
    --neutral-3: #1d2027;
    --neutral-4: #464d5a;
    --neutral-5: #747c8c;
    --neutral-6: #a4adbc;
    --neutral-7: #c8cdda;
    --neutral-8: #e4e7ed;
    --neutral-9: #f4f5f8;
    --neutral-10: #ffffff;
    --purple-ink: #281c49;
    --purple-solid: #7a5af8;
    --purple-hover: #6945df;
    --purple-light: #a78bff;
    --purple-pale: #eee8ff;
    --green-ink: #173b2c;
    --green-solid: #256a4b;
    --green-light: #83c9a4;
    --green-pale: #e2f2e8;
    --red-light: #df8792;
    --red-solid: #ad3c50;
    --pink-pale: #f4dce9;
    --pink-bright: #f45baf;
    --katy-ink: #44351e;
    --katy-solid: #826020;
    --katy-light: #d8bb7b;
    --katy-pale: #f6ecd5;
    --crimson-ink: #67202c;
    --crimson-solid: #cf4054;
    --crimson-light: #ed8995;
    --crimson-pale: #f8dce0;
    /* External service identity, used only for the Telegram link interaction. */
    --telegram-brand: #229ed9;
    --black: #000000;
    --white: var(--neutral-10);
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.125rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --dialog-width: 600px;
    --chat-width: 600px;
    --lobby-width: 600px;
    --radius: var(--radius-md);
    --radius-lg: 16px;
    --radius-xl: var(--radius-lg);
    --radius-pill: 999px;
    --radius-full: 50%;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --control-size: 44px;
    --icon-stroke: 2;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 16%);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 26%);
    --duration: 0.16s;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --scene-roleplay: url('/shared/assets/backgrounds/roleplay-landscape-960.webp?v=6b39a4ce67d5');
    --scene-ai: url('/shared/assets/backgrounds/ai-landscape-960.webp?v=5a74fdb93427');
    --scene-settings: url('/shared/assets/backgrounds/settings-workshop-960.webp?v=75b1a47be811');
    --scene-statistics: url('/shared/assets/backgrounds/statistics-archive-960.webp?v=8f701f670c8f');
    --scene-profile: url('/shared/assets/backgrounds/profile-refuge-960.webp?v=e9e937f58bb6');
    --page-pattern: url('/shared/assets/ornaments/gothic-tracery.svg');
    --page-pattern-size: 480px 480px;
}
:root, body.dark {
    color-scheme: dark;
    --bg: var(--neutral-0);
    --surface: var(--neutral-1);
    --surface-2: var(--neutral-2);
    --surface-3: var(--neutral-3);
    --text: var(--neutral-9);
    --text-2: var(--neutral-7);
    --text-3: var(--neutral-6);
    --border: var(--neutral-3);
    --border-2: var(--neutral-4);
    --control-border: var(--neutral-5);
    --overlay: rgb(0 0 0 / 72%);
    --brand: var(--purple-light);
    --brand-solid: var(--purple-solid);
    --brand-hover: var(--purple-hover);
    --brand-soft: color-mix(in srgb, var(--brand-solid) 24%, var(--surface));
    --success: var(--green-light);
    --metric-negative: var(--red-light);
    --metric-middle: var(--katy-light);
    --metric-positive: var(--green-light);
    --metric-arousal-low: var(--pink-pale);
    --metric-arousal-high: var(--pink-bright);
    --success-solid: var(--green-solid);
    --katy: var(--katy-light);
    --warning: var(--katy);
    --danger: var(--brand);
    --on-accent: var(--white);
    --focus-ring: var(--brand);
    --c-rp: var(--brand);
    --c-basic: var(--brand);
    --c-flirt: var(--brand);
    --accent-solid: var(--brand-solid);
    --scene-shade: rgb(11 13 15 / 64%);
}
body.light, :root[data-admin-theme="light"] {
    color-scheme: light;
    --bg: var(--neutral-9);
    --surface: var(--neutral-10);
    --surface-2: var(--neutral-9);
    --surface-3: var(--neutral-8);
    --text: var(--neutral-1);
    --text-2: var(--neutral-4);
    --text-3: var(--neutral-4);
    --border: var(--neutral-7);
    --border-2: var(--neutral-6);
    --control-border: var(--neutral-5);
    --overlay: rgb(0 0 0 / 52%);
    --brand: var(--purple-hover);
    --brand-soft: var(--purple-pale);
    --success: var(--green-solid);
    --metric-negative: var(--red-solid);
    --metric-middle: var(--katy-solid);
    --metric-positive: var(--green-solid);
    --metric-arousal-low: color-mix(in srgb, var(--pink-pale) 50%, var(--neutral-0));
    --metric-arousal-high: color-mix(in srgb, var(--pink-bright) 75%, var(--neutral-0));
    --katy: var(--katy-solid);
    --warning: var(--katy);
    --danger: var(--brand);
    --scene-shade: rgb(244 245 248 / 87%);
    --focus-ring: var(--brand);
    --c-rp: var(--brand);
    --c-basic: var(--brand);
    --c-flirt: var(--brand);
}
:root, body.dark, body.light {
    --surface-translucent: color-mix(in srgb, var(--surface) 74%, transparent);
    --brand-backdrop: radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 42%, transparent) 48%, transparent 74%);
}
/* Account-selected AI reading palettes. Product scopes opt into these tokens;
   declaring a choice does not recolor the surrounding site navigation. */
:root, [data-ai-reading-theme="original"] {
    --ai-reading-bg: #0b0d0f;
    --ai-reading-panel: #0f1116;
    --ai-reading-surface: #14171d;
    --ai-reading-raised: #1d2027;
    --ai-reading-incoming: #22262c;
    --ai-reading-incoming-edge: #35383f;
    --ai-reading-outgoing-edge: #3f3b66;
    --ai-reading-accent: #a78bff;
}
[data-ai-reading-theme="graphite"] {
    --ai-reading-bg: #151617;
    --ai-reading-panel: #1c1d1f;
    --ai-reading-surface: #2c2f32;
    --ai-reading-raised: #383b40;
    --ai-reading-incoming: #333538;
    --ai-reading-incoming-edge: #45484e;
    --ai-reading-outgoing: #413c4b;
    --ai-reading-outgoing-edge: #565162;
    --ai-reading-text: #eef0f4;
    --ai-reading-secondary: #ced1d8;
    --ai-reading-muted: #b1b7bf;
    --ai-reading-border: #393b41;
    --ai-reading-edge: #686d76;
    --ai-reading-accent: #b8a9d1;
    --ai-reading-solid: #655779;
    --ai-reading-selected: #35313e;
    --ai-reading-on-accent: #f0eaf6;
    --ai-reading-action: #dbd9e8;
    --ai-reading-success: #a0bfad;
    --ai-reading-warning: #c9b799;
    --ai-reading-error: #d6a5aa;
}
[data-ai-reading-theme="slate"] {
    --ai-reading-bg: #121a20;
    --ai-reading-panel: #18222b;
    --ai-reading-surface: #26333d;
    --ai-reading-raised: #30414c;
    --ai-reading-incoming: #2c3a44;
    --ai-reading-incoming-edge: #394e5c;
    --ai-reading-outgoing: #2b4364;
    --ai-reading-outgoing-edge: #3c597e;
    --ai-reading-text: #eaf1f8;
    --ai-reading-secondary: #c7d7e1;
    --ai-reading-muted: #adbeca;
    --ai-reading-border: #31424d;
    --ai-reading-edge: #627a8a;
    --ai-reading-accent: #acb9d7;
    --ai-reading-solid: #526681;
    --ai-reading-selected: #303d50;
    --ai-reading-on-accent: #eef2fa;
    --ai-reading-action: #d0dfe9;
    --ai-reading-success: #9cc3b8;
    --ai-reading-warning: #cbbb9e;
    --ai-reading-error: #d5a8b2;
}
[data-ai-reading-theme="ember"] {
    --ai-reading-bg: #1a1715;
    --ai-reading-panel: #231f1c;
    --ai-reading-surface: #342f2a;
    --ai-reading-raised: #433b34;
    --ai-reading-incoming: #3b3632;
    --ai-reading-incoming-edge: #534840;
    --ai-reading-outgoing: #503b2d;
    --ai-reading-outgoing-edge: #68503f;
    --ai-reading-text: #f7f0e5;
    --ai-reading-secondary: #dfd2c6;
    --ai-reading-muted: #c3b7aa;
    --ai-reading-border: #453c35;
    --ai-reading-edge: #806e60;
    --ai-reading-accent: #c7b5ce;
    --ai-reading-solid: #705b6e;
    --ai-reading-selected: #3e333e;
    --ai-reading-on-accent: #f5edf3;
    --ai-reading-action: #e8dcc7;
    --ai-reading-success: #b3bfa3;
    --ai-reading-warning: #d3ba8f;
    --ai-reading-error: #d8aba0;
}
/* Bubble fills and 1px edges bind in every AI chat, the original palette
   included, so a message never melts into the transcript background. */
#chat-screen[data-chat-kind="ai"] {
    --incoming-bg: var(--ai-reading-incoming);
    --incoming-border: var(--ai-reading-incoming-edge);
    --outgoing-border: var(--ai-reading-outgoing-edge);
}
/* Only the AI chat window binds the chosen reading palette to the shared
   semantic and forged tokens; the sidebar, tabs, menus and dialogs keep the
   site brand (owner, 2026-10-16). Custom properties resolve where they are
   declared, so derived palettes (forged art, dialog rims) are rebound here too
   instead of inheriting their :root values. */
body[data-ai-reading-theme]:not([data-ai-reading-theme="original"]) #chat-screen[data-chat-kind="ai"] {
    --neutral-0: var(--ai-reading-bg);
    --neutral-1: var(--ai-reading-panel);
    --neutral-2: var(--ai-reading-surface);
    --neutral-3: var(--ai-reading-raised);
    --neutral-4: var(--ai-reading-edge);
    --neutral-5: var(--ai-reading-muted);
    --neutral-6: var(--ai-reading-muted);
    --neutral-7: var(--ai-reading-secondary);
    --neutral-8: var(--ai-reading-text);
    --neutral-9: var(--ai-reading-text);
    --neutral-10: var(--ai-reading-on-accent);
    --white: var(--ai-reading-on-accent);
    --purple-light: var(--ai-reading-accent);
    --purple-solid: var(--ai-reading-solid);
    --purple-hover: var(--ai-reading-solid);
    --purple-ink: var(--ai-reading-selected);
    --purple-pale: var(--ai-reading-on-accent);
    --bg: var(--ai-reading-bg);
    --surface: var(--ai-reading-panel);
    --surface-2: var(--ai-reading-surface);
    --surface-3: var(--ai-reading-raised);
    --surface-translucent: color-mix(in srgb, var(--surface) 74%, transparent);
    --text: var(--ai-reading-text);
    --text-1: var(--text);
    --text-2: var(--ai-reading-secondary);
    --text-3: var(--ai-reading-muted);
    --border: var(--ai-reading-border);
    --border-2: var(--ai-reading-edge);
    --control-border: var(--ai-reading-edge);
    --brand: var(--ai-reading-accent);
    --brand-solid: var(--ai-reading-solid);
    --brand-hover: var(--ai-reading-solid);
    --brand-soft: var(--ai-reading-selected);
    --brand-backdrop: radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 42%, transparent) 48%, transparent 74%);
    --scene-shade: color-mix(in srgb, var(--bg) 64%, transparent);
    --accent-color: var(--brand);
    --accent-gradient-end: var(--brand-solid);
    --accent-solid: var(--brand-solid);
    --c-rp: var(--brand);
    --c-basic: var(--brand);
    --c-flirt: var(--brand);
    --focus-ring: var(--brand);
    --on-accent: var(--ai-reading-on-accent);
    --outgoing-bg: var(--ai-reading-outgoing);
    --outgoing-color: var(--text);
    --incoming-color: var(--text);
    --ai-action-color: var(--ai-reading-action);
    --success: var(--ai-reading-success);
    --warning: var(--ai-reading-warning);
    --katy: var(--ai-reading-warning);
    --danger: var(--ai-reading-error);
    --green-light: var(--success);
    --green-solid: color-mix(in srgb, var(--success) 35%, var(--surface));
    --green-ink: color-mix(in srgb, var(--success) 16%, var(--surface));
    --green-pale: var(--success);
    --success-solid: var(--green-solid);
    --katy-light: var(--warning);
    --katy-solid: color-mix(in srgb, var(--warning) 35%, var(--surface));
    --katy-ink: color-mix(in srgb, var(--warning) 16%, var(--surface));
    --katy-pale: var(--warning);
    --red-light: var(--danger);
    --red-solid: color-mix(in srgb, var(--danger) 35%, var(--surface));
    --metric-positive: var(--success);
    --metric-middle: var(--warning);
    --metric-negative: var(--danger);
    --forged-svg-void: var(--bg);
    --forged-svg-rim: var(--border-2);
    --forged-svg-body: var(--surface-2);
    --forged-svg-face: var(--surface);
    --forged-svg-recess-edge: var(--border);
    --forged-svg-facet: var(--text-3);
    --forged-svg-scar: var(--text-3);
    --forged-svg-pit: var(--bg);
    --forged-svg-pit-edge: var(--border-2);
    --forged-svg-rivet: var(--surface);
    --forged-svg-accent: var(--brand);
    color: var(--text);
}
@media (min-width: 961px) {
    :root {
        --scene-roleplay: url('/shared/assets/backgrounds/roleplay-landscape-1920.webp?v=0f3a98ae0133');
        --scene-ai: url('/shared/assets/backgrounds/ai-landscape-1920.webp?v=d888bba3725f');
        --scene-settings: url('/shared/assets/backgrounds/settings-workshop-1536.webp?v=579e626a7422');
        --scene-statistics: url('/shared/assets/backgrounds/statistics-archive-1536.webp?v=e920028dd707');
        --scene-profile: url('/shared/assets/backgrounds/profile-refuge-1536.webp?v=bad56ab79ccf');
    }
}
@media (prefers-reduced-motion: reduce) {
    :root { --duration: 0s; }
}