:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#0d1420;color:#ecf3fb;line-height:1.5}
*{box-sizing:border-box}body{margin:0;padding:22px 16px 60px;background:radial-gradient(ellipse at 60% -30%,#234343 0%,transparent 49%),#0d1420}main{max-width:1000px;margin:auto}
nav{color:#9eafbd;font-size:12px;margin:0 0 40px}a{color:#7bd8c7;text-underline-offset:4px}nav a{color:#c5d7df;text-decoration:none}
header{border-bottom:1px solid #29434c;padding:0 0 28px;margin-bottom:18px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:700;color:#73cdbe;margin-bottom:10px}
h1{font-size:clamp(30px,5vw,55px);font-weight:750;letter-spacing:-.065em;line-height:1.08;margin:0 0 18px}header>p:not(.eyebrow){max-width:730px;color:#b8cbd4;font-size:14px}
header .status{font-size:11px!important;color:#e4d39e!important;margin-top:22px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#31434e;border:1px solid #31434e;border-radius:8px;overflow:hidden;margin:20px 0}
.stats p{display:flex;flex-direction:column;gap:4px;margin:0;padding:16px;background:#162532;color:#9fb5c2;font-size:11px}.stats strong{font-size:23px;line-height:1.1;color:#f2f7fb;font-weight:650;font-variant-numeric:tabular-nums}
.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
figure{margin:0;border-radius:10px;overflow:hidden;background:#172632;border:1px solid #34454f}figcaption{padding:13px 15px;color:#b9ced8;font-size:12px}figcaption strong{color:#f2f7fa;font-size:14px}figure img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#070e14;aspect-ratio:16/9}figure p{color:#a6bbc7;padding:8px 14px 14px;font-size:11px;margin:0}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.details article{border-top:2px solid #375b61;padding:11px 3px 8px}h2{font-size:14px;line-height:1.3;margin:0 0 9px}.details p{font-size:12px;color:#b7cbd7;line-height:1.65}.details a{font-size:12px}
footer{border-top:1px solid #29434c;padding-top:22px;margin-top:10px;color:#a8bdc7;font-size:12px}footer p{margin-bottom:13px}
@media(max-width:660px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.players,.details{grid-template-columns:1fr}body{padding:16px 12px}nav{margin-bottom:27px}}

/* Live two-seat presentation and independent stage-by-stage teacher timeline */
.state-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;margin-right:7px;border:1px solid #62758c;border-radius:999px;background:#233142;color:#c6ddff;font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.state-pill.active{border-color:#3ccca6;background:#123f38;color:#9df4ce}
.state-pill.active:before{content:"";width:6px;height:6px;background:#45e5b4;border-radius:100%;box-shadow:0 0 7px #45e5b4;animation:livepulse 1.7s infinite}
@keyframes livepulse{50%{opacity:.4;box-shadow:none}}
.viewerbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:18px 0 10px;color:#9fb8ca;font-size:12px}
.viewerbar button,.timeline-controls button{cursor:pointer;border:1px solid #365265;background:#1c3042;color:#d8ecf8;border-radius:7px;padding:8px 11px;font:600 11px/1.3 system-ui,sans-serif}
.viewerbar button:hover,.timeline-controls button:hover{border-color:#65ceb9;background:#21443f}
.viewerbar button:focus-visible,.timeline-controls button:focus-visible{outline:2px solid #7ae8cf;outline-offset:2px}
.players figure:first-child{border-color:#2b8f7b;box-shadow:0 0 0 1px #184e45 inset}
.players figure:last-child{border-color:#7f78a7;box-shadow:0 0 0 1px #39315f inset}
.players figure:first-child figcaption{border-left:4px solid #68dec0}
.players figure:last-child figcaption{border-left:4px solid #b5a4ed}
.players figure{display:flex;flex-direction:column;align-items:stretch}
.players figure img{object-fit:contain;object-position:center;image-rendering:pixelated;background:#090e18}
.players.pixel-exact figure img{width:320px;max-width:100%;height:auto;margin:0 auto}
.players figure p{margin-top:auto}
.timeline-section{background:linear-gradient(140deg,rgba(22,49,59,.87),rgba(16,25,46,.96));border:1px solid #39525c;border-radius:14px;margin:24px 0;padding:18px}
.timeline-header{display:flex;align-items:start;justify-content:space-between;gap:15px}
.timeline-header h2{font-size:22px;letter-spacing:-.035em;margin:0 0 7px}
.timeline-header p:not(.eyebrow){font-size:12px;color:#b4c9d5;margin:0 0 16px;max-width:600px}
.transcript-tag{background:#273c48;border:1px solid #54737d;color:#b1d8da;border-radius:6px;padding:7px 9px;font-size:10px;white-space:nowrap}
.timeline-controls{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:11px 0;border-top:1px solid #3a5260;border-bottom:1px solid #3a5260}
.timeline-controls button:disabled{opacity:.33;cursor:default}
.stage-tabs{display:flex;flex:1;gap:5px;overflow-x:auto;min-width:145px;scrollbar-width:thin;padding:3px 1px}
.stage-tab{flex-shrink:0;white-space:nowrap}
.timeline-controls .stage-tab.selected{background:#236451;border-color:#76dbb5;color:#effff8}
.follow-label{font-size:11px;color:#c5d8de;white-space:nowrap;display:flex;align-items:center;gap:6px}
.follow-label input{accent-color:#5cd9b6;width:15px;height:15px}
.transcript{height:280px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:14px 5px 10px;display:flex;flex-direction:column;gap:9px}
.stage-heading{font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:#e3e6e8;margin-bottom:4px}
.event{max-width:95%;border:1px solid #354a5b;background:#1a2b3b;border-radius:10px;padding:12px 13px;border-left:3px solid #648da2}
.event-model-action{border-left-color:#46c6ab}
.event-model-action:has(.speaker:first-child){margin-right:auto}
.event-feedback,.event-teacher{border-left-color:#cbabf5;background:#292a43;margin-left:20px}
.event-checkpoint{border-color:#406e60;border-left-color:#76e6ad;background:#173b34}
.event-header{display:flex;align-items:center;flex-wrap:wrap;gap:5px 13px;justify-content:space-between;margin-bottom:6px}
.speaker{font-size:12px;color:#f0f7fa}
.event-meta{font-size:10px;color:#a2b8c8}
.event-text{font-size:12px;line-height:1.55;color:#e0e8eb;margin:0}
.empty-log{color:#b5c6d1;font-size:12px}
.footnote{font-size:11px;color:#9eb5c5;margin:10px 0 0}
@media(max-width:680px){.timeline-header{display:block}.transcript-tag{display:inline-block;margin:0 0 12px}.timeline-section{padding:12px}.timeline-controls{gap:6px}.timeline-controls>button{padding:7px 8px}.stage-tabs{order:3;flex-basis:100%}.transcript{height:340px}.event{max-width:100%}.event-feedback{margin-left:10px}}
@media(prefers-reduced-motion:reduce){.state-pill.active:before{animation:none}}

.players figure video.replay{display:block;width:100%;max-height:330px;aspect-ratio:16/9;object-fit:contain;image-rendering:pixelated;background:#090e18}
.players.pixel-exact figure video.replay{width:320px;max-width:100%;height:auto;margin:0 auto}
.players figure video[hidden],.players figure img[hidden]{display:none!important}

/* Exactly one media layer can be visible. The old still frame must never
   show underneath a replay or during metadata loading. */
.frame-well{
  position:relative; width:100%;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  background:#090e18;overflow:hidden;isolation:isolate;
}
.frame-well>img,.frame-well>video{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  max-height:none;aspect-ratio:16/9;object-fit:contain;
  background:#090e18;image-rendering:pixelated;z-index:2;
}
.players.pixel-exact .frame-well>img,
.players.pixel-exact .frame-well>video{
  width:min(320px,100%);height:auto;inset:auto;max-width:100%;max-height:100%;
}
.frame-well>[hidden]{display:none!important}
.frame-placeholder{
  text-align:center;padding:20px;color:#a5bfcd;
  font-size:12px;font-weight:500;z-index:1;
}

/* Live-first observatory: a result on arrival, an opt-in recording, no loops. */
.viewerbar{
  margin-top:20px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid #365862;border-radius:12px;
  background:linear-gradient(115deg,#1b323f,#19283a);
}
.viewer-intro{display:flex;flex-direction:column;gap:4px;min-width:210px}
.viewer-intro strong{color:#e9f7fa;font-size:14px;line-height:1.3}
.viewer-intro span{font-size:11px;color:#9ab6c5}
.viewer-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.viewer-actions button,.replay-nav button{
  padding:9px 12px;border:1px solid #4b6473;background:#243a4a;
  border-radius:8px;color:#d8edf4;font:600 12px/1.2 system-ui,sans-serif;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.viewer-actions button:hover:not(:disabled),.replay-nav button:hover{
  background:#294f55;border-color:#75cfc4;
}
.viewer-actions button:focus-visible,.replay-nav button:focus-visible,
.replay-scrubber input:focus-visible{
  outline:2px solid #88eee0;outline-offset:3px;
}
.viewer-actions button:disabled{opacity:.55;cursor:default}
#watchReplay:not(:disabled){border-color:#65bda7;background:#20574e;color:#f2fff8}
#returnLatest{background:#223447}
#frameStepMode[aria-pressed="true"]{border-color:#76d8bf;background:#1a4c48}
#frameStepCount{font:500 11px/1.3 system-ui,sans-serif;color:#afcbd4;min-width:145px}
.replay-nav{
  border:1px solid #325b62;border-radius:12px;margin:10px 0;
  padding:14px 16px;background:#152936;
}
.replay-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.replay-meta strong{font-size:13px}
.replay-meta span{font-size:11px;color:#a6c0c9}
.chapter-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.chapter-buttons button{font-size:11px;background:#233849}
.replay-scrubber{
  margin-top:16px;padding:12px 0 0;border-top:1px solid #31515b;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center
}
.replay-scrubber label,.replay-scrubber output{font-size:11px;color:#cadbe4}
.replay-scrubber output{font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
.replay-scrubber input{min-width:0;width:100%;accent-color:#68d6be;cursor:pointer}
.activity-ribbon{
  margin:12px 0 16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;
  border-left:3px solid #76cfbf;border-radius:0 8px 8px 0;
  background:linear-gradient(100deg,rgba(25,73,75,.54),rgba(25,42,57,.45))
}
.activity-ribbon span{font-size:12px;color:#e2f2ef;line-height:1.5;font-weight:600}
.activity-ribbon small{font-size:11px;color:#a5c4cc;line-height:1.55}
.players{margin-top:10px}
.replay-nav[hidden],.replay-scrubber[hidden],.viewer-actions button[hidden]{
  display:none!important
}
@media(max-width:680px){
  .viewerbar{padding:12px}
  .viewer-actions{width:100%}
  .viewer-actions button{flex:1 1 auto}
  .replay-scrubber{grid-template-columns:1fr auto}
  .replay-scrubber input{grid-column:1/3;grid-row:2}
  .replay-scrubber output{grid-column:2;grid-row:1}
}
@media(prefers-reduced-motion:reduce){
  .viewer-actions button,.replay-nav button{transition:none}
}


/* Browser-side single retained canvas; no extra live IMG buffer. */
.players figure canvas {
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  image-rendering:pixelated;background:#090e18;
}
.frame-well>canvas {
  position:absolute;inset:0;width:100%;height:100%;
  max-height:none;aspect-ratio:16/9;z-index:2;image-rendering:pixelated;
}
.players.pixel-exact .frame-well>canvas {
  width:min(320px,100%);height:auto;inset:auto;max-width:100%;max-height:100%;
}
.frame-well>canvas[hidden]{display:none!important}


/* Optional browser-rendered public metadata scene; never overlays game proof. */
.scene-lab { padding: 1rem; margin: 1.25rem 0; border: 1px solid #334356; border-radius: 12px; }
.scene-lab[hidden] { display: none !important; }
.scene-lab h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.scene-lab p { max-width: 72ch; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.scene-grid figure { min-width: 0; margin: 0; }
.scene-grid figcaption { margin: 0.25rem 0; font-size: 0.95rem; }
.scene-grid canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; image-rendering: pixelated; background: #0d1420; border: 1px solid #334356; border-radius: 7px; }
@media (max-width: 650px) { .scene-grid { grid-template-columns: 1fr; } }