:root {
    /* Interaction* Interaction:* Interaction:** IntersectionObserver. Implementation: a `<span data-target="47">` element that rapidly cycles its `textContent` through random digits (via `requestAnimationFrame` at 60fps for 1.8s Space Instrument Aesthetic (2% frequency */
    --void-black: #08080f;
    --panel-dark: #14141e;
    --channel: #0a0a12;
    --knob-dark: #2a2a3a;
    --metal-dark: #3a3a4a;
    --phosphor-green: #6a9b78;
    --steel-blue: #9cb8c8;
    --amber: #d4a040;
    --crimson: #c44b4b;
    --brass: #e8d5a3;
    --shadow-brown: #1a1507;
    --star-white: #d9d3c7;
    --body-copy: #b0a898;
}

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

html { scroll-behavior: smooth; scroll-snap-type: y proximity; background: var(--void-black); }

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "IBM Plex Sans", Inter, sans-serif;
    color: var(--body-copy);
    background:
        radial-gradient(circle at 16% 12%, rgba(156, 184, 200, 0.16), transparent 21rem),
        radial-gradient(circle at 83% 28%, rgba(212, 160, 64, 0.12), transparent 24rem),
        radial-gradient(circle at 54% 78%, rgba(106, 155, 120, 0.08), transparent 18rem),
        linear-gradient(135deg, #08080f 0%, #11111b 52%, #08080f 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 8% 14%, #d9d3c7 99%, transparent),
        radial-gradient(1px 1px at 21% 71%, #d9d3c7 99%, transparent),
        radial-gradient(1px 1px at 37% 23%, #9cb8c8 99%, transparent),
        radial-gradient(1px 1px at 52% 87%, #d9d3c7 99%, transparent),
        radial-gradient(1px 1px at 69% 18%, #d9d3c7 99%, transparent),
        radial-gradient(1px 1px at 81% 63%, #9cb8c8 99%, transparent),
        radial-gradient(1px 1px at 94% 38%, #d9d3c7 99%, transparent);
    opacity: 0.48;
    animation: starFlicker 6s ease-in-out infinite;
}

.machine-shell { position: relative; min-height: 100vh; }

.ceremony {
    margin-left: 86px;
    margin-right: 330px;
    padding: 6px;
    background: var(--channel);
    min-height: 100vh;
}

.stage {
    min-height: 100vh;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, auto);
    gap: 6px;
    padding-bottom: 6px;
}

.module {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(232, 213, 163, 0.11);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.12)),
        var(--panel-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.5);
}

.module::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(232, 213, 163, 0.025) 8px);
    mix-blend-mode: screen;
}

.hero-module { grid-column: span 5; min-height: calc(100vh - 12px); display: grid; place-items: center; align-content: center; gap: 34px; padding: clamp(28px, 5vw, 76px); }
.status-module { grid-column: span 1; min-height: calc(100vh - 12px); padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }

.eyebrow, .panel-title, .ticket-slot, .draw-caption, .metric-module span, .coordinate-module span {
    font-family: "Space Grotesk", Inter, sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.eyebrow { color: var(--steel-blue); font-size: clamp(0.72rem, 1.2vw, 0.9rem); }
.panel-title { color: var(--steel-blue); font-size: 0.72rem; font-weight: 700; margin-bottom: 18px; }

.logotype {
    font-family: Orbitron, "Space Grotesk", sans-serif;
    font-size: clamp(2.1rem, 6.6vw, 6.8rem);
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brass);
    text-shadow: 0 0 18px rgba(232,213,163,0.42), 0 4px 0 var(--shadow-brown);
}

.number-drum { display: flex; justify-content: center; gap: clamp(8px, 1.6vw, 18px); perspective: 1100px; }
.drum-face, .draw-cell {
    display: grid;
    place-items: center;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.10), transparent 16% 84%, rgba(0,0,0,0.25)),
        radial-gradient(ellipse at 50% 10%, rgba(232,213,163,0.12), transparent 42%),
        linear-gradient(180deg, #3a3a4a 0%, #14141e 47%, #08080f 100%);
    border: 1px solid rgba(232,213,163,0.24);
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.08), inset 0 -12px 20px rgba(0,0,0,0.35), 0 14px 34px rgba(0,0,0,0.45);
}
.drum-face { width: clamp(64px, 11vw, 132px); height: clamp(118px, 20vw, 218px); border-radius: 8px; animation: drumArrive 1100ms cubic-bezier(.2,.8,.2,1) both; }
.drum-face:nth-child(2) { animation-delay: 120ms; }
.drum-face:nth-child(3) { animation-delay: 240ms; }
.drum-face:nth-child(4) { animation-delay: 360ms; }
.counter { font-variant-numeric: tabular-nums; }
.drum-face span, .draw-cell span, .metric-module strong, .coordinate-module strong {
    font-family: Orbitron, sans-serif;
    color: var(--brass);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-shadow: 0 0 12px rgba(232,213,163,0.4), 0 3px 0 var(--shadow-brown);
}
.drum-face span { font-size: clamp(3rem, 8vw, 7rem); }
.ticket-slot { color: var(--phosphor-green); border: 1px solid rgba(106,155,120,0.42); background: #08080f; padding: 18px 28px; box-shadow: inset 0 0 22px rgba(106,155,120,0.08); }

.gauge { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(156,184,200,0.34); background: radial-gradient(circle, #14141e 0 48%, transparent 49%), conic-gradient(from 220deg, #6a9b78, #d4a040, #c44b4b, transparent 270deg); }
.needle { position: absolute; width: 44%; height: 2px; left: 50%; top: 50%; background: var(--crimson); transform-origin: left center; transform: rotate(-28deg); box-shadow: 0 0 10px rgba(196,75,75,0.8); }
.status-copy { line-height: 1.65; }

.history-stage { grid-template-rows: 1fr 1fr; }
.narrative-module { grid-column: span 3; padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.narrative-module.wide { grid-column: span 4; }
.section-heading { font-family: "Space Grotesk", Inter, sans-serif; color: var(--steel-blue); font-size: clamp(1.55rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 24px; }
.narrative-module p:not(.panel-title) { max-width: 60ch; font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.8; }
.metric-module, .coordinate-module { grid-column: span 2; padding: 30px; display: grid; place-items: center; align-content: center; text-align: center; }
.metric-module strong, .coordinate-module strong { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1; }
.redline { border-color: rgba(196,75,75,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.4), 0 0 24px rgba(196,75,75,0.08); }

.draw-stage { display: flex; }
.draw-module { width: 100%; min-height: calc(100vh - 12px); padding: clamp(28px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.draw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 34px 0; }
.draw-cell { min-height: clamp(105px, 16vw, 190px); border-radius: 6px; transform: translateY(24px); opacity: 0; transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease; }
.draw-cell.is-lit { transform: translateY(0); opacity: 1; box-shadow: inset 0 2px 8px rgba(255,255,255,0.08), inset 0 -12px 20px rgba(0,0,0,0.35), 0 0 28px rgba(212,160,64,0.2); }
.draw-cell span { font-size: clamp(2.5rem, 7vw, 6rem); }
.draw-caption { color: var(--phosphor-green); font-size: 0.82rem; }

.chart-stage { position: relative; }
.chart-module { grid-column: span 6; min-height: calc(100vh - 12px); padding: clamp(28px, 4vw, 54px); }
.chart-svg { width: 100%; height: 68vh; min-height: 430px; margin-top: 12px; }
.draw-line, .orbit { fill: none; stroke: var(--star-white); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.orbit { opacity: 0.28; stroke: var(--steel-blue); }
.star-dot { fill: var(--star-white); filter: drop-shadow(0 0 8px #d4a040); }
.coordinate-module { position: absolute; width: min(240px, 28vw); min-height: 190px; backdrop-filter: blur(2px); }
.coordinate-module.alpha { right: 7%; top: 21%; }
.coordinate-module.beta { right: 18%; bottom: 10%; }

.terminal-stage { display: flex; }
.terminal-module { width: 100%; min-height: calc(100vh - 12px); padding: clamp(28px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; gap: 26px; background: linear-gradient(180deg, rgba(106,155,120,0.05), transparent), #08080f; border-color: rgba(106,155,120,0.36); }
.ticker-window { overflow: hidden; border: 1px solid rgba(106,155,120,0.35); padding: 22px; background: rgba(6,8,15,0.82); box-shadow: inset 0 0 24px rgba(106,155,120,0.08); }
.ticker-strip { display: flex; gap: 46px; width: max-content; animation: ticker 44s linear infinite; }
.ticker-strip span, .terminal-text { font-family: "IBM Plex Mono", monospace; color: var(--phosphor-green); letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(106,155,120,0.65); white-space: nowrap; }
.terminal-text { animation: terminalBlink 1.25s steps(2) infinite; }

.right-rail { position: fixed; right: 18px; top: 18px; bottom: 18px; width: 292px; z-index: 8; pointer-events: none; }
.rail-glass { height: 100%; padding: 18px; overflow: hidden; border: 1px solid rgba(217,211,199,0.18); background: linear-gradient(180deg, rgba(20,20,30,0.78), rgba(8,8,15,0.58)); box-shadow: inset 0 0 28px rgba(156,184,200,0.05), 0 10px 40px rgba(0,0,0,0.42); }
.rail-label { color: var(--steel-blue); font: 700 0.66rem/1.4 "Space Grotesk", sans-serif; letter-spacing: 0.13em; }
.rail-plant { width: 100%; height: calc(100% - 38px); margin-top: 12px; opacity: 0.84; }

.nav-dials { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; z-index: 20; }
.dial { width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; color: var(--steel-blue); background: radial-gradient(circle at 35% 28%, #3a3a4a, var(--knob-dark) 36%, #14141e 56%, #08080f); box-shadow: inset 0 2px 4px rgba(255,255,255,0.12), inset 0 -4px 8px rgba(0,0,0,0.45), 0 6px 12px rgba(0,0,0,0.45); transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease; }
.dial::before { content: ""; display: block; width: 3px; height: 13px; margin: 7px auto -7px; border-radius: 2px; background: currentColor; }
.dial span { font: 600 0.58rem/1 Orbitron, sans-serif; }
.dial:hover, .dial.is-active { color: var(--brass); box-shadow: inset 0 2px 4px rgba(255,255,255,0.12), inset 0 -4px 8px rgba(0,0,0,0.45), 0 0 24px rgba(212,160,64,0.62), 0 6px 12px rgba(0,0,0,0.45); }
.dial:active { transform: translateY(2px); }

@keyframes starFlicker { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.72; } }
@keyframes drumArrive { from { transform: rotateX(-105deg) translateY(-18px); opacity: 0; } to { transform: rotateX(0) translateY(0); opacity: 1; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes terminalBlink { 50% { opacity: 0.62; } }

@media (max-width: 1180px) {
    .ceremony { margin-right: 6px; }
    .right-rail { display: none; }
    .stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-module { grid-column: span 4; min-height: 70vh; }
    .status-module, .metric-module, .narrative-module, .narrative-module.wide { grid-column: span 2; min-height: 260px; }
    .chart-module { grid-column: span 4; }
}

@media (max-width: 760px) {
    .ceremony { margin-left: 0; padding-top: 82px; }
    .nav-dials { left: 50%; top: 16px; transform: translateX(-50%); grid-auto-flow: column; gap: 10px; }
    .dial { width: 42px; height: 42px; }
    .stage { grid-template-columns: 1fr; }
    .hero-module, .status-module, .metric-module, .narrative-module, .narrative-module.wide, .chart-module { grid-column: span 1; }
    .number-drum { gap: 6px; }
    .draw-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .coordinate-module { position: relative; width: 100%; right: auto; top: auto; bottom: auto; margin-top: 6px; }
    .chart-svg { min-height: 330px; height: 48vh; }
}