/* Keep the instrument quiet; make the interface readable. */
:root {
  --muted: #a5ada4;
  --dim: #7c877d;
  --line: #e0ebe035;
}

.system-readout,
.instrument-button,
.chapter-nav a,
.text-button,
.eyebrow,
.chapter__instruction,
.micro-data,
.coordinate,
.loader__row,
.anomaly {
  font-size: 0.6875rem;
}

.wordmark {
  font-size: 0.75rem;
}

.system-readout {
  letter-spacing: 0.1em;
}

.system-readout__label {
  color: #8d988e;
}

.instrument-button {
  min-width: 154px;
  border-color: #e0ebe04a;
  letter-spacing: 0.09em;
  transition: border-color 180ms, background-color 180ms;
}

.instrument-button:hover,
.instrument-button:focus-visible {
  border-color: #c9de7280;
  background-color: #0e120fef;
}

body:not([data-app-ready="true"]) .motion-control,
body:not([data-app-ready="true"]) #skip-sequence {
  display: none;
}

.chapter-nav a {
  color: #919b90;
  letter-spacing: 0.06em;
}

.chapter-nav a:hover,
.chapter-nav a:focus-visible,
.chapter-nav a[aria-current="step"] {
  color: var(--accent);
}

.chapter-nav__label {
  position: absolute;
  left: 44px;
  width: max-content;
  color: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 180ms, transform 180ms, visibility 180ms;
  pointer-events: none;
}

.chapter-nav a:hover .chapter-nav__label,
.chapter-nav a:focus-visible .chapter-nav__label,
.chapter-nav a[aria-current="step"] .chapter-nav__label,
body[data-scene="arrival"] .chapter-nav a[href="#arrival"] .chapter-nav__label,
body[data-scene="acquisition"] .chapter-nav a[href="#acquisition"] .chapter-nav__label,
body[data-scene="alignment"] .chapter-nav a[href="#alignment"] .chapter-nav__label,
body[data-scene="expression"] .chapter-nav a[href="#expression"] .chapter-nav__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.chapter__content {
  padding-inline: max(10vw, 124px);
}

.eyebrow {
  letter-spacing: 0.15em;
}

.chapter__instruction {
  margin-top: clamp(1.75rem, 4vh, 3.5rem);
  letter-spacing: 0.11em;
  line-height: 1.6;
}

.text-button {
  color: #aab3a6;
  letter-spacing: 0.1em;
  text-decoration-color: #aab3a64d;
  transition: color 180ms, text-decoration-color 180ms;
}

a.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
}

.text-button:hover,
.text-button:focus-visible {
  color: var(--accent);
}

.micro-data {
  gap: 10px;
  letter-spacing: 0.08em;
}

.micro-data div {
  padding-top: 10px;
}

.coordinate {
  letter-spacing: 0.08em;
}

.chapter h1,
.chapter h2 {
  text-shadow: 0 1px 2px #050607, 0 0 18px #05060799;
}

.chapter__content--final {
  padding-bottom: clamp(148px, 19vh, 210px);
}

.chapter__content--final h2 {
  font-size: clamp(4.2rem, 10.3vw, 11.8rem);
  line-height: 0.84;
}

.final-statement {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  letter-spacing: 0.13em;
  text-shadow: 0 1px 2px #050607, 0 0 10px #050607b3;
}

.final-restart {
  margin-top: 1rem;
  color: var(--accent);
  text-decoration-color: #c9de726b;
}

.final-restart span {
  font-size: 1rem;
  line-height: 1;
}

.edge-telemetry {
  color: #778176;
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
}

.static-core__body path {
  stroke: #758277;
  stroke-opacity: 0.64;
  stroke-width: 1.2px;
}

.static-core__body path:nth-child(-n + 2) {
  stroke: #9ca88f;
  stroke-opacity: 0.6;
}

.static-core__energy {
  filter: drop-shadow(0 0 12px #d7ed773d);
}

.stage__aura {
  opacity: 0.7;
  transition: opacity 900ms;
}

body[data-scene="expression"] .stage__aura {
  opacity: 1;
  background: radial-gradient(circle, #cbe17c15, #92c0be07 36%, transparent 70%);
}

.noscript-note {
  position: absolute;
  top: 76px;
  bottom: auto;
  left: var(--pad-x);
  right: auto;
  width: max-content;
  max-width: calc(100% - var(--pad-x) - var(--pad-right));
  padding: 8px 10px;
  font-size: 0.6875rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .system-readout {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .chapter__content {
    padding-inline: var(--pad-x) var(--pad-right);
  }

  .chapter-nav {
    left: var(--pad-x);
    right: auto;
  }

  .chapter-nav a {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  body:not([data-app-ready="true"]) .chapter-nav {
    left: 50%;
    transform: translateX(-50%);
  }

  body:not([data-app-ready="true"]) .chapter__content--hero {
    padding-top: max(18vh, 158px);
  }

  .noscript-note {
    top: 72px;
  }

  body[data-scene] .chapter-nav a {
    transform: none;
  }

  .chapter-nav__label {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    white-space: nowrap;
  }

  .instrument-button {
    min-width: 142px;
    gap: 0.65rem;
    padding-inline: 11px;
    letter-spacing: 0.05em;
  }

  .eyebrow {
    margin-bottom: 1.125rem;
    letter-spacing: 0.12em;
  }

  .chapter__instruction {
    letter-spacing: 0.08em;
  }

  .chapter__content--final {
    padding-bottom: max(22vh, 154px);
  }

  .chapter__content--final h2 {
    font-size: clamp(2.5rem, 15vw, 5.7rem);
  }

  .final-statement {
    font-size: 0.6875rem;
    line-height: 1.65;
  }

  .edge-telemetry {
    grid-template-columns: auto minmax(24px, 1fr) auto;
    gap: 12px;
    font-size: 0.5625rem;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 360px) {
  .wordmark {
    font-size: 0.6875rem;
  }

  .instrument-button {
    width: 104px;
    min-width: 104px;
    padding-inline: 8px;
    gap: 3px;
    letter-spacing: 0.03em;
  }

  .chapter__content--hero h1,
  .chapter__content--final h2 {
    font-size: 14.5vw;
  }

  .edge-telemetry {
    gap: 8px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .chapter__content {
    padding-top: 72px;
    padding-bottom: 76px;
    justify-content: center;
  }

  body:not([data-app-ready="true"]) .chapter__content--hero {
    padding-top: 132px;
  }

  body:not([data-app-ready="true"]) .chapter__content--hero h1 {
    font-size: min(12vw, 18vh, 6.5rem);
  }

  body:not([data-app-ready="true"]) .chapter__content--hero .eyebrow {
    margin-bottom: 0.5rem;
  }

  body:not([data-app-ready="true"]) .chapter__instruction {
    margin-top: 0.75rem;
  }

  .static-core {
    width: min(46vw, 66vh);
    min-width: 0;
    top: 50%;
  }

  h1 {
    font-size: min(12vw, 21vh, 6.5rem);
  }

  h2 {
    font-size: min(11vw, 21vh, 5.7rem);
  }

  .eyebrow {
    margin-bottom: 0.875rem;
  }

  .chapter__instruction,
  .micro-data,
  .coordinate {
    margin-top: 1.125rem;
  }

  .chapter__content--final {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: start;
    column-gap: 1.75rem;
  }

  .chapter__content--final .eyebrow,
  .chapter__content--final h2 {
    grid-column: 1 / -1;
  }

  .chapter__content--final h2 {
    font-size: min(10.3vw, 22vh, 6.5rem);
  }

  .final-statement {
    margin-top: 1rem;
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .final-restart {
    align-self: end;
    margin-top: 0.75rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #c4c9c5;
    --dim: #a7ada9;
    --line: #ffffff6b;
  }

  .system-readout__label,
  .chapter-nav a,
  .text-button,
  .edge-telemetry {
    color: #c4c9c5;
  }
}