:root { color-scheme:light; font:16px/1.5 system-ui,-apple-system,sans-serif; color:#20252a; background:#fff; }
* { box-sizing:border-box; }
body { margin:0; padding:16px; }
main { max-width:600px; margin:auto; }
.scene { display:flex; justify-content:center; }
svg { display:block; width:100%; height:auto; max-width:540px; }
.target-bay { fill:#be1237; fill-opacity:.08; stroke:#be1237; stroke-width:3; stroke-dasharray:10 8; opacity:.85; }
.guide { fill:none; stroke:#fff; stroke-width:3; stroke-dasharray:7 10; opacity:.45; }
.trail { fill:none; stroke:#be1237; stroke-width:5; stroke-linecap:round; opacity:.8; }
.controls { margin-top:16px; }
label { display:block; font-weight:600; }
input[type=range] { display:block; width:100%; margin:4px 0; min-height:44px; accent-color:#be1237; cursor:pointer; }
input:focus-visible { outline:3px solid #245bba; outline-offset:3px; border-radius:4px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; list-style:none; padding:0; margin:0 0 16px; font-size:14px; }
.steps li { border-top:3px solid #dfe2e5; padding-top:8px; color:#59616a; }
.steps li[aria-current] { border-color:#be1237; color:#9f1030; font-weight:700; }
#phase { margin:0 0 4px; font-weight:650; }
#detail { margin:0; min-height:3em; color:#59616a; font-size:14px; }
@media(max-width:420px) { body { padding:12px; } svg { height:auto; } .steps { gap:6px; font-size:12px; } #detail { min-height:4.5em; } }