:root {
    color-scheme: dark;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-landing: 'Instrument Sans', 'Manrope', sans-serif;
    --color-page: #180e35;
    --color-shell: #222327;
    --color-canvas: #1a1a1e;
    --color-panel: #161619;
    --color-field: #252529;
    --color-hover: #2c2b33;
    --color-text: #f4f1ea;
    --color-muted: #b8b1a8;
    --color-subtle: #77716b;
    --color-accent: #8b5cf6;
    /* Фон кнопок — тот же фиолетовый темнее (OKLCH, светлота ниже): текст --color-text читается с контрастом не ниже 4,5:1. */
    --color-accent-button: #7c4ae3;
    --color-accent-hover: #713cd6;
    --color-lilac: #c4b5fd;
    --color-selected: rgba(196, 181, 253, .14);
    --color-border: rgba(233, 229, 255, .09);
    --color-border-hover: rgba(196, 181, 253, .25);
    --color-focus: #b69afa;
    --color-focus-ring: rgba(167, 139, 250, .17);
    --color-danger: #ef445f;
    --color-danger-hover: #fa5d75;
    --color-success: #64d6a2;
    --color-warning: #f4c576;
    --color-scrim: rgba(10, 8, 18, .76);
    --gradient-primary: linear-gradient(135deg, #7658c2, rgba(118,88,194,.85) 50%, #6643c1);
    --gradient-welcome: radial-gradient(140% 160% at 18% -12%, rgba(167,139,250,.42), transparent 66%), radial-gradient(120% 150% at 50% 112%, rgba(167,139,250,.2), transparent 58%), linear-gradient(#241052, #2f1767 44%, #3d2179 74%, #4c2c8f);
    --gradient-avatar: linear-gradient(145deg, #afa0fb, #7c68c9);
    --shadow-control: none;
    --shadow-hover: none;
    --shadow-panel: 0 24px 80px rgba(0, 0, 0, .35);
    --shadow-float: 0 12px 48px rgba(7, 4, 18, .3);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-base: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-title: 28px;
    --font-section: 40px;
    --line-body: 1.65;
    --line-heading: 1.12;
    --radius-sm: 8px;
    --radius-control: 14px;
    --radius-card: 20px;
    --radius-panel: 24px;
    --control-height: 48px;
    --header-height: 64px;
    --rail-width: 72px;
    --sidebar-width: 320px;
    --app-topbar-height: 65px;
    --app-corner: 18px;
    --app-rail-item-height: 56px;
    --app-banner-height: 0px;
    --chat-typing-slot-height: 26px;
    --chat-compose-gap: 14px;
    --chat-skip-width: 132px;
    --chat-send-width: 0px;
    --chat-send-opacity: 0;
    --chat-message-line: 1.375;
    --lobby-controls-width: 420px;
    --lobby-avatar-width: 140px;
    --lobby-mode-icon-size: 22px;
    --profile-width: 620px;
    --profile-choice-height: 96px;
    --profile-title-size: 56px;
    --auth-card-width: 430px;
    --auth-field-height: 44px;
    --auth-field-radius: 12px;
    --auth-title-size: 24px;
    --auth-background: #160033;
    --settings-width: 780px;
    --settings-height: 680px;
    --settings-sidebar-width: 200px;
    --settings-radius: 22px;
    --settings-background: #222327;
    --settings-sidebar-background: #2a2b30;
    --settings-subtle: #8f8982;
    --settings-surface: rgba(255,255,255,.06);
    --settings-claim-background: #3a315e;
    --settings-card-radius: 18px;
    --settings-avatar-size: 56px;
    --settings-link-image: 72px;
    --settings-tab-height: 42px;
    --settings-sidebar-title-size: 12.8px;
    --settings-sidebar-title-padding: 8.8px 10.4px 10.88px;
    --settings-tab-gap: 2.88px;
    --settings-tab-inset: 11.2px;
    --settings-tab-icon-gap: 10.4px;
    --settings-tab-size: 14.08px;
    --settings-tab-weight: 620;
    --settings-control-radius: 12px;
    --settings-topbar-padding: 14.4px var(--settings-content-inset) 11.52px;
    --settings-subtitle-gap: 2.88px;
    --settings-card-gap: 14.4px;
    --settings-claim-padding: 15.2px 16px;
    --settings-claim-title-size: 15px;
    --settings-claim-description-size: 13px;
    --settings-claim-description-color: rgba(255,255,255,.78);
    --settings-profile-name-size: 16.32px;
    --settings-profile-name-weight: 720;
    --settings-label-gap: 3.52px;
    --settings-notice-padding: 13.6px 16px;
    --settings-notice-size: 13.12px;
    --settings-delete-title-size: 15.2px;
    --settings-title-size: 16.96px;
    --settings-title-weight: 760;
    --settings-subtitle-size: 12.48px;
    --settings-detail-label-size: 11.2px;
    --settings-detail-value-size: 14.4px;
    --settings-content-inset: 17.6px;
    --settings-row-inset: 14.72px;
    --settings-close-size: 36px;
    --settings-shadow: 0 24px 80px rgba(0,0,0,.48);
    --icon-size: 20px;
    --rail-icon-size: 24px;
    --rail-label-size: 11px;
    --rail-radius: 10px;
    --history-row-height: 76px;
    --history-empty-image: 72px;
    --history-reader-title: 16px;
    --settings-columns: var(--settings-sidebar-width) minmax(0,1fr);
    --settings-rows: minmax(0,1fr);
    --sidebar-position: relative;
    --sidebar-top: 0px;
    --sidebar-transform: none;
    --sidebar-layer: auto;
    --rail-display: flex;
    --mobile-display: none;
    --header-nav-display: flex;
    --page-width: 1120px;
    --landing-section-padding: 48px 32px;
    --landing-panel-padding: 43.2px;
    --landing-panel-radius: 18px;
    --landing-surface: rgba(255,255,255,.035);
    --landing-muted: rgba(226,232,240,.84);
    --landing-title-size: 48px;
    --landing-title-width: 760px;
    --landing-title-line: 1.15;
    --landing-lead-size: 18.88px;
    --landing-lead-line: 1.7;
    --landing-promo-height: 520px;
    --landing-demo-ratio: 1.6;
    --landing-demo-avatar: 34px;
    --landing-demo-message-size: 11.84px;
    --landing-demo-motion: 18s;
    --landing-demo-shift: -270px;
    --landing-stats-title: 37.6px;
    --landing-stats-value: 48px;
    --landing-stat-height: 132px;
    --landing-ticker-size: 38.4px;
    --landing-ticker-duration: 24s;
    --landing-card-height: 320px;
    --landing-card-icon-height: 126px;
    --landing-card-title: 17.28px;
    --landing-card-text: 15.36px;
    --landing-card-line: 1.68;
    --landing-topic-width: 322.66px;
    --landing-topic-height: 270px;
    --landing-topic-motion: 36s;
    --landing-faq-width: 900px;
    --landing-faq-row-padding: 32px 0;
    --landing-final-title: 41.6px;
    --landing-final-height: 360px;
    --landing-glow-height: 260px;
    --landing-footer-padding: 64px 44px 24px;
    --landing-wordmark-size: 19vw;
    --landing-rocket-width: 240px;
    --landing-footer-background: radial-gradient(circle at 50% -18%, rgba(112,0,255,.2), transparent 42%), linear-gradient(#20123f, #160d2f);
    --reading-width: 840px;
    --modal-width: 440px;
    --hero-columns: repeat(2, minmax(0, 1fr));
    --hero-align: left;
    --hero-padding: 8px;
    --hero-min-height: 100svh;
    --hero-content-padding: 32px;
    --hero-gap: 64px;
    --hero-title-size: clamp(32px, 5vw, 51.2px);
    --hero-description-size: clamp(16.8px, 2vw, 20px);
    --hero-description-margin: 48px;
    --hero-description-line: 1.6;
    --hero-art-image-width: min(90%, 470px);
    --hero-dice-motion: 9s;
    --hero-bunny-motion: 6s;
    --hero-drift: -5px;
    --hero-cta-width: 220px;
    --hero-cta-radius: 999px;
    --hero-actions-direction: row;
    --card-min-width: 260px;
    --motion-fast: 160ms;
    --motion-normal: 240ms;
    --motion-enter: 400ms;
    --motion-float: 6s;
    --motion-search: 2.4s;
    --motion-pulse: 1.1s;
    --motion-step: .16s;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-spring: cubic-bezier(.34, 1.56, .64, 1);
    --focus-width: 2px;
    --focus-offset: 3px;
    --scrollbar-width: 6px;
    --avatar-size: 40px;
    --avatar-large: 52px;
    --image-width: 320px;
    --image-height: 480px;
    --image-viewport-height: 60dvh;
    --image-blur: 6px;
    --viewport-height: 100dvh;
    --chat-inset: 16px;
    --chat-compose-inset: 22.4px;
    --chat-compose-height: 58px;
    --chat-message-width: 90%;
    --chat-status-size: 8px;
    --chat-max-compose-height: 144px;
    --chat-search-image: 144px;
    --chat-search-width: 520px;
    --chat-dot-size: 3px;
    --chat-indicator-width: 18px;
}
.site-preview-notice { position: relative; z-index: var(--layer-modal, 100); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); color: var(--color-text); background: var(--color-panel); border-bottom: 1px solid var(--color-border); font-size: var(--font-sm); }
.site-preview-content { position: relative; }
body.site-chat { --header-height: 54px; --color-page: var(--color-shell); }
@media (max-width: 1050px) {
    :root { --sidebar-width: 280px; --hero-gap: 32px; }
}
@media (max-width: 760px) {
    :root {
        --rail-width: 0px;
        --sidebar-width: min(88vw, 320px);
        --sidebar-position: fixed;
        --sidebar-top: calc(var(--header-height) + env(safe-area-inset-top));
        --sidebar-transform: translateX(-105%);
        --sidebar-layer: 30;
        --rail-display: none;
        --mobile-display: flex;
        --header-nav-display: none;
        --app-topbar-height: 0px;
        --app-banner-height: 0px;
        --app-corner: 0px;
        --chat-compose-gap: 8px;
        --chat-skip-width: 112px;
        --chat-compose-inset: 8px;
        --lobby-avatar-width: 120px;
        --profile-title-size: 36px;
        --profile-choice-height: 80px;
        --settings-columns: minmax(0,1fr);
        --settings-rows: auto minmax(0,1fr);
        --hero-columns: minmax(0, 1fr);
        --landing-section-padding: 32px 20px;
        --landing-panel-padding: 24px;
        --landing-title-size: 32px;
        --landing-lead-size: 17px;
        --landing-stats-title: 28px;
        --landing-stats-value: 32px;
        --landing-stat-height: 108px;
        --landing-ticker-size: 28px;
        --landing-promo-height: auto;
        --landing-topic-width: 290px;
        --landing-faq-row-padding: 24px 0;
        --landing-final-title: 32px;
        --landing-final-height: 320px;
        --landing-glow-height: 220px;
        --landing-footer-padding: 48px 24px 24px;
        --landing-rocket-width: 190px;
        --hero-align: center;
        --hero-padding: clamp(80px, 14svh, 100px);
        --hero-gap: 22.4px;
        --hero-min-height: 110svh;
        --hero-title-size: clamp(32px, 7vw, 56px);
        --hero-description-size: clamp(18px, 5vw, 24px);
        --hero-description-line: 1.5;
        --hero-description-margin: 28.8px;
        --hero-art-image-width: clamp(190px, 56vw, 280px);
        --font-section: 28px;
        --hero-actions-direction: column;
        --chat-inset: 16px;
        --chat-compose-height: 48px;
        --chat-message-width: 100%;
        --avatar-size: 32px;
        --chat-search-image: 112px;
    }
    .chat-shell { --sidebar-width: 0px; }
    .chat-sidebar { --sidebar-width: min(88vw, 340px); --sidebar-top: 0px; }
    body.chat-sidebar-open { --sidebar-transform: translateX(0); }
}
body.site-chat.chat-send-visible { --chat-send-width: var(--chat-compose-height); --chat-send-opacity: 1; }
body.site-chat:has(.account-link-banner) { --app-banner-height: 0px; }
@media (max-width: 760px) {
    body.site-chat:has(.account-link-banner) { --app-banner-height: 37px; }
}
@media (max-width: 380px) {
    :root { --chat-inset: 12px; }
}
