:root { --ink:#111318; --muted:#717986; --accent:#002fa7; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:1220px; padding:30px 28px 20px; margin:auto; }
.brand { display:block; color:var(--accent); font-size:15px; font-weight:700; margin-bottom:18px; }
h1 { font-size:clamp(23px,3vw,31px); font-weight:500; letter-spacing:-.8px; line-height:1.2; margin:0 0 24px; }
.diagram-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
#diagram { display:block; width:100%; min-width:0; font-family:"Times New Roman",Times,serif; }
#diagram [role=button] { cursor:pointer; outline:none; }
#diagram [role=button]:focus-visible .hit { stroke:var(--accent); stroke-width:2; }
#diagram .hit { fill:transparent; stroke:transparent; }
.controls { display:flex; align-items:center; gap:14px; padding:20px 0 10px; }
button { font:inherit; background:#fff; color:var(--ink); border:0; cursor:pointer; }
.controls button { display:flex; align-items:center; justify-content:center; gap:9px; height:40px; font-size:12px; white-space:nowrap; transition:background .18s,color .18s; }
.controls .primary { background:#252a32; color:#fff; border-radius:20px; min-width:130px; padding:0 14px; }
.controls .primary:hover { background:#444c58; }
.controls svg { width:15px; height:15px; }
#play-icon { fill:currentColor; }
#replay { width:36px; height:36px; border-radius:50%; color:#7a828e; }
#replay:hover { background:#f1f2f4; color:#252a32; }
#replay svg { fill:none; stroke:currentColor; stroke-width:1.6; }
button:focus-visible,input:focus-visible,.diagram-scroll:focus-visible { outline:3px solid #002fa74d; outline-offset:4px; }
.timeline { display:flex; align-items:center; flex:1; min-width:40px; padding:0 3px; }
input[type=range] { --progress:0%; appearance:none; -webkit-appearance:none; width:100%; height:4px; margin:0; border-radius:4px; background:linear-gradient(to right,#737e8c var(--progress),#e8ebee var(--progress)); cursor:pointer; }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #737e8c; box-shadow:0 0 0 3px #ffffff; transition:box-shadow .15s; }
input[type=range]:hover::-webkit-slider-thumb { box-shadow:0 0 0 5px #737e8c18; }
input[type=range]::-moz-range-thumb { width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid #737e8c; }
output { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:72px; text-align:right; }
.hint { font-size:11px; color:var(--muted); line-height:1.6; margin:3px 0 0; }
.hint span { color:#9399a2; margin-left:7px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:600px) {
 main { padding:23px 16px; }
 #diagram { min-width:660px; }
 h1 { margin-bottom:21px; }
 .controls { flex-wrap:wrap; gap:8px; }
 .timeline { order:4; flex-basis:100%; }
 output { margin-left:auto; }
}

.embedded main { max-width:none; padding:0; }
.embedded .controls { padding:12px 0 8px; }
@media(max-width:600px) {
 .embedded .controls { flex-wrap:nowrap; gap:10px; }
 .embedded .timeline { order:initial; flex-basis:auto; }
 .embedded output { min-width:68px; margin:0; }
}

.embedded #diagram { min-width:0; }