:root{
  color-scheme:light;
  --bg:#f4f1e9; --surface:#fffdf8; --ink:#17201d; --muted:#69716c; --line:#d8d6cd;
  --primary:#26b5a8; --primary-strong:#147a71; --primary-soft:#e1f4ef; --accent:#ff6b4a;
  --shadow:0 16px 50px rgba(29,38,34,.08); --display:Georgia,serif;
  --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#101513; --surface:#171e1b; --ink:#ecf1eb; --muted:#aab3ad;
  --line:#36413b; --primary:#64d7c9; --primary-strong:#8ce4d8; --primary-soft:#193632;
  --accent:#ff8b70; --shadow:0 16px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--body);}
button,a{touch-action:manipulation}
button{font:inherit}
.skip-link{position:fixed; top:8px; left:8px; z-index:10; padding:10px 14px; background:var(--ink);
  color:var(--bg); border-radius:6px; transform:translateY(-150%);}
.skip-link:focus{transform:none}
.site-header,main,footer{width:min(1180px,calc(100% - 32px)); margin-inline:auto}
.site-header{display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:48px 0 34px;
  border-bottom:1px solid var(--line);}
.eyebrow,.step-label{margin:0 0 8px; color:var(--primary); font:500 11px/1.3 var(--mono);
  letter-spacing:.12em; text-transform:uppercase;}
h1,h2,h3{font-family:var(--display); letter-spacing:-.025em; text-wrap:balance}
h1{max-width:800px; margin:0; font-size:clamp(38px,7vw,76px); line-height:.98}
.lede{max-width:720px; margin:22px 0 0; color:var(--muted); font-size:18px}
.theme-button{width:48px; height:48px; flex:none; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer}
.header-actions{display:flex;align-items:center;gap:9px}.guide-link{min-height:48px;display:flex;align-items:center;padding:0 17px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}.guide-link:hover{border-color:var(--primary);color:var(--primary)}
.theme-button svg,.tree-actions svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.theme-button:hover,.theme-button:focus-visible{border-color:var(--primary); color:var(--primary)}
main{padding:38px 0 64px}
.section-heading,.workspace-bar{display:flex; justify-content:space-between; align-items:end; gap:24px}
.section-heading h2,.workspace-bar h2{font-size:clamp(26px,4vw,42px); line-height:1.05; margin:0}
.section-heading>p{max-width:420px; margin:0; color:var(--muted)}
.domain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px}
.domain-button{min-height:116px; padding:20px; text-align:left; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s ease,transform .2s ease,background .2s ease}
.domain-button:hover{border-color:var(--primary); transform:translateY(-2px)}
.domain-button[aria-current="true"]{background:var(--primary-soft); border-color:var(--primary)}
.domain-number{display:block; color:var(--muted); font:11px var(--mono)}
.domain-name{display:block; margin-top:15px; font-family:var(--display); font-size:22px; font-weight:700}
.domain-summary{display:block; margin-top:4px; color:var(--muted); font-size:13px}
.workspace{margin-top:46px; padding:28px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow); scroll-margin-top:20px}
.workspace:focus{outline:none}
.tree-actions{display:flex; gap:8px}
.tree-actions button{min-height:44px; display:flex; align-items:center; gap:7px; padding:0 13px;
  border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); cursor:pointer}
.tree-actions button:hover:not(:disabled){border-color:var(--primary); color:var(--primary)}
.tree-actions button:disabled{opacity:.4; cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
.breadcrumbs{display:flex; flex-wrap:wrap; gap:6px; min-height:32px; margin:24px 0 14px; padding:0; list-style:none}
.breadcrumbs li{display:flex; align-items:center; gap:6px; color:var(--muted); font:11px var(--mono)}
.breadcrumbs li:not(:last-child)::after{content:"/"; color:var(--line)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}
.map-panel{margin:8px 0 20px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg)}
.map-heading{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:12px}
.map-heading h3{margin:0; font-size:22px}
.map-legend{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; color:var(--muted); font:10px var(--mono)}
.map-legend span{display:flex; align-items:center; gap:5px}
.map-legend i{width:14px; height:8px; display:inline-block; border:1px solid var(--line); border-radius:2px; background:var(--surface)}
.map-legend .legend-current{border:2px solid var(--accent); background:var(--surface)}
.map-legend .legend-path{border-color:var(--primary); background:var(--primary-soft)}
.map-scroll{overflow:auto; max-height:620px; border:1px solid var(--line); border-radius:9px; background:var(--surface);
  overscroll-behavior:contain; scrollbar-color:var(--line) transparent}
.map-scroll:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
#tree-map{display:block; min-width:760px}
.map-edge{fill:none; stroke:var(--line); stroke-width:1.5}
.map-edge.is-path{stroke:var(--primary); stroke-width:3}
.map-edge-label{font:9px var(--mono); fill:var(--muted); text-anchor:middle; paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round}
.map-edge-label.is-path{fill:var(--primary-strong); font-weight:500}
.map-node rect{fill:var(--surface); stroke:var(--line); stroke-width:1.25}
.map-node text{fill:var(--ink); font:600 11px var(--body); pointer-events:none}
.map-node .map-kind{fill:var(--muted); font:8px var(--mono); letter-spacing:.08em}
.map-node.is-path rect{fill:var(--primary-soft); stroke:var(--primary); stroke-width:2}
.map-node.is-current rect{fill:var(--surface); stroke:var(--accent); stroke-width:3}
.map-node.is-result text{font-family:var(--display); font-size:12px}
.map-node.is-clickable{cursor:pointer}
.map-node.is-clickable:hover rect{stroke:var(--primary); stroke-width:3}
.map-node:focus-visible{outline:none}.map-node:focus-visible rect{stroke:var(--primary); stroke-width:4}
.decision-card{min-height:340px; padding:clamp(22px,4vw,44px); border-radius:12px; background:var(--bg)}
.question-count{margin:0 0 8px; color:var(--accent); font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase}
.decision-card h3{max-width:800px; margin:0; font-size:clamp(28px,4.4vw,48px); line-height:1.08}
.question-help{max-width:700px; color:var(--muted); margin:12px 0 0}
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:30px}
.choice{min-height:88px; padding:16px 18px; text-align:left; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s ease,background .2s ease}
.choice:hover{border-color:var(--primary); background:var(--primary-soft)}
.choice strong{display:block; font-weight:600}
.choice span{display:block; margin-top:4px; color:var(--muted); font-size:13px}
.result-tag{display:inline-flex; padding:5px 9px; border:1px solid var(--accent); border-radius:999px;
  color:var(--accent); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase}
.result-title{margin-top:14px!important}
.result-summary{max-width:760px; margin:12px 0 25px; color:var(--muted); font-size:17px}
.result-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.result-item{padding:15px; border-top:1px solid var(--line)}
.result-item dt{color:var(--primary); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase}
.result-item dd{margin:6px 0 0; font-size:14px}
.exam-clue{grid-column:1/-1; border-top-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent)}
.exam-rule{margin-top:34px; padding:28px; border-left:5px solid var(--primary); background:var(--primary-soft)}
.exam-rule h2{margin:0; font-size:clamp(25px,4vw,38px)}
.exam-rule p:last-child{max-width:800px; margin-bottom:0; color:var(--muted)}
footer{padding:24px 0 42px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
footer p{max-width:850px} footer a{color:var(--primary-strong)}
@media (max-width:760px){
  .site-header{padding-top:30px}.domain-grid{grid-template-columns:repeat(2,1fr)}
  .section-heading,.workspace-bar{align-items:flex-start; flex-direction:column}.workspace{padding:18px}
  .choices,.result-grid{grid-template-columns:1fr}.exam-clue{grid-column:auto}.tree-actions{width:100%}
  .map-heading{align-items:flex-start; flex-direction:column}.map-legend{justify-content:flex-start}
}
@media (max-width:430px){.domain-grid{grid-template-columns:1fr}.domain-button{min-height:96px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.domain-button,.choice{transition:none}}