:root{color-scheme:light;--bg:#faf9f6;--panel:#fff;--ink:#202624;--muted:#626c66;--line:#d9dfd9;--road:#e7ebe7;--accent:#236d58;--red:#b13d37;--yellow:#a76c09;--green:#237b54;--soft:#eff4ef;font-family:system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#131916;--panel:#1b231e;--ink:#e8ede7;--muted:#a2b0a4;--line:#3c4a40;--road:#2b3830;--accent:#95cdb1;--red:#ff8f86;--yellow:#ecc06d;--green:#86d3a5;--soft:#25342b}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}main{max-width:1040px;margin:auto;padding:30px}h1,h2,p{margin:0}h1{font:clamp(28px,4.7vw,44px)/1.15 Georgia,serif;letter-spacing:-.035em;margin:10px 0 14px}h2{font:28px/1.15 Georgia,serif;letter-spacing:-.02em}.intro>p:last-child{color:var(--muted);line-height:1.6;max-width:640px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:650;color:var(--accent)}button,input{font:inherit}button{cursor:pointer;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:10px 14px;min-height:42px}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.mode-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:25px 0 20px}.mode-picker button{text-align:left;font-size:13px;line-height:1.4}.mode-picker span{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em;margin-bottom:4px}.mode-picker button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 -2px var(--accent)}.experiment{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}.scene{border-right:1px solid var(--line);padding:17px 18px}.scene-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.scene svg{width:100%;display:block;margin-top:8px}.road{fill:var(--road)}.lane{stroke:var(--muted);stroke-width:1;stroke-dasharray:6 7;opacity:.4}.route{fill:none;stroke:var(--green);stroke-width:8;opacity:.06;stroke-linecap:round}.route.active{opacity:.7;stroke-dasharray:10 8}.route.caution{opacity:.45;stroke:var(--yellow);stroke-dasharray:4 8}.stop-line{stroke:var(--ink);stroke-width:4}.island{fill:var(--panel);stroke:var(--line);stroke-width:1;opacity:.93}.center-label{fill:var(--muted);font:9px system-ui;letter-spacing:.1em}.road-label{fill:var(--muted);font:10px system-ui;letter-spacing:.08em}.car{fill:var(--ink)}.car .window{fill:var(--bg)}.signal rect{fill:var(--ink)}.signal circle{fill:var(--bg);opacity:.15}.signal circle.lit{opacity:1}.signal circle.red{fill:var(--red)}.signal circle.yellow{fill:var(--yellow)}.signal circle.green{fill:var(--green)}.signal-readout{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:8px 0 18px}.signal-readout strong{margin-left:5px;color:var(--ink)}.transport{display:flex;gap:8px;flex-wrap:wrap}.transport button{font-size:12px}.transport #play,#check{color:var(--panel);background:var(--accent);border-color:var(--accent)}.quiet{background:transparent}.explanation{padding:24px}.explanation h2{margin:9px 0 12px}.explanation>p:not(.eyebrow){font-size:13px;line-height:1.65;color:var(--muted)}.verdict{padding:12px 0;margin:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;font-weight:550;line-height:1.65}.verdict.bad{color:var(--red)}.verdict.good{color:var(--accent)}.timing label{display:flex;justify-content:space-between;font-size:11px;margin:15px 0 5px}.timing output{font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.small{font-size:11px!important;line-height:1.65;color:var(--muted)}.demand{font-size:12px;line-height:1.8}.demand input{accent-color:var(--accent)}.check-panel{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:23px;background:var(--panel)}.check-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.check-heading h2{font-size:24px;margin-top:6px}.check-heading button{font-size:12px;white-space:nowrap}#check-result{margin:16px 0;font-size:12px;line-height:1.7}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.result{border:1px solid var(--line);padding:12px;border-radius:7px}.result span{display:block;color:var(--muted);font-size:10px}.result strong{display:block;margin-top:5px;font-size:14px}.trace{overflow-wrap:anywhere;color:var(--muted)}details{font-size:11px;line-height:1.65;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-weight:600}details p{margin-top:9px;max-width:800px;color:var(--muted)}footer{font-size:10px;color:var(--muted);margin:18px 0 0}a{color:var(--accent)}[hidden]{display:none!important}@media(max-width:650px){main{padding:20px 14px}.mode-picker{grid-template-columns:repeat(2,1fr);gap:7px}.experiment{grid-template-columns:1fr}.scene{border-right:0;border-bottom:1px solid var(--line)}.scene svg{max-height:300px}.explanation{padding:21px}.check-panel{padding:18px}.check-heading{align-items:flex-start;flex-direction:column}.results{grid-template-columns:1fr}.result{display:flex;justify-content:space-between;gap:10px;align-items:center}.result strong{margin:0;font-size:12px}}
:root[data-theme=light]{color-scheme:light;--bg:#faf9f6;--panel:#fff;--ink:#202624;--muted:#626c66;--line:#d9dfd9;--road:#e7ebe7;--accent:#236d58;--red:#b13d37;--yellow:#a76c09;--green:#237b54;--soft:#eff4ef}
:root[data-theme=dark]{color-scheme:dark;--bg:#131916;--panel:#1b231e;--ink:#e8ede7;--muted:#a2b0a4;--line:#3c4a40;--road:#2b3830;--accent:#95cdb1;--red:#ff8f86;--yellow:#ecc06d;--green:#86d3a5;--soft:#25342b}