@font-face{font-family:"Shantell Sans";font-weight:500;font-style:normal;font-display:block;src:url(fonts/shantell-sans-500.woff2) format("woff2")}
@font-face{font-family:"Shantell Sans";font-weight:600;font-style:normal;font-display:block;src:url(fonts/shantell-sans-600.woff2) format("woff2")}
@font-face{font-family:"Shantell Sans";font-weight:700;font-style:normal;font-display:block;src:url(fonts/shantell-sans-700.woff2) format("woff2")}
@font-face{font-family:"Shantell Sans";font-weight:800;font-style:normal;font-display:block;src:url(fonts/shantell-sans-800.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:block;src:url(fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:800;font-style:normal;font-display:block;src:url(fonts/inter-800.woff2) format("woff2")}
:root {
  color-scheme: dark;
  --bg: #050816;
  --bg2: #0c1227;
  --bg3: #141c38;
  --ink: #e8ecf7;
  --muted: #8f9bb8;
  --line: #1d2646;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --paper: #f5eedf;
  --focus: #a5b4fc;
}
html, body { height: auto; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #111a3d 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink);
  font: 500 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-inline: 16px;
  margin: 0;
}
.wrap { max-width: 1180px; margin: 0 auto; padding-block: 28px 44px; display: grid; gap: 18px; }
header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 16px/1 "Inter", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ink); }
.tile { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--purple)); display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(139, 92, 246, .7); }
.tile svg { width: 17px; height: 17px; }
h1 { font: 800 clamp(28px, 4.2vw, 44px)/1.05 "Shantell Sans", "Comic Sans MS", system-ui, sans-serif; margin: 6px 0 0; text-wrap: balance; letter-spacing: -0.01em; }
.meta { color: var(--muted); font: 600 12px/1.4 "Inter", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0a0d1c;
  box-shadow: 0 40px 90px -40px rgba(99, 102, 241, .45), 0 0 0 1px var(--line); }
.stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; opacity: 0; transition: opacity .35s ease; }
.stage.ready canvas { opacity: 1; }
.stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; background: #000; }
.poster { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(12px, 3vw, 34px); background: linear-gradient(180deg, rgba(5, 8, 22, 0) 45%, rgba(5, 8, 22, 0.78) 100%); transition: opacity .45s ease; }
.stage.started .poster { opacity: 0; pointer-events: none; }
#big { flex: none; width: clamp(52px, 7.5vw, 92px); height: clamp(52px, 7.5vw, 92px); border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--purple)); display: grid; place-items: center;
  box-shadow: 0 18px 50px -12px rgba(139, 92, 246, .8), inset 0 0 0 3px rgba(255, 255, 255, .25); transition: transform .2s ease; }
#big:hover { transform: scale(1.06); }
#big svg { width: 38%; height: 38%; margin-left: 8%; }
.hint { display: grid; gap: 6px; color: #fff; padding-bottom: clamp(2px, .6vw, 8px); }
.hint b { font: 800 clamp(16px, 2.4vw, 28px)/1.1 "Shantell Sans", system-ui, sans-serif; text-shadow: 0 2px 16px rgba(5, 8, 22, .6); }
.hint span { font: 700 clamp(10px, 1.2vw, 13px)/1 "Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #cfd6ea; }
.cap { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); max-width: 86%; pointer-events: none;
  background: rgba(5, 8, 22, .82); color: #fff; font: 600 clamp(12px, 2vw, 24px)/1.35 "Inter", system-ui, sans-serif;
  padding: .35em .85em; border-radius: 10px; text-align: center; }
.endbar { position: absolute; right: 16px; bottom: 16px; display: none; }
.stage.ended .endbar { display: block; }
#replay { font: 700 14px/1 "Inter", system-ui, sans-serif; color: #fff; border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 10px 30px -10px rgba(139, 92, 246, .8); }
.controls { display: flex; align-items: center; gap: 12px; }
.ib { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ib:hover { background: var(--bg3); border-color: #2b3766; }
.ib svg { width: 18px; height: 18px; }
.ib .i-pause, #play.on .i-play { display: none; }
#play.on .i-pause { display: block; }
#cc { width: auto; padding: 0 12px; border-radius: 10px; font: 800 12px/1 "Inter", system-ui, sans-serif; letter-spacing: .06em; }
#cc.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.track { position: relative; flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; }
#scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; margin: 0; cursor: pointer; --p: 0%;
  background: linear-gradient(90deg, var(--blue), var(--purple)) 0 0 / var(--p) 100% no-repeat, var(--bg3); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(139, 92, 246, .35); }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(139, 92, 246, .35); }
#ticks { position: absolute; inset: 0; pointer-events: none; }
.tick { position: absolute; top: calc(50% + 7px); width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: #3a4674; }
#time { flex: none; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 86px; text-align: right; }
.chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.chap { font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.chap:hover { color: var(--ink); border-color: #2b3766; }
.chap.active { color: var(--bg); background: var(--paper); border-color: var(--paper); }
.foot { color: var(--muted); font-size: 13px; max-width: 70ch; }
.foot b { color: var(--ink); font-weight: 600; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 560px) {
  #time { min-width: 0; font-size: 12px; }
  .ib { width: 38px; height: 38px; }
  .chap { font-size: 12px; padding: 7px 10px; }
}