:root {
  --navy: #101A2E;
  --coral: #FF7F6E;
  --cream: #FFE6B8;
  --cyan: #D8F8FF;
  --lavender: #B7A6FF;
  --slate: #26334A;
  --mint: #8CFFD1;
  --body: "Noto Sans", "Segoe UI", Frutiger, Arial, sans-serif;
  --display: "Atkinson Hyperlegible", "Trebuchet MS", Verdana, sans-serif;
  --console: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
}

/* Space Grotesk* Grotesk** from Google Fonts. Use it sparingly for panel labels */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cyan);
  background: var(--navy);
  font-family: var(--body);
  overflow-x: hidden;
}

body.booted .boot-screen { opacity: 0; pointer-events: none; transform: scale(1.04); }

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  gap: 18px;
  align-content: center;
  background: radial-gradient(circle at 50% 48%, #26334A 0%, #101A2E 48%, #080d18 100%);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.boot-screen p {
  margin: 0;
  font: 600 13px/1 var(--console);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}

.boot-bead {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 32px var(--mint), 0 0 80px rgba(140,255,209,.45);
  animation: bootPulse 1.2s ease-in-out infinite;
}

.site-shell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 8%, rgba(183,166,255,.28), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(140,255,209,.14), transparent 28%),
    linear-gradient(180deg, #101A2E 0%, #17213a 38%, #101A2E 100%);
}

.ambient, .perspective-grid { position: fixed; pointer-events: none; }
.ambient { width: 44vw; height: 44vw; border-radius: 43% 57% 48% 52%; filter: blur(30px); opacity: .34; z-index: -2; }
.ambient-lavender { top: 6%; left: -16%; background: var(--lavender); animation: blobFloat 18s ease-in-out infinite; }
.ambient-mint { right: -18%; bottom: 8%; background: var(--mint); animation: blobFloat 22s ease-in-out infinite reverse; }

.perspective-grid {
  inset: auto -10vw 0;
  height: 64vh;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(216,248,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,248,255,.16) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(640px) rotateX(63deg) translateY(12vh);
  transform-origin: center bottom;
}

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

.wordmark {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--cream);
}

.wordmark span {
  display: inline-block;
  padding: .08em .22em .14em;
  border: 1px solid rgba(216,248,255,.22);
  border-radius: 999px;
  background: rgba(216,248,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,230,184,.32), 0 14px 36px rgba(0,0,0,.16);
  opacity: 0;
  animation: assemble .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.wordmark span:nth-child(2) { animation-delay: .18s; color: var(--mint); }
.wordmark span:nth-child(3) { animation-delay: .36s; color: var(--lavender); }

.command-console {
  position: relative;
  width: min(1020px, 94vw);
  height: min(620px, 70vh);
  min-height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(216,248,255,.22);
  background: radial-gradient(ellipse at 50% 45%, rgba(216,248,255,.22), rgba(183,166,255,.11) 55%, rgba(16,26,46,.18) 70%);
  box-shadow: inset 0 2px 0 rgba(255,230,184,.25), 0 48px 120px rgba(0,0,0,.38);
  animation: consoleRise 1.2s ease forwards;
}

.orbit-map { position: absolute; inset: 0; width: 100%; height: 100%; }

.focus-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(180px, 28vw, 330px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.focus-core.retune-pulse .core-ring { animation: ringTurn 1.6s linear infinite, retuneGlow 1.4s ease; }

.core-ring {
  position: absolute;
  inset: 4%;
  border: 3px solid rgba(140,255,209,.72);
  border-radius: 45% 55% 52% 48%;
  box-shadow: 0 0 40px rgba(140,255,209,.38), inset 0 0 30px rgba(140,255,209,.14);
  animation: ringTurn 12s linear infinite;
}

.core-blob {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 48% 52% 39% 61% / 58% 43% 57% 42%;
  background:
    radial-gradient(circle at 32% 28%, #FFE6B8 0 8%, transparent 9%),
    linear-gradient(135deg, #FF7F6E 0%, #B7A6FF 52%, #8CFFD1 100%);
  box-shadow: inset 20px -20px 42px rgba(16,26,46,.18), 0 0 54px rgba(183,166,255,.48);
  animation: breathe 7s ease-in-out infinite;
}

.core-label, .widget small, .widget span, .tab, .floating-note, .system-poem, .dial-caption {
  font-family: var(--console);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.core-label { position: absolute; bottom: 16%; color: var(--navy); font-size: 11px; font-weight: 700; }

.widget {
  position: absolute;
  width: 150px;
  min-height: 116px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(216,248,255,.28);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(216,248,255,.30), rgba(183,166,255,.13));
  box-shadow: 0 20px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}
.widget span { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--cream); }
.widget small { display: block; margin-top: 6px; font-size: 9px; line-height: 1.35; color: var(--cyan); opacity: .78; }
.widget-signal { left: 13%; top: 18%; }
.widget-drift { right: 12%; top: 20%; }
.widget-quiet { left: 17%; bottom: 15%; }
.widget-loop { right: 18%; bottom: 14%; }
.widget-resolve { left: 50%; top: 4%; transform: translateX(-50%); }

.iso-cube, .iso-drawer, .iso-loop, .iso-bonsai, .iso-turbine { width: 46px; height: 36px; position: relative; }
.iso-cube { transform: rotate(45deg) skew(-10deg,-10deg); background: #8CFFD1; box-shadow: 12px 12px 0 #63cba6, 24px 24px 24px rgba(0,0,0,.18); }
.iso-turbine { display: grid; place-items: center; animation: ringTurn 10s linear infinite; }
.iso-turbine i { position: absolute; width: 26px; height: 18px; border-radius: 80% 30% 80% 30%; background: #FF7F6E; transform-origin: 6px 18px; }
.iso-turbine i:nth-child(2) { transform: rotate(120deg); background: #FFE6B8; }
.iso-turbine i:nth-child(3) { transform: rotate(240deg); background: #B7A6FF; }
.iso-drawer { border-radius: 10px; background: rgba(216,248,255,.55); box-shadow: inset 0 -12px 0 rgba(183,166,255,.35), 10px 10px 0 rgba(38,51,74,.5); }
.iso-loop { border: 7px solid #8CFFD1; border-left-color: #FF7F6E; border-radius: 50%; box-shadow: 0 0 18px rgba(140,255,209,.35); }
.iso-bonsai:before { content: ""; position: absolute; left: 19px; bottom: 0; width: 8px; height: 28px; background: #FFE6B8; border-radius: 6px; }
.iso-bonsai:after { content: ""; position: absolute; left: 4px; top: 0; width: 38px; height: 24px; border-radius: 54% 46% 42% 58%; background: #8CFFD1; box-shadow: 9px 7px 0 #B7A6FF; }

.rail { position: absolute; border: 2px solid rgba(140,255,209,.26); border-radius: 999px; }
.rail-one { width: 40vw; height: 18vh; left: 3vw; top: 20vh; transform: rotate(-12deg); }
.rail-two { width: 48vw; height: 22vh; right: -4vw; bottom: 16vh; transform: rotate(10deg); }

.sticky-console {
  position: sticky;
  top: 8vh;
  width: min(1040px, 92vw);
  min-height: 78vh;
  border: 1px solid rgba(216,248,255,.22);
  border-radius: 46px;
  background: linear-gradient(145deg, rgba(216,248,255,.13), rgba(183,166,255,.08) 52%, rgba(16,26,46,.44));
  box-shadow: 0 44px 120px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,230,184,.18);
  overflow: hidden;
}

.sticky-console:before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 34px;
  border: 1px dashed rgba(255,230,184,.24);
}

.mode-title { position: absolute; left: clamp(28px, 7vw, 86px); top: clamp(30px, 7vw, 72px); z-index: 2; }
.mode-title small { font: 700 12px/1 var(--console); letter-spacing: .2em; text-transform: uppercase; color: var(--mint); }
.mode-title h1 { margin: 10px 0 0; font: 800 clamp(54px, 11vw, 136px)/.82 var(--display); letter-spacing: -.08em; color: var(--cream); }

.instrument.oval-meter {
  position: absolute;
  right: 9%;
  top: 18%;
  width: min(430px, 46vw);
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(140,255,209,.22), rgba(216,248,255,.10) 54%, transparent 56%);
  border: 2px solid rgba(140,255,209,.36);
}
.meter-glow { position: absolute; inset: 23%; border-radius: inherit; background: var(--mint); filter: blur(34px); opacity: .22; animation: meterGlow 5s ease-in-out infinite; }
.bead { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 24px var(--mint); animation: beadBlink 4s ease-in-out infinite; }
.bead-a { left: 24%; top: 48%; } .bead-b { left: 47%; top: 34%; animation-delay: .7s; } .bead-c { right: 23%; top: 48%; animation-delay: 1.4s; }
.oval-meter p { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); margin: 0; color: var(--cream); font: 700 18px var(--display); }

.schematic-card {
  position: absolute;
  width: min(330px, 72vw);
  padding: 24px;
  border-radius: 28px;
  color: var(--slate);
  background: linear-gradient(145deg, rgba(255,230,184,.96), rgba(216,248,255,.82));
  box-shadow: 18px 18px 0 rgba(38,51,74,.34);
}
.schematic-card p { margin: 12px 0 0; line-height: 1.5; font-weight: 600; }
.tab { display: inline-block; padding: 7px 11px; border-radius: 999px; color: var(--navy); background: var(--mint); font-size: 10px; font-weight: 800; }
.left-card { left: 8%; bottom: 12%; }
.right-card { right: 7%; bottom: 12%; }
.floating-note { position: absolute; right: 9%; bottom: 17%; width: 220px; color: var(--lavender); font-size: 11px; line-height: 1.6; }

.tube-system { position: absolute; left: 8%; bottom: 22%; width: 56%; height: 260px; }
.tube { position: absolute; inset: 32% 4%; border: 22px solid rgba(216,248,255,.24); border-left-color: rgba(140,255,209,.48); border-radius: 999px; transform: rotate(-8deg); }
.capsule { position: absolute; padding: 12px 18px; border-radius: 999px; background: var(--cyan); color: var(--slate); font: 800 12px var(--console); text-transform: uppercase; box-shadow: 0 14px 28px rgba(0,0,0,.2); animation: capsuleSlide 8s ease-in-out infinite; }
.cap-one { left: 4%; top: 42%; } .cap-two { left: 36%; top: 24%; animation-delay: -2.4s; } .cap-three { right: 15%; top: 50%; animation-delay: -4s; }
.pressure-blob { position: absolute; right: 16%; top: 18%; width: 245px; aspect-ratio: 1; border-radius: 42% 58% 53% 47%; background: linear-gradient(135deg, #FF7F6E, #FFE6B8); opacity: .9; animation: compressBlob 6s ease-in-out infinite; }
.system-poem { position: absolute; left: 10%; bottom: 12%; margin: 0; color: var(--mint); font-size: clamp(17px, 3vw, 34px); font-weight: 700; }

.glass-stack { position: absolute; inset: 24% 11% auto auto; width: min(520px, 55vw); height: 360px; }
.glass-panel { position: absolute; width: 82%; height: 150px; border-radius: 30px; border: 1px solid rgba(216,248,255,.38); background: linear-gradient(135deg, rgba(216,248,255,.28), rgba(183,166,255,.16)); box-shadow: 0 28px 54px rgba(0,0,0,.24); }
.glass-panel span { position: absolute; right: 28px; top: 22px; font: 800 14px var(--console); color: var(--cream); text-transform: uppercase; letter-spacing: .16em; }
.panel-a { left: 0; top: 0; transform: rotate(-7deg); }
.panel-b { left: 9%; top: 92px; transform: rotate(2deg); }
.panel-c { left: 18%; top: 185px; transform: rotate(8deg); }
.dial-cluster { position: absolute; left: 11%; bottom: 13%; }
.dial { width: 180px; aspect-ratio: 1; border-radius: 50%; border: 14px solid rgba(255,230,184,.62); background: radial-gradient(circle, rgba(16,26,46,.6), rgba(183,166,255,.18)); }
.dial i { display: block; width: 7px; height: 76px; margin: 18px auto; border-radius: 10px; background: var(--coral); transform-origin: bottom; animation: dialSweep 8s ease-in-out infinite; }
.dial-caption { margin-top: 15px; color: var(--cyan); font-size: 11px; }

.idle-engine { position: absolute; inset: 22% 12% 22% 12%; border-radius: 48%; background: radial-gradient(ellipse, rgba(216,248,255,.13), transparent 66%); border: 1px solid rgba(216,248,255,.18); }
.dock { position: absolute; width: 82px; height: 62px; border-radius: 20px; background: linear-gradient(145deg, var(--cyan), var(--lavender)); box-shadow: 12px 14px 0 rgba(38,51,74,.45); }
.dock-one { left: 18%; top: 40%; } .dock-two { right: 20%; top: 32%; } .dock-three { left: 48%; bottom: 13%; }
.settled-blob { position: absolute; left: 50%; top: 43%; width: 210px; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 54% 46% 49% 51%; background: linear-gradient(135deg, #8CFFD1, #B7A6FF 58%, #FF7F6E); animation: breathe 9s ease-in-out infinite; }
.idle-line { position: absolute; left: 18%; right: 18%; bottom: 22%; height: 3px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--mint), transparent); animation: meterGlow 5s ease-in-out infinite; }
.return-line { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: min(620px, 72vw); margin: 0; text-align: center; color: var(--cream); font: 700 clamp(18px, 3vw, 31px)/1.25 var(--display); }
.console-key { position: absolute; right: 8%; bottom: 8%; border: 0; border-radius: 999px; padding: 15px 22px; color: var(--navy); background: var(--mint); font: 800 12px var(--console); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 0 rgba(38,51,74,.65), 0 0 32px rgba(140,255,209,.26); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.console-key:active { transform: translateY(8px); box-shadow: 0 4px 0 rgba(38,51,74,.65), 0 0 32px rgba(140,255,209,.26); }

@keyframes bootPulse { 50% { transform: scale(.7); opacity: .56; } }
@keyframes assemble { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes consoleRise { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%,100% { border-radius: 48% 52% 39% 61% / 58% 43% 57% 42%; transform: scale(1); } 50% { border-radius: 58% 42% 59% 41% / 43% 60% 40% 57%; transform: scale(1.07); } }
@keyframes ringTurn { to { transform: rotate(360deg); } }
@keyframes blobFloat { 50% { transform: translate3d(8vw, -4vh, 0) scale(1.12); border-radius: 58% 42% 62% 38%; } }
@keyframes beadBlink { 0%,100% { opacity: .36; transform: scale(.78); } 45%,65% { opacity: 1; transform: scale(1.08); } }
@keyframes meterGlow { 50% { opacity: .55; filter: blur(24px); } }
@keyframes capsuleSlide { 50% { transform: translateX(54px) translateY(-14px); } }
@keyframes compressBlob { 50% { transform: scaleX(.78) scaleY(1.12) rotate(8deg); border-radius: 58% 42% 44% 56%; } }
@keyframes dialSweep { 0%,100% { transform: rotate(-38deg); } 50% { transform: rotate(42deg); } }
@keyframes retuneGlow { 50% { box-shadow: 0 0 70px rgba(140,255,209,.72), inset 0 0 42px rgba(255,230,184,.24); } }

@media (max-width: 760px) {
  .chamber { padding: 90px 18px; }
  .command-console { min-height: 650px; border-radius: 90px; }
  .widget { width: 128px; padding: 13px; }
  .widget-signal { left: 5%; top: 16%; } .widget-drift { right: 4%; top: 18%; } .widget-quiet { left: 6%; bottom: 16%; } .widget-loop { right: 6%; bottom: 15%; } .widget-resolve { top: 3%; }
  .sticky-console { min-height: 82vh; border-radius: 34px; }
  .mode-title h1 { font-size: 52px; }
  .instrument.oval-meter, .glass-stack, .tube-system { width: 78vw; left: 50%; right: auto; transform: translateX(-50%); top: 30%; }
  .schematic-card { left: 50%; right: auto; bottom: 7%; transform: translateX(-50%); }
  .floating-note { display: none; }
  .pressure-blob { right: 8%; top: 18%; width: 150px; }
  .return-line { bottom: 18%; }
  .console-key { right: 50%; transform: translateX(50%); }
}