@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/Anton.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/Archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("./assets/Caveat.woff2") format("woff2");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 1rem/1.5 var(--font-b);
}
.player a {
  color: var(--gold);
}
.player button,
.player input {
  font: inherit;
}
.player button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}
.player button:hover,
.player button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
}
.player button:disabled {
  opacity: 0.45;
  cursor: default;
}
.player button.gold {
  border-color: var(--gold);
  color: var(--gold);
}
.player button.gold:hover {
  background: var(--gold);
  color: var(--noir);
}
/* The deck's actions are drawn, not spelled: one inline sprite holds every
   symbol, the buttons reference it, and the name lives in aria-label. The
   sprite box takes no part of the layout and the original edition, whose
   markup has no symbols, never matches these rules. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.player .icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player button:has(.icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
}
.player :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.player h1,
.player h2,
.player p,
.player figure {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.player {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 99rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(0.6rem, 2vw, 1.6rem);
  gap: clamp(0.5rem, 1.5vh, 1rem);
  background: var(--ground);
}
.player:fullscreen {
  width: 100%;
}
.topbar,
.identity,
.locales,
.toolbar,
.transport,
.options,
.timeline {
  display: flex;
  align-items: center;
}
.topbar {
  justify-content: space-between;
  gap: 0.5rem;
}
.identity {
  gap: 0.65rem;
}
.identity img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}
.identity strong,
.identity span {
  display: block;
}
.identity strong {
  font-size: 1.1rem;
  line-height: 1.15;
}
.identity span {
  font-size: 0.82rem;
  color: var(--quiet);
}
.locales,
.transport,
.options {
  gap: 0.4rem;
}
.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  grid-template-rows: 1fr auto;
  align-items: stretch;
  min-height: min(32rem, 64svh);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--panel);
}
.stage figure {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.stage figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--shadow), transparent 27%);
  pointer-events: none;
}
.stage img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: 66% center;
}
.stage[data-visual="token"] img {
  object-fit: contain;
  padding: 7%;
}
.stage[data-visual="token"] figure::after {
  display: none;
}
.stage[data-visual="logo-lockup"] img {
  object-fit: contain;
  padding: 14% 9%;
}
.stage[data-visual="logo-lockup"] figure::after {
  display: none;
}
.slide-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: clamp(1rem, 4vw, 4.5rem);
  min-width: 0;
}
.eyebrow {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.slide-copy h1 {
  font: 400 clamp(2.25rem, 5.3vw, 5.35rem)/0.94 var(--font-d);
  letter-spacing: 0.004em;
  margin-bottom: 1rem;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}
.slide-copy > p:not(.eyebrow) {
  color: var(--quiet);
  font-size: clamp(1rem, 1.8vw, 1.36rem);
  max-width: 32ch;
}
.start-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.stage.fresh .slide-copy {
  animation: reveal 0.35s ease-out both;
}
@keyframes reveal {
  from {
    opacity: 0.25;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.caption {
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 1;
  margin: 0.5rem auto;
  max-width: min(60rem, calc(100% - 1rem));
  padding: 0.45rem 0.8rem;
  border-radius: 0.45rem;
  background: var(--ground);
  text-align: center;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
}
.controls {
  display: grid;
  gap: 0.45rem;
}
.voice-status {
  color: var(--quiet);
  font-size: 0.86rem;
}
.voice-status:empty {
  display: none;
}
.timeline {
  gap: 0.65rem;
}
.timeline input {
  width: 100%;
  min-width: 0;
  accent-color: var(--gold);
  min-height: 1.75rem;
}
/* The chapter strip reads the same timeline as a map: one segment per chapter,
   as wide as that chapter is long, filled to the playhead. The range input
   stays underneath as the fine scrubber for keyboard and screen-reader use, so
   the strip is a shortcut to a chapter rather than the only way in. Only the
   section ships a strip, so the original edition keeps its single-row
   timeline. */
.timeline:has(.track) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.1rem 0.65rem;
}
.timeline:has(.track) .track {
  grid-column: 1 / -1;
}
.track {
  display: flex;
  min-width: 0;
  gap: 3px;
}
.track .segment {
  position: relative;
  display: block;
  flex-basis: 0;
  /* Nine chapters cannot each be 44px wide on a phone, so the strip keeps the
     WCAG 2.2 minimum here and lets the 44px seek and the chapter list carry
     touch on the narrow screens. The floor is what stops the shortest chapter
     becoming a hairline nobody can aim at. */
  min-width: 1.5rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.track .segment::before,
.track .segment-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 5px;
  border-radius: 999px;
  transform: translateY(-50%);
}
/* The rail is the only thing that says "there is a chapter here", so it has to
   clear 3:1 against both surfaces the strip can sit on. `--edge` alone is 1.29
   to 1.41 to 1, which is a hairline nobody can find; these mixes are the
   lowest share of each colour that still measures 3:1 on `--bg` and `--surface`
   alike, and the current chapter keeps the highest share of gold. */
.track .segment::before {
  content: "";
  width: 100%;
  background: color-mix(in srgb, var(--quiet) 40%, var(--edge));
}
.track .segment-fill {
  width: 0;
  background: var(--gold);
}
.track .segment:hover::before,
.track .segment[aria-current="step"]:hover::before {
  background: color-mix(in srgb, var(--gold) 40%, var(--edge));
}
.track .segment[aria-current="step"]::before {
  background: color-mix(in srgb, var(--gold) 55%, var(--edge));
}
.timeline output,
.chapter-count {
  white-space: nowrap;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}
.toolbar {
  gap: 0.5rem;
  justify-content: space-between;
}
.options {
  flex-wrap: wrap;
}
.controls button {
  font-size: 0.86rem;
}
.player dialog {
  width: min(36rem, calc(100% - 1.3rem));
  max-height: 88svh;
  padding: 1rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.75rem;
}
.player dialog::backdrop {
  background: var(--shadow);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.dialog-head h2 {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.004em;
}
#chapter-list,
.help-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
#chapter-list button {
  width: 100%;
  text-align: left;
}
#chapter-list button[aria-current="step"] {
  border-color: var(--gold);
  color: var(--gold);
}
.help-links {
  margin-top: 0.75rem;
}
.help-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
@media (max-width: 760px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(9rem, 1fr) auto auto;
    min-height: 0;
  }
  .stage figure {
    grid-column: 1;
    grid-row: 1;
  }
  .stage figure::after {
    background: linear-gradient(0deg, var(--shadow), transparent 23%);
  }
  .slide-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: 0.65rem 1rem 0.85rem;
  }
  .slide-copy h1 {
    margin-bottom: 0.45rem;
  }
  .eyebrow {
    margin-bottom: 0.3rem;
  }
  .caption {
    grid-row: 3;
    margin-top: 0;
  }
  .toolbar {
    align-items: start;
    flex-wrap: wrap;
  }
  .transport {
    flex: 1 1 auto;
  }
  .options {
    order: 3;
    flex-basis: 100%;
  }
  .chapter-count {
    padding-top: 0.6rem;
  }
  .start-actions {
    margin-top: 0.55rem;
  }
}
@media (max-height: 560px) and (min-width: 761px) {
  .stage {
    min-height: 0;
  }
  .slide-copy {
    padding: 1rem 2rem;
  }
  .slide-copy h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
  }
}
@media (max-width: 760px) and (max-height: 720px) {
  .stage {
    grid-template-rows: minmax(7rem, 1fr) auto auto;
  }
  .slide-copy h1 {
    font-size: clamp(1.85rem, 7vw, 2.55rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.fresh .slide-copy {
    animation: none;
  }
}