:root {
  --ink: #f4f3ec;
  --muted: #aeb8b1;
  --faint: #6f7c75;
  --green: #72d893;
  --green-dim: #20442e;
  --line: rgba(244, 243, 236, 0.15);
  --background: #101512;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--background);
}

body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.reveal {
  background:
    radial-gradient(circle at 76% 13%, rgba(47, 108, 67, 0.12), transparent 31%),
    var(--background);
  color: var(--ink);
}

.reveal .slides {
  text-align: left;
}

.reveal .slides > section {
  width: 100%;
  height: 100%;
  padding: 0;
}

.cue-slide {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  row-gap: 22px;
  width: 100%;
  height: 100%;
  padding: 46px 66px 42px;
}

.cue-header {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 28px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.cue-header > span + span::before {
  content: "·";
  margin-right: 18px;
  color: var(--faint);
}

.cue-header .card-index {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.cue-header .recording-mode {
  color: var(--ink);
}

.cue-header .time {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cue-header .time::before {
  display: none;
}

.reveal h1 {
  max-width: 1060px;
  margin: 0;
  color: var(--ink);
  font-size: 53px;
  font-weight: 760;
  line-height: 1.13;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.verbatim-slide .recording-mode {
  color: var(--green);
}

.verbatim-slide h1 {
  max-width: 1160px;
  font-size: 50px;
}

.verbatim-script {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1140px;
  min-height: 0;
  padding: 4px 2px 0;
}

.verbatim-script p {
  margin: 0;
  color: #e5e9e6;
  font-size: 32px;
  font-weight: 540;
  line-height: 1.4;
  letter-spacing: -0.018em;
}

.dense-verbatim h1 {
  font-size: 43px;
}

.dense-verbatim .verbatim-script {
  gap: 10px;
}

.dense-verbatim .verbatim-script p {
  font-size: 27px;
  line-height: 1.34;
}

.cue-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  align-items: start;
  gap: 48px;
  min-height: 0;
  padding-top: 4px;
}

.sequence {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 11px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cue-step;
}

.sequence li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  counter-increment: cue-step;
}

.sequence li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  bottom: -13px;
  left: 9px;
  width: 2px;
  background: var(--line);
}

.sequence-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 7px;
  border: 2px solid var(--faint);
  border-radius: 50%;
  background: var(--background);
}

.sequence-dot::after {
  content: counter(cue-step);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.sequence p {
  margin: 0;
  color: #d7ddd8;
  font-size: 27px;
  font-weight: 510;
  line-height: 1.34;
  letter-spacing: -0.014em;
}

.sequence .gold-step p {
  color: var(--ink);
  font-weight: 720;
}

.sequence .gold-step .sequence-dot {
  border-color: var(--green);
  background: var(--green);
}

.sequence .gold-step .sequence-dot::after {
  color: var(--background);
}

.sequence strong {
  color: var(--green);
  font-weight: 820;
}

.annotations {
  align-self: start;
  margin-top: 4px;
  padding-left: 24px;
  border-left: 2px solid var(--green-dim);
}

.annotation-label {
  margin-bottom: 17px;
  color: var(--green);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.annotations ul {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.annotations li {
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.01em;
}

.annotations b {
  color: var(--ink);
  font-weight: 720;
}

.handoff {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  min-height: 61px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.handoff span {
  color: var(--green);
  font-size: 16px;
  font-weight: 820;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.handoff p {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.ending-handoff p {
  color: var(--green);
}

.verbatim-handoff {
  border-top-color: var(--green-dim);
}

.verbatim-handoff p {
  color: var(--muted);
  font-size: 22px;
  font-weight: 560;
}

.reveal .controls {
  color: var(--green);
  opacity: 0.33;
}

.reveal .progress {
  height: 4px;
  color: var(--green);
  background: rgba(255, 255, 255, 0.06);
}

.reveal .slide-number {
  right: 19px;
  bottom: 13px;
  padding: 0;
  color: var(--faint);
  background: transparent;
  font-size: 14px;
}

@media (max-aspect-ratio: 5 / 4) {
  .cue-slide {
    padding-right: 54px;
    padding-left: 54px;
  }

  .cue-body {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 38px;
  }
}

@media print {
  @page {
    size: 13.333in 10in;
    margin: 0;
  }

  html,
  body,
  .reveal,
  .reveal .slides,
  .reveal .slides section,
  .cue-slide {
    background-color: var(--background) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Reveal sizes print slides by their content. Pin the 4:3 recording canvas so
     short verbatim cards still fill the whole PDF page. */
  .reveal .slides section,
  .cue-slide {
    width: 1280px !important;
    height: 960px !important;
    min-height: 960px !important;
  }

  .reveal .controls,
  .reveal .progress,
  .reveal .slide-number {
    display: none !important;
  }
}