:root{
  --paper:#f6f2ea; --card:#fffdf8; --ink:#1f1d1a; --ink-2:#5b564e; --line:#e3dccf;
  --shu:#c8553d; --shu-ink:#9e3d29; --matcha:#6b8f5e; --indigo:#3d5a80; --ochre:#c99a3b;
  --radius:14px; --shadow:0 1px 2px rgba(31,29,26,.06),0 6px 24px rgba(31,29,26,.06);
  --serif:"Iowan Old Style","Palatino Linotype","Noto Serif","Georgia",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#171614; --card:#201f1c; --ink:#efe9de; --ink-2:#aaa397; --line:#34312c;
  --shu:#e0705a; --shu-ink:#f08c76; --matcha:#8fb381; --indigo:#7c9cc6; --ochre:#ddb35c; color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.25);}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--shu-ink)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.brand{font:600 20px var(--serif);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.dot{width:16px;height:16px;border-radius:50%;background:var(--shu);display:inline-block}
.top nav{display:flex;gap:18px}.top nav a{color:var(--ink-2);text-decoration:none;font-size:15px}.top nav a:hover{color:var(--ink)}
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,32px)}
main:focus{outline:none}
.foot{text-align:center;color:var(--ink-2);font-size:13px;padding:24px 16px;border-top:1px solid var(--line)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(28px,5vw,42px)}h2{font-size:clamp(21px,3vw,26px)}h3{font-size:18px}
p{margin:0 0 1em}.muted{color:var(--ink-2)}.small{font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow);margin-bottom:20px}
.hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:28px}
.hero svg{width:150px;height:150px}
@media(max-width:620px){.hero{grid-template-columns:1fr}.hero svg{display:none}}
.versions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.ver{display:block;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:transparent;text-align:left;color:inherit;font:inherit}
.ver:hover{border-color:var(--ink-2)}
.ver[aria-pressed=true]{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 8%,transparent)}
.ver b{display:block;font-size:17px}.ver span{color:var(--ink-2);font-size:14px}
label.field{display:block;margin:12px 0}label.field span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:6px}
input[type=text],textarea{width:100%;font:inherit;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus,button:focus-visible,.opt:focus-within{outline:2px solid var(--indigo);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:600 15px var(--sans);cursor:pointer;background:var(--shu);color:#fff}
.btn:hover{background:var(--shu-ink)}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.ghost:hover{border-color:var(--ink-2)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.spread{justify-content:space-between}
.progress{position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 0 12px;margin-bottom:12px}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}.bar>i{display:block;height:100%;background:var(--shu);transition:width .3s}
.q{padding:18px 0;border-bottom:1px solid var(--line)}.q:last-child{border-bottom:0}
.q .t{font-weight:500;margin-bottom:12px}.q .n{color:var(--ink-2);font-size:13px;margin-right:6px}
.q.missing .t{color:var(--shu-ink)}
.scale{display:grid;gap:6px}.scale.s5{grid-template-columns:repeat(5,1fr)}.scale.s7{grid-template-columns:repeat(7,1fr)}
.opt{position:relative}.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 4px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;line-height:1.2;cursor:pointer;color:var(--ink-2)}
.opt input:checked+span{border-color:var(--shu);background:var(--shu);color:#fff}
.opt:hover span{border-color:var(--ink-2)}
@media(max-width:620px){.scale.s5,.scale.s7{grid-template-columns:1fr}.opt span{justify-content:flex-start;padding:10px 12px}}
.choices{display:flex;flex-wrap:wrap;gap:8px}.choices .opt span{padding:8px 14px;min-height:38px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:620px){.pair{grid-template-columns:1fr}}
.pair .opt span{min-height:64px;font-size:15px;padding:12px}
.alloc{display:grid;gap:8px}.alloc .line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.stepper{display:flex;align-items:center;gap:6px}.stepper button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:inherit;font:600 18px var(--sans);cursor:pointer}
.stepper output{min-width:24px;text-align:center;font-weight:600}
.left{font-size:14px;color:var(--ink-2)}.left.ok{color:var(--matcha)}
.badge{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.grid2>.card{margin-bottom:0}.grid2{margin-bottom:20px}
.meter{margin:10px 0}.meter .lbl{display:flex;justify-content:space-between;font-size:14px;margin-bottom:4px}
.meter .bar{height:10px}
.big{font:600 56px/1 var(--serif)}
.profile{border-left:4px solid var(--shu);padding:4px 0 4px 16px;margin:14px 0}
.flag{background:color-mix(in srgb,var(--ochre) 18%,transparent);border-radius:10px;padding:10px 14px;margin:6px 0;font-size:14px}
.answers dt{font-weight:600;margin-top:12px}.answers dd{margin:4px 0 0;color:var(--ink-2);white-space:pre-wrap}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.venn text{font:600 13px var(--sans);fill:var(--ink)}
@media print{.top,.foot,.noprint{display:none}body{background:#fff}.card{box-shadow:none;break-inside:avoid}}
