:root {
    --page-bg: #090d13;
    --page-bg-2: #0d131c;

    --shell: #111823;
    --shell-deep: #0b1119;

    --panel: #161f2b;
    --panel-soft: #1b2634;
    --panel-raised: #202c3b;

    --blue: #496fae;
    --blue-hi: #668ac5;
    --blue-deep: #324f80;

    --border: #2c3949;
    --border-hi: #405168;

    --text: #d9e0e8;
    --text-soft: #9daaba;
    --text-faint: #667487;

    --link: #8db5ef;
    --red: #d34e59;
    --green: #5bc58a;
    --amber: #d7a94f;

    --canvas: #f3f5f7;

    --radius: 8px;

    --shadow:
        0 2px 8px rgba(0,0,0,.35),
        0 20px 60px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;

    color: var(--text);

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 13px;

    background:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% -10%,
            rgba(62, 97, 153, .24),
            transparent 700px
        ),
        linear-gradient(
            180deg,
            var(--page-bg-2),
            var(--page-bg)
        );

    background-size:
        38px 38px,
        38px 38px,
        auto,
        auto;

    background-attachment: fixed;
}

button,
input {
    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

.site-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 38px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(23,32,44,.98),
            rgba(13,19,28,.98)
        );

    border: 1px solid #273649;
    border-radius: 10px;

    box-shadow: var(--shadow);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    min-height: 78px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    gap: 22px;

    position: relative;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #4f6fa8 0%,
            #405f98 48%,
            #334f80 100%
        );

    border-bottom: 1px solid #263d65;

    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        inset 0 -1px rgba(0,0,0,.18);
}

.site-header::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(135,178,237,.8),
            transparent
        );
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
}

.brand-logo {
    width: 292px;
    max-width: 31vw;
    height: 54px;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.32));
}

.brand-title {
    white-space: nowrap;

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 19px;
    font-weight: 700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.45);
}

.brand-title span {
    color: #d8e3f5;
    font-weight: 400;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 4px;

    margin-left: auto;
}

.top-nav a {
    padding: 9px 11px;

    color: #dce7f7;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 5px;

    transition:
        background .12s ease,
        border-color .12s ease,
        color .12s ease;
}

.top-nav a:hover {
    color: #fff;

    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.12);
}

.header-indicator {
    min-width: 105px;
    height: 35px;

    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #c8d1dd;

    background:
        linear-gradient(
            180deg,
            rgba(10,15,23,.55),
            rgba(5,8,13,.62)
        );

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.05);

    font-size: 10px;
    text-transform: uppercase;
}

.status-led {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;

    background: #687483;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.35);
}

.status-led--online {
    background: var(--green);

    box-shadow:
        0 0 7px rgba(91,197,138,.55);
}

.status-led--error {
    background: var(--red);

    box-shadow:
        0 0 7px rgba(211,78,89,.45);
}


/* ============================================================
   CONTENT
   ============================================================ */

.content {
    padding: 22px;
}

.notice {
    margin-bottom: 18px;
    padding: 11px 13px;

    color: #d7c18c;

    background:
        linear-gradient(
            180deg,
            rgba(102,75,24,.24),
            rgba(72,52,19,.18)
        );

    border: 1px solid rgba(215,169,79,.27);
    border-radius: 6px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.025);

    font-size: 12px;
    line-height: 1.5;
}

.notice strong {
    color: #e1b760;
}

.retro-section {
    margin-bottom: 18px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--panel);

    box-shadow:
        0 7px 20px rgba(0,0,0,.18);
}

.section-header {
    min-height: 44px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #3d5e95,
            #314d7b
        );

    border-bottom: 1px solid #243b61;

    box-shadow:
        inset 0 1px rgba(255,255,255,.08);
}

.section-header > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.section-header strong {
    font-size: 16px;
    font-weight: 700;

    text-shadow:
        0 1px 1px rgba(0,0,0,.45);
}

.section-header span:not(.section-meta) {
    color: #cbd8eb;
    font-size: 11px;
}

.section-meta {
    color: #9eb3cf;

    font-size: 9px;
    letter-spacing: .04em;

    text-transform: uppercase;
}


/* ============================================================
   CANVAS TOOLBAR
   ============================================================ */

.canvas-toolbar {
    min-height: 49px;
    padding: 7px 10px;

    display: flex;
    align-items: center;
    gap: 6px;

    background:
        linear-gradient(
            180deg,
            #202b39,
            #192330
        );

    border-bottom: 1px solid #293849;
}

.tool-group {
    display: flex;
    gap: 5px;
}

.tool-btn,
.canvas-toolbar button,
.chat-auth-strip button,
.chat-composer button,
.button-row button {
    min-width: 36px;
    height: 29px;
    padding: 0 10px;

    color: #d7e0ea;

    background:
        linear-gradient(
            180deg,
            #314052,
            #222e3d
        );

    border: 1px solid #42546a;
    border-radius: 4px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 1px 2px rgba(0,0,0,.28);

    font-size: 11px;
    font-weight: 700;

    transition:
        background .1s ease,
        border-color .1s ease,
        transform .05s ease;
}

.tool-btn:hover:not(:disabled),
.canvas-toolbar button:hover:not(:disabled),
.chat-auth-strip button:hover:not(:disabled),
.chat-composer button:hover:not(:disabled),
.button-row button:hover {
    color: white;

    background:
        linear-gradient(
            180deg,
            #3c5067,
            #29384a
        );

    border-color: #617895;
}

.button-row button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: .55;
}

.tool-separator {
    width: 1px;
    height: 26px;
    margin: 0 4px;

    background: #344457;
}

.toolbar-label {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-soft);

    font-size: 10px;
}

.fake-color {
    width: 28px;
    height: 24px;

    display: inline-block;

    background: #df3038;

    border: 1px solid #728096;
    border-radius: 3px;

    box-shadow:
        inset 0 0 0 2px #19222e;
}

.fake-slider {
    width: 82px;
    height: 5px;

    display: inline-block;

    position: relative;

    background: #3b4758;

    border-radius: 999px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.5);
}

.fake-slider::before {
    content: "";

    width: 14px;
    height: 14px;

    position: absolute;
    left: 15px;
    top: -5px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #9aaac0,
            #64758a
        );

    border: 1px solid #4f5c6d;

    box-shadow:
        0 1px 3px rgba(0,0,0,.4);
}

.toolbar-spacer {
    flex: 1;
}

.danger-btn {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #c94a56,
            #9e313d
        ) !important;

    border-color: #d45a65 !important;
}


/* ============================================================
   CANVAS
   ============================================================ */

.canvas-area {
    min-height: 510px;

    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;

    background-color: var(--canvas);

    background-image:
        radial-gradient(
            circle,
            rgba(55,77,104,.115) 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    box-shadow:
        inset 0 2px 8px rgba(17,26,38,.16);
}

.canvas-area::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 55px rgba(53,70,90,.08);
}

.canvas-ghost {
    width: min(380px, 52%);

    position: absolute;

    opacity: .035;

    filter: grayscale(1);
}

.canvas-placeholder {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    color: #687487;
}

.canvas-placeholder strong {
    font-size: 17px;
    letter-spacing: .15em;
}

.canvas-placeholder span {
    font-size: 11px;
}


/* ============================================================
   CHAT
   ============================================================ */

.chat-auth-strip {
    min-height: 42px;
    padding: 6px 9px;

    display: flex;
    align-items: center;
    gap: 7px;

    background: #192330;

    border-bottom: 1px solid #2a394b;
}

.auth-state {
    flex: 1;

    height: 28px;
    padding: 0 9px;

    display: flex;
    align-items: center;
    gap: 5px;

    color: var(--text-soft);

    background: #101720;

    border: 1px solid #2f3f51;
    border-radius: 4px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.25);

    font-size: 11px;
}

.auth-state strong {
    color: #9cc3f7;
}

.chat-stream {
    height: 330px;

    overflow-y: auto;

    padding: 6px;

    background: #101720;

    scrollbar-color:
        #3f5065
        #151d28;
}

.loading-message {
    padding: 10px;

    color: var(--text-faint);

    font-size: 11px;
}

.chat-message {
    min-height: 27px;

    padding: 5px 8px;

    display: grid;
    grid-template-columns:
        minmax(90px, 145px)
        1fr;

    gap: 8px;

    align-items: start;

    margin-bottom: 3px;

    color: #d4dbe3;

    background:
        linear-gradient(
            180deg,
            rgba(34,46,61,.82),
            rgba(27,38,51,.82)
        );

    border: 1px solid #293748;
    border-radius: 4px;

    font-size: 11px;

    transition:
        background .1s ease,
        border-color .1s ease;
}

.chat-message:hover {
    background: #243246;
    border-color: #40546c;
}

.chat-author {
    color: #85b8f4;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.chat-text {
    min-width: 0;

    color: #d6dde6;

    overflow-wrap: anywhere;
}

.chat-composer {
    min-height: 45px;
    padding: 7px 9px;

    display: flex;
    gap: 6px;

    background: #192330;

    border-top: 1px solid #2d3c4d;
}

.chat-composer input {
    min-width: 0;
    flex: 1;

    height: 29px;
    padding: 0 9px;

    color: var(--text);

    background: #0d141d;

    border: 1px solid #334559;
    border-radius: 4px;

    outline: none;

    font-size: 11px;
}

.chat-composer input::placeholder {
    color: #687587;
}

.chat-composer input:focus {
    border-color: #557db5;

    box-shadow:
        0 0 0 2px rgba(75,111,171,.18);
}


/* ============================================================
   LOWER CARDS
   ============================================================ */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    margin-bottom: 18px;
}

.info-card {
    min-height: 128px;
    padding: 13px;

    display: flex;
    gap: 14px;

    background:
        linear-gradient(
            180deg,
            #1a2532,
            #141d28
        );

    border: 1px solid #2b3949;
    border-radius: var(--radius);

    box-shadow:
        0 6px 18px rgba(0,0,0,.16);
}

.info-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #263546,
            #1b2634
        );

    border: 1px solid #34465b;
    border-radius: 6px;
}

.info-icon img {
    max-width: 52px;
    max-height: 52px;

    object-fit: contain;
}

.info-copy {
    min-width: 0;
}

.info-copy h2 {
    margin: 2px 0 8px;

    color: #90b9ee;

    font-size: 15px;
}

.info-copy h2::after {
    content: "";

    width: 90px;
    height: 1px;

    display: inline-block;

    margin-left: 8px;
    vertical-align: middle;

    background:
        linear-gradient(
            90deg,
            #36495f,
            transparent
        );
}

.info-copy p {
    margin: 0 0 13px;

    color: var(--text-soft);

    font-size: 11px;
}


/* ============================================================
   ARCHIVE
   ============================================================ */

.archive-body {
    min-height: 100px;
    padding: 18px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;

    background:
        linear-gradient(
            180deg,
            #182330,
            #131c27
        );
}

.archive-counter {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.archive-counter strong {
    color: #8db8ef;

    font-size: 30px;
}

.archive-counter span {
    color: var(--text-faint);

    font-size: 11px;
}

.archive-description {
    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.55;
}

.archive-link {
    padding: 8px 13px;

    color: #d8e6f8;

    background:
        linear-gradient(
            180deg,
            #31435a,
            #243246
        );

    border: 1px solid #455d78;
    border-radius: 4px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.archive-link:hover {
    background:
        linear-gradient(
            180deg,
            #3b506a,
            #2a3b50
        );
}


/* ============================================================
   FOOTER
   ============================================================ */

.status-bar {
    min-height: 32px;
    padding: 0 13px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;

    color: #6f7d8d;

    background:
        linear-gradient(
            180deg,
            #101721,
            #0b1119
        );

    border-top: 1px solid #283748;

    font-size: 9px;
}

.status-center {
    text-align: center;

    color: #829fc5;

    font-weight: 700;

    letter-spacing: .04em;
}

.status-bar > :last-child {
    text-align: right;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .site-shell {
        width: calc(100% - 12px);
        margin-top: 6px;
    }

    .site-header {
        padding: 12px;
        flex-wrap: wrap;
    }

    .brand-logo {
        max-width: 220px;
    }

    .brand-title {
        font-size: 15px;
    }

    .top-nav {
        order: 3;

        width: 100%;
        margin-left: 0;
    }

    .header-indicator {
        margin-left: auto;
    }

    .content {
        padding: 12px;
    }

    .canvas-toolbar {
        flex-wrap: wrap;
    }

    .toolbar-spacer {
        display: none;
    }

    .canvas-area {
        min-height: 390px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .archive-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .status-bar {
        grid-template-columns: 1fr;

        padding: 8px 10px;
    }

    .status-center,
    .status-bar > :last-child {
        text-align: left;
    }
}

@media (max-width: 580px) {
    .brand-title {
        display: none;
    }

    .section-header {
        min-height: 42px;
    }

    .section-header strong {
        font-size: 14px;
    }

    .section-meta {
        display: none;
    }

    .chat-message {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* ============================================================
   BRAND .RU
   ============================================================ */

.brand-ru {
    width: 48px;
    height: 44px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    position: relative;

    margin-left: -13px;

    border-radius: 5px;

    text-decoration: none;

    transition:
        transform .12s ease,
        background .12s ease,
        filter .12s ease;
}

.brand-ru img {
    display: block;

    max-width: 46px;
    max-height: 40px;

    object-fit: contain;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.28));
}

.brand-ru:hover {
    transform: translateY(-1px) scale(1.045);

    background: rgba(255,255,255,.07);

    filter: brightness(1.12);
}

.brand-ru:active {
    transform: translateY(1px) scale(.99);
}


/* ============================================================
   THEME TOGGLE
   ============================================================ */

.theme-toggle {
    height: 35px;
    min-width: 78px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: #d6dfeb;

    background:
        linear-gradient(
            180deg,
            rgba(19,28,40,.72),
            rgba(8,13,20,.78)
        );

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.05);

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .05em;

    cursor: pointer;
}

.theme-toggle:hover {
    color: white;

    background:
        linear-gradient(
            180deg,
            rgba(37,52,70,.82),
            rgba(18,27,39,.88)
        );

    border-color: rgba(255,255,255,.25);
}

.theme-toggle-icon {
    font-size: 15px;
    line-height: 1;
}


/* ============================================================
   SIDE INTERACTIVE FIELDS
   ============================================================ */

.side-fx {
    position: fixed;

    top: 0;
    bottom: 0;

    width: max(
        0px,
        calc((100vw - 1180px) / 2 - 12px)
    );

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    opacity: .9;
}

.side-fx--left {
    left: 0;
}

.side-fx--right {
    right: 0;
}

.side-fx canvas {
    width: 100%;
    height: 100%;

    display: block;
}

.site-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    color: #303742;

    background:
        linear-gradient(
            rgba(57,76,102,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57,76,102,.04) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% -10%,
            rgba(87,122,174,.12),
            transparent 700px
        ),
        #e8edf2;

    background-size:
        38px 38px,
        38px 38px,
        auto,
        auto;
}

html[data-theme="light"] .site-shell {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #e9edf2
        );

    border-color: #bcc7d4;

    box-shadow:
        0 2px 8px rgba(35,50,70,.16),
        0 20px 55px rgba(35,50,70,.12);
}

html[data-theme="light"] .retro-section {
    background: #f3f5f8;
    border-color: #bcc7d4;
}

html[data-theme="light"] .canvas-toolbar,
html[data-theme="light"] .chat-auth-strip,
html[data-theme="light"] .chat-composer {
    background:
        linear-gradient(
            180deg,
            #edf1f5,
            #dfe5ec
        );

    border-color: #c5ced8;
}

html[data-theme="light"] .chat-stream {
    background: #f7f9fb;
}

html[data-theme="light"] .chat-message {
    color: #303742;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #edf1f5
        );

    border-color: #d1d8e0;
}

html[data-theme="light"] .chat-text {
    color: #303742;
}

html[data-theme="light"] .auth-state,
html[data-theme="light"] .chat-composer input {
    color: #303742;
    background: #fff;
    border-color: #bdc7d2;
}

html[data-theme="light"] .info-card,
html[data-theme="light"] .archive-body {
    background:
        linear-gradient(
            180deg,
            #f7f9fb,
            #e9edf2
        );

    border-color: #c6d0db;
}

html[data-theme="light"] .info-copy p,
html[data-theme="light"] .archive-description {
    color: #606c79;
}

html[data-theme="light"] .status-bar {
    color: #677483;

    background:
        linear-gradient(
            180deg,
            #edf1f5,
            #dfe5eb
        );

    border-color: #c4cdd8;
}

html[data-theme="light"] .theme-toggle {
    color: #314157;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dbe3eb
        );

    border-color: rgba(0,0,0,.18);
}

@media (max-width: 1260px) {
    .side-fx {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-ru {
        margin-left: -10px;
        width: 42px;
    }

    .theme-toggle {
        margin-left: auto;
    }
}


/* ============================================================
   V2.1 VISUAL / BRAND UPGRADE
   ============================================================ */

.brand-logo {
    width: auto !important;
    height: 54px !important;
    max-width: none !important;
}

.brand-ru {
    width: auto !important;
    min-width: 58px;
    height: 54px !important;

    margin-left: -10px !important;

    display: flex !important;
    align-items: center;
}

.brand-ru img {
    width: auto !important;
    height: 54px !important;
    max-width: none !important;
    max-height: none !important;
}


/* Logo breathing */

.brand-logo,
.brand-ru img {
    animation:
        logo-breathe 7s ease-in-out infinite;
}

@keyframes logo-breathe {
    0%, 100% {
        filter:
            drop-shadow(0 2px 2px rgba(0,0,0,.35))
            brightness(1);
    }

    50% {
        filter:
            drop-shadow(0 2px 5px rgba(125,171,233,.25))
            brightness(1.06);
    }
}


/* Slow scan through header */

.site-header {
    overflow: hidden;
}

.site-header::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 140px;

    left: -180px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.06),
            rgba(255,255,255,.12),
            transparent
        );

    transform: skewX(-18deg);

    animation:
        header-scan 11s linear infinite;
}

@keyframes header-scan {
    0%, 65% {
        left: -180px;
    }

    100% {
        left: calc(100% + 180px);
    }
}


/* ============================================================
   REAL CANVAS
   ============================================================ */

.canvas-area {
    min-height: 0 !important;

    padding: 13px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(81,112,157,.10),
            transparent 520px
        ),
        #101720 !important;
}

#draw-canvas {
    display: block;

    width: 100%;
    max-width: 1000px;
    height: auto;

    margin: 0 auto;

    aspect-ratio: 4 / 3;

    background: #ffffff;

    border: 1px solid #34475e;
    border-radius: 3px;

    box-shadow:
        0 3px 18px rgba(0,0,0,.40),
        inset 0 0 25px rgba(44,62,82,.04);

    cursor: crosshair;

    touch-action: none;
}

.tool-btn.active {
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #587bb4,
            #385d97
        ) !important;

    border-color: #7698ca !important;

    box-shadow:
        0 0 0 1px rgba(114,154,211,.20),
        0 0 9px rgba(77,124,190,.22);
}

#draw-color {
    width: 30px;
    height: 25px;

    padding: 1px;

    border: 1px solid #4b5c71;
    border-radius: 3px;

    background: #18222e;

    cursor: pointer;
}

#draw-size {
    width: 92px;
    accent-color: #6187c1;
}

.shape-fill-toggle {
    min-width: 67px !important;
}

.shape-fill-toggle[aria-pressed="true"] {
    color: #fff;

    background:
        linear-gradient(
            180deg,
            #5277ad,
            #365a91
        );
}

.canvas-sync-state {
    color: #7890ad;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .07em;

    transition:
        color .15s ease,
        text-shadow .15s ease;
}

.canvas-sync-state.sync-online {
    color: #67cf94;

    text-shadow:
        0 0 6px rgba(103,207,148,.35);
}

.canvas-sync-state.sync-error {
    color: #e3636d;
}

.canvas-coordinates {
    position: absolute;

    right: 21px;
    bottom: 18px;

    padding: 4px 7px;

    color: #788a9d;

    background: rgba(9,14,21,.74);

    border: 1px solid rgba(96,121,150,.32);
    border-radius: 3px;

    font-size: 9px;

    pointer-events: none;

    backdrop-filter: blur(3px);
}


/* ============================================================
   LAB MODULES
   ============================================================ */

.lab-module-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    gap: 16px;

    margin-bottom: 18px;
}

.lab-module {
    overflow: hidden;

    position: relative;

    background:
        linear-gradient(
            180deg,
            #182330,
            #111923
        );

    border: 1px solid #2c3b4d;
    border-radius: 8px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.18);

    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.lab-module:hover {
    transform: translateY(-1px);

    border-color: #405774;

    box-shadow:
        0 8px 25px rgba(0,0,0,.24);
}

.lab-module-header {
    min-height: 43px;

    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(62,91,130,.34),
            rgba(32,47,66,.25)
        );

    border-bottom: 1px solid #2c3d51;
}

.lab-module-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lab-module-header strong {
    color: #a8c8f2;

    font-size: 12px;
}

.lab-module-header span {
    color: #687d98;

    font-size: 9px;
}

.lab-module-header > span {
    color: #73c99a;

    font-weight: 700;
}

.lab-module-header button {
    height: 27px;

    padding: 0 10px;

    color: #dce8f7;

    background:
        linear-gradient(
            180deg,
            #3c526e,
            #29394e
        );

    border: 1px solid #506986;
    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;
}

.pulse-layout {
    display: grid;
    grid-template-columns: 1fr 112px;

    min-height: 170px;
}

#latency-scope {
    display: block;

    width: 100%;
    height: 170px;

    background:
        radial-gradient(
            circle at center,
            rgba(63,109,161,.08),
            transparent 70%
        );
}

.pulse-metrics {
    padding: 13px 11px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;

    border-left: 1px solid #29384a;

    background: rgba(6,10,15,.18);
}

.pulse-metrics div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pulse-metrics span {
    color: #65758a;
    font-size: 8px;
}

.pulse-metrics strong {
    color: #9fc3f1;
    font-size: 12px;
}

.resonator-stage {
    position: relative;

    min-height: 170px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(63,104,160,.16),
            transparent 63%
        );
}

#resonator-canvas {
    display: block;

    width: 100%;
    height: 170px;

    cursor: crosshair;
}

.resonator-readout {
    position: absolute;

    left: 10px;
    bottom: 8px;

    display: flex;
    gap: 6px;

    color: #66788e;

    font-size: 8px;

    pointer-events: none;
}

.resonator-readout strong {
    color: #9bc1f2;
}


/* subtle breathing panels */

.retro-section:hover .section-header {
    box-shadow:
        inset 0 1px rgba(255,255,255,.09),
        0 0 14px rgba(63,102,160,.08);
}


/* ============================================================
   LIGHT THEME MODULE FIXES
   ============================================================ */

html[data-theme="light"] .lab-module {
    background:
        linear-gradient(
            180deg,
            #f6f8fb,
            #e5ebf2
        );

    border-color: #bdc9d7;
}

html[data-theme="light"] .lab-module-header {
    background:
        linear-gradient(
            180deg,
            #e8eef6,
            #d9e3ef
        );

    border-color: #bdc9d6;
}

html[data-theme="light"] .lab-module-header strong,
html[data-theme="light"] .pulse-metrics strong {
    color: #365d91;
}

html[data-theme="light"] .pulse-metrics {
    border-color: #c7d1dd;
}

html[data-theme="light"] .resonator-stage,
html[data-theme="light"] #latency-scope {
    background-color: #edf2f7;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .brand-logo,
    .brand-ru img,
    .site-header::before {
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .lab-module-grid {
        grid-template-columns: 1fr;
    }

    .brand-logo,
    .brand-ru img {
        height: 44px !important;
    }

    .brand-ru {
        height: 44px !important;
        min-width: 47px;
    }
}


/* ============================================================
   .RU // DIVINE HOVER
   ============================================================ */

.brand-ru {
    position: relative;

    min-width: 74px !important;

    overflow: visible !important;

    isolation: isolate;
}

.brand-ru img {
    position: relative;
    z-index: 4;

    /*
     * logo2.png contains substantially more
     * transparent padding than the YANEPOS art.
     */
    transform:
        scale(1.48);

    transform-origin:
        center center;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.brand-ru::before {
    content: "";

    width: 190px;
    height: 190px;

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 1;

    pointer-events: none;

    opacity: 0;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,236,166,.00)
                0deg 4deg,
            rgba(255,236,166,.48)
                5deg 7deg,
            rgba(255,255,230,.08)
                8deg 11deg,
            transparent
                12deg 22deg
        );

    mask-image:
        radial-gradient(
            circle,
            black 0 20%,
            rgba(0,0,0,.85) 34%,
            transparent 71%
        );

    transform:
        translate(-50%, -50%)
        scale(.35);

    transition:
        opacity .25s ease,
        transform .35s ease;
}

.brand-ru::after {
    content: "";

    width: 95px;
    height: 70px;

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 2;

    pointer-events: none;

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,250,210,.83) 0,
            rgba(255,223,130,.34) 30%,
            rgba(255,209,89,.08) 52%,
            transparent 72%
        );

    filter: blur(5px);

    transform:
        translate(-50%, -50%)
        scale(.65);

    transition:
        opacity .18s ease,
        transform .28s ease;
}

.brand-ru:hover::before {
    opacity: .82;

    transform:
        translate(-50%, -50%)
        scale(1);

    animation:
        ru-divine-rays
        8s linear infinite;
}

.brand-ru:hover::after {
    opacity: .95;

    transform:
        translate(-50%, -50%)
        scale(1.28);

    animation:
        ru-holy-pulse
        1.8s ease-in-out infinite;
}

.brand-ru:hover img {
    transform:
        scale(1.58);

    filter:
        brightness(1.25)
        saturate(1.18)
        drop-shadow(
            0 0 6px
            rgba(255,231,155,.85)
        )
        drop-shadow(
            0 0 16px
            rgba(255,210,90,.38)
        );
}

@keyframes ru-divine-rays {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes ru-holy-pulse {
    0%, 100% {
        filter: blur(5px);
        opacity: .70;
    }

    50% {
        filter: blur(8px);
        opacity: 1;
    }
}


/* ============================================================
   .RU FINAL TUNING
   ============================================================ */

.brand-ru {
    width: 58px !important;
    min-width: 58px !important;
    height: 54px !important;

    margin-left: -8px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    overflow: visible !important;

    background: none !important;
}

/*
 * Kill previous conic "divine ray" implementation.
 * Glow must follow PNG alpha, not its rectangle.
 */
.brand-ru::before,
.brand-ru::after {
    display: none !important;
    content: none !important;
}

.brand-ru img {
    width: auto !important;
    height: 46px !important;

    max-width: none !important;
    max-height: none !important;

    animation: none !important;

    transform: scale(1.08) !important;
    transform-origin: center !important;

    filter:
        drop-shadow(0 1px 1px rgba(0,0,0,.35)) !important;

    transition:
        transform .22s ease,
        filter .28s ease !important;
}

.brand-ru:hover {
    background: none !important;
    filter: none !important;
    transform: none !important;
}

.brand-ru:hover img {
    transform:
        scale(1.13)
        translateY(-1px) !important;

    filter:
        brightness(1.10)
        saturate(1.08)
        drop-shadow(
            0 0 2px
            rgba(255,248,210,.95)
        )
        drop-shadow(
            0 0 5px
            rgba(255,228,145,.66)
        )
        drop-shadow(
            0 0 11px
            rgba(255,203,84,.32)
        )
        drop-shadow(
            0 0 20px
            rgba(255,190,60,.13)
        ) !important;

    animation:
        ru-letter-halo
        1.8s ease-in-out infinite !important;
}

@keyframes ru-letter-halo {
    0%,
    100% {
        filter:
            brightness(1.08)
            saturate(1.06)
            drop-shadow(0 0 2px rgba(255,248,210,.85))
            drop-shadow(0 0 5px rgba(255,228,145,.54))
            drop-shadow(0 0 10px rgba(255,203,84,.25))
            drop-shadow(0 0 18px rgba(255,190,60,.10));
    }

    50% {
        filter:
            brightness(1.14)
            saturate(1.10)
            drop-shadow(0 0 2px rgba(255,253,230,1))
            drop-shadow(0 0 7px rgba(255,231,155,.76))
            drop-shadow(0 0 14px rgba(255,205,86,.36))
            drop-shadow(0 0 23px rgba(255,190,60,.15));
    }
}


/* ============================================================
   LIVE ARCHIVE
   ============================================================ */

[hidden] {
    display: none !important;
}

.archive-link {
    cursor: pointer;
}

.gallery-panel {
    padding: 12px;

    background:
        linear-gradient(
            180deg,
            #111923,
            #0d141d
        );

    border-top: 1px solid #29394b;
}

.gallery-toolbar {
    min-height: 38px;

    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: #71839a;

    font-size: 9px;
}

.gallery-toolbar > div {
    display: flex;
    gap: 5px;
}

.gallery-toolbar button {
    height: 28px;

    padding: 0 9px;

    color: #cdd8e6;

    background:
        linear-gradient(
            180deg,
            #304158,
            #202d3e
        );

    border: 1px solid #405671;
    border-radius: 4px;

    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 9px;

    cursor: pointer;
}

.gallery-toolbar button:disabled {
    opacity: .35;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 8px;

    min-height: 120px;
}

.gallery-card {
    padding: 0;

    overflow: hidden;

    position: relative;

    aspect-ratio: 4 / 3;

    background: #0a0f16;

    border: 1px solid #2e4054;
    border-radius: 4px;

    cursor: zoom-in;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.gallery-card:hover {
    z-index: 2;

    transform:
        translateY(-2px)
        scale(1.015);

    border-color: #6586ae;

    box-shadow:
        0 5px 16px rgba(0,0,0,.35),
        0 0 12px rgba(82,129,189,.15);
}

.gallery-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: white;
}

.gallery-card-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 14px 6px 5px;

    color: #e2e8ef;

    background:
        linear-gradient(
            transparent,
            rgba(4,7,11,.88)
        );

    font-size: 8px;

    text-align: left;
}

.gallery-loading {
    opacity: .55;
}

.gallery-error {
    grid-column: 1 / -1;

    padding: 28px;

    color: #db7179;

    text-align: center;
}

.gallery-lightbox {
    width:
        min(
            1050px,
            calc(100vw - 40px)
        );

    max-height:
        calc(100vh - 40px);

    padding: 11px;

    overflow: visible;

    background: #0b1119;

    border: 1px solid #40526a;
    border-radius: 7px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.72);
}

.gallery-lightbox::backdrop {
    background:
        rgba(3,6,10,.82);

    backdrop-filter: blur(4px);
}

.gallery-lightbox img {
    width: 100%;
    max-height:
        calc(100vh - 110px);

    display: block;

    object-fit: contain;

    background: white;

    border-radius: 3px;
}

.lightbox-close {
    width: 31px;
    height: 31px;

    position: absolute;

    right: -11px;
    top: -11px;

    z-index: 4;

    color: white;

    background: #27384d;

    border: 1px solid #60738c;
    border-radius: 50%;

    font-size: 19px;

    cursor: pointer;
}

.lightbox-caption {
    padding: 9px 3px 1px;

    color: #8595a8;

    font-size: 10px;
}

html[data-theme="light"] .gallery-panel {
    background:
        linear-gradient(
            #edf2f7,
            #dfe7ef
        );
}

html[data-theme="light"] .gallery-card {
    border-color: #aebccc;
}

@media (max-width: 980px) {
    .gallery-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }
}

@media (max-width: 620px) {
    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gallery-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ============================================================
   FUN BUTTONS
   ============================================================ */

.runaway-zone {
    min-height: 56px;

    position: relative;

    display: flex;
    align-items: center;
    gap: 7px;

    overflow: visible;
}

.runaway-btn {
    position: relative;

    z-index: 2;

    transition:
        transform .16s cubic-bezier(.2,.9,.3,1.25),
        background .15s ease,
        color .15s ease;
}

.runaway-caught {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #d6535e,
            #96323b
        ) !important;

    border-color: #e16b74 !important;
}

.module-pulse {
    animation:
        module-pulse
        .58s ease-out;
}

@keyframes module-pulse {
    0% {
        box-shadow:
            0 0 0 rgba(102,163,235,0);
    }

    35% {
        box-shadow:
            0 0 0 2px rgba(102,163,235,.34),
            0 0 32px rgba(102,163,235,.24);
    }

    100% {
        box-shadow:
            0 0 0 rgba(102,163,235,0);
    }
}

.fun-signal {
    position: fixed;

    z-index: 9999;

    pointer-events: none;

    color: #9fc8ff;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing: .08em;

    text-shadow:
        0 0 8px rgba(107,171,255,.75);

    transform:
        translate(-50%, 0);

    animation:
        fun-signal-rise
        .9s ease-out forwards;
}

@keyframes fun-signal-rise {
    from {
        opacity: 0;
        transform:
            translate(-50%, 4px)
            scale(.92);
    }

    20% {
        opacity: 1;
    }

    to {
        opacity: 0;

        transform:
            translate(-50%, -36px)
            scale(1.05);
    }
}


/* ============================================================
   GALLERY PAGE JUMP
   ============================================================ */

.gallery-page-state {
    display: flex;
    align-items: center;
    gap: 13px;
}

.gallery-page-jump {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gallery-page-jump label {
    color: #71839a;

    font-size: 8px;
}

.gallery-page-jump input {
    width: 65px;
    height: 27px;

    padding: 0 6px;

    color: #dbe4ef;

    background: #0d141d;

    border: 1px solid #34485f;
    border-radius: 4px;

    outline: none;

    font:
        10px Tahoma,
        Verdana,
        sans-serif;

    text-align: center;
}

.gallery-page-jump input:focus {
    border-color: #668bc0;

    box-shadow:
        0 0 0 2px
        rgba(91,133,191,.18);
}

.gallery-page-jump button {
    min-width: 34px;
}


/* ============================================================
   LIGHT THEME — FINAL CORRECTION LAYER
   ============================================================ */

html[data-theme="light"] body {
    color: #323943 !important;

    background:
        linear-gradient(
            rgba(63,82,108,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(63,82,108,.035) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% -10%,
            rgba(76,111,165,.11),
            transparent 720px
        ),
        #e9edf1 !important;

    background-size:
        38px 38px,
        38px 38px,
        auto,
        auto !important;
}

html[data-theme="light"] .site-shell {
    background:
        #f5f7f9 !important;

    border-color:
        #bfc8d3 !important;
}


/* notice was almost unreadable */

html[data-theme="light"] .notice {
    color: #75591f !important;

    background:
        linear-gradient(
            180deg,
            #fff7df,
            #f5ecd4
        ) !important;

    border-color:
        #dac999 !important;
}

html[data-theme="light"] .notice strong {
    color: #9b711b !important;
}


/* toolbar */

html[data-theme="light"] .canvas-toolbar,
html[data-theme="light"] .chat-auth-strip,
html[data-theme="light"] .chat-composer {
    background:
        linear-gradient(
            180deg,
            #edf1f5,
            #dce3ea
        ) !important;

    border-color:
        #bdc7d2 !important;
}

html[data-theme="light"] .tool-btn,
html[data-theme="light"] .canvas-toolbar button:not(.danger-btn),
html[data-theme="light"] .chat-auth-strip button,
html[data-theme="light"] .chat-composer button,
html[data-theme="light"] .button-row button {
    color: #354153 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dce3eb
        ) !important;

    border-color:
        #aeb9c6 !important;

    box-shadow:
        inset 0 1px white,
        0 1px 2px rgba(39,54,72,.12) !important;
}

html[data-theme="light"] .tool-btn.active {
    color: white !important;

    background:
        linear-gradient(
            180deg,
            #6185bd,
            #4269a2
        ) !important;

    border-color:
        #3a6098 !important;
}

html[data-theme="light"] .toolbar-label {
    color: #65707e !important;
}

html[data-theme="light"] .tool-separator {
    background: #b8c2ce !important;
}

html[data-theme="light"] #draw-color {
    background: white !important;
    border-color: #8996a5 !important;
}


/* remove black frame around white drawing surface */

html[data-theme="light"] .canvas-area {
    background:
        radial-gradient(
            circle,
            rgba(69,91,118,.08) 1px,
            transparent 1px
        ),
        #dfe5eb !important;

    background-size:
        18px 18px !important;
}

html[data-theme="light"] #draw-canvas {
    border-color:
        #aab5c1 !important;

    box-shadow:
        0 3px 14px
        rgba(46,61,78,.18) !important;
}

html[data-theme="light"] .canvas-coordinates {
    color: #596778 !important;

    background:
        rgba(244,247,250,.88) !important;

    border-color:
        rgba(93,111,132,.30) !important;
}

html[data-theme="light"] .canvas-sync-state {
    color: #66816d !important;
}


/* chat */

html[data-theme="light"] .auth-state {
    color: #596675 !important;

    background: #fff !important;

    border-color: #b8c3ce !important;
}

html[data-theme="light"] .auth-state strong {
    color: #426a9f !important;
}

html[data-theme="light"] .chat-stream {
    background: #f4f6f8 !important;

    scrollbar-color:
        #a7b3c0
        #edf1f5 !important;
}

html[data-theme="light"] .chat-message {
    color: #303842 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #edf1f5
        ) !important;

    border-color:
        #cbd3dc !important;
}

html[data-theme="light"] .chat-message:hover {
    background:
        #e6edf5 !important;

    border-color:
        #aebdce !important;
}

html[data-theme="light"] .chat-author {
    color: #456fa4 !important;
}

html[data-theme="light"] .chat-text {
    color: #303842 !important;
}

html[data-theme="light"] .chat-composer input {
    color: #303842 !important;

    background: white !important;

    border-color:
        #aeb9c5 !important;
}

html[data-theme="light"] .chat-composer input::placeholder {
    color: #89939f !important;
}


/* old cards */

html[data-theme="light"] .info-card {
    background:
        linear-gradient(
            180deg,
            #f8fafb,
            #e7ecf1
        ) !important;

    border-color:
        #bbc6d1 !important;
}

html[data-theme="light"] .info-icon {
    background: white !important;

    border-color:
        #bec8d2 !important;
}

html[data-theme="light"] .info-copy h2 {
    color: #426a9f !important;
}

html[data-theme="light"] .info-copy p {
    color: #5e6874 !important;
}


/* lab modules */

html[data-theme="light"] .lab-module {
    color: #36404c !important;

    background:
        linear-gradient(
            180deg,
            #f5f8fb,
            #e4eaf0
        ) !important;

    border-color:
        #b9c5d1 !important;
}

html[data-theme="light"] .lab-module-header {
    background:
        linear-gradient(
            180deg,
            #e9eff6,
            #d8e2ec
        ) !important;

    border-color:
        #bac6d2 !important;
}

html[data-theme="light"] .pulse-metrics {
    background:
        rgba(224,231,239,.7) !important;

    border-color:
        #bcc8d4 !important;
}

html[data-theme="light"] #latency-scope,
html[data-theme="light"] .resonator-stage {
    background:
        #edf2f6 !important;
}


/* archive */

html[data-theme="light"] .archive-body {
    background:
        linear-gradient(
            180deg,
            #f4f7fa,
            #e3e9ef
        ) !important;
}

html[data-theme="light"] .archive-description,
html[data-theme="light"] .archive-counter span {
    color: #5e6976 !important;
}

html[data-theme="light"] .archive-counter strong {
    color: #41699e !important;
}

html[data-theme="light"] .archive-link {
    color: #354c69 !important;

    background:
        linear-gradient(
            #fff,
            #dce4ec
        ) !important;

    border-color:
        #a9b7c6 !important;
}

html[data-theme="light"] .gallery-panel {
    background:
        #e7edf3 !important;

    border-color:
        #bdc8d4 !important;
}

html[data-theme="light"] .gallery-toolbar {
    color: #586776 !important;
}

html[data-theme="light"] .gallery-toolbar button {
    color: #374557 !important;

    background:
        linear-gradient(
            #fff,
            #dbe4ec
        ) !important;

    border-color:
        #aab7c5 !important;
}

html[data-theme="light"] .gallery-page-jump label {
    color: #5e6b79 !important;
}

html[data-theme="light"] .gallery-page-jump input {
    color: #303b47 !important;

    background: white !important;

    border-color:
        #aab7c4 !important;
}

html[data-theme="light"] .gallery-card {
    background: white !important;

    border-color:
        #aebbc8 !important;

    box-shadow:
        0 2px 5px
        rgba(44,59,75,.10);
}

html[data-theme="light"] .gallery-lightbox {
    background:
        #e9eef3 !important;

    border-color:
        #a7b4c2 !important;
}


/* footer */

html[data-theme="light"] .status-bar {
    color: #64717f !important;

    background:
        linear-gradient(
            #edf1f5,
            #dce3e9
        ) !important;

    border-color:
        #bfc9d3 !important;
}

html[data-theme="light"] .status-center {
    color: #496b98 !important;
}

@media (max-width: 700px) {
    .gallery-page-state {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}


/* ============================================================
   MULTIPLAYER CURSOR OVERLAY
   ============================================================ */

.canvas-stack {
    width: 100%;
    max-width: 1000px;

    position: relative;

    margin: 0 auto;

    aspect-ratio: 2 / 1;
}

.canvas-stack > #draw-canvas,
.canvas-stack > #presence-canvas {
    width: 100% !important;
    height: 100% !important;

    position: absolute;
    inset: 0;

    display: block;
}

.canvas-stack > #draw-canvas {
    max-width: none !important;
    margin: 0 !important;
}

#presence-canvas {
    z-index: 20;

    background: transparent;

    pointer-events: none;
}

.canvas-stack.presence-live > #draw-canvas {
    cursor: none !important;
}

.presence-help {
    position: absolute;

    left: 21px;
    bottom: 18px;

    z-index: 30;

    display: flex;
    gap: 12px;

    padding: 4px 7px;

    color: #7b8da4;

    background:
        rgba(7,12,18,.74);

    border:
        1px solid
        rgba(100,130,165,.28);

    border-radius: 3px;

    font:
        9px/1.2
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    pointer-events: none;

    backdrop-filter:
        blur(3px);
}

#presence-state {
    color: #6ed09a;
}

html[data-theme="light"]
.presence-help {
    color: #607084;

    background:
        rgba(247,249,251,.88);

    border-color:
        rgba(89,108,130,.30);
}

html[data-theme="light"]
#presence-state {
    color: #397d59;
}


/* ============================================================
   MOBILE / TOUCH
   ============================================================ */

.mobile-push {
    display: none;
}

/*
 * A finger drawing on the canvas must draw,
 * not drag the entire browser page.
 */
#draw-canvas {
    touch-action: none;
}

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

    body {
        margin: 0;
        padding:
            env(safe-area-inset-top)
            0
            env(safe-area-inset-bottom);
    }

    .site-shell {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        border-left: 0 !important;
        border-right: 0 !important;

        border-radius: 0 !important;
    }

    /*
     * Header / branding.
     */
    .site-header,
    .topbar,
    .brand-row {
        min-width: 0;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .brand-row {
        flex-wrap: wrap;
    }

    .brand-ru {
        width: 50px !important;
        min-width: 50px !important;
        height: 46px !important;
    }

    .brand-ru img {
        max-width: 100%;
        height: 40px !important;
    }

    /*
     * Section captions.
     */
    .section-title,
    .section-header {
        min-height: 34px;

        padding:
            7px
            10px !important;

        font-size:
            12px !important;

        line-height:
            1.25 !important;
    }

    /*
     * Canvas toolbar becomes multiple rows.
     */
    .canvas-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center;

        gap: 5px !important;

        padding:
            7px
            6px !important;
    }

    .canvas-toolbar button,
    .canvas-toolbar select,
    .canvas-toolbar input {
        min-height: 36px;
    }

    .canvas-toolbar button {
        min-width: 36px;
    }

    .canvas-toolbar label {
        white-space: nowrap;
    }

    /*
     * Canvas must always fit viewport.
     */
    .canvas-area {
        width: 100%;

        padding:
            6px !important;

        overflow: hidden;
    }

    .canvas-stack {
        width: 100% !important;
        max-width: 100% !important;

        aspect-ratio: 2 / 1;

        margin: 0 auto !important;
    }

    /*
     * Keep the physical canvas at 960×480 logical pixels,
     * only scale its display.
     */
    .canvas-stack > #draw-canvas,
    .canvas-stack > #presence-canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /*
     * Realtime status gets compact.
     */
    .presence-help {
        left: 8px !important;
        bottom: 8px !important;

        gap: 6px !important;

        padding:
            3px
            5px !important;

        font-size:
            8px !important;
    }

    .desktop-push-hint {
        display: none !important;
    }

    .mobile-push {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 58px;
        height: 38px;

        margin: -7px -3px -7px 2px;

        padding:
            0
            10px;

        border:
            1px solid
            rgba(116,177,247,.55);

        border-radius: 5px;

        color: #cfe5ff;

        background:
            linear-gradient(
                180deg,
                rgba(40,77,116,.94),
                rgba(19,42,67,.96)
            );

        box-shadow:
            0 2px 7px
            rgba(0,0,0,.24);

        font:
            700
            11px
            Tahoma,
            Verdana,
            Arial,
            sans-serif;

        letter-spacing: .5px;

        pointer-events: auto;

        touch-action: none;

        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color:
            transparent;
    }

    .mobile-push:active,
    .mobile-push.is-pushing {
        color: #fff6d5;

        border-color:
            rgba(255,204,94,.85);

        background:
            linear-gradient(
                180deg,
                #b97b20,
                #75450e
            );

        box-shadow:
            0 0 0 2px
            rgba(255,194,65,.16),
            0 0 15px
            rgba(255,174,35,.40);

        transform:
            translateY(1px)
            scale(.97);
    }

    html[data-theme="light"]
    .mobile-push {
        color: #21496f;

        border-color: #8caccd;

        background:
            linear-gradient(
                180deg,
                #f8fbff,
                #dce9f5
            );
    }

    html[data-theme="light"]
    .mobile-push.is-pushing {
        color: #fff;

        border-color: #b56c10;

        background:
            linear-gradient(
                180deg,
                #d8962d,
                #a7610d
            );
    }

    /*
     * Coordinates must not collide with PUSH.
     */
    .canvas-coordinates {
        right: 7px !important;
        bottom: 7px !important;

        font-size:
            8px !important;
    }

    /*
     * Chat.
     */
    .chat-strip,
    .chat-toolbar {
        display: flex;
        flex-wrap: wrap;

        gap: 6px;
    }

    .chat-composer {
        display: flex !important;
        flex-wrap: wrap !important;

        gap: 6px !important;

        padding:
            8px !important;
    }

    .chat-composer input,
    .chat-composer textarea {
        flex:
            1 1 100% !important;

        width: 100% !important;
        min-width: 0 !important;

        font-size: 16px !important;
    }

    /*
     * 16px prevents iOS-style browser zoom
     * on input focus.
     */
    input,
    textarea,
    select {
        font-size:
            max(16px, 1em);
    }

    .chat-composer button {
        min-height: 40px;

        flex:
            1 1 auto;
    }

    .chat-stream {
        max-height:
            min(58vh, 520px);
    }

    /*
     * Cards/modules collapse into a single column.
     */
    .info-grid,
    .module-grid,
    .lab-grid,
    .modules-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .info-card,
    .lab-module {
        min-width: 0;
    }

    /*
     * Gallery.
     */
    .gallery-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;

        gap: 6px !important;
    }

    .gallery-page-state {
        flex:
            1 1 100%;
    }

    .gallery-page-jump {
        display: flex;

        flex:
            1 1 auto;

        min-width: 0;
    }

    #gallery-page-input {
        width:
            72px !important;

        min-height: 38px;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 6px !important;
    }

    /*
     * Make touch targets sane.
     */
    button,
    [role="button"] {
        min-height: 36px;
    }
}


@media (max-width: 420px) {

    .canvas-toolbar {
        gap: 4px !important;
    }

    .gallery-grid {
        grid-template-columns:
            1fr !important;
    }

    .presence-help {
        font-size:
            7px !important;
    }

    .mobile-push {
        min-width: 54px;
        height: 36px;
    }
}


/*
 * Also show mobile PUSH on tablets/touch laptops,
 * even when their viewport is wider than 760px.
 */
@media (pointer: coarse) {

    .desktop-push-hint {
        display: none !important;
    }

    .mobile-push {
        display: inline-flex;
    }
}


/* ============================================================
   YANEPOS EFFECT PASS 01
   Header / theme / core impact / CRT
   ============================================================ */

/* ---------- Header identity ---------- */

.brand {
    gap: 0;
}

.brand-logo {
    transform: translate3d(0,0,0);
    transition:
        transform 110ms ease-out,
        filter 180ms ease;
    will-change: transform;
}

.brand-title {
    margin-left: 18px;
}

.brand-ru {
    width: 60px !important;
    min-width: 60px !important;
    height: 54px !important;

    margin-left: -6px !important;

    position: relative;
    isolation: isolate;

    display: flex !important;
    align-items: center;
    justify-content: center;

    overflow: visible !important;

    background: none !important;
    border: 0 !important;

    transform: none !important;
    filter: none !important;
}

.brand-ru::before {
    content: "" !important;

    display: block !important;

    width: 112px;
    height: 76px;

    position: absolute;
    left: 50%;
    top: 50%;

    z-index: -1;

    transform:
        translate(-50%, -50%)
        scale(.88);

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,232,153,.17) 0%,
            rgba(255,213,100,.08) 34%,
            rgba(255,209,82,0) 72%
        );

    transition:
        opacity 180ms ease,
        transform 240ms ease;
}

.brand-ru::after {
    content: none !important;
    display: none !important;
}

.brand-ru img {
    width: auto !important;
    height: 46px !important;
    max-width: 60px !important;

    object-fit: contain;

    animation: none !important;

    transform:
        translateZ(0)
        scale(1.04) !important;

    transform-origin: center;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0,0,0,.42)
        ) !important;

    transition:
        transform 180ms ease,
        filter 180ms ease !important;

    will-change:
        transform,
        filter;
}

.brand-ru:hover {
    background: none !important;
    filter: none !important;
    transform: none !important;
}

.brand-ru:hover::before {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.brand-ru:hover img {
    transform:
        translateY(-1px)
        scale(1.09) !important;

    filter:
        brightness(1.09)
        saturate(1.07)
        drop-shadow(
            0 0 2px
            rgba(255,255,235,.96)
        )
        drop-shadow(
            0 0 5px
            rgba(255,230,144,.88)
        )
        drop-shadow(
            0 0 10px
            rgba(255,197,72,.55)
        )
        drop-shadow(
            0 0 18px
            rgba(255,183,42,.24)
        ) !important;
}


/* ---------- DARK / AUTO / LIGHT ---------- */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

#theme-toggle.theme-switch {
    padding: 2px !important;

    display: inline-flex;
    align-items: stretch;
    gap: 2px;

    min-width: 0;

    border: 1px solid #526274 !important;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #1b2632,
            #111923
        ) !important;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.05),
        0 1px 2px
        rgba(0,0,0,.26);

    cursor: default;
}

#theme-toggle .theme-choice {
    min-width: 0;

    padding: 5px 7px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    border: 1px solid transparent;
    border-radius: 3px;

    color: #8292a5;
    background: transparent;

    font:
        700 10px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing: .02em;

    cursor: pointer;

    transition:
        color 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

#theme-toggle .theme-choice-icon {
    font-size: 12px;
    line-height: 1;
}

#theme-toggle .theme-choice:hover {
    color: #d8e7f7;

    background:
        rgba(116,158,204,.10);
}

#theme-toggle .theme-choice.is-active {
    color: #eff7ff;

    border-color:
        rgba(132,184,238,.48);

    background:
        linear-gradient(
            180deg,
            #365f8b,
            #23496f
        );

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.13),
        0 0 7px
        rgba(82,152,222,.14);
}

html[data-theme="light"]
#theme-toggle.theme-switch {
    border-color: #aab6c3 !important;

    background:
        linear-gradient(
            180deg,
            #f6f8fa,
            #dfe5eb
        ) !important;

    box-shadow:
        inset 0 1px #fff,
        0 1px 2px
        rgba(31,45,58,.12);
}

html[data-theme="light"]
#theme-toggle .theme-choice {
    color: #596675;
}

html[data-theme="light"]
#theme-toggle .theme-choice:hover {
    color: #21374d;

    background:
        rgba(50,103,154,.08);
}

html[data-theme="light"]
#theme-toggle .theme-choice.is-active {
    color: #fff;

    border-color: #4979a8;

    background:
        linear-gradient(
            180deg,
            #568bc0,
            #336b9f
        );

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.24),
        0 1px 2px
        rgba(26,65,102,.16);
}


/* ---------- Brain target ---------- */

.brain-target {
    cursor: pointer;

    user-select: none;
    -webkit-user-drag: none;

    transform-origin:
        50% 58%;

    will-change:
        transform,
        filter;
}

.brain-target:hover {
    filter:
        saturate(1.08)
        brightness(1.04);
}

.brain-target.brain-hit {
    animation:
        brain-impact
        620ms
        cubic-bezier(.18,.8,.22,1);
}

@keyframes brain-impact {
    0% {
        transform:
            translate(0,0)
            rotate(0)
            scale(1);
    }

    12% {
        transform:
            translate(-8px,2px)
            rotate(-14deg)
            scaleX(1.19)
            scaleY(.77);
    }

    25% {
        transform:
            translate(6px,-3px)
            rotate(10deg)
            scaleX(.86)
            scaleY(1.16);
    }

    42% {
        transform:
            translate(-3px,1px)
            rotate(-5deg)
            scale(1.06);
    }

    63% {
        transform:
            translate(2px,-1px)
            rotate(3deg)
            scale(.98);
    }

    100% {
        transform:
            translate(0,0)
            rotate(0)
            scale(1);
    }
}

.info-card.impact-shake {
    animation:
        core-card-impact
        390ms
        cubic-bezier(.2,.8,.2,1);
}

@keyframes core-card-impact {
    0% {
        transform: translate(0,0);
    }

    18% {
        transform:
            translate(-5px,1px)
            rotate(-.35deg);
    }

    35% {
        transform:
            translate(4px,-1px)
            rotate(.25deg);
    }

    53% {
        transform:
            translate(-2px,0)
            rotate(-.12deg);
    }

    72% {
        transform:
            translate(1px,0);
    }

    100% {
        transform:
            translate(0,0);
    }
}


/* ---------- Flying burning fist ---------- */

.flying-fist {
    width: 58px;
    height: 58px;

    position: fixed;

    z-index: 50000;

    pointer-events: none;

    display: grid;
    place-items: center;

    transform-origin: center;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(0,0,0,.5)
        )
        drop-shadow(
            0 0 8px
            rgba(255,111,0,.48)
        );

    will-change:
        transform,
        opacity;
}

.fist-glyph {
    position: relative;
    z-index: 2;

    display: block;

    font-size: 47px;
    line-height: 1;

    transform:
        rotate(
            calc(
                -1 *
                var(
                    --flight-angle
                )
            )
        );

    animation:
        fist-wobble
        105ms
        ease-in-out
        infinite
        alternate;

    filter:
        drop-shadow(
            0 0 4px
            rgba(255,221,108,.55)
        );
}

.fist-flame {
    width: 76px;
    height: 27px;

    position: absolute;
    z-index: 1;

    right: 33px;
    top: 16px;

    border-radius:
        100% 12% 12% 100%;

    opacity: .94;

    background:
        radial-gradient(
            ellipse at 82% 50%,
            #fff2a7 0 9%,
            #ffc13c 10% 22%,
            #ff6a00 23% 43%,
            rgba(255,37,0,.84) 44% 58%,
            rgba(255,42,0,0) 74%
        );

    box-shadow:
        0 0 8px
        rgba(255,120,0,.56),
        0 0 18px
        rgba(255,55,0,.32);

    transform-origin:
        100% 50%;

    animation:
        fist-flame
        70ms
        ease-in-out
        infinite
        alternate;
}

@keyframes fist-wobble {
    from {
        scale: .97;
    }

    to {
        scale: 1.04;
    }
}

@keyframes fist-flame {
    from {
        transform:
            scaleX(.82)
            scaleY(.88);

        opacity: .73;
    }

    to {
        transform:
            scaleX(1.08)
            scaleY(1.08);

        opacity: 1;
    }
}


/* ---------- Impact ---------- */

.impact-spark {
    width: 5px;
    height: 5px;

    position: fixed;

    z-index: 50010;

    pointer-events: none;

    border-radius: 50%;

    background: #fff2a2;

    box-shadow:
        0 0 4px #ffcb3d,
        0 0 9px #ff6a00;

    transform:
        translate(-50%, -50%);

    animation:
        impact-spark
        520ms
        cubic-bezier(.16,.76,.28,1)
        forwards;
}

@keyframes impact-spark {
    0% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.2);
    }

    100% {
        opacity: 0;

        transform:
            translate(
                calc(
                    -50% +
                    var(--spark-x)
                ),
                calc(
                    -50% +
                    var(--spark-y)
                )
            )
            scale(.15);
    }
}

.impact-label {
    position: fixed;

    z-index: 50020;

    pointer-events: none;

    transform:
        translate(-50%, -50%);

    white-space: nowrap;

    color: #ffe55f;

    font:
        900 13px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing: .04em;

    text-shadow:
        0 1px 1px #000,
        0 0 3px #000,
        0 0 8px
        rgba(255,81,0,.82);

    animation:
        impact-label
        900ms
        cubic-bezier(.16,.8,.24,1)
        forwards;
}

.impact-label--miss {
    color: #b9d6f2;

    text-shadow:
        0 1px 1px #000,
        0 0 6px
        rgba(71,143,214,.65);
}

@keyframes impact-label {
    0% {
        opacity: 0;

        transform:
            translate(-50%, 4px)
            scale(.72);
    }

    13% {
        opacity: 1;

        transform:
            translate(-50%, -9px)
            scale(1.13);
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -42px)
            scale(.94);
    }
}


/* ---------- CRT easter egg ---------- */

html.crt-mode::before,
html.crt-mode::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
}

html.crt-mode::before {
    z-index: 65000;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.12) 0,
            rgba(0,0,0,.12) 1px,
            rgba(255,255,255,.018) 1px,
            rgba(255,255,255,.018) 2px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode: multiply;

    opacity: .52;
}

html.crt-mode::after {
    z-index: 64999;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0) 53%,
            rgba(0,0,0,.08) 74%,
            rgba(0,0,0,.27) 100%
        );

    animation:
        crt-breathe
        6.4s
        ease-in-out
        infinite;
}

html.crt-mode body {
    text-shadow:
        .22px 0
        rgba(255,60,60,.22),
        -.22px 0
        rgba(45,150,255,.20);
}

html.crt-mode .site-shell {
    animation:
        crt-flicker
        8s
        steps(1,end)
        infinite;
}

@keyframes crt-breathe {
    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: .91;
    }
}

@keyframes crt-flicker {
    0%,
    91%,
    93%,
    97%,
    100% {
        filter: none;
    }

    92% {
        filter:
            brightness(1.035)
            contrast(1.018);
    }

    96% {
        filter:
            brightness(.975);
    }
}


/* ---------- Light theme caught button fix ---------- */

html[data-theme="light"]
.button-row
.runaway-caught {
    color: #fff !important;

    border-color:
        #9c3540 !important;

    background:
        linear-gradient(
            180deg,
            #d6535e,
            #96323b
        ) !important;
}


/* ---------- Accessibility ---------- */

@media (
    prefers-reduced-motion:
    reduce
) {
    .brain-target.brain-hit,
    .info-card.impact-shake,
    .fist-glyph,
    .fist-flame,
    html.crt-mode .site-shell,
    html.crt-mode::after {
        animation:
            none !important;
    }
}

@media (max-width: 760px) {
    #theme-toggle .theme-choice {
        padding:
            5px 5px;
    }

    #theme-toggle .theme-choice span:last-child {
        display: none;
    }

    .brand-title {
        margin-left:
            10px;
    }

    .brand-ru {
        width:
            52px !important;

        min-width:
            52px !important;
    }

    .brand-ru img {
        height:
            40px !important;
    }
}


/* ============================================================
   YANEPOS AMBIENT SIGNAL FIELD
   ============================================================ */

#yanepos-ambient {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;

    opacity: 1;
}

.site-shell {
    position: relative;
    z-index: 2;
}

/*
 * Лёгкое затемнение непосредственно около корпуса
 * подчёркивает глубину сети, но не создаёт "неон".
 */
body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 0 44%,
            rgba(5,13,23,.035) 69%,
            rgba(3,10,18,.10) 100%
        );
}

html[data-theme="light"] body::after {
    background:
        radial-gradient(
            ellipse at center,
            transparent 0 45%,
            rgba(63,91,119,.018) 70%,
            rgba(44,69,94,.055) 100%
        );
}

@media (max-width: 760px) {
    /*
     * На узком экране боковых полей физически нет.
     * Не рисуем сеть поверх интерфейса.
     */
    #yanepos-ambient {
        display: none;
    }

    body::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yanepos-ambient {
        opacity: .55;
    }
}


/* ============================================================
   CANVAS LIVE PRESENCE
   ============================================================ */

.canvas-stack {
    position: relative;
}

#draw-canvas {
    position: relative;
    z-index: 1;
}

#presence-canvas {
    position: absolute;
    inset: 0;

    z-index: 4;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background: transparent;
}

.presence-state {
    position: absolute;

    right: 9px;
    top: 9px;

    z-index: 6;

    padding: 4px 7px;

    pointer-events: none;

    border:
        1px solid
        rgba(112,134,157,.62);

    border-radius: 3px;

    color: #9eabb8;

    background:
        rgba(11,20,30,.82);

    box-shadow:
        0 1px 3px
        rgba(0,0,0,.24);

    font:
        700 10px/1.15
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing: .035em;

    backdrop-filter:
        blur(2px);

    transition:
        color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.presence-state--online {
    color: #b7f2ca;

    border-color:
        rgba(93,190,126,.66);

    box-shadow:
        0 0 7px
        rgba(58,188,105,.16);
}

.presence-state--connecting {
    color: #d9d49d;

    border-color:
        rgba(192,179,99,.55);
}

.presence-state--offline {
    color: #e7a3a8;

    border-color:
        rgba(190,83,92,.58);
}

html[data-theme="light"]
.presence-state {
    color: #52606e;

    border-color: #a9b8c6;

    background:
        rgba(248,251,253,.90);

    box-shadow:
        0 1px 3px
        rgba(34,54,73,.12);
}

html[data-theme="light"]
.presence-state--online {
    color: #246b3d;

    border-color: #6faa83;

    background:
        rgba(246,252,248,.93);
}


/* ============================================================
   CHAT V2 — INTERACTIVE
   ============================================================ */

[hidden] {
    display: none !important;
}

.chat-live-users {
    margin-left: auto;

    color: #70c78f;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing: .04em;
}

.chat-auth-panel {
    min-height: 39px;

    padding: 5px 8px;

    display: flex;
    align-items: center;
    gap: 6px;

    background: #141e2a;

    border-bottom:
        1px solid #2b3b4e;
}

.chat-auth-panel input {
    width: 150px;
    min-width: 0;

    height: 27px;

    padding:
        0 8px;

    color: #dce5ef;

    background: #0e1620;

    border:
        1px solid #34475d;

    border-radius: 3px;

    outline: none;

    font:
        11px
        Tahoma,
        Verdana,
        sans-serif;
}

.chat-auth-panel input:focus {
    border-color: #5984ba;

    box-shadow:
        0 0 0 2px
        rgba(75,123,179,.14);
}

.chat-auth-panel button {
    min-height: 27px;
}

.chat-auth-message {
    min-width: 0;
    flex: 1;

    color: #8796a7;

    font:
        10px/1.2
        Tahoma,
        Verdana,
        sans-serif;
}

.chat-auth-message.is-error {
    color: #e78991;
}

.chat-auth-message.is-ok {
    color: #7fd39c;
}


/* Messages */

.chat-message {
    position: relative;

    grid-template-columns:
        minmax(105px, 155px)
        minmax(0, 1fr)
        auto
        20px !important;

    align-items: start;
    column-gap: 7px;
}

.chat-author-wrap {
    min-width: 0;

    display: flex;
    align-items: baseline;
    gap: 5px;
}

.chat-online-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #53606e;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);

    transition:
        background .15s ease,
        box-shadow .15s ease;
}

.chat-online-dot.is-online {
    background: #5fd184;

    box-shadow:
        0 0 5px
        rgba(73,208,118,.58);
}

button.chat-author {
    min-width: 0;

    padding: 0;

    border: 0;

    color: #85b8f4;

    background: transparent;

    font:
        700 11px/1.25
        Tahoma,
        Verdana,
        sans-serif;

    text-align: left;

    overflow-wrap: anywhere;

    cursor: pointer;
}

button.chat-author:hover,
button.chat-author:focus-visible {
    color: #b7d9ff;

    text-decoration: underline;
}

.chat-time {
    padding-top: 1px;

    color: #718092;

    font:
        9px/1.25
        Tahoma,
        Verdana,
        sans-serif;

    white-space: nowrap;

    opacity: 0;

    transform:
        translateX(3px);

    transition:
        opacity .12s ease,
        transform .12s ease;
}

.chat-delete {
    width: 19px;
    min-width: 19px !important;
    height: 19px !important;

    padding: 0 !important;

    color: #d4777f !important;

    border:
        1px solid
        transparent !important;

    background:
        transparent !important;

    font:
        bold 15px/17px
        Tahoma,
        sans-serif;

    opacity: 0;

    cursor: pointer;

    transition:
        opacity .12s ease,
        color .12s ease,
        background .12s ease !important;
}

.chat-message:hover
.chat-time,
.chat-message:focus-within
.chat-time,
.chat-message:hover
.chat-delete,
.chat-message:focus-within
.chat-delete {
    opacity: 1;

    transform:
        translateX(0);
}

.chat-delete:hover {
    color: #fff !important;

    background:
        #9c3943 !important;

    border-color:
        #b94c57 !important;
}


/* Composer */

.chat-composer {
    align-items: flex-end;
}

.chat-composer textarea {
    min-width: 0;
    flex: 1;

    height: 29px;
    min-height: 29px;
    max-height: 96px;

    padding:
        6px 9px;

    resize: none;

    overflow-y: auto;

    color: var(--text);

    background: #101923;

    border:
        1px solid #334559;

    border-radius: 4px;

    outline: none;

    font:
        11px/1.35
        Tahoma,
        Verdana,
        sans-serif;

    box-sizing: border-box;
}

.chat-composer textarea::placeholder {
    color: #687587;
}

.chat-composer textarea:focus {
    border-color: #557db5;

    box-shadow:
        0 0 0 2px
        rgba(75,111,171,.18);
}

.chat-send-mode {
    min-width: 53px !important;

    color: #8fa7c1 !important;

    font-size: 9px !important;
}


/* Light */

html[data-theme="light"]
.chat-auth-panel {
    background:
        linear-gradient(
            180deg,
            #eef2f6,
            #e0e6ed
        );

    border-color: #c2ccd6;
}

html[data-theme="light"]
.chat-auth-panel input,
html[data-theme="light"]
.chat-composer textarea {
    color: #303842;

    background: #fff;

    border-color: #aeb9c5;
}

html[data-theme="light"]
button.chat-author {
    color: #456fa4;
}

html[data-theme="light"]
button.chat-author:hover {
    color: #244d79;
}

html[data-theme="light"]
.chat-time {
    color: #7a8795;
}

html[data-theme="light"]
.chat-online-dot {
    background: #9ba6b0;
}

html[data-theme="light"]
.chat-online-dot.is-online {
    background: #42a866;

    box-shadow:
        0 0 4px
        rgba(47,158,86,.42);
}


/* Mobile */

@media (max-width: 580px) {
    .chat-auth-panel {
        flex-wrap: wrap;
    }

    .chat-auth-panel input {
        width: 100%;
        flex:
            1 1 100%;
    }

    .chat-message {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            20px !important;

        row-gap: 3px;
    }

    .chat-author-wrap {
        grid-column: 1;
    }

    .chat-time {
        grid-column: 2;
    }

    .chat-delete {
        grid-column: 3;
    }

    .chat-text {
        grid-column:
            1 / -1;
    }
}


/* ============================================================
   ARCHAEOLOGICAL WEB BANNER
   ============================================================ */

.yanepos-parasite {
    position: fixed;

    right: 18px;
    bottom: 15px;

    z-index: 9000;

    display: flex;
    align-items: center;
    gap: 7px;

    transform:
        rotate(-1.7deg);

    transition:
        left .38s cubic-bezier(.18,.8,.22,1),
        right .38s cubic-bezier(.18,.8,.22,1),
        top .38s cubic-bezier(.18,.8,.22,1),
        bottom .38s cubic-bezier(.18,.8,.22,1),
        transform .2s ease;

    pointer-events: none;
}

.yanepos-parasite-button {
    width: 88px;
    height: 31px;

    padding: 0;

    flex: 0 0 auto;

    overflow: hidden;

    border:
        1px solid
        rgba(151,177,204,.48);

    background:
        #111;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.45);

    cursor: pointer;

    pointer-events: auto;
}

.yanepos-parasite-button img {
    display: block;

    width: 88px;
    height: 31px;

    image-rendering: auto;
}

.yanepos-parasite-button:hover {
    border-color:
        rgba(255,222,108,.85);

    box-shadow:
        0 0 5px
        rgba(255,211,73,.25),
        0 2px 8px
        rgba(0,0,0,.5);

    transform:
        scale(1.04)
        rotate(.8deg);
}

.yanepos-parasite-note {
    max-width: 0;

    overflow: hidden;

    opacity: 0;

    white-space: nowrap;

    color: #8795a4;

    font:
        9px/1
        Tahoma,
        Verdana,
        sans-serif;

    transition:
        max-width .2s ease,
        opacity .2s ease;
}

.yanepos-parasite:hover
.yanepos-parasite-note {
    max-width: 120px;

    opacity: .78;
}

.yanepos-parasite.is-fleeing {
    transform:
        rotate(
            var(--parasite-rotate, 3deg)
        )
        scale(.94);
}

.yanepos-parasite.is-angry
.yanepos-parasite-button {
    animation:
        parasite-angry
        110ms
        linear
        4;
}

@keyframes parasite-angry {
    0% {
        transform:
            translateX(-2px)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(2px)
            rotate(2deg);
    }

    100% {
        transform:
            translateX(0)
            rotate(0);
    }
}

html[data-theme="light"]
.yanepos-parasite-note {
    color: #566473;
}

@media (max-width: 760px) {
    .yanepos-parasite {
        right: 7px;
        bottom: 7px;
    }

    .yanepos-parasite-note {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yanepos-parasite {
        transition: none;
    }

    .yanepos-parasite.is-angry
    .yanepos-parasite-button {
        animation: none;
    }
}


/* ============================================================
   YANEPOS PARASITE — IDLE DANCE
   Does not interfere with flee / hover / angry transforms.
   ============================================================ */

.yanepos-parasite-button {
    position: relative;

    animation:
        yanepos-idle-dance
        760ms
        ease-in-out
        infinite
        alternate;
}

@keyframes yanepos-idle-dance {
    0% {
        top: -2px;
    }

    100% {
        top: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yanepos-parasite-button {
        animation: none;
        top: 0;
    }
}


/* ============================================================
   YANEPOS PARASITE — SIDE SWAY
   Separate from button movement/angry transforms.
   ============================================================ */

.yanepos-parasite-button img {
    transform-origin: 50% 55%;

    animation:
        yanepos-side-sway
        1350ms
        ease-in-out
        infinite
        alternate;
}

@keyframes yanepos-side-sway {
    0% {
        transform:
            rotate(-3deg);
    }

    100% {
        transform:
            rotate(3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .yanepos-parasite-button img {
        animation: none;
        transform: none;
    }
}


/* ============================================================
   ARCHIVE 2.0 — TIMELINE + LIGHTBOX
   ============================================================ */

.archive-timeline {
    margin:
        0
        8px
        10px;

    padding:
        9px
        10px
        8px;

    background:
        linear-gradient(
            180deg,
            #172230,
            #111923
        );

    border:
        1px solid
        #31445a;

    border-radius:
        4px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.archive-timeline-top {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;
}


.archive-time-button {
    min-width: 74px;
    height: 27px;

    padding:
        0 8px;

    color: #a9bdd4;

    background:
        linear-gradient(
            180deg,
            #29394c,
            #1b2837
        );

    border:
        1px solid
        #40556d;

    border-radius:
        3px;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;

    cursor: pointer;
}


.archive-time-button:hover:not(:disabled) {
    color: #fff;

    border-color:
        #6684aa;

    background:
        linear-gradient(
            180deg,
            #38506a,
            #27394d
        );
}


.archive-time-button:disabled {
    opacity: .33;

    cursor: default;
}


.archive-breadcrumb {
    min-width: 0;

    padding:
        5px
        8px;

    color: #a9cfff;

    background:
        #0c141d;

    border:
        1px solid
        #26384b;

    border-radius:
        3px;

    font:
        700 11px/1.2
        Tahoma,
        Verdana,
        sans-serif;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    letter-spacing:
        .025em;
}


.archive-range {
    display: block;

    width: 100% !important;
    height: 16px;

    margin:
        9px
        0
        5px;

    accent-color:
        #6496d2;

    cursor:
        ew-resize;
}


.archive-timeline-bottom {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    min-height: 17px;
}


.archive-edge-date {
    color: #6f7f91;

    font:
        9px/1
        Tahoma,
        Verdana,
        sans-serif;

    white-space: nowrap;
}


.archive-time-info {
    min-width: 0;

    color: #899bad;

    font:
        9px/1.2
        Tahoma,
        Verdana,
        sans-serif;

    text-align: center;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.archive-date-jump {
    margin-top: 7px;

    padding-top: 7px;

    display: flex;

    align-items: center;

    justify-content:
        flex-end;

    gap: 6px;

    border-top:
        1px solid
        rgba(111,139,170,.16);

    color: #77889a;

    font:
        9px/1
        Tahoma,
        Verdana,
        sans-serif;
}


.archive-date-input {
    height: 26px;

    padding:
        0 6px;

    color: #c8d4df;

    color-scheme: dark;

    background:
        #0e1720;

    border:
        1px solid
        #34485e;

    border-radius:
        3px;

    font:
        10px
        Tahoma,
        Verdana,
        sans-serif;
}


.archive-date-jump button {
    height: 26px;

    padding:
        0 9px;

    color: #bbc9d8;

    background:
        linear-gradient(
            180deg,
            #2a3b4e,
            #1d2b3a
        );

    border:
        1px solid
        #425970;

    border-radius:
        3px;

    font:
        700 9px
        Tahoma,
        Verdana,
        sans-serif;

    cursor: pointer;
}


/* ------------------------------------------------------------
   Selected archive state
   ------------------------------------------------------------ */

.gallery-card {
    position: relative;
}


.gallery-card--selected {
    border-color:
        #6b9bd3 !important;

    box-shadow:
        0 0 0 1px
        rgba(101,158,218,.3),
        0 0 10px
        rgba(64,120,184,.15);
}


.gallery-card-number {
    position: absolute;

    top: 4px;
    right: 4px;

    padding:
        2px
        4px;

    color:
        rgba(220,232,245,.75);

    background:
        rgba(10,16,23,.78);

    border:
        1px solid
        rgba(120,151,186,.25);

    border-radius:
        2px;

    font:
        8px/1
        Tahoma,
        Verdana,
        sans-serif;

    pointer-events: none;
}


/* ------------------------------------------------------------
   Archive lightbox
   ------------------------------------------------------------ */

.gallery-lightbox {
    position: fixed;

    width:
        min(
            94vw,
            1080px
        );

    max-width:
        1080px;

    max-height:
        94vh;

    padding:
        38px
        44px
        18px;

    overflow: hidden;

    color: #dce5ee;

    background:
        #0c121a;

    border:
        1px solid
        #435a73;

    border-radius:
        5px;

    box-shadow:
        0 18px 60px
        rgba(0,0,0,.7);
}


.gallery-lightbox::backdrop {
    background:
        rgba(1,5,10,.82);

    backdrop-filter:
        blur(3px);
}


.gallery-lightbox
#lightbox-image {
    display: block;

    width: 100%;
    height: auto;

    max-height:
        calc(
            94vh - 125px
        );

    object-fit: contain;

    margin:
        0 auto;

    background: white;

    border:
        1px solid
        #283849;

    box-shadow:
        0 5px 24px
        rgba(0,0,0,.45);
}


.gallery-lightbox
.lightbox-caption {
    min-height: 36px;

    margin-top:
        9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content:
        center;

    gap: 3px;

    color:
        #8d9cad;

    font:
        10px/1.25
        Tahoma,
        Verdana,
        sans-serif;

    text-align: center;
}


.gallery-lightbox
.lightbox-caption strong {
    color:
        #bdd9fa;

    font-size:
        11px;
}


.archive-lightbox-nav {
    position: absolute;

    top: 50%;

    z-index: 4;

    width: 34px;
    height: 64px;

    margin-top:
        -32px;

    padding: 0;

    color:
        rgba(221,235,250,.75);

    background:
        rgba(12,20,30,.72);

    border:
        1px solid
        rgba(90,125,164,.38);

    border-radius:
        3px;

    font:
        30px/1
        Georgia,
        serif;

    cursor: pointer;

    transition:
        color .12s ease,
        background .12s ease,
        border-color .12s ease,
        opacity .12s ease;
}


.archive-lightbox-nav:hover:not(:disabled) {
    color: white;

    background:
        rgba(42,67,94,.9);

    border-color:
        rgba(111,161,218,.7);
}


.archive-lightbox-nav:disabled {
    opacity: .16;

    cursor: default;
}


.archive-lightbox-nav--older {
    left: 5px;
}


.archive-lightbox-nav--newer {
    right: 5px;
}


.archive-lightbox-position {
    position: absolute;

    top: 12px;
    left: 50%;

    transform:
        translateX(-50%);

    color: #8293a5;

    font:
        9px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing:
        .06em;
}


/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------ */

html[data-theme="light"]
.archive-timeline {
    background:
        linear-gradient(
            180deg,
            #f2f5f8,
            #e5eaf0
        );

    border-color:
        #bec9d5;
}


html[data-theme="light"]
.archive-breadcrumb {
    color: #3e6596;

    background: #fff;

    border-color:
        #bdc8d5;
}


html[data-theme="light"]
.archive-time-info,
html[data-theme="light"]
.archive-edge-date,
html[data-theme="light"]
.archive-date-jump {
    color: #657382;
}


html[data-theme="light"]
.archive-date-input {
    color: #34404c;

    color-scheme: light;

    background: white;

    border-color:
        #b7c2cd;
}


html[data-theme="light"]
.gallery-lightbox {
    color: #303a45;

    background:
        #e9eef3;

    border-color:
        #aebbc8;
}


html[data-theme="light"]
.gallery-lightbox
.lightbox-caption {
    color: #637181;
}


html[data-theme="light"]
.gallery-lightbox
.lightbox-caption strong {
    color: #3f6592;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .archive-timeline {
        margin:
            0
            5px
            8px;

        padding:
            7px;
    }

    .archive-timeline-top {
        grid-template-columns:
            1fr
            1fr;

        gap: 5px;
    }

    .archive-breadcrumb {
        grid-column:
            1 / -1;

        grid-row: 1;
    }

    .archive-time-button {
        grid-row: 2;

        width: 100%;
    }

    .archive-date-jump {
        flex-wrap: wrap;

        justify-content:
            center;
    }

    .archive-timeline-bottom {
        grid-template-columns:
            1fr
            1fr;
    }

    .archive-time-info {
        grid-column:
            1 / -1;

        grid-row: 1;
    }

    .archive-edge-date {
        grid-row: 2;
    }

    .archive-edge-date:last-child {
        text-align: right;
    }

    .gallery-lightbox {
        width: 98vw;

        padding:
            34px
            28px
            14px;
    }

    .archive-lightbox-nav {
        width: 27px;
        height: 54px;

        margin-top:
            -27px;

        font-size:
            24px;
    }
}


/* ============================================================
   ARCHIVE 2.1 — A/B COMPARISON
   ============================================================ */

.archive-compare-bar {
    margin-top: 7px;

    padding-top: 7px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap: 6px;

    border-top:
        1px solid
        rgba(111,139,170,.16);
}


.archive-compare-pick,
.archive-compare-open,
.archive-compare-swap {
    height: 26px;

    padding:
        0 8px;

    color: #b8c9da;

    background:
        linear-gradient(
            180deg,
            #2b3d51,
            #1c2a39
        );

    border:
        1px solid
        #405971;

    border-radius:
        3px;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;

    white-space: nowrap;

    cursor: pointer;
}


.archive-compare-open {
    color: #d7e9ff;

    border-color:
        #557aa4;

    background:
        linear-gradient(
            180deg,
            #365b82,
            #274566
        );
}


.archive-compare-pick:hover:not(:disabled),
.archive-compare-open:hover:not(:disabled),
.archive-compare-swap:hover:not(:disabled) {
    color: #fff;

    border-color:
        #7296bc;
}


.archive-compare-open:disabled,
.archive-compare-swap:disabled {
    opacity: .35;

    cursor: default;
}


.archive-compare-label {
    min-width: 0;

    color: #7f91a5;

    font:
        9px/1.2
        Tahoma,
        Verdana,
        sans-serif;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ------------------------------------------------------------
   Dialog
   ------------------------------------------------------------ */

.archive-compare-dialog {
    width:
        min(
            96vw,
            1120px
        );

    max-width:
        1120px;

    padding:
        38px
        30px
        18px;

    overflow: hidden;

    color: #dce7f1;

    background:
        #0b121a;

    border:
        1px solid
        #425a73;

    border-radius:
        5px;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.75);
}


.archive-compare-dialog::backdrop {
    background:
        rgba(0,4,9,.86);

    backdrop-filter:
        blur(3px);
}


.archive-compare-close {
    position: absolute;

    top: 8px;
    right: 9px;

    width: 27px;
    height: 27px;

    padding: 0;

    color: #aebdcb;

    background:
        #18232f;

    border:
        1px solid
        #35495d;

    border-radius:
        3px;

    font:
        18px/1
        Tahoma,
        sans-serif;

    cursor: pointer;
}


.archive-compare-close:hover {
    color: #fff;

    background:
        #293d52;
}


.archive-compare-title {
    position: absolute;

    top: 12px;
    left: 50%;

    transform:
        translateX(-50%);

    color: #8ea8c3;

    font:
        700 10px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing:
        .08em;
}


/* ------------------------------------------------------------
   Comparison stage
   ------------------------------------------------------------ */

.archive-compare-stage {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        #34495e;

    box-shadow:
        0 6px 28px
        rgba(0,0,0,.48);

    touch-action: none;

    cursor:
        ew-resize;

    user-select: none;
}


.archive-compare-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;

    user-select: none;
}


.archive-compare-layer-b {
    position: absolute;

    inset:
        0 auto 0 0;

    width: 50%;

    overflow: hidden;

    pointer-events: none;
}


.archive-compare-layer-b
.archive-compare-image {
    /*
     * Width must correspond to the whole
     * comparison stage, not clipped layer.
     */
    width:
        var(
            --compare-stage-width,
            800px
        );
}


.archive-compare-divider {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    z-index: 6;

    width: 2px;

    margin-left: -1px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,.45),
        0 0 10px
        rgba(0,0,0,.55);

    pointer-events: none;
}


.archive-compare-divider::after {
    content: '↔';

    position: absolute;

    top: 50%;
    left: 50%;

    width: 30px;
    height: 30px;

    transform:
        translate(
            -50%,
            -50%
        );

    display: grid;

    place-items: center;

    color: #17202a;

    background: #fff;

    border:
        1px solid
        rgba(0,0,0,.45);

    border-radius: 50%;

    font:
        bold 15px/1
        Tahoma,
        sans-serif;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.4);
}


.archive-compare-badge {
    position: absolute;

    top: 8px;

    z-index: 5;

    min-width: 24px;

    padding:
        4px 6px;

    color: #fff;

    background:
        rgba(13,22,32,.82);

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:
        3px;

    font:
        700 10px/1
        Tahoma,
        Verdana,
        sans-serif;

    text-align: center;

    pointer-events: none;
}


.archive-compare-badge--a {
    right: 8px;
}


.archive-compare-badge--b {
    left: 8px;
}


.archive-compare-slider {
    display: block;

    width: 100% !important;

    margin:
        11px 0 8px;

    accent-color:
        #668fc0;
}


.archive-compare-caption {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    color: #8b9cad;

    font:
        9px/1.3
        Tahoma,
        Verdana,
        sans-serif;
}


.archive-compare-caption span:last-child {
    text-align: right;
}


/* ------------------------------------------------------------
   Light theme
   ------------------------------------------------------------ */

html[data-theme="light"]
.archive-compare-label {
    color: #657585;
}


html[data-theme="light"]
.archive-compare-dialog {
    color: #303b46;

    background: #e9eef3;

    border-color: #aab8c6;
}


html[data-theme="light"]
.archive-compare-caption {
    color: #586878;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 720px) {
    .archive-compare-bar {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 5px;
    }

    .archive-compare-open,
    .archive-compare-swap {
        width: 100%;
    }

    .archive-compare-dialog {
        width: 98vw;

        padding:
            36px
            8px
            12px;
    }

    .archive-compare-caption {
        grid-template-columns:
            1fr;

        gap: 4px;
    }

    .archive-compare-caption span,
    .archive-compare-caption span:last-child {
        text-align: center;
    }
}


/* ============================================================
   YOBA — RESIDENT VERBAL PARASITE
   ============================================================ */

.yoba {
    position: fixed;

    left: 14px;
    bottom: 12px;

    z-index: 70;

    width: 82px;
    height: 86px;

    pointer-events: none;
}


.yoba-avatar {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 78px;
    height: 78px;

    padding: 0;

    overflow: visible;

    background: transparent;

    border: 0;

    outline: 0;

    cursor: pointer;

    pointer-events: auto;

    animation:
        yoba-bob
        1650ms
        ease-in-out
        infinite
        alternate;
}


.yoba-sprite-shell {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    transform-origin:
        50% 72%;

    animation:
        yoba-sway
        2700ms
        ease-in-out
        infinite
        alternate;
}


.yoba-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

    filter:
        drop-shadow(
            0 4px 3px
            rgba(0,0,0,.45)
        );
}


.yoba-fallback {
    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    color: #d8e2ec;

    background:
        radial-gradient(
            circle at 45% 38%,
            #465363,
            #1a222c 72%
        );

    border:
        2px solid
        #718195;

    border-radius:
        46% 54% 48% 52%;

    box-shadow:
        0 4px 10px
        rgba(0,0,0,.45);

    font:
        700 18px/1
        Tahoma,
        Verdana,
        sans-serif;

    transform:
        rotate(-3deg);
}


.yoba-bubble {
    position: absolute;

    left: 70px;
    bottom: 58px;

    width: max-content;
    max-width: 235px;

    padding:
        7px 9px;

    opacity: 0;

    transform:
        translate(
            -4px,
            6px
        )
        scale(.96);

    transform-origin:
        bottom left;

    color: #cedbe8;

    background:
        rgba(
            11,
            18,
            26,
            .96
        );

    border:
        1px solid
        #40566e;

    border-radius:
        4px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.42);

    font:
        10px/1.35
        Tahoma,
        Verdana,
        sans-serif;

    text-align: left;

    pointer-events: none;

    transition:
        opacity .16s ease,
        transform .18s ease;
}


.yoba-bubble::before {
    content: '';

    position: absolute;

    left: -7px;
    bottom: 8px;

    width: 12px;
    height: 12px;

    background:
        rgba(
            11,
            18,
            26,
            .96
        );

    border-left:
        1px solid
        #40566e;

    border-bottom:
        1px solid
        #40566e;

    transform:
        rotate(45deg);
}


.yoba--talking
.yoba-bubble {
    opacity: 1;

    transform:
        translate(
            0,
            0
        )
        scale(1);
}


.yoba--talking
.yoba-sprite-shell {
    animation:
        yoba-sway
        900ms
        ease-in-out
        infinite
        alternate;
}


.yoba-avatar--bonk {
    animation:
        yoba-bonk
        420ms
        cubic-bezier(
            .2,
            .9,
            .35,
            1.35
        ),
        yoba-bob
        1650ms
        ease-in-out
        420ms
        infinite
        alternate;
}


.yoba--muted {
    opacity: .64;
}


.yoba--muted::after {
    content: '×';

    position: absolute;

    right: 1px;
    bottom: 4px;

    width: 18px;
    height: 18px;

    display: grid;

    place-items: center;

    color: #d7dde4;

    background:
        rgba(105,35,42,.92);

    border:
        1px solid
        #9b5660;

    border-radius: 50%;

    font:
        700 12px/1
        Tahoma,
        sans-serif;

    pointer-events: none;
}


@keyframes yoba-bob {
    0% {
        top: -2px;
    }

    100% {
        top: 4px;
    }
}


@keyframes yoba-sway {
    0% {
        transform:
            rotate(-4deg);
    }

    100% {
        transform:
            rotate(4deg);
    }
}


@keyframes yoba-bonk {
    0% {
        transform:
            translateY(0)
            scale(1);
    }

    35% {
        transform:
            translateY(-7px)
            scale(
                1.08,
                .94
            );
    }

    68% {
        transform:
            translateY(3px)
            scale(
                .95,
                1.06
            );
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}


/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------ */

html[data-theme="light"]
.yoba-bubble {
    color: #344250;

    background:
        rgba(
            244,
            247,
            250,
            .97
        );

    border-color:
        #aebdcb;

    box-shadow:
        0 5px 16px
        rgba(31,45,60,.18);
}


html[data-theme="light"]
.yoba-bubble::before {
    background:
        rgba(
            244,
            247,
            250,
            .97
        );

    border-color:
        #aebdcb;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .yoba {
        left: 5px;
        bottom: 5px;

        width: 61px;
        height: 65px;
    }

    .yoba-avatar {
        width: 58px;
        height: 58px;
    }

    .yoba-fallback {
        width: 50px;
        height: 50px;

        font-size: 14px;
    }

    .yoba-bubble {
        left: 54px;
        bottom: 46px;

        max-width:
            min(
                210px,
                calc(
                    100vw -
                    80px
                )
            );

        font-size: 9px;
    }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media (
    prefers-reduced-motion:
    reduce
) {
    .yoba-avatar,
    .yoba-sprite-shell,
    .yoba--talking
    .yoba-sprite-shell,
    .yoba-avatar--bonk {
        animation: none;
    }
}


/* ============================================================
   CANVAS 2.0 — UNDO / ZOOM / MINIMAP
   ============================================================ */

.canvas2-undo-btn {
    white-space: nowrap;
}


.canvas2-zoom-control {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #7f91a5;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;
}


.canvas2-zoom-control select {
    height: 29px;

    padding:
        0 5px;

    color: #d7e0ea;

    background:
        linear-gradient(
            180deg,
            #34475c,
            #243344
        );

    border:
        1px solid
        #465d75;

    border-radius:
        3px;

    font:
        700 10px
        Tahoma,
        Verdana,
        sans-serif;

    cursor: pointer;
}


.canvas2-zoom-control select:disabled {
    opacity: .45;

    cursor: default;
}


.canvas-area.canvas2-enabled {
    position: relative;
}


@media (min-width: 761px) {
    .canvas-area.canvas2-enabled {
        overflow-x: auto;
        overflow-y: visible;
    }
}


.canvas2-minimap {
    position: absolute;

    top: 14px;
    right: 18px;

    z-index: 31;

    width: 166px;

    padding:
        3px;

    background:
        rgba(11,18,27,.88);

    border:
        1px solid
        #41576e;

    border-radius:
        3px;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.35);

    opacity: .86;

    transition:
        opacity .15s ease;
}


.canvas2-minimap:hover {
    opacity: 1;
}


.canvas2-minimap-title {
    height: 14px;

    display: flex;

    align-items: center;

    justify-content:
        center;

    color: #8497aa;

    font:
        700 8px/1
        Tahoma,
        Verdana,
        sans-serif;

    letter-spacing:
        .12em;
}


.canvas2-minimap canvas {
    display: block;

    width: 160px;
    height: 120px;

    background: white;

    border:
        1px solid
        #31465b;

    cursor: crosshair;
}


html[data-theme="light"]
.canvas2-zoom-control select {
    color: #354153;

    background:
        linear-gradient(
            180deg,
            #fff,
            #dce3eb
        );

    border-color:
        #aeb9c6;
}


html[data-theme="light"]
.canvas2-minimap {
    background:
        rgba(
            235,
            240,
            245,
            .92
        );

    border-color:
        #abb9c7;
}


@media (max-width: 760px) {
    .canvas2-separator,
    .canvas2-minimap {
        display: none;
    }

    .canvas2-zoom-control {
        opacity: .6;
    }
}


/* ============================================================
   PRESENCE LOCAL CURSOR FIX
   Own presence cursor is intentionally not rendered by JS,
   therefore the native drawing cursor must remain visible.
   Remote cursors continue to use #presence-canvas.
   ============================================================ */

.canvas-stack.presence-live > #draw-canvas {
    cursor: crosshair !important;
}


/* ============================================================
   CANVAS 2.1 — FULL WIDTH + MAP TOGGLE
   Logical canvas remains 800x600.
   100% means fit the available desktop canvas area.
   ============================================================ */

@media (min-width: 761px) {
    .canvas-area.canvas2-enabled
    .canvas-stack {
        max-width: none;
    }
}


.canvas2-map-btn {
    height: 29px;

    padding:
        0 7px;

    white-space: nowrap;

    color: #9baabc;

    background:
        linear-gradient(
            180deg,
            #34475c,
            #243344
        );

    border:
        1px solid
        #465d75;

    border-radius:
        3px;

    font:
        700 9px/1
        Tahoma,
        Verdana,
        sans-serif;

    cursor: pointer;
}


.canvas2-map-btn:hover {
    color: #e4edf6;

    border-color:
        #647f9b;
}


.canvas2-map-btn.active {
    color: #dceaff;

    background:
        linear-gradient(
            180deg,
            #47698d,
            #304d6b
        );

    border-color:
        #668bb2;
}


.canvas2-minimap[hidden] {
    display: none !important;
}


html[data-theme="light"]
.canvas2-map-btn {
    color: #526170;

    background:
        linear-gradient(
            180deg,
            #fff,
            #dce3eb
        );

    border-color:
        #aeb9c6;
}


html[data-theme="light"]
.canvas2-map-btn.active {
    color: #284c76;

    background:
        linear-gradient(
            180deg,
            #edf5ff,
            #cddceb
        );

    border-color:
        #819dbb;
}


/* ============================================================
   VIRTUAL CURSOR / PRESENCE 3.0 — VP-01
   ============================================================ */

.virtual-pointer-local {
    position: absolute;

    z-index: 25;

    width: 10px;
    height: 10px;

    margin: 0;

    box-sizing: border-box;

    border:
        2px solid
        rgba(15,22,31,.96);

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.92),
        0 1px 5px rgba(0,0,0,.42);

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    will-change:
        left,
        top,
        transform;

    transition:
        width .06s linear,
        height .06s linear,
        border-width .06s linear;
}

.virtual-pointer-local[data-down="true"] {
    width: 12px;
    height: 12px;

    border-width: 3px;
}

.virtual-pointer-local[hidden] {
    display: none !important;
}

/*
 * Fail-safe:
 * the hardware cursor is hidden only
 * after VirtualPointer initialized.
 */
.canvas-stack.virtual-pointer-ready
    > #draw-canvas {
    cursor: none !important;
}