:root{--bg:#0e1115;--panel:#14181ee0;--line:#2a313b;--text:#e3e7ec;--muted:#8d97a4;--accent:#f2c230;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}.app{width:100vw;height:100vh;position:relative}canvas.city{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;padding:10px 12px;font-size:13px;position:absolute}.top-band{pointer-events:none;grid-template-columns:326px minmax(0,1fr);align-items:start;gap:8px 16px;display:grid;position:absolute;top:16px;left:16px;right:272px}.top-band>.panel{pointer-events:auto;box-sizing:border-box;max-width:100%;position:static;transform:none}.top-band>.controls{grid-area:1/1}.top-band>.scenarios{grid-area:1/2;justify-self:center}.top-band>.confirm{grid-area:2/2;justify-self:center}.top-band>.error{grid-area:3/2;justify-self:center}.top-band>.diagnostics{grid-area:2/1/span 3}@media (width<=959px){.top-band{grid-template-columns:326px;width:326px;right:auto}.top-band>.panel{grid-area:auto/1;justify-self:stretch}}.controls{gap:8px;width:100%;display:grid}.diag-toggle{margin-left:auto;padding:2px 9px;font-size:15px;line-height:1}.diag-toggle[aria-expanded=true]{outline:2px solid var(--text,#e6e6e6);outline-offset:-2px}.stress{white-space:nowrap;border:1px dashed;border-radius:6px;padding:1px 6px;font-size:12px}.diagnostics{width:100%;font-size:12px}.diagnostics h2{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-size:12px;font-weight:600}.diagnostics dl{gap:3px;margin:0;display:grid}.diag-row{justify-content:space-between;gap:12px;display:flex}.diag-row dt{color:var(--muted)}.diag-row dd{font-variant-numeric:tabular-nums;margin:0}.starting{font-size:15px;top:50%;left:50%;transform:translate(-50%,-50%)}.controls .row{align-items:center;gap:8px;display:flex}button,select{font:inherit;color:var(--text);cursor:pointer;background:#1d232b;border:1px solid #3a434f;border-radius:7px;padding:6px 10px}button:disabled,select:disabled{opacity:.45;cursor:not-allowed;border-style:dotted}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{min-width:64px}.speed{color:var(--muted);font-variant-numeric:tabular-nums}.behind:not(:empty){color:#ffd27a;font-weight:600}button.bridge{justify-content:center;align-items:center;gap:8px;font-weight:600;display:flex}button.bridge.closed{border-color:var(--accent)}.barrier-icon{background:repeating-linear-gradient(45deg, var(--accent) 0 4px, #111 4px 8px);border-radius:2px;width:22px;height:10px}.metrics{gap:18px;display:flex;bottom:50px;left:16px}.metric{gap:2px;display:grid}.metric .label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.metric .value{font-variant-numeric:tabular-nums;font-size:16px}.metric.simtime .value{color:var(--accent)}.mono{font-family:ui-monospace,SF Mono,Menlo,monospace}.side{gap:8px;width:240px;display:grid;position:absolute;top:16px;right:16px}.side .panel{position:static}.vehicle h2{margin:0 0 6px;font-size:14px;line-height:1.3}.vehicle .state{margin:0 0 6px}.vehicle .state-icon{text-align:center;width:1em;display:inline-block}.vehicle dl{grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px;display:grid}.vehicle dt{color:var(--muted)}.vehicle dd{margin:0}.vehicle .blocked{color:#ffd27a;margin:0 0 8px}.selection h2{margin:0 0 6px;font-size:15px}.selection dl{grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px;display:grid}.selection dt{color:var(--muted)}.selection dd{margin:0}.labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.zone{color:#c7d0da;white-space:nowrap;letter-spacing:.04em;text-shadow:0 1px 3px #000;font-size:12px;position:absolute;transform:translate(-50%,-50%)}.zone-icon{opacity:.85}.legend{align-items:center;gap:10px;padding:8px 10px;font-size:11.5px;display:flex;bottom:50px;right:16px}.legend-toggle{align-self:stretch;font-weight:600}.legend ul{grid-template-columns:repeat(3,auto);gap:4px 10px;margin:0;padding:0;list-style:none;display:grid}.legend li{align-items:center;gap:8px;display:flex}.error{color:#ffd27a;align-items:center;gap:10px;max-width:420px;display:flex}@media (width<=620px){.side{top:150px;left:16px;right:auto}}.timeline{box-sizing:border-box;align-items:center;gap:10px;height:32px;padding:3px 10px;font-size:11.5px;display:flex;bottom:10px;left:16px;right:16px}.timeline-buttons{gap:4px;display:flex}.timeline-buttons button{white-space:nowrap;padding:2px 7px;font-size:11.5px}.timeline-buttons .short{display:none}.timeline-label{white-space:nowrap;color:var(--muted)}.timeline-caption{text-transform:uppercase;letter-spacing:.04em;font-size:10px}.timeline-track{border:1px solid var(--line);cursor:pointer;touch-action:none;border-radius:4px;flex:1;height:18px;position:relative}.timeline-track:focus-visible{outline:2px solid var(--text,#e6e6e6);outline-offset:1px}.timeline-retained{background:repeating-linear-gradient(45deg,#ffffff29 0 3px,#0000 3px 7px);position:absolute;inset:3px 0}.timeline-playhead{background:#f4f4f4;width:3px;margin-left:-1.5px;position:absolute;top:-3px;bottom:-3px;box-shadow:0 0 0 1px #000}.timeline-head{border-right:3px double #f4f4f4;width:0;position:absolute;top:0;bottom:0;right:0}.timeline-branch{white-space:nowrap;pointer-events:none;text-shadow:0 0 2px #000,0 0 2px #000;font-size:10.5px;line-height:16px;position:absolute;top:0;transform:translate(-.45em)}.timeline-branch.to-left{transform:translate(calc(.45em - 100%))}.timeline-memory{white-space:nowrap;color:var(--muted)}.scenarios{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:6px 8px;display:flex}.scenarios .row{gap:4px;display:flex}.scenario-label{border:2px solid;margin:0;padding:3px 8px;font-weight:600}.viewing-b .scenario-label{background:repeating-linear-gradient(135deg,#ffffff1a 0 4px,#0000 4px 9px);border-style:dashed}.scenarios button[aria-pressed=true]{outline:2px solid var(--text,#e6e6e6);outline-offset:-2px;font-weight:600}.confirm{gap:6px;width:360px;display:grid}.confirm p{margin:0}.confirm .hint{color:var(--muted);font-size:12px}.app.comparing canvas.city{width:50%}.app.comparing canvas.city-b{box-sizing:border-box;border-left:2px solid #e6e6e6;left:50%}.app.comparing .labels{right:50%;overflow:hidden}.app.comparing .labels.labels-b{left:50%;right:0}.side-label{background:var(--panel);pointer-events:none;border:2px solid #e6e6e6;padding:2px 8px;font-size:12px;font-weight:600;position:absolute;bottom:50px}.side-label.side-a{border-style:solid;left:12px}.side-label.side-b{background-image:repeating-linear-gradient(135deg,#ffffff1a 0 4px,#0000 4px 9px);border-style:dashed;right:12px}.comparison{font-size:12px;bottom:50px;left:50%;transform:translate(-50%)}.comparison-when{color:var(--muted);gap:16px;margin:0 0 4px;display:flex}.comparison table{border-collapse:collapse;font-variant-numeric:tabular-nums}.comparison th,.comparison td{text-align:right;padding:1px 10px}.comparison th[scope=row]{text-align:left;font-weight:500}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=1259px){.legend{bottom:112px}}@media (width>=1000px){.app.comparing .side{inset:auto auto 74px 16px}}@media (width<=959px){.timeline{flex-wrap:wrap;row-gap:4px;height:auto}.timeline-track{flex:1 0 100%;order:10}.timeline-buttons .long,.timeline-memory-note{display:none}.timeline-buttons .short{display:inline}.metrics,.comparison,.side-label{bottom:76px}.legend{bottom:138px}}.guide{gap:4px;min-width:0;padding:6px 10px;font-size:12px;display:grid}.guide-head{align-items:center;gap:8px;display:flex}.guide-now{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.guide-hide{padding:0 7px;line-height:1.4}.guide-steps{gap:6px;margin:0;padding:0;list-style:none;display:flex}.guide-steps li{text-align:center;border:1px dashed var(--line);min-width:26px;color:var(--muted);font-variant-numeric:tabular-nums;border-radius:4px;padding:1px 4px}.guide-steps li.done{color:var(--text,#e6e6e6);border-style:solid}.guide-steps li.now{border:2px solid var(--text,#e6e6e6);color:var(--text,#e6e6e6)}.guide-hint{color:var(--muted);margin:0;font-size:11px}.guide-toggle{padding:2px 8px;font-size:14px;line-height:1}.guide-toggle[aria-pressed=true]{outline:2px solid var(--text,#e6e6e6);outline-offset:-2px}.guide-toggle[aria-pressed=true]:focus-visible,.diag-toggle[aria-expanded=true]:focus-visible,.scenarios button[aria-pressed=true]:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.error.fatal{z-index:5;max-width:460px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}
