:root {
    /* Design tokens: Interaction — Blur-Focus Transitions:** Transitions:* Transitions: Interface:** Interface:* Interface: IntersectionObserver` for scroll-triggered blur-focus reveals with `threshold: 0.4`. The transition uses `ease-out` timing. Deep Space Charcoal | #12162f | Space Grotesk" (Google Fonts */
    --color-bg-primary: #0a0e27;
    --color-bg-secondary: #12162f;
    --color-accent-magenta: #ff2d6b;
    --color-accent-cyan: #00e5ff;
    --color-accent-yellow: #ffd600;
    --color-text-silver: #b8c4d0;
    --color-text-navy: #0a0e27;
    --color-white: #ffffff;
    --color-halftone-magenta: rgba(255, 45, 107, 0.08);
    --color-hud-cyan: rgba(0, 229, 255, 0.4);
    --color-cyan-dim: rgba(0, 229, 255, 0.6);
    --color-cyan-faint: rgba(0, 229, 255, 0.18);
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background: var(--color-bg-primary);
    color: var(--color-text-silver);
    font-family: "Space Grotesk", Inter, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 229, 255, 0.03) 2px, rgba(0, 229, 255, 0.03) 4px);
}

.crt-glass {
    position: fixed;
    inset: 0;
    z-index: 110;
    pointer-events: none;
    border-radius: 0;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(0, 229, 255, 0.1);
    transition: border-radius 600ms ease-out, filter 600ms ease-out, box-shadow 600ms ease-out;
}

body.powerdown .crt-glass {
    border-radius: 6vw / 4vh;
    filter: brightness(0.72) contrast(1.2);
    box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.82), inset 0 0 38px rgba(255, 255, 255, 0.08);
}

.hud-frame {
    position: fixed;
    inset: 20px;
    z-index: 130;
    pointer-events: none;
    border: 2px solid var(--color-hud-cyan);
    transition: inset 600ms ease-out, opacity 600ms ease-out;
}

body.powerdown .hud-frame {
    inset: 42px;
    opacity: 0.75;
}

.hud-frame::before,
.hud-frame::after,
.corner {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: var(--color-accent-cyan);
    border-style: solid;
    animation: flicker 4s ease-in-out infinite;
}

.hud-frame::before {
    top: -11px;
    left: -11px;
    border-width: 2px 0 0 2px;
}

.hud-frame::after {
    right: -11px;
    bottom: -11px;
    border-width: 0 2px 2px 0;
}

.corner-tr {
    top: -11px;
    right: -11px;
    border-width: 2px 2px 0 0;
}

.corner-bl {
    left: -11px;
    bottom: -11px;
    border-width: 0 0 2px 2px;
}

.section-indicators {
    position: fixed;
    top: 50%;
    right: 30px;
    z-index: 140;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-50%);
}

.section-indicator {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-accent-cyan);
    background: transparent;
    cursor: pointer;
    transition: background-color 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
}

.section-indicator:hover {
    animation: pulse 2s ease-in-out infinite;
}

.section-indicator.active {
    border-color: var(--color-accent-magenta);
    background: var(--color-accent-magenta);
    box-shadow: 0 0 14px var(--color-accent-magenta);
}

.scroll-container {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.panel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--color-bg-primary);
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--color-accent-magenta) 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.08;
}

.panel::after {
    content: attr(data-code) " / MUJUN.WORK / 矛盾";
    position: absolute;
    right: 84px;
    bottom: 42px;
    color: var(--color-cyan-dim);
    font-family: "Share Tech Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    opacity: 0.68;
}

.panel-02,
.panel-04 {
    background: var(--color-bg-primary);
}

.panel-03 {
    background: var(--color-bg-secondary);
}

.panel-content {
    position: relative;
    z-index: 2;
    width: min(90%, 900px);
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    filter: blur(12px);
    transition: opacity 600ms ease-out, filter 600ms ease-out;
}

.panel-content.reveal {
    opacity: 1;
    filter: blur(0);
}

.panel-content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.panel-content.reveal > * {
    opacity: 1;
    transform: translateY(0);
}

.panel-content.reveal > :nth-child(1) { transition-delay: 0ms; }
.panel-content.reveal > :nth-child(2) { transition-delay: 120ms; }
.panel-content.reveal > :nth-child(3) { transition-delay: 240ms; }
.panel-content.reveal > :nth-child(4) { transition-delay: 360ms; }

.bracketed::before,
.bracketed::after {
    content: "";
    position: absolute;
    width: 42px;
    height: 42px;
    pointer-events: none;
    border-color: var(--color-accent-cyan);
    border-style: solid;
    opacity: 0.72;
}

.bracketed::before {
    top: -22px;
    left: -22px;
    border-width: 2px 0 0 2px;
}

.bracketed::after {
    right: -22px;
    bottom: -22px;
    border-width: 0 2px 2px 0;
}

.headline,
.headline-end {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-magenta);
    -webkit-text-stroke: 3px var(--color-text-navy);
    text-stroke: 3px var(--color-text-navy);
}

.headline {
    grid-column: 1 / -1;
    font-size: clamp(4rem, 10vw, 9rem);
    transform: scale(1.15);
    transition: transform 600ms ease-out, opacity 600ms ease-out;
}

.panel-content.reveal .headline {
    transform: scale(1);
}

.panel-02 .headline,
.panel-04 .headline {
    color: var(--color-accent-cyan);
}

.panel-03 .headline {
    color: var(--color-accent-yellow);
}

p {
    color: var(--color-text-silver);
    font-family: "Space Grotesk", Inter, sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
}

.copy-block {
    padding: 18px 0 18px 18px;
    border-left: 2px solid var(--color-hud-cyan);
}

.copy-block p + p {
    margin-top: 1rem;
}

.hud-data,
.transmission-strip,
.module-label,
.data-scroll,
.gauge-label,
.shutdown-readout {
    font-family: "Share Tech Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.content-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
}

.definition-prose,
.contradiction-text {
    grid-column: 1 / 5;
}

.reticle-container,
.clock-print {
    grid-column: 5 / 7;
}

.hero-content {
    min-height: 58vh;
    flex-direction: column;
    text-align: center;
}

.workbench-print {
    position: absolute;
    inset: -12vh -10vw;
    z-index: -1;
    overflow: hidden;
    border: 4px solid var(--color-text-navy);
    background: var(--color-accent-cyan);
    opacity: 0.5;
    mix-blend-mode: screen;
}

.duotone-illustration {
    filter: grayscale(100%) contrast(1.3) brightness(1.1);
    transition: filter 400ms ease-out, background-color 400ms ease-out;
}

.duotone-illustration::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--color-accent-magenta), var(--color-accent-cyan));
    mix-blend-mode: screen;
    opacity: 0.78;
    transition: background 400ms ease-out;
}

.duotone-illustration:hover::after {
    background: linear-gradient(to bottom, var(--color-accent-yellow), var(--color-bg-primary));
}

.bench-line,
.tool-handle,
.tool-head,
.hand,
.key-grid {
    position: absolute;
    display: block;
    background: var(--color-bg-primary);
}

.line-a {
    left: -10%;
    top: 64%;
    width: 120%;
    height: 18px;
    transform: rotate(-5deg);
}

.line-b {
    left: -8%;
    top: 74%;
    width: 120%;
    height: 10px;
    transform: rotate(3deg);
}

.tool-handle {
    left: 24%;
    top: 39%;
    width: 34%;
    height: 22px;
    transform: rotate(-24deg);
}

.tool-head {
    left: 52%;
    top: 28%;
    width: 13%;
    height: 80px;
    border-radius: 6px;
    transform: rotate(-24deg);
}

.hand {
    width: 29%;
    height: 24%;
    border: 5px solid var(--color-bg-primary);
    border-radius: 54% 46% 20% 20%;
    background: var(--color-accent-yellow);
}

.hand-left {
    left: 3%;
    top: 47%;
    transform: rotate(18deg);
}

.hand-right {
    right: 4%;
    top: 42%;
    transform: rotate(-16deg) scaleX(-1);
}

.key-grid {
    left: 39%;
    bottom: 13%;
    width: 30%;
    height: 18%;
    border: 4px solid var(--color-bg-primary);
    background-image: radial-gradient(circle, var(--color-bg-primary) 3px, transparent 4px);
    background-size: 18px 18px;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(5.5rem, 15vw, 13rem);
    text-shadow: 8px 8px 0 var(--color-accent-yellow), -5px -5px 0 var(--color-accent-cyan);
}

.corner-readout {
    margin-bottom: 18px;
    color: var(--color-cyan-dim);
    font-size: 0.75rem;
}

.transmission-strip {
    display: inline-block;
    margin-top: 22px;
    padding: 8px 12px;
    border: 2px solid var(--color-accent-cyan);
    background: var(--color-bg-primary);
    color: var(--color-cyan-dim);
    font-size: 0.7rem;
}

.scroll-prompt {
    position: absolute;
    bottom: -72px;
    left: 50%;
    transform: translateX(-50%);
}

.chevron-down {
    fill: none;
    stroke: var(--color-accent-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: chevron-pulse 2s ease-in-out infinite;
}

.hud-module {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-cyan-faint);
    background: rgba(10, 14, 39, 0.45);
}

.targeting-reticle {
    width: min(100%, 220px);
    height: auto;
    animation: rotate 20s linear infinite;
}

.targeting-reticle circle,
.targeting-reticle line,
.targeting-reticle path {
    fill: none;
    stroke: var(--color-accent-cyan);
    stroke-width: 2;
    opacity: 0.3;
}

.targeting-reticle .reticle-core {
    fill: var(--color-accent-cyan);
    opacity: 0.52;
}

.module-label {
    margin-top: 12px;
    color: var(--color-cyan-dim);
    font-size: 0.65rem;
    text-align: center;
}

.clock-print {
    position: relative;
    background: var(--color-accent-yellow);
}

.clock-face {
    position: relative;
    width: 150px;
    height: 150px;
    border: 5px solid var(--color-bg-primary);
    border-radius: 50%;
    background: var(--color-accent-yellow);
    box-shadow: 10px 10px 0 var(--color-accent-magenta);
}

.tick {
    position: absolute;
    background: var(--color-bg-primary);
}

.tick-12,
.tick-6 {
    left: 50%;
    width: 4px;
    height: 18px;
    margin-left: -2px;
}

.tick-12 { top: 10px; }
.tick-6 { bottom: 10px; }

.tick-3,
.tick-9 {
    top: 50%;
    width: 18px;
    height: 4px;
    margin-top: -2px;
}

.tick-3 { right: 10px; }
.tick-9 { left: 10px; }

.clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-accent-cyan);
    transform: translate(-50%, -50%);
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 3;
    background: var(--color-bg-primary);
    transform-origin: bottom center;
}

.hour-hand {
    width: 6px;
    height: 43px;
    margin-left: -3px;
    animation: rotate-hour 43200s linear infinite;
}

.minute-hand {
    width: 4px;
    height: 62px;
    margin-left: -2px;
    animation: rotate-minute 3600s linear infinite;
}

.signal-grid {
    text-align: center;
}

.hud-readout,
.signal-statement,
.data-scroll {
    grid-column: 1 / -1;
}

.gauges {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.gauge {
    position: relative;
    display: flex;
    width: 132px;
    height: 132px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gauge-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.track,
.meter {
    fill: none;
    stroke-width: 4;
}

.track {
    stroke: var(--color-cyan-faint);
}

.meter {
    stroke-linecap: round;
    stroke-dasharray: 314;
    animation: gauge-load 1400ms ease-out forwards;
}

.meter-a {
    stroke: var(--color-accent-magenta);
    stroke-dashoffset: 85;
}

.meter-b {
    stroke: var(--color-accent-yellow);
    stroke-dashoffset: 185;
}

.gauge-label {
    position: relative;
    z-index: 2;
    color: var(--color-cyan-dim);
    font-size: 0.65rem;
}

.gauge-value {
    position: relative;
    z-index: 2;
    color: var(--color-accent-magenta);
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 1.8rem;
}

.signal-statement {
    max-width: 730px;
    margin: 0 auto;
    border-left: 0;
    padding-left: 0;
    text-align: center;
}

.data-scroll {
    position: relative;
    height: 72px;
    overflow: hidden;
    color: var(--color-cyan-dim);
    font-size: 0.65rem;
}

.data-line {
    position: absolute;
    left: 0;
    right: 0;
    animation: scroll-up 8s linear infinite;
}

.data-line:nth-child(2) { animation-delay: 2s; }
.data-line:nth-child(3) { animation-delay: 4s; }
.data-line:nth-child(4) { animation-delay: 6s; }

.end-content {
    flex-direction: column;
    gap: 1.3rem;
    text-align: center;
}

.shutdown-readout {
    color: var(--color-cyan-dim);
    font-size: 0.7rem;
}

.headline-end {
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--color-accent-magenta);
}

.epitaph {
    max-width: 640px;
    text-align: center;
}

.end-frame {
    width: 220px;
    height: 2px;
    background: var(--color-accent-cyan);
    animation: end-contract 2600ms ease-out infinite;
}

.channel-glitch {
    animation: channel-distort 260ms linear;
}

.pulse-ring {
    position: fixed;
    z-index: 90;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.pulse-ring circle {
    fill: none;
    stroke: var(--color-accent-cyan);
    stroke-width: 1.5;
    animation: pulse-ring 800ms ease-out forwards;
}

.pulse-ring circle:nth-child(2) { animation-delay: 160ms; }
.pulse-ring circle:nth-child(3) { animation-delay: 320ms; }

@keyframes chevron-pulse {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(9px); opacity: 1; }
}

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

@keyframes rotate-hour {
    to { transform: rotate(360deg); }
}

@keyframes rotate-minute {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 4px var(--color-accent-cyan); }
    50% { box-shadow: 0 0 14px var(--color-accent-cyan); }
}

@keyframes flicker {
    0%, 42%, 52%, 100% { opacity: 0.7; }
    47% { opacity: 0.4; }
}

@keyframes scroll-up {
    0% { transform: translateY(78px); opacity: 0; }
    12%, 78% { opacity: 1; }
    100% { transform: translateY(-34px); opacity: 0; }
}

@keyframes gauge-load {
    from { stroke-dashoffset: 314; }
}

@keyframes channel-distort {
    0% { clip-path: inset(0 0 0 0); filter: brightness(1); }
    18% { clip-path: inset(12% 0 62% 0); filter: brightness(1.8); }
    38% { clip-path: inset(50% 0 20% 0); filter: contrast(1.6); }
    58% { clip-path: inset(8% 0 70% 0); filter: brightness(1.4); }
    100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}

@keyframes pulse-ring {
    from { r: 5px; opacity: 1; }
    to { r: 45px; opacity: 0; }
}

@keyframes end-contract {
    0%, 100% { width: 220px; opacity: 0.55; }
    50% { width: 118px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    body { overflow: hidden; }
    .hud-frame { inset: 10px; }
    .section-indicators { right: 15px; }
    .panel::after { right: 46px; bottom: 28px; }
    .panel-content { width: 82%; max-height: 84vh; }
    .content-grid { grid-template-columns: 1fr; gap: 1rem; }
    .headline { font-size: clamp(3.4rem, 16vw, 5.6rem); }
    .hero-title { font-size: clamp(4.8rem, 22vw, 8rem); }
    .definition-prose,
    .contradiction-text,
    .reticle-container,
    .clock-print,
    .hud-readout,
    .signal-statement,
    .data-scroll { grid-column: 1; }
    .hud-module { min-height: 170px; }
    .targeting-reticle { width: 160px; }
    .gauges { gap: 0.6rem; }
    .gauge { width: 104px; height: 104px; }
    p { font-size: 0.9rem; line-height: 1.5; }
}