:root {
  color-scheme: dark;
  --bg: #07070d;
  --bg-deep: #030307;
  --panel: #0d0d16;
  --line: #2a2940;
  --muted: #7c7a95;
  --text: #f4f3ff;
  --cyan: #25e8f0;
  --magenta: #e96cff;
  --violet: #8e63ff;
  --green: #36f06b;
  --stage-ratio: 1.7916667;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  background:
    radial-gradient(circle at 82% 18%, rgba(142, 99, 255, .07), transparent 34%),
    linear-gradient(180deg, #0a0a12 0%, var(--bg-deep) 100%);
  isolation: isolate;
}

.chapter-rail {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: rgba(4, 4, 10, .88);
}

.brand-button {
  height: 126px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 24px 24px 18px;
  text-align: left;
}

.brand-mark {
  display: inline-block;
  color: #bdf8ff;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -5px;
  font-size: 44px;
  line-height: 1;
  transform: skewX(-8deg);
  text-shadow: -2px 2px 0 #735cff, 2px -1px 0 var(--magenta), 0 0 14px rgba(37, 232, 240, .35);
}

.chapters { display: grid; gap: 7px; padding: 0 12px; }

.chapter-button {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.chapter-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chapter-button:hover { color: #d9d6eb; }
.chapter-button.active {
  color: var(--text);
  border-color: rgba(37, 232, 240, .85);
  background: linear-gradient(90deg, rgba(37, 232, 240, .13), rgba(37, 232, 240, .02));
  box-shadow: inset 4px 0 0 var(--cyan), 0 0 20px rgba(37, 232, 240, .08);
}
.chapter-button.active svg { color: var(--cyan); }

.rail-help { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 18px 26px; color: #69677f; font-size: 12px; line-height: 1.5; }
kbd { min-width: 20px; padding: 1px 5px; border: 1px solid #403e55; color: #9996ad; background: #11111a; font-family: inherit; text-align: center; }

.utility-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 26px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #85829c;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.utility-button:hover { color: var(--text); }
.utility-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.deck-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 84px;
  padding: 28px 30px 0;
}

.screen-frame {
  width: min(100%, calc((100vh - 136px) * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  align-self: center;
  justify-self: center;
  padding: 10px;
  border: 1px solid #343149;
  background: #0a0a11;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(142, 99, 255, .08) inset;
}

.screen-glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  border: 1px solid #1b1a27;
}

#slideImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  user-select: none;
  opacity: 1;
  transform: scale(1);
  transition: opacity 150ms ease, transform 420ms var(--ease);
}

#slideImage[hidden], .media-room[hidden], .video-poster[hidden], .video-frame[hidden] { display: none; }

.media-room {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 2.3%;
  padding: 3.2% 4.4% 2.4%;
  overflow: hidden;
  background:
    linear-gradient(rgba(31, 31, 42, .78), rgba(4, 4, 9, .96)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.022) 28px 29px),
    radial-gradient(circle at 26% 0%, rgba(233,108,255,.32), transparent 38%),
    radial-gradient(circle at 78% 18%, rgba(37,232,240,.24), transparent 42%),
    #07070d;
  transition: opacity 150ms ease, transform 420ms var(--ease);
}

.media-room::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 23%;
  pointer-events: none;
  opacity: .22;
  background: linear-gradient(165deg, transparent 0 45%, rgba(173,113,61,.9) 46% 48%, transparent 49%), repeating-linear-gradient(90deg, #342012 0 44px, #25170f 44px 47px);
  transform: perspective(340px) rotateX(56deg) scale(1.25);
  transform-origin: bottom;
}

.media-room-copy, .crt-rack, .media-room-hint { position: relative; z-index: 1; }
.media-room-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.media-room-title { margin: 0; color: #ecff9d; font: 800 clamp(10px, .95vw, 15px)/1.1 "Courier New", monospace; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 0 10px rgba(236,255,157,.34); }
.media-room-subtitle { margin: 0; color: #aca9bd; font-size: clamp(9px, .85vw, 13px); letter-spacing: .03em; }

.crt-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 4%; min-height: 0; }
.crt-unit { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.crt-label { justify-self: start; margin: 0 0 7px 10px; color: #c9c7d6; font: 800 clamp(8px, .75vw, 11px)/1 "Courier New", monospace; letter-spacing: .12em; }
.crt-label span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 7px; border: 1px solid #dad7e4; color: #0c0c11; background: #c9c7d6; box-shadow: 2px 2px 0 #5c5871; }

.crt-bezel {
  min-height: 0;
  padding: clamp(8px, 1.35vw, 20px);
  border: 1px solid #8e8d95;
  border-radius: 14px 14px 24px 24px / 10px 10px 18px 18px;
  background: linear-gradient(145deg, #77777b, #3a3a40 72%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.2), inset -5px -6px 0 rgba(0,0,0,.26), 0 15px 25px rgba(0,0,0,.44), 0 0 28px rgba(37,232,240,.08);
}
.crt-screen { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid #17171c; border-radius: 8% / 10%; background: #000; box-shadow: inset 0 0 34px #000, 0 0 0 3px #2c2c31, 0 0 22px rgba(37,232,240,.12); }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; color: #fff; background: #000; cursor: pointer; }
.video-poster > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04) brightness(.82); transform: scale(1.035); transition: filter 180ms ease, transform 380ms var(--ease); }
.video-poster:hover > img, .video-poster:focus-visible > img { filter: saturate(1) contrast(1.08) brightness(.95); transform: scale(1.055); }
.poster-noise { position: absolute; inset: 0; pointer-events: none; opacity: .17; background: repeating-linear-gradient(180deg, rgba(255,255,255,.42) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(233,108,255,.14), transparent 48%, rgba(37,232,240,.13)); mix-blend-mode: screen; }
.play-key { position: absolute; left: 6%; bottom: 8%; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.76); color: #fff; background: rgba(3,3,7,.78); box-shadow: 3px 3px 0 rgba(233,108,255,.62); font: 900 clamp(8px, .8vw, 12px)/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.play-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--cyan); }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.vhs-deck { position: relative; height: clamp(20px, 3.2vw, 44px); margin: -2px 4% 0; border: 1px solid #4e4c57; background: linear-gradient(#2d2d34, #101015); box-shadow: 0 8px 14px rgba(0,0,0,.42); }
.vhs-slot { position: absolute; top: 31%; left: 7%; width: 49%; height: 22%; border: 1px solid #050507; background: #141419; box-shadow: inset 0 1px 2px #000; }
.vhs-display { position: absolute; top: 24%; right: 10%; color: #7cffc7; font: 800 clamp(6px, .68vw, 10px)/1.2 "Courier New", monospace; letter-spacing: .08em; text-shadow: 0 0 6px rgba(124,255,199,.52); }
.vhs-led { position: absolute; top: 39%; right: 4%; width: 5px; height: 5px; border-radius: 50%; background: #ff5d67; box-shadow: 0 0 7px #ff5d67; }

.media-caption { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; padding: 10px 10px 0; }
.media-caption strong { min-width: 0; overflow: hidden; color: #f6f4ff; font-size: clamp(10px, 1vw, 15px); line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.media-caption span { grid-column: 1; color: #9895a9; font-size: clamp(8px, .72vw, 11px); }
.media-caption a { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--cyan); font: 800 clamp(7px, .68vw, 10px)/1.2 "Courier New", monospace; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.media-caption a:hover { color: #fff; }
.media-room-hint { align-self: end; margin: 0; color: #7f7c92; font: 700 clamp(7px, .7vw, 10px)/1 "Courier New", monospace; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

.is-changing #slideImage, .is-changing .media-room { opacity: .2; transform: scale(.997); }

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}

.slide-status {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px #000;
}

.control-bar { display: grid; grid-template-columns: 126px minmax(130px, 1fr) 100px 142px; align-items: center; gap: 18px; border-top: 1px solid var(--line); }

.direction-button, .explore-button {
  height: 48px;
  border: 1px solid #4b485e;
  background: #09090f;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.direction-button { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9290a6; }
.direction-button svg, .explore-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.direction-button:hover:not(:disabled) { color: var(--text); border-color: #7b7794; }
.direction-button:disabled { opacity: .3; cursor: not-allowed; }

.progress-area { min-width: 0; display: flex; align-items: center; gap: 16px; }
.progress-track { position: relative; height: 1px; flex: 1; background: #353248; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 8px rgba(37,232,240,.7); transition: width 300ms var(--ease); }
.progress-dots { display: flex; align-items: center; gap: 7px; }
.progress-dot { width: 10px; height: 10px; padding: 0; border: 1px solid #4a465f; border-radius: 50%; background: #0b0b12; cursor: pointer; }
.progress-dot:hover { border-color: #9d97b9; }
.progress-dot.active { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 9px rgba(37,232,240,.55); }

.explore-button { display: flex; align-items: center; justify-content: center; gap: 8px; border-color: rgba(233,108,255,.72); color: #6fdff8; box-shadow: 0 0 18px rgba(233,108,255,.12); }
.explore-button:hover { color: #b5f7ff; border-color: var(--magenta); background: rgba(233,108,255,.06); }

.mobile-header, .mobile-chapters { display: none; }

.explore-panel {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  width: min(470px, 92vw);
  height: 100%;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr) 66px;
  background: #0a0a12;
  border-left: 1px solid rgba(37, 232, 240, .38);
  box-shadow: -24px 0 70px rgba(0,0,0,.66);
  animation: panel-in 280ms var(--ease) both;
}
.explore-panel[hidden] { display: none; }
.panel-head, .panel-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--line); }
.panel-section { color: var(--cyan); text-transform: uppercase; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.panel-close { width: 38px; height: 38px; border: 1px solid #3f3c52; background: transparent; cursor: pointer; }
.panel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.panel-body { min-height: 0; overflow-y: auto; padding: 36px 30px 42px; }
.panel-body h1 { margin: 0; max-width: 390px; font-size: clamp(31px, 3vw, 48px); line-height: .98; letter-spacing: -.045em; }
.takeaway { margin: 26px 0 32px; color: #c9c6d8; font-size: 18px; line-height: 1.5; }
.detail-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.detail { padding: 18px 0; border-bottom: 1px solid var(--line); color: #aaa7bd; font-size: 14px; line-height: 1.55; }
.detail strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.map-preview { margin: 30px 0 0; }
.map-preview img { display: block; width: 100%; border: 1px solid #37344a; }
.map-preview figcaption { margin-top: 8px; color: #77748d; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.panel-foot { border-top: 1px solid var(--line); border-bottom: 0; color: #77748d; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.panel-foot a { color: #b7b2cc; text-decoration: none; }
.panel-foot a:hover { color: var(--cyan); }

.panel-scrim { position: fixed; z-index: 19; inset: 0; border: 0; background: rgba(0,0,0,.56); backdrop-filter: blur(2px); }
.panel-scrim[hidden] { display: none; }

@keyframes panel-in { from { transform: translateX(34px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 980px) {
  .app-shell { display: block; }
  .chapter-rail { display: none; }
  .deck-stage { height: 100%; grid-template-rows: 58px 48px minmax(0, 1fr) 70px; padding: 0 16px; }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .mobile-header .brand-button { height: 58px; padding: 9px 2px; }
  .mobile-header .brand-mark { font-size: 30px; }
  .utility-button.compact { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; }
  .mobile-chapters { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; }
  .mobile-chapters::-webkit-scrollbar { display: none; }
  .mobile-chapters .chapter-button { min-height: 34px; grid-template-columns: 1fr; padding: 0 12px; white-space: nowrap; font-size: 10px; }
  .mobile-chapters .chapter-button svg { display: none; }
  .screen-frame { width: min(100%, calc((100vh - 196px) * var(--stage-ratio))); max-height: calc(100vh - 196px); padding: 6px; }
  .control-bar { grid-template-columns: 48px minmax(80px, 1fr) 48px 104px; gap: 8px; }
  .direction-button { width: 48px; }
  .direction-button span { display: none; }
  .progress-dots { display: none; }
  .explore-button { font-size: 10px; }
  .media-room { padding: 2.4% 3.5% 2%; gap: 1.4%; }
  .media-room-subtitle { display: none; }
  .crt-rack { gap: 3%; }
  .media-caption { padding-top: 6px; }
}

@media (max-width: 580px) {
  .deck-stage { grid-template-rows: 54px 44px minmax(0, 1fr) 64px; padding: 0 10px; }
  .screen-frame { width: 100%; max-height: none; align-self: center; }
  .screen-glass { display: grid; place-items: center; }
  .control-bar { grid-template-columns: 42px minmax(46px, 1fr) 42px 92px; }
  .direction-button, .explore-button { height: 42px; }
  .explore-button svg { width: 16px; }
  .explore-panel { width: 100%; }
  .media-room { padding: 7px 9px 5px; gap: 4px; }
  .media-room-title { font-size: 7px; }
  .crt-rack { gap: 7px; }
  .crt-label { margin: 0 0 3px 3px; font-size: 6px; letter-spacing: .05em; }
  .crt-label span { width: 11px; height: 11px; margin-right: 3px; }
  .crt-bezel { padding: 5px; border-radius: 7px 7px 11px 11px; }
  .play-key { left: 5%; bottom: 7%; gap: 3px; min-height: 15px; padding: 0 5px; font-size: 5px; box-shadow: 1px 1px 0 var(--magenta); }
  .play-triangle { border-top-width: 3px; border-bottom-width: 3px; border-left-width: 5px; }
  .vhs-deck { height: 12px; }
  .vhs-display { font-size: 4px; }
  .vhs-led { width: 3px; height: 3px; }
  .media-caption { column-gap: 4px; row-gap: 1px; padding: 3px 3px 0; }
  .media-caption strong { font-size: 6px; }
  .media-caption span, .media-caption a { font-size: 4px; }
  .media-room-hint { font-size: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}