.scene--coda {
  position: relative;
  min-height: 100svh;
  background: #000;
  color: #fff;
}

.scene--coda::before,
.scene--coda::after {
  display: none !important;
}

.coda-cli {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(82vw, 960px);
  max-height: 100svh;
  margin: 0;
  padding: clamp(46px, 8vh, 92px) clamp(24px, 5vw, 72px);
  overflow: hidden;
  color: #fff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(14px, 1.25vw, 21px);
  font-weight: 450;
  line-height: 1.42;
  letter-spacing: 0.01em;
  transform: translate(-50%, -50%);
}

.coda-cli p {
  min-height: 1.42em;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
  white-space: pre-wrap;
}

.coda-cli p[data-coda-line="system"],
.coda-cli p[data-coda-line="upload-label"],
.coda-cli p[data-coda-line="question"] {
  margin-top: 0.9em;
}

.coda-cli p[data-coda-line="biological-description"],
.coda-cli p[data-coda-line^="qmind-description"],
.coda-cli p[data-coda-line^="option-"] {
  padding-left: 2ch;
}

.coda-cli p.is-visible {
  opacity: 1;
}

.coda-cli p[data-coda-line="option-01"],
.coda-cli p[data-coda-line="option-02"] {
  width: fit-content;
  min-width: min(48ch, 74vw);
  color: rgba(255, 255, 255, 0.62);
  transition: color 100ms linear;
}

.coda-cli p[data-coda-line="option-02"].is-hovered {
  color: #fff;
}

#codaCursor {
  position: absolute;
  z-index: 4;
  top: clamp(46px, 8vh, 92px);
  left: clamp(24px, 5vw, 72px);
  width: 0.62ch;
  height: 1.15em;
  background: #fff;
  opacity: 0;
  transform: none;
}

.scene--coda[data-coda-stage="cursor"] #codaCursor,
.scene--coda[data-coda-stage="hypothesis"] #codaCursor,
.scene--coda[data-coda-stage="pause"] #codaCursor,
.scene--coda[data-coda-stage="identity"] #codaCursor,
.scene--coda[data-coda-stage="options"] #codaCursor,
.scene--coda[data-coda-stage="question"] #codaCursor,
.scene--coda[data-coda-stage="hover"] #codaCursor {
  opacity: 1;
}

#codaCursor.is-blinking {
  animation: coda-cursor-blink 720ms steps(1, end) infinite;
}

@keyframes coda-cursor-blink {
  50% { opacity: 0; }
}

#codaPointer {
  position: absolute;
  z-index: 5;
  top: 73%;
  left: 7%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
  opacity: 0;
  transform: translate3d(calc((1 - var(--pointer-progress, 0)) * 78vw), 0, 0);
}

#codaPointer.is-visible {
  opacity: 1;
}

body.coda-active .scene--11.is-coda-source {
  z-index: 5;
  opacity: 1;
  visibility: visible;
  clip-path: circle(calc((1 - var(--collapse-progress, 0)) * 75vmax + 2px) at 50% 50%);
  pointer-events: none;
}

body.coda-active .scene--coda {
  z-index: 4;
  opacity: 1;
  visibility: visible;
}

body.coda-shutdown .coda-cli {
  opacity: calc(1 - var(--closing-progress, 0));
  transform: translate(-50%, -50%) scale(calc(1 - var(--closing-progress, 0) * 0.92));
  transform-origin: 50% 50%;
}

body.coda-shutdown #codaCursor,
body.coda-finished #codaCursor,
body.coda-finished #codaPointer,
body.coda-finished .coda-cli {
  opacity: 0;
  animation: none;
}

@media (orientation: landscape) and (max-height: 680px) {
  .coda-cli {
    width: min(88vw, 900px);
    padding: 44px 24px 32px;
    font-size: clamp(12px, 3vh, 16px);
    line-height: 1.26;
  }

  .coda-cli p {
    min-height: 1.26em;
  }

  .coda-cli p[data-coda-line="system"],
  .coda-cli p[data-coda-line="upload-label"],
  .coda-cli p[data-coda-line="question"] {
    margin-top: 0.45em;
  }

  #codaCursor {
    top: 44px;
    left: 24px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .coda-cli {
    width: min(92vw, 760px);
    max-height: 100svh;
    padding: 32px 18px 24px;
    font-size: clamp(11px, 3.15vh, 14px);
    line-height: 1.14;
  }

  .coda-cli p {
    min-height: 1.14em;
  }

  .coda-cli p[data-coda-line="system"],
  .coda-cli p[data-coda-line="upload-label"],
  .coda-cli p[data-coda-line="question"] {
    margin-top: 0.22em;
  }

  #codaCursor {
    top: 32px;
    left: 18px;
  }

  #codaPointer {
    top: 72%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--coda,
  .scene--coda *,
  body.coda-active .scene--11.is-coda-source {
    animation-duration: 1ms !important;
    transition-duration: 100ms !important;
  }

  body.coda-active .scene--11.is-coda-source {
    clip-path: none !important;
    opacity: 0;
  }

  body.coda-reduced .coda-cli p.is-visible {
    opacity: 1;
  }

  body.coda-reduced #codaPointer {
    transform: none;
  }
}