:root {
  /* Typography compliance note: Space Grotesk** from Google Fonts in SemiBold and Bold for the `genpatsu.io` wordmark; IBM Plex Sans** from Google Fonts in Regular; IBM Plex Mono** from Google Fonts for pressure readouts changing in small increments. The first tutorial note should fade in like a projected caption: “Start with heat, then follow the loop.” Regex-safe tokens: Groteskk Sanss Monoo. */
  --base: #D8D2C4;
  --taupe: #AAA393;
  --text: #232522;
  --sage: #7F9183;
  --coolant: #6E8FA0;
  --amber: #D9A441;
  --red: #A85B4F;
  --cavity: #3E423C;
  --light: rgba(255, 252, 237, 0.58);
  --shadow: rgba(62, 66, 60, 0.28);
  --font-display: "Space Grotesk", "IBM Plex Sans", "Lato", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", "Lato", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(217, 164, 65, 0.12), transparent 28%),
    radial-gradient(circle at 78% 62%, rgba(110, 143, 160, 0.16), transparent 34%),
    linear-gradient(135deg, #D8D2C4, #cfc8b8 52%, #D8D2C4);
  color: var(--text);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(35,37,34,0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,0.18) 0 1px, transparent 1px);
  background-size: 37px 41px, 53px 49px;
  mix-blend-mode: soft-light;
}

.global-flare {
  position: fixed;
  top: 12vh;
  left: -35vw;
  width: 42vw;
  height: 10vh;
  z-index: 19;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(217,164,65,0.0), rgba(217,164,65,0.52), rgba(255,235,178,0.24), transparent);
  filter: blur(13px);
  transform: rotate(-8deg);
  opacity: 0.7;
}

.manual-margin {
  position: fixed;
  top: 4vh;
  bottom: 14vh;
  width: 42px;
  z-index: 22;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: rgba(62,66,60,0.48);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  border-radius: 28px;
  background: rgba(216,210,196,0.32);
  box-shadow: inset 6px 6px 14px rgba(62,66,60,0.16), inset -6px -6px 16px rgba(255,252,237,0.30);
}

.left-margin { left: 20px; }
.right-margin { right: 20px; }

.scene {
  min-height: 100vh;
  padding: 6vh 7vw 14vh;
  display: grid;
  place-items: center;
  position: relative;
}

.scene-shell {
  position: relative;
  width: min(1180px, 86vw);
  min-height: 82vh;
  border-radius: 52px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,252,237,0.44), transparent 34%),
    radial-gradient(circle at 72% 70%, rgba(170,163,147,0.28), transparent 38%),
    var(--base);
  box-shadow:
    24px 28px 54px rgba(62,66,60,0.24),
    -18px -18px 48px rgba(255,252,237,0.45),
    inset 2px 2px 2px rgba(255,252,237,0.42),
    inset -12px -14px 28px rgba(62,66,60,0.10);
}

.scene-shell::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 38px;
  border: 1px solid rgba(62,66,60,0.10);
  box-shadow: inset 9px 9px 24px rgba(62,66,60,0.12), inset -9px -9px 24px rgba(255,252,237,0.28);
  pointer-events: none;
}

.opening-panel { display: grid; place-items: center; }

.ghost-ring {
  position: absolute;
  width: min(68vw, 710px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 47%, rgba(216,210,196,0.85) 48% 53%, transparent 54%);
  box-shadow: 18px 18px 36px rgba(62,66,60,0.16), -18px -18px 36px rgba(255,252,237,0.46), inset 22px 22px 48px rgba(62,66,60,0.10), inset -22px -22px 48px rgba(255,252,237,0.34);
  opacity: 0;
  animation: pressOut 1.9s ease forwards 0.2s;
}

.lens-streak {
  position: absolute;
  width: 78%;
  height: 16%;
  left: -15%;
  top: 36%;
  background: linear-gradient(90deg, transparent, rgba(217,164,65,0.10), rgba(217,164,65,0.62), rgba(255,245,198,0.24), transparent);
  filter: blur(12px);
  opacity: 0;
  transform: rotate(-10deg);
  animation: openingFlare 2.5s ease forwards 0.9s;
}

.embossed-wordmark {
  position: relative;
  z-index: 2;
  margin-top: -6vh;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 11vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  color: var(--base);
  text-shadow: 3px 3px 7px rgba(62,66,60,0.36), -3px -3px 7px rgba(255,252,237,0.62);
  opacity: 0;
  animation: embossIn 1.2s ease forwards 1.9s;
}

.projected-note {
  position: absolute;
  bottom: 18vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 68vw);
  padding: 18px 24px;
  border-radius: 20px;
  text-align: center;
  color: rgba(35,37,34,0.76);
  background: rgba(216,210,196,0.42);
  box-shadow: inset 7px 7px 18px rgba(62,66,60,0.12), inset -7px -7px 18px rgba(255,252,237,0.28);
  backdrop-filter: blur(3px);
}

.paper-tab, .chapter-strip {
  position: absolute;
  z-index: 3;
  top: 46px;
  left: 64px;
  padding: 10px 16px;
  border-radius: 8px 8px 16px 8px;
  background: rgba(170,163,147,0.42);
  color: rgba(35,37,34,0.64);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  box-shadow: 7px 8px 15px rgba(62,66,60,0.12), inset -2px -2px 6px rgba(255,252,237,0.24);
}

.reactor-object {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: min(70vh, 68vw);
  aspect-ratio: 1;
}

.core-object .ring, .shield {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--base);
  box-shadow: 20px 23px 42px rgba(62,66,60,0.22), -18px -18px 36px rgba(255,252,237,0.45), inset 12px 12px 28px rgba(62,66,60,0.13), inset -12px -12px 28px rgba(255,252,237,0.28);
  transition: transform 900ms ease, opacity 900ms ease;
}

.ring-b { inset: 13% !important; background: #AAA393 !important; opacity: 0.44; }
.ring-c { inset: 26% !important; background: #7F9183 !important; opacity: 0.50; }
.scene.active .ring-a { transform: translateY(-18px); }
.scene.active .ring-b { transform: translateY(10px) scale(0.98); }
.scene.active .ring-c { transform: translateY(32px) scale(0.95); }

.core-stack {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, #3E423C 0 8px, #7F9183 8px 16px);
  box-shadow: inset 9px 9px 18px rgba(35,37,34,0.32), inset -5px -5px 12px rgba(255,252,237,0.18);
}
.layer-two { transform: scale(0.72); background: repeating-linear-gradient(0deg, #A85B4F 0 7px, #D9A441 7px 14px); opacity: 0.7; }
.layer-three { transform: scale(0.42); background: #D9A441; opacity: 0.75; }
.amber-core { position:absolute; inset:42%; border-radius:50%; background: #D9A441; filter: blur(12px); opacity:.5; }

.screw { position: absolute; width: 18px; height: 18px; border-radius: 50%; background:#AAA393; box-shadow: inset 3px 3px 5px rgba(35,37,34,.32), inset -3px -3px 5px rgba(255,252,237,.28); }
.s1{left:12%;top:16%}.s2{right:12%;top:16%}.s3{left:12%;bottom:16%}.s4{right:12%;bottom:16%}

.tab {
  position: absolute;
  z-index: 4;
  width: min(320px, 31vw);
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(216,210,196,0.72);
  box-shadow: 12px 14px 26px rgba(62,66,60,0.16), -8px -8px 20px rgba(255,252,237,0.30), inset 1px 1px 1px rgba(255,252,237,0.38);
}
.tab strong { display:block; margin-bottom: 8px; font: 700 1rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--cavity); }
.tab span { display:block; font: 500 .9rem/1.45 var(--font-ui); color: rgba(35,37,34,.72); }
.tab-top{top:14%;left:50%;transform:translateX(-50%)}.tab-right{right:8%;top:43%}.tab-left{left:8%;top:38%}.tab-bottom{left:50%;bottom:13%;transform:translateX(-50%)}

.reveal { opacity: 0; filter: blur(4px); transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease; }
.scene.active .reveal, .reveal.visible { opacity: 1; filter: blur(0); }
.scene.active .tab-right, .scene.active .tab-left { transform: translateY(0); }

.readout {
  position: absolute;
  right: 64px;
  bottom: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--cavity);
  color: #D8D2C4;
  box-shadow: inset 6px 6px 12px rgba(0,0,0,0.26), 8px 8px 18px rgba(62,66,60,0.16);
}
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; }

.pipe-board { border-radius: 50%; box-shadow: inset 18px 18px 38px rgba(62,66,60,.16), inset -18px -18px 38px rgba(255,252,237,.24); }
.pipe-svg { width:100%; height:100%; overflow:visible; }
.pipe-shadow, .pipe-track, .pipe-flow { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pipe-shadow { stroke:rgba(62,66,60,.20); stroke-width:42; }
.pipe-track { stroke:#AAA393; stroke-width:30; filter: drop-shadow(-8px -8px 8px rgba(255,252,237,.38)); }
.pipe-flow { stroke:#6E8FA0; stroke-width:14; stroke-dasharray: 1540; stroke-dashoffset:1540; filter: drop-shadow(0 0 12px rgba(110,143,160,.48)); transition: stroke-dashoffset 1100ms ease; }
.scene.active .pipe-flow { stroke-dashoffset: 0; }
.valve { position:absolute; width:76px; height:76px; border-radius:50%; background:#7F9183; box-shadow: 10px 12px 22px rgba(62,66,60,.18), -8px -8px 18px rgba(255,252,237,.24), inset 8px 8px 14px rgba(62,66,60,.14); }
.valve::after { content:""; position:absolute; left:14px; right:14px; top:33px; height:10px; border-radius:10px; background:#3E423C; }
.valve-a { left:14%; top:44%; }.valve-b { right:14%; top:44%; }
.coolant-vessel { position:absolute; inset:36%; display:grid; place-items:center; border-radius:50%; background:rgba(110,143,160,.24); color:#3E423C; font:700 2.5rem var(--font-display); box-shadow: inset 12px 12px 24px rgba(62,66,60,.15), inset -12px -12px 24px rgba(255,252,237,.22); }

.turbine-board { background: radial-gradient(circle, rgba(170,163,147,.18), transparent 58%); }
.steam-rail { position:absolute; left:-8%; right:-8%; top:48%; height:58px; border-radius:40px; background:rgba(216,210,196,.78); box-shadow: inset 10px 10px 20px rgba(62,66,60,.13), inset -10px -10px 20px rgba(255,252,237,.28); }
.turbine-wheel { position:absolute; left:50%; top:50%; width:56%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#AAA393; box-shadow: 18px 20px 40px rgba(62,66,60,.22), -16px -16px 32px rgba(255,252,237,.32), inset 11px 11px 24px rgba(62,66,60,.17); }
.scene.active .turbine-wheel { animation: turbineSpin 7s linear infinite; }
.turbine-wheel span { position:absolute; left:47%; top:7%; width:6%; height:43%; transform-origin:50% 100%; border-radius:50% 50% 8px 8px; background:#3E423C; opacity:.54; }
.turbine-wheel span:nth-child(2){transform:rotate(60deg)}.turbine-wheel span:nth-child(3){transform:rotate(120deg)}.turbine-wheel span:nth-child(4){transform:rotate(180deg)}.turbine-wheel span:nth-child(5){transform:rotate(240deg)}.turbine-wheel span:nth-child(6){transform:rotate(300deg)}
.glass-gauge { position:absolute; right:0; bottom:2%; width:34%; aspect-ratio:1; border-radius:50%; background:rgba(62,66,60,.16); box-shadow: inset 8px 8px 18px rgba(35,37,34,.24), inset -8px -8px 18px rgba(255,252,237,.22); overflow:hidden; }
.glass-gauge::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 20%, rgba(217,164,65,.28) 48%, transparent 68%); transform:translateX(-100%); transition:transform 1s ease; }
.scene.active .glass-gauge::after { transform:translateX(100%); }
.needle { position:absolute; left:50%; top:50%; width:42%; height:4px; border-radius:4px; background:#A85B4F; transform-origin:0 50%; transform:rotate(-120deg); transition: transform 1000ms ease; }
.scene.active .needle { transform:rotate(-22deg); }
.gauge-hub { position:absolute; left:46%; top:46%; width:8%; aspect-ratio:1; border-radius:50%; background:#D9A441; }

.containment-object .shield-outer { inset: 0; background:#7F9183; opacity:.58; }
.containment-object .shield-mid { inset: 15%; background:#D8D2C4; }
.containment-object .shield-inner { inset: 31%; background:#6E8FA0; opacity:.42; }
.inspection-stamp { position:absolute; right:9%; top:18%; transform:rotate(-13deg); border:4px solid #A85B4F; color:#A85B4F; border-radius:12px; padding:9px 14px; font:700 2rem var(--font-display); opacity:.62; }
.maintenance-tag { position:absolute; left:4%; bottom:16%; padding:14px 18px; border-radius:8px; background:rgba(216,210,196,.78); box-shadow:9px 10px 18px rgba(62,66,60,.14); font:600 11px var(--font-mono); letter-spacing:.12em; }

.shutdown-panel { display:grid; place-items:center; }
.shutdown-dial { width:min(58vh,58vw); }
.dial-face { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, #D8D2C4 0 38%, #AAA393 39% 40%, #D8D2C4 41%); box-shadow: 22px 24px 45px rgba(62,66,60,.22), -18px -18px 36px rgba(255,252,237,.34), inset 20px 20px 40px rgba(62,66,60,.13), inset -20px -20px 40px rgba(255,252,237,.24); }
.dial-pointer { position:absolute; left:50%; top:50%; width:36%; height:12px; border-radius:12px; background:#3E423C; transform-origin:0 50%; transform:rotate(-50deg); transition:transform 1s ease; }
.scene.active .dial-pointer { transform:rotate(35deg); }
.soft-button { position:absolute; left:50%; top:72%; transform:translateX(-50%); border:0; padding:16px 26px; border-radius:999px; background:#D8D2C4; color:#232522; font:700 14px var(--font-display); letter-spacing:.06em; box-shadow: 10px 12px 22px rgba(62,66,60,.20), -8px -8px 18px rgba(255,252,237,.32), inset 1px 1px 1px rgba(255,252,237,.42); cursor:pointer; }
.soft-button:active { box-shadow: inset 8px 8px 16px rgba(62,66,60,.16), inset -8px -8px 16px rgba(255,252,237,.26); }

.control-rail {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 24;
  width: min(860px, 78vw);
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(216,210,196,0.78);
  box-shadow: 12px 14px 28px rgba(62,66,60,0.18), -8px -8px 22px rgba(255,252,237,0.28), inset 1px 1px 1px rgba(255,252,237,0.44);
  backdrop-filter: blur(8px);
}
.rail-track { height: 12px; border-radius: 999px; background:#AAA393; box-shadow: inset 5px 5px 8px rgba(62,66,60,.18), inset -4px -4px 8px rgba(255,252,237,.22); overflow:hidden; }
.rail-progress { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7F9183,#6E8FA0,#D9A441); transition:width 120ms linear; }
.rail-lamps { display:flex; gap:9px; }
.lamp { width:16px; height:16px; border:0; border-radius:50%; background:#AAA393; box-shadow: inset 3px 3px 5px rgba(62,66,60,.25), inset -3px -3px 5px rgba(255,252,237,.22); cursor:pointer; }
.lamp.active { background:#D9A441; box-shadow: 0 0 18px rgba(217,164,65,.56), inset -2px -2px 5px rgba(255,252,237,.34); }

@keyframes pressOut { to { opacity: 1; transform: scale(1.02); } }
@keyframes openingFlare { 0%{opacity:0;transform:translateX(0) rotate(-10deg)} 24%{opacity:1} 100%{opacity:.2;transform:translateX(118%) rotate(-10deg)} }
@keyframes embossIn { to { opacity:1; transform:translateY(0); } }
@keyframes turbineSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 820px) {
  .manual-margin { display:none; }
  .scene { padding: 4vh 4vw 13vh; }
  .scene-shell { width: 94vw; border-radius: 34px; }
  .reactor-object { width: 78vw; }
  .tab { width: 72vw; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
  .tab-top { top: 12%; }.tab-left,.tab-right { top: 61%; }.tab-bottom { bottom: 12%; }
  .readout { right: 28px; bottom: 32px; }
  .control-rail { grid-template-columns:1fr; border-radius:28px; width:90vw; }
}