:root{color-scheme:dark;--bg:#0c171b;--ink:#d9e4dd;--muted:#9eadab;--home:#dbaa65;--rack:#85c8d7}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);font-family:ui-sans-serif,system-ui,sans-serif;color:var(--ink)}main{position:relative;width:100%;height:100%;min-height:350px;overflow:hidden}#surface{position:absolute;inset:0;outline:none}#surface:focus-visible{outline:2px solid #f2e2bd;outline-offset:-5px}svg{display:block;width:100%;height:100%;touch-action:pan-y}.key{position:absolute;top:24px;left:0;right:0;display:flex;justify-content:space-around;pointer-events:none;font-size:12px;letter-spacing:.04em}.home-key{color:var(--home)}.rack-key{color:var(--rack)}button{font:inherit;cursor:pointer;color:var(--ink);background:#0c171be8;border:1px solid #91a7a754}#about{position:absolute;right:15px;top:12px;width:36px;height:36px;border-radius:50%;font-size:20px}button:focus-visible,a:focus-visible{outline:2px solid #f2e2bd;outline-offset:3px}footer{position:absolute;bottom:18px;left:24px;right:24px;pointer-events:none;text-align:center;font-size:12px;line-height:1.45}footer p{margin:0}.caption{color:var(--muted);font-size:11px;margin-top:5px}#reading{font-variant-numeric:tabular-nums}#reading .h{color:var(--home)}#reading .d{color:var(--rack)}dialog{max-width:410px;width:calc(100% - 36px);color:#27352f;background:#eee9de;border:1px solid #83897f;border-radius:3px;padding:25px;line-height:1.55;font-size:14px}dialog::backdrop{background:#04090cbf}h1{font-weight:550;font-size:21px;margin:0 26px 15px 0}dialog p{margin:0 0 14px}#close{position:absolute;right:13px;top:12px;border:0;background:transparent;color:#27352f;font-size:25px;line-height:1}nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:12px}nav a{color:inherit;text-underline-offset:4px}.trace{transition:opacity .18s}.signal{animation:current 10s linear infinite;stroke-dasharray:1 29;opacity:.4}@keyframes current{to{stroke-dashoffset:-120}}@media(prefers-reduced-motion:reduce){.signal{animation:none;display:none}.trace{transition:none}}@media(max-width:450px){.key{top:22px;font-size:11px;padding:0 25px;justify-content:space-between}#about{right:9px;top:9px;width:30px;height:30px;font-size:17px}.rack-key{margin-right:22px}footer{left:12px;right:12px;bottom:14px;font-size:11px}.caption{font-size:10px;max-width:270px;margin:5px auto 0}}@media(max-height:450px){.key{top:14px}footer{bottom:9px}.caption{margin-top:1px}#about{top:7px}}
