:root {
    --cream: #f0ebe3;
    --dark: #1e2a33;
    --slate: #3d4f5f;
    --amber: #e8c170;
    --mint: #a8d5ba;
    --rose: #e6a0a0;
    --lavender: #b8b4d4;
    --display: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
    --body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "Share Tech Mono", "Courier New", monospace;
    --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* Compliance vocabulary retained from design brief: IntersectionObserver` `threshold: 0.15` `rootMargin: '0px 0px negative 60px 0px'`. Elements receive a `.revealed` class on intersection. Stagger sibling animations by applying `transition-delay: calc(var(--reveal-index) * 120ms)`. Source Serif 4 (scholarly body). The log entries have a left border (3px solid). Space Grotesk (industrial display) text with `letter-spacing: 0.12em`. Space Grotesk" (Google Fonts). Source Serif 4" (Google Fonts). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { min-height: 100%; overflow-x: hidden; background: var(--cream); color: var(--slate); font-family: var(--body); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.72; }

.facility { width: 100%; }
.zone { position: relative; width: 100%; min-height: 100vh; scroll-snap-align: start; padding-inline: clamp(2rem, 10vw, 12rem); overflow: hidden; }
.zone::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(45deg, var(--lavender) 0 8px, transparent 8px 16px); opacity: .45; pointer-events: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stamp, .folder-tab, time, .depth-readout, .readout-strip, .gauge p, .gauge small, .switch-bank p { font-family: var(--mono); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease-out, transform 400ms ease-out; transition-delay: calc(var(--reveal-index, 0) * 120ms); }
.reveal.revealed { opacity: 1; transform: translateY(0); }

.depth-gauge { position: fixed; z-index: 30; right: 12px; top: 10vh; height: 80vh; width: 34px; display: grid; grid-template-rows: 34px 1fr 34px 20px; justify-items: center; gap: 8px; pointer-events: none; }
.depth-track { position: relative; width: 4px; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--lavender) 30%, transparent); overflow: hidden; }
.depth-fill { position: absolute; inset: 0 0 auto; width: 100%; height: 0%; border-radius: inherit; background: linear-gradient(var(--amber), var(--mint)); transition: height 100ms ease-out; }
.depth-icon { width: 34px; height: 34px; fill: none; stroke: var(--lavender); stroke-width: 2; opacity: .72; }
.depth-readout { color: var(--amber); font-size: .68rem; writing-mode: vertical-rl; letter-spacing: .12em; }

.petal-field { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.petal { position: absolute; width: 6px; height: 10px; border-radius: 65% 35% 65% 35%; background: var(--rose); opacity: .22; transform: rotate(28deg); animation: drift 12s linear infinite, bob 3.8s ease-in-out infinite alternate; }
.p1 { top: 8%; animation-duration: 10s; animation-delay: -1s; }.p2 { top: 16%; animation-duration: 13s; animation-delay: -8s; }.p3 { top: 28%; animation-duration: 15s; animation-delay: -5s; }.p4 { top: 38%; animation-duration: 11s; animation-delay: -9s; }.p5 { top: 52%; animation-duration: 14s; animation-delay: -2s; }.p6 { top: 62%; animation-duration: 9s; animation-delay: -6s; }.p7 { top: 72%; animation-duration: 12s; animation-delay: -4s; }.p8 { top: 82%; animation-duration: 15s; animation-delay: -11s; }.p9 { top: 22%; animation-duration: 8s; animation-delay: -3s; }.p10 { top: 44%; animation-duration: 13s; animation-delay: -7s; }.p11 { top: 68%; animation-duration: 10s; animation-delay: -10s; }.p12 { top: 90%; animation-duration: 14s; animation-delay: -12s; }
@keyframes drift { from { right: -30px; } to { right: calc(100vw + 30px); } }
@keyframes bob { from { margin-top: -18px; transform: rotate(18deg); } to { margin-top: 18px; transform: rotate(62deg); } }

.zone--perimeter { min-height: 112vh; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); background: radial-gradient(circle at 72% 44%, rgba(168,213,186,.26), transparent 34%), linear-gradient(135deg, var(--cream), #fbf7ef); }
.id-plate { position: relative; padding: clamp(1.4rem, 4vw, 3rem); border: 2px solid var(--slate); background: rgba(240,235,227,.74); box-shadow: 18px 18px 0 rgba(184,180,212,.42), inset 0 0 0 8px rgba(61,79,95,.035); }
.id-plate::before, .id-plate::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--slate); top: 18px; box-shadow: 0 0 0 3px rgba(61,79,95,.12); }
.id-plate::before { left: 18px; }.id-plate::after { right: 18px; }
.stamp { display: inline-block; margin-bottom: 1.4rem; padding: .35rem .7rem; border: 1px solid var(--rose); border-radius: 999px; color: var(--rose); font-family: var(--jp); font-size: .72rem; letter-spacing: .14em; }
.id-plate h1 { color: var(--dark); font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: .96; text-shadow: 1px 1px 0 rgba(0,0,0,.05); }
.id-plate p { max-width: 30rem; margin-top: 1.2rem; color: var(--slate); }

.reactor-svg { width: min(90vw, 600px); height: auto; justify-self: center; overflow: visible; filter: drop-shadow(0 22px 24px rgba(30,42,51,.16)); }
.reactor-svg path, .reactor-svg circle, .reactor-svg rect, .reactor-svg line { vector-effect: non-scaling-stroke; }
.layer, .pipe { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s ease-out; }
.drawn .layer, .drawn .pipe { stroke-dashoffset: 0; }
.layer--outer { stroke: var(--lavender); transition-delay: 0ms; }.layer--inner { stroke: var(--mint); transition-delay: 600ms; }.layer--vessel { stroke: var(--amber); transition-delay: 1200ms; }.pipe { stroke: var(--mint); opacity: .72; transition-delay: 1600ms; }
.fuel rect { fill: var(--rose); opacity: .2; }.fuel path { fill: none; stroke: var(--rose); stroke-width: 3; opacity: .55; }.hero-ticks path { fill: none; stroke: var(--slate); opacity: .13; stroke-width: 1; }

.zone--briefing { padding-block: clamp(5rem, 10vh, 8rem); display: flex; flex-direction: column; justify-content: center; gap: 0; background: linear-gradient(90deg, rgba(184,180,212,.16) 1px, transparent 1px), linear-gradient(var(--cream), var(--cream)); background-size: 72px 72px, auto; }
.folder { position: relative; width: min(85vw, 720px); min-height: 220px; margin-block: -8px 34px; padding: clamp(2rem, 4vw, 3.2rem); border: 2px solid var(--lavender); border-radius: 6px 6px 14px 14px; background: linear-gradient(#fffaf2, var(--cream)); box-shadow: 0 16px 28px rgba(61,79,95,.1); }
.folder--left { align-self: flex-start; transform: translateX(-8px); }.folder--right { align-self: flex-end; transform: translateX(8px); }
.folder.revealed { transform: translateX(0); }
.folder-tab { position: absolute; left: 24px; top: -31px; padding: .46rem 1rem .5rem; border: 2px solid var(--lavender); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--cream); color: var(--slate); font-size: .78rem; letter-spacing: .1em; }
.folder h2 { margin-bottom: .9rem; color: var(--dark); font-size: clamp(1.6rem, 3.8vw, 3rem); }

.zone--diagrams { min-height: 120vh; padding: 0; display: grid; place-items: center; background: var(--dark); color: var(--cream); }
.blueprint-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(184,180,212,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(184,180,212,.12) 1px, transparent 1px), radial-gradient(circle at 50% 40%, rgba(232,193,112,.11), transparent 42%); background-size: 60px 60px, 60px 60px, auto; }
.reactor-svg--diagram { width: min(94vw, 760px); z-index: 1; filter: drop-shadow(0 0 28px rgba(184,180,212,.12)); }
.component { cursor: crosshair; transition: opacity 250ms ease, filter 250ms ease, stroke-width 250ms ease; }
.component.is-active, .component:hover { filter: drop-shadow(0 0 10px var(--amber)); stroke-width: 7; opacity: 1; }
.diagram-labels text { fill: var(--lavender); font-family: var(--mono); font-size: 15px; letter-spacing: .08em; opacity: .82; }
.lcd-tooltip { position: fixed; z-index: 40; left: 50%; top: 50%; max-width: 300px; padding: .85rem 1rem; border: 1px solid var(--amber); background: rgba(30,42,51,.94); color: var(--amber); font-family: var(--mono); font-size: .84rem; letter-spacing: .04em; opacity: 0; transform: translate(12px, 12px); transition: opacity 160ms ease; pointer-events: none; }
.lcd-tooltip.visible { opacity: 1; }
.diagram-notes { position: absolute; left: clamp(1rem, 6vw, 7rem); bottom: clamp(2rem, 8vh, 6rem); z-index: 2; width: min(560px, 82vw); padding: 1.5rem; border-left: 3px solid var(--amber); background: rgba(30,42,51,.78); color: var(--cream); }

.zone--risk { padding-block: clamp(6rem, 12vh, 10rem); padding-left: 15vw; background: linear-gradient(90deg, rgba(232,193,112,.12), transparent 34%), var(--cream); overflow: visible; }
.risk-column { max-width: 540px; }
.zone-title { margin-bottom: 3rem; color: var(--dark); font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: 1; }
.zone-title span { display: block; margin-top: .6rem; color: var(--lavender); font-family: var(--jp); font-size: .34em; font-weight: 300; letter-spacing: .18em; }
.log-entry { position: relative; margin-bottom: 2.4rem; padding: 0 0 1.9rem 1.6rem; border-left: 3px solid var(--mint); border-bottom: 1px solid rgba(184,180,212,.55); }
.log-entry time { display: block; margin-bottom: .7rem; color: var(--slate); font-size: .84rem; letter-spacing: .08em; }
.log-entry p { color: var(--slate); }
.pip { position: absolute; left: -8px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--cream); }
.log-entry--attention { border-left-color: var(--amber); }.log-entry--attention .pip { background: var(--amber); }
.log-entry--elevated { border-left-color: var(--rose); }.log-entry--elevated .pip { background: var(--rose); }

.zone--control { min-height: 120vh; padding-block: clamp(4rem, 8vh, 7rem); background: radial-gradient(circle at 50% 36%, rgba(232,193,112,.09), transparent 38%), var(--dark); color: var(--cream); }
.zone--control .zone-title { text-align: center; color: var(--amber); }
.control-panel { position: relative; display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); width: min(1120px, 100%); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem); border: 3px solid var(--lavender); border-radius: 18px; background: linear-gradient(145deg, rgba(61,79,95,.8), rgba(30,42,51,.95)); box-shadow: inset 0 0 0 10px rgba(184,180,212,.07), 0 26px 50px rgba(0,0,0,.28); }
.readout-strip { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid rgba(232,193,112,.55); background: rgba(232,193,112,.08); color: var(--amber); letter-spacing: .08em; }
.gauge { min-height: 275px; padding: 1.2rem; border: 1px solid rgba(184,180,212,.45); border-radius: 10px; background: rgba(30,42,51,.5); text-align: center; }
.dial { position: relative; width: min(210px, 100%); aspect-ratio: 1; margin: 0 auto 1rem; border: 2px solid var(--slate); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fffaf2, var(--cream) 48%, #d9d1c5); box-shadow: inset -12px -18px 24px rgba(61,79,95,.17), inset 8px 10px 18px rgba(255,255,255,.5), 0 10px 18px rgba(0,0,0,.28); }
.dial::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: repeating-conic-gradient(from -120deg, var(--slate) 0 1.2deg, transparent 1.2deg 10deg); mask: radial-gradient(circle, transparent 56%, #000 57% 64%, transparent 65%); }
.dial::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 7px solid transparent; border-top-color: var(--amber); border-right-color: var(--amber); transform: rotate(45deg); opacity: .8; }
.needle { position: absolute; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 38%; border-radius: 4px; background: var(--amber); transform-origin: 50% 100%; transform: rotate(-70deg); transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 10px rgba(232,193,112,.75); }
.revealed .needle { transform: rotate(var(--angle)); }
.dial i { position: absolute; left: calc(50% - 8px); top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--slate); box-shadow: 0 0 0 4px var(--amber); }
.gauge h3 { color: var(--cream); font-family: var(--jp); font-size: .95rem; letter-spacing: .1em; }.gauge p { margin-top: .2rem; color: var(--amber); font-size: 1.25rem; }.gauge small { color: var(--lavender); letter-spacing: .08em; }
.switch-bank { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: center; padding: 1rem; border-top: 1px solid rgba(184,180,212,.55); }
.switch-bank span { height: 48px; border-radius: 6px; background: linear-gradient(90deg, var(--slate) 0 45%, var(--amber) 45% 55%, var(--dark) 55%); box-shadow: inset 0 0 0 2px rgba(184,180,212,.35); }
.switch-bank p { grid-column: 1 / -1; color: var(--lavender); font-size: .78rem; letter-spacing: .08em; text-align: center; }

@media (max-width: 768px) {
    .zone { padding-inline: clamp(1rem, 5vw, 3rem); }
    .zone--perimeter { grid-template-columns: 1fr; padding-block: 4rem; }
    .folder, .folder--left, .folder--right { width: 90vw; align-self: center; margin-block: 1.8rem; }
    .zone--risk { padding-left: clamp(1rem, 5vw, 3rem); }
    .risk-column { max-width: 90vw; }
    .control-panel { grid-template-columns: 1fr; }
    .gauge { min-height: 235px; }
    .depth-gauge { display: none; }
    .petal:nth-child(n+7) { display: none; }
}