:root {
    color-scheme: dark;
    --bg: #0b0d10;
    --bg-elevated: #12161b;
    --bg-soft: #171c22;
    --bg-code: #0f1318;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #f4f6f8;
    --text-muted: #a8b1ba;
    --text-soft: #88929c;
    --accent: #ff7a26;
    --accent-soft: rgba(255, 122, 38, 0.14);
    --accent-line: rgba(255, 122, 38, 0.4);
    --tui-grid: rgba(255, 255, 255, 0.03);
    --tui-scanline: rgba(255, 255, 255, 0.06);
    --tui-cursor: rgba(0, 255, 204, 0.78);
    --scanline-meta: rgba(255, 255, 255, 0.12);
    --result-ink: rgba(255, 255, 255, 0.1);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --page-width: 1240px;
    --ease-fluid: cubic-bezier(.22, 1, .36, 1);
    --ease-terminal: cubic-bezier(.16, 1, .3, 1);
    --motion-fast: 180ms;
    --motion-mid: 320ms;
    --motion-slow: 620ms;
}

@font-face {
    font-family: "ProggySquare";
    src: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/fonts/ProggySquare.ttf") format("truetype");
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 22%),
        radial-gradient(circle at top, rgba(255, 122, 38, 0.045), transparent 34%);
    background-size: 32px 32px, 32px 32px, auto, auto;
    font-family: "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardPop {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rackFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chipRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroDeviceFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-10px, -12px, 0);
    }
}

@keyframes heroScreenFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }

    50% {
        transform: translate3d(0, -10px, 0) rotate(-1.6deg);
    }
}

@keyframes marqueeTravel {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes ambientShift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translate3d(-10px, -8px, 0) scale(1.04);
        opacity: 0.34;
    }
}

@keyframes flashTarget {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 122, 38, 0.4);
        border-color: rgba(255, 122, 38, 0.2);
    }

    100% {
        box-shadow: 0 0 0 22px rgba(255, 122, 38, 0);
        border-color: var(--line);
    }
}

@keyframes scanlinePulse {
    0% {
        opacity: 0.12;
        background-position: 0 0, 0 0;
    }

    50% {
        opacity: 0.22;
        background-position: 0 8px, 0 8px;
    }

    100% {
        opacity: 0.12;
        background-position: 0 16px, 0 16px;
    }
}

@keyframes cursorPulse {
    0%,
    100% {
        opacity: 0.15;
        transform: scaleX(1);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }
}

@keyframes resultPulse {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 transparent;
        border-color: rgba(255, 255, 255, 0.08);
    }

    50% {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
        border-color: rgba(255, 255, 255, 0.18);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 transparent;
        border-color: rgba(255, 255, 255, 0.08);
    }
}

@keyframes gridDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 22px, 22px 0;
    }
}

@keyframes signalSweep {
    0% {
        transform: translateX(-130%);
        opacity: 0;
    }

    18% {
        opacity: 0.88;
    }

    100% {
        transform: translateX(260%);
        opacity: 0;
    }
}

@keyframes statusBlink {
    0%,
    78%,
    100% {
        opacity: 0.24;
        box-shadow: 0 0 0 0 rgba(93, 255, 219, 0);
    }

    82% {
        opacity: 0.88;
        box-shadow: 0 0 0 4px rgba(93, 255, 219, 0.08);
    }

    86% {
        opacity: 0.42;
    }

    90% {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(93, 255, 219, 0.04);
    }
}

@keyframes terminalMeterPulse {
    0%,
    100% {
        transform: scaleY(0.32);
        opacity: 0.28;
    }

    50% {
        transform: scaleY(1);
        opacity: 0.88;
    }
}

@keyframes cornerBlink {
    0%,
    100% {
        opacity: 0.22;
    }

    50% {
        opacity: 0.84;
    }
}

@keyframes railSweep {
    0% {
        transform: translateY(-130%);
        opacity: 0;
    }

    20% {
        opacity: 0.92;
    }

    100% {
        transform: translateY(280%);
        opacity: 0;
    }
}

@keyframes headingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(93, 255, 219, 0.22);
    }

    100% {
        box-shadow: 0 0 0 18px rgba(93, 255, 219, 0);
    }
}

@keyframes radarRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes radarPing {
    0%,
    100% {
        transform: scale(0.7);
        opacity: 0.24;
    }

    50% {
        transform: scale(1);
        opacity: 0.96;
    }
}

@keyframes signalBarBounce {
    0%,
    100% {
        transform: scaleY(0.34);
        opacity: 0.32;
    }

    50% {
        transform: scaleY(1);
        opacity: 0.96;
    }
}

@keyframes railBarPulse {
    0%,
    100% {
        transform: scaleY(0.28);
        opacity: 0.26;
    }

    50% {
        transform: scaleY(1);
        opacity: 0.94;
    }
}

@keyframes heroScan {
    0% {
        transform: translateY(-155%);
        opacity: 0;
    }

    12% {
        opacity: 0.24;
    }

    55% {
        opacity: 0.12;
    }

    100% {
        transform: translateY(290%);
        opacity: 0;
    }
}

@keyframes scanlineShift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 16px, 0);
    }
}

@keyframes topbarSweep {
    0%,
    62% {
        transform: translateX(-130%);
        opacity: 0;
    }

    68% {
        opacity: 0.2;
    }

    100% {
        transform: translateX(230%);
        opacity: 0;
    }
}

@keyframes searchGridShift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 14px, 14px 0;
    }
}

@keyframes terminalSweepIdle {
    0%,
    72% {
        transform: translateX(-130%);
        opacity: 0;
    }

    78% {
        opacity: 0.18;
    }

    100% {
        transform: translateX(240%);
        opacity: 0;
    }
}

@keyframes dataLinePulse {
    0%,
    100% {
        transform: scaleX(0.18);
        opacity: 0.18;
    }

    50% {
        transform: scaleX(0.88);
        opacity: 0.58;
    }
}

@keyframes telemetryBeat {
    0%,
    100% {
        opacity: 0.2;
        transform: scaleX(0.38);
    }

    45% {
        opacity: 0.96;
        transform: scaleX(1);
    }
}

@keyframes terminalRowIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes terminalPanelFlash {
    0%,
    100% {
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    50% {
        border-color: rgba(255, 122, 38, 0.24);
        box-shadow: inset 0 0 0 1px rgba(255, 122, 38, 0.08);
    }
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-shell,
.reader-shell,
.guide-shell,
.fallback-shell {
    position: relative;
    z-index: 1;
    width: min(var(--page-width), calc(100vw - 32px));
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 50;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--accent-line);
    background: rgba(11, 13, 16, 0.96);
    color: var(--text);
    transform: translateY(-140%);
    transition: transform 0.2s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.pixel-motion-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pixel-motion-host > :not(.pixel-motion-layer) {
    position: relative;
    z-index: 1;
}

.pixel-motion-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.96;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
    background-size: 10px 10px;
    animation: gridDrift 22s linear infinite;
    transform: translateZ(0);
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

.pixel-motion-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%, transparent 72%, rgba(255, 122, 38, 0.03));
    opacity: 0.55;
}

.pixel-motion-layer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    opacity: 0.14;
    animation: heroScan 18s linear infinite;
}

.pixel-motion-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    filter: saturate(1.18) contrast(1.06);
}

[data-pixel-motion="guide"] .pixel-motion-layer,
[data-pixel-motion="doc"] .pixel-motion-layer {
    background-size: 12px 12px;
}

[data-pixel-motion="hero"] .pixel-motion-layer {
    background-size: 10px 10px;
    opacity: 0.46;
    animation: gridDrift 48s linear infinite;
    mix-blend-mode: screen;
}

[data-pixel-motion="hero"] .pixel-motion-layer::after {
    opacity: 0.08;
    animation: heroScan 22s linear infinite;
}

[data-pixel-motion="hero"] .pixel-motion-layer canvas {
    opacity: 0.62;
    filter: saturate(1.08) contrast(1.04);
}

[data-pixel-motion="reader"] .pixel-motion-layer {
    background-size: 8px 8px;
    opacity: 1;
}

.home-page::before,
.guide-page::before {
    content: none;
}

.home-page::before {
    opacity: 0.08;
    animation: none;
}

.home-page::after,
.guide-page::after {
    content: none;
}

.home-page::before,
.home-page::after {
    animation: none;
    opacity: 0.08;
}

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    background: rgba(8, 10, 14, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    animation: fadeInSlide 0.55s ease-out both;
    overflow: hidden;
}

.site-topbar::after {
    content: none;
}

.home-page .site-topbar {
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.home-page .site-topbar::after {
    opacity: 0.08;
    animation: none;
}

.topbar-telemetry {
    position: absolute;
    right: 18px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0.72;
}

.topbar-telemetry-label,
.footer-telemetry-label {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topbar-telemetry-bars,
.footer-telemetry-bars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topbar-telemetry-bars i,
.footer-telemetry-bars i {
    display: block;
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.88), rgba(255, 122, 38, 0.48));
    transform-origin: left center;
    opacity: 0.28;
    animation: telemetryBeat 1.8s steps(3, end) infinite;
}

.topbar-telemetry-bars i:nth-child(2),
.footer-telemetry-bars i:nth-child(2) { animation-delay: 0.18s; }

.topbar-telemetry-bars i:nth-child(3),
.footer-telemetry-bars i:nth-child(3) { animation-delay: 0.36s; }

.topbar-telemetry-bars i:nth-child(4),
.footer-telemetry-bars i:nth-child(4) { animation-delay: 0.54s; }

.topbar-telemetry-bars i:nth-child(5) { animation-delay: 0.72s; }

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-brand-mark {
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent-line);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: linear-gradient(180deg, rgba(255, 122, 38, 0.08), rgba(255, 122, 38, 0.02));
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.site-brand-mark img {
    display: block;
    max-width: 70%;
    max-height: 70%;
    filter: grayscale(1) brightness(1.62) contrast(1.04);
    opacity: 0.92;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.site-brand-mark--image {
    padding: 4px;
}

.site-brand-text {
    display: grid;
    gap: 2px;
}

.site-brand-text strong {
    font-size: 15px;
}

.site-brand-text span {
    color: var(--text-soft);
    font-size: 12px;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.site-nav a,
.site-search-trigger,
.ghost-button,
.solid-button {
    position: relative;
    border-radius: 999px;
    border: 1px solid var(--line);
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-muted);
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-fast) var(--ease-fluid), color var(--motion-fast) var(--ease-fluid), background var(--motion-fast) var(--ease-fluid);
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.78), transparent 82%);
    opacity: 0.16;
    transform: scaleX(0.14);
    transform-origin: left center;
    transition: transform var(--motion-mid) var(--ease-terminal), opacity var(--motion-mid) var(--ease-terminal);
}

.site-nav a:focus-visible,
.site-search-trigger:focus-visible,
.ghost-button:focus-visible,
.solid-button:focus-visible,
.toolbar-button:focus-visible,
.source-link:focus-visible,
.doc-breadcrumb a:focus-visible,
.site-footer-links a:focus-visible,
.portal-card:focus-visible,
.guide-card:focus-visible,
.resource-card:focus-visible,
.feature-card:focus-visible,
.feature-tile:focus-visible,
.search-result-item:focus-visible,
.toc-list a:focus-visible {
    outline: 2px solid rgba(255, 122, 38, 0.88);
    outline-offset: 2px;
    border-color: var(--accent-line);
}

.site-nav a:hover,
.site-search-trigger:hover,
.ghost-button:hover,
.solid-button:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    color: var(--text);
}

.site-nav a[aria-current="page"] {
    border-color: var(--accent-line);
    background: rgba(255, 122, 38, 0.1);
    color: var(--text);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
    opacity: 0.72;
    transform: scaleX(1);
}

.solid-button {
    color: #140d09;
    border-color: transparent;
    background: var(--accent);
    font-weight: 700;
}

.solid-button:hover {
    color: #140d09;
    background: #ff8a44;
}

.ghost-button {
    background: rgba(255, 255, 255, 0.03);
}

.site-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
}

.site-search-trigger kbd,
.site-search-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-title,
.guide-title,
.doc-title {
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 0.96;
    text-wrap: balance;
}

.hero-lead,
.guide-lead,
.doc-lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 62ch;
}

.home-page {
    padding-bottom: 64px;
}

.hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(460px, 1.04fr);
    gap: 26px;
    align-items: stretch;
    min-height: 582px;
    margin-bottom: 22px;
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 80% 16%, rgba(188, 197, 208, 0.08), transparent 24%),
        radial-gradient(circle at 14% 18%, rgba(132, 188, 206, 0.05), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        rgba(10, 13, 17, 0.92);
    box-shadow: var(--shadow);
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.3;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.045) 45%, transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%, transparent 72%, rgba(152, 198, 214, 0.025));
    opacity: 0.56;
}

.hero-copy,
.hero-visual,
.portal-card,
.guide-hero,
.guide-card,
.doc-hero,
.doc-panel,
.toc-panel,
.pager-card,
.fallback-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.hero-panel .hero-copy,
.hero-panel .hero-visual {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.hero-copy,
.hero-visual,
.guide-hero,
.doc-hero,
.fallback-card {
    border-radius: calc(var(--radius-lg) + 2px);
}

.hero-copy,
.guide-hero,
.doc-hero {
    position: relative;
    overflow: hidden;
}

.hero-copy::before,
.guide-hero::before,
.doc-hero::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 22px;
    width: 62px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.78), transparent);
    opacity: 0.28;
    animation: topbarSweep 20s linear infinite;
}

.hero-copy {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: auto;
    max-width: 620px;
    animation: fadeInSlide 0.68s ease-out both;
}

.hero-copy::before,
.hero-copy::after {
    display: none;
}

.hero-title {
    font-size: clamp(42px, 5.4vw, 72px);
    max-width: 10.8ch;
    line-height: 0.94;
}

.hero-title-inline {
    display: block;
    white-space: nowrap;
}

.hero-title::after,
.guide-title::after,
.doc-title::after {
    content: "▉";
    display: inline-block;
    margin-left: 0.16em;
    color: rgba(93, 255, 219, 0.86);
    font-size: 0.8em;
    line-height: 0.9;
    vertical-align: baseline;
    animation: statusBlink 1.35s steps(2, end) infinite;
}

.hero-lead {
    max-width: 38ch;
    font-size: 16px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-route-list {
    display: grid;
    gap: 12px;
}

.hero-route {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(8, 10, 14, 0.58);
    color: var(--text);
    overflow: hidden;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
}

.hero-route::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 11px),
        linear-gradient(90deg, rgba(186, 196, 206, 0.03), transparent 68%);
    opacity: 0.68;
}

.hero-route::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(152, 198, 214, 0.64), transparent);
    opacity: 0.08;
    transform: none;
    animation: none;
}

.hero-route:hover,
.hero-route:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    background: rgba(10, 13, 17, 0.74);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.hero-route:hover::after,
.hero-route:focus-visible::after {
    opacity: 0.94;
    animation: signalSweep 0.8s cubic-bezier(.22, 1, .36, 1);
}

.hero-route-index,
.hero-route-tail,
.hero-route-body em {
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}

.hero-route-index,
.hero-route-tail {
    position: relative;
    z-index: 1;
    color: rgba(152, 198, 214, 0.82);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-route-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.hero-route-body strong {
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.hero-route-body em {
    min-width: 0;
    color: var(--text-soft);
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
}

.hero-route-tail {
    color: var(--text-soft);
}

.home-page .hero-route::after,
.home-page .hero-sequence::after {
    animation: none;
    opacity: 0;
}

.home-page .hero-route:hover::after,
.home-page .hero-route:focus-visible::after,
.home-page .hero-sequence.is-refreshing::after {
    animation: none;
    opacity: 0.36;
    transform: translateX(0);
}

.hero-sequence {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 6px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(7, 9, 12, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.hero-sequence::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 11px),
        linear-gradient(90deg, rgba(186, 196, 206, 0.03), transparent 60%);
    opacity: 0.72;
}

.hero-sequence::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.9), transparent);
    transform: none;
    opacity: 0.08;
    animation: none;
}

.hero-sequence.is-refreshing::after {
    opacity: 0.08;
    animation: none;
}

.hero-sequence-prompt,
.hero-sequence-text {
    position: relative;
    z-index: 1;
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-sequence-prompt {
    color: rgba(152, 198, 214, 0.8);
    white-space: nowrap;
}

.hero-sequence-text {
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-sequence-caret {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
    background: rgba(93, 255, 219, 0.86);
    box-shadow: 0 0 0 1px rgba(93, 255, 219, 0.16);
    animation: none;
    opacity: 0.36;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 6px 0 0;
}

.hero-metrics div {
    position: relative;
    padding-top: 16px;
    min-height: 70px;
}

.hero-metrics div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
}

.hero-metrics div.is-live::before {
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.84), transparent);
}

.hero-metrics dt,
.hero-metrics dd {
    margin: 0;
}

.hero-metrics dt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hero-metrics dd {
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.55;
}

.hero-metrics div.is-live dt,
.hero-metrics div.is-live dd {
    color: var(--text);
}

.guide-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.guide-metrics span {
    position: relative;
    overflow: hidden;
    padding: 9px 12px 9px 28px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-metrics span::before,
.doc-status-strip span::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.84);
    opacity: 0.24;
    animation: statusBlink 3.3s steps(2, end) infinite;
}

.guide-metrics span::after,
.doc-status-strip span::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 10px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.38), transparent 74%);
    opacity: 0.26;
    transform-origin: left center;
    animation: dataLinePulse 4.8s var(--ease-terminal) infinite;
}

.hero-console {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(8, 10, 14, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.hero-console--compact {
    max-width: 760px;
}

.hero-console-row {
    display: grid;
    grid-template-columns: 72px minmax(100px, 1fr) max-content;
    align-items: center;
    gap: 12px;
}

.hero-console-label,
.hero-console-value {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-console-label {
    color: var(--text-soft);
}

.hero-console-value {
    color: var(--text-muted);
}

.hero-console-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 8px, transparent 8px, transparent 14px),
        rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.hero-console-track i {
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 34%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.16), rgba(93, 255, 219, 0.58), rgba(255, 122, 38, 0.42));
    box-shadow: 0 0 14px rgba(93, 255, 219, 0.16);
    animation: terminalSweepIdle 3.6s linear infinite;
}

.hero-console-row:nth-child(2) .hero-console-track i {
    animation-delay: 0.8s;
}

.hero-console-row:nth-child(3) .hero-console-track i {
    animation-delay: 1.6s;
}

.terminal-panel {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(8, 10, 14, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    animation: terminalPanelFlash 5.4s var(--ease-terminal) infinite;
}

.terminal-panel::before,
.doc-hud-panel::before,
.toc-hud::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 12px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 48%);
    opacity: 0.62;
    animation: searchGridShift 20s linear infinite;
}

.terminal-panel::after,
.doc-hud-panel::after,
.toc-hud::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.96), transparent);
    transform: translateX(-130%);
    opacity: 0.18;
    animation: terminalSweepIdle 4.8s linear infinite;
}

.terminal-panel--hero {
    max-width: min(100%, 720px);
}

.terminal-panel--compact {
    max-width: min(100%, 760px);
}

.terminal-panel--doc,
.terminal-panel--sidebar {
    margin-top: 18px;
}

.terminal-panel--sidebar {
    margin-top: 0;
    margin-bottom: 16px;
}

.terminal-panel-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terminal-panel-title,
.terminal-panel-mode,
.terminal-line-label,
.terminal-line-tail,
.doc-hud-label,
.toc-hud-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.terminal-panel-title,
.terminal-panel-mode,
.terminal-line-label,
.doc-hud-label,
.toc-hud-label {
    color: var(--text-soft);
}

.terminal-panel-mode,
.terminal-line-tail {
    color: rgba(93, 255, 219, 0.88);
}

.terminal-log {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    padding: 6px 0;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.terminal-line {
    position: relative;
    display: grid;
    grid-template-columns: 8px 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    animation: terminalRowIn 0.26s var(--ease-terminal) both;
}

.terminal-line::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(93, 255, 219, 0.18), transparent 70%);
    opacity: 0.4;
}

.terminal-line.is-live {
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.08), transparent 72%);
}

.terminal-line-state {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.88);
    opacity: 0.28;
    box-shadow: 0 0 0 1px rgba(93, 255, 219, 0.16);
    animation: statusBlink 1.6s steps(2, end) infinite;
}

.terminal-line-text,
.doc-hud-value,
.toc-hud-value,
.footer-telemetry-tail {
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}

.terminal-line-text {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-panel.is-refreshing .terminal-line:first-child {
    background: linear-gradient(90deg, rgba(255, 122, 38, 0.12), transparent 80%);
}

.doc-hud-panel,
.toc-hud {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(8, 10, 14, 0.68);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.doc-hud-panel {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.doc-hud-row,
.toc-hud-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.doc-hud-value,
.toc-hud-value {
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-progress-rail {
    position: relative;
    z-index: 1;
    height: 96px;
    width: 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 8px, transparent 8px, transparent 14px),
        rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.toc-progress-rail i {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: calc(100% - 2px);
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 122, 38, 0.44), rgba(93, 255, 219, 0.72));
    transform-origin: bottom center;
    transform: scaleY(0.06);
    transition: transform 0.28s var(--ease-terminal);
    box-shadow: 0 0 18px rgba(93, 255, 219, 0.18);
}

.doc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.doc-breadcrumb a {
    color: var(--text-soft);
}

.doc-breadcrumb a:hover {
    color: var(--text);
}

.doc-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-status-strip span {
    position: relative;
    overflow: hidden;
    padding: 9px 12px 9px 28px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 12px;
}

.hero-visual {
    position: relative;
    display: grid;
    align-items: center;
    animation: fadeInSlide 0.78s ease-out both;
}

.hero-visual-stage {
    position: relative;
    min-height: 470px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 122, 38, 0.14), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(93, 255, 219, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
        rgba(9, 12, 16, 0.88);
    box-shadow: var(--shadow);
    overflow: hidden;
    isolation: isolate;
}

.hero-visual-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 14px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%, transparent 72%, rgba(255, 122, 38, 0.04));
    opacity: 0.72;
}

.hero-visual-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 26%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    opacity: 0.06;
    animation: none;
}

.hero-device-ghost {
    position: absolute;
    right: 20px;
    bottom: 16px;
    width: min(420px, 52%);
    height: auto;
    opacity: 0.1;
    filter: grayscale(1) brightness(1.08) contrast(1.06);
    transform-origin: 70% 50%;
    animation: none;
}

.hero-status-notes {
    position: absolute;
    left: 32px;
    top: 20px;
    z-index: 2;
    display: grid;
    gap: 10px;
    max-width: 248px;
}

.hero-status-notes span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    width: max-content;
    max-width: 100%;
    padding: 10px 14px 10px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(8, 10, 14, 0.72);
    color: var(--text-soft);
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: border-color var(--motion-fast) var(--ease-fluid), color var(--motion-fast) var(--ease-fluid), transform var(--motion-fast) var(--ease-fluid);
}

.hero-status-notes span::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.88);
    box-shadow: 0 0 0 1px rgba(93, 255, 219, 0.14);
    animation: none;
    opacity: 0.42;
}

.hero-status-notes span.is-live {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.12);
    transform: none;
}

.hero-status-notes strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-screen-shell {
    position: relative;
    z-index: 3;
    width: min(620px, 78%);
    margin: 72px 18px 0 auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(7, 9, 13, 0.74);
    backdrop-filter: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    transform: none;
    animation: cardPop 0.54s ease-out both;
}

.hero-screen-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 46%, transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
    opacity: 0.64;
}

.hero-screen-shell::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 44%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.9), transparent);
    transform: translateX(-130%);
    opacity: 0.1;
    animation: none;
}

.hero-screen-head,
.hero-screen-dock {
    position: relative;
    z-index: 1;
}

.hero-screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-wordmark {
    display: block;
    height: 24px;
    width: auto;
}

.hero-screen-mode {
    color: rgba(93, 255, 219, 0.88);
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-shot {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 862 / 532;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #0f1419;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 32px rgba(0, 0, 0, 0.28);
    transition: border-color var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid), filter var(--motion-mid) var(--ease-fluid), transform var(--motion-mid) var(--ease-fluid);
}

.hero-screen-dock {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 14px;
    gap: 10px;
}

.hero-screen-dock span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 8px 12px 8px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-screen-dock span::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.86);
    animation: none;
    opacity: 0.42;
}

.hero-signal-bars {
    position: absolute;
    left: 38px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 64px;
}

.hero-signal-bars i {
    display: block;
    width: 8px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 122, 38, 0.32), rgba(93, 255, 219, 0.92));
    opacity: 0.82;
    transform-origin: bottom center;
    animation: signalBarBounce 1.9s steps(3, end) infinite;
}

.hero-signal-bars i:nth-child(1) { height: 16px; animation-delay: 0.1s; }
.hero-signal-bars i:nth-child(2) { height: 26px; animation-delay: 0.24s; }
.hero-signal-bars i:nth-child(3) { height: 40px; animation-delay: 0.38s; }
.hero-signal-bars i:nth-child(4) { height: 58px; animation-delay: 0.52s; }
.hero-signal-bars i:nth-child(5) { height: 34px; animation-delay: 0.66s; }
.hero-signal-bars i:nth-child(6) { height: 20px; animation-delay: 0.8s; }

.hero-panel:hover .hero-screen-shell {
    border-color: var(--accent-line);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.36);
}

.hero-panel:hover .hero-shot {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    filter: saturate(1.04) contrast(1.03);
}

.home-page .hero-panel:hover .hero-screen-shell {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26);
}

.home-page .hero-panel:hover .hero-shot {
    transform: none;
    filter: none;
}

.home-systems {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
    margin-bottom: 24px;
}

.system-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
}

.system-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 52%);
    opacity: 0.58;
    animation: searchGridShift 22s linear infinite;
}

.system-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.95), transparent);
    transform: translateX(-130%);
    opacity: 0.2;
    animation: terminalSweepIdle 6.1s linear infinite;
}

.system-card > :not(.frame-corners) {
    position: relative;
    z-index: 1;
}

.system-card--wide {
    grid-row: span 2;
}

.system-card-head {
    display: grid;
    gap: 10px;
}

.system-card-title {
    margin: 0;
    font-size: clamp(24px, 2.8vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.system-card-lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.72;
    max-width: 54ch;
}

.hero-radar {
    position: absolute;
    right: 28px;
    top: 30px;
    z-index: 2;
    width: 212px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(7, 9, 13, 0.78);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.system-card--radar .hero-radar {
    position: relative;
    inset: auto;
    right: auto;
    top: auto;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.system-card--radar .hero-radar-grid {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

.system-card--icons .icon-rack {
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-radar-head,
.hero-radar-readout span,
.reader-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hero-radar-head span,
.hero-radar-head strong,
.hero-radar-readout em,
.hero-radar-readout strong,
.reader-activity-label,
.reader-activity-mode,
.reader-activity-tail {
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}

.hero-radar-head span,
.reader-activity-label {
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.hero-radar-head strong,
.reader-activity-mode {
    color: rgba(93, 255, 219, 0.92);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.hero-radar-grid {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin: 14px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background:
        radial-gradient(circle, transparent 30%, rgba(93, 255, 219, 0.05) 31%, transparent 32%, transparent 48%, rgba(93, 255, 219, 0.05) 49%, transparent 50%, transparent 66%, rgba(93, 255, 219, 0.05) 67%, transparent 68%),
        linear-gradient(90deg, transparent 49.3%, rgba(255, 255, 255, 0.08) 50%, transparent 50.7%),
        linear-gradient(0deg, transparent 49.3%, rgba(255, 255, 255, 0.08) 50%, transparent 50.7%),
        radial-gradient(circle at center, rgba(93, 255, 219, 0.06), transparent 72%);
    overflow: hidden;
}

.hero-radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.hero-radar-sweep::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.96), rgba(93, 255, 219, 0.12), transparent);
    animation: radarRotate 4.8s linear infinite;
}

.hero-radar-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 999px;
    background: rgba(255, 122, 38, 0.94);
    box-shadow: 0 0 0 4px rgba(255, 122, 38, 0.08);
    animation: radarPing 2.2s ease-in-out infinite;
}

.hero-radar-dot--1 {
    left: 34%;
    top: 62%;
}

.hero-radar-dot--2 {
    left: 68%;
    top: 38%;
    animation-delay: 0.7s;
}

.hero-radar-dot--3 {
    left: 52%;
    top: 74%;
    animation-delay: 1.3s;
}

.hero-radar-readout {
    display: grid;
    gap: 8px;
}

.hero-radar-readout em,
.hero-radar-readout strong {
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-radar-readout em {
    color: var(--text-soft);
}

.hero-radar-readout strong {
    color: var(--text);
}

.icon-rack {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    animation: rackFade 0.82s ease-out both;
}

.icon-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    font-size: 13px;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
    animation: chipRise 0.6s ease backwards;
}

.icon-chip::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.82);
    opacity: 0.24;
    box-shadow: 0 0 0 1px rgba(93, 255, 219, 0.15);
    animation: statusBlink 3.8s steps(2, end) infinite;
}

.icon-chip::after {
    content: "";
    position: absolute;
    left: 44px;
    right: 16px;
    bottom: 11px;
    height: 1px;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.36), transparent 72%);
    opacity: 0.28;
    transform: scaleX(0.24);
    transform-origin: left center;
    transition: transform var(--motion-mid) var(--ease-terminal), opacity var(--motion-mid) var(--ease-terminal);
    animation: dataLinePulse 4.6s var(--ease-terminal) infinite;
}

.icon-chip img {
    width: 20px;
    height: 20px;
    filter: grayscale(1) brightness(1.58) contrast(1.04);
    opacity: 0.92;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.icon-chip:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.icon-chip:hover::after {
    opacity: 0.68;
    transform: scaleX(1);
}

.icon-chip:hover img {
    filter: grayscale(0.25) brightness(1.25) saturate(1.25);
    opacity: 1;
}

.icon-rack .icon-chip:nth-child(1) { animation-delay: 0.08s; }
.icon-rack .icon-chip:nth-child(2) { animation-delay: 0.12s; }
.icon-rack .icon-chip:nth-child(3) { animation-delay: 0.16s; }
.icon-rack .icon-chip:nth-child(4) { animation-delay: 0.20s; }
.icon-rack .icon-chip:nth-child(5) { animation-delay: 0.24s; }
.icon-rack .icon-chip:nth-child(6) { animation-delay: 0.28s; }

.icon-chip:nth-child(1),
.icon-chip:nth-child(4) {
    animation: cardPop 0.72s ease-out both;
}

.icon-chip:nth-child(2),
.icon-chip:nth-child(5) {
    animation: cardPop 0.8s ease-out both;
}

.icon-chip:nth-child(3),
.icon-chip:nth-child(6) {
    animation: cardPop 0.88s ease-out both;
}

.icon-chip:nth-child(3n + 1)::before,
.official-icon-cell:nth-child(3n + 1)::before {
    animation-delay: 0.16s;
}

.icon-chip:nth-child(3n + 2)::before,
.official-icon-cell:nth-child(3n + 2)::before {
    animation-delay: 0.6s;
}

.icon-chip:nth-child(3n)::before,
.official-icon-cell:nth-child(3n)::before {
    animation-delay: 1.05s;
}

.signal-stack {
    display: grid;
    gap: 14px;
    height: 100%;
}

.signal-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        var(--bg-elevated);
    padding: 18px;
    min-height: 120px;
}

.signal-panel strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.signal-panel h3 {
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.signal-panel p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 14px;
}

.signal-panel::after {
    content: "";
    position: absolute;
    inset: 18px 18px auto auto;
    width: 76px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 32px;
    border: 1px dashed rgba(255, 255, 255, 0.07);
    border-radius: 28px;
    pointer-events: none;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: auto 24px 24px auto;
    width: 110px;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.72), transparent);
    pointer-events: none;
    opacity: 0.34;
}

.hero-visual:hover .hero-shot {
    border-color: var(--accent-line);
    filter: saturate(1.02) contrast(1.02);
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.portal-card,
.guide-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    clip-path: none;
    border-radius: 26px;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
    animation: fadeInSlide 0.72s ease-out both;
}

.portal-card:hover,
.guide-card:hover,
.pager-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.portal-card::before,
.guide-card::before {
    content: none;
}

.portal-card::after,
.guide-card::after {
    content: none;
}

.portal-card:hover::before,
.guide-card:hover::before {
    opacity: 1;
}

.portal-card:hover::after,
.guide-card:hover::after {
    opacity: 1;
}

.hero-route.is-wave {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.hero-route.is-wave::after {
    opacity: 1;
    animation: signalSweep 0.84s cubic-bezier(.22, 1, .36, 1);
}

.system-card.is-wave,
.portal-card.is-wave,
.guide-card.is-wave,
.resource-card.is-wave,
.feature-card.is-wave,
.feature-tile.is-wave,
.closing-band.is-wave,
.site-footer.is-wave,
.pager-card.is-wave {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow: 0 0 0 1px rgba(255, 122, 38, 0.12), 0 18px 44px rgba(0, 0, 0, 0.24);
}

.portal-card.is-wave::before,
.guide-card.is-wave::before {
    opacity: 0.96;
}

.system-card.is-wave::after,
.portal-card.is-wave::after,
.guide-card.is-wave::after,
.feature-card.is-wave::after,
.feature-tile.is-wave::after,
.resource-card.is-wave::after,
.closing-band.is-wave::after,
.site-footer.is-wave::after {
    opacity: 1;
    animation: signalSweep 0.96s cubic-bezier(.22, 1, .36, 1);
}

.portal-card.is-wave .portal-ghost,
.guide-card.is-wave .guide-card-ghost {
    color: rgba(255, 255, 255, 0.12);
}

.portal-grid > :nth-child(1)::after,
.guide-grid > :nth-child(1)::after { animation-delay: 0.4s; }
.portal-grid > :nth-child(2)::after,
.guide-grid > :nth-child(2)::after { animation-delay: 1.1s; }
.portal-grid > :nth-child(3)::after,
.guide-grid > :nth-child(3)::after { animation-delay: 1.8s; }
.portal-grid > :nth-child(4)::after,
.guide-grid > :nth-child(4)::after { animation-delay: 2.5s; }
.portal-grid > :nth-child(5)::after,
.guide-grid > :nth-child(5)::after { animation-delay: 3.2s; }
.portal-grid > :nth-child(6)::after,
.guide-grid > :nth-child(6)::after { animation-delay: 3.9s; }

.portal-card--primary {
    grid-column: span 4;
    min-height: 244px;
}

.portal-card--wide {
    grid-column: span 4;
    min-height: 244px;
}

.portal-card--compact {
    grid-column: span 4;
    min-height: 176px;
}

.home-page .portal-grid {
    margin-top: 12px;
}

.home-page .portal-card,
.home-page .feature-card,
.home-page .feature-tile,
.home-page .resource-card,
.home-page .official-icon-cell {
    animation: none;
}

.home-page .portal-card::before,
.home-page .feature-card::before,
.home-page .feature-tile::before,
.home-page .resource-card::before,
.home-page .closing-band::before {
    animation: none;
    opacity: 0.22;
}

.home-page .portal-card::after,
.home-page .feature-card::after,
.home-page .feature-tile::after,
.home-page .resource-card::after,
.home-page .closing-band::after {
    animation: none;
    opacity: 0;
}

.portal-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-icon,
.resource-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.portal-icon img,
.resource-icon img {
    width: 20px;
    height: 20px;
    filter: grayscale(1) brightness(1.62) contrast(1.04);
    opacity: 0.92;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.site-brand:hover .site-brand-mark img,
.portal-card:hover .portal-icon img,
.resource-card:hover .resource-icon img,
.official-icon-cell:hover img,
.feature-card:hover .portal-icon img {
    filter: grayscale(0.2) brightness(1.26) saturate(1.18);
    opacity: 1;
}

.portal-label,
.guide-card-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.portal-label::before,
.guide-card-label::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--accent);
}

.portal-title {
    margin: 18px 0 12px;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.portal-card--wide .portal-title,
.portal-card--compact .portal-title {
    font-size: clamp(24px, 2.1vw, 30px);
}

.portal-summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
    max-width: 44ch;
}

.portal-footer {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.portal-footer span {
    position: relative;
    overflow: hidden;
    padding-left: 16px;
}

.portal-footer span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.8);
    opacity: 0.26;
    animation: statusBlink 3.2s steps(2, end) infinite;
}

.portal-ghost {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: rgba(255, 255, 255, 0.06);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    letter-spacing: -0.06em;
}

.home-section {
    margin-top: 24px;
}

.closing-band {
    margin-top: 28px;
    padding: 28px;
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
}

.closing-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.closing-lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 62ch;
}

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.section-header {
    display: grid;
    gap: 12px;
    margin: 42px 0 18px;
}

.section-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.section-lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 72ch;
}

.asset-board {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 18px;
}

.feature-card,
.feature-tile,
.resource-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
}

.feature-card::before,
.feature-tile::before,
.resource-card::before,
.closing-band::before,
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 52%);
    opacity: 0.62;
    animation: searchGridShift 22s linear infinite;
}

.feature-card::after,
.feature-tile::after,
.resource-card::after,
.closing-band::after,
.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.95), transparent);
    transform: translateX(-130%);
    opacity: 0.2;
    animation: terminalSweepIdle 6.4s linear infinite;
}

.feature-card::after { animation-delay: 0.3s; }
.feature-tile::after { animation-delay: 0.9s; }
.resource-card::after { animation-delay: 1.4s; }
.closing-band::after { animation-delay: 1.8s; }
.site-footer::after { animation-delay: 2.2s; }

.home-page .site-topbar::after,
.home-page .system-card::before,
.home-page .system-card::after,
.home-page .terminal-panel,
.home-page .terminal-panel::before,
.home-page .terminal-panel::after,
.home-page .portal-card::before,
.home-page .portal-card::after,
.home-page .feature-card::before,
.home-page .feature-card::after,
.home-page .feature-tile::before,
.home-page .feature-tile::after,
.home-page .resource-card::before,
.home-page .resource-card::after,
.home-page .closing-band::before,
.home-page .closing-band::after,
.home-page .site-footer::before,
.home-page .site-footer::after {
    animation: none !important;
}

.home-page .system-card::before,
.home-page .portal-card::before,
.home-page .feature-card::before,
.home-page .feature-tile::before,
.home-page .resource-card::before,
.home-page .closing-band::before,
.home-page .site-footer::before {
    opacity: 0.18;
}

.home-page .system-card::after,
.home-page .portal-card::after,
.home-page .feature-card::after,
.home-page .feature-tile::after,
.home-page .resource-card::after,
.home-page .closing-band::after,
.home-page .site-footer::after {
    opacity: 0.04;
}

.home-page .topbar-telemetry {
    display: none;
}

.home-page .home-systems {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
}

.home-page .system-card--wide {
    grid-row: auto;
}

.feature-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(260px, 1.05fr);
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    align-items: center;
    animation: fadeInSlide 0.78s ease-out both;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
}

.feature-card-copy {
    display: grid;
    gap: 14px;
}

.feature-card-title {
    margin: 0;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.feature-card-summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
}

.feature-card-image {
    width: 100%;
    display: block;
    aspect-ratio: 862 / 532;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #0f1419;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1), border-color 0.25s ease;
}

.official-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.official-icon-cell {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 16px 18px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid);
}

.official-icon-cell::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.82);
    opacity: 0.24;
    box-shadow: 0 0 0 1px rgba(93, 255, 219, 0.15);
    animation: statusBlink 3.8s steps(2, end) infinite;
}

.official-icon-cell img {
    width: 22px;
    height: 22px;
    filter: grayscale(1) brightness(1.56) contrast(1.02);
    opacity: 0.94;
}

.official-icon-cell strong {
    font-size: 15px;
}

.official-icon-cell span {
    color: var(--text-muted);
    font-size: 13px;
}

.official-icon-cell:hover {
    border-color: var(--accent-line);
    background: rgba(255, 255, 255, 0.04);
}

.feature-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.feature-tile {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border-radius: 24px;
    align-items: center;
    animation: fadeInSlide 0.82s ease-out both;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
}

.feature-tile-image {
    width: 100%;
    height: 176px;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #0f1419;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1), border-color 0.25s ease;
}

.feature-tile-copy h3 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.08;
    text-wrap: balance;
}

.feature-tile-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.resource-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 26px;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
    animation: fadeInSlide 0.84s ease-out both;
}

.resource-card:hover,
.feature-card:hover,
.feature-tile:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.feature-card:hover .feature-card-image,
.feature-tile:hover .feature-tile-image,
.feature-card.is-wave .feature-card-image,
.feature-tile.is-wave .feature-tile-image {
    transform: none;
    border-color: rgba(255, 255, 255, 0.16);
}

.portal-grid > :nth-child(1) { animation-delay: 0.05s; }
.portal-grid > :nth-child(2) { animation-delay: 0.1s; }
.portal-grid > :nth-child(3) { animation-delay: 0.15s; }
.portal-grid > :nth-child(4) { animation-delay: 0.2s; }
.portal-grid > :nth-child(5) { animation-delay: 0.25s; }
.portal-grid > :nth-child(6) { animation-delay: 0.3s; }
.feature-strip > :nth-child(1),
.resource-grid > :nth-child(1) { animation-delay: 0.08s; }
.feature-strip > :nth-child(2),
.resource-grid > :nth-child(2) { animation-delay: 0.14s; }
.resource-grid > :nth-child(3) { animation-delay: 0.2s; }
.resource-grid > :nth-child(4) { animation-delay: 0.26s; }

.resource-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resource-source {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.resource-card-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.resource-card-summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
}

.resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-tags span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 12px;
}

.guide-page,
.reader-page {
    padding-bottom: 56px;
}

.guide-hero {
    margin-top: 22px;
    padding: 28px;
    display: grid;
    gap: 18px;
}

.guide-title {
    font-size: clamp(42px, 7vw, 74px);
}

.guide-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.guide-card {
    min-height: 220px;
    display: grid;
    gap: 18px;
    align-content: start;
}

.guide-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}


.guide-card-number {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-line);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.guide-card-ghost {
    color: rgba(255, 255, 255, 0.06);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
    margin-left: auto;
}

.guide-card-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.guide-card-summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
}

.guide-card-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.site-footer {
    margin: 22px 0 8px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: var(--shadow);
}

.site-footer-brand {
    display: grid;
    gap: 8px;
}

.site-footer-brand strong {
    font-size: 15px;
}

.site-footer-brand p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.footer-telemetry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.footer-telemetry-tail {
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.3;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: flex-end;
    gap: 10px;
}

.site-footer-links a {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 13px;
}

.site-footer-links a:hover {
    border-color: var(--accent-line);
    color: var(--text);
}

.reader-main {
    margin-top: 18px;
}

.doc-hero {
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 300px;
    gap: 22px;
    margin-bottom: 18px;
}

.doc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tui-viewport {
    position: relative;
    border-radius: 30px;
    padding: 14px;
    background: radial-gradient(circle at 40% -8%, rgba(255, 255, 255, 0.04), transparent 60%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 36px rgba(12, 12, 20, 0.55), 0 22px 70px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}

.doc-panel {
    position: relative;
    background: linear-gradient(160deg, rgba(9, 11, 16, 0.85), rgba(14, 17, 22, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.45);
    border-radius: 24px;
    padding: 24px;
    min-height: 420px;
    isolation: isolate;
    overflow: hidden;
}

.doc-panel > *:not(.scanline-overlay) {
    position: relative;
    z-index: 1;
}

.scanline-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.01),
            rgba(255, 255, 255, 0.01) 2px,
            transparent 2px,
            transparent 6px
        );
    opacity: 0.13;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: scanlinePulse 12s linear infinite;
    z-index: 2;
}

.scanline-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24%;
    height: 20%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    opacity: 0.12;
    animation: heroScan 12s linear infinite;
}

.toolbar-search {
    position: relative;
    flex: 1;
    display: grid;
    gap: 8px;
}

.toolbar-cursor {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 18px;
    height: 2px;
    background: var(--tui-cursor);
    animation: cursorPulse 1.6s steps(2) infinite;
    border-radius: 1px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.toolbar-grid {
    position: absolute;
    inset: 6px 0 6px 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 5px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.12;
    pointer-events: none;
    animation: searchGridShift 18s linear infinite;
}

.search-results {
    background: rgba(6, 8, 12, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 0 125px rgba(0, 0, 0, 0.25);
}

.search-result-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
}

.search-result-item::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent 60%, transparent 100%);
    opacity: 0;
    transition: opacity var(--motion-mid) var(--ease-fluid);
    pointer-events: none;
}

.search-result-item:hover::before,
.search-result-item:focus-visible::before {
    opacity: 1;
}

.search-result-item::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid var(--result-ink);
    border-radius: 14px;
    opacity: 0;
    transition: opacity var(--motion-mid) var(--ease-fluid);
    pointer-events: none;
}

.search-result-item:hover::after,
.search-result-item:focus-visible::after {
    opacity: 1;
}

.search-result-item + .search-result-item {
    margin-top: 6px;
}

.search-results-list .search-result-item:nth-child(odd) {
    animation: none;
}

.search-results-list .search-result-item:nth-child(even) {
    animation: none;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    padding: 0 0 2px;
}

.toolbar-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.toolbar-input {
    width: 100%;
    min-width: 0;
    padding: 11px 14px 11px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    outline: none;
}

.toolbar-input:focus {
    border-color: var(--accent-line);
}

.toolbar-input:focus + .toolbar-cursor,
.toolbar-input:not(:placeholder-shown) + .toolbar-cursor {
    opacity: 0;
}

.search-results-loom {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%);
    opacity: 0.12;
    animation: scanlinePulse 13s linear infinite;
    mix-blend-mode: screen;
}

.search-results-loom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18%;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(93, 255, 219, 0.08), transparent);
    opacity: 0.1;
    animation: heroScan 15s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .scanline-overlay,
    .search-results-loom,
    .toolbar-cursor,
    .toolbar-grid,
    .search-result-item,
    .search-results-list .search-result-item:nth-child(odd),
    .search-results-list .search-result-item:nth-child(even) {
        animation: none !important;
        transition-duration: 0.1s !important;
    }

    .search-result-item::before,
    .search-result-item::after {
        opacity: 0;
    }
}

.toolbar-status {
    color: var(--text-soft);
    font-size: 12px;
    flex-shrink: 0;
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.toolbar-button {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
}

.toolbar-button--accent {
    border-color: var(--accent-line);
    background: rgba(255, 122, 38, 0.12);
}

.search-results {
    margin-bottom: 14px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(6, 8, 12, 0.95);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 0 125px rgba(0, 0, 0, 0.25);
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.search-results-header strong {
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-results-header span {
    color: var(--text-soft);
    font-size: 12px;
}

.search-results-list {
    display: grid;
    gap: 10px;
}

.search-result-item {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-terminal), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), box-shadow var(--motion-mid) var(--ease-fluid);
}

.search-result-item:hover {
    transform: translateX(2px);
    border-color: var(--accent-line);
    background: rgba(255, 255, 255, 0.045);
}

.search-result-item.is-active {
    transform: translateX(2px);
    border-color: var(--accent-line);
    background: rgba(255, 122, 38, 0.08);
}

.search-result-kind,
.search-result-score {
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-result-heading {
    font-size: 16px;
    line-height: 1.45;
}

.search-result-snippet {
    color: var(--text-muted);
    line-height: 1.65;
}

.search-results-empty {
    margin: 0;
    padding: 12px 2px 2px;
    color: var(--text-soft);
    line-height: 1.7;
}

.keyword-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.site-search[hidden] {
    display: none;
}

.site-search {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.site-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 9, 12, 0.74);
    backdrop-filter: blur(10px);
}

.site-search-panel {
    position: relative;
    overflow: hidden;
    width: min(880px, calc(100vw - 28px));
    margin: min(8vh, 72px) auto 0;
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 122, 38, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(18, 22, 27, 0.98), rgba(11, 13, 16, 0.98));
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.48);
    animation: fadeInSlide 0.2s ease-out;
}

.site-search-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0.12;
    pointer-events: none;
    animation: gridDrift 22s linear infinite;
}

.site-search-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    opacity: 0.12;
    pointer-events: none;
    animation: heroScan 16s linear infinite;
}

.site-search-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    margin-bottom: 18px;
}

.site-search-title {
    margin: 8px 0 0;
    font-size: clamp(28px, 3.2vw, 42px);
    letter-spacing: -0.04em;
}

.site-search-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    cursor: pointer;
}

.site-search-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.site-search-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 10px);
    opacity: 0.1;
    pointer-events: none;
    animation: searchGridShift 18s linear infinite;
}

.site-search-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}

.site-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.site-search-tag {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-terminal), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), color var(--motion-mid) var(--ease-fluid);
}

.site-search-tag:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    color: var(--text);
}

.site-search-status {
    margin-top: 14px;
    color: var(--text-soft);
    font-size: 13px;
}

.site-search-results {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    max-height: min(58vh, 620px);
    overflow: auto;
}

.site-search-result,
.site-search-empty {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.site-search-result {
    display: grid;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform var(--motion-fast) var(--ease-terminal), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid);
}

.site-search-result::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    background: linear-gradient(90deg, rgba(93, 255, 219, 0.16), transparent);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
}

.site-search-result:hover,
.site-search-result.is-active {
    transform: translateX(2px);
    border-color: var(--accent-line);
    background: rgba(255, 255, 255, 0.04);
}

.site-search-result:hover::before,
.site-search-result.is-active::before {
    opacity: 1;
    animation: signalSweep 0.86s var(--ease-terminal);
}

.site-search-result-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-search-result-title {
    font-size: 15px;
    line-height: 1.5;
}

.site-search-result-summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.keyword-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-terminal), border-color var(--motion-mid) var(--ease-fluid), background var(--motion-mid) var(--ease-fluid), color var(--motion-mid) var(--ease-fluid);
}

.keyword-chip:hover {
    border-color: var(--accent-line);
    color: var(--text);
}

.doc-title {
    font-size: clamp(36px, 5vw, 64px);
    margin-top: 10px;
}

.doc-lead {
    margin-top: 16px;
    font-size: 16px;
    max-width: 56ch;
}

.doc-meta {
    display: grid;
    gap: 14px;
    align-content: start;
}

.doc-meta-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
}

.doc-meta-card dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.doc-meta-card dt {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.doc-meta-card dd {
    margin: 6px 0 0;
    color: var(--text);
    line-height: 1.6;
    word-break: break-word;
}

.doc-hud-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.doc-hud-row,
.toc-hud-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.doc-hud-label,
.toc-hud-label {
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.doc-hud-value,
.toc-hud-value {
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
}

.reader-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
}

.doc-panel,
.toc-panel {
    border-radius: calc(var(--radius-lg) + 2px);
}

.doc-panel {
    padding: 28px;
    min-height: 400px;
}

.toc-panel {
    padding: 22px;
    position: sticky;
    top: 18px;
    align-self: start;
    overflow: hidden;
}

.toc-panel::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(93, 255, 219, 0.16), transparent);
    opacity: 0.22;
}

.toc-panel::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 3px;
    top: -24%;
    height: 28%;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(93, 255, 219, 0.9), rgba(255, 122, 38, 0.88), transparent);
    opacity: 0.5;
    animation: railSweep 6.6s linear infinite;
}

.reader-activity-rail {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(8, 10, 14, 0.68);
}

.reader-activity-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 9px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 56%);
    opacity: 0.4;
    animation: searchGridShift 20s linear infinite;
}

.reader-activity-rail::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 42%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 38, 0.96), transparent);
    transform: translateX(-130%);
    opacity: 0.18;
    animation: terminalSweepIdle 4.2s linear infinite;
}

.reader-activity-rail > * {
    position: relative;
    z-index: 1;
}

.reader-activity-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 26px;
}

.reader-activity-bars i {
    width: 6px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 122, 38, 0.18), rgba(93, 255, 219, 0.92));
    transform-origin: center bottom;
    animation: railBarPulse 1.2s steps(4, end) infinite;
}

.reader-activity-bars i:nth-child(2) { animation-delay: 0.08s; }
.reader-activity-bars i:nth-child(3) { animation-delay: 0.16s; }
.reader-activity-bars i:nth-child(4) { animation-delay: 0.24s; }
.reader-activity-bars i:nth-child(5) { animation-delay: 0.32s; }
.reader-activity-bars i:nth-child(6) { animation-delay: 0.40s; }

.reader-activity-tail {
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reader-activity-rail[data-mode="search"] .reader-activity-mode,
.reader-activity-rail[data-mode="search"] .reader-activity-tail {
    color: rgba(255, 122, 38, 0.96);
}

.reader-activity-rail[data-mode="lock"] .reader-activity-mode,
.reader-activity-rail[data-mode="lock"] .reader-activity-tail {
    color: rgba(93, 255, 219, 0.96);
}

.reader-activity-rail[data-mode="miss"] .reader-activity-mode,
.reader-activity-rail[data-mode="miss"] .reader-activity-tail {
    color: rgba(255, 179, 127, 0.96);
}

.toc-hud {
    position: relative;
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 14px 14px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.toc-progress-rail {
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.toc-progress-rail i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    transform-origin: center bottom;
    transform: scaleY(0.06);
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(93, 255, 219, 0.2), rgba(93, 255, 219, 0.92), rgba(255, 122, 38, 0.92));
    transition: transform 180ms linear;
}

.toc-title {
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.toc-list {
    display: grid;
    gap: 8px;
}

.toc-list a {
    position: relative;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.toc-list a:hover,
.toc-list a.is-active {
    border-color: var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.toc-list a.is-active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: rgba(93, 255, 219, 0.96);
    animation: statusBlink 2.1s steps(2, end) infinite;
}

.toc-list a.is-active::after {
    content: "LIVE";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 122, 38, 0.92);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.heading-live {
    position: relative;
    animation: headingPulse 1.1s ease-out;
}

.heading-live::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(93, 255, 219, 0.92), rgba(255, 122, 38, 0.92), transparent);
    animation: terminalSweepIdle 0.9s linear 1;
}

.frame-corners {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.frame-corners i {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0.34;
    animation: cornerBlink 3.6s steps(2, end) infinite;
}

.frame-corners i:nth-child(1) {
    top: 10px;
    left: 10px;
    border-top: 2px solid rgba(93, 255, 219, 0.7);
    border-left: 2px solid rgba(93, 255, 219, 0.7);
}

.frame-corners i:nth-child(2) {
    top: 10px;
    right: 10px;
    border-top: 2px solid rgba(255, 122, 38, 0.72);
    border-right: 2px solid rgba(255, 122, 38, 0.72);
    animation-delay: 0.4s;
}

.frame-corners i:nth-child(3) {
    bottom: 10px;
    right: 10px;
    border-right: 2px solid rgba(93, 255, 219, 0.66);
    border-bottom: 2px solid rgba(93, 255, 219, 0.66);
    animation-delay: 0.8s;
}

.frame-corners i:nth-child(4) {
    bottom: 10px;
    left: 10px;
    border-bottom: 2px solid rgba(255, 122, 38, 0.68);
    border-left: 2px solid rgba(255, 122, 38, 0.68);
    animation-delay: 1.2s;
}

.empty-state {
    color: var(--text-soft);
    line-height: 1.7;
    font-size: 14px;
}

.markdown-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-muted);
}

.markdown-body > *:first-child {
    margin-top: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: var(--text);
    letter-spacing: -0.02em;
    scroll-margin-top: 92px;
}

.markdown-body h2 {
    margin: 52px 0 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 31px;
}

.markdown-body h3 {
    margin: 32px 0 12px;
    font-size: 23px;
}

.markdown-body h4 {
    margin: 24px 0 10px;
    font-size: 18px;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body table,
.markdown-body blockquote,
.markdown-body pre,
.markdown-body hr {
    margin: 16px 0;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 22px;
}

.markdown-body li {
    margin: 8px 0;
}

.markdown-body a {
    color: #ffb37f;
    text-decoration: underline;
    text-decoration-color: rgba(255, 179, 127, 0.45);
    text-underline-offset: 3px;
}

.auto-link {
    word-break: break-all;
}

.markdown-body strong {
    color: var(--text);
}

.markdown-body code {
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-code);
    color: #ffd0ac;
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.92em;
}

.inline-command-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 2px;
}

.inline-command-copy {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.inline-code-link code {
    color: #ffd0ac;
}

.markdown-body pre {
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--bg-code);
}

.code-block-wrap {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-code);
}

.code-block-wrap pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.code-block-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.035);
}

.code-block-lang {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.copy-code-button {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
}

.markdown-body pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.markdown-body blockquote {
    padding: 16px 18px;
    border-left: 3px solid var(--accent);
    background: rgba(255, 122, 38, 0.06);
    border-radius: 0 16px 16px 0;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
    border-style: hidden;
    box-shadow: 0 0 0 1px var(--line);
}

.markdown-body th,
.markdown-body td {
    padding: 14px 16px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.markdown-body th {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--line);
}

.markdown-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #0f1419;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.markdown-body img.is-broken {
    display: none;
}

.markdown-body figure {
    margin: 24px 0;
}

.markdown-body figcaption {
    margin-top: -4px;
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
}

.image-fallback {
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px dashed rgba(255, 122, 38, 0.35);
    border-radius: 16px;
    color: var(--text-soft);
    background: rgba(255, 122, 38, 0.05);
    text-align: center;
}

.doc-error {
    padding: 22px;
    border-radius: 18px;
    border: 1px solid rgba(255, 122, 38, 0.35);
    background: rgba(255, 122, 38, 0.08);
    color: var(--text);
}

.doc-error p {
    margin: 0 0 12px;
    color: var(--text-muted);
}

.term-highlight {
    background: rgba(255, 122, 38, 0.16);
    color: var(--text);
    padding: 0 2px;
    border-radius: 4px;
}

.search-highlight {
    background: rgba(255, 208, 92, 0.88);
    color: #1a1308;
    padding: 0 2px;
    border-radius: 4px;
}

.search-target {
    outline: 1px solid rgba(255, 122, 38, 0.42);
    box-shadow: 0 0 0 6px rgba(255, 122, 38, 0.08);
    border-radius: 14px;
    transition: box-shadow 0.25s ease, outline-color 0.25s ease;
}

.search-target-focus {
    outline: 1px solid var(--accent-line);
    box-shadow: 0 0 0 8px rgba(255, 122, 38, 0.08);
    border-radius: 16px;
    transition: box-shadow 0.22s ease, outline-color 0.22s ease;
}

.search-open {
    overflow: hidden;
}

.search-results mark {
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(255, 208, 92, 0.88);
    color: #1a1308;
}

.search-target-focus {
    animation: flashTarget 1.4s ease-out;
}

.pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.pager-card {
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.pager-card-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pager-card-title {
    margin-top: 10px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
}

.pager-card-summary {
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 14px;
}

.pager-card--empty {
    opacity: 0.45;
    pointer-events: none;
}

.fallback-page {
    min-height: 100vh;
    display: grid;
    align-items: center;
}

.fallback-card {
    padding: 36px;
    display: grid;
    gap: 18px;
}

.fallback-code {
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.fallback-title {
    margin: 0;
    font-size: clamp(42px, 8vw, 74px);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.fallback-lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 56ch;
}

.fallback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 1080px) {
    .hero-panel,
    .home-systems,
    .doc-hero,
    .reader-grid,
    .asset-board,
    .feature-card {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        min-height: auto;
        padding: 30px;
        gap: 26px;
    }

    .hero-copy,
    .hero-visual {
        min-height: auto;
    }

    .hero-visual-stage {
        min-height: 520px;
    }

    .hero-status-notes {
        position: relative;
        top: auto;
        left: auto;
        max-width: none;
        margin-bottom: 20px;
    }

    .hero-screen-shell {
        width: 100%;
        margin: 0;
        transform: none;
    }

    .hero-signal-bars {
        left: auto;
        right: 10px;
        bottom: 14px;
    }

    .toc-panel {
        position: static;
    }

    .portal-card--primary,
    .portal-card--wide,
    .portal-card--compact {
        grid-column: span 12;
    }

    .feature-strip,
    .resource-grid,
    .site-footer {
        grid-template-columns: 1fr;
    }

    .system-card--wide {
        grid-row: auto;
    }
}

@media (max-width: 820px) {
    .site-shell,
    .reader-shell,
    .guide-shell,
    .fallback-shell {
        width: min(var(--page-width), calc(100vw - 22px));
    }

    .site-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-telemetry {
        display: none;
    }

    .site-nav {
        justify-content: flex-start;
    }

    .hero-copy,
    .hero-visual,
    .system-card,
    .guide-hero,
    .doc-hero,
    .doc-panel,
    .toc-panel,
    .fallback-card,
    .feature-card,
    .feature-tile,
    .resource-card {
        padding: 22px;
    }

    .hero-panel .hero-copy,
    .hero-panel .hero-visual {
        padding: 0;
    }

    .guide-grid,
    .pager {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        gap: 18px;
        padding: 24px;
    }

    .hero-route {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .hero-route-tail {
        grid-column: 2;
        justify-self: start;
    }

    .hero-sequence {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .hero-visual-stage {
        min-height: 440px;
        padding: 22px;
    }

    .hero-status-notes span {
        width: 100%;
    }

    .hero-signal-bars {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 18px;
        left: auto;
        height: 52px;
    }

    .hero-console-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .terminal-line,
    .doc-hud-row,
    .toc-hud-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .toc-hud {
        padding-left: 20px;
    }

    .toc-list a.is-active::after {
        display: none;
    }

    .hero-console-value {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .terminal-line {
        grid-template-columns: 8px minmax(0, 1fr);
        gap: 8px 10px;
        align-items: start;
    }

    .terminal-line-label,
    .terminal-line-text,
    .terminal-line-tail {
        grid-column: 2;
    }

    .terminal-line-text {
        white-space: normal;
    }

    .doc-hud-row,
    .toc-hud-row,
    .footer-telemetry {
        flex-direction: column;
        align-items: flex-start;
    }

    .toc-progress-rail {
        width: 100%;
        height: 10px;
    }

    .toc-progress-rail i {
        left: 1px;
        top: 1px;
        bottom: 1px;
        right: auto;
        width: calc(100% - 2px);
        height: auto;
        transform-origin: left center;
        transform: scaleX(0.06);
        transition: transform 0.28s var(--ease-terminal);
    }

    .feature-tile {
        grid-template-columns: 1fr;
    }

    .site-footer-links {
        justify-content: flex-start;
    }

    .icon-rack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-radar {
        width: 100%;
    }

    .guide-card-header {
        flex-wrap: wrap;
    }
    .reader-activity-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .reader-activity-bars {
        height: 20px;
    }

    .system-card--icons .icon-rack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .official-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doc-toolbar,
    .toolbar-search,
    .search-results-header,
    .search-results-head,
    .search-result-top {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-status {
        margin-top: -4px;
    }

    .site-search-panel {
        margin-top: 16px;
        padding: 18px;
    }

    .guide-card-title {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}
.reader-page {
    background:
        radial-gradient(circle at top right, rgba(255, 122, 38, 0.08), transparent 40%),
        linear-gradient(160deg, #07090e, #0c1015 45%, #0b0d10);
}

.reader-shell {
    border-radius: 32px;
    padding: 24px 0 40px;
    position: relative;
    overflow: hidden;
}

.reader-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.015),
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.01),
            rgba(255, 255, 255, 0.01) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity: 0.06;
    pointer-events: none;
    animation: scanlineShift 24s linear infinite;
    z-index: 0;
}

.topbar-telemetry,
.footer-telemetry,
.frame-corners {
    display: none !important;
}

.site-topbar::after,
.hero-title::after,
.guide-title::after,
.doc-title::after,
.guide-metrics span::before,
.guide-metrics span::after,
.doc-status-strip span::before,
.doc-status-strip span::after,
.hero-console-track i,
.terminal-panel,
.terminal-panel::before,
.terminal-panel::after,
.terminal-line,
.terminal-line-state,
.reader-activity-rail::before,
.reader-activity-rail::after,
.reader-activity-bars i,
.toc-hud::before,
.toc-hud::after,
.toc-panel::after,
.toc-list a.is-active::before,
.heading-live,
.heading-live::before,
.scanline-overlay,
.scanline-overlay::after,
.reader-shell::after {
    animation: none !important;
}

.home-page {
    padding-bottom: 80px;
    background:
        radial-gradient(circle at top right, rgba(255, 122, 38, 0.08), transparent 26%),
        radial-gradient(circle at 20% 0%, rgba(132, 188, 206, 0.08), transparent 22%),
        linear-gradient(180deg, #080b10 0%, #0d1117 48%, #10161d 100%);
}

.home-page::before,
.home-page::after {
    display: none;
}

.home-page .site-shell {
    width: min(1280px, calc(100vw - 32px));
}

.home-page .site-topbar {
    margin-top: 18px;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(8, 11, 15, 0.82);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.home-main {
    display: grid;
    gap: 26px;
    padding-top: 24px;
}

.home-hero,
.guide-overview,
.doc-shelf,
.reference-media,
.reference-list {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    gap: 28px;
    padding: 34px;
    border-radius: 32px;
    align-items: stretch;
}

.home-hero-copy {
    display: grid;
    align-content: start;
    gap: 18px;
}

.home-brand-note {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-hero-title {
    margin: 0;
    max-width: 10ch;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.home-hero-lead {
    margin: 0;
    max-width: 54ch;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.78;
}

.home-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 2px 0 0;
}

.home-hero-meta div {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.home-hero-meta dt {
    margin: 0 0 8px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-hero-meta dd {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
}

.home-hero-media {
    display: grid;
    gap: 16px;
}

.home-shot-wrap {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 28px;
    background: rgba(7, 10, 14, 0.72);
}

.home-shot-wrap--sim {
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 122, 38, 0.14), transparent 22%),
        radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.04), transparent 26%),
        rgba(8, 10, 13, 0.92);
}

.home-shot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-shot-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-shot-mode {
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-shot {
    width: 100%;
    aspect-ratio: 862 / 532;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: #0f1419;
    object-fit: contain;
    object-position: center;
}

.flipper-sim {
    display: grid;
    gap: 10px;
}

.flipper-sim:focus,
.flipper-sim:focus-visible {
    outline: none;
}

.flipper-sim-stage {
    position: relative;
    padding: 6px 0 2px;
    background: transparent;
    overflow: visible;
}

.flipper-sim-shell {
    position: relative;
    width: min(100%, 612px);
    margin-inline: auto;
    aspect-ratio: 360 / 156;
    background: url("../official/brand/flipper-device.svg") center / contain no-repeat;
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.36));
    transform: translateZ(0);
    transition: transform 180ms ease, filter 180ms ease;
    animation: flipperHeroSettle 760ms cubic-bezier(.22, 1, .36, 1) both;
}

.flipper-sim:hover .flipper-sim-shell,
.flipper-sim:focus-within .flipper-sim-shell {
    transform: translateY(-1px);
    filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.42));
}

.flipper-sim-screen {
    position: absolute;
    left: 26%;
    top: 14.1%;
    width: 35.5%;
    height: 46.8%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px;
    border-radius: 5px;
    background:
        linear-gradient(180deg, #d4dbc8, #c5ccb9 52%, #b1b9a6);
    font-family: "ProggySquare", "SFMono-Regular", "Menlo", "Consolas", monospace;
    color: #11150f;
    box-shadow:
        inset 0 0 0 1px rgba(31, 35, 28, 0.68),
        inset 0 0 0 2px rgba(241, 245, 234, 0.28);
    overflow: hidden;
}

.flipper-sim-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.02) 28%, rgba(0, 0, 0, 0.04)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.06));
    opacity: 0.42;
    pointer-events: none;
}

.flipper-sim-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    opacity: 0;
    transform: translateY(-108%);
    pointer-events: none;
}

.flipper-sim[data-booted="true"] .flipper-sim-screen::after {
    animation: flipperBootSweep 1.05s cubic-bezier(.22, 1, .36, 1);
}

.flipper-sim-status,
.flipper-sim-softkeys {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 7px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flipper-sim-status {
    min-height: 13px;
    padding: 1px 4px 0;
    border-radius: 2px;
    background: #121611;
    color: #eff4e9;
}

.flipper-sim-status-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.flipper-sim-status-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.flipper-sim-signal,
.flipper-sim-battery {
    position: relative;
    display: inline-block;
}

.flipper-sim-signal {
    width: 8px;
    height: 6px;
    background:
        linear-gradient(#eff4e9 0 0) left bottom / 1px 2px no-repeat,
        linear-gradient(#eff4e9 0 0) 2px bottom / 1px 3px no-repeat,
        linear-gradient(#eff4e9 0 0) 4px bottom / 1px 4px no-repeat,
        linear-gradient(#eff4e9 0 0) 6px bottom / 1px 6px no-repeat;
    opacity: 0.92;
}

.flipper-sim-battery {
    width: 10px;
    height: 6px;
    box-sizing: border-box;
    border: 1px solid #eff4e9;
    border-radius: 1px;
}

.flipper-sim-battery::before {
    content: "";
    position: absolute;
    inset: 1px 3px 1px 1px;
    background: #eff4e9;
}

.flipper-sim-battery::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 1px;
    width: 1px;
    height: 3px;
    background: #eff4e9;
}

.flipper-sim-breadcrumb {
    display: none;
}

.flipper-sim-screen-body {
    position: relative;
    z-index: 1;
    min-height: 0;
}

.flipper-sim-menu {
    position: relative;
    display: grid;
    gap: 2px;
    align-content: start;
    min-height: 0;
    padding-right: 8px;
}

.flipper-sim-menu[data-scrollable="true"]::before,
.flipper-sim-menu[data-scrollable="true"]::after {
    content: "";
    position: absolute;
    right: 0;
    border-radius: 999px;
}

.flipper-sim-menu[data-scrollable="true"]::before {
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: rgba(18, 22, 17, 0.14);
}

.flipper-sim-menu[data-scrollable="true"]::after {
    top: var(--scroll-thumb-top, 2px);
    width: 3px;
    height: var(--scroll-thumb-height, 12px);
    background: #121611;
}

.flipper-sim-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) 8px;
    gap: 3px;
    align-items: center;
    width: 100%;
    min-height: 11px;
    padding: 1px 4px 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #131712;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 120ms steps(2, end), color 120ms steps(2, end);
}

.flipper-sim-item::before {
    content: ">";
    opacity: 0;
    color: currentColor;
}

.flipper-sim-item.is-parent::after {
    content: ">";
    justify-self: end;
    color: currentColor;
    opacity: 0.7;
}

.flipper-sim-item strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.flipper-sim-item span {
    display: none;
}

.flipper-sim-item.is-active {
    background: #121611;
    color: #eff4e9;
}

.flipper-sim-item.is-active::before {
    opacity: 1;
}

.flipper-sim-detail {
    position: absolute;
    inset: 0;
    display: none;
    align-content: start;
    padding: 4px;
    background: linear-gradient(180deg, rgba(212, 219, 200, 0.96), rgba(183, 191, 169, 0.98));
}

.flipper-sim[data-page-open="true"] .flipper-sim-detail {
    display: grid;
}

.flipper-sim.is-refreshing .flipper-sim-menu {
    animation: flipperScreenRefresh 140ms steps(2, end);
}

.flipper-sim.is-refreshing .flipper-sim-detail {
    animation: flipperDetailRefresh 160ms steps(2, end);
}

.flipper-sim-page {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    align-content: start;
    min-height: 100%;
    padding: 3px 3px 0;
}

.flipper-sim-page-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) saturate(0);
    opacity: 0.92;
    image-rendering: pixelated;
}

.flipper-sim-page-copy {
    display: grid;
    gap: 3px;
}

.flipper-sim-detail strong {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #11150f;
}

.flipper-sim-detail p {
    margin: 0;
    font-size: 7px;
    line-height: 1.35;
    color: rgba(17, 21, 15, 0.9);
}

.flipper-sim-detail .flipper-sim-detail-meta {
    margin: 0;
    color: rgba(17, 21, 15, 0.58);
    font-size: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flipper-sim-detail-tags {
    display: none;
}

.flipper-sim-detail-tags span {
    display: none;
}

.flipper-sim-led {
    position: absolute;
    left: 66.20%;
    top: 60.31%;
    width: clamp(5px, 1.2%, 8px);
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--sim-led-color, #8effac);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 6px var(--sim-led-glow, rgba(142, 255, 172, 0.35));
    opacity: 0.82;
    animation: flipperLedBreathe 2.4s ease-in-out infinite;
    pointer-events: none;
}

.flipper-sim.is-led-pulse .flipper-sim-led {
    animation: flipperLedPing 280ms cubic-bezier(.22, 1, .36, 1);
}

.flipper-sim[data-led="main"] {
    --sim-led-color: #f8b866;
    --sim-led-glow: rgba(248, 184, 102, 0.34);
}

.flipper-sim[data-led="desktop"] {
    --sim-led-color: #8effac;
    --sim-led-glow: rgba(142, 255, 172, 0.34);
}

.flipper-sim[data-led="build"] {
    --sim-led-color: #f6d36b;
    --sim-led-glow: rgba(246, 211, 107, 0.32);
}

.flipper-sim[data-led="protocols"] {
    --sim-led-color: #7fd7ff;
    --sim-led-glow: rgba(127, 215, 255, 0.3);
}

.flipper-sim[data-led="docs"] {
    --sim-led-color: #f4a4ff;
    --sim-led-glow: rgba(244, 164, 255, 0.28);
}

.flipper-sim[data-led="leaf"] {
    --sim-led-color: #ffffff;
    --sim-led-glow: rgba(255, 255, 255, 0.26);
}

.flipper-hit {
    position: absolute;
    z-index: 1;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    color: transparent;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.flipper-hit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: center / contain no-repeat var(--button-outline);
    opacity: 0;
    transform: rotate(var(--button-rotate, 0deg)) scale(0.94);
    transition: transform 140ms ease, opacity 140ms ease;
}

.flipper-hit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: center / contain no-repeat var(--button-down);
    opacity: 0;
    transform: rotate(var(--button-rotate, 0deg)) scale(0.9);
    transition: transform 140ms ease, opacity 140ms ease;
}

.flipper-hit:hover::before,
.flipper-hit:focus-visible::before {
    opacity: 0.66;
    transform: rotate(var(--button-rotate, 0deg)) scale(1);
}

.flipper-hit.is-pressed::after {
    opacity: 1;
    transform: rotate(var(--button-rotate, 0deg)) scale(1);
}

.flipper-hit:focus-visible {
    outline: none;
}

.flipper-hit--up {
    left: 71.8%;
    top: 16.6%;
    width: 9.2%;
    height: 17%;
    z-index: 2;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle_down.svg");
    --button-rotate: 180deg;
}

.flipper-hit--down {
    left: 71.8%;
    top: 43.8%;
    width: 9.2%;
    height: 17%;
    z-index: 2;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle_down.svg");
}

.flipper-hit--left {
    left: 66.7%;
    top: 30.2%;
    width: 9.2%;
    height: 17%;
    z-index: 2;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle_down.svg");
    --button-rotate: 90deg;
}

.flipper-hit--right {
    left: 76.9%;
    top: 30.2%;
    width: 9.2%;
    height: 17%;
    z-index: 2;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/triangle_down.svg");
    --button-rotate: -90deg;
}

.flipper-hit--ok {
    left: 72.2%;
    top: 31.1%;
    width: 8.8%;
    height: 15%;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/circle.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/circle_down.svg");
}

.flipper-hit--back {
    left: 89.1%;
    top: 44%;
    width: 6.8%;
    height: 14%;
    z-index: 2;
    --button-outline: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/back.svg");
    --button-down: url("../../Wiki-Resources/Official-Source-Repos/qflipper/application/assets/gfx/controls/dpad/back_down.svg");
}

.flipper-sim-pad {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.flipper-pad-key {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flipper-pad-key--accent {
    border-color: rgba(255, 122, 38, 0.28);
    background: rgba(255, 122, 38, 0.14);
}

@keyframes flipperHeroSettle {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flipperLedBreathe {
    0%,
    100% {
        opacity: 0.68;
        transform: translate(-50%, -50%) scale(0.98);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes flipperLedPing {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.96);
    }
    45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.28);
    }
    100% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes flipperScreenRefresh {
    from {
        opacity: 0.84;
    }
    to {
        opacity: 1;
    }
}

@keyframes flipperDetailRefresh {
    from {
        opacity: 0.78;
    }
    to {
        opacity: 1;
    }
}

@keyframes flipperBootSweep {
    0% {
        opacity: 0;
        transform: translateY(-108%);
    }
    20% {
        opacity: 0.22;
    }
    100% {
        opacity: 0;
        transform: translateY(118%);
    }
}

.home-shot-caption {
    display: grid;
    gap: 8px;
}

.home-shot-caption strong {
    font-size: 18px;
    line-height: 1.28;
}

.home-shot-caption p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.home-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-path {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-fast) var(--ease-fluid), background var(--motion-fast) var(--ease-fluid);
}

.home-path:hover,
.home-path:focus-visible,
.doc-shelf-list a:hover,
.doc-shelf-list a:focus-visible,
.guide-overview-list a:hover,
.guide-overview-list a:focus-visible,
.reference-link:hover,
.reference-link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    background: rgba(255, 255, 255, 0.03);
}

.home-path-step,
.home-path-tail,
.guide-overview-index {
    color: rgba(152, 198, 214, 0.84);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-path-copy {
    display: grid;
    gap: 6px;
}

.home-path-copy strong {
    font-size: 20px;
    line-height: 1.16;
}

.home-path-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.home-block {
    display: grid;
    gap: 18px;
}

.docs-hub {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 18px;
}

.guide-overview,
.doc-shelf,
.reference-list {
    border-radius: 28px;
    overflow: hidden;
}

.guide-overview {
    padding: 24px;
}

.guide-overview-head {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.guide-overview-head h3,
.doc-shelf h3,
.reference-list h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.guide-overview-head p,
.doc-shelf-head p,
.reference-list p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.guide-overview-list,
.doc-shelf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-overview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.guide-overview-list a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-fast) var(--ease-fluid), background var(--motion-fast) var(--ease-fluid);
}

.guide-overview-copy {
    display: grid;
    gap: 4px;
}

.guide-overview-copy strong {
    font-size: 16px;
    line-height: 1.3;
}

.guide-overview-copy span {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}

.docs-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.doc-shelf {
    padding: 22px;
}

.doc-shelf-head {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.doc-shelf-list {
    display: grid;
    gap: 10px;
}

.doc-shelf-list a {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-fast) var(--ease-fluid), background var(--motion-fast) var(--ease-fluid);
}

.doc-shelf-list strong {
    font-size: 16px;
    line-height: 1.32;
}

.doc-shelf-list span {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.reference-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 18px;
}

.reference-media-grid {
    display: grid;
    gap: 18px;
}

.reference-media {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    overflow: hidden;
}

.reference-media--shot {
    min-height: 100%;
}

.reference-media-image {
    display: block;
    width: 100%;
    height: 236px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f1419;
    object-fit: cover;
    object-position: center;
    transition: transform 420ms var(--ease-fluid), filter 420ms var(--ease-fluid);
}

.reference-media--shot .reference-media-image {
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    object-position: center;
}

.reference-media-image--usage {
    object-position: center 38%;
}

.reference-media-image--labs {
    object-position: center 32%;
}

.reference-media-visual {
    min-height: 236px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top left, rgba(255, 122, 38, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        #0f1419;
    display: grid;
    gap: 16px;
    overflow: hidden;
}

.reference-media--shot .reference-media-visual {
    min-height: 380px;
    align-content: space-between;
}

.reference-visual-head,
.reference-visual-footer,
.reference-rail,
.reference-icon-row,
.reference-protocol-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.reference-visual-kicker,
.reference-visual-mode,
.reference-rail span,
.reference-protocol-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reference-visual-mode {
    margin-left: auto;
}

.reference-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reference-icon-tile,
.reference-mini-icon {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.reference-icon-tile {
    min-height: 88px;
    padding: 16px;
    border-radius: 18px;
    display: grid;
    gap: 12px;
    align-content: space-between;
}

.reference-icon-tile img,
.reference-mini-icon img,
.reference-device-mark img {
    display: block;
}

.reference-icon-tile strong {
    font-size: 15px;
    line-height: 1.2;
}

.reference-visual-footer {
    gap: 8px;
}

.reference-visual-footer span {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.reference-media-visual--build,
.reference-media-visual--usage {
    align-content: space-between;
}

.reference-mini-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reference-media-visual--usage {
    background:
        radial-gradient(circle at top right, rgba(93, 255, 219, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        #0f1419;
}

.reference-protocol-grid span {
    font-size: 11px;
}

.reference-device-mark {
    align-self: end;
    justify-self: center;
    width: min(180px, 72%);
    opacity: 0.9;
}

.reference-media-copy {
    display: grid;
    gap: 8px;
}

.reference-media-copy strong {
    font-size: 20px;
    line-height: 1.2;
}

.reference-media-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.68;
}

.reference-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.reference-list {
    padding: 22px;
    display: grid;
    gap: 14px;
}

.reference-links {
    display: grid;
    gap: 10px;
}

.reference-link {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform var(--motion-fast) var(--ease-fluid), border-color var(--motion-fast) var(--ease-fluid), background var(--motion-fast) var(--ease-fluid);
}

.reference-link strong {
    font-size: 16px;
    line-height: 1.3;
}

.reference-link span {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.reference-media:hover .reference-media-image,
.reference-media:focus-visible .reference-media-image {
    transform: scale(1.04);
    filter: saturate(1.04) contrast(1.02);
}

.home-page .site-footer {
    margin-top: 0;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
}

.home-page .site-footer-links {
    justify-content: flex-start;
}

@media (max-width: 1080px) {
    .home-hero,
    .docs-hub,
    .reference-showcase,
    .reference-columns {
        grid-template-columns: 1fr;
    }

    .docs-columns,
    .home-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-media--shot .reference-media-image,
    .reference-media--shot .reference-media-visual {
        min-height: 320px;
    }

}

@media (max-width: 820px) {
    .home-main {
        gap: 18px;
    }

    .home-hero,
    .guide-overview,
    .doc-shelf,
    .reference-media,
    .reference-list {
        padding: 22px;
    }

    .home-hero-title {
        max-width: none;
        font-size: clamp(36px, 9vw, 52px);
    }

    .home-shot-wrap--sim {
        padding: 18px;
    }

    .home-hero-meta,
    .home-strip,
    .docs-columns,
    .guide-overview-list {
        grid-template-columns: 1fr;
    }

    .home-path {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .home-path-tail {
        grid-column: 2;
    }

    .reference-media-image,
    .reference-media-visual {
        min-height: 220px;
        height: auto;
    }

    .reference-media--shot .reference-media-image,
    .reference-media--shot .reference-media-visual {
        min-height: 260px;
    }

    .flipper-sim-screen {
        padding: 4px;
    }

    .flipper-sim-item {
        min-height: 10px;
    }

    .flipper-sim-page {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 5px;
    }

    .flipper-sim-page-icon {
        width: 16px;
        height: 16px;
    }

    .reference-visual-head,
    .reference-visual-footer,
    .reference-rail,
    .reference-icon-row,
    .reference-protocol-grid {
        gap: 8px;
    }

    .reference-visual-mode {
        margin-left: 0;
    }

    .reference-icon-tile {
        min-height: 74px;
    }
}

@media (max-width: 640px) {
    .home-hero-title {
        font-size: clamp(30px, 10vw, 38px);
        line-height: 0.96;
    }

    .home-hero-lead {
        font-size: 15px;
        line-height: 1.65;
    }

    .home-shot-wrap--sim {
        padding: 16px;
    }

    .flipper-sim-shell {
        width: min(100%, 420px);
        margin-inline: auto;
    }

    .flipper-sim-screen {
        padding: 3px;
        gap: 3px;
    }

    .flipper-sim-status,
    .flipper-sim-softkeys {
        font-size: 7px;
    }

    .flipper-sim-item {
        min-height: 10px;
    }

    .flipper-sim-item strong,
    .flipper-sim-detail strong {
        font-size: 8px;
    }

    .flipper-sim-status,
    .flipper-sim-detail .flipper-sim-detail-meta {
        font-size: 6px;
    }

    .flipper-sim-detail p {
        font-size: 7px;
        line-height: 1.3;
    }

    .flipper-sim-page {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 4px;
    }

    .flipper-sim-page-icon {
        width: 14px;
        height: 14px;
    }

    .flipper-sim-pad {
        display: grid;
    }

    .flipper-sim-led {
        width: 8px;
    }
}

@media (pointer: coarse) {
    .flipper-sim-pad {
        display: grid;
    }

    .flipper-pad-key {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flipper-sim-shell,
    .flipper-sim-screen::after,
    .flipper-sim-menu,
    .flipper-sim-detail,
    .flipper-sim-led {
        animation: none !important;
    }

    .flipper-sim-shell,
    .flipper-hit::before,
    .flipper-hit::after,
    .reference-media-image {
        transition: none !important;
    }
}