/* ============================================================
   ГРАМОТИНЬО — style.css
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
    --bg: #F4F1EA;
    --text: #0A0A0A;
    --red: #D90429;
    --font-display: 'Oswald', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --paper-line: rgba(10, 10, 10, 0.15);
    --muted: rgba(10, 10, 10, 0.45);

    --evm-bg:      #0B0F0B;
    --evm-text:    #C7E0C7;
    --evm-dim:     #6B826B;
    --evm-bright:  #E8FFE8;
    --evm-border:  #4A6A4A;
}

html[data-theme="dark"] {
    --bg: #050505;
    --text: #E0E0E0;
    --red: #FF3B5C;
    --paper-line: rgba(224, 224, 224, 0.14);
    --muted: rgba(224, 224, 224, 0.5);
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — «бумага»: тёплый пергамент, тонкая штриховка
   ============================================================ */
body {
    background-color: var(--bg);
    background-image:
        repeating-linear-gradient(135deg,
            rgba(120, 100, 70, 0.012) 0px,
            rgba(120, 100, 70, 0.012) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse 130% 80% at 50% -10%, rgba(255, 253, 246, 0.9), transparent 62%),
        radial-gradient(ellipse 140% 70% at 50% 115%, rgba(214, 202, 180, 0.45), transparent 65%),
        radial-gradient(circle 600px at 88% 12%, rgba(248, 244, 235, 0.5), transparent 70%),
        radial-gradient(circle 500px at 8% 60%, rgba(230, 224, 210, 0.4), transparent 70%),
        linear-gradient(180deg, #F6F2EA 0%, #F2EEE5 40%, #EFEADD 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    color: var(--text);
    font-family: var(--font-mono);
    overflow-x: hidden;
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   ТЁМНАЯ ТЕМА — почти чёрный
   ============================================================ */
html[data-theme="dark"] body {
    background-color: #050505;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse 130% 80% at 50% -10%, rgba(30, 30, 32, 0.5), transparent 62%),
        radial-gradient(ellipse 140% 70% at 50% 115%, rgba(15, 15, 16, 0.75), transparent 65%),
        radial-gradient(circle 600px at 88% 12%, rgba(35, 35, 38, 0.25), transparent 70%),
        radial-gradient(circle 500px at 8% 60%, rgba(25, 25, 28, 0.3), transparent 70%),
        linear-gradient(180deg, #030303 0%, #060606 40%, #020202 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.02), transparent 45%);
    opacity: 1;
}
html[data-theme="dark"] body::before {
    background-image:
        radial-gradient(circle 800px at 15% 20%, rgba(80, 80, 90, 0.04), transparent 60%),
        radial-gradient(circle 700px at 85% 80%, rgba(60, 60, 70, 0.03), transparent 60%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
}
html[data-theme="dark"] body::after {
    background:
        radial-gradient(ellipse 130% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

body.menu-open::before,
body.menu-open::after { display: none; }

@media (max-width: 768px) {
    body::before { display: none; }
    body::after  { display: none; }
    body {
        background-image:
            radial-gradient(ellipse 130% 70% at 50% 0%, #F8F4EC 0%, rgba(248,244,236,0) 62%),
            radial-gradient(ellipse 110% 60% at 50% 100%, #ECE6D8 0%, rgba(236,230,216,0) 72%);
    }
    html[data-theme="dark"] body {
        background-image:
            radial-gradient(ellipse 130% 70% at 50% 0%, #0a0a0a 0%, rgba(10,10,10,0) 62%),
            radial-gradient(ellipse 110% 60% at 50% 100%, #020202 0%, rgba(2,2,2,0) 72%);
    }
}

/* LOADER */
.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.shutter {
    flex: 1;
    background: var(--text);
    transform-origin: center;
}
html[data-theme="dark"] .loader-overlay .shutter { background: #050608; }
.shutter-top { transform-origin: top; }
.shutter-bot { transform-origin: bottom; }

/* HEADER */
.page-header {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
    padding: 3.4rem 5vw 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}
.page-logo {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.page-logo .l1 {
    display: block;
    font-size: clamp(2.4rem, 7.5vw, 6.4rem);
    color: var(--red);
}
.page-logo .l2 {
    display: block;
    font-size: clamp(1.5rem, 5vw, 4.2rem);
    color: var(--text);
    margin-top: 0.05em;
}
@media (max-width: 640px) {
    .page-header { padding: 2rem 5vw 0; }
}

/* ===== THEME TOGGLE ===== */
.theme-toggle{
    position:fixed; top:14px; right:90px; z-index:500;
    width:62px;height:62px;background:transparent;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;
    -webkit-tap-highlight-color:transparent;color:var(--text);
    opacity:0;transition:color .25s ease;
}
.theme-toggle .ring{
    position:absolute;inset:6px;border:1px solid rgba(10,10,10,.28);border-radius:50%;
    pointer-events:none;
    transition:border-color .4s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] .theme-toggle .ring{border-color:rgba(221,224,229,.3);}
.theme-toggle .ring::before{
    content:'';position:absolute;top:-1px;left:50%;width:6px;height:6px;
    background:var(--red);border-radius:50%;transform:translateX(-50%);
    transition:top .5s ease, transform .5s ease;
}
.theme-toggle:hover{color:var(--red);}
.theme-toggle:hover .ring{border-color:var(--red);transform:rotate(180deg);}
.theme-toggle .ico{position:relative;width:28px;height:28px;}
.theme-toggle .ico svg{position:absolute;inset:0;width:100%;height:100%;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transition:opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.theme-toggle .ico .moon{opacity:0;transform:rotate(-90deg) scale(.5);}
html[data-theme="dark"] .theme-toggle .ico .sun{opacity:0;transform:rotate(90deg) scale(.5);}
html[data-theme="dark"] .theme-toggle .ico .moon{opacity:1;transform:rotate(0) scale(1);}
html[data-theme="dark"] .theme-toggle .ring{transform:rotate(180deg);border-color:var(--red);}
html[data-theme="dark"] .theme-toggle .ring::before{top:calc(100% - 5px);transform:translateX(-50%) scale(1.4);}

/* BURGER */
.burger-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 62px;
    height: 62px;
    z-index: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    padding: 0;
}
.burger-btn .ring {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(10, 10, 10, 0.28);
    border-radius: 50%;
    transition: border-color 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
html[data-theme="dark"] .burger-btn .ring { border-color: rgba(221,224,229,.3); }
.burger-btn .ring::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: top 0.5s ease, transform 0.5s ease;
}
.burger-btn:not(.open):hover .ring {
    border-color: var(--red);
    transform: rotate(180deg);
}
.burger-icon {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.burger-btn:not(.open):hover .burger-icon { transform: rotate(90deg); }
.burger-icon span {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--text);
    border-radius: 1px;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.burger-icon span:nth-child(1) { top: 0;    left: 0;  transform-origin: top left; }
.burger-icon span:nth-child(2) { top: 0;    right: 0; transform-origin: top right; background: var(--red); }
.burger-icon span:nth-child(3) { bottom: 0; left: 0;  transform-origin: bottom left; }
.burger-icon span:nth-child(4) { bottom: 0; right: 0; transform-origin: bottom right; background: var(--red); }
.burger-btn:not(.open):hover .burger-icon span:nth-child(1) { transform: translate(-3px, -3px) scale(1.08); }
.burger-btn:not(.open):hover .burger-icon span:nth-child(2) { transform: translate(3px, -3px) scale(1.08); }
.burger-btn:not(.open):hover .burger-icon span:nth-child(3) { transform: translate(-3px, 3px) scale(1.08); }
.burger-btn:not(.open):hover .burger-icon span:nth-child(4) { transform: translate(3px, 3px) scale(1.08); }

.burger-btn.open .burger-icon { transform: rotate(0deg); }
.burger-btn.open .ring {
    border-color: var(--red);
    transform: rotate(405deg);
}
.burger-btn.open .ring::before {
    top: calc(100% - 5px);
    transform: translateX(-50%) scale(1.4);
}
.burger-btn.open .burger-icon span:nth-child(1) {
    transform: translate(8.5px, 8.5px) rotate(45deg);
    width: 26px; height: 2.5px;
}
.burger-btn.open .burger-icon span:nth-child(2) {
    transform: translate(-8.5px, 8.5px) rotate(-45deg);
    width: 26px; height: 2.5px;
    opacity: 0;
}
.burger-btn.open .burger-icon span:nth-child(3) {
    transform: translate(8.5px, -8.5px) rotate(-45deg);
    width: 26px; height: 2.5px;
    opacity: 0;
}
.burger-btn.open .burger-icon span:nth-child(4) {
    transform: translate(-8.5px, -8.5px) rotate(45deg);
    width: 26px; height: 2.5px;
}
.burger-btn.open:hover .ring { transform: rotate(585deg); }
.burger-btn.open:hover .burger-icon { transform: rotate(0deg) scale(1.12); }

@media (max-width: 768px) {
    .burger-btn { top: 8px; right: 8px; width: 44px; height: 44px; }
    .burger-btn .ring { inset: 4px; }
    .burger-icon { width: 18px; height: 18px; }
    .burger-icon span { width: 6px; height: 6px; }
    .burger-btn.open .burger-icon span:nth-child(1),
    .burger-btn.open .burger-icon span:nth-child(4) { width: 18px; }
    .burger-btn.open .burger-icon span:nth-child(1) { transform: translate(6px, 6px) rotate(45deg); }
    .burger-btn.open .burger-icon span:nth-child(4) { transform: translate(-6px, -6px) rotate(45deg); }

    .theme-toggle { top: 8px; right: 60px; width: 44px; height: 44px; }
    .theme-toggle .ring { inset: 4px; }
    .theme-toggle .ico { width: 18px; height: 18px; }

    .clock-switch { top: 60px; right: 8px; width: 44px; height: 44px; }
    .clock-switch .switch-ring { inset: 4px; }
    .clock-switch .switch-icon { width: 20px; height: 20px; }
    .clock-switch .switch-icon .hand-h { height: 6px; }
    .clock-switch .switch-icon .hand-m { height: 8px; }
}
.space-switch {
    position: fixed;
    top: 168px;                 /* 96px (clock-switch) + 62px (его высота) + 10px отступ */
    right: 22px;
    width: 62px;
    height: 62px;
    z-index: 499;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.space-switch .space-ring {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(10, 10, 10, 0.28);
    border-radius: 50%;
    transition: border-color 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.space-switch .space-ring::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: top 0.5s ease, transform 0.5s ease;
}

.space-switch:hover .space-ring {
    border-color: var(--red);
    transform: rotate(180deg);
}

.space-switch .space-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text);
}
.space-switch:hover .space-icon {
    transform: rotate(90deg);
    color: var(--red);
}

.space-switch .space-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Анимации орбит — всегда включены */
.space-switch .o1 { transform-origin: 12px 12px; animation: swSpin 9s linear infinite; }
.space-switch .o2 { transform-origin: 12px 12px; animation: swSpin 13s linear infinite reverse; }
.space-switch .o3 { transform-origin: 12px 12px; animation: swSpin 18s linear infinite; }
.space-switch .sun {
    transform-origin: 12px 12px;
    animation: swPulse 2.4s ease-in-out infinite;
}

@keyframes swSpin {
    to { transform: rotate(360deg); }
}
@keyframes swPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}

/* Мобильная версия */
@media (max-width: 768px) {
    .space-switch {
        top: 146px;             /* 84 + 54 + 8 */
        right: 14px;
        width: 54px;
        height: 54px;
    }
    .space-switch .space-ring { inset: 5px; }
    .space-switch .space-icon { width: 26px; height: 26px; }
}

/* BURGER MENU */
.burger-menu {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vw 5vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    overflow-y: auto;
    overflow-x: hidden;
    contain: layout paint;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.burger-menu.open { opacity: 1; pointer-events: auto; }
.burger-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
    background-size: 360px 360px;
    opacity: 0.09;
    z-index: 0;
}
.burger-menu-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    width: 100%;
    max-width: 1400px;
    padding: 2rem 0;
}
.burger-menu-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    min-width: 0;
}
.burger-menu-col-left  { justify-self: start; }
.burger-menu-col-right { justify-self: end; align-items: flex-end; text-align: right; }
.burger-link {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    position: relative;
    display: inline-block;
    transform: translate3d(0, 22px, 0);
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    word-break: break-word;
    max-width: 100%;
    transition: color 0.2s ease, transform 0.22s ease, opacity 0.18s ease;
}
.burger-menu.open .burger-link {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: color 0.25s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.burger-menu.open .burger-menu-col-left .burger-link:nth-child(1) { transition-delay: 0.06s; }
.burger-menu.open .burger-menu-col-left .burger-link:nth-child(2) { transition-delay: 0.11s; }
.burger-menu.open .burger-menu-col-left .burger-link:nth-child(3) { transition-delay: 0.16s; }
.burger-menu.open .burger-menu-col-left .burger-link:nth-child(4) { transition-delay: 0.21s; }
.burger-menu.open .burger-menu-col-left .burger-link:nth-child(5) { transition-delay: 0.26s; }
.burger-menu.open .burger-menu-col-right .burger-link:nth-child(1) { transition-delay: 0.14s; }
.burger-menu.open .burger-menu-col-right .burger-link:nth-child(2) { transition-delay: 0.19s; }
.burger-menu.open .burger-menu-col-right .burger-link:nth-child(3) { transition-delay: 0.24s; }
.burger-menu.open .burger-menu-col-right .burger-link:nth-child(4) { transition-delay: 0.29s; }

.burger-link:hover { color: var(--red); }
.burger-menu-col-left  .burger-link:hover { transform: translateX(14px); }
.burger-menu-col-right .burger-link:hover { transform: translateX(-14px); }
.burger-link.active {
    color: var(--red);
    font-style: italic;
    letter-spacing: -0.02em;
}
.burger-menu-col-left  .burger-link.active::before {
    content: '→';
    position: absolute;
    left: -0.9em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.55em;
    opacity: 0.9;
    font-style: normal;
}
.burger-menu-col-right .burger-link.active::after {
    content: '←';
    position: absolute;
    right: -0.9em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.55em;
    opacity: 0.9;
    font-style: normal;
}
.burger-menu-foot {
    position: absolute;
    bottom: 3.5vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    text-align: center;
    z-index: 1;
}
@media (max-width: 900px) {
    .burger-menu-inner { gap: clamp(20px, 3vw, 40px); }
    .burger-link { font-size: clamp(1.6rem, 4.4vw, 2.8rem); }
}

@media (min-width: 769px) {
    .burger-menu-col-left .burger-link:nth-child(1) {
        font-size: clamp(2.1rem, 4.2vw, 4.4rem);
    }
}

@media (max-width: 768px) {
    .burger-menu {
        contain: none;
        -webkit-overflow-scrolling: auto;
        overscroll-behavior: auto;
        overflow: hidden;
        padding: 5rem 6vw 3rem;
        align-items: flex-start;
        justify-content: flex-start;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.18s ease-out, transform 0.22s ease-out;
        will-change: opacity, transform;
    }
    .burger-menu.open { opacity: 1; transform: translateY(0); }
    .burger-menu::before { display: none; }
    .burger-menu-inner { grid-template-columns: 1fr; gap: 0.4em; padding: 0; justify-items: start; }
    .burger-menu-col-left,
    .burger-menu-col-right { justify-self: start; align-items: flex-start; text-align: left; width: 100%; }
    .burger-menu-col-right { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--paper-line); width: 100%; }
    .burger-link { font-size: clamp(1.7rem, 7.4vw, 2.6rem); line-height: 1.12; transform: none; opacity: 1; transition: color 0.15s ease; }
    .burger-menu.open .burger-link { transform: none; opacity: 1; transition: color 0.15s ease; }
    .burger-menu.open .burger-menu-col-left  .burger-link,
    .burger-menu.open .burger-menu-col-right .burger-link { transition-delay: 0s; }
    .burger-menu-col-left  .burger-link:hover,
    .burger-menu-col-right .burger-link:hover { transform: none; }
    .burger-menu-col-right .burger-link.active::after { content: '→'; right: auto; left: -0.9em; }
    .burger-menu-col-right .burger-link.active::before { content: none; }
    .burger-menu-foot { bottom: 1.4rem; font-size: 0.55rem; letter-spacing: 0.16em; left: 6vw; right: 6vw; transform: none; text-align: left; white-space: normal; }
    .burger-menu-col-left .burger-link:nth-child(1) { font-size: clamp(2.2rem, 10vw, 3.4rem); color: var(--red); }
}
@media (max-width: 420px) {
    .burger-link { font-size: clamp(1.5rem, 7vw, 2.1rem); }
    .burger-menu-inner { gap: 0.35em; }
}

/* HERO */
.wrapper {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5vw;
    opacity: 0;
}
.hero {
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0;
}
.hero-meta {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--paper-line);
    padding-bottom: 1rem;
    opacity: 0;
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 11vw, 9.5rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    padding-bottom: 0.22em;
    margin-bottom: 2.5rem;
}
.hero-title .word {
    display: inline-block;
    overflow: visible;
    vertical-align: bottom;
}
.hero-title .word-inner {
    display: inline-block;
    transform: translateY(110%);
}
.line-1 { color: var(--red); }
.line-2 { color: var(--text); }

.hero-title .terminal-word {
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: inline-block;
}
.hero-title .terminal-word.cyber-flicker {
    animation: cyberFlicker 1.6s steps(1) 1;
}
@keyframes cyberFlicker {
    0%   { color: var(--text); text-shadow: none; transform: translateX(0); }
    6%   { color: var(--red); text-shadow: 2px 0 var(--red), -2px 0 #00E5FF; transform: translateX(-2px); }
    12%  { color: var(--text); text-shadow: none; transform: translateX(0); }
    18%  { color: var(--red); text-shadow: -3px 0 #00E5FF, 3px 0 var(--red); transform: translateX(3px) skewX(-6deg); }
    24%  { color: var(--text); text-shadow: none; transform: translateX(0) skewX(0); }
    32%  { color: var(--red); text-shadow: 4px 0 var(--red), -4px 0 #00E5FF; transform: translateX(-4px); }
    38%  { color: var(--text); text-shadow: none; transform: translateX(0); }
    46%  { color: var(--red); text-shadow: 0 0 12px var(--red); transform: scaleX(1.04); }
    52%  { color: var(--text); text-shadow: none; transform: scaleX(1); }
    60%  { color: var(--red); text-shadow: -2px 0 #00E5FF, 2px 0 var(--red); transform: translateX(2px); }
    66%  { color: var(--text); text-shadow: none; transform: translateX(0); }
    74%  { color: var(--red); text-shadow: 3px 0 var(--red); transform: translateX(-1px); }
    80%  { color: var(--text); text-shadow: none; transform: translateX(0); }
    100% { color: var(--text); text-shadow: none; transform: translateX(0); }
}
.hero-sub {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    font-size: clamp(0.7rem, 1.1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.hero-sub::-webkit-scrollbar { display: none; }
.hero-sub span { display: inline-flex; align-items: center; }
.hero-sub span::after { content: '·'; margin-left: 1.5rem; color: var(--red); }
.hero-sub span:last-child::after { display: none; }

.accent-line {
    width: 0%;
    height: 4px;
    background: var(--red);
    margin: 2rem 0;
}

/* ЭВМ-ТЕРМИНАЛ */
.evm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: var(--evm-bg);
}
.evm-window {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--evm-bg);
    color: var(--evm-text);
    font-family: 'Consolas', 'Lucida Console', 'PT Mono', 'Courier New', monospace;
}
.evm-window::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0, 30, 0, 0.22) 2px, rgba(0, 30, 0, 0.22) 3px);
    opacity: 0.55;
    mix-blend-mode: multiply;
}
.evm-header {
    flex-shrink: 0;
    padding: 18px 28px 10px;
    border-bottom: 1px dashed var(--evm-border);
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--evm-dim);
    position: relative;
    z-index: 12;
}
.evm-header-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.evm-header-row span { white-space: nowrap; }
.evm-title-main { color: var(--evm-bright); font-weight: 700; letter-spacing: 0.14em; }
.evm-body {
    flex: 1;
    min-height: 0;
    padding: 18px 28px 26px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: #2A3A2A var(--evm-bg);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 12;
    overscroll-behavior: contain;
}
.evm-body::-webkit-scrollbar { width: 12px; }
.evm-body::-webkit-scrollbar-track { background: var(--evm-bg); }
.evm-body::-webkit-scrollbar-thumb { background: #2A3A2A; border: 3px solid var(--evm-bg); border-radius: 6px; }

.term-line { min-height: 1.55em; white-space: pre-wrap; word-break: break-word; color: var(--evm-text); font-family: inherit; font-size: inherit; text-transform: uppercase; }
.term-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 4px double var(--evm-bright);
    outline: 1px solid var(--evm-dim);
    outline-offset: 6px;
    padding: 22px 26px;
    margin: 0.6rem auto 1.8rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(0, 20, 0, 0.15);
}
.term-frame::-webkit-scrollbar { display: none; }
.term-frame::before,
.term-frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--evm-bright); }
.term-frame::before { top: 3px; left: 3px; border-right: none; border-bottom: none; }
.term-frame::after  { bottom: 3px; right: 3px; border-left: none; border-top: none; }
.term-ascii {
    font-family: 'Consolas', 'Lucida Console', 'PT Mono', 'Courier New', monospace;
    font-size: clamp(11px, 1.3vw, 15px);
    line-height: 1.15;
    color: var(--evm-bright);
    white-space: pre;
    margin: 0;
    text-align: center;
    letter-spacing: 0;
}
.term-input-line { display: flex; align-items: baseline; white-space: pre-wrap; position: relative; }
.term-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--evm-bright);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    caret-color: transparent;
    width: 0;
    min-width: 0;
    flex: 0 0 auto;
}
.term-input:disabled { opacity: 0; }
.term-caret {
    display: inline-block;
    width: 0.6em;
    height: 1.05em;
    background: var(--evm-bright);
    vertical-align: text-bottom;
    margin-left: 2px;
    transform: translateY(2px);
    animation: caretBlink 1s steps(1) infinite;
    pointer-events: none;
    flex-shrink: 0;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.term-mirror { display: inline; white-space: pre; color: var(--evm-bright); }
.term-list { margin: 0.4rem 0 0.6rem 2.5em; padding: 0; list-style: none; }
.term-list-item {
    display: grid;
    grid-template-columns: 12ch 1fr;
    gap: 1.2em;
    padding: 2px 0;
    color: var(--evm-text);
    font-family: inherit;
    font-size: inherit;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s;
    border: none;
    background: transparent;
}
.term-list-item .cmd-name { color: var(--evm-bright); font-weight: 700; letter-spacing: 0.05em; }
.term-list-item .cmd-desc { color: var(--evm-text); }
.term-list-item:hover .cmd-name { color: #FFFFFF; }
.term-list-item:hover .cmd-desc { color: var(--evm-bright); }
@media (max-width: 768px) {
    .evm-header { padding: 14px 16px 8px; }
    .evm-body { padding: 14px 16px 20px; font-size: 14px; }
    .term-frame { padding: 14px 14px; border-width: 3px; outline: none; }
    .term-ascii { font-size: 8.5px; }
    .term-list { margin-left: 1.2em; }
    .term-list-item { grid-template-columns: 1fr; gap: 0; }
    .evm-window::after { display: none; }
}

/* TOOLS-ТЕРМИНАЛ */
.evm-overlay.term-tools-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: var(--evm-bg);
}
.evm-overlay.term-tools-overlay .evm-window {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--evm-bg);
    color: var(--evm-text);
    font-family: 'Consolas', 'Lucida Console', 'PT Mono', 'Courier New', monospace;
}
.evm-overlay.term-tools-overlay .evm-window::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0, 30, 0, 0.22) 2px, rgba(0, 30, 0, 0.22) 3px);
    opacity: 0.55;
    mix-blend-mode: multiply;
}
.evm-overlay.term-tools-overlay .evm-header {
    flex-shrink: 0;
    padding: 18px 28px 10px;
    border-bottom: 1px dashed var(--evm-border);
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--evm-dim);
    position: relative;
    z-index: 12;
}
.evm-overlay.term-tools-overlay .evm-header-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.evm-overlay.term-tools-overlay .evm-header-row span { white-space: nowrap; }
.evm-overlay.term-tools-overlay .evm-title-main { color: var(--evm-bright); font-weight: 700; letter-spacing: 0.14em; }
.evm-overlay.term-tools-overlay .evm-body {
    flex: 1;
    min-height: 0;
    padding: 18px 28px 26px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: #2A3A2A var(--evm-bg);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 12;
    overscroll-behavior: contain;
}
.evm-overlay.term-tools-overlay .evm-body::-webkit-scrollbar { width: 12px; }
.evm-overlay.term-tools-overlay .evm-body::-webkit-scrollbar-track { background: var(--evm-bg); }
.evm-overlay.term-tools-overlay .evm-body::-webkit-scrollbar-thumb { background: #2A3A2A; border: 3px solid var(--evm-bg); border-radius: 6px; }
.evm-overlay.term-tools-overlay .term-list-item { display: block; }
.evm-overlay.term-tools-overlay .term-list { margin-left: 1.2em; }
.term-prose { color: var(--evm-text); text-transform: none; font-family: inherit; font-size: inherit; line-height: 1.65; margin: 0.6rem 0 1rem; max-width: 900px; }
.term-prose p { margin: 0 0 1em; }
.term-starfield {
    color: var(--evm-bright);
    text-transform: none;
    white-space: pre;
    font-family: 'Consolas', 'Lucida Console', monospace;
    letter-spacing: 0;
    line-height: 1;
    font-size: clamp(6px, 0.75vw, 9px);
    overflow: hidden;
    margin: 0.4rem 0 0.6rem;
}
@media (max-width: 768px) {
    .evm-overlay.term-tools-overlay .evm-header { padding: 14px 16px 8px; }
    .evm-overlay.term-tools-overlay .evm-body { padding: 14px 16px 20px; font-size: 14px; }
    .term-starfield { font-size: 5px; }
    .evm-overlay.term-tools-overlay .evm-window::after { display: none; }
}

/* MEDIA */
.media-wrapper { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 3rem 5vw 8rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.media-card { position: relative; display: block; text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; isolation: isolate; }
.media-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--text); overflow: hidden; border-radius: 4px; }
.media-thumb iframe,
.media-thumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; object-fit: cover; }
.media-thumb iframe { pointer-events: none; }
.media-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.55) 100%); z-index: 2; pointer-events: none; transition: opacity 0.4s ease; }
.media-num { position: absolute; top: 14px; left: 18px; z-index: 3; font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.35); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.media-card:hover .media-num { color: var(--red); transform: translateY(-4px) scale(1.08); }
.media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 4;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
    pointer-events: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.media-play::before { content: ''; display: block; width: 0; height: 0; border-left: 20px solid var(--text); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.media-card:hover .media-play { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--red); }
.media-card:hover .media-play::before { border-left-color: #FFFFFF; }
.media-info { position: relative; padding: 22px 4px 6px; z-index: 2; }
.media-info-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.media-info-top .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.media-card:hover .media-info-top .dot { transform: scale(1.6); }
.media-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--text); transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.media-card:hover .media-title { color: var(--red); transform: translateX(6px); }
.media-title-line { display: block; height: 2px; width: 0; background: var(--red); margin-top: 14px; transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.media-card:hover .media-title-line { width: 64px; }
.media-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) translateX(-12px); font-family: var(--font-display); font-size: 1.6rem; color: var(--red); opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.media-card:hover .media-arrow { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 900px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } }
@media (max-width: 640px) {
    .media-wrapper { padding: 1.4rem 5vw 5rem; }
    .media-grid { grid-template-columns: 1fr; gap: 18px; }
    .media-num { font-size: 2.4rem; top: 10px; left: 12px; }
    .media-play { width: 58px; height: 58px; }
    .media-play::before { border-left-width: 16px; border-top-width: 11px; border-bottom-width: 11px; }
    .media-info { padding: 16px 2px 4px; }
    .media-title { font-size: 1.45rem; }
    .media-info-top { font-size: 0.55rem; margin-bottom: 8px; }
    .media-title-line { margin-top: 10px; }
}

.media-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 4700;
    background: rgba(10, 10, 10, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(50px, 8vh, 80px) clamp(16px, 4vw, 64px) clamp(16px, 4vh, 40px);
}
.media-player-overlay.show { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; }
.media-player-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000;
    transform: translateY(28px) scale(0.96);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}
.media-player-overlay.show .media-player-stage { transform: translateY(0) scale(1); opacity: 1; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.media-player-stage iframe { width: 100%; height: 100%; border: none; display: block; }
.media-player-close {
    position: fixed;
    top: clamp(14px, 2.2vw, 26px);
    right: clamp(14px, 2.2vw, 26px);
    z-index: 5;
    width: clamp(44px, 5vw, 54px);
    height: clamp(44px, 5vw, 54px);
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 5px;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: scale(0.5) rotate(-120deg);
    transition: opacity 0.3s ease 0.05s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, background 0.25s ease;
}
.media-player-overlay.show .media-player-close { opacity: 1; transform: scale(1) rotate(0); transition: opacity 0.3s ease 0.15s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, background 0.25s ease; }
.media-player-close:hover { background: rgba(255, 255, 255, 0.28); }
.media-player-close:active { transform: scale(0.94) rotate(0); }
@media (max-width: 640px) {
    .media-player-overlay { padding: 60px 8px 20px; }
    .media-player-close { top: 12px; right: 12px; width: 42px; height: 42px; font-size: 1.4rem; }
}

/* ART */
.art-section {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}
.art-section.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
.art-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 110% at center, transparent 82%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
    z-index: 1;
}
.art-canvas {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    z-index: 2;
}
.art-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 15;
    pointer-events: none;
    overflow: hidden;
}
.art-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.85;
}

.art-image-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px 0 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.art-image-wrap.art-sliding {
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.55s ease;
}
@media (max-width: 768px) {
    .art-image-wrap.art-sliding { transition: opacity 0.12s ease; }
    .art-image-wrap.art-fading { opacity: 0; }
}

.art-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 20px 50px rgba(0, 0, 0, 0.14), 0 60px 120px -30px rgba(0, 0, 0, 0.3);
}
.art-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.9;
}
.art-state.is-error { color: var(--red); letter-spacing: 0.16em; }
.art-scroll-catcher {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    touch-action: none;
}
.art-info {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 20;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    padding: 6px 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s ease 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
    pointer-events: none;
    user-select: none;
}
.art-info::before { content: '◆ '; color: var(--red); font-size: 0.8em; letter-spacing: 0; }
.art-section.show .art-info { opacity: 1; transform: translateX(0); }
.art-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 64px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    pointer-events: none;
}
.art-side > * { pointer-events: auto; }
.art-nav {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
}
.art-section.show .art-nav { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.45s, visibility 0s linear 0s, color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.art-nav:hover:not([disabled]) { color: var(--red); transform: scale(1.25); }
.art-nav[disabled] { pointer-events: none; opacity: 0.15; }
.art-side-center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.art-close {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}
.art-section.show .art-close { opacity: 1; transform: rotate(0); transition: opacity 0.5s ease 0.3s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, color 0.2s ease; }
.art-close:hover { color: var(--red); transform: rotate(90deg) scale(1.15); }
.art-order { display: flex; flex-direction: column; gap: 6px; align-items: center; opacity: 0; transform: translateX(10px); transition: opacity 0.5s ease 0.55s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
.art-section.show .art-order { opacity: 1; transform: translateX(0); }
.art-order-btn { width: 40px; height: 40px; background: transparent; border: none; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); -webkit-tap-highlight-color: transparent; position: relative; }
.art-order-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.art-order-btn:hover { color: var(--red); transform: scale(1.2); }
.art-order-btn.active { color: var(--red); }
.art-order-btn.active::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--red); margin-top: 34px; }
@media (max-width: 768px) {
    .art-image-wrap { padding: 0 52px 0 0; }
    .art-side { width: 52px; padding: 14px 0; }
    .art-nav, .art-close { width: 36px; height: 36px; font-size: 1.5rem; }
    .art-order-btn { width: 36px; height: 36px; }
    .art-order-btn svg { width: 16px; height: 16px; }
    .art-info { top: 14px; left: 14px; font-size: 0.6rem; letter-spacing: 0.22em; }
}
@media (pointer: coarse) { .art-nav { display: none !important; } }

/* ============================================================
   ARTICLES — список статей
   ============================================================ */
.parents-wrapper { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto; padding: 3rem 5vw 8rem; }
.parents-list { display: flex; flex-direction: column; border-top: 3px solid var(--text); counter-reset: article; }

.parents-card {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr 60px;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    padding: 42px 8px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--paper-line);
    transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    isolation: isolate;
}
.parents-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; }
.parents-card:hover { padding-left: 32px; padding-right: 20px; }
.parents-card:hover::before { width: 8px; }



.parents-body { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.parents-label {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted);
    transition: color 0.3s ease;
}
.parents-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; }
.parents-card:hover .parents-label { color: var(--text); }
.parents-card:hover .parents-label .dot { transform: scale(1.8); }

.parents-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    line-height: 1.08; letter-spacing: -0.02em;
    text-transform: uppercase; color: var(--text);
    overflow-wrap: anywhere;
    transition: color 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.parents-card:hover .parents-title { color: var(--red); transform: translateX(8px); }
.parents-title-line { display: block; height: 2px; width: 0; background: var(--red); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.parents-card:hover .parents-title-line { width: 84px; }

.parents-arrow {
    position: relative; z-index: 1; justify-self: end;
    font-family: var(--font-display); font-size: 1.8rem; color: var(--red);
    opacity: 0; transform: translateX(-16px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.parents-card:hover .parents-arrow { opacity: 1; transform: translateX(0); }

.parents-state {
    padding: 90px 20px; text-align: center;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted); line-height: 2;
    animation: parentsPulse 1.8s ease-in-out infinite;
}
.parents-state.is-error { animation: none; color: var(--red); letter-spacing: 0.14em; }
.parents-state small { display: block; margin-top: 16px; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: none; line-height: 1.7; opacity: 0.7; color: var(--muted); }
@keyframes parentsPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (max-width: 720px) {
    .parents-wrapper { padding: 2rem 4vw 5rem; }
    .parents-card { grid-template-columns: 52px 1fr 32px; gap: 14px; padding: 26px 6px; }
    .parents-card:hover { padding-left: 16px; padding-right: 10px; }
    .parents-card:hover::before { width: 5px; }
    .parents-num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
    .parents-body { gap: 10px; }
    .parents-label { font-size: 0.52rem; letter-spacing: 0.2em; gap: 10px; }
    .parents-label .dot { width: 5px; height: 5px; }
    .parents-title { font-size: clamp(1.15rem, 5.6vw, 1.5rem); line-height: 1.15; }
    .parents-card:hover .parents-title { transform: translateX(4px); }
    .parents-card:hover .parents-title-line { width: 52px; }
    .parents-arrow { font-size: 1.3rem; }
}

/* ============================================================
   READER — обычный вид + пасхалка .reader-alt
   ============================================================ */
.reader {
    position: fixed;
    inset: 0;
    z-index: 400;
    background-color: var(--bg);
    background-image:
        repeating-linear-gradient(135deg,
            rgba(120, 100, 70, 0.012) 0px,
            rgba(120, 100, 70, 0.012) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse 130% 80% at 50% -10%, rgba(255, 253, 246, 0.9), transparent 62%),
        radial-gradient(ellipse 140% 70% at 50% 115%, rgba(214, 202, 180, 0.45), transparent 65%),
        linear-gradient(180deg, #F6F2EA 0%, #F2EEE5 40%, #EFEADD 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s;
}
html[data-theme="dark"] .reader {
    background-color: #050505;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255,255,255,0.006) 0px,
            rgba(255,255,255,0.006) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse 130% 80% at 50% -10%, rgba(30,30,32,0.5), transparent 62%),
        radial-gradient(ellipse 140% 70% at 50% 115%, rgba(15,15,16,0.75), transparent 65%),
        linear-gradient(180deg, #030303 0%, #060606 40%, #020202 100%);
}
.reader.show { opacity: 1; visibility: visible; transition: opacity .55s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; }

.reader-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 5;
    pointer-events: none;
}
.reader-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    transition: width .1s linear;
}

.reader-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.reader-sheet {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(48px, 9vh, 90px) 5vw clamp(80px, 12vh, 160px);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease .1s, transform .7s cubic-bezier(.16,1,.3,1) .1s;
}
.reader.show .reader-sheet { opacity: 1; transform: translateY(0); }

.reader-back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 26px 0;
    cursor: default;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.reader-back-arrow:hover { color: var(--red); transform: translateX(-4px); }

.reader-back-arrow-bottom {
    display: flex;
    margin: 48px 0 0 0;
}

.reader-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.06;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--text);
    max-width: 22ch;
    margin: 0 0 22px;
}

.reader-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 40px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--paper-line);
    position: relative;
    max-width: 80%;
    width: 100%;
}
.reader-meta::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 80px; height: 2px;
    background: var(--red);
}
html[data-theme="dark"] .reader-meta { color: rgba(224,224,224,0.55); }
html[data-theme="dark"] .reader-meta::after { background: var(--red); }

.reader-typewriter {
    background: transparent;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: default;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.reader-typewriter svg { width: 30px; height: 24px; display: block; }
html[data-theme="dark"] .reader-typewriter { color: rgba(224,224,224,0.55); }
html[data-theme="dark"] .reader-typewriter:hover { color: #E0E0E0; }

.reader-content {
    max-width: 68ch;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.05rem, 1.6vw, 1.18rem);
    line-height: 1.78;
    color: var(--text);
    letter-spacing: 0.005em;
    font-weight: 400;
}
.reader-content p { margin: 0 0 1.4em; }
.reader-content p:last-child { margin-bottom: 0; }

.reader-content > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    text-shadow: none;
}

.reader-content h1,
.reader-content h2,
.reader-content h3,
.reader-content h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--text);
    margin: 2em 0 0.6em;
}
.reader-content h2 { font-size: 1.6em; }
.reader-content h3 { font-size: 1.3em; }
.reader-content h4 { font-size: 1.1em; }

.reader-content strong { font-weight: 700; }
.reader-content em { font-style: italic; }

.reader-content a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.reader-content a:hover { text-decoration-thickness: 2px; }

.reader-content ul,
.reader-content ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.reader-content li { margin: 0.4em 0; }
.reader-content li::marker { color: var(--red); }

.reader-content blockquote {
    margin: 1.8em 0;
    padding: 0.3em 0 0.3em 1.5em;
    border-left: 3px solid var(--red);
    font-style: italic;
    color: rgba(10, 10, 10, 0.72);
}
html[data-theme="dark"] .reader-content blockquote { color: rgba(224,224,224,0.75); }

.reader-content code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: rgba(127,127,127,0.12);
    padding: 0.12em 0.42em;
    border-radius: 3px;
}
.reader-content pre {
    font-family: var(--font-mono);
    font-size: 0.82em;
    line-height: 1.55;
    background: rgba(127,127,127,0.1);
    border: 1px solid var(--paper-line);
    border-radius: 6px;
    padding: 1.15em 1.35em;
    overflow-x: auto;
    margin: 1.6em 0;
}
.reader-content hr {
    border: none;
    height: 1px;
    background: var(--paper-line);
    margin: 2.6em 0;
    width: 40%;
}

/* ============================================================
   АЛЬТЕРНАТИВНЫЙ ВИД (.reader-alt) — пасхалка
   ============================================================ */
.reader.reader-alt .reader-back-arrow {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
    transform-origin: left center;
    color: #1a1611;
    margin-bottom: 42px;
    padding: 6px 0;
}
.reader.reader-alt .reader-back-arrow span::before { content: '← '; }
.reader.reader-alt .reader-back-arrow span::after  { content: ' ВЕРНУТЬ ДОКУМЕНТ.'; }
.reader.reader-alt .reader-back-arrow span { font-size: inherit; }
.reader.reader-alt .reader-back-arrow-bottom {
    margin: 54px auto 0 auto;
    text-align: center;
    transform-origin: center center;
}

.reader.reader-alt .reader-sheet {
    max-width: 900px;
    padding: 64px 68px 72px;
    background-color: #EFE2BF;
    background-image:
        radial-gradient(ellipse 130% 55% at 50% 0%, rgba(252, 245, 220, 0.75), transparent 72%),
        radial-gradient(ellipse 130% 55% at 50% 100%, rgba(180, 145, 85, 0.18), transparent 72%),
        radial-gradient(circle 200px at 10% 14%, rgba(160, 118, 55, 0.13), transparent 68%),
        radial-gradient(circle 240px at 92% 28%, rgba(148, 100, 50, 0.11), transparent 72%),
        radial-gradient(circle 180px at 18% 78%, rgba(170, 128, 68, 0.10), transparent 68%),
        radial-gradient(circle 220px at 82% 90%, rgba(140, 98, 48, 0.12), transparent 72%),
        repeating-linear-gradient(88deg,
            rgba(120, 90, 50, 0.022) 0px, rgba(120, 90, 50, 0.022) 1px,
            transparent 1px, transparent 4px),
        repeating-linear-gradient(2deg,
            rgba(120, 90, 50, 0.018) 0px, rgba(120, 90, 50, 0.018) 1px,
            transparent 1px, transparent 5px),
        linear-gradient(180deg, #F3E7C3 0%, #EEDFBC 55%, #E6D4A6 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid rgba(120, 90, 50, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 250, 230, 0.8) inset,
        0 0 0 1px rgba(180, 150, 100, 0.06) inset,
        0 3px 8px rgba(70, 50, 20, 0.08),
        0 22px 60px -22px rgba(70, 50, 20, 0.30),
        0 40px 90px -40px rgba(70, 50, 20, 0.38);
    position: relative;
}
.reader.reader-alt .reader-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 70px 44px at 0% 0%, rgba(120, 90, 50, 0.14), transparent 72%),
        radial-gradient(ellipse 70px 44px at 100% 0%, rgba(120, 90, 50, 0.14), transparent 72%),
        radial-gradient(ellipse 70px 44px at 0% 100%, rgba(120, 90, 50, 0.14), transparent 72%),
        radial-gradient(ellipse 70px 44px at 100% 100%, rgba(120, 90, 50, 0.14), transparent 72%);
    mix-blend-mode: multiply;
}
.reader.reader-alt .reader-sheet > * { position: relative; z-index: 1; }

.reader.reader-alt .reader-title {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-weight: 400;
    font-size: clamp(1.7rem, 4.6vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #1a1611;
    max-width: 26ch;
    margin: 0 0 22px;
}

.reader.reader-alt .reader-meta {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(26, 22, 17, 0.7);
    margin: 0 0 26px 0;
    padding: 0;
    border: none;
    display: block;
}
.reader.reader-alt .reader-meta::after { display: none; }
.reader.reader-alt .reader-typewriter { display: none; }

.reader.reader-alt .reader-content {
    max-width: 100%;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: clamp(1.02rem, 1.45vw, 1.15rem);
    line-height: 1.92;
    color: #1a1611;
}
.reader.reader-alt .reader-content p { margin: 0 0 1.3em; }
.reader.reader-alt .reader-content h1,
.reader.reader-alt .reader-content h2,
.reader.reader-alt .reader-content h3,
.reader.reader-alt .reader-content h4 {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #1a1611;
}
.reader.reader-alt .reader-content a { color: #7A1B10; }
.reader.reader-alt .reader-content li::marker { color: #7A1B10; }
.reader.reader-alt .reader-content blockquote { border-left-color: #7A1B10; color: rgba(26, 22, 17, 0.78); }
.reader.reader-alt .reader-content code { background: rgba(120, 90, 50, 0.14); }
.reader.reader-alt .reader-content pre  { background: rgba(120, 90, 50, 0.10); border-color: rgba(120, 90, 50, 0.25); }

html[data-theme="dark"] .reader.reader-alt .reader-sheet {
    background-color: #C9B98E;
    background-image:
        radial-gradient(ellipse 130% 55% at 50% 0%, rgba(214, 197, 155, 0.55), transparent 72%),
        radial-gradient(ellipse 130% 60% at 50% 100%, rgba(80, 60, 30, 0.35), transparent 72%),
        radial-gradient(circle 200px at 10% 14%, rgba(90, 62, 25, 0.18), transparent 68%),
        radial-gradient(circle 240px at 92% 28%, rgba(80, 55, 20, 0.16), transparent 72%),
        radial-gradient(circle 180px at 18% 78%, rgba(95, 68, 30, 0.15), transparent 68%),
        radial-gradient(circle 220px at 82% 90%, rgba(70, 48, 18, 0.18), transparent 72%),
        repeating-linear-gradient(88deg,
            rgba(60, 40, 15, 0.03) 0px, rgba(60, 40, 15, 0.03) 1px,
            transparent 1px, transparent 4px),
        repeating-linear-gradient(2deg,
            rgba(60, 40, 15, 0.025) 0px, rgba(60, 40, 15, 0.025) 1px,
            transparent 1px, transparent 5px),
        linear-gradient(180deg, #D4C397 0%, #C9B98E 55%, #B8A578 100%);
    border-color: rgba(60, 40, 15, 0.45);
    box-shadow:
        0 1px 0 rgba(240, 225, 190, 0.35) inset,
        0 0 0 1px rgba(0, 0, 0, 0.15) inset,
        0 3px 10px rgba(0, 0, 0, 0.55),
        0 22px 60px -22px rgba(0, 0, 0, 0.85),
        0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
html[data-theme="dark"] .reader.reader-alt .reader-sheet::after {
    background:
        radial-gradient(ellipse 70px 44px at 0% 0%, rgba(50, 32, 12, 0.28), transparent 72%),
        radial-gradient(ellipse 70px 44px at 100% 0%, rgba(50, 32, 12, 0.28), transparent 72%),
        radial-gradient(ellipse 70px 44px at 0% 100%, rgba(50, 32, 12, 0.28), transparent 72%),
        radial-gradient(ellipse 70px 44px at 100% 100%, rgba(50, 32, 12, 0.28), transparent 72%);
}
html[data-theme="dark"] .reader.reader-alt .reader-back-arrow { color: #2A1F0F; }
html[data-theme="dark"] .reader.reader-alt .reader-title { color: #2A1F0F; }
html[data-theme="dark"] .reader.reader-alt .reader-meta  { color: rgba(42, 31, 15, 0.72); }
html[data-theme="dark"] .reader.reader-alt .reader-content { color: #2A1F0F; }
html[data-theme="dark"] .reader.reader-alt .reader-content h1,
html[data-theme="dark"] .reader.reader-alt .reader-content h2,
html[data-theme="dark"] .reader.reader-alt .reader-content h3,
html[data-theme="dark"] .reader.reader-alt .reader-content h4 { color: #2A1F0F; }

@media (max-width: 640px) {
    .reader-sheet { padding: 32px 5vw 100px; }
    .reader-back-arrow { font-size: 1.6rem; margin-bottom: 20px; }
    .reader-back-arrow-bottom { margin-top: 36px; }
    .reader-title { font-size: clamp(1.6rem, 8vw, 2.2rem); max-width: none; line-height: 1.06; }
    .reader-meta { font-size: 0.56rem; margin-bottom: 26px; padding-bottom: 16px; }
    .reader-typewriter svg { width: 26px; height: 20px; }
    .reader-content { font-size: 1.02rem; }

    .reader.reader-alt .reader-sheet { margin: 24px 4vw 60px; padding: 40px 26px 48px; }
    .reader.reader-alt .reader-title { font-size: clamp(1.4rem, 6.4vw, 2rem); }
    .reader.reader-alt .reader-back-arrow { font-size: 1rem; margin-bottom: 28px; }
    .reader.reader-alt .reader-content { font-size: 1rem; line-height: 1.85; }
}

/* READING — кнопки */
.controls {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2.4rem 12vw 1.6rem 5vw;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.6rem 2rem;
}
@media (max-width: 900px) { .controls { padding: 1.6rem 8vw 1rem 5vw; gap: 1rem 1.2rem; } }
@media (max-width: 640px) { .controls { padding: 1.2rem 6vw 0.8rem 5vw; gap: 0.8rem 1rem; } }
.ibtn-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; will-change: transform, opacity; }
.ibtn {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    width: 72px;
    height: 72px;
}
.ibtn svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease, stroke-width 0.25s ease; overflow: visible; }
.ibtn:hover { color: var(--red); transform: scale(1.08); }
.ibtn.active { color: var(--red); }
.ibtn.active svg { stroke-width: 1.9; }
.ibtn:active { transform: scale(0.94); }
.ibtn.underline::after {
    content: '';
    position: absolute;
    left: 14%; right: 14%;
    bottom: -8px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ibtn.underline.active::after { transform: scaleX(1); }
.ibtn-caption { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); transition: color 0.25s ease; text-align: center; }
.ibtn-wrap:hover .ibtn-caption, .ibtn-wrap.active .ibtn-caption { color: var(--red); }
.ctrl-sep { width: 1px; height: 60px; background: var(--paper-line); align-self: center; margin: 0 0.2rem; }
@media (max-width: 900px) { .ibtn { width: 60px; height: 60px; } .ibtn-caption { font-size: 0.52rem; letter-spacing: 0.18em; } }
@media (max-width: 640px) { .ibtn { width: 48px; height: 48px; } .ibtn svg { stroke-width: 1.6; } .ibtn-caption { font-size: 0.48rem; letter-spacing: 0.14em; } .ctrl-sep { height: 40px; } }
/* READING — слоги */
.syllable-grid {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.6rem 5vw 140px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0;
    row-gap: 0.1em;
    font-family: var(--font-display);
    line-height: 0.95;
}
.syllable-item {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: clamp(2.4rem, 7.5vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0.02em 0;
    transition: color 0.2s ease;
}
.syllable-dot {
    position: relative;
    width: 0.14em;
    height: 0.14em;
    margin-right: 0.22em;
    margin-bottom: 0.04em;
    border-radius: 50%;
    background: transparent;
    border: 0.02em solid var(--muted);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    align-self: center;
    cursor: pointer;
}
.syllable-item:hover .syllable-dot { border-color: var(--red); transform: scale(1.6); }
.syllable-item.learned .syllable-dot { background: var(--red); border-color: var(--red); }
.syllable-text { position: relative; display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease; }
.syllable-text::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.01em;
    height: 0.06em;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.syllable-text::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    height: 0.05em; width: 0;
    background: var(--red);
    transform: translateY(-50%);
    transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.syllable-item:hover .syllable-text { color: var(--red); }
.syllable-item:hover .syllable-text::before { transform: scaleX(1); }
.syllable-item.learned { color: var(--muted); }
.syllable-item.learned .syllable-text::after { width: 100%; }
.syllable-item.learned:hover .syllable-text { color: var(--muted); }
.syllable-item.playing .syllable-text { color: var(--red); animation: syllablePulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes syllablePulse {
    0%   { transform: scale(1) translateY(0); }
    35%  { transform: scale(0.92) translateY(0.02em); }
    65%  { transform: scale(1.06) translateY(-0.03em); }
    100% { transform: scale(1) translateY(0); }
}
.syllable-sep {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 7.5vw, 6rem);
    color: var(--paper-line);
    margin: 0 0.14em;
    user-select: none;
    pointer-events: none;
    line-height: 1;
    vertical-align: baseline;
    transform: translateY(-0.05em);
    transition: color 0.25s ease, transform 0.25s ease;
}
.syllable-item:hover + .syllable-sep { color: var(--red); transform: translateY(-0.05em) scale(1.15); }
.syllable-grid.hide-learned .syllable-item.learned { display: none; }
.syllable-grid.hide-learned .syllable-sep { opacity: 0.05; }
@media (max-width: 900px) { .syllable-item, .syllable-sep { font-size: clamp(2rem, 8vw, 3.4rem); } }
@media (max-width: 640px) {
    .syllable-grid { padding: 1rem 5vw 100px; row-gap: 0.05em; }
    .syllable-item { font-size: clamp(1.8rem, 9vw, 2.8rem); }
    .syllable-sep { font-size: clamp(1.8rem, 9vw, 2.8rem); margin: 0 0.1em; }
}

/* READING — прогресс */
.progress-container {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1400;
    padding: 1rem 5vw 1.2rem;
    background: var(--bg);
    border-top: 2px solid var(--red);
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.progress-container.show { transform: translateY(0); }
.progress-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); margin-bottom: 0.6rem; display: flex; justify-content: space-between; gap: 1rem; }
.progress-label span:last-child { color: var(--red); font-weight: 700; }
.progress-bar { width: 100%; height: 4px; background: var(--paper-line); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--red); width: 0%; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* READING — терминал */
.term-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: var(--evm-bg);
    color: var(--evm-text);
    font-family: 'Consolas', 'Lucida Console', 'PT Mono', 'Courier New', monospace;
    cursor: default;
}
.term-overlay.show { display: flex; flex-direction: column; }
.term-overlay * { cursor: default !important; }
.term-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0, 30, 0, 0.22) 2px, rgba(0, 30, 0, 0.22) 3px);
    opacity: 0.5;
    mix-blend-mode: multiply;
    z-index: 10;
}
.term-header { flex-shrink: 0; padding: 14px 24px 10px; border-bottom: 1px dashed var(--evm-dim); font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--evm-dim); display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 12; }
.term-exit { background: transparent; border: none; color: var(--evm-bright); font-family: inherit; font-size: inherit; letter-spacing: 0.08em; padding: 2px 4px; cursor: default !important; white-space: pre; }
.term-exit:hover { color: #FFFFFF; }
.term-body {
    flex: 1;
    min-height: 0;
    padding: 20px 24px 26px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: #2A3A2A var(--evm-bg);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 12;
}
.term-body::-webkit-scrollbar { width: 10px; }
.term-body::-webkit-scrollbar-track { background: var(--evm-bg); }
.term-body::-webkit-scrollbar-thumb { background: #2A3A2A; border: 2px solid var(--evm-bg); border-radius: 4px; }
.term-body .term-line { min-height: 1.55em; white-space: pre-wrap; word-break: break-word; color: var(--evm-text); font-family: inherit; font-size: inherit; text-transform: uppercase; }
.term-line.ascii-clickable { cursor: default !important; color: var(--evm-bright); }

.term-options { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 12px 0 8px; }
.term-opt { background: transparent; border: none; color: var(--evm-bright); font-family: inherit; font-size: inherit; text-transform: uppercase; letter-spacing: 0.08em; cursor: default !important; padding: 2px 0; text-align: left; white-space: nowrap; }
.term-opt:disabled { cursor: default !important; }
.term-opt.correct { color: var(--evm-green, #7FE07F); }
.term-opt.wrong { color: #FF5C5C; text-decoration: line-through; }

.term-actions { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 10px 0 6px; }
.term-action { background: transparent; border: none; color: var(--evm-bright); font-family: inherit; font-size: inherit; text-transform: uppercase; letter-spacing: 0.08em; cursor: default !important; padding: 2px 0; white-space: nowrap; }
.term-action.primary { color: var(--evm-green, #7FE07F); }

.term-dict-answer { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 12px; font-family: inherit; font-size: inherit; letter-spacing: 0.15em; color: var(--evm-bright); }
.term-dict-slot { display: inline-block; min-width: 1.1em; text-align: center; color: var(--evm-bright); font-family: inherit; font-size: inherit; text-transform: uppercase; }
.term-dict-slot.correct { color: var(--evm-green, #7FE07F); }
.term-dict-slot.wrong { color: #FF5C5C; }

.term-keyboard { display: block; margin: 12px 0 10px; font-family: inherit; font-size: inherit; line-height: 1.7; color: var(--evm-text); }
.kb-row { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 4px; }
.kb-key { background: transparent; border: none; color: var(--evm-bright); font-family: inherit; font-size: inherit; text-transform: uppercase; cursor: default !important; padding: 0; letter-spacing: 0.05em; }
.cmd-underline { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: default !important; color: var(--evm-bright); }
@media (max-width: 768px) {
    .term-header { padding: 12px 14px 8px; }
    .term-body { padding: 14px 14px 20px; font-size: 14px; }
    .term-options { gap: 14px 28px; }
    .term-actions { gap: 14px 28px; }
    .kb-row { gap: 0 10px; }
    .term-overlay::after { display: none; }
}

/* ===== QUIZ/DICT ===== */
.qd-overlay{
  position:fixed;inset:0;z-index:9000;
  background:var(--bg);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.qd-overlay.show{opacity:1;visibility:visible;transition:opacity .4s ease, visibility 0s linear 0s;}
.qd-close{
  position:fixed;top:20px;right:24px;z-index:10;
  width:40px;height:40px;border:none;background:transparent;
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0 0 5px;font-family:var(--font-display);
  font-size:1.6rem;font-weight:300;line-height:1;
  opacity:0;transform:rotate(-45deg);
  transition:opacity .3s ease .05s, transform .6s cubic-bezier(.16,1,.3,1) .05s, color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.qd-overlay.show .qd-close{opacity:1;transform:rotate(0);transition:opacity .3s ease .15s, transform .65s cubic-bezier(.16,1,.3,1) .15s, color .25s ease;}
.qd-close:hover{color:var(--red);transform:rotate(90deg) scale(1.15);}
.qd-head{
  flex-shrink:0;
  max-width:1100px;width:100%;margin:0 auto;
  padding:3.4rem 5vw 1.2rem;
}
.qd-label{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;}
.qd-label .dot{width:6px;height:6px;border-radius:50%;background:var(--red);}
.qd-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,5vw,3rem);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:var(--text);margin-top:10px;}
.qd-progress{margin-top:16px;height:4px;background:var(--paper-line);border-radius:4px;overflow:hidden;}
.qd-progress-fill{height:100%;background:var(--red);width:0;transition:width .5s cubic-bezier(.16,1,.3,1);}
.qd-counter{margin-top:10px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;}
.qd-counter b{color:var(--red);}

.qd-body{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:thin;
}
.qd-inner{max-width:1100px;width:100%;margin:0 auto;padding:1rem 5vw 6rem;}

.qd-question{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:-.01em;text-transform:uppercase;color:var(--text);margin-bottom:26px;line-height:1.15;}

.qd-audio{
  display:inline-flex;align-items:center;gap:14px;
  background:transparent;border:none;padding:0;cursor:pointer;
  color:var(--text);font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  position:relative;margin-bottom:26px;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
}
.qd-audio .ico{width:26px;height:26px;display:inline-block;position:relative;}
.qd-audio .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.qd-audio::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.qd-audio:hover{color:var(--red);transform:scale(1.04);}
.qd-audio:hover::after{transform:scaleX(1);}

.qd-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.qd-opt{
  font-family:var(--font-display);
  font-weight:600;font-size:clamp(1.2rem,2.6vw,1.8rem);
  text-transform:uppercase;letter-spacing:.02em;
  background:transparent;border:1px solid var(--paper-line);
  color:var(--text);padding:18px 22px;text-align:left;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.qd-opt:hover{border-color:var(--red);color:var(--red);transform:translateX(6px);}
.qd-opt:disabled{cursor:default;}
.qd-opt.correct{color:#fff;background:var(--red);border-color:var(--red);}
.qd-opt.wrong{border-color:var(--red);color:var(--red);text-decoration:line-through;}
.qd-opt.reveal{border-color:var(--red);color:var(--red);}

.qd-slot-line{
  display:flex;flex-wrap:wrap;gap:16px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5vw,3rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);
  margin:0 0 26px;
}
.qd-slot{position:relative;min-width:1.1em;text-align:center;padding-bottom:6px;}
.qd-slot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--paper-line);}
.qd-slot.filled::after{background:var(--red);}
.qd-slot.correct{color:var(--red);}
.qd-slot.wrong{color:var(--red);}
.qd-slot.wrong::after{background:var(--red);}

.qd-keyboard{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.qd-kb-row{display:flex;flex-wrap:wrap;gap:6px;}
.qd-key{
  font-family:var(--font-display);font-weight:600;font-size:clamp(.9rem,2vw,1.1rem);
  text-transform:uppercase;letter-spacing:.02em;
  background:transparent;border:1px solid var(--paper-line);
  color:var(--text);padding:10px 12px;cursor:pointer;min-width:38px;
  transition:color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.qd-key:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);}
.qd-key.util{min-width:auto;padding:10px 16px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;}

.qd-next-wrap{margin-top:32px;position:relative;min-height:56px;}
.qd-next{
  display:inline-flex;align-items:center;gap:14px;
  background:transparent;border:none;padding:6px 0;cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text);
  -webkit-tap-highlight-color:transparent;
  transition:color .25s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
}
.qd-next .arrow{
  display:inline-block;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.qd-next svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.qd-next:hover{color:var(--red);}
.qd-next:hover .arrow{transform:translateX(6px);}
.qd-next.fly .arrow{transform:translateX(60px);opacity:0;transition:transform .45s cubic-bezier(.4,0,.6,1), opacity .35s ease;}

.qd-result{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3rem);line-height:1.05;text-transform:uppercase;color:var(--text);}
.qd-result b{color:var(--red);}
.qd-result-sub{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.1em;color:var(--muted);margin-top:16px;text-transform:uppercase;}

@media(max-width:640px){
  .qd-close{top:14px;right:14px;width:36px;height:36px;font-size:1.4rem;}
  .qd-head{padding:2.2rem 5vw 1rem;}
  .qd-inner{padding:.6rem 5vw 5rem;}
  .qd-options{grid-template-columns:1fr 1fr;gap:10px;}
  .qd-opt{padding:14px 12px;font-size:1rem;}
  .qd-key{padding:8px 9px;min-width:32px;}
}

/* TOAST */
.toast-container { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3000; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast { background: var(--text); color: var(--bg); padding: 0.85rem 1.6rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }

/* TOOLS */
.page-header.tools-header {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.6rem 3vw 0;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 2rem;
    min-height: 92vh;
}
.page-header.tools-header .page-logo { padding-top: 0.6rem; min-width: 0; }
.page-header.tools-header .page-logo .l1 { font-size: clamp(2.6rem, 7.5vw, 6.4rem); }
.page-header.tools-header .page-logo .l2 { font-size: clamp(1.6rem, 5vw, 4.2rem); }
.page-logo .l1.terminal-word { user-select: none; -webkit-tap-highlight-color: transparent; position: relative; display: inline-block; }
@media (max-width: 1024px) { .page-header.tools-header { grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 820px) {
    .page-header.tools-header { grid-template-columns: 1fr; min-height: auto; padding: 1.8rem 5vw 3rem; gap: 2rem; justify-items: center; }
    .page-header.tools-header .page-logo { padding-top: 0; text-align: left; align-self: stretch; }
}

.clock-digital {
    display: flex;
    align-items: baseline;
    margin-top: 1.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5.6vw, 4rem);
    letter-spacing: 0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    user-select: none;
    line-height: 1;
}
.clock-digital .clock-digital-sep { color: var(--red); margin: 0 0.05em; animation: colonBlink 2s steps(1) infinite; }
@keyframes colonBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.28; } }

.clock-side { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; }
.clock-view-wrap { width: 100%; max-width: 620px; display: flex; justify-content: center; }
.clock-view {
    width: 100%;
    max-width: 620px;
    aspect-ratio: 440 / 520;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    transform: translateZ(0);
}
.watch-container { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.watch-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scheme-view { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--text); }
.scheme-view.active { display: flex; }
.scheme-view svg { width: 100%; height: auto; max-height: 100%; display: block; overflow: visible; }
.watch-container.hidden { display: none; }
@media (max-width: 820px) { .clock-side { align-items: center; } .clock-view-wrap { width: min(560px, 92vw); } .clock-view { max-width: none; } }

.clock-switch {
    position: fixed;
    top: 96px;
    right: 22px;
    width: 62px;
    height: 62px;
    z-index: 499;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    padding: 0;
}
.clock-switch .switch-ring { position: absolute; inset: 6px; border: 1px solid rgba(10, 10, 10, 0.28); border-radius: 50%; transition: border-color 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
html[data-theme="dark"] .clock-switch .switch-ring { border-color: rgba(221,224,229,.3); }
.clock-switch .switch-ring::before {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: top 0.5s ease, transform 0.5s ease;
}
.clock-switch:hover .switch-ring { border-color: var(--red); transform: rotate(180deg); }
.clock-switch .switch-icon { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.clock-switch:hover .switch-icon { transform: rotate(90deg); }
.clock-switch .switch-icon .dial { position: absolute; inset: 0; border: 2px solid var(--text); border-radius: 50%; transition: border-color 0.4s ease; }
.clock-switch:hover .switch-icon .dial { border-color: var(--red); }
.clock-switch .switch-icon .hand-h {
    position: absolute;
    left: 50%; top: 50%;
    width: 2.5px; height: 8px;
    background: var(--text);
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
    border-radius: 1px;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
}
.clock-switch .switch-icon .hand-m {
    position: absolute;
    left: 50%; top: 50%;
    width: 2.5px; height: 12px;
    background: var(--red);
    transform: translate(-50%, -100%) rotate(90deg);
    transform-origin: bottom center;
    border-radius: 1px;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
}
.clock-switch .switch-icon .hand-c {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    background: var(--text);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.4s ease;
}
.clock-switch:hover .switch-icon .hand-h { transform: translate(-50%, -100%) rotate(45deg); background: var(--red); }
.clock-switch:hover .switch-icon .hand-m { transform: translate(-50%, -100%) rotate(180deg); }
.clock-switch:hover .switch-icon .hand-c { background: var(--red); }
.clock-switch.spin .switch-icon .hand-h { animation: handSpinH 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
.clock-switch.spin .switch-icon .hand-m { animation: handSpinM 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes handSpinH { 0% { transform: translate(-50%, -100%) rotate(0); } 100% { transform: translate(-50%, -100%) rotate(360deg); } }
@keyframes handSpinM { 0% { transform: translate(-50%, -100%) rotate(90deg); } 100% { transform: translate(-50%, -100%) rotate(450deg); } }
.clock-switch.spin .switch-ring { animation: switchRingSpin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes switchRingSpin {
    0%   { transform: rotate(0); border-color: rgba(10, 10, 10, 0.28); }
    50%  { border-color: var(--red); }
    100% { transform: rotate(360deg); border-color: rgba(10, 10, 10, 0.28); }
}
.clock-switch.spin .switch-ring::before { animation: switchDotBounce 0.9s ease; }
@keyframes switchDotBounce {
    0%   { top: -1px; }
    50%  { top: calc(100% - 4px); transform: translateX(-50%) scale(1.5); }
    100% { top: -1px; transform: translateX(-50%) scale(1); }
}

.crt-overlay {
    position: fixed;
    inset: 0;
    background: #C7E0C7;
    z-index: 99999;
    transform: scaleY(0);
    transform-origin: center center;
    pointer-events: none;
    box-shadow: 0 0 60px #C7E0C7, 0 0 120px rgba(199, 224, 199, 0.6);
}

/* HEROES */
.heroes-timeline { position: relative; z-index: 10; max-width: 1300px; margin: 0 auto; padding: 3rem 5vw 6rem; }

.century-header {
    background: transparent;
    color: var(--text);
    padding: 0 0 14px;
    margin: 0 0 40px;
    text-align: right;
    border-bottom: 1px solid var(--paper-line);
    position: relative;
}
.century-header::after {
    content: '';
    position: absolute;
    right: 0; bottom: -1px;
    width: 64px; height: 2px; background: var(--red);
}
.century-header:not(:first-child) { margin-top: 90px; }
.century-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--muted);
}

.soviet-band {
    background: var(--red);
    color: #FFFFFF;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2.4vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 16px 0 32px;
}
.soviet-band span { display: none; }

.heroes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-bottom: 26px; }
.hero-item {
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}
.hero-item:hover { transform: translate(-4px, -4px); }
.hero-photo { position: relative; aspect-ratio: 1 / 1; border-bottom: none; overflow: hidden; background: transparent; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); transition: filter 0.35s ease; }
.hero-item:hover .hero-photo img { filter: grayscale(0) contrast(1.15); }
.hero-info {
    padding: 6px 2px 6px 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
}
.hero-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
}
.hero-years {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--muted);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.hero-age { color: var(--red); font-weight: 700; }

.hero-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    padding: 62px 8px 14px;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
.hero-modal-close {
    position: fixed;
    top: 20px; right: 24px;
    width: 40px; height: 40px;
    border: none; background: transparent;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 5px;
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; line-height: 1;
    transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
    z-index: 100; -webkit-tap-highlight-color: transparent;
    border-radius: 0;
}
.hero-modal-close:hover { color: var(--red); transform: rotate(90deg) scale(1.15); }
.hero-modal-repeat {
    position: fixed; top: 20px; left: 24px;
    width: 40px; height: 40px;
    border: none; background: transparent;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    font-family: var(--font-display); font-size: 1.4rem;
    transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
    z-index: 100; border-radius: 0;
}
.hero-modal-repeat:hover { color: var(--red); transform: scale(1.15); }
@media (max-width: 640px) {
    .hero-modal-close { top: 14px; right: 14px; width: 36px; height: 36px; font-size: 1.4rem; }
    .hero-modal-repeat { top: 14px; left: 14px; width: 36px; height: 36px; }
}
.hero-modal-portrait-wrap { flex-shrink: 0; width: 100%; height: 78vh; min-height: 280px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-modal-portrait { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.hero-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-family: var(--font-display);
    font-size: clamp(6rem, 24vw, 16rem);
    font-weight: 700;
    color: var(--text);
    background: rgba(127,127,127,0.08);
    text-transform: uppercase;
    user-select: none;
    letter-spacing: 0.04em;
}
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg);
    border: 2px solid var(--text);
    color: var(--text);
    width: 46px; height: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-family: var(--font-display);
    transition: all 0.15s ease;
    z-index: 20;
    padding: 0;
    line-height: 1;
}
.hero-nav.prev { left: 8px; }
.hero-nav.next { right: 8px; }
.hero-nav:hover { background: var(--text); color: var(--bg); }
.hero-modal-info { text-align: center; padding: 10px 0 4px; flex-shrink: 0; }
.hero-modal-info h3 { font-family: var(--font-display); font-size: clamp(2rem, 6.5vw, 3.4rem); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); line-height: 1; }
.hero-modal-years { font-family: var(--font-mono); font-size: clamp(0.95rem, 2.3vw, 1.15rem); font-weight: 700; letter-spacing: 0.08em; color: var(--red); margin-top: 10px; user-select: none; }
.hero-modal-timeline { flex-shrink: 0; width: 100%; margin-top: 10px; padding-bottom: 24px; }
.htl-panel { border: 2px solid var(--text); background: var(--bg); }
.htl-head { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--text); background: rgba(127,127,127,0.06); }
.htl-head-cell { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.htl-head-cell:last-child { border-left: 2px solid var(--text); text-align: right; align-items: flex-end; }
.htl-head-label { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.htl-head-value { font-family: var(--font-mono); font-size: clamp(0.85rem, 2.2vw, 1.05rem); font-weight: 700; color: var(--text); letter-spacing: 0.05em; }
.htl-head-cell:last-child .htl-head-value { color: var(--red); }
.htl-body { padding: 24px 20px 16px; position: relative; }
.htl { position: relative; width: 100%; height: 310px; }
.htl-axis { position: absolute; left: 0; right: 0; top: 148px; height: 1.5px; background: var(--text); z-index: 1; }
.htl-life { position: absolute; top: 133px; height: 31px; background: var(--red); border: 1.5px solid var(--text); box-sizing: border-box; z-index: 6; }
.htl-life::before, .htl-life::after { content: ''; position: absolute; top: -5px; bottom: -5px; width: 0.5px; background: var(--text); }
.htl-life::before { left: -1px; }
.htl-life::after  { right: -1px; }
.htl-dtick { position: absolute; top: 148px; width: 1px; height: 4px; background: var(--text); transform: translateX(-50%); opacity: 0.22; z-index: 2; }
.htl-htick { position: absolute; top: 148px; width: 1px; height: 9px; background: var(--text); transform: translateX(-50%); opacity: 0.5; z-index: 2; }
.htl-ctick { position: absolute; top: 148px; width: 2px; height: 30px; background: var(--text); transform: translateX(-50%); z-index: 3; }
.htl-war { position: absolute; top: 0; height: 148px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 4; padding: 0 2px; }
.htl-war-label { flex-shrink: 0; text-align: center; margin-bottom: 5px; max-width: 100px; }
.htl-war-year { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--red); letter-spacing: 0.02em; line-height: 1; margin-bottom: 3px; }
.htl-war-name { font-family: var(--font-display); font-size: 0.54rem; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.14; }
.htl-war-tick { flex: 1 1 auto; width: 2px; background: var(--text); opacity: 0.7; min-height: 4px; }
.htl-other { position: absolute; top: 148px; height: 100px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 4; padding: 0 2px; }
.htl-other-tick { flex: 1 1 auto; width: 2px; background: var(--text); opacity: 0.7; min-height: 4px; margin-bottom: 5px; }
.htl-other-label { flex-shrink: 0; text-align: center; max-width: 100px; }
.htl-other-year { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--red); letter-spacing: 0.02em; line-height: 1; margin-bottom: 3px; }
.htl-other-name { font-family: var(--font-display); font-size: 0.54rem; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.14; }
.htl-cnum { position: absolute; top: 262px; transform: translateX(-50%); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text); background: var(--bg); padding: 0 6px; z-index: 7; line-height: 1; }

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .hero-title { line-height: 1.02; padding-bottom: 0.18em; }
    .hero-title .word { overflow: visible; vertical-align: baseline; }
    .hero-title .word-inner { transform: none; }
}
@media (max-width: 768px) {
    .hero-sub {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
        white-space: normal;
        overflow-x: visible;
        padding-bottom: 0;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }
    .hero-sub span { display: inline-flex; align-items: center; }
    .hero-sub span::after { display: none; }
    .hero-sub span:nth-child(odd)  { padding-left: 0; }
    .hero-sub span:nth-child(even) { padding-left: 1.2rem; }
}
@media (max-width: 768px) {
    .controls { padding: 1rem 5vw 0.8rem 5vw; gap: 0.5rem 0.7rem; justify-content: center; }
    .ibtn { width: 26px; height: 26px; }
    .ibtn svg { stroke-width: 1.4; }
    .ibtn-caption { font-size: 0.4rem; letter-spacing: 0.1em; }
    .ibtn.underline::after { bottom: -5px; height: 1.5px; }
    .ctrl-sep { height: 24px; }
    .syllable-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 0.4rem;
        row-gap: 0.3rem;
        padding: 1rem 4vw 90px;
        align-items: baseline;
    }
    .syllable-item { font-size: clamp(1.1rem, 6.5vw, 1.7rem); line-height: 1.05; }
    .syllable-sep { display: none; }
}
@media (max-width: 768px) {
    .heroes-timeline { padding: 2rem 4vw 5rem; }
    .heroes-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .hero-name { font-size: 1rem; }
    .hero-years { font-size: 0.64rem; }
    .century-header { padding: 0 0 10px; margin-bottom: 22px; }
    .century-header:not(:first-child) { margin-top: 52px; }
    .soviet-band { padding: 12px 18px; font-size: 0.92rem; letter-spacing: 0.18em; }
    .hero-item { transition: transform 0.12s ease; }
    .hero-item:hover { transform: none; }
    .hero-item:active { transform: scale(0.97); }
    .hero-item:hover .hero-photo img { filter: grayscale(1) contrast(1.15); }
    .hero-item:active .hero-photo img { filter: grayscale(0) contrast(1.15); }
}

/* ============================================================
   EXIT OVERLAY — «ВЫЙТИ В МЕНЮ?» (для games.html)
   ============================================================ */
.exit-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(5, 5, 10, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: 20px;
}
.exit-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.exit-dialog {
    background: #0a0a12;
    border: 2px solid #7dff8a;
    border-radius: 12px;
    padding: 40px 50px;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(125,255,138,0.2),
        0 0 30px rgba(125,255,138,0.25),
        0 20px 60px rgba(0,0,0,0.9);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    transform: translateY(16px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-overlay.show .exit-dialog {
    transform: translateY(0) scale(1);
}
.exit-dialog-title {
    color: #7dff8a;
    font-size: clamp(12px, 2vw, 16px);
    letter-spacing: 4px;
    margin-bottom: 32px;
    text-shadow: 0 0 8px rgba(125,255,138,0.7);
}
.exit-dialog-buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.exit-btn {
    font-family: inherit;
    font-size: clamp(11px, 1.6vw, 13px);
    letter-spacing: 3px;
    padding: 14px 32px;
    background: transparent;
    color: #7dff8a;
    border: 2px solid #7dff8a;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.exit-btn:hover {
    background: #7dff8a;
    color: #0a0a12;
    box-shadow: 0 0 20px rgba(125,255,138,0.6);
}
.exit-btn:active {
    transform: scale(0.96);
}
.exit-btn-yes:hover {
    background: #ff5a8a;
    border-color: #ff5a8a;
    color: #0a0a12;
    box-shadow: 0 0 20px rgba(255,90,138,0.6);
}
.exit-btn-no:hover {
    background: #7dff8a;
    border-color: #7dff8a;
}
/* ============================================================
   ПОПОЛНЕНИЯ · КИНЕТИЧЕСКАЯ ТИПОГРАФИКА
   ============================================================ */
.updates-section {
    position: relative;
    z-index: 10;
    margin: 6rem 0 4rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease .2s, transform .9s cubic-bezier(.16,1,.3,1) .2s;
}
.updates-section.in {
    opacity: 1;
    transform: translateY(0);
}

.updates-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.4rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--paper-line);
    position: relative;
}
.updates-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px; height: 2px;
    background: var(--red);
}
.updates-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}
.updates-counter {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.updates-kinetic {
    position: relative;
    width: 100%;
    height: clamp(280px, 42vh, 460px);
    overflow: hidden;
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.updates-kinetic canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    .updates-section {
        display: none !important;
    }
}


/* ============================================================
   КАРТОЧКИ-КАДРЫ · обновления (только mobile)
   ============================================================ */
.updates-cards-section {
    position: relative;
    z-index: 10;
    display: none;
    margin: 3rem 0 5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease .2s, transform .8s cubic-bezier(.16,1,.3,1) .2s;
}
.updates-cards-section.in {
    opacity: 1;
    transform: translateY(0);
}

.up-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.up-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 22px;
    background: transparent;
    border: 1px solid var(--paper-line);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.up-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--red);
    transition: width .35s cubic-bezier(.16,1,.3,1);
    z-index: 0;
}
.up-card:active {
    transform: scale(.985);
    border-color: var(--red);
}
.up-card:active::before { width: 5px; }

.up-card-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}
.up-card-num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--paper-line);
}
.up-card-date {
    color: var(--muted);
    letter-spacing: 0.2em;
    font-size: 0.52rem;
}

.up-card-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 5.4vw, 1.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text);
    transition: color .3s ease;
}
.up-card-text {
    position: relative;
    z-index: 1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--muted);
}
.up-card:active .up-card-title { color: var(--red); }

@media (max-width: 768px) {
    .updates-cards-section {
        display: block;
        margin: 3rem 0 5rem;
    }
}

/* ============================================================
   HISTORY — лекции с отметкой «просмотрено»
   ============================================================ */

/* Сетка и обёртка — переиспользуют .media-wrapper / .media-grid,
   но добавляем свой модификатор, чтобы случайно не зацепить кино */
.history-wrapper {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 5vw 8rem;
}

/* Шапка раздела с прогрессом */
.history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.4rem;
    padding-bottom: 1rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--paper-line);
    position: relative;
}
.history-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px; height: 2px;
    background: var(--red);
}
.history-head-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}
.history-head-progress {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}
.history-head-progress b {
    color: var(--red);
    font-weight: 700;
}

/* Полоса прогресса раздела */
.history-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--paper-line);
    margin-bottom: 2.4rem;
    overflow: hidden;
    border-radius: 3px;
}
.history-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Кнопка «Сбросить прогресс» */
.history-reset {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 6px 0;
    margin-bottom: 2rem;
    cursor: pointer;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease;
    position: relative;
}
.history-reset::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.history-reset:hover {
    color: var(--red);
}
.history-reset:hover::after {
    transform: scaleX(1);
}

/* Карточка лекции — своя, не media-card, т.к. нужна галочка */
.history-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.history-card:hover { transform: translateY(-3px); }

.history-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--text);
    overflow: hidden;
    border-radius: 4px;
}
.history-thumb iframe,
.history-thumb .thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    object-fit: cover;
}
.history-thumb iframe { pointer-events: none; }

.history-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.55) 100%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.history-num {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 3;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.35);
    text-shadow: 0 2px 14px rgba(0,0,0,0.5);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.history-card:hover .history-num {
    color: var(--red);
    transform: translateY(-4px) scale(1.08);
}

/* Кнопка-галочка «просмотрено» */
.history-check {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
html[data-theme="dark"] .history-check {
    background: rgba(10, 10, 10, 0.85);
}
.history-check:hover {
    background: var(--red);
    transform: scale(1.12);
}
.history-check svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease, stroke-dashoffset 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="dark"] .history-check svg { stroke: #E0E0E0; }
.history-check:hover svg { stroke: #FFFFFF; }

/* Прорисовка галочки */
.history-check .check-path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.history-card.viewed .history-check {
    background: var(--red);
}
.history-card.viewed .history-check svg { stroke: #FFFFFF; }
.history-card.viewed .history-check .check-path {
    stroke-dashoffset: 0;
}

/* Затемнение превью у просмотренных */
.history-card.viewed .history-thumb::after {
    background: linear-gradient(180deg, rgba(217,4,41,0.12) 0%, rgba(10,10,10,0.7) 100%);
}
.history-card.viewed .history-title {
    opacity: 0.55;
}
.history-card.viewed .history-title::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    height: 2px; width: 100%;
    background: var(--red);
    transform: translateY(-50%);
    pointer-events: none;
}

.history-info {
    position: relative;
    padding: 22px 4px 6px;
    z-index: 2;
}
.history-info-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}
.history-info-top .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.history-card:hover .history-info-top .dot { transform: scale(1.6); }

.history-title {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.history-card:hover .history-title {
    color: var(--red);
    transform: translateX(6px);
}
.history-title-line {
    display: block;
    height: 2px;
    width: 0;
    background: var(--red);
    margin-top: 14px;
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.history-card:hover .history-title-line { width: 64px; }

/* Мобильная адаптация */
@media (max-width: 640px) {
    .history-wrapper { padding: 1.4rem 5vw 5rem; }
    .history-num { font-size: 2.4rem; top: 10px; left: 12px; }
    .history-check { width: 38px; height: 38px; top: 10px; right: 10px; }
    .history-check svg { width: 17px; height: 17px; }
    .history-info { padding: 16px 2px 4px; }
    .history-title { font-size: 1.3rem; }
    .history-info-top { font-size: 0.55rem; margin-bottom: 8px; }
    .history-head { flex-wrap: wrap; gap: 0.6rem; }
    .history-head-label { font-size: 1.3rem; }
    .history-head-progress { font-size: 0.6rem; letter-spacing: 0.18em; }
}

/* ============================================================
   READING · СЛОГИ · СТОЛКНОВЕНИЕ
   Активируется классом .collision-mode на #syllableGrid.
   Никак не влияет на другие страницы.
   ============================================================ */

.syllable-grid.collision-mode {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;               /* ключевое — режем всё, что вылезает */
    align-items: stretch;
    row-gap: 0;
    box-sizing: border-box;
}

.syl-row {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1.05;
    min-height: clamp(78px, 11.5vw, 168px);
    position: relative;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;               /* ключевое — ряд больше не распирает страницу */
    box-sizing: border-box;
    will-change: transform;
   padding-bottom: 0.12em; 
}

/* Слово-слог внутри ряда */
.syl-w {
    position: relative;
    display: inline-flex;
    align-items: baseline;             /* было center — из-за этого глиф центрировался и резался снизу */
    gap: 0.12em;
    flex-shrink: 0;
    padding: 0.1em 0.14em 0.18em;      /* запас сверху и снизу */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3.2rem, 9.5vw, 8rem);
    letter-spacing: -0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    overflow: visible;
}
.syl-w:hover { color: var(--red); transform: translateY(-4px); }

/* Маленькая точка-переключатель «изучено» */
.syl-dot {
    width: 0.085em;
    height: 0.085em;
    min-width: 11px;
    min-height: 11px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--muted);
    flex-shrink: 0;
    align-self: center;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}
.syl-w:hover .syl-dot {
    border-color: var(--red);
    transform: scale(1.55);
}
.syl-w.learned .syl-dot {
    background: var(--red);
    border-color: var(--red);
}

/* Текст слога */
.syl-txt {
    display: inline-block;
    transition: color 0.15s ease;
}

/* --- Стилевые вариации (назначаются JS) --- */
.syl-w.outline .syl-txt {
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
}
.syl-w.outline:hover .syl-txt {
    -webkit-text-stroke-color: var(--red);
    color: transparent;
}

.syl-w.fill .syl-txt {
    background: var(--text);
    color: var(--bg);
    padding: 0 0.1em;
    transition: background 0.15s ease, color 0.15s ease;
}
.syl-w.fill:hover .syl-txt {
    background: var(--red);
    color: #fff;
}

.syl-w.italic .syl-txt {
    font-style: italic;
    font-weight: 200;
    letter-spacing: -0.02em;
}

.syl-w.lean .syl-txt {
    font-weight: 500;
    letter-spacing: -0.03em;
}

/* --- Изученное состояние --- */
.syl-w.learned { color: var(--muted); }
.syl-w.learned .syl-txt {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--red);
}
.syl-w.learned.outline .syl-txt { -webkit-text-stroke-color: var(--muted); }
.syl-w.learned.fill .syl-txt { background: var(--muted); color: var(--bg); }

/* --- Проигрывание звука --- */
.syl-w.playing .syl-txt {
    color: var(--red);
    animation: sylPulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sylPulse {
    0%   { transform: scale(1)     translateY(0); }
    35%  { transform: scale(0.94)  translateY(0.02em); }
    65%  { transform: scale(1.06)  translateY(-0.03em); }
    100% { transform: scale(1)     translateY(0); }
}

/* --- Скрытие изученных --- */
.syllable-grid.collision-mode.hide-learned .syl-w.learned { display: none; }

/* --- Случайный режим: чуть меньший кегль, чтобы влезало --- */
.syllable-grid.collision-mode.is-random .syl-w {
    font-size: clamp(3.6rem, 10vw, 9rem);
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .syllable-grid.collision-mode {
        padding: 0;
    }
    .syl-row {
        height: 54px;
    }
    .syl-row:nth-child(4n+1),
    .syl-row:nth-child(4n+2),
    .syl-row:nth-child(4n+3),
    .syl-row:nth-child(4n+4) { transform: none; }

    .syl-w {
        font-size: 3.4rem;
        padding: 0 5px;
        gap: 0.08em;
    }
    .syl-dot {
        min-width: 7px;
        min-height: 7px;
        border-width: 1.5px;
    }
    .syllable-grid.collision-mode.is-random .syl-w {
        font-size: 2.6rem;
    }
}