:root{
  --bg:#f6f5f1; --panel:#ffffff; --panel2:#efeee9; --ink:#16171a; --ink2:#57564f; --mut:#8a887f;
  --line:#dcdad1; --line2:#cac8be;
  --accent:#9a6a00; --accent-ink:#7c5500; --accent-soft:#f0e2c0;
  --ok:#2e7d43; --warn:#b07d10; --bad:#b3402f;
  --c-sbr:#2a78d6; --c-nbr:#eb6834; --c-epdm:#1baf7a; --c-cr:#eda100; --c-nr:#e87ba4;
  --c6:#008300; --c7:#4a3aa7;
  --shadow:0 1px 2px rgba(20,20,15,.06),0 8px 24px rgba(20,20,15,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141518; --panel:#1d1f23; --panel2:#24262c; --ink:#f1efe9; --ink2:#b6b4aa; --mut:#7f7d75;
    --line:#33353b; --line2:#41434a;
    --accent:#e3a922; --accent-ink:#eeb83e; --accent-soft:#3a3324;
    --ok:#57b374; --warn:#d9a53c; --bad:#e07a68;
    --c-sbr:#3987e5; --c-nbr:#d95926; --c-epdm:#199e70; --c-cr:#c98500; --c-nr:#d55181;
    --c6:#3fa53f; --c7:#9085e9;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#141518; --panel:#1d1f23; --panel2:#24262c; --ink:#f1efe9; --ink2:#b6b4aa; --mut:#7f7d75;
  --line:#33353b; --line2:#41434a;
  --accent:#e3a922; --accent-ink:#eeb83e; --accent-soft:#3a3324;
  --ok:#57b374; --warn:#d9a53c; --bad:#e07a68;
  --c-sbr:#3987e5; --c-nbr:#d95926; --c-epdm:#199e70; --c-cr:#c98500; --c-nr:#d55181;
  --c6:#3fa53f; --c7:#9085e9;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Source Sans 3",system-ui,sans-serif}
h1,h2,h3{font-family:"Archivo","Source Sans 3",sans-serif;text-wrap:balance;margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.hero{padding:30px 0 18px;border-bottom:1px solid var(--line)}
.topline{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.langsel{display:flex;align-items:center;gap:8px}
.langsel select{font:600 13px "IBM Plex Mono",monospace;color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:6px 12px}
h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;letter-spacing:-.01em;line-height:1.05;margin:6px 0 8px}
.lede{max-width:68ch;color:var(--ink2);margin:0}
nav.secnav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 0}
nav.secnav .wrap{display:flex;gap:8px;flex-wrap:wrap}
nav.secnav a{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--panel)}
nav.secnav a:hover,nav.secnav a:focus-visible{color:var(--ink);border-color:var(--accent);outline:none}
section{padding:34px 0 8px}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
h2{font-size:24px;font-weight:700}
.sechead .sub{color:var(--ink2);font-size:14.5px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 18px 16px;margin:16px 0}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
h3{font-size:17px;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{font:600 13.5px "Source Sans 3",sans-serif;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--dc,var(--mut));box-shadow:0 0 0 2px var(--panel)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.chip.off{opacity:.42}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select,input[type=number]{font:600 14px "IBM Plex Mono",monospace;color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 9px}
select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.scalewrap{overflow-x:auto}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px}
.lvl{font-family:"Archivo",sans-serif;font-weight:800;font-size:34px;line-height:1;grid-row:span 3;min-width:84px;text-align:center;border-right:1px solid var(--line2);padding-right:16px}
.lvl small{display:block;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--mut);margin-top:4px}
.verdict .et{font-weight:700;font-size:17px}
.verdict .hu{color:var(--ink2)}
.verdict .hu b{color:var(--accent-ink)}
.verdict .ko{font-size:14px;color:var(--ink2)}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.tbl th,.tbl td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.tbl th{background:var(--panel2);font-weight:600}
.tblwrap{overflow-x:auto}
.small{font-size:13px;color:var(--mut)}
.btn{font:600 12.5px "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer}
.btn:hover{color:var(--ink);border-color:var(--accent)}
.radarbox{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font:600 12.5px "IBM Plex Mono",monospace;padding:5px 9px;border-radius:7px;transform:translate(-50%,-130%);white-space:nowrap;opacity:0;transition:opacity .12s}
@media (prefers-reduced-motion: reduce){.tip{transition:none}}
.gapline{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gap-badge{font:600 12.5px "IBM Plex Mono",monospace;border-radius:999px;padding:4px 10px;border:1px solid var(--line)}
.gap-badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.gap-badge.ok{color:var(--ok)}
.advice{border-left:3px solid var(--accent);background:var(--panel2);border-radius:0 10px 10px 0;padding:10px 14px;margin-top:10px;font-size:14.5px}
.advice b{color:var(--accent-ink)}
footer{border-top:1px solid var(--line);margin-top:36px;padding:18px 0 40px;color:var(--mut);font-size:13px}
.axlab{font:600 10.5px "IBM Plex Mono",monospace;fill:var(--ink2)}
.ringlab{font:10px "IBM Plex Mono",monospace;fill:var(--mut)}
.anch{font:11px "IBM Plex Mono",monospace;fill:var(--ink2)}
.anchline{stroke:var(--line2);stroke-width:1}
.zone-l5{fill:color-mix(in srgb,var(--ok) 26%,transparent)}
.zone-l4{fill:color-mix(in srgb,var(--ok) 14%,transparent)}
.zone-l3{fill:color-mix(in srgb,var(--warn) 16%,transparent)}
.zone-l2{fill:color-mix(in srgb,var(--bad) 13%,transparent)}
.zone-l1{fill:color-mix(in srgb,var(--bad) 24%,transparent)}
.zone-l0{fill:color-mix(in srgb,var(--mut) 16%,transparent)}
.zlab{font:600 10.5px "IBM Plex Mono",monospace;fill:var(--ink2)}
.zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:10px}
.zcard{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 8px 8px;text-align:center}
.zcard svg{display:block;margin:0 auto}
.zname{font:700 13px "Archivo",sans-serif;margin-top:4px}
.zsub{font:11.5px "IBM Plex Mono",monospace;color:var(--mut);margin-top:1px}
.zgrouphead{font:700 14px "Archivo",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink2);margin:18px 0 2px;display:flex;align-items:center;gap:10px}
.zgrouphead::after{content:"";flex:1;height:1px;background:var(--line)}
.zkey{grid-column:span 2}
@media(max-width:560px){.zkey{grid-column:span 1}}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px;margin-top:10px}
.bcard{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px 10px}
.bhead{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line2);padding-bottom:6px;margin-bottom:7px}
.bhead .dot{width:11px;height:11px;border-radius:50%;flex:none;align-self:center}
.bhead .bn{font:700 14px "Archivo",sans-serif}
.bhead .bs{font:10.5px "IBM Plex Mono",monospace;color:var(--mut);margin-left:auto;text-align:right}
.brow{display:flex;align-items:center;gap:8px;padding:1.5px 0}
.blab{font:600 10.5px "IBM Plex Mono",monospace;color:var(--ink2);width:74px;flex:none;letter-spacing:.02em}
.brow svg{flex:none}
.bval{font:600 10.5px "IBM Plex Mono",monospace;color:var(--mut);margin-left:auto}

.brand-nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}.brand-nav a{color:var(--ink);text-decoration:none;font-weight:700}.brand-nav a:first-child{color:#cf252b;margin-right:auto}.education-note{font-size:14px;color:var(--ink2);border-left:3px solid #cf252b;padding-left:12px;max-width:85ch}.blab,.bval,.bhead .bs{font-size:12px}.blab{width:82px}.bgrid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}select,input,button{max-width:100%}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}