:root {
  --bg: #07090d;
  --fg: #f7f9fb;

  --muted: #c3cbd5;
  --quiet: #84909f;

  --line: rgba(255,255,255,.14);

  --cyan: #72e7ef;
  --amber: #e6b86b;
  --closed: #6f7987;

  --panel:
    linear-gradient(
      150deg,
      rgba(16,22,31,.97),
      rgba(11,13,22,.98)
    );
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;

  overflow: hidden;

  background: var(--bg);
}

body {
  color: var(--fg);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
a {
  font: inherit;
}

.app {
  position: relative;

  width: 100%;
  height: 100dvh;

  overflow: hidden;

  display: grid;
  grid-template-rows:
    58px
    minmax(0,1fr)
    50px;

  background:
    radial-gradient(
      circle at 14% 43%,
      rgba(57,149,158,.13),
      transparent 36%
    ),
    radial-gradient(
      circle at 83% 57%,
      rgba(117,82,177,.13),
      transparent 39%
    ),
    #07090d;
}

.app::before {
  content: "";

  position: absolute;
  inset: -20%;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      ellipse at 35% 48%,
      rgba(77,215,223,.13),
      transparent 27%
    ),
    radial-gradient(
      ellipse at 72% 51%,
      rgba(151,112,232,.16),
      transparent 31%
    );

  filter: blur(55px);

  transition:
    opacity 1.15s ease;
}

.app[data-mode="awake"]::before {
  opacity: 1;
}

.chrome,
.foot {
  position: relative;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-inline: 30px;

  color: var(--quiet);

  font-size: 12px;
}

.brand {
  color: rgba(255,255,255,.82);
}

.operator-link {
  color: #b9c1cc;
  text-decoration: none;

  opacity: 0;
  pointer-events: none;

  transform: translateY(-3px);

  transition:
    opacity .5s ease,
    transform .5s ease,
    color .2s ease;
}

.app[data-mode="awake"] .operator-link {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.operator-link:hover {
  color: white;
}

.viewport {
  position: relative;
  z-index: 2;

  min-height: 0;

  padding:
    6px
    30px
    14px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    0
    0;

  gap: 22px;

  transition:
    grid-template-columns
    .6s
    cubic-bezier(.2,.8,.2,1);
}

.app[data-mode="awake"] .viewport {
  grid-template-columns:
    minmax(310px, 32vw)
    minmax(0,1fr)
    0;
}

.app[data-panel="open"] .viewport {
  grid-template-columns:
    minmax(275px, 27vw)
    minmax(0,1fr)
    minmax(325px, 25vw);
}

.hero {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    3vh
    5.2vw;

  transition:
    padding
    .7s
    cubic-bezier(.2,.8,.2,1);
}

.app[data-mode="awake"] .hero {
  padding-left: 1vw;
  padding-right: 1vw;
}

.eyebrow {
  max-width: 600px;

  margin: 0;

  color: #8fc0dc;

  text-transform: uppercase;

  letter-spacing: .18em;

  font-size: 10px;
  line-height: 1.65;
}

h1 {
  margin:
    23px
    0
    29px;

  font-size:
    clamp(
      72px,
      13vw,
      180px
    );

  line-height: .79;

  letter-spacing: -.075em;

  font-weight: 570;

  transition:
    font-size
    .75s
    cubic-bezier(.2,.8,.2,1),
    margin
    .75s ease;
}

.app[data-mode="awake"] h1 {
  font-size:
    clamp(
      53px,
      6.5vw,
      100px
    );

  margin-bottom: 21px;
}

.lead {
  max-width: 790px;

  margin: 0;

  color: #d1d7df;

  font-size:
    clamp(
      18px,
      2vw,
      27px
    );

  line-height: 1.48;

  letter-spacing: -.018em;
}

.app[data-mode="awake"] .lead {
  max-width: 445px;

  color: #c8d0da;

  font-size:
    clamp(
      16px,
      1.35vw,
      20px
    );
}

.entry {
  display: inline-grid;

  grid-template-rows:
    58px
    auto;

  justify-items: start;

  width: max-content;

  margin-top: 34px;
}

.click-cue {
  display: block;

  width: 150px;
  height: 58px;

  overflow: visible;

  transition:
    opacity .45s ease;
}

.click-cue text {
  fill: #e0d6b8;

  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  font-size: 13px;

  font-style: italic;
}

.click-cue path {
  fill: none;

  stroke: #e0d6b8;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 170;
  stroke-dashoffset: 170;

  animation:
    drawCue
    1.05s
    .65s
    ease
    forwards;
}

.app[data-mode="awake"] .click-cue {
  opacity: 0;
  pointer-events: none;
}

.domain-button {
  appearance: none;

  border: 0;
  padding: 0;
  margin: 0;

  cursor: pointer;

  color: #8fb5dc;
  background: transparent;

  font-size: 13px;

  transition:
    color .2s ease,
    text-shadow .2s ease;
}

.domain-button:hover,
.domain-button:focus-visible {
  color: white;

  text-shadow:
    0 0 24px
    rgba(114,231,239,.55);

  outline: none;
}

.field-stage {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  border-left:
    1px solid
    transparent;

  transform:
    scale(.985);

  transition:
    opacity .8s ease,
    transform .8s ease,
    border-color .8s ease;
}

.app[data-mode="awake"] .field-stage {
  opacity: 1;

  pointer-events: auto;

  transform: none;

  border-color:
    rgba(255,255,255,.09);
}

#field {
  display: block;

  width: 100%;
  height: 100%;
}

.stage-hint {
  position: absolute;

  left: 21px;
  bottom: 18px;

  margin: 0;

  color: #a3adba;

  font-size: 11px;
}

.knowledge {
  min-width: 0;
  min-height: 0;

  overflow: hidden;

  opacity: 0;

  border-left:
    1px solid
    transparent;

  background:
    transparent;

  transition:
    opacity .4s ease,
    border-color .4s ease;
}

.app[data-panel="open"] .knowledge {
  opacity: 1;

  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0,1fr);

  padding:
    15px
    0
    8px
    24px;

  border-color:
    rgba(255,255,255,.15);

  background:
    var(--panel);
}

.knowledge-head {
  display: flex;

  justify-content: space-between;

  gap: 20px;
}

#topic-kicker {
  color: var(--cyan);

  text-transform: uppercase;

  letter-spacing: .15em;

  font-size: 9px;
}

#topic-title {
  margin:
    10px
    0
    0;

  color: #ffffff;

  font-size:
    clamp(
      28px,
      2.35vw,
      41px
    );

  line-height: 1.02;

  letter-spacing: -.045em;
}

#close-knowledge {
  appearance: none;

  border: 0;

  align-self: start;

  color: #aeb8c5;
  background: transparent;

  cursor: pointer;

  font-size: 24px;
}

#close-knowledge:hover {
  color: white;
}

.topic-summary {
  margin:
    23px
    0
    21px;

  color: #c4ccd6;

  line-height: 1.62;

  font-size: 14px;
}

.accordion {
  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  padding-right: 9px;
}

.accordion::-webkit-scrollbar {
  width: 5px;
}

.accordion::-webkit-scrollbar-thumb {
  background:
    rgba(255,255,255,.22);

  border-radius: 999px;
}

.accordion details {
  border-top:
    1px solid
    rgba(255,255,255,.15);
}

.accordion details:last-child {
  border-bottom:
    1px solid
    rgba(255,255,255,.15);
}

.accordion summary {
  cursor: pointer;

  list-style: none;

  padding:
    17px
    3px;

  color: #eef2f6;

  font-size: 13px;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";

  float: right;

  color: #9aa7b6;
}

.accordion details[open] summary::after {
  content: "−";
}

.detail-copy {
  margin: 0;

  padding:
    0
    22px
    19px
    3px;

  color: #bac3ce;

  font-size: 13px;

  line-height: 1.7;
}

.foot {
  border-top:
    1px solid
    rgba(255,255,255,.09);
}

@keyframes drawCue {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 1050px) {

  .app[data-mode="awake"] .viewport,
  .app[data-panel="open"] .viewport {
    grid-template-columns:
      minmax(250px,35vw)
      minmax(0,1fr);
  }

  .knowledge {
    position: absolute;

    right: 0;
    top: 0;
    bottom: 0;

    width:
      min(
        410px,
        47vw
      );

    background:
      rgba(8,10,16,.985);
  }

  .app[data-panel="open"] .knowledge {
    padding: 20px;

    border:
      1px solid
      rgba(255,255,255,.15);
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
}