* { box-sizing: border-box; }
:root { color-scheme: light; --navy:#171735; --ink:#232533; --muted:#51596a; --border:#d5d6df; --accent:#50507c; --tint:#f2f2f7; --green:#346e62; }
body { margin:0; background:#ededee; color:var(--ink); font:16px/1.55 Arial, Helvetica, sans-serif; }
a { color:var(--navy); text-underline-offset:.17em; }
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip:not(:focus) { position:absolute; clip-path:inset(50%); }
.site-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px 18px; background:var(--navy); padding:10px 16px; }
.site-bar a { color:#fff; text-decoration:none; }
.site-bar a:hover { text-decoration:underline; }
.brand { display:inline-flex; align-items:center; gap:7px; justify-self:start; font-weight:bold; }
.account { justify-self:end; font-weight:bold; white-space:nowrap; }
.languages { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 11px; font-size:.89rem; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:start; gap:8px 13px; margin:18px auto; padding:0 12px; }
.site-nav a { min-width:126px; padding:10px 13px; background:#d6d6d7; border-radius:3px; font-size:.9rem; font-weight:bold; text-align:center; line-height:1.15; }
.site-nav .active { background:#111; color:#fff; }
main,.preview { width:min(1100px,calc(100% - 32px)); margin-inline:auto; }
.preview { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 14px; color:var(--muted); font-size:.86rem; padding:3px 0 9px; }
.preview summary { cursor:pointer; font-weight:bold; }
.preview nav { display:flex; flex-wrap:wrap; gap:5px 14px; max-width:800px; padding-top:6px; }
.hero { display:grid; grid-template-columns:1.14fr 1fr; align-items:center; gap:clamp(20px,4vw,42px); background:#fff; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:8px; padding:clamp(18px,4vw,39px); }
.intro,.example { min-width:0; }
h1,h2,h3 { color:var(--navy); line-height:1.18; margin:0; }
h1 { font-size:clamp(2rem,4.8vw,3.55rem); letter-spacing:-.035em; max-width:17ch; overflow-wrap:anywhere; }
h2 { font-size:clamp(1.35rem,2.8vw,1.8rem); }
h3 { font-size:1.07rem; }
p { margin:0; }
.eyebrow { color:var(--muted); font-size:.8rem; font-weight:bold; margin-bottom:8px; }
.lead { margin:14px 0 12px; font-size:clamp(1rem,2.3vw,1.14rem); }
.test-facts { color:var(--muted); font-size:.9rem; margin-bottom:16px; }
.test-form { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.field { display:grid; gap:3px; }
.field label { font-size:.85rem; font-weight:bold; }
.field select { min-height:44px; min-width:146px; padding:6px 10px; background:white; color:var(--ink); border:1px solid #a9aab8; border-radius:4px; font:inherit; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--navy); border-radius:4px; padding:7px 15px; background:var(--navy); color:#fff; font:inherit; font-weight:bold; text-decoration:none; cursor:pointer; }
.button:hover { background:#353556; }
.button.secondary { margin-top:16px; background:#fff; color:var(--navy); border-color:var(--border); }
.button.secondary:hover { border-color:var(--accent); }
.example { background:var(--tint); border:1px solid var(--border); border-radius:6px; padding:clamp(13px,2.5vw,23px); }
.example-header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
.example-header h2 { font-size:1.06rem; }
.example-header span { font-size:.72rem; font-weight:bold; color:var(--muted); }
.sample-summary { font-size:1.6rem; font-weight:bold; color:var(--navy); line-height:1.14; margin:6px 0 4px; }
.sample-subtitle,.sample-note { color:var(--muted); font-size:.84rem; }
.sample-note { margin-top:10px; }
.scores { display:grid; gap:5px; margin:10px 0 0; }
.score { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) 3.4ch; align-items:center; gap:8px; font-size:.85rem; line-height:1.25; }
.score dt,.score dd { margin:0; }
.score dd { text-align:right; font-weight:bold; font-variant-numeric:tabular-nums; }
.score .track { display:block; height:6px; background:#dedee8; border-radius:5px; overflow:hidden; }
.track span { display:block; height:100%; background:var(--accent); }
.paired { gap:8px; }
.paired .score { grid-template-columns:repeat(2,minmax(0,1fr)); }
.paired dd { font-weight:normal; }
.paired .pair-track { grid-column:1/-1; margin-top:-5px; background:#cbcbdc; }
.chart { margin:16px auto 0; width:min(100%, 380px); }
.chart figcaption { text-align:center; color:var(--muted); font-size:.85rem; margin-top:6px; }
.chart-grid { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto 1fr auto; align-items:center; gap:4px 7px; text-align:center; font-size:.76rem; color:var(--muted); }
.chart-top { grid-area:1 / 2; }
.chart-grid > span:nth-child(2) { grid-area:2 / 1; }
.chart-box { grid-area:2 / 2; }
.chart-grid > span:nth-child(4) { grid-area:2 / 3; }
.chart-bottom { grid-area:3 / 2; }
.chart-box { position:relative; aspect-ratio:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; border:1px solid var(--border); border-radius:4px; background:#fff; }
.chart-box span { display:grid; place-items:center; padding:3px; color:var(--navy); font-weight:bold; overflow-wrap:anywhere; }
.chart-box span:nth-child(odd) { border-right:1px dashed #9b9bab; }
.chart-box span:nth-child(-n+2) { border-bottom:1px dashed #9b9bab; }
.chart-box .dot { position:absolute; left:68%; bottom:34%; transform:translate(-50%,50%); width:14px; height:14px; background:var(--green); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--green); }
.jump { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:15px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.block { margin-top:23px; }
.block h2 { margin-bottom:10px; }
.block p + p,.block p + .tiles,.block .tiles + p { margin-top:10px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:9px; }
.tile,.interpretation { background:#fff; border:1px solid var(--border); border-radius:6px; padding:14px; min-width:0; }
.tile p { margin-top:4px; color:var(--muted); font-size:.94rem; }
.interpretation { padding:clamp(15px,3vw,25px); }
.type-links { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.type-links a { display:inline-block; background:var(--tint); border:1px solid var(--border); border-radius:4px; font-size:.87rem; padding:6px 10px; }
footer { margin-top:34px; border-top:1px solid var(--border); text-align:center; padding:18px 12px; font-size:.9rem; }
footer p { margin-top:4px; color:var(--muted); }
@media(max-width:830px) { .site-bar { grid-template-columns:1fr auto; } .languages { grid-column:1/-1; grid-row:2; } }
@media(max-width:690px) { .hero { grid-template-columns:minmax(0,1fr); } h1 { max-width:none; } }
@media(max-width:480px) { .site-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:12px auto; } .site-nav a { display:grid; place-items:center; min-width:0; } .nav-break { display:none; } .chart-grid { gap:4px; font-size:.69rem; } }
@media(max-width:340px) { .field { flex:1 1 100%; } .test-form .button { width:100%; } }