:root{--bg:#f3f6fa;--panel:#fff;--text:#1b1a33;--muted:#5d6b7c;--line:#dde3ec;--accent:#004ba8;--warn:#a35a00;color:var(--text);background:var(--bg);font-family:system-ui,sans-serif}body{margin:0}.player{grid-template-columns:240px 1fr;height:100vh;display:grid}.pages{background:var(--panel);border-right:1px solid var(--line);padding:12px;overflow:auto}.pages h2{color:var(--muted);margin:0 0 8px;font-size:14px}.pages ol{margin:0;padding:0;list-style:none}.pages li{cursor:pointer;border-radius:6px;padding:8px;font-size:13px}.pages li[aria-current=true]{background:#e3effd;font-weight:600}.pages li.unrecorded{color:var(--muted);cursor:default}.pages .badge{color:var(--warn);margin-left:4px;font-size:11px;display:inline-block}.stage{grid-template-rows:auto 1fr auto;min-width:0;display:grid}#status{color:var(--muted);padding:8px 12px;font-size:13px}.viewport{background:#e9ecf1;position:relative;overflow:hidden}.viewport .replayer-wrapper{transform-origin:0 0;position:absolute;top:0;left:0}.viewport iframe{background:#fff;border:0;box-shadow:0 2px 16px #100f262e}.replayer-mouse{background:#42a2ffb3;border-radius:50%;width:16px;height:16px;position:absolute}.replayer-mouse.active:after{content:"";border:2px solid var(--accent);border-radius:50%;position:absolute;inset:-6px}.replayer-mouse-tail{pointer-events:none;position:absolute}.controls{background:var(--panel);border-top:1px solid var(--line);align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.controls input[type=range]{flex:1}body[data-mode=snapshot] .player{grid-template-columns:1fr}body[data-mode=snapshot] .pages,body[data-mode=snapshot] .controls{display:none}body[data-mode=snapshot] .viewport{overflow:auto}.snap-stage{position:relative;overflow:hidden}.snap-heat{pointer-events:none;position:absolute;top:0;left:0}.assets-warning{color:#4a3000;background:#fff5e0;border-left:3px solid #b26b00;margin:.25rem 0;padding:.4rem .6rem}.snap-stage:after{content:"";pointer-events:none;background:#100f260d;position:absolute;inset:0}.snap-heat{z-index:1}body[data-mode=snapshot] #status{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}body[data-mode=snapshot] .replayer-mouse{display:none}