:root{--ink:#152b36;--muted:#536977;--blue:#244bd8;--line:#d7e1e9;--ice:#eff4fa;--green:#206544;--amber:#8a4d08;--red:#a42c32}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.45 system-ui,sans-serif}
p{margin:0}
button,input,select{font:inherit}
:focus-visible{outline:3px solid #f1ae37;outline-offset:2px}
.embed{width:min(100%,440px);margin-inline:auto;padding:10px 12px 8px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
[hidden]{display:none!important}
h1{margin:0 0 8px;font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
form{margin:0}
label{display:block;margin:6px 0 0;font-size:13px;font-weight:600}
input,select{display:block;width:100%;margin-top:3px;min-height:40px;padding:7px 10px;border:1px solid #cbd7e0;border-radius:7px;background:#fff;color:var(--ink);font-size:16px;font-weight:400}
.hint,.caveat,.credit{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
output{display:block;margin:8px 0 0;color:var(--blue);font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
#e-detail{display:block;margin:4px 0 0;color:var(--ink);font-size:13px;font-weight:400;line-height:1.4}
.meter{display:block;width:100%;height:22px;margin-top:8px}
.seg-ok{fill:#9dceb4}.seg-mid{fill:#e7c585}.seg-over{fill:#e2a2a4}.marker{fill:var(--ink)}
.bands{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.95fr);gap:6px;margin-top:6px}
.band{min-width:0;margin:0;padding:6px;border-radius:6px;background:var(--ice);color:var(--muted);font-size:11px;line-height:1.3;font-weight:600}
.band small{display:block;font-weight:400}
.band[data-band=within_100][aria-current=true]{background:#e0f0e7;color:var(--green)}
.band[data-band=over_100_to_160][aria-current=true]{background:#fff1d9;color:var(--amber)}
.band[data-band=over_160][aria-current=true]{background:#fbe6e6;color:var(--red)}
.caveat{margin-top:10px}
.credit a{color:var(--blue)}
@media(max-width:280px){
  .embed{padding:10px}
  output{font-size:24px}
  .bands{grid-template-columns:1fr}
}