:root {
  /* Compliance terms from DESIGN.md: IntersectionObserver IntersectionObserver` sections threshold. off-screen. | Abyssal Navy | Page background. Glass bevel reference #3a3f5a. */
  --deep-space: #0a0e1a;
  --primary-surface: #141830;
  --secondary-surface: #1e2444;
  --leather-alt: #161a34;
  --brass: #b89d6a;
  --violet: #7b68ae;
  --parchment: #c8c0b8;
  --steel: #8890a8;
  --steel-dark: #6a7090;
  --moonbeam: #e0d8f0;
  --amber: #d4a040;
  --amber-dark: #8a6020;
  --mesh-amethyst: #2a1f4a;
  --mesh-ocean: #1a2a50;
  --mesh-velvet: #3d2860;
  --mesh-ink: #0e1a30;
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 3px 0 #0a0e1a, inset 1px 1px 0 rgba(224, 216, 240, 0.12), inset -1px -1px 0 rgba(0, 0, 0, 0.85);
  --bevel-catch: #3a3f5a;
}

@property --p1x { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --p1y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --p2x { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --p2y { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --p3x { syntax: '<percentage>'; inherits: false; initial-value: 45%; }
@property --p3y { syntax: '<percentage>'; inherits: false; initial-value: 72%; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background:
    radial-gradient(circle at 20% 0%, rgba(123, 104, 174, 0.18), transparent 34rem),
    repeating-linear-gradient(90deg, rgba(30, 36, 68, 0.22) 0 1px, transparent 1px 7px),
    var(--deep-space);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.machine {
  width: min(1440px, calc(100% - 24px));
  margin: 12px auto;
  padding: 12px;
  border-radius: 24px;
  background:
    repeating-radial-gradient(circle at 14% 18%, rgba(224, 216, 240, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(22, 26, 52, 0.98), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(184, 157, 106, 0.35);
  box-shadow: 0 0 0 3px #0a0e1a, 0 34px 90px rgba(0, 0, 0, 0.75), inset 0 0 38px rgba(184, 157, 106, 0.08);
}

.hero-panel, .gauge-bank, .story-panel, .instrument-sidebar, .base-plate {
  border-radius: 18px;
  border: 1px solid rgba(184, 157, 106, 0.42);
  background:
    repeating-radial-gradient(circle at 12% 22%, #141830 0 1px, #161a34 1px 2px, transparent 2px 4px),
    linear-gradient(145deg, rgba(30, 36, 68, 0.94), rgba(20, 24, 48, 0.98));
  box-shadow: var(--panel-shadow);
}

.mechanical { transform: scale(0.985); transition: transform 700ms ease, filter 700ms ease; }
.mechanical.is-visible { transform: scale(1); }

.stagger-item {
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: top;
  transition: opacity 520ms ease, transform 640ms cubic-bezier(0.17, 0.89, 0.32, 1.05);
}
.is-visible .stagger-item { opacity: 1; transform: rotateX(0deg); }

.hero-panel { padding: 12px; margin-bottom: 3px; }

.top-rail, .base-plate {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--steel-dark);
  font-size: 0.74rem;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, #1e2444 0 1px, #1c2240 1px 2px);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.7), 1px 1px 0 rgba(224,216,240,0.08);
}

.glass-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(14, 26, 48, 0.55);
  border: 1px solid rgba(224, 216, 240, 0.16);
  box-shadow: 0 0 0 4px #0a0e1a, 0 0 0 6px rgba(58, 63, 90, 0.7), inset 0 0 0 2px #0a0e1a, inset 0 0 40px rgba(123,104,174,0.22), 0 18px 38px rgba(0,0,0,0.65);
}

.hero-viewport { min-height: clamp(420px, 60vh, 720px); display: grid; place-items: center; margin: 12px 0; }
.glass-sheen { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 18%, rgba(224,216,240,0.12) 44%, transparent 50%); pointer-events: none; }

.mesh-window { isolation: isolate; background: var(--primary-surface); }
.mesh-layer { position: absolute; inset: -28%; animation: breathe 34s ease-in-out infinite alternate; }
.mesh-a { background: radial-gradient(ellipse at var(--p1x) var(--p1y), var(--mesh-amethyst) 0%, transparent 70%); animation-duration: 31s; }
.mesh-b { background: radial-gradient(ellipse at var(--p2x) var(--p2y), var(--mesh-ocean) 0%, transparent 60%); mix-blend-mode: screen; animation-duration: 43s; }
.mesh-c { background: radial-gradient(ellipse at var(--p3x) var(--p3y), var(--mesh-velvet) 0%, transparent 50%), conic-gradient(from 40deg, var(--mesh-ink), transparent, var(--violet), transparent, var(--primary-surface)); mix-blend-mode: overlay; animation-duration: 59s; }
.tone-one .mesh-a { background: radial-gradient(ellipse at var(--p1x) var(--p1y), #2a1f4a 0%, transparent 68%); }
.tone-two .mesh-b { background: radial-gradient(ellipse at var(--p2x) var(--p2y), #0e1a30 0%, transparent 62%); }
.tone-three .mesh-c { background: radial-gradient(ellipse at var(--p3x) var(--p3y), #3d2860 0%, transparent 55%); }

@keyframes breathe {
  0% { --p1x: 20%; --p1y: 30%; --p2x: 72%; --p2y: 42%; --p3x: 46%; --p3y: 74%; transform: scale(1) rotate(0deg); }
  100% { --p1x: 82%; --p1y: 68%; --p2x: 24%; --p2y: 76%; --p3x: 70%; --p3y: 24%; transform: scale(1.08) rotate(4deg); }
}

.title-stack { position: relative; z-index: 2; text-align: center; padding: 36px; text-shadow: 0 6px 18px rgba(0,0,0,0.78); }
.eyebrow, .subtitle, .panel-kicker, .plate-label, .sidebar-plate, .toggle-row, .dial span { font-family: 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; }
.eyebrow { color: var(--steel); font-size: 0.82rem; margin: 0 0 16px; }
h1 {
  margin: 0;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.18em;
  color: transparent;
  background: linear-gradient(180deg, #c0c8d8, #8890a8 44%, #e0d8f0 52%, #6a7090);
  -webkit-background-clip: text;
  background-clip: text;
}
.subtitle { color: var(--moonbeam); font-size: clamp(1rem, 2vw, 1.45rem); margin: 18px 0 0; }

.indicator-row { display: flex; gap: 12px; justify-content: center; padding: 12px; }
.indicator { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d4a040, #8a6020 60%, #0a0e1a); box-shadow: inset 0 1px 2px rgba(224,216,240,0.25), 0 0 8px rgba(212,160,64,0.65); animation: pulse 2s ease-in-out infinite; opacity: 0.58; }
.indicator.on { opacity: 1; }
.indicator.slow { animation-duration: 3.7s; }
@keyframes pulse { 50% { box-shadow: inset 0 1px 2px rgba(224,216,240,0.35), 0 0 18px #d4a040; transform: scale(1.14); } }

.gauge-bank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; margin-bottom: 3px; }
.gauge-window { padding: 12px; border-radius: 14px; background: linear-gradient(145deg, rgba(10,14,26,0.58), rgba(30,36,68,0.7)); box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 1px 1px 0 rgba(224,216,240,0.07); }
.small-viewport { height: clamp(180px, 20vw, 260px); border-radius: 12px; }
.plate-label { width: fit-content; margin: 16px auto 10px; padding: 7px 22px; color: #0a0e1a; background: linear-gradient(145deg, #b89d6a, #8a6020); border-radius: 5px; box-shadow: 0 2px 0 #0a0e1a, inset 1px 1px 0 rgba(224,216,240,0.32), inset -1px -1px 0 rgba(0,0,0,0.42); text-shadow: 0 1px rgba(224,216,240,0.22); }
.gauge-window p { margin: 0; text-align: center; color: var(--steel); font-size: 1rem; line-height: 1.45; }

.content-grid { display: grid; grid-template-columns: 1fr 0.4fr; gap: 3px; align-items: start; }
.left-stem { display: grid; gap: 3px; }
.story-panel { position: relative; min-height: 320px; padding: clamp(38px, 5vw, 72px); }
.page-badge { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b89d6a, #8a6020); color: #0a0e1a; font: 600 0.82rem 'Barlow Condensed', Impact, sans-serif; letter-spacing: 0.18em; box-shadow: 0 3px 0 #0a0e1a, inset 1px 1px 0 rgba(224,216,240,0.4), inset -1px -1px 0 rgba(0,0,0,0.45); text-shadow: 0 -1px #0a0e1a, 0 1px #2a2f4a; }
.panel-kicker { color: var(--steel-dark); font-size: 0.78rem; margin: 0 0 14px 0; }
h2 { margin: 0 0 22px; color: #a0a8c0; font: 600 clamp(1.6rem, 3.5vw, 2.8rem)/1 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; }
p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.75; }
.story-panel p:not(.panel-kicker) { max-width: 66ch; color: var(--parchment); }
.story-panel em { color: var(--moonbeam); }

.instrument-sidebar { position: sticky; top: 12px; padding: 18px; display: grid; gap: 18px; min-height: 720px; }
.sidebar-plate { text-align: center; color: #0a0e1a; background: linear-gradient(145deg, #b89d6a, #8a6020); border-radius: 6px; padding: 9px; font-size: 0.78rem; box-shadow: 0 2px 0 #0a0e1a, inset 1px 1px 0 rgba(224,216,240,0.34), inset -1px -1px 0 rgba(0,0,0,0.42); }
.porthole-stack { display: grid; justify-items: center; gap: 18px; }
.round-port { position: relative; width: min(100%, 132px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid #0a0e1a; box-shadow: 0 0 0 2px #b89d6a, 0 13px 22px rgba(0,0,0,0.62), inset 0 0 28px rgba(123,104,174,0.24); }
.round-port.alt { width: min(100%, 104px); }

.switch-board, .dial-board { padding: 12px; border-radius: 14px; background: repeating-linear-gradient(90deg, #1e2444 0 1px, #1c2240 1px 2px); box-shadow: inset 0 0 22px rgba(0,0,0,0.62), 1px 1px 0 rgba(224,216,240,0.08); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--steel); font-size: 0.75rem; padding: 10px 0; }
.toggle { position: relative; display: inline-block; width: 40px; height: 20px; border-radius: 999px; background: #1e2444; box-shadow: inset 0 2px 7px rgba(0,0,0,0.8), 0 1px 0 rgba(224,216,240,0.14); }
.toggle::after { content: ''; position: absolute; width: 16px; height: 16px; top: 2px; left: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e0d8f0, #6a7090 62%, #0a0e1a); box-shadow: 0 2px 6px rgba(0,0,0,0.65); animation: toggle-drift 7s ease-in-out infinite alternate; }
.toggle.delay::after { animation-delay: -2s; }
.toggle.long::after { animation-duration: 11s; }
@keyframes toggle-drift { to { transform: translateX(18px); } }

.dial-board { display: grid; gap: 14px; }
.dial { text-align: center; color: var(--steel-dark); }
.dial svg { width: 82px; height: 82px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.65)); }
.dial path { fill: none; stroke: #b89d6a; stroke-width: 4; stroke-linecap: round; }
.dial line { stroke: #d4a040; stroke-width: 3; stroke-linecap: round; transform-origin: 50px 62px; transform: rotate(-52deg); }
.dial circle { fill: #e0d8f0; stroke: #0a0e1a; stroke-width: 2; }
.dial span { display: block; margin-top: -8px; font-size: 0.7rem; }
.dial-board.is-running .dial[data-speed='prime-a'] line { animation: needle-sweep 15s ease-in-out infinite alternate; }
.dial-board.is-running .dial[data-speed='prime-b'] line { animation: needle-sweep 23s ease-in-out infinite alternate-reverse; }
.dial-board.is-running .dial[data-speed='prime-c'] line { animation: needle-sweep 37s ease-in-out infinite alternate; }
@keyframes needle-sweep { 0% { transform: rotate(-52deg); } 55% { transform: rotate(44deg); } 100% { transform: rotate(-18deg); } }

.base-plate { margin-top: 3px; background: repeating-linear-gradient(0deg, #1e2444 0 1px, #141830 1px 3px); }

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
  .instrument-sidebar { position: relative; top: auto; min-height: 0; grid-template-columns: 1fr 1fr; }
  .sidebar-plate, .dial-board { grid-column: 1 / -1; }
  .porthole-stack { grid-template-columns: repeat(3, 1fr); }
  .round-port, .round-port.alt { width: min(100%, 104px); }
}

@media (max-width: 768px) {
  .machine { width: calc(100% - 12px); margin: 6px auto; padding: 6px; }
  .top-rail, .base-plate { flex-direction: column; gap: 6px; }
  .gauge-bank { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .gauge-window { min-width: 78vw; scroll-snap-align: start; }
  .story-panel { padding: 60px 24px 30px; }
  .instrument-sidebar { grid-template-columns: 1fr; }
}