.spectrum-page {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.spectrum-main {
  --orb-hover-size: min(38vw, 38rem);
  --orb-hover-top: 11%;
  --orb-hover-right: 7.5%;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(100vh - var(--topbar-height));
  height: calc(100svh - var(--topbar-height));
  overflow: hidden;
  background: var(--bg);
}

.spectrum-canvas {
  z-index: -2;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spectrum-shade {
  z-index: -1;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent), transparent 30%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 74%, transparent), transparent 28%);
  pointer-events: none;
}

.spectrum-orb-canvas {
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

:root[data-theme="light"] .spectrum-orb-canvas {
  mix-blend-mode: multiply;
}

.spectrum-orb-hover,
.spectrum-orb-geometry {
  z-index: 1;
  position: absolute;
  top: var(--orb-hover-top);
  right: var(--orb-hover-right);
  width: var(--orb-hover-size);
  height: var(--orb-hover-size);
  border-radius: 50%;
}

.spectrum-orb-hover {
  pointer-events: none;
}

.spectrum-orb-geometry {
  pointer-events: none;
  visibility: hidden;
}

.spectrum-orb-hover[hidden],
.spectrum-graph-hover[hidden] {
  display: none;
}

.spectrum-graph-hover {
  z-index: 1;
  position: absolute;
  bottom: 16%;
  left: 4%;
  width: 44%;
  height: 17%;
  pointer-events: none;
}

[data-spectrum][data-state="running"] .spectrum-orb-hover,
[data-spectrum][data-state="running"] .spectrum-graph-hover {
  pointer-events: auto;
}

.spectrum-orb-hover[data-cursor-active="true"],
.spectrum-graph-hover[data-cursor-active="true"] {
  border-color: transparent;
  background: transparent;
  transform: none;
}

.spectrum-hud {
  z-index: 2;
  position: absolute;
  top: var(--space-5);
  right: var(--page-inline);
  left: var(--page-inline);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-5);
  pointer-events: none;
}

.spectrum-hud-copy {
  display: grid;
  gap: var(--space-2);
  max-width: min(520px, 70vw);
}

.spectrum-label,
.spectrum-kicker {
  margin: 0;
  color: var(--accent-text);
  font: 650 10px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spectrum-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--text-soft);
  font: 500 12px/1.5 var(--font-ui);
}

.spectrum-stop {
  flex: 0 0 auto;
  pointer-events: auto;
}

.spectrum-stop[hidden] {
  display: none;
}

.spectrum-gate {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(760px, calc(100% - var(--page-inline) * 2));
  text-align: center;
  transform: translate(-50%, -48%);
}

.spectrum-gate[hidden] {
  display: none;
}

.spectrum-gate h1 {
  margin: 18px 0 20px;
  font: 560 clamp(84px, 14vw, 188px) / 0.82 var(--font-content);
  letter-spacing: -0.055em;
}

.spectrum-gate h1 span {
  color: var(--accent-text);
}

.spectrum-lede {
  max-width: 48ch;
  margin: 0;
  color: var(--text-soft);
  font: 430 clamp(18px, 2vw, 24px) / 1.5 var(--font-content);
}

.spectrum-start {
  min-width: 160px;
  margin-top: var(--space-5);
}

.spectrum-theme-tip {
  margin: var(--space-3) 0 0;
  color: var(--accent-text);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
}

.spectrum-start[aria-busy="true"] {
  pointer-events: none;
}

.spectrum-start[aria-busy="true"]::after {
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: spectrum-spin var(--duration-scene) linear infinite;
}

@keyframes spectrum-spin {
  to {
    transform: rotate(1turn);
  }
}

.spectrum-hint {
  max-width: 58ch;
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font: 500 11px/1.65 var(--font-ui);
}

.spectrum-hint strong {
  color: var(--text-soft);
  font-weight: 650;
}

.spectrum-autogain {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--duration-base) ease;
}

[data-spectrum][data-state="running"] .spectrum-autogain {
  opacity: 1;
  transform: translateY(0);
}

.spectrum-autogain span {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spectrum-autogain output {
  color: var(--accent-text);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.04em;
}

[data-spectrum][data-state="requesting"] .spectrum-gate h1,
[data-spectrum][data-state="error"] .spectrum-gate h1 {
  color: var(--text);
}

[data-spectrum][data-state="error"] .spectrum-start {
  background: var(--text);
}

@media (max-width: 700px) {
  .spectrum-main {
    --orb-hover-size: 52vw;
    --orb-hover-top: 24%;
    --orb-hover-right: 10%;
  }

  .spectrum-graph-hover {
    bottom: 18%;
    left: 5%;
    width: 86%;
    height: 16%;
  }

  .spectrum-hud {
    top: var(--space-4);
    right: 18px;
    left: 18px;
  }

  .spectrum-hud-copy {
    max-width: calc(100% - 74px);
  }

  .spectrum-stop {
    min-width: 72px;
    padding: 0 var(--space-3);
  }

  .spectrum-gate {
    width: calc(100% - 36px);
    transform: translate(-50%, -45%);
  }

  .spectrum-gate h1 {
    margin: 16px 0 18px;
    font-size: clamp(70px, 24vw, 112px);
  }

  .spectrum-lede {
    font-size: 17px;
  }

  .spectrum-start {
    min-width: 174px;
    margin-top: var(--space-5);
  }

  .spectrum-hint {
    margin-top: var(--space-4);
    font-size: 10px;
  }

  .spectrum-autogain output {
    font-size: 18px;
  }
}

@media (max-height: 640px) {
  .spectrum-gate h1 {
    font-size: clamp(64px, 17vh, 118px);
  }

  .spectrum-hint {
    margin-top: var(--space-3);
  }
}

@media (hover: none) {
  .spectrum-orb-hover,
  .spectrum-graph-hover {
    pointer-events: none;
  }
}