* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: var(--theme-page-background);
            background-size: 400% 400%;
            animation: gradientShift 20s ease infinite;
            color: var(--theme-accent);
            font-family: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            line-height: 1.8;
            overflow-x: hidden; /* Скрываем горизонтальный скролл при глитчах */
            transition: padding 0.3s ease, gap 0.3s ease, background 1.2s ease;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .terminal {
            max-width: 700px;
            width: 100%;
            background: var(--theme-terminal-background);
            border: 1px solid var(--theme-terminal-border);
            border-radius: 6px;
            box-shadow: var(--theme-terminal-shadow);
            overflow: hidden;
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease, box-shadow 0.3s ease, flex-basis 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
            position: relative;
            animation: terminalBoot 0.7s ease-out both;
        }

        @keyframes terminalBoot {
            from { opacity: 0; transform: translateY(12px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .terminal:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 48px rgba(74, 246, 38, 0.15), 0 0 80px rgba(0, 78, 146, 0.3);
        }

        body[class*="time-"] .terminal:hover {
            box-shadow: 0 12px 48px rgba(var(--time-accent), 0.14), 0 0 80px rgba(var(--time-accent), 0.12);
        }

        body.achievements-open {
            align-items: stretch;
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: 0;
            height: 100vh;
            padding: 0;
            overflow: hidden;
        }

        body.achievements-open .terminal {
            flex: 0 0 min(42vw, 560px);
            max-width: none;
            height: 100vh;
            max-height: none;
            border-radius: 0;
            border-left: none;
            border-top: none;
            border-bottom: none;
            overflow: auto;
            border-right-color: rgba(var(--time-accent, 74, 246, 38), 0.34);
        }

        body.achievements-open .terminal:hover {
            transform: none;
        }

        .terminal-header {
            background: var(--theme-header-background);
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid rgba(74, 246, 38, 0.2);
        }

        .terminal-button {
            width: 12px;
            height: 12px;
            flex: 0 0 12px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background-color: #555;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .terminal-button:hover { transform: scale(1.2); }
        .terminal-button:nth-child(1) { background-color: #ff5f56; }
        .terminal-button:hover:nth-child(1) { box-shadow: 0 0 10px #ff5f56; }
        .terminal-button:nth-child(2) { background-color: #ffbd2e; }
        .terminal-button:hover:nth-child(2) { box-shadow: 0 0 10px #ffbd2e; }
        .terminal-button:nth-child(3) { background-color: #27c93f; }
        .terminal-button:hover:nth-child(3) { box-shadow: 0 0 10px #27c93f; }

        @keyframes terminalDissolve {
            0%, 4% {
                opacity: 1;
                transform: translateY(0);
                -webkit-mask-position: 0 100%;
                mask-position: 0 100%;
            }
            20% {
                -webkit-mask-position: 0 82%;
                mask-position: 0 82%;
            }
            40% {
                -webkit-mask-position: 0 63%;
                mask-position: 0 63%;
            }
            60% {
                -webkit-mask-position: 0 44%;
                mask-position: 0 44%;
            }
            74% {
                opacity: 1;
                -webkit-mask-position: 0 32%;
                mask-position: 0 32%;
            }
            86% {
                opacity: 0.94;
                -webkit-mask-position: 0 25%;
                mask-position: 0 25%;
            }
            100% {
                opacity: 0;
                transform: translateY(4px);
                -webkit-mask-position: 0 0;
                mask-position: 0 0;
            }
        }

        @keyframes terminalNoFall {
            0% {
                opacity: 0;
                transform: translate(-50%, 0) scale(0.7) rotate(0);
            }
            18% {
                opacity: 1;
                transform: translate(-50%, -42px) scale(1.08) rotate(0);
            }
            32% {
                transform: translate(-50%, -48px) scale(1) rotate(0);
            }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--no-drift)), var(--no-fall-distance)) scale(0.9) rotate(var(--no-rotation));
            }
        }

        @keyframes terminalReopen {
            0% { opacity: 0; transform: translateY(20px) scale(0.84); filter: blur(5px); }
            65% { opacity: 1; transform: translateY(-3px) scale(1.01); filter: blur(0); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        @keyframes terminalRestored {
            0% { box-shadow: 0 0 0 rgba(117, 251, 255, 0); }
            35% { box-shadow: 0 0 42px rgba(117, 251, 255, 0.24); }
            100% { box-shadow: 0 8px 32px rgba(var(--time-accent), 0.1); }
        }

        @keyframes closeMessageAppear {
            from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); letter-spacing: 0.18em; }
            to { opacity: 1; transform: translate(-50%, -50%); letter-spacing: 0.04em; }
        }

        .terminal.terminal-dissolving {
            pointer-events: none;
            transform-origin: center;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 260%;
            mask-size: 100% 260%;
            will-change: mask-position, opacity, transform;
            animation: terminalDissolve 2.3s linear both;
        }

        .terminal.terminal-dissolving-reduced {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.16s ease;
        }

        .terminal-dissolve-canvas {
            position: fixed;
            z-index: 999;
            pointer-events: none;
        }

        .terminal.terminal-closed {
            visibility: hidden;
        }

        .terminal.terminal-reopening {
            pointer-events: none;
            animation: terminalReopen 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        .terminal.terminal-restored {
            animation: terminalRestored 0.65s ease-out both;
        }

        .terminal.terminal-sequence-complete {
            animation: none;
        }

        .terminal-close-message {
            position: fixed;
            z-index: 1000;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 40px);
            box-sizing: border-box;
            color: var(--theme-secondary);
            font-size: clamp(1rem, 2.2vw, 1.35rem);
            text-align: center;
            white-space: normal;
            text-shadow: 0 0 14px rgba(var(--time-accent), 0.42);
            animation: closeMessageAppear 0.38s ease-out both;
        }

        .terminal-close-message-leaving {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .terminal-no {
            position: fixed;
            z-index: 1001;
            pointer-events: none;
            color: var(--theme-secondary);
            font-size: clamp(0.9rem, 2vw, 1.2rem);
            font-weight: 700;
            text-shadow: 0 0 12px rgba(255, 95, 86, 0.7);
            will-change: transform, opacity;
            animation: terminalNoFall 1.15s cubic-bezier(0.2, 0.7, 0.35, 1) forwards;
        }

        .terminal-content-paused {
            display: none !important;
        }

        .terminal-recovery {
            min-height: 130px;
            display: flex;
            align-items: flex-start;
            transition: opacity 0.2s ease;
        }

        .terminal-recovery-prompt {
            width: 100%;
            margin: 0;
        }

        .terminal-recovery-done {
            opacity: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            .terminal.terminal-reopening,
            .terminal.terminal-restored,
            .terminal-close-message {
                animation-duration: 0.01ms;
            }
        }

        .terminal-body {
            padding: 30px;
        }

        .prompt { color: #4AF626; margin-bottom: 8px; }
        .prompt-user { color: #5fd7ff; }
        .prompt-symbol { color: #fff; }
        .prompt-path { color: #5fd7ff; }
        .is-hidden { display: none !important; }
        .clipboard-fallback { position: fixed; opacity: 0; pointer-events: none; }

        .system-info {
            color: #888;
            font-size: 0.85em;
            margin-bottom: 20px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(74, 246, 38, 0.1);
            transition: all 0.3s ease;
            cursor: default;
        }
        .system-info:hover { color: #aaa; border-bottom-color: rgba(74, 246, 38, 0.3); }

        .greeting { color: #5fd7ff; }

        h1 {
            font-size: 1.3em;
            margin-bottom: 30px;
            color: #fff;
            font-weight: normal;
            transition: letter-spacing 0.3s ease, color 0.3s ease;
            cursor: default;
            user-select: none; /* Чтобы не выделялось при тапах */
        }
        h1:hover { letter-spacing: 3px; color: #4AF626; }

        /* --- СТИЛИ ДЛЯ ЦИТАТЫ --- */
        .quote-container {
            margin-bottom: 25px;
            padding-left: 15px;
            border-left: 2px solid #333;
            transition: all 0.3s ease, opacity 0.2s ease, transform 0.2s ease;
            cursor: help; 
            position: relative;
        }

        .quote-container.quote-changing {
            opacity: 0.35;
            transform: translateX(6px);
        }

        .quote-container:hover {
            border-left-color: #4AF626;
            padding-left: 20px;
        }

        .quote-text {
            color: #888;
            font-style: italic;
            transition: color 0.3s ease;
        }

        .quote-container:hover .quote-text {
            color: #fff;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        }

        .quote-meta {
            margin-top: 8px;
            font-size: 0.8em;
            opacity: 0;
            transform: translateY(-5px);
            transition: all 0.4s ease;
            display: block;
        }

        .quote-container:hover .quote-meta {
            opacity: 1;
            transform: translateY(0);
        }

        .meta-rarity {
            font-weight: bold;
            margin-right: 8px;
            padding: 2px 6px;
            border-radius: 2px;
            background: rgba(0,0,0,0.3);
            display: inline-block;
        }

        /* Цвета редкости */
        .rarity-common { color: #a0a0a0; border: 1px solid #555; }
        
        .rarity-rare { 
            color: #bd93f9; 
            border: 1px solid #bd93f9; 
            text-shadow: 0 0 5px rgba(189, 147, 249, 0.4); 
        }
        
        .rarity-legendary { 
            color: #ffd700; 
            border: 1px solid #ffd700; 
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); 
        }

        /* SECRET — перехваченный сигнал */
        @keyframes secretSignal {
            0%, 86%, 100% { transform: translate(0); filter: none; }
            88% { transform: translate(-1px, 1px); filter: brightness(1.7); }
            90% { transform: translate(2px, -1px); }
            92% { transform: translate(-1px, 0); filter: brightness(1.2); }
        }

        @keyframes secretShimmer {
            0% { background-position: 200% 50%; }
            100% { background-position: -200% 50%; }
        }

        @keyframes secretAura {
            0%, 100% {
                border-color: #4fd9e0;
                box-shadow: inset 0 0 8px rgba(79, 217, 224, 0.08), 0 0 5px rgba(79, 217, 224, 0.18);
            }
            50% {
                border-color: #cf79ff;
                box-shadow: inset 0 0 10px rgba(207, 121, 255, 0.12), 0 0 10px rgba(207, 121, 255, 0.32);
            }
        }

        @keyframes secretSweep {
            0%, 18% { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
            28% { opacity: 0.28; }
            56% { transform: translateX(330%) skewX(-14deg); opacity: 0; }
            100% { transform: translateX(330%) skewX(-14deg); opacity: 0; }
        }

        @keyframes secretBorderPulse {
            0% { border-left-color: #fff; box-shadow: -8px 0 22px rgba(117, 251, 255, 0.65); }
            35% { border-left-color: #75fbff; }
            100% { border-left-color: #304d52; box-shadow: none; }
        }

        .quote-container.quote-secret {
            overflow: hidden;
            border-left-color: #304d52;
            background: linear-gradient(90deg, rgba(117, 251, 255, 0.07), transparent 72%);
            animation: secretBorderPulse 1.4s ease-out both;
        }

        .quote-container.quote-secret::after {
            content: '';
            position: absolute;
            z-index: 0;
            top: -30%;
            bottom: -30%;
            left: 0;
            width: 38%;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(116, 234, 255, 0.32), rgba(207, 121, 255, 0.2), transparent);
            filter: blur(14px);
            mix-blend-mode: screen;
            animation: secretSweep 6.5s ease-in-out infinite;
        }

        .quote-container.quote-secret > * {
            position: relative;
            z-index: 1;
        }

        .rarity-secret {
            color: #b9ffff;
            font-weight: 900;
            letter-spacing: 0.08em;
            border: 1px solid #4ea8ad;
            background: rgba(3, 18, 20, 0.78);
            text-shadow: 0 0 8px rgba(117, 251, 255, 0.7);
            box-shadow: inset 0 0 8px rgba(117, 251, 255, 0.09);
            animation: secretAura 3.8s ease-in-out infinite;
        }

        .secret-text-effect,
        .quote-container:hover .secret-text-effect {
            color: transparent;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(110deg, #63f5ff 0%, #d8ffff 18%, #bc83ff 38%, #ff77b7 52%, #ffd6ed 62%, #74eaff 82%, #63f5ff 100%);
            background-size: 240% 100%;
            background-clip: text;
            -webkit-background-clip: text;
            filter: drop-shadow(0 0 5px rgba(102, 239, 255, 0.35));
            animation: secretShimmer 4.5s linear infinite, secretSignal 5.2s steps(1, end) infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .quote-container.quote-secret,
            .quote-container.quote-secret::after,
            .rarity-secret,
            .secret-text-effect,
            .quote-container:hover .secret-text-effect {
                animation: none;
            }
        }

        .meta-source {
            color: #4AF626;
        }

        .quote-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: -10px 0 25px;
        }

        .quote-action {
            background: rgba(74, 246, 38, 0.04);
            border: 1px solid rgba(74, 246, 38, 0.45);
            color: #4AF626;
            padding: 7px 12px;
            font-family: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
            font-size: 0.78em;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .quote-action:hover {
            color: #5fd7ff;
            border-color: #5fd7ff;
            background: rgba(95, 215, 255, 0.08);
            transform: translateY(-1px);
        }

        .quote-action:active {
            transform: translateY(0) scale(0.98);
        }
        /* ------------------------ */

        .content { margin-top: 25px; }
        .section-title { color: #5fd7ff; margin-bottom: 15px; font-size: 0.95em; }

        .links { list-style: none; margin-bottom: 30px; }
        .links li { margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .links li::before { content: "→"; color: #4AF626; margin-right: 8px; }
        .links a { color: #4AF626; text-decoration: none; word-break: break-all; transition: all 0.3s ease; position: relative; }
        .links a:hover { color: #5fd7ff; text-shadow: 0 0 10px rgba(95, 215, 255, 0.5); letter-spacing: 1px; }
        .links a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: #5fd7ff; transition: width 0.3s ease; }
        .links a:hover::after { width: 100%; }

        .comment { color: #666; font-size: 0.9em; }

        .more-button {
            display: inline-block;
            box-sizing: border-box;
            background: transparent;
            border: 1px solid #4AF626;
            color: #4AF626;
            padding: 10px 20px;
            font-family: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
            font-size: 0.9em;
            line-height: 1;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 25px 0;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            appearance: none;
        }

        .main-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            margin: 25px 0;
        }

        .main-actions .more-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            padding: 0 20px;
            margin: 0;
        }

        .more-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(74, 246, 38, 0.1); transition: left 0.3s ease; }
        .more-button:hover::before { left: 0; }
        .more-button:hover { color: #5fd7ff; border-color: #5fd7ff; box-shadow: 0 0 15px rgba(74, 246, 38, 0.3); transform: translateX(5px); }
        .more-button:active { transform: translateX(5px) scale(0.98); }

        .doom-button {
            border-color: #ff5f56;
            color: #ff5f56;
        }

        .doom-button::before {
            background: rgba(255, 95, 86, 0.08);
        }

        .doom-button:hover {
            color: #ff8a80;
            border-color: #ff8a80;
            box-shadow: 0 0 12px rgba(255, 95, 86, 0.22);
        }

        .about-content { color: #888; line-height: 1.8; }
        .about-content p { margin-bottom: 15px; }
        .about-output, .command-line-spaced { margin-top: 20px; }
        .section-title-spaced { margin-top: 20px; }

        .tech-list { list-style: none; margin-top: 15px; }
        .tech-list li { margin: 8px 0; color: #666; transition: all 0.3s ease; cursor: default; }
        .tech-list li::before { content: "[+]"; color: #4AF626; margin-right: 10px; }
        .tech-list li:hover { color: #aaa; padding-left: 10px; }

        .about-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .mini-button {
            background: rgba(74, 246, 38, 0.04);
            border: 1px solid rgba(74, 246, 38, 0.45);
            color: #4AF626;
            padding: 8px 13px;
            font-family: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
            font-size: 0.82em;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .mini-button:hover {
            color: #5fd7ff;
            border-color: #5fd7ff;
            background: rgba(95, 215, 255, 0.08);
            transform: translateY(-1px);
        }

        /* Суточная палитра основных интерактивных элементов */
        body[class*="time-"] {
            color: var(--theme-accent);
        }

        body[class*="time-"] .prompt,
        body[class*="time-"] .meta-source,
        body[class*="time-"] .links li::before,
        body[class*="time-"] .links a,
        body[class*="time-"] .tech-list li::before,
        body[class*="time-"] .typing-command {
            color: var(--theme-accent);
        }

        body[class*="time-"] .prompt-user,
        body[class*="time-"] .prompt-path,
        body[class*="time-"] .section-title,
        body[class*="time-"] .greeting {
            color: var(--theme-secondary);
        }

        body[class*="time-"] h1:hover,
        body[class*="time-"] .quote-container:hover .quote-text {
            color: var(--theme-accent);
        }

        body[class*="time-"] .quote-container:hover {
            border-left-color: var(--theme-accent);
        }

        body[class*="time-"] .quote-container.quote-secret:hover {
            border-left-color: #75fbff;
        }

        body[class*="time-"] .quote-container.quote-secret:hover .secret-text-effect {
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        body[class*="time-"] .quote-action,
        body[class*="time-"] .more-button:not(.doom-button),
        body[class*="time-"] .mini-button {
            color: var(--theme-accent);
            border-color: rgba(var(--time-accent), 0.52);
            background: rgba(var(--time-accent), 0.045);
        }

        body[class*="time-"] .quote-action:hover,
        body[class*="time-"] .more-button:not(.doom-button):hover,
        body[class*="time-"] .mini-button:hover,
        body[class*="time-"] .links a:hover {
            color: var(--theme-secondary);
            border-color: var(--theme-secondary);
            text-shadow: 0 0 10px rgba(var(--time-accent), 0.35);
        }

        body[class*="time-"] .links a::after {
            background-color: var(--theme-secondary);
        }

        body[class*="time-"] .links a:link,
        body[class*="time-"] .links a:visited {
            color: var(--theme-accent);
        }

        body[class*="time-"] .links a:hover,
        body[class*="time-"] .links a:focus-visible {
            color: var(--theme-secondary);
        }

        body[class*="time-"] .more-button:not(.doom-button)::before {
            background: rgba(var(--time-accent), 0.1);
        }

        body[class*="time-"] .cursor {
            background-color: var(--theme-accent);
            box-shadow: 0 0 8px rgba(var(--time-accent), 0.35);
        }

        body[class*="time-"] .terminal-header {
            border-bottom-color: rgba(var(--time-accent), 0.22);
        }

        body[class*="time-"] .system-info {
            border-bottom-color: rgba(var(--time-accent), 0.12);
        }

        body[class*="time-"] .system-info:hover {
            border-bottom-color: rgba(var(--time-accent), 0.34);
        }