.replay{position:relative;display:grid;gap:var(--s3);}
.replay:focus-visible{outline:4px solid var(--cyan);outline-offset:6px;}
.replay--live{
  background:var(--void-2);border:3px solid var(--ink);border-radius:2px;
  box-shadow:8px 8px 0 var(--ink);padding:var(--s3) var(--s4) var(--s4);
  transform:rotate(-.2deg);
}
@media(max-width:767px){
  .replay--live{padding:var(--s3) var(--s2);transform:none;}
}
.replay--live::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--void-dot) 1px,transparent 1.4px);
  background-size:4px 4px;opacity:.6;
}
.replay > *{position:relative;z-index:1;}

.replay__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2) var(--s3);}
.replay__head > div:first-child{min-width:0;}
.replay__id{margin:8px 0 0;font-size:.75rem;color:var(--dim);letter-spacing:.03em;}
.replay__delta{
  margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s1);justify-content:flex-end;
}
@media(max-width:600px){.replay__delta{margin-left:0;justify-content:flex-start;}}
.replay__delta .incident__delta{margin-left:0;}
.rstrain{
  display:inline-block;margin-left:var(--s1);vertical-align:middle;
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;color:var(--ink);background:var(--infected);
  border:3px solid var(--ink);padding:5px 9px 4px;
}

.replay__note p{margin:0;max-width:66ch;color:#C6B9D6;line-height:1.5;font-size:.875rem;}
.replay__note b{color:var(--cyan);font-weight:700;}
.replay__prompt{
  display:grid;gap:4px;margin-top:var(--s2) !important;max-width:72ch !important;
  border:2px solid var(--ink);background:var(--void);padding:9px var(--s2) 10px;
}
.replay__prompt .mono{font-size:.75rem;color:var(--paper);line-height:1.5;}

.replay__stagerow{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s3);align-items:start;}
@media(max-width:900px){.replay__stagerow{grid-template-columns:minmax(0,1fr);}}
.replay__col{display:grid;gap:var(--s2);min-width:0;}

.rpanel{
  position:relative;display:grid;gap:10px;align-content:start;
  border:3px solid var(--ink);background:var(--void);
  box-shadow:5px 5px 0 var(--ink);padding:var(--s2) var(--s3) var(--s3);
  min-height:266px;overflow:visible;
}
.rpanel > *:not(.symbiote){position:relative;z-index:2;}
.rpanel__symbiote{position:absolute;inset:0;z-index:1;}
.rpanel__symbiote[hidden]{display:none;}
.rpanel__head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.rpanel .codename{margin:0;font-size:1.5rem;}
.rpanel__pct{
  font-size:2.25rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}

.rledger{display:grid;gap:2px;margin-top:2px;}
.rledger__row{
  display:grid;grid-template-columns:minmax(58px,auto) minmax(74px,auto) minmax(0,1fr);
  gap:var(--s1);align-items:baseline;padding:4px 0;
  border-bottom:1px solid #241038;font-size:.75rem;
}
.rledger__row:last-child{border-bottom:0;}
.rledger__name{color:var(--cyan);}
.rledger__state{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-tick);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.rledger__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8C80A6;}
.rledger__row--live .rledger__state{color:var(--healthy);}
.rledger__row--infected .rledger__state,.rledger__row--infected .rledger__val{color:var(--infected);}
.rledger__row--dead .rledger__state,.rledger__row--dead .rledger__val{color:var(--critical);}
.rledger__row--dead .rledger__val{text-decoration:line-through;}
.rpanel.is-critical .rledger__val,.rpanel.is-critical .rledger__name{
  text-shadow:0 1px 6px var(--symbiote),0 0 3px var(--symbiote);
}
.rledger__row.is-flip{animation:ledger-flip 400ms cubic-bezier(.22,1,.36,1) both;}
@keyframes ledger-flip{from{transform:translateX(-9px);opacity:.25;}}

.rstage{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2) var(--s3);
  align-items:center;border:3px solid var(--ink);background:var(--void);
  padding:var(--s2) var(--s3);
}
@media(max-width:700px){
  .rstage{grid-template-columns:minmax(0,1fr);}
  .rstage__meter{justify-items:start;}
}
.rstage__mark{display:grid;gap:2px;justify-items:center;min-width:106px;}
.rstage__word{
  font-family:Bangers,Impact,cursive;font-size:clamp(1.5rem,3.4vw,2.25rem);
  line-height:1;letter-spacing:.03em;white-space:nowrap;
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  transform:rotate(-6deg);
}
.rstage__clock{font-size:var(--t-micro);color:var(--dim);letter-spacing:.06em;}
.rstage__read{min-width:0;}
.rstage__name{
  font-family:Anton,Impact,sans-serif;font-size:1.125rem;letter-spacing:.08em;
  margin:2px 0 4px;color:var(--paper);
}
.rstage__line{margin:0;font-size:.8125rem;line-height:1.45;color:#C6B9D6;max-width:52ch;}
.rstage__meter{display:grid;gap:3px;min-width:126px;}
.rstage__pct{font-size:1.75rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.rstage__meter .bar{width:100%;}

.rtransport{display:grid;gap:var(--s2);}
.rtransport__bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.rplay{min-width:104px;}
.rhint{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--dimmer);
}
.rtransport__bar .rclock{margin-left:auto;}
.rclock{
  font-size:.875rem;font-weight:600;color:var(--cyan);
  border:2px solid var(--ink);background:var(--void);padding:6px 10px;
  font-variant-numeric:tabular-nums;
}
.rscrub{position:relative;min-width:0;padding-bottom:116px;}
.rscrub__rail{
  position:relative;height:16px;border:3px solid var(--ink);background:var(--void);
}
.rscrub__done{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--cyan);
  border-right:2px solid var(--ink);
}
.rscrub__head{
  position:absolute;top:-6px;bottom:-6px;left:0;width:6px;margin-left:-3px;
  background:var(--pink);border:2px solid var(--ink);
}
.replay.is-playing .rscrub__head{animation:rhead 1.1s steps(1) infinite;}
@keyframes rhead{0%,60%{background:var(--pink);}61%,100%{background:var(--paper);}}

.rtick{
  position:absolute;top:-5px;transform:translateX(-50%);z-index:3;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
.rtick::before{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.rtick__pip{
  display:block;position:relative;width:11px;height:11px;
  background:var(--void-dot);border:2px solid var(--ink);
}
.rtick.is-past .rtick__pip{background:var(--cyan);}
.rtick.is-now .rtick__pip{background:var(--pink);}

.rtick__flag{
  position:absolute;top:22px;left:0;transform:none;
  display:grid;gap:1px;justify-items:start;white-space:nowrap;
  border-left:2px solid var(--void-dot);padding:2px 0 2px 7px;
}
.rtick--start{transform:none;}
.rtick--end{transform:translateX(-100%);}
.rtick--end .rtick__flag{
  left:auto;right:0;transform:none;justify-items:end;
  border-left:0;border-right:2px solid var(--void-dot);padding:2px 7px 2px 0;
}
.rtick--lane1 .rtick__flag{top:52px;}
.rtick--lane2 .rtick__flag{top:82px;}
.rtick--lane1 .rtick__pip::after,.rtick--lane2 .rtick__pip::after{
  content:"";position:absolute;left:50%;top:11px;width:2px;
  margin-left:-1px;background:var(--void-dot);
}
.rtick--lane1 .rtick__pip::after{height:41px;}
.rtick--lane2 .rtick__pip::after{height:71px;}

.rtick__name,.rtick__at{
  font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.08em;line-height:1.1;
}
.rtick__name{font-size:var(--t-tick);color:var(--dim);text-transform:uppercase;}
.rtick__at{font-size:var(--t-tick);color:var(--dimmer);}
.rtick.is-now .rtick__flag{border-color:var(--pink);}
.rtick.is-now .rtick__name{color:var(--pink);}
.rtick.is-now .rtick__at{color:var(--paper);}
.rtick.is-past .rtick__flag{border-color:var(--cyan);}
.rtick:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
@media(max-width:600px){
  .rtick__name{font-size:var(--t-tick);letter-spacing:.02em;}
  .rtick__at{font-size:var(--t-tick);}
}

.rscrub__input{
  position:absolute;left:0;top:0;width:100%;height:22px;margin:0;
  opacity:0;cursor:pointer;
}
.rscrub__input:focus-visible{opacity:1;outline:3px solid var(--cyan);outline-offset:4px;}

@media(pointer:coarse){
  .rscrub__input{height:44px;top:50%;transform:translateY(-50%);}
}

@media(prefers-reduced-motion:reduce){
  .rledger__row.is-flip{animation:none;}
}

.replay__blast{
  margin:var(--s2) 0 0;font-size:.875rem;line-height:1.5;color:var(--dim);
  max-width:58ch;
}
.replay__blast .blast__n{
  color:var(--critical);font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.replay__blast .blast__n.is-frozen{color:var(--degraded);}
.replay__blast code{
  font-family:"IBM Plex Mono",monospace;font-size:.8125rem;color:var(--infected);
}