:root {
  --guide-ink: #102033;
  --guide-muted: #637286;
  --guide-blue: #235cb0;
  --guide-blue-bright: #84b5ff;
  --guide-blue-soft: #eaf2ff;
  --guide-night: #0b1828;
  --guide-night-2: #142a43;
  --guide-line: #d7e0ea;
  --guide-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color: var(--guide-ink);
  background: #eef2f6;
}

body {
  background:
    linear-gradient(#91a8c00d 1px, transparent 1px),
    linear-gradient(90deg, #91a8c00d 1px, transparent 1px),
    #eef2f6;
  background-size: 40px 40px;
}

header {
  background: var(--guide-night);
  border-bottom: 1px solid #30455e;
}

.brand {
  font-style: italic;
  letter-spacing: -0.02em;
}

header small,
.stage-label {
  color: #a8c8f4;
}

header button,
.tools button {
  border-color: #506984;
  color: #dceaff;
  background: #152a42;
}

a {
  color: var(--guide-blue);
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline-color: var(--guide-blue-bright);
}

nav input,
.heading select,
.mobile-selector {
  border-color: #c8d3df;
  color: var(--guide-ink);
  background: #fff;
}

.nav-list button {
  color: #526277;
  transition:
    transform 160ms var(--guide-ease-out),
    color 160ms ease,
    background-color 160ms ease;
}

.nav-list button.active {
  color: #164b91;
  box-shadow: inset 3px 0 var(--guide-blue);
}

.heading h1,
.detail h2,
.detail h3 {
  color: var(--guide-ink);
}

.heading p,
.intro,
.explain,
.diagram-caption,
.count {
  color: var(--guide-muted);
}

.panel {
  border-color: var(--guide-line);
  border-radius: 2px;
  box-shadow: 0 18px 45px #1020330d;
}

.stage {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, #294d72 0, #142a43 43%, #091522 82%),
    var(--guide-night);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(#a9c8ef12 1px, transparent 1px),
    linear-gradient(90deg, #a9c8ef12 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.stage::after {
  content: "";
  position: absolute;
  inset: auto 12% 4% 12%;
  height: 13%;
  pointer-events: none;
  background: radial-gradient(ellipse, #7ea4d12e, transparent 67%);
  filter: blur(12px);
}

.loading {
  color: #c6dcf8;
}

.tools {
  background: var(--guide-night);
  border-color: #30455e;
}

.tools span {
  color: #aebfd3;
}

.tools button,
.choices button {
  transition:
    transform 160ms var(--guide-ease-out),
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.tools button:active,
.choices button:active {
  transform: scale(0.97);
}

.choices button {
  border-color: #d4dee9;
  color: #31465f;
  border-radius: 2px;
}

.choices button[aria-pressed="true"] {
  color: #174d94;
  background: var(--guide-blue-soft);
  border-color: #5f91d8;
  box-shadow: inset 0 0 0 1px #5f91d8;
}

.diagram {
  background: #f1f5f9;
  border: 1px solid #e0e7ef;
  border-radius: 2px;
}

.notice {
  color: #344a62;
  background: #e5eef9;
  border-color: #cbdced;
  border-radius: 2px;
}

.notice strong {
  color: #163f72;
}

.overlay line {
  stroke: var(--guide-blue-bright);
  stroke-width: 1.8;
}

.tag {
  color: #0e3f7e;
  background: #eff6ff;
  border-color: #84b5ff;
  border-radius: 2px;
  box-shadow: 0 7px 18px #020a1480;
}

.status {
  color: #795a27;
  background: #fbf2df;
  border: 1px solid #e9d4aa;
  border-radius: 2px;
}

.viewer-panel:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  border: 0;
  background: var(--guide-night);
}

.viewer-panel:fullscreen .stage,
.viewer-panel:fullscreen model-viewer {
  flex: 1;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .nav-list button:hover,
  .choices button:hover,
  .tools button:hover,
  header button:hover {
    transform: translateY(-1px);
  }

  .nav-list button:hover {
    color: #174d94;
    background: #fff;
  }

  .choices button:hover {
    border-color: #87a9d3;
    box-shadow: 0 8px 20px #10203312;
  }

  .tools button:hover,
  header button:hover {
    color: #fff;
    border-color: #84b5ff;
    background: #1d3d61;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-list button,
  .tools button,
  .choices button {
    transition-property: color, background-color, border-color, box-shadow;
  }
}

@media (max-width: 650px) {
  .panel {
    box-shadow: 0 12px 30px #1020330a;
  }

  .tools span {
    flex-basis: 100%;
  }
}