@font-face {
  font-family: Inter;
  src: url("inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper:#f7f7f2; --ink:#1d2b29; --muted:#50615d; --line:#cdd5ca;
  --accent:#245e4a; --tint:#e9eee3; --dark:#163d32; --soft:#c3ddc7; --mark:#b7da6c;
  font-family:Inter,Arial,sans-serif; color:var(--ink); background:var(--paper);
}
body.pima { --accent:#654188; --tint:#eee9f3; --dark:#392c50; --soft:#ddd0ed; --mark:#d6acef; --line:#d6d1db; }
* {box-sizing:border-box}
body {margin:0; line-height:1.52}
.wrap {width:min(1100px,calc(100% - 54px));margin-inline:auto}
.top {border-bottom:1px solid var(--line)}
.top .wrap {min-height:63px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.name {font-size:16px;font-weight:650;letter-spacing:-.045em;color:var(--ink);display:flex;align-items:center;gap:11px}
.name::before {content:"";display:inline-block;width:14px;height:14px;border:3px solid var(--accent);transform:rotate(-18deg);border-radius:3px}
a {color:var(--accent);text-underline-offset:4px}
nav {display:flex;gap:21px} nav a {font-size:13px;font-weight:540;text-decoration:none} nav a:hover {text-decoration:underline}
main {padding:46px 0 42px}
.hero {max-width:850px;margin:0 0 30px}
.kicker,.res-label,.metric dt {font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.035em}
.kicker,.res-label {text-transform:uppercase}
.kicker {color:var(--accent)}
h1,h2,h3,p,dl,dd {margin:0}
h1 {font-size:clamp(39px,6vw,70px);line-height:1.05;letter-spacing:-.069em;margin:9px 0 12px;font-weight:565}
.hero p {color:var(--muted);max-width:710px;font-size:clamp(16px,1.8vw,19px);line-height:1.5;letter-spacing:-.022em}
.workspace {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
.panel,.output,.evaluation,.methods {border-radius:12px;border:1px solid var(--line);padding:clamp(20px,2.7vw,32px)}
.panel {background:#fff}
h2 {font-size:clamp(22px,2.6vw,30px);line-height:1.16;letter-spacing:-.055em;font-weight:600}
.panel-line {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}
button, select, input {font-family:inherit; font-size:15px}
button {cursor:pointer}
.reset {border:1px solid var(--line);background:transparent;color:var(--accent);border-radius:5px;padding:6px 10px;font-size:12px;font-weight:600}
.reset:hover,.reset:focus-visible {background:var(--tint)}
.fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 16px}
.field {display:flex;flex-direction:column;gap:5px}
.field.wide {grid-column:1/-1}
.field label,.range-line label {font-size:13px;font-weight:585}
select,input[type=number] {display:block; width:100%;min-width:0;border:1px solid #aeb9b0;border-radius:5px;height:41px;color:var(--ink);background:var(--paper);padding:8px 10px;font-variant-numeric:tabular-nums}
input::placeholder {color:#65706c;font-size:13px}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
.notes {display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:15px}
.field-help {color:var(--muted);font-size:12px;line-height:1.45}
.sidebar {display:grid;gap:15px}
.output {color:white;background:var(--dark);border-color:var(--dark)}
.res-label {color:var(--soft)}
.big-score {display:block;font-size:clamp(40px,6vw,68px);line-height:1.1;font-weight:520;letter-spacing:-.072em;margin:9px 0 11px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-description {font-size:14px;color:#ecf1eb;margin-top:8px;max-width:45ch}
.bar {height:8px;overflow:hidden;background:#ffffff30;border-radius:99px}
.bar i {display:block;background:var(--mark);height:100%;width:0;transition:width .18s ease}
.range-line {display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
input[type=range] {accent-color:var(--accent);width:100%;margin:5px 0 0}
.evaluation {background:var(--tint)}
.evaluation h2,.methods>summary {font-size:19px;font-weight:600;letter-spacing:-.03em}
.metrics {display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.metric dt {color:var(--muted);font-weight:510}
.metric dd {font-size:24px;font-weight:590;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.small {font-size:12px;color:var(--muted);line-height:1.48;margin-top:9px}
.methods {margin-top:18px;padding:16px 22px;background:white}
.methods>summary {cursor:pointer}
.methods p {max-width:86ch;color:var(--muted);font-size:14px;margin:10px 0}
.methods a {font-size:13px;margin-right:16px}
.score-rows {display:grid;gap:10px;margin-top:16px;border-top:1px solid #ffffff30;padding-top:14px}
.score-line {font-size:12px;display:flex;justify-content:space-between;margin-bottom:4px;color:#f3eef7}
.score-line output {font-variant-numeric:tabular-nums}
footer {padding:0 0 35px;font-size:12px;color:var(--muted)}
[hidden] {display:none!important}
@media(max-width:775px){.workspace{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding-top:30px}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.sidebar{grid-template-columns:1fr}.fields{gap:12px}.top .wrap{min-height:54px}nav{gap:12px}.hero{margin-bottom:21px}}
@media(max-width:355px){.fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.top .name {text-decoration:none;}
@media(max-width:470px){.top .wrap{gap:8px;flex-wrap:wrap;padding-block:8px}.top nav{gap:12px;flex-wrap:wrap}}