:root{color-scheme:dark;--bg:#101d26;--panel:#192b36;--text:#e6eceb;--muted:#adbdc4;--lime:#d8f48b;--line:#3b505b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,sans-serif}header,main{max-width:1240px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:1px}a{color:var(--lime);text-underline-offset:4px}h1{font-size:clamp(44px,7vw,82px);line-height:1.03;letter-spacing:-3px;margin:20px 0}h2{line-height:1.2;font-size:26px}.intro{max-width:750px;padding:30px 0}.intro>p:last-child{max-width:640px;color:var(--muted)}.eyebrow{color:var(--lime);font-size:12px;letter-spacing:2px}.lab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:24px}.road-panel{background:#0b151c;border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start}.road-head{padding:15px 20px;display:flex;justify-content:space-between;font-size:13px}#road{display:block;width:100%;height:690px}.legend{font-size:12px;color:var(--muted);padding:0 16px}.controls{background:var(--panel);padding:24px;border-radius:14px}button,select{font:inherit;background:var(--lime);color:#17251f;border:0;border-radius:6px;padding:11px 15px;cursor:pointer;min-height:44px}button:disabled{opacity:.4;cursor:default}button:hover{filter:brightness(1.1)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ffbc85;outline-offset:4px}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button:not(:first-child),#clear{background:#324a57;color:var(--text)}label{display:block;font-size:14px;margin:18px 0}label span{display:flex;justify-content:space-between;gap:8px}output{color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap}input[type=range]{display:block;width:100%;accent-color:var(--lime);height:26px}summary{cursor:pointer;color:var(--lime);padding:10px 0}.hint,.explain p{color:var(--muted);font-size:14px}#status{border-left:3px solid var(--lime);padding-left:12px;font-size:14px}#distances{font-size:13px;color:var(--lime)}dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:0}dt{color:var(--muted);font-size:13px}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.results{margin-top:32px;padding:28px;background:var(--panel);border-radius:14px}.results p{max-width:780px;color:var(--muted)}#chart{width:100%;height:320px;margin-top:24px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}caption{text-align:left;color:var(--muted);padding:12px 0}th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}.explain{max-width:850px;padding:35px 0} @media(max-width:760px){header,main{padding:16px}header span{font-size:10px}.lab{grid-template-columns:1fr}#road{height:560px}.controls,.results{padding:18px}h1{letter-spacing:-2px}.road-head{font-size:12px}}