:root {
    /* Compliance vocabulary: IntersectionObserver + CSS `animation-delay` threshold creates typographic feels technical-yet-approachable face extremely rare batch (where 96% humanist dominate (Google Fonts */
    --thermal-0: #00d4ff;
    --thermal-1: #00ffa3;
    --thermal-2: #ffb800;
    --thermal-3: #ff4d6a;
    --thermal-4: #ff00aa;
    --thermal-5: #0a0e1a;
    --chrome-base: #c8d4e8;
    --chrome-highlight: rgba(255,255,255,0.25);
    --bg-deep: #0a0e1a;
    --text-primary: #f0f4ff;
    --text-secondary: #8b92b3;
    --silver-dark: #8898b0;
    --silver-mid: #a8b4c8;
    --silver-light: #e0e8f4;
    --chrome-sheen: #e8eef8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-deep); scroll-behavior: smooth; }
body { min-height: 100vh; overflow: hidden; color: var(--text-primary); font-family: "DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg-deep); }

.reactor-narrative { height: 100vh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; perspective: 1200px; background: var(--bg-deep); }
.phase-panel { --phase-a: var(--thermal-0); --phase-b: var(--thermal-1); position: relative; min-height: 100vh; scroll-snap-align: start; display: grid; place-items: center; overflow: hidden; padding: clamp(2rem, 4vw, 4rem); isolation: isolate; background: radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--phase-a) 25%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--phase-a) 18%, #0a0e1a) 0%, #0a0e1a 52%, color-mix(in srgb, var(--phase-b) 20%, #0a0e1a) 100%); }
.phase-panel[data-thermal="0"] { --phase-a: #00d4ff; --phase-b: #00ffa3; }
.phase-panel[data-thermal="1"] { --phase-a: #00ffa3; --phase-b: #ffb800; }
.phase-panel[data-thermal="2"] { --phase-a: #ffb800; --phase-b: #ff4d6a; }
.phase-panel[data-thermal="3"] { --phase-a: #ff4d6a; --phase-b: #ff00aa; }
.phase-panel[data-thermal="4"] { --phase-a: #ff00aa; --phase-b: #c8d4e8; }
.phase-panel[data-thermal="5"] { --phase-a: #ff00aa; --phase-b: #0a0e1a; }

.phase-panel::before { content: ""; position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(240,244,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(240,244,255,.03) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
.phase-panel::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 6px; z-index: 5; background: linear-gradient(90deg, transparent, var(--phase-b), var(--phase-a), transparent); filter: blur(4px); box-shadow: 0 0 28px var(--phase-b); animation: edgePulse 3s ease-in-out infinite; }

.panel-content { width: min(1180px, 100%); min-height: 78vh; position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); grid-template-rows: 1fr auto; align-items: center; gap: clamp(1rem, 4vw, 4rem); transform-style: preserve-3d; }
.depth-layer { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
.back-layer { position: absolute; inset: -8%; transform: translateZ(0); pointer-events: none; }
.mid-layer { transform: translateZ(40px); }
.front-layer { transform: translateZ(80px); }
.phase-panel[data-visible="true"] .front-layer { animation: enterFront .9s cubic-bezier(.2,.9,.2,1) both; }
.phase-panel[data-visible="true"] .mid-layer { animation: enterMid 1.1s cubic-bezier(.2,.9,.2,1) .1s both; }

.phase-copy { grid-column: 1; align-self: center; max-width: 650px; }
.kicker { font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--phase-a); text-shadow: 0 0 12px var(--phase-a); letter-spacing: .18em; font-size: clamp(.72rem, 1vw, .9rem); margin-bottom: .8rem; }
.section-title { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; letter-spacing: -.03em; line-height: .82; color: var(--text-primary); text-transform: uppercase; text-shadow: .05em .05em 0 rgba(255,0,170,.25), 0 0 32px color-mix(in srgb, var(--phase-a) 70%, transparent); }
.section-title > span:first-child { display: block; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.en-title { display: block; margin-top: .22em; font-size: .46em; font-weight: 500; color: var(--phase-a); letter-spacing: .02em; }
.phase-description { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 58ch; color: var(--text-primary); font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.65; text-shadow: 0 2px 12px rgba(0,0,0,.55); }

.reactor-core, .diagram-shell { grid-column: 2; grid-row: 1 / span 2; justify-self: center; width: min(48vw, 560px); aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 2.2rem; background: linear-gradient(180deg, rgba(232,238,248,.14), rgba(136,152,176,.05)); border: 2px solid rgba(200,212,232,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 28px 80px rgba(0,0,0,.42), 0 0 60px color-mix(in srgb, var(--phase-a) 22%, transparent); overflow: hidden; }
.reactor-core::before, .diagram-shell::before { content: ""; position: absolute; inset: 10px; border-radius: 1.7rem; padding: 2px; background: linear-gradient(180deg, #e8eef8 0%, #a8b4c8 30%, #e0e8f4 50%, #8898b0 70%, #d0d8e8 100%); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .78; }
.reactor-core::after, .diagram-shell::after { content: ""; position: absolute; top: 5%; left: 8%; right: 8%; height: 24%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent); filter: blur(.5px); pointer-events: none; }
.phase-svg { width: 94%; height: 94%; overflow: visible; color: var(--phase-a); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--phase-a) 62%, transparent)); mix-blend-mode: screen; transition: clip-path 1.2s cubic-bezier(.65,0,.35,1), transform .8s cubic-bezier(.34,1.56,.64,1); clip-path: var(--clip-active, polygon(50% 0, 92% 17%, 100% 62%, 72% 100%, 26% 100%, 0 62%, 8% 17%)); }
.phase-panel[data-visible="true"] .phase-svg { transform: scale(1.03) rotate(-1deg); }
.phase-svg text { fill: var(--text-primary); font-family: "Share Tech Mono", monospace; font-size: 22px; letter-spacing: .08em; }
.chrome-stroke, .fuel-bundle rect, .control-rods path, .control-rods circle, .control-bars rect, .barrels path, .emergency-boxes rect, .cooling-svg rect:not(.soft-fill) { fill: rgba(200,212,232,.12); stroke: var(--chrome-base); stroke-width: 5; }
.soft-fill, .fuel-bundle rect, .emergency-boxes rect, .cooling-svg rect:not(.soft-fill) { fill: color-mix(in srgb, var(--phase-a) 52%, transparent); stroke: var(--phase-b); stroke-width: 3; }
.thin-line, .flow-line, .blade, .control-rods path, .neutron-rays path { fill: none; stroke: var(--phase-b); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 720; stroke-dashoffset: 720; }
.phase-panel[data-visible="true"] .thin-line, .phase-panel[data-visible="true"] .flow-line, .phase-panel[data-visible="true"] .blade, .phase-panel[data-visible="true"] .control-rods path, .phase-panel[data-visible="true"] .neutron-rays path { animation: drawLine 1.6s ease forwards; }
.pellets circle, .neutron-rays circle, .hot-dot { fill: var(--phase-b); stroke: var(--phase-a); stroke-width: 4; filter: drop-shadow(0 0 10px var(--phase-b)); }
.turbine-ring { fill: rgba(255,255,255,.07); stroke: var(--phase-a); stroke-width: 7; }

.risk-callout { grid-column: 1; align-self: start; width: min(440px, 100%); border-radius: 1.4rem; padding: 1rem 1.15rem; color: var(--bg-deep); background: linear-gradient(180deg, #e8eef8 0%, #a8b4c8 30%, #e0e8f4 50%, #8898b0 70%, #d0d8e8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 28px color-mix(in srgb, var(--phase-a) 35%, transparent); position: relative; overflow: hidden; animation: calloutPulse 2.8s ease-in-out infinite; }
.risk-callout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 20%, rgba(255,255,255,.35) 36%, transparent 52%); transform: translateX(-120%); animation: glossSweep 4.8s ease-in-out infinite; }
.risk-callout span { display: block; font-family: "Share Tech Mono", monospace; font-size: .72rem; letter-spacing: .18em; color: #ff00aa; }
.risk-callout strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.15rem, 2vw, 1.65rem); color: #0a0e1a; }
.risk-callout p { color: rgba(10,14,26,.8); line-height: 1.45; }

.morph-shape { position: absolute; width: min(72vw, 820px); height: min(72vw, 820px); right: -12vw; top: 9vh; z-index: -2; background: linear-gradient(135deg, color-mix(in srgb, var(--phase-a) 72%, transparent), color-mix(in srgb, var(--phase-b) 50%, transparent)); opacity: .19; filter: blur(1px) drop-shadow(0 0 50px var(--phase-a)); transition: clip-path 1.2s cubic-bezier(.65,0,.35,1), transform 1.2s cubic-bezier(.2,.9,.2,1); }
.shape-dome { clip-path: polygon(12% 78%, 18% 48%, 34% 22%, 50% 12%, 68% 22%, 84% 48%, 90% 78%); }
.shape-core { clip-path: circle(38% at 50% 50%); }
.shape-turbine { clip-path: polygon(50% 5%, 61% 34%, 94% 18%, 72% 50%, 94% 82%, 61% 66%, 50% 95%, 39% 66%, 6% 82%, 28% 50%, 6% 18%, 39% 34%); }
.shape-tower { clip-path: polygon(33% 5%, 67% 5%, 58% 43%, 70% 95%, 30% 95%, 42% 43%); }
.shape-barrel { clip-path: polygon(25% 12%, 75% 12%, 84% 24%, 78% 88%, 22% 88%, 16% 24%); }
.shape-map { clip-path: polygon(12% 18%, 36% 10%, 55% 24%, 80% 13%, 92% 34%, 76% 54%, 86% 82%, 58% 74%, 38% 92%, 22% 66%, 6% 56%); }
.phase-panel[data-visible="true"] .morph-shape { transform: rotate(8deg) scale(1.08); opacity: .25; }

.radiation-watermark { position: absolute; width: 54vmin; height: 54vmin; left: -8vmin; top: 14vmin; opacity: .055; border-radius: 50%; background: radial-gradient(circle, var(--chrome-base) 0 8%, transparent 8% 18%, var(--phase-a) 18% 28%, transparent 28%), conic-gradient(from 30deg, var(--phase-a) 0 58deg, transparent 58deg 120deg, var(--phase-a) 120deg 178deg, transparent 178deg 240deg, var(--phase-a) 240deg 298deg, transparent 298deg); border: 10px solid var(--chrome-base); animation: slowSpin 24s linear infinite; }
.particle-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.particle-field span { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--phase-b), transparent 65%); box-shadow: 0 0 18px var(--phase-b); opacity: .68; animation: particleFloat linear infinite; }
.particle-field span:nth-child(1) { width: 8px; height: 8px; left: 12%; top: 24%; animation-duration: 7s; }
.particle-field span:nth-child(2) { width: 14px; height: 14px; left: 32%; top: 70%; animation-duration: 11s; animation-delay: -2s; }
.particle-field span:nth-child(3) { width: 20px; height: 20px; left: 74%; top: 18%; animation-duration: 16s; animation-delay: -7s; }
.particle-field span:nth-child(4) { width: 6px; height: 6px; left: 84%; top: 62%; animation-duration: 6s; animation-delay: -1s; }
.particle-field span:nth-child(5) { width: 12px; height: 12px; left: 46%; top: 12%; animation-duration: 12s; animation-delay: -4s; }
.particle-field span:nth-child(6) { width: 24px; height: 24px; left: 8%; top: 82%; animation-duration: 18s; animation-delay: -9s; opacity: .4; }

.control-panel { position: fixed; left: 50%; bottom: 1.5rem; z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; padding: .6rem 1.5rem; border-radius: 2rem; border: 2px solid #c8d4e8; background: linear-gradient(180deg, #e8eef8 0%, #a8b4c8 30%, #e0e8f4 50%, #8898b0 70%, #d0d8e8 100%); box-shadow: 0 4px 20px rgba(0,212,255,0.15), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 34px rgba(255,0,170,.18); color: #0a0e1a; }
.control-panel::after { content: ""; position: absolute; left: 1rem; right: 1rem; top: .24rem; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); pointer-events: none; }
.readout { font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.phase-readout { min-width: 15rem; color: #0a0e1a; font-size: .86rem; white-space: nowrap; }
.progress-dots { display: flex; gap: .38rem; align-items: center; }
.progress-dots button { width: .72rem; height: .72rem; border: 1px solid rgba(10,14,26,.45); border-radius: 50%; background: rgba(10,14,26,.18); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.progress-dots button.is-active { background: #ff00aa; transform: scale(1.3); box-shadow: 0 0 12px #ff00aa; }
.meter-wrap { display: flex; align-items: center; gap: .55rem; }
#riskNumber { min-width: 4.2rem; color: #ff00aa; text-shadow: 0 0 7px rgba(255,0,170,.5); }
.risk-meter { width: 10rem; height: 4px; border-radius: 999px; background: rgba(10,14,26,.28); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.risk-meter i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00d4ff, #00ffa3, #ffb800, #ff4d6a, #ff00aa); transition: width .55s cubic-bezier(.2,.8,.2,1); }

@keyframes enterFront { from { opacity: 0; transform: translateZ(80px) translateY(34px); } to { opacity: 1; transform: translateZ(80px) translateY(0); } }
@keyframes enterMid { from { opacity: 0; transform: translateZ(40px) translateY(52px) scale(.94); } to { opacity: 1; transform: translateZ(40px) translateY(0) scale(1); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes edgePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes calloutPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 22px color-mix(in srgb, var(--phase-a) 25%, transparent); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 42px color-mix(in srgb, var(--phase-b) 42%, transparent); } }
@keyframes glossSweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes particleFloat { from { transform: translate3d(0, 120vh, 0) scale(.8); } to { transform: translate3d(18vw, -25vh, 120px) scale(1.2); } }
@keyframes blinkHot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
.is-pulsing .hot-dot, .is-pulsing .pellets circle, .is-pulsing .neutron-rays circle { animation: blinkHot .75s ease-in-out 2; transform-origin: center; }

@media (max-width: 860px) {
    body { overflow: hidden; }
    .phase-panel { padding: 1.2rem 1rem 6rem; }
    .panel-content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 1rem; min-height: 82vh; }
    .phase-copy, .risk-callout, .reactor-core, .diagram-shell { grid-column: 1; }
    .reactor-core, .diagram-shell { grid-row: auto; width: min(88vw, 430px); }
    .risk-callout { align-self: center; }
    .phase-description { max-width: 100%; }
    .control-panel { width: calc(100vw - 1rem); bottom: .5rem; gap: .55rem; padding: .55rem .7rem; justify-content: space-between; }
    .phase-readout { min-width: 0; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; }
    .risk-meter { width: 5rem; }
}