.replay-top{display:flex;justify-content:space-between;align-items:start;gap:24px}.replay-top label{margin:0;min-width:280px}.replay-top h2{margin-bottom:12px}.replay-top p{margin-bottom:12px}.replay .note{font-size:16px;margin:20px 0}.replay-map{position:relative;display:grid;grid-template-columns:minmax(100px,1fr) minmax(50px,100px) minmax(100px,1fr) minmax(50px,100px) minmax(100px,1fr);align-items:center;gap:0;margin:36px 0}.replay-node{position:relative;z-index:1;min-height:130px;padding:20px;background:var(--raised);border:1px solid var(--control)}.replay-node strong,.replay-node span,.replay-node small{display:block}.replay-node strong{font-size:32px;font-weight:500}.replay-node span{margin-top:6px}.replay-node small{color:var(--muted);font-size:13px;margin-top:6px}.replay-node[data-selected=true]{border-color:var(--active);background:var(--signal)}.replay-link{text-align:center;color:var(--muted);font-size:12px}.replay-link i{display:block;height:1px;background:var(--control);margin-top:8px}.replay-link i::after{content:'↔';display:block;margin-top:-14px;color:var(--ink);font-size:20px}.replay-map #replay-packet{position:absolute;z-index:2;top:0;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--active);border:2px solid var(--surface);border-radius:50%;pointer-events:none}.replay-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 0 20px;border-bottom:1px solid var(--rule)}.replay-counts p{font-size:14px;margin:0}.replay-counts strong{display:block;font-size:26px;font-weight:500;margin-bottom:6px}.replay-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:24px 0}.replay-controls label{margin:0;font-size:14px}.replay-controls select{padding:10px;min-height:46px}.replay-scrub-label{display:flex;justify-content:space-between;gap:16px}.replay input[type=range]{padding:0;width:100%;accent-color:var(--active);min-height:44px;border:0}.replay-inspect{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:24px;border-top:1px solid var(--rule)}.replay-inspect>section{min-width:0}.replay-inspect h3{font-size:24px;margin-top:0}.replay-inspect dl{display:grid;grid-template-columns:minmax(100px,1fr) 2fr;gap:12px 20px;font-size:14px}.replay-inspect dt{color:var(--muted)}.replay-inspect dd{margin:0;overflow-wrap:anywhere}.replay-inspect code{overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px}.replay-inspect pre{max-height:240px;overflow:auto}.replay-inspect details{border-top:1px solid var(--rule)}#replay-events{list-style:none;max-height:460px;overflow:auto;padding:0;margin:20px 0;scrollbar-gutter:stable}#replay-events li{border-top:1px solid var(--rule)}#replay-events button{display:grid;grid-template-columns:1fr auto;width:100%;padding:14px 12px;text-align:left;border:0;border-radius:0;background:var(--surface);font-size:14px;gap:6px 12px}#replay-events button[aria-current=true]{background:var(--signal)}#replay-events button small{color:var(--muted);font-size:12px}#replay-events button span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-variant-numeric:tabular-nums}#replay-byte-layout{display:flex;gap:2px;margin:24px 0;font-size:12px}#replay-byte-layout span{padding:12px 8px;background:var(--raised);border-bottom:2px solid var(--control);overflow-wrap:anywhere}#replay-byte-layout span:last-child{flex:1;border-color:var(--active);background:var(--signal)}.download-records{display:grid;grid-template-columns:1fr 1fr;gap:40px}.download-records>div{min-width:0;border-top:1px solid var(--rule);padding:20px 0}.download-records h3{font-size:22px}.download-records code{font-size:12px;overflow-wrap:anywhere;white-space:normal}.download-records p{margin:12px 0}
.replay-page .page-title{padding:28px 40px}.replay-page .page-title h1{font-size:32px;margin-bottom:12px}.replay-page .page-title .lead{font-size:18px;max-width:85ch}.replay-page .replay{padding-top:28px}.replay-page .replay h2{font-size:26px}.replay-page .replay .note{padding:12px 16px;background:var(--raised);font-size:14px;max-width:none}.replay-page .replay-map{margin:24px 0}.replay-page .replay-node{min-height:112px;padding:16px 20px}.replay-page .replay-controls{margin:20px 0}
@media(hover:hover) and (pointer:fine){#replay-events button:hover{background:var(--hover)}}
@media(max-width:1050px){.replay-top{display:block}.replay-top label{display:block;max-width:400px}.replay-inspect{gap:24px}.replay-node{padding:16px}.replay-node small{font-size:12px}.replay-counts{gap:16px}}
@media(max-width:700px){.replay-map{grid-template-columns:1fr;max-width:100%;gap:0;margin:24px 0}.replay-node{min-height:88px;display:grid;grid-template-columns:36px 1fr;gap:0 16px;padding:16px 20px}.replay-node strong{grid-row:1/3;align-self:center}.replay-node span{margin-top:0}.replay-node small{margin-top:4px}.replay-link{height:42px;position:relative;padding:12px 0 0 56px;text-align:left}.replay-link i{position:absolute;left:36px;top:0;margin:0;width:1px;height:42px}.replay-link i::after{content:'↕';margin:10px 0 0 -5px;font-size:18px}.replay-counts{grid-template-columns:1fr;gap:12px}.replay-counts p{display:flex;gap:12px;align-items:center}.replay-counts strong{min-width:80px;font-size:22px;margin:0}.replay-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.replay-controls #replay-play,.replay-controls label{grid-column:1/-1}.replay-controls button{padding:10px 6px}.replay-inspect,.download-records{grid-template-columns:1fr;gap:24px}.replay-top label{min-width:0}.replay-inspect dl{gap:12px}.replay-inspect h3{font-size:22px}#replay-events{max-height:340px}#replay-byte-layout span{padding:10px 5px}.download-records h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){#replay-packet{display:none!important}}
@media(max-width:700px){.replay-page .page-title{padding:24px 20px}.replay-page .page-title h1{font-size:28px}.replay-page .replay h2{font-size:24px}.replay-page .replay-node{min-height:88px}}

.replay-page .page-title .lead{max-width:100ch}.replay-page .replay-node strong{line-height:1.1}