.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-actions [hidden] { display: none; }
body:has(.viewer[open]) { overflow: hidden; }

.topbar nav {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}

.hero-copy { min-width: 0; }

.hero-explainer {
  max-width: 660px;
  margin: 1rem 0 0;
  color: #d9ddea;
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
}

.facts .progress-fact dd {
  display: flex;
  gap: .45rem;
  align-items: center;
}

.facts [data-seen-progress] {
  color: var(--accent);
  font-weight: 800;
}

.journey-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgba(169, 255, 234, .22);
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(169, 255, 234, .1), transparent 45%),
    rgba(8, 10, 16, .82);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .34);
}

.journey-panel::after {
  content: "";
  position: absolute;
  inset: auto -18% -44% 28%;
  height: 60%;
  border-radius: 50%;
  background: rgba(116, 92, 255, .16);
  filter: blur(55px);
  pointer-events: none;
}

.journey-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 2.8rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journey-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(169, 255, 234, .82);
}

.journey-panel h2 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.journey-panel > p:not(.eyebrow):not(.privacy-note) {
  position: relative;
  z-index: 1;
  max-width: 470px;
  color: var(--muted);
}

.journey-meter { margin-top: 2rem; }

.journey-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.journey-meter-label strong { color: var(--accent); }

.journey-track,
.playback-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.journey-track span,
.playback-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #745cff);
  transition: width .25s ease;
}

.journey-states {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: 1.5rem 0;
}

.journey-states div {
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.journey-states dt {
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -.04em;
}

.journey-states dd {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.privacy-note {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #d9ddea;
  font-size: .78rem;
}

.archive-navigator {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin: 2rem 0 1.25rem;
}

.jump-form,
.navigator-route {
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(12, 15, 22, .7);
}

.jump-form label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .7rem;
  font-weight: 780;
}

.jump-form label small {
  color: var(--muted);
  font-weight: 500;
}

.jump-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-height: 52px;
  padding: .3rem .35rem .3rem .85rem;
  border: 1px solid rgba(169, 255, 234, .28);
  border-radius: 999px;
  background: rgba(5, 6, 10, .74);
}

.jump-field > span {
  color: var(--accent);
  font-weight: 850;
}

.jump-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.jump-field input::placeholder { color: #737b90; }

.jump-field button,
.navigator-route button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  padding: .62rem .9rem;
  cursor: pointer;
}

.jump-field button {
  border: 0;
  background: var(--accent);
  color: #02110d;
  font-weight: 850;
}

.jump-status {
  min-height: 1.3rem;
  margin: .6rem .2rem 0;
  color: var(--muted);
  font-size: .78rem;
}

.navigator-route .eyebrow { margin-bottom: .4rem; }

.navigator-route > strong {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.navigator-route > p:not(.eyebrow) {
  margin: .35rem 0 1rem;
  color: var(--muted);
}

.navigator-route > div {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.navigator-route button:first-child {
  border-color: rgba(169, 255, 234, .42);
  color: var(--accent);
}

.archive-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.25rem 0 .6rem;
}

.archive-tools button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(8, 10, 16, .72);
  color: var(--muted);
  padding: .65rem .9rem;
  font: inherit;
  cursor: pointer;
}

.archive-tools button:hover,
.navigator-route button:hover {
  border-color: rgba(169, 255, 234, .55);
  color: var(--text);
}

.archive-tools button[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(169, 255, 234, .12);
  color: var(--accent);
}

.archive-tools button span { font-variant-numeric: tabular-nums; }

.board-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: .82rem;
}

.filter-summary { min-height: 1.5rem; margin: 0; }
.board-status > span { text-align: right; }

.signal-card[data-watch-state="watched"] [data-card-state] { color: var(--accent); }
.signal-card[data-watch-state="watched"] .signal-media img { filter: saturate(.72) brightness(.78); }
.signal-card[data-watch-state="watched"] .play-mark { border-color: var(--accent); }

.viewer-controls { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.viewer-controls [data-share] { border-color: rgba(169, 255, 234, .36); }
.viewer-controls [data-next-unseen] { border-color: rgba(169, 255, 234, .5); color: var(--accent); }

.viewer-context { padding: .8rem .3rem 0; }

.viewer-context-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: .76rem;
}

.viewer-context-row p { margin: .55rem 0 0; }
.viewer-context-row strong { color: var(--text); }
.keyboard-hint { text-align: right; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(290px, .6fr); gap: 2.5rem; }
  .viewer-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; align-content: center; }
  .journey-panel { max-width: 720px; }
  .archive-navigator { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; align-items: center; }
  .topbar nav { width: 100%; padding-bottom: .2rem; }
  .topbar nav .quiet { display: inline-flex; align-items: center; white-space: nowrap; }
  .hero { min-height: auto; padding-top: 6rem; padding-bottom: 4.5rem; }
  .hero-actions button { flex: 1 1 190px; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .journey-panel { margin-top: .5rem; }
  .archive-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-tools button { width: 100%; }
  .board-status { display: block; }
  .board-status > span { display: block; text-align: left; }
  .viewer-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer {
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  .viewer-shell {
    min-height: 100%;
    justify-content: flex-start;
    padding-top: max(.6rem, env(safe-area-inset-top));
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  }
  .viewer-context-row { display: block; }
  .keyboard-hint { text-align: left; }
}

@media (max-width: 390px) {
  body { min-width: 0; }
  .topbar nav a,
  .topbar nav button { flex: 0 0 auto; }
  .hero { padding-inline: .85rem; }
  .hero h1 { font-size: clamp(3.05rem, 18vw, 3.5rem); }
  .hero-explainer { font-size: .93rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-panel { padding: 1.15rem; border-radius: 22px; }
  .journey-kicker { margin-bottom: 2rem; }
  .journey-states div { padding: .7rem .55rem; }
  .archive-navigator { margin-inline: -.15rem; }
  .jump-form,
  .navigator-route { padding: .9rem; }
  .jump-form label { display: grid; gap: .1rem; }
  .navigator-route button { width: 100%; }
  .signal-meta [data-card-state] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-track span,
  .playback-track span { transition: none; }
  .journey-kicker span { box-shadow: none; }
}

/* Desktop/laptop full-frame guard: preserve the complete signal frame without cropping. */
@media (min-width: 721px) {
  .stage {
    background: #000;
  }

  .stage video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #000;
  }
}

/* Into the Future gets the strongest interaction treatment: cyan + violet + magenta bloom. */
:root {
  --future-cyan: rgba(169, 255, 234, .72);
  --future-cyan-soft: rgba(169, 255, 234, .26);
  --future-violet: rgba(116, 92, 255, .44);
  --future-pink: rgba(255, 122, 200, .34);
  --future-shine: rgba(232, 255, 250, .94);
}

:where(a[href], button:not(:disabled)) {
  transition-property: transform, border-color, box-shadow, filter, color, text-shadow, background-color;
  transition-duration: .24s;
  transition-timing-function: ease;
}

.signal-open {
  position: relative;
  isolation: isolate;
}
.signal-open::after {
  content: "";
  position: absolute;
  inset: -72% -112%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-58%) rotate(14deg);
  background: linear-gradient(108deg, transparent 35%, rgba(116,92,255,.12) 42%, var(--future-shine) 49%, rgba(255,122,200,.48) 54%, transparent 63%);
  transition: opacity .2s ease, transform .82s cubic-bezier(.16,.84,.22,1);
}

@media (hover: hover) {
  .signal-open:hover {
    transform: translateY(-8px) scale(1.018);
    border-color: rgba(189, 255, 242, .86);
    box-shadow:
      0 32px 90px rgba(0,0,0,.48),
      0 0 0 1px rgba(169,255,234,.6),
      0 0 28px var(--future-cyan),
      0 0 62px var(--future-violet),
      0 0 96px var(--future-pink);
    filter: saturate(1.14) brightness(1.05);
  }
  .signal-open:hover::after {
    opacity: .92;
    transform: translateX(58%) rotate(14deg);
  }
  :where(.hero-actions button,.topbar nav a,.topbar nav button,.archive-tools button,.navigator-route button,.jump-field button,.viewer-controls button,.save-card):hover {
    border-color: rgba(169,255,234,.76);
    box-shadow:
      0 12px 34px rgba(0,0,0,.34),
      0 0 0 1px rgba(169,255,234,.28),
      0 0 20px var(--future-cyan-soft),
      0 0 38px rgba(116,92,255,.2),
      0 0 54px rgba(255,122,200,.12);
    filter: brightness(1.09) saturate(1.12);
    text-shadow: 0 0 13px rgba(169,255,234,.34);
  }
  :where(.brand,footer a):hover {
    color: #fff;
    text-shadow: 0 0 12px var(--future-cyan), 0 0 26px var(--future-violet);
    filter: brightness(1.1);
  }
}

.signal-open:focus-visible,
:where(.hero-actions button,.topbar nav a,.topbar nav button,.archive-tools button,.navigator-route button,.jump-field button,.viewer-controls button,.save-card,.brand,footer a):focus-visible {
  box-shadow:
    0 0 0 3px rgba(5,6,10,.92),
    0 0 0 6px rgba(169,255,234,.86),
    0 0 32px var(--future-cyan),
    0 0 58px var(--future-violet),
    0 0 80px var(--future-pink);
}

@media (prefers-reduced-motion: reduce) {
  :where(a[href], button:not(:disabled)),
  .signal-open::after { transition: none; }
  .signal-open:hover { transform: none; }
  .signal-open:hover::after { opacity: 0; transform: none; }
}

/* Touch keeps the strongest palette, but the effect is a bounded press rather than sticky hover motion. */
@media(hover:none),(pointer:coarse){
  .signal-open:hover{transform:none;border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.18);filter:none}
  .signal-open:hover::after{opacity:0;transform:translateX(-58%) rotate(14deg)}
  .signal-open:hover img{transform:none;filter:none}
  .signal-open:active{
    transform:scale(.99);
    border-color:rgba(189,255,242,.84);
    box-shadow:
      0 18px 52px rgba(0,0,0,.4),
      0 0 0 1px rgba(169,255,234,.52),
      0 0 26px var(--future-cyan),
      0 0 48px var(--future-violet),
      0 0 68px var(--future-pink);
    filter:saturate(1.08) brightness(1.03);
  }
  :where(.hero-actions button,.topbar nav a,.topbar nav button,.archive-tools button,.navigator-route button,.jump-field button,.viewer-controls button,.save-card):hover{
    transform:none;
    box-shadow:none;
    filter:none;
    text-shadow:none;
  }
  :where(.hero-actions button,.topbar nav a,.topbar nav button,.archive-tools button,.navigator-route button,.jump-field button,.viewer-controls button,.save-card):active{
    transform:scale(.985);
    border-color:rgba(169,255,234,.72);
    box-shadow:
      0 9px 28px rgba(0,0,0,.3),
      0 0 0 1px rgba(169,255,234,.26),
      0 0 18px var(--future-cyan-soft),
      0 0 32px rgba(116,92,255,.18),
      0 0 44px rgba(255,122,200,.1);
    filter:brightness(1.06) saturate(1.08);
  }
  :where(.brand,footer a):active{
    color:#fff;
    text-shadow:0 0 11px var(--future-cyan),0 0 23px var(--future-violet);
  }
}
@media(prefers-reduced-motion:reduce){
  .signal-open:active,
  :where(.hero-actions button,.topbar nav a,.topbar nav button,.archive-tools button,.navigator-route button,.jump-field button,.viewer-controls button,.save-card):active{transform:none}
}