:root {color-scheme:light}
body {margin:0;background:#fafaf9;color:#202326;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.replay-page {max-width:1320px;margin:0 auto;padding:44px 40px 24px}
.page-heading {max-width:760px;margin-bottom:28px}.page-heading a,.page-note a {color:#657078;text-decoration:none}.page-heading .eyebrow {font-size:11px;letter-spacing:.16em;margin-top:38px;color:#66747e}.page-heading h1 {font-size:38px;font-weight:550;letter-spacing:-1.5px;margin:12px 0}.page-heading>p:last-child {font-size:15px;line-height:1.6;color:#72777b}.page-note {font-size:11px;color:#7a8186;line-height:1.7}.page-note a {float:right}
.replay-shell {--ink:#20272d;--muted:#76828b;--blue:#0071e3;position:relative;background:white;color:var(--ink);border:1px solid #e0e4e6;border-radius:16px;overflow:hidden;box-shadow:0 8px 35px #21314106;font:13px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.replay-shell * {box-sizing:border-box}.replay-shell button,.replay-shell select {font:inherit;color:inherit;background:#fff;border:1px solid #e0e4e6;border-radius:7px;padding:7px 12px;cursor:pointer}.replay-shell button:hover {background:#f3f7fa}.replay-shell button:focus-visible,.replay-shell input:focus-visible,.replay-shell select:focus-visible {outline:2px solid #0071e3;outline-offset:3px}.replay-shell button[aria-pressed=true] {background:#eaf3ff;color:#0067d1;border-color:#c8def8}.replay-shell input {accent-color:var(--blue)}
.replay-topbar {height:61px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f1;gap:12px}.replay-title {display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600}.replay-title i {width:7px;height:7px;background:#0071e3;border-radius:50%}.replay-title small {color:var(--muted);font-weight:400;font-size:11px}.replay-modes {display:flex;gap:5px}
.replay-stage {position:relative;height:560px;overflow:hidden;background:#edf0f2}.replay-canvas {position:absolute;inset:0}.replay-canvas canvas {display:block;width:100%;height:100%;touch-action:none}.replay-hud {position:absolute;top:22px;left:22px;pointer-events:none;min-width:207px;padding:15px 17px;background:#ffffffed;border:1px solid #ffffff;border-radius:10px;box-shadow:0 3px 20px #26394707}.replay-hud .overline {font-size:9px;letter-spacing:.14em;color:#74818b}.replay-clock {font-variant-numeric:tabular-nums;font-size:27px;font-weight:500;letter-spacing:-1px;margin:3px 0 12px}.replay-hud dl {margin:0;display:grid;grid-template-columns:52px 1fr;gap:6px 10px;font-size:10px}.replay-hud dt {color:#7a8791}.replay-hud dd {margin:0;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,monospace}.replay-hud .speed-value {margin-top:13px;padding-top:10px;border-top:1px solid #e6ebef;font-size:11px;color:#536574}
.replay-observation {position:absolute;top:22px;right:22px;width:182px;border:1px solid #fff;border-radius:10px;background:#ffffffed;padding:9px;box-shadow:0 3px 20px #2639470b}.replay-observation img {width:100%;display:block;border-radius:5px;aspect-ratio:1280/1707;object-fit:contain;background:#e8edf1}.replay-observation header {font-size:9px;letter-spacing:.12em;color:#667987;padding:1px 0 8px}.replay-observation footer {font-size:10px;color:#687986;line-height:1.6;padding-top:7px;font-variant-numeric:tabular-nums}.replay-parts {padding-top:9px;margin-top:8px;border-top:1px solid #e4e9ec;font-size:10px;color:#697a88}.replay-parts summary {cursor:pointer}.replay-parts ul {padding-left:13px;margin:7px 0 0;max-height:90px;overflow:auto}.replay-parts li {margin:3px 0}
.replay-blend {position:absolute;top:0;height:100%;left:50%;transform:translateX(-50%);object-fit:fill;pointer-events:none;display:none}.replay-shell[data-mode=follow] .replay-blend {display:block}.replay-help {position:absolute;bottom:20px;left:22px;color:#596d7c;background:#ffffffde;padding:7px 11px;border-radius:6px;font-size:10px;pointer-events:none}.replay-legend {position:absolute;bottom:20px;right:22px;font-size:9px;color:#677b8c;display:flex;align-items:center;gap:8px;background:#ffffffde;padding:7px 10px;border-radius:6px}.replay-legend i {display:block;width:100px;height:3px;background:linear-gradient(90deg,#087de4,#30b5b2,#e9af42)}
.replay-transport {padding:17px 22px 14px;border-top:1px solid #e4e9ec}.replay-timeline {width:100%;margin:0;cursor:ew-resize;height:17px}.replay-ticks {display:flex;justify-content:space-between;font-size:9px;color:#8b969e;font-variant-numeric:tabular-nums;margin:3px 0 13px}.replay-actions {display:flex;align-items:center;gap:9px}.replay-actions .play {background:#0071e3;color:white;border-color:#0071e3;min-width:83px}.replay-actions label {font-size:11px;color:#657684;display:flex;align-items:center;gap:7px}.replay-actions select {padding:6px}.replay-actions .blend-control {margin-left:auto}.blend-control input {width:100px}.replay-actions .replay-count {margin-left:auto;font-size:10px;color:#8b979e}.replay-status {position:absolute;inset:0;z-index:10;background:#f3f6f8ed;display:grid;place-items:center;font-size:13px;color:#536a7b}.replay-status[hidden] {display:none}
.capture .replay-page {padding:0;max-width:none}.capture .page-heading,.capture .page-note {display:none}.capture .replay-shell {height:100vh;border:0;border-radius:0;display:flex;flex-direction:column}.capture .replay-stage {flex:1;min-height:0}.capture .replay-topbar {height:54px;flex-shrink:0}.capture .replay-transport {padding:12px 22px}.capture .replay-observation {width:170px}.capture .replay-count {display:none}
@media(max-width:700px) {.replay-page{padding:24px 12px}.page-heading h1{font-size:30px}.replay-topbar{padding:0 12px}.replay-title small{display:none}.replay-modes button{padding:6px 8px;font-size:11px}.replay-stage{height:540px}.replay-hud{left:12px;top:12px;min-width:170px;padding:11px}.replay-observation{right:12px;top:12px;width:128px}.replay-parts{display:none}.replay-actions{flex-wrap:wrap}.replay-actions .blend-control{margin-left:0}.replay-actions .replay-count{display:none}.replay-help{left:12px;max-width:65%}.replay-legend{right:12px;bottom:56px}.replay-transport{padding:14px 12px}.page-note a{float:none}.replay-hud dl{font-size:9px;gap:5px}}