:root {
  /* Design typography tokens: IBM Plex Sans KR* KR** for Korean-inflected labels; Inter* Inter** for small timestamps; Space Grotesk* Grotesk** from Google Fonts. */
  --aero-aqua: #70D6E8;
  --brass: #9C8742;
  --senate-blue: #2E6F9E;
  --marble: #F8F2E6;
  --ink: #1F252B;
  --sky: #D9F6FF;
  --honey: #F4D99A;
  --violet: #B7A6D8;
  --space: "Space Grotesk", "Inter", system-ui, sans-serif;
  --plex: "IBM Plex Sans KR", "Noto Sans", system-ui, sans-serif;
  --body: "Noto Sans", "Inter", system-ui, sans-serif;
  --micro: "Inter", system-ui, sans-serif;
  --serif: "Lora", Georgia, serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--body);
  background: radial-gradient(circle at 50% 100%, rgba(244, 217, 154, 0.72), transparent 38%), linear-gradient(145deg, #D9F6FF, #70D6E8 45%, #F8F2E6);
}

button { font: inherit; }

.observatory {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center 78%, rgba(156, 135, 66, 0.32), transparent 26%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.86), transparent 16%),
    radial-gradient(circle at 82% 23%, rgba(183, 166, 216, 0.38), transparent 20%),
    linear-gradient(145deg, #D9F6FF 0%, #70D6E8 45%, #F8F2E6 100%);
}

.aqua-wash {
  position: absolute;
  inset: -12%;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 20px),
    radial-gradient(circle at 50% 40%, rgba(248, 242, 230, 0.5), transparent 34%);
  filter: blur(0.2px);
  animation: waterShift 16s ease-in-out infinite alternate;
  z-index: -5;
}

.rotunda-floor {
  position: absolute;
  left: 50%;
  bottom: -12vh;
  width: min(92vw, 980px);
  height: 42vh;
  transform: translateX(-50%) rotateX(66deg);
  transform-origin: center;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(46, 111, 158, 0.22) 0 2px, transparent 2px 42px),
    repeating-conic-gradient(from 10deg, rgba(156, 135, 66, 0.24) 0 8deg, rgba(248, 242, 230, 0.24) 8deg 18deg),
    radial-gradient(ellipse at center, rgba(248, 242, 230, 0.88), rgba(244, 217, 154, 0.5) 58%, transparent 72%);
  box-shadow: 0 -24px 100px rgba(31, 37, 43, 0.22), inset 0 0 26px rgba(255,255,255,0.75);
  opacity: 0.82;
  z-index: -3;
}

.rotunda-floor span {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(46, 111, 158, 0.24);
  border-radius: 50%;
}

.rotunda-floor span:nth-child(2) { inset: 25%; }
.rotunda-floor span:nth-child(3) { inset: 38%; border-color: rgba(156, 135, 66, 0.38); }
.rotunda-floor span:nth-child(4) { inset: 48%; }

.lens-flare {
  position: absolute;
  width: 28vw;
  height: 28vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.76), rgba(217,246,255,0.26) 34%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.flare-one { top: -9vw; left: 10vw; animation: glintDrift 12s ease-in-out infinite; }
.flare-two { right: -8vw; top: 18vh; width: 18vw; height: 18vw; animation: glintDrift 15s ease-in-out infinite reverse; }

.pylon {
  position: absolute;
  top: 10vh;
  width: clamp(74px, 8vw, 118px);
  height: 78vh;
  border-radius: 42px 42px 16px 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.8) 23%, rgba(248,242,230,0.8) 46%, rgba(156,135,66,0.12) 70%, rgba(46,111,158,0.18)),
    repeating-linear-gradient(100deg, rgba(31,37,43,0.08) 0 2px, transparent 2px 18px),
    var(--marble);
  box-shadow: inset 10px 0 20px rgba(255,255,255,0.72), inset -12px 0 20px rgba(46,111,158,0.16), 0 24px 54px rgba(31,37,43,0.22);
  transition: transform 800ms cubic-bezier(.2,.7,.1,1);
  z-index: 0;
}

.pylon::before,
.pylon::after {
  content: "";
  position: absolute;
  left: -14%;
  width: 128%;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(180deg, #F8F2E6, #F4D99A 65%, #9C8742);
  box-shadow: inset 0 4px 8px rgba(255,255,255,0.7), 0 10px 20px rgba(31,37,43,0.16);
}

.pylon::before { top: 4%; }
.pylon::after { bottom: 4%; }
.pylon i, .pylon b { position: absolute; left: 35%; width: 30%; height: 100%; border-left: 1px solid rgba(156,135,66,0.34); border-right: 1px solid rgba(46,111,158,0.16); }
.pylon-left { left: clamp(16px, 4vw, 64px); }
.pylon-right { right: clamp(16px, 4vw, 64px); }
.observatory[data-active="2"] .pylon-left { transform: translateX(-18px); }
.observatory[data-active="2"] .pylon-right { transform: translateX(18px); }
.observatory[data-active="4"] .pylon { filter: drop-shadow(0 0 18px rgba(183,166,216,0.55)); }

.command-chamber {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 760px) 1fr;
  grid-template-rows: 22vh 52vh 26vh;
  place-items: center;
  padding: 3.5vh 4vw;
}

.wordmark-glass {
  grid-column: 1 / 4;
  align-self: end;
  text-align: center;
  padding: 18px 36px 22px;
  border: 1px solid rgba(255,255,255,0.64);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(217,246,255,0.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -12px 30px rgba(112,214,232,0.16), 0 20px 70px rgba(46,111,158,0.18);
  backdrop-filter: blur(14px);
}

.eyebrow,
.panel-number,
.core-label,
.readout-header,
.inspection-note {
  font-family: var(--plex);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--senate-blue);
}

.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
h1 {
  margin: 0;
  font-family: var(--space);
  font-size: clamp(46px, 8vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.07em;
  color: rgba(31, 37, 43, 0.72);
  text-shadow: 0 2px 0 rgba(255,255,255,0.78), 0 18px 34px rgba(46,111,158,0.22), 0 0 22px rgba(217,246,255,0.9);
}
.subtitle { max-width: 820px; margin: 12px auto 0; font-weight: 500; color: rgba(31,37,43,0.74); }

.console-shell {
  grid-column: 2;
  grid-row: 2 / 4;
  position: relative;
  width: min(72vh, 720px);
  aspect-ratio: 1 / 0.78;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255,255,255,0.82), rgba(217,246,255,0.38) 31%, rgba(112,214,232,0.32) 44%, rgba(244,217,154,0.62) 65%, rgba(156,135,66,0.18) 82%),
    linear-gradient(145deg, #D9F6FF, #70D6E8 45%, #F8F2E6);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.92), inset 0 -28px 44px rgba(46,111,158,0.2), 0 34px 100px rgba(31,37,43,0.32);
  transform: perspective(1000px) rotateX(10deg) rotateZ(var(--console-tilt, 0deg));
  transition: transform 900ms cubic-bezier(.2,.7,.1,1), filter 700ms ease;
  z-index: 4;
}

.console-shell::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.76);
  box-shadow: inset 0 0 28px rgba(255,255,255,0.58), 0 0 0 12px rgba(244,217,154,0.18);
}

.console-shell::after {
  content: "";
  position: absolute;
  inset: 7% 13% auto;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.62), transparent);
  filter: blur(2px);
  animation: shineSweep 5.8s ease-in-out infinite;
}

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(46,111,158,0.34);
  pointer-events: none;
}
.orbit-outer { inset: -8%; animation: orbitBreathe 7s ease-in-out infinite; }
.orbit-inner { inset: 20%; border-color: rgba(156,135,66,0.48); }

.rim-tabs {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.rim-tab {
  position: absolute;
  min-width: 94px;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(217,246,255,0.54) 48%, rgba(112,214,232,0.42));
  box-shadow: inset 0 1px 0 white, inset 0 -7px 12px rgba(46,111,158,0.14), 0 10px 24px rgba(31,37,43,0.18);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 200ms ease;
  font-family: var(--plex);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.rim-tab:nth-child(1) { left: 50%; top: -5%; transform: translateX(-50%); }
.rim-tab:nth-child(2) { left: -2%; top: 32%; }
.rim-tab:nth-child(3) { right: -2%; top: 32%; }
.rim-tab:nth-child(4) { left: 16%; bottom: 0%; }
.rim-tab:nth-child(5) { right: 16%; bottom: 0%; }
.rim-tab:hover, .rim-tab.active { background: linear-gradient(180deg, #F8F2E6, #D9F6FF 48%, #70D6E8); box-shadow: inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -8px 12px rgba(46,111,158,0.22), 0 0 24px rgba(112,214,232,0.72); }
.rim-tab:active { transform: translateY(1px) scale(0.98); }
.rim-tab:nth-child(1):active { transform: translateX(-50%) translateY(1px) scale(0.98); }

.icon-orbit { position: absolute; inset: 0; animation: orbitRotate 32s linear infinite; transform-origin: 50% 50%; z-index: 6; }
.iso-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  transform: rotate(var(--a)) translateX(48%) translateX(min(28vh, 255px)) rotate(calc(-1 * var(--a)));
  transform-origin: 0 0;
  filter: drop-shadow(0 12px 12px rgba(31,37,43,0.18));
}
.iso-icon span, .iso-icon em { position: absolute; display: block; }
.iso-icon span { inset: 8px 10px 12px; border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(112,214,232,0.72), rgba(244,217,154,0.72)); transform: skewY(-15deg) rotate(45deg); box-shadow: inset 0 2px 0 rgba(255,255,255,0.9); }
.iso-icon em { left: 16px; top: 4px; width: 18px; height: 30px; border-radius: 50% 50% 6px 6px; background: linear-gradient(180deg, #F8F2E6, #9C8742); opacity: .86; }
.microphone span { background: radial-gradient(circle, #B7A6D8, rgba(217,246,255,0.65)); }
.dome em, .amphitheater em { width: 28px; left: 10px; border-radius: 24px 24px 8px 8px; }
.bead span { border-radius: 50%; background: radial-gradient(circle at 35% 25%, white, #D9F6FF 24%, #70D6E8 65%, #2E6F9E); }

.console-core {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 22%, rgba(255,255,255,0.92), rgba(217,246,255,0.44) 28%, rgba(46,111,158,0.32) 60%, rgba(244,217,154,0.42));
  border: 1px solid rgba(255,255,255,0.72);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 28px rgba(255,255,255,0.66), 0 22px 48px rgba(46,111,158,0.2);
  overflow: hidden;
}
.seal-svg { width: 88%; height: 88%; filter: drop-shadow(0 0 12px rgba(217,246,255,0.82)); }
.seal-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.laurel { stroke: #9C8742; stroke-width: 4; stroke-dasharray: 140; animation: drawSeal 5.2s ease-in-out infinite; }
.dome-line { stroke: #1F252B; stroke-width: 3; opacity: .72; stroke-dasharray: 260; animation: drawSeal 5.2s ease-in-out infinite .4s; }
.signal-rings span { position: absolute; inset: 27%; border: 2px solid rgba(183,166,216,.42); border-radius: 50%; animation: signalPulse 3.8s ease-out infinite; }
.signal-rings span:nth-child(2) { animation-delay: .8s; }
.signal-rings span:nth-child(3) { animation-delay: 1.6s; }
.bead-fall { position: absolute; top: 0; left: 50%; width: 26px; height: 100%; transform: translateX(-50%); }
.bead-fall span { position: absolute; left: 5px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, white, #D9F6FF 30%, #70D6E8 72%, #2E6F9E); animation: beadDrop 4.8s cubic-bezier(.3,.04,.2,1) infinite; }
.core-label { position: absolute; bottom: 12%; margin: 0; font-size: 10px; }

.chamber-stage {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  position: relative;
  width: min(34vw, 430px);
  height: 58vh;
  z-index: 5;
}
.chamber-panel {
  position: absolute;
  inset: 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 36px;
  background:
    linear-gradient(130deg, rgba(248,242,230,0.78), rgba(217,246,255,0.48) 44%, rgba(112,214,232,0.24)),
    radial-gradient(circle at 75% 14%, rgba(255,255,255,0.74), transparent 22%);
  box-shadow: inset 0 1px 0 white, inset 0 -22px 38px rgba(46,111,158,0.12), 0 26px 70px rgba(31,37,43,0.22);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateX(-44px) translateY(18px) scale(.96);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.8,.1,1);
  overflow: hidden;
}
.chamber-panel::after { content: ""; position: absolute; inset: auto -20% 8% 38%; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); box-shadow: 0 0 18px rgba(217,246,255,.8); }
.chamber-panel.active { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
.panel-number { font-size: 11px; font-weight: 600; color: var(--brass); }
.chamber-panel h2 { margin: 15px 0 12px; font-family: var(--space); font-size: clamp(30px, 3.8vw, 55px); line-height: .94; letter-spacing: -0.055em; }
.chamber-panel p { max-width: 28ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; font-weight: 500; color: rgba(31,37,43,.78); }
.artifact { position: absolute; right: 8%; bottom: 8%; width: 142px; height: 122px; transform: rotateX(60deg) rotateZ(-32deg); transform-style: preserve-3d; }
.artifact i, .artifact b, .artifact span { position: absolute; display: block; box-shadow: inset 0 3px 8px rgba(255,255,255,.68), 0 18px 24px rgba(31,37,43,.18); }
.artifact i { inset: 20px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(112,214,232,.55)); }
.artifact b { left: 42px; top: 2px; width: 58px; height: 80px; border-radius: 30px 30px 8px 8px; background: linear-gradient(180deg, #F8F2E6, #F4D99A 65%, #9C8742); }
.artifact span { left: 18px; bottom: 8px; width: 106px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse, rgba(217,246,255,.82), rgba(46,111,158,.24), transparent 70%); }
.ghost-mic i { background: radial-gradient(circle, rgba(183,166,216,.82), rgba(217,246,255,.5)); }
.weather-vane b { transform: rotate(35deg); height: 96px; }
.scroll-case i { border-radius: 40px; background: linear-gradient(145deg, #F4D99A, #F8F2E6); }

.instrument-readout {
  grid-column: 3;
  grid-row: 2 / 4;
  align-self: center;
  width: min(30vw, 340px);
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.68);
  background: linear-gradient(160deg, rgba(46,111,158,.62), rgba(112,214,232,.28), rgba(248,242,230,.54));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 22px 60px rgba(31,37,43,.2);
  backdrop-filter: blur(14px);
  z-index: 5;
}
.readout-header { font-size: 11px; color: var(--marble); margin-bottom: 18px; }
.readout-line { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.38); font-family: var(--micro); font-size: 13px; color: rgba(248,242,230,.92); }
.readout-line b { color: var(--honey); font-size: 18px; letter-spacing: -.03em; }

.bubble-field { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.bubble { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 30% 25%, white, rgba(217,246,255,.78) 34%, rgba(112,214,232,.32) 72%, transparent); box-shadow: inset 0 0 4px white; animation: bubbleRise var(--d) ease-out forwards; }
.inspection-note { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px; background: rgba(248,242,230,.48); box-shadow: inset 0 1px 0 white; font-size: 10px; z-index: 10; }

@keyframes waterShift { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1%, 0) scale(1.03); } }
@keyframes glintDrift { 0%,100% { transform: translate(0,0); opacity: .58; } 50% { transform: translate(4vw,3vh); opacity: .9; } }
@keyframes shineSweep { 0%, 42% { transform: translateX(-48%) rotate(-8deg); opacity: 0; } 55% { opacity: .85; } 100% { transform: translateX(62%) rotate(-8deg); opacity: 0; } }
@keyframes orbitBreathe { 0%,100% { transform: scale(.98); opacity: .55; } 50% { transform: scale(1.02); opacity: .94; } }
@keyframes orbitRotate { to { transform: rotate(360deg); } }
@keyframes drawSeal { 0% { stroke-dashoffset: 260; opacity: .2; } 44%, 74% { stroke-dashoffset: 0; opacity: .95; } 100% { stroke-dashoffset: -260; opacity: .3; } }
@keyframes signalPulse { 0% { transform: scale(.5); opacity: .62; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes beadDrop { 0% { transform: translateY(-20px) scale(.75); opacity: 0; } 14% { opacity: 1; } 72% { transform: translateY(145px) scale(1); opacity: .9; } 100% { transform: translateY(145px) scale(2.8); opacity: 0; } }
@keyframes bubbleRise { from { transform: translateY(0) scale(.6); opacity: .75; } to { transform: translateY(-150px) scale(1.25); opacity: 0; } }

@media (max-width: 980px) {
  body { overflow: auto; }
  .observatory { min-height: 1120px; height: auto; overflow: hidden; }
  .command-chamber { min-height: 1120px; grid-template-columns: 1fr; grid-template-rows: auto 430px 360px auto; gap: 22px; padding: 28px 18px 72px; }
  .wordmark-glass, .console-shell, .chamber-stage, .instrument-readout { grid-column: 1; grid-row: auto; }
  .console-shell { width: min(94vw, 620px); }
  .chamber-stage { width: min(94vw, 520px); height: 360px; }
  .instrument-readout { width: min(94vw, 520px); }
  .pylon { opacity: .42; }
  .iso-icon { transform: rotate(var(--a)) translateX(205px) rotate(calc(-1 * var(--a))); }
}

@media (max-width: 560px) {
  .rim-tab { min-width: 70px; padding: 8px 9px; font-size: 10px; }
  .rim-tab:nth-child(4) { left: 5%; }
  .rim-tab:nth-child(5) { right: 5%; }
  .iso-icon { width: 36px; height: 36px; transform: rotate(var(--a)) translateX(160px) rotate(calc(-1 * var(--a))); }
  .artifact { opacity: .45; right: -2%; }
}