:root{
  --grid:#dde4ec; --bg:#f1f4f8; --card:#fdfdfe; --ink:#101c2e; --muted:#4b5a70;
  --hot:#d63a22; --teal:#0b6b63; --rule:#c9d2dd;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:1.0625rem/1.7 var(--sans);background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px}
a{color:var(--teal);text-underline-offset:.15em;text-decoration-thickness:2px}
a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;z-index:5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:56rem;margin:0 auto;padding:0 1rem 2rem}
.site{margin:0;padding:1.25rem 0 1rem;font:700 .95rem var(--mono);letter-spacing:.04em;text-transform:uppercase}
.card{background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:1.5rem}
@media(min-width:40rem){.card{padding:2.25rem 2.5rem}}

.hero{margin-bottom:2rem}
h1{margin:0 0 1rem;font:800 clamp(2rem,6vw,3.4rem)/1.05 var(--sans);letter-spacing:-.025em;max-width:14em}
.lead{margin:0 0 1.75rem;max-width:40rem;color:var(--muted);font-size:1.15rem}

.dial{border-top:2px solid var(--ink);padding-top:1.25rem}
.readout{display:flex;align-items:baseline;gap:.75rem}
.dr{font:700 1.25rem var(--mono);color:var(--muted)}
output{font:800 clamp(4rem,16vw,7rem)/1 var(--mono);color:var(--hot);letter-spacing:-.04em}
.band{margin:.25rem 0 1rem;min-height:3.4em;font-weight:600}
input[type=range]{width:100%;accent-color:var(--hot);height:2rem;margin:0;cursor:pointer}
.ticks{display:flex;justify-content:space-between;font:.8rem var(--mono);color:var(--muted);padding:0 .35rem}
.hint{margin:.75rem 0 0;font-size:.9rem;color:var(--muted)}

.prose section{padding:1.5rem 0;border-top:1px solid var(--rule)}
.prose section:first-child{border-top:0;padding-top:0}
.prose section:last-child{padding-bottom:0}
h2{margin:0 0 .75rem;font:800 1.4rem/1.25 var(--sans);letter-spacing:-.01em}
.n{display:inline-block;margin-right:.6rem;padding:.05rem .45rem;background:var(--ink);color:#fff;font:700 .85rem var(--mono);vertical-align:.15em}
.prose p{margin:0 0 1rem;max-width:40rem}

.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.98rem}
th,td{padding:.6rem .75rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
thead th{font:700 .8rem var(--mono);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ink)}
tbody th{font:700 1rem var(--mono);white-space:nowrap}

details{border-bottom:1px solid var(--rule);padding:.6rem 0}
summary{cursor:pointer;font-weight:700}
details p{margin:.5rem 0 .25rem}

.foot{padding:1.75rem 0 1rem;color:var(--muted);font-size:.88rem}
.foot p{margin:0;max-width:40rem}