:root{color-scheme:light;--paper:#f4f1ea;--ink:#16181d;--blue:#2d6fd1;--orange:#e8901b}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Calibri,Carlito,Arial,sans-serif}body{margin:0}main{max-width:1080px;margin:auto;padding:24px}h1{font-size:30px;line-height:1.15;margin:8px 0 12px}header p{font-size:18px;line-height:1.5;margin:0 0 24px}.eyebrow{font:12px Consolas,monospace;letter-spacing:.15em;color:var(--blue)}.layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.layout[hidden]{display:none}label{display:block;font-size:18px;font-weight:bold}output{display:block;font:25px Consolas,monospace;margin:10px 0}input[type=range]{width:100%;min-height:42px;accent-color:var(--blue);margin:0;cursor:pointer}.ends,.ticks{display:flex;justify-content:space-between;font:13px Consolas,monospace}.switch{display:grid;gap:8px;margin:24px 0}button{font:16px Calibri,Arial,sans-serif;border:1px solid #8f8c85;border-radius:8px;min-height:48px;padding:10px 15px;background:transparent;color:var(--ink);cursor:pointer}button:hover{border-color:var(--blue)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.result{border-top:2px solid var(--ink);padding-top:18px}.result span{font-size:17px}.result strong{display:block;font:42px Consolas,monospace;margin:8px 0}.result small{font-size:21px}.result p{font-size:15px}.accent{background:#f2c200;border-color:#f2c200;width:100%;font-weight:bold}.hint,.map-note,.caption,footer,details p{font-size:15px;line-height:1.45;color:#4d4c47}.hint{margin:16px 0}.key{font-size:16px;line-height:1.9}.dot{display:inline-block;width:11px;height:11px;margin-right:9px}.front{background:var(--orange)}.rear{background:#d5462f}.legend strong{font-size:15px;font-weight:normal}.bar{height:12px;background:linear-gradient(90deg,var(--blue),#f4f1ea);border:1px solid #b9b8b1;margin:9px 0 5px}.map-panel canvas{display:block;width:100%;height:auto;max-height:650px;object-fit:contain}.map-note{margin:4px 0 0}h2{font-size:22px;margin:28px 0 12px}.graph-key{font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.line{display:inline-block;width:25px;height:3px}.blue{background:var(--blue)}.orange{background:var(--orange);margin-left:12px}#graph{display:block;width:100%;height:auto;margin-top:6px}footer{border-top:1px solid #c5c2b9;padding-top:16px;margin-top:24px}details{margin-top:18px;border-top:1px solid #c5c2b9;padding-top:14px}summary{cursor:pointer;font-size:16px}dl{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}dt,dd{margin:0;font-size:15px}dd{text-align:right;font-family:Consolas,monospace}@media(max-width:620px){main{padding:18px 12px}h1{font-size:25px}.layout{grid-template-columns:1fr;gap:22px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.controls label,.controls input,.controls .ends,.controls .switch,.controls .hint,.controls .key,.controls details{grid-column:1/-1}.result{grid-column:1/-1}.result strong{font-size:36px}.accent{grid-column:1/-1}.switch{grid-template-columns:1fr 1fr;margin:16px 0}.switch button{font-size:14px;padding:9px 7px}.map-panel{border-top:1px solid #c5c2b9;padding-top:20px}.map-panel canvas{max-height:none}.graph-key{font-size:12px}.graph-key .orange{margin-left:0}.caption{font-size:14px}#graph{height:260px;object-fit:fill}}