:root{
  --bg:#f3f0fa;
  --surface:#ffffff;
  --ink:#241b35;
  --soft:#5d5372;
  --line:#ddd6ec;
  --plum:#5b3d8f;
  --plum-dark:#432a6d;
  --ember:#c2410c;
  --mint:#0e7a68;
  --radius:14px;
  --ui:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --num:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 420px at 110% -120px,#e4dcf6 0%,rgba(228,220,246,0) 62%),
    var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16.5px;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
}
.shell{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--plum)}

header.top{padding:46px 0 10px}
.eyebrow{
  display:inline-block;
  font-family:var(--num);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--plum);
  background:#eae2fa;
  border-radius:999px;
  padding:5px 13px;
  margin:0 0 16px;
}
h1{margin:0 0 16px;font-weight:800;line-height:1.3}
h1 .name{display:block;font-size:clamp(27px,7.4vw,44px);letter-spacing:-.01em}
h1 .what{display:block;font-size:clamp(14px,3.3vw,18px);font-weight:500;color:var(--soft);margin-top:10px}

.disclose{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  font-size:15px;
  line-height:1.8;
  color:#3a3147;
  box-shadow:0 1px 0 #e7e1f3;
}
.disclose b{color:var(--plum-dark)}

section{padding:40px 0 0}
h2{font-size:clamp(20px,4.6vw,26px);margin:0 0 8px;font-weight:800;letter-spacing:-.01em}
h2 .num{
  font-family:var(--num);
  font-size:13px;
  color:var(--ember);
  display:block;
  letter-spacing:.14em;
  margin-bottom:4px;
  font-weight:600;
}
.sub{color:var(--soft);font-size:15px;margin:0 0 22px}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
}
fieldset{border:0;margin:0 0 22px;padding:0}
fieldset:last-of-type{margin-bottom:0}
legend{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.04em;
  padding:0;
  margin-bottom:12px;
  color:var(--plum-dark);
}
.opts{display:grid;gap:10px}
@media(min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{
  display:block;
  border:1.5px solid var(--line);
  border-radius:11px;
  padding:12px 14px;
  font-size:15px;
  cursor:pointer;
  background:#fbfaff;
  transition:border-color .12s,background .12s;
}
.opt small{display:block;color:var(--soft);font-size:12.5px;line-height:1.55;margin-top:2px}
.opt input:checked + span{border-color:var(--plum);background:#f0eafc}
.opt input:focus-visible + span{outline:3px solid #c9b6f0;outline-offset:2px}

.results{margin-top:26px;display:grid;gap:14px}
.route{
  border:1px solid var(--line);
  border-left:6px solid var(--plum);
  border-radius:11px;
  background:#fbfaff;
  padding:16px 18px;
}
.route.alt{border-left-color:var(--ember)}
.route.open{border-left-color:var(--mint)}
.route h3{margin:0 0 2px;font-size:17px}
.route .lv{
  font-family:var(--num);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--soft);
  margin:0 0 10px;
}
.route dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px}
.route dt{color:var(--soft);white-space:nowrap}
.route dd{margin:0}
.route .caveat{
  margin:12px 0 0;
  font-size:13.5px;
  color:#5a4a2f;
  background:#fdf4e3;
  border-radius:8px;
  padding:9px 12px;
}
.verdict{
  font-size:14.5px;
  color:var(--soft);
  margin:0 0 4px;
  font-family:var(--num);
}

.picker{display:grid;gap:14px}
@media(min-width:560px){.picker{grid-template-columns:1fr 1fr}}
label.lab{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
select{
  width:100%;
  padding:11px 12px;
  font-size:16px;
  font-family:var(--ui);
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:10px;
}
.subjects{margin-top:22px}
.subjects ol{margin:0;padding-left:22px}
.subjects li{margin-bottom:6px;font-size:15.5px}
.subjects .tot{
  font-family:var(--num);
  font-size:13px;
  color:var(--soft);
  margin-top:12px;
}
.pickone{
  margin-top:12px;
  font-size:14px;
  background:#f0eafc;
  border-radius:10px;
  padding:12px 14px;
}
.pickone b{color:var(--plum-dark)}

.facts{display:grid;gap:14px}
.fact{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
}
.fact h3{margin:0 0 8px;font-size:17px}
.fact ul{margin:0;padding-left:20px;font-size:15px}
.fact li{margin-bottom:6px}
.fact .src{margin:12px 0 0;font-size:12.5px;color:var(--soft);font-family:var(--num)}

footer{margin-top:52px;border-top:1px solid var(--line);background:#efeaf8}
footer .shell{padding-top:26px;padding-bottom:36px}
footer p{margin:0 0 10px;font-size:13.5px;color:var(--soft)}

.oops{padding:56px 0 10px;text-align:left}
.oops .big{
  font-family:var(--num);
  font-size:clamp(56px,19vw,112px);
  line-height:1;
  color:var(--plum);
  margin:0 0 10px;
  font-weight:700;
}
.oops p{font-size:16px}
.home{
  display:inline-block;
  margin-top:18px;
  background:var(--plum);
  color:#fff;
  text-decoration:none;
  padding:12px 22px;
  border-radius:999px;
  font-size:15px;
}