:root {
  --ink: #edf8f4;
  --muted: rgba(226, 244, 238, .62);
  --soft: rgba(226, 244, 238, .12);
  --line: rgba(226, 244, 238, .2);
  --panel: rgba(6, 31, 37, .74);
  --panel-solid: #092d34;
  --sea: #41d7cc;
  --lime: #c3e66e;
  --alert: #ff6f5c;
  --sand: #eac98b;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #071f25;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

#app { position: relative; width: 100%; height: 100%; min-height: 600px; isolation: isolate; }

#scene { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; touch-action: none; }

.atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 22, 29, .22), transparent 24%, transparent 58%, rgba(3, 18, 23, .4));
  pointer-events: none;
}

.topbar {
  position: absolute;
  z-index: 10;
  top: max(20px, env(safe-area-inset-top));
  right: 26px;
  left: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -.055em;
  text-decoration: none;
  pointer-events: auto;
}

.brand svg { width: 31px; height: 31px; }
.brand svg > :first-child { fill: var(--sea); }
.brand-wave { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

.scenario-title { display: flex; align-items: center; flex-direction: column; gap: 3px; text-align: center; }
.scenario-title small { color: rgba(237, 248, 244, .48); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.scenario-title strong { font-size: 13px; font-weight: 680; letter-spacing: -.01em; }

.network-state {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  min-width: 155px;
  padding: 9px 13px;
  background: rgba(7, 30, 36, .66);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(12px);
}

.network-state > i { width: 8px; height: 8px; background: #8da0a1; border-radius: 50%; box-shadow: 0 0 0 5px rgba(141, 160, 161, .12); }
.network-state div { display: flex; flex-direction: column; gap: 1px; }
.network-state small { color: rgba(237, 248, 244, .42); font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.network-state strong { font-size: 10px; font-weight: 720; }
.network-state[data-state="building"] > i { background: var(--sand); box-shadow: 0 0 0 5px rgba(234, 201, 139, .13); }
.network-state[data-state="online"] > i { background: var(--lime); box-shadow: 0 0 0 5px rgba(195, 230, 110, .14); }
.network-state[data-state="threat"] > i { background: var(--alert); box-shadow: 0 0 0 5px rgba(255, 111, 92, .14); animation: pulse 1s infinite; }
.network-state[data-state="resilient"] > i { background: var(--sea); box-shadow: 0 0 0 5px rgba(65, 215, 204, .14); }

.metrics {
  position: absolute;
  z-index: 8;
  top: 104px;
  left: 26px;
  width: 184px;
  padding: 9px 13px 11px;
  background: var(--panel);
  border: 1px solid rgba(226, 244, 238, .16);
  border-radius: 17px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px);
}

.metric { padding: 10px 0; border-bottom: 1px solid rgba(226, 244, 238, .1); }
.metric:last-child { border-bottom: 0; }
.metric > span { display: block; margin-bottom: 3px; color: rgba(226, 244, 238, .42); font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.metric > strong { display: block; overflow: hidden; font-size: 11px; font-weight: 710; text-overflow: ellipsis; white-space: nowrap; }
.metric > i { display: block; height: 2px; margin-top: 7px; overflow: hidden; background: rgba(226, 244, 238, .11); border-radius: 9px; }
.metric > i > b { display: block; width: 0; height: 100%; background: var(--sea); border-radius: inherit; transition: width .5s var(--ease), background .3s; }
.threat-metric > i > b { background: var(--alert); }

.view-controls {
  position: absolute;
  z-index: 12;
  top: 104px;
  right: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-controls button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 120px;
  min-height: 38px;
  padding: 0 12px;
  color: rgba(237, 248, 244, .72);
  background: var(--panel);
  border: 1px solid rgba(226, 244, 238, .17);
  border-radius: 11px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}

.view-controls button:hover, .view-controls button:focus-visible { color: var(--ink); border-color: rgba(195, 230, 110, .55); transform: translateX(-3px); }
.view-controls button[aria-pressed="true"] { color: var(--lime); background: rgba(8, 61, 64, .82); border-color: rgba(195, 230, 110, .34); }
.view-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.view-controls span { font-size: 9px; font-weight: 700; }

.world-label { position: absolute; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 6px 9px; color: rgba(237, 248, 244, .82); background: rgba(6, 31, 37, .7); border: 1px solid rgba(226, 244, 238, .18); border-radius: 999px; font-size: 7px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity .3s; backdrop-filter: blur(8px); }
.world-label.visible { opacity: 1; }
.world-label i { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; }

.story-panel {
  position: absolute;
  z-index: 11;
  right: 26px;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 26px;
  display: grid;
  grid-template-columns: minmax(370px, .8fr) minmax(330px, .55fr) minmax(480px, 1.2fr);
  align-items: center;
  gap: 26px;
  padding: 17px 18px;
  background: rgba(5, 27, 33, .82);
  border: 1px solid rgba(226, 244, 238, .18);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
}

.story-copy { display: grid; grid-template-columns: 48px 1fr; gap: 16px; min-width: 0; }
.stage-index { padding-top: 3px; border-right: 1px solid rgba(226, 244, 238, .15); }
.stage-index > span { display: block; color: var(--lime); font-size: 18px; font-weight: 760; letter-spacing: -.03em; }
.stage-index > small { display: none; }
.stage-text { min-width: 0; }
.stage-text h1 { margin: 0 0 4px; overflow: hidden; font-size: clamp(15px, 1.3vw, 20px); font-weight: 620; letter-spacing: -.035em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.stage-text p { display: -webkit-box; max-width: 600px; margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.transport-controls { display: grid; grid-template-columns: 42px 34px 1fr; align-items: center; gap: 8px; }
.play-button, .restart-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: #08292f; background: var(--lime); border: 0; border-radius: 50%; cursor: pointer; transition: transform .25s var(--ease), background .25s; }
.restart-button { width: 31px; height: 31px; color: rgba(237, 248, 244, .7); background: rgba(226, 244, 238, .09); border: 1px solid rgba(226, 244, 238, .15); }
.play-button:hover, .restart-button:hover, .play-button:focus-visible, .restart-button:focus-visible { transform: scale(1.08); }
.play-button svg { width: 16px; height: 16px; fill: currentColor; }
.play-button .play-icon { display: none; }
.play-button.paused .pause-icon { display: none; }
.play-button.paused .play-icon { display: block; }
.restart-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.progress-wrap { min-width: 0; }
#timeline { width: 100%; height: 14px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
#timeline::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--lime) 0 var(--timeline-fill, 0%), rgba(226, 244, 238, .15) var(--timeline-fill, 0%) 100%); border-radius: 4px; }
#timeline::-moz-range-track { height: 2px; background: rgba(226, 244, 238, .15); }
#timeline::-moz-range-progress { height: 2px; background: var(--lime); }
#timeline::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4.5px; appearance: none; background: var(--lime); border: 3px solid #173e42; border-radius: 50%; box-shadow: 0 0 0 2px rgba(195, 230, 110, .35); }
#timeline::-moz-range-thumb { width: 7px; height: 7px; background: var(--lime); border: 3px solid #173e42; border-radius: 50%; }
.progress-meta { display: flex; justify-content: space-between; color: rgba(226, 244, 238, .38); font-size: 6px; font-weight: 700; letter-spacing: .08em; }

.stage-nav { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.stage-nav button { min-width: 0; padding: 7px 2px 6px; color: rgba(237, 248, 244, .42); background: transparent; border: 0; border-top: 1px solid rgba(226, 244, 238, .14); cursor: pointer; text-align: left; transition: color .25s, border-color .25s, background .25s; }
.stage-nav button:hover, .stage-nav button:focus-visible { color: var(--ink); }
.stage-nav button.active { color: var(--ink); background: linear-gradient(180deg, rgba(195, 230, 110, .1), transparent); border-color: var(--lime); }
.stage-nav span { display: block; margin-bottom: 3px; color: currentColor; font-size: 7px; font-weight: 800; }
.stage-nav small { display: block; overflow: hidden; font-size: 6px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.interaction-hint { position: absolute; z-index: 5; right: 31px; bottom: 160px; display: flex; align-items: center; gap: 7px; color: rgba(237, 248, 244, .42); font-size: 7px; font-weight: 650; pointer-events: none; }
.interaction-hint > span { width: 14px; height: 18px; border: 1px solid rgba(237, 248, 244, .42); border-radius: 7px; }
.interaction-hint > span::after { display: block; width: 1px; height: 4px; margin: 3px auto 0; background: rgba(237, 248, 244, .55); content: ""; }

.disclosure-note { position: absolute; z-index: 5; bottom: 160px; left: 31px; max-width: 360px; color: rgba(237, 248, 244, .38); font-size: 7px; line-height: 1.5; pointer-events: none; }

.loading {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-content: center;
  color: #123c40;
  background: #edf5ef;
  text-align: center;
  transition: opacity .8s var(--ease), visibility .8s;
}

.loading.hidden { visibility: hidden; opacity: 0; }
.loading-brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 27px; font-weight: 820; letter-spacing: -.055em; }
.loading-brand svg { width: 40px; height: 40px; }
.loading-brand svg > :first-child { fill: #158d8d; }
.loading-brand svg > :last-child { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.loading > p { margin: 26px 0 15px; color: #587173; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.loading-line { width: 250px; height: 2px; overflow: hidden; background: rgba(18, 60, 64, .12); border-radius: 5px; }
.loading-line i { display: block; width: 38%; height: 100%; background: #168f92; animation: load 1.5s var(--ease) infinite; }

.fallback, .noscript { position: fixed; z-index: 120; inset: 0; display: grid; max-width: none; padding: 30px; place-content: center; color: #123c40; background: #edf5ef; text-align: center; }
.fallback[hidden] { display: none; }
.fallback strong { font-size: 30px; }
.fallback p { max-width: 520px; color: #587173; }
.fallback a, .noscript a { color: #087178; font-weight: 750; }

@keyframes load { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes pulse { 50% { opacity: .38; } }

@media (max-width: 1180px) {
  .story-panel { grid-template-columns: 1fr minmax(320px, .7fr); }
  .stage-nav { grid-column: 1 / -1; }
  .interaction-hint, .disclosure-note { bottom: 214px; }
}

@media (max-width: 760px) {
  #app { min-height: 540px; }
  .topbar { top: max(12px, env(safe-area-inset-top)); right: 12px; left: 12px; grid-template-columns: 1fr auto; }
  .scenario-title { display: none; }
  .network-state { min-width: 136px; padding: 8px 10px; }
  .metrics { top: 71px; left: 12px; display: grid; width: calc(100% - 24px); padding: 5px 9px; grid-template-columns: repeat(4, 1fr); border-radius: 13px; }
  .metric { min-width: 0; padding: 6px 7px; border-right: 1px solid rgba(226, 244, 238, .1); border-bottom: 0; }
  .metric:last-child { border-right: 0; }
  .metric > span { font-size: 5px; letter-spacing: .08em; }
  .metric > strong { font-size: 8px; }
  .metric > i { margin-top: 5px; }
  .view-controls { top: 129px; right: 12px; gap: 6px; }
  .view-controls button { justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
  .view-controls span { display: none; }
  .world-labels { display: none; }
  .story-panel { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; display: block; padding: 13px; border-radius: 18px; }
  .story-copy { grid-template-columns: 34px 1fr; gap: 10px; }
  .stage-index > span { font-size: 15px; }
  .stage-text h1 { font-size: 15px; }
  .stage-text p { font-size: 8px; -webkit-line-clamp: 2; }
  .transport-controls { margin-top: 12px; grid-template-columns: 39px 31px 1fr; }
  .play-button { width: 36px; height: 36px; }
  .stage-nav { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
  .stage-nav::-webkit-scrollbar { display: none; }
  .stage-nav button { flex: 0 0 55px; }
  .interaction-hint, .disclosure-note { display: none; }
}

@media (max-height: 690px) and (min-width: 761px) {
  .metrics { top: 76px; }
  .view-controls { top: 76px; }
  .story-panel { bottom: 12px; padding-block: 12px; }
  .interaction-hint, .disclosure-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}