/* Braces Math — tokens. Palette: violet (orthodontic elastics), enamel white, mint. */
:root{
  --bg:#F6F5F9; --surface:#FFFFFF; --ink:#1D1830; --muted:#5F5A72; --line:#DEDAE8; --line-strong:#B4AECA;
  --accent:#5B3E96; --accent-ink:#FFFFFF; --accent-soft:#E9E2F6;
  --cool:#2E8C7E; --cool-soft:#DCF1EC; --ok:#2E7A52; --ok-soft:#DDF0E4; --warm:#B6701A; --warm-soft:#F8E9D4; --bad:#A63A2C; --bad-soft:#F7E0DA;
  --r:10px; --max:1080px;
  --sans:Inter,"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace;
  --display:"Barlow Condensed","Avenir Next Condensed","Arial Narrow",var(--sans);
  --hero-art-bg:#ECE7F6; --lip:#E7A3A8; --gum:#F1B9BE; --enamel:#FFFDF8; --metal:#9AA3B5;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#13111B; --surface:#1B1826; --ink:#ECE9F5; --muted:#A9A3BD; --line:#2A2639; --line-strong:#4A4462;
  --accent:#B6A0EA; --accent-ink:#1A1230; --accent-soft:#2A2244; --cool:#7CCFC2; --cool-soft:#173330;
  --ok:#7CC79A; --ok-soft:#1A3326; --warm:#F0B060; --warm-soft:#3B2A14; --bad:#F09A8E; --bad-soft:#3E1F1C;
  --hero-art-bg:#1E1A2C; --lip:#B9727A; --gum:#C48890; --enamel:#EDEAF3; --metal:#7E879A; color-scheme:dark;
}}
.brand-mark{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--enamel) 0 35%,var(--accent) 36%)}
.hero{background:linear-gradient(180deg,var(--surface),var(--bg))}
.hero-art{background:linear-gradient(180deg,var(--cool-soft),var(--hero-art-bg))}
.art .art-lip{fill:var(--lip);stroke:var(--ink);stroke-width:3}.art .art-gum{fill:var(--gum)}.art .art-tooth{fill:var(--enamel);stroke:var(--ink);stroke-width:2}
.art .art-bracket{fill:var(--metal);stroke:var(--ink);stroke-width:1.5}.art .art-wire{stroke:var(--accent);stroke-width:4;fill:none}
.art .art-card{fill:var(--surface);stroke:var(--ink);stroke-width:3}.art .art-card-band{fill:var(--accent)}.art .art-bar{fill:var(--cool)}.art .art-bar2{fill:var(--warm)}
.tool{border-top:5px solid var(--accent)}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
.out div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}.out b{display:block;font:700 1.45rem/1.15 var(--display)}.out span{font-size:.82rem;color:var(--muted)}
.verdict{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:6px;margin:10px 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 6px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;border-left:4px solid var(--accent)}
.kpi .k{font:600 .76rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.kpi .v{font:700 1.45rem/1.15 var(--display);color:var(--ink)}.kpi .s{font-size:.8rem;color:var(--muted)}
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:14px 0}
.state-grid a{display:flex;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink);font-size:.94rem;min-height:40px;align-items:center}
.state-grid a:hover{border-color:var(--accent)}.state-grid small{color:var(--muted);font-variant-numeric:tabular-nums}
.sources{font-size:.84rem;color:var(--muted);border-left:3px solid var(--accent);padding:6px 12px;margin:14px 0}.sources a{color:var(--muted)}
.note{border-left:4px solid var(--warm);background:var(--warm-soft);padding:10px 14px;border-radius:6px;margin:12px 0;font-size:.95rem}
.band{margin:30px -16px;padding:26px 16px;background:var(--accent);color:#F1ECFB;border-top:6px solid var(--cool)}
.band h2{color:#fff;margin-top:0}.band a{color:#CFF3EC}.band .cards .card{background:rgba(255,255,255,.08);border-color:transparent;color:#F1ECFB}.band .card span{color:#DCD3F0}
.up{color:var(--ok)}.down{color:var(--bad)}
input:not([type]){width:100%;min-height:44px;padding:8px 10px;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r)}
.hero-copy h1,.hero-copy .lede{overflow-wrap:anywhere}.hero-copy{min-width:0}
@media (max-width:700px){.crumb a{display:inline;padding:0;line-height:2.2}}
