:root{--color-base:#f5f7ff;--color-card:#ffffff;--color-ink:#202346;--color-muted:#4d5575;--color-main:#3730a3;--color-hi:#10b981;--color-rule:#dce1f2;--color-rad:22px;--color-max:1140px;--color-heading:'Heebo',system-ui,sans-serif;--color-f2:'Heebo',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--color-base);color:var(--color-ink);font:16px/1.78 var(--color-f2)}
img{max-width:100%;height:auto} a{color:var(--color-main);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--color-heading);line-height:1.2;letter-spacing:-.01em;color:var(--color-ink)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.iq-wra{max-width:var(--color-max);margin:0 auto;padding:0 1rem} .iq-mai{max-width:var(--color-max);margin:0 auto;padding:1.2rem 1rem 3rem}
.iq-ski{position:absolute;left:-9999px} .iq-ski:focus{left:1rem;top:1rem;background:var(--color-card);padding:.5rem;z-index:99}
.iq-heain{max-width:var(--color-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.iq-bra{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--color-heading);color:var(--color-ink);text-decoration:none}
.iq-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .iq-nav a{color:var(--color-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.iq-hea{background:var(--color-base);border-bottom:1px solid var(--color-rule)} .iq-heain{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .iq-nav a{border-bottom:2px solid transparent;padding-bottom:2px} .iq-nav a:hover,.iq-nav a[aria-current]{border-color:var(--color-main)}
.iq-her{margin:1rem 0 1.4rem} .iq-lea{font-size:1.12rem;max-width:46em;color:var(--color-muted)} .iq-her{text-align:center} .iq-her .iq-lea{margin-left:auto;margin-right:auto}
.iq-too{margin:1.4rem 0 2rem}
.iq-not{margin:1.4em 0;padding:.9em 1.1em;background:var(--color-card);border-left:4px solid var(--color-hi);border-radius:0 var(--color-rad) var(--color-rad) 0}
.iq-for{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--color-card);border:1px dashed var(--color-main);border-radius:var(--color-rad);overflow-x:auto}
.iq-tabwra{margin:1.2em 0;overflow-x:auto;border:1px solid var(--color-rule);border-radius:var(--color-rad);background:var(--color-card)}
.iq-tab{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .iq-tab th,.iq-tab td{padding:.5em .75em;border-bottom:1px solid var(--color-rule);text-align:left}
.iq-tab thead th{background:color-mix(in srgb,var(--color-rule) 60%,var(--color-card))}
ol.iq-ste{padding-left:1.3em} ol.iq-ste>li{margin:.5em 0}
.iq-fig{margin:1.6em 0;text-align:center} .iq-fig img{width:100%;max-width:720px;border-radius:var(--color-rad);border:1px solid var(--color-rule);background:#fff} .iq-fig figcaption{font-size:.9em;color:var(--color-muted)}
.iq-car{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.iq-cara{display:block;padding:1.1rem;background:var(--color-card);border-radius:var(--color-rad);background:color-mix(in srgb,var(--color-rule) 45%,var(--color-card));border:1px solid transparent;color:var(--color-ink);text-decoration:none}
.iq-cara b{display:block;font-family:var(--color-heading);margin-bottom:.35rem} .iq-cara span{color:var(--color-muted);font-size:.92rem} .iq-cara:hover{border-color:var(--color-main)}
.iq-cara--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .iq-cara--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--color-ink) 14%,transparent)}
.iq-carimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .iq-cartxt{display:block;padding:1rem 1.1rem 1.1rem} .iq-cartxt>span{display:block}
.iq-bli a,.iq-bro,.iq-poskic{background:none!important}
.iq-carmet{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--color-main)}
.iq-car--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .iq-car--feat>.iq-cara:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .iq-car--feat>.iq-cara:first-child b{font-size:1.35rem}
.iq-bli{display:grid;gap:1rem;margin:1.2em 0} .iq-bro{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--color-rad);overflow:hidden;color:var(--color-ink);text-decoration:none}
.iq-bro .iq-carimg{height:100%;aspect-ratio:auto;min-height:126px} .iq-bro b{display:block;font-family:var(--color-heading);font-size:1.12rem;margin-bottom:.3rem} .iq-bro .iq-cartxt>span{color:var(--color-muted);font-size:.93rem} .iq-bro:hover{border-color:var(--color-main)}
.iq-bli--min{list-style:none;padding:0;counter-reset:bl;gap:0} .iq-bli--min li{counter-increment:bl;border-top:1px solid var(--color-rule)} .iq-bli--min li:last-child{border-bottom:1px solid var(--color-rule)}
.iq-bli--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--color-ink);text-decoration:none} .iq-bli--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--color-heading);color:var(--color-main)}
.iq-bli--min b{font-family:var(--color-heading);font-size:1.15rem} .iq-bli--min span{color:var(--color-muted);font-size:.93rem} .iq-bli--min a:hover b{color:var(--color-main)}
.iq-poshea--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--color-rad);overflow:hidden} .iq-poshea--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.iq-posov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .iq-posov h1,.iq-posov .iq-posmet,.iq-posov .iq-poskic{color:#fff}
.iq-poshea--band{background:var(--color-main);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--color-rad)} .iq-poshea--band h1,.iq-poshea--band .iq-posmet,.iq-poshea--band .iq-poskic{color:#fff}
.iq-poshea--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .iq-poshea--split .iq-poscov{margin:0}
.iq-toc--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .iq-toc--chips li{margin:0} .iq-toc--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--color-rule);border-radius:999px;background:var(--color-base);text-decoration:none;font-size:.88rem}
.iq-toc--rail{background:none;border:0;border-left:3px solid var(--color-hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.iq-land--globe summary{display:flex;align-items:center;gap:.35rem} .iq-lan{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .iq-lan a{padding:.25rem .7rem;border:1px solid var(--color-rule);border-radius:999px;text-decoration:none} .iq-lan a[aria-current]{background:var(--color-main);border-color:var(--color-main);color:#fff}
@media (max-width:700px){.iq-car--feat{grid-template-columns:1fr} .iq-car--feat>.iq-cara:first-child{display:flex} .iq-bro{grid-template-columns:1fr} .iq-bro .iq-carimg{min-height:0;aspect-ratio:1200/630} .iq-poshea--split{grid-template-columns:1fr} .iq-posov{position:static;background:var(--color-main);padding:1.2rem} .iq-poshea--overlay>img{min-height:0}}
.iq-pos{max-width:48rem;margin:0 auto} .iq-poshea{margin:.6rem 0 1.2rem} .iq-poshea h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.iq-poskic{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-main);text-decoration:none}
.iq-upd{color:var(--color-muted);font-size:.9rem;margin:2rem 0 0} .iq-sig{font-style:italic;color:var(--color-muted)} .iq-posmet{color:var(--color-muted);font-size:.92rem;margin:0} .iq-poscov{margin:0 0 1.6rem} .iq-poscov img{display:block;width:100%;height:auto;border-radius:var(--color-rad)}
.iq-pos .iq-lea{font-size:1.2rem;color:var(--color-ink)} .iq-pos .iq-lea::first-letter{font-family:var(--color-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--color-main)}
.iq-pos .iq-toc--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--color-card);border:1px solid var(--color-rule);border-left:4px solid var(--color-main);border-radius:var(--color-rad);font-size:.95rem}
.iq-toc--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .iq-toc--post li{margin:.2rem 0}
.iq-pos h3{color:var(--color-main)} .iq-pos blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--color-hi);font-size:1.1em}
.iq-faqgri{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .iq-faqgri>div{background:var(--color-card);background:color-mix(in srgb,var(--color-rule) 45%,var(--color-card));border:1px solid transparent;border-radius:var(--color-rad);padding:1rem} .iq-faq h3{margin-top:0;font-size:1rem}
.iq-cru{font-size:.88rem;color:var(--color-muted);margin:.4rem 0 1rem} .iq-cru a{color:var(--color-muted)}
.iq-cta{margin:2.4rem 0;padding:1.4rem;background:var(--color-card);border-radius:var(--color-rad);background:color-mix(in srgb,var(--color-rule) 45%,var(--color-card));border:1px solid transparent;text-align:center}
.iq-btn{display:inline-block;padding:.7em 1.4em;background:var(--color-main);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.iq-foo{border-top:1px solid var(--color-rule);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--color-muted);background:var(--color-card)}
.iq-foo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .iq-foo a{color:var(--color-muted)} .iq-foo{text-align:center} .iq-foo nav{justify-content:center}

.iq-toc{margin:1.2rem 0;padding:.8rem 1rem;background:var(--color-card);border-radius:var(--color-rad);border:1px solid var(--color-rule)} .iq-toc ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.iq-toc ol{columns:1}}
.iq-land{position:relative} .iq-land summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--color-rule);border-radius:999px;font-size:.85rem}
.iq-lanlis{position:absolute;right:0;top:120%;background:var(--color-card);border:1px solid var(--color-rule);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.iq-lanlis a{padding:.3rem .5rem;text-decoration:none;color:var(--color-ink)} .iq-lanlis a[aria-current]{font-weight:700;color:var(--color-main)}
.iq-cod{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .iq-cod a{text-decoration:none;color:var(--color-muted);padding:.1rem .3rem;border-radius:4px} .iq-cod a[aria-current]{color:var(--color-main);background:color-mix(in srgb,var(--color-main) 12%,transparent)}
[data-slot]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-slot]:empty{margin:0}
[data-slot="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--color-card)}
[data-slot="sidebar_left"],[data-slot="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-slot="sidebar_left"]{left:12px} [data-slot="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-slot="sidebar_left"],[data-slot="sidebar_right"]{display:none}}
.iq-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--color-muted)}
.iq-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.iq-tabwra{border:0;border-top:3px solid var(--color-main);border-radius:0;background:transparent} .iq-tab thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.iq-sec a:not(.iq-btn):not(.iq-cara){text-decoration-thickness:2px}
:root{--color-heading:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;--color-f2:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif} body{font-size:17px;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility} h1,h2,h3{font-weight:700;letter-spacing:0;text-wrap:balance} .iq-bra{font-weight:700} h1{font-size:clamp(1.85rem,4.6vw,2.56rem);line-height:1.08} h2{font-size:clamp(1.3rem,3vw,1.69rem);line-height:1.18} h3{font-size:1.30rem} .iq-poshea h1{font-size:clamp(1.95rem,5vw,2.72rem)} p,li{text-wrap:pretty} .iq-sec>p,.iq-sec>ul,.iq-sec>ol,.iq-pos p,.iq-pos li{max-width:64ch} .iq-tab,.iq-too output,.iq-too [class*=res],.iq-too [class*=val]{font-variant-numeric:tabular-nums lining-nums}  
@media (max-width:640px){.iq-heain{justify-content:center} .iq-nav{justify-content:center}}

/* Magnetic logic tiles: independent boards, tactile answer corners and an honest raw-score ring. */
.iq { font-family:var(--color-f2); color:var(--color-ink); font-size:16px; line-height:1.6; isolation:isolate; container-type:inline-size; container-name:puzzle; }
.iq * { box-sizing:border-box; }
.iq [hidden] { display:none!important; }
.iq button,.iq textarea { font:inherit; color:var(--color-ink); }
.iq button { cursor:pointer; touch-action:manipulation; border:1px solid var(--color-rule); background:var(--color-card); border-radius:var(--color-rad); min-height:44px; padding:.65rem 1rem; font-weight:600; font-size:.84rem; transition:background-color .16s,border-color .16s,transform .16s; }
.iq button:hover:not(:disabled) { background:color-mix(in srgb,var(--color-main) 6%,var(--color-card)); border-color:var(--color-main); }
.iq button:active:not(:disabled) { transform:translateY(1px); }
.iq button:disabled { opacity:.45; cursor:default; }
.iq button:focus-visible,.iq input:focus-visible,.iq textarea:focus-visible,.iq summary:focus-visible { outline:3px solid var(--color-main); outline-offset:4px; }
.iq p { margin:.6rem 0 1.1rem; }
.iq h2,.iq h3,.iq h4 { font-family:var(--color-heading); font-weight:600; letter-spacing:-.025em; line-height:1.2; color:var(--color-ink); }
.iq h3 { font-size:1.35rem; margin:1.8rem 0 1rem; }
.iq h4 { margin:.6rem 0; font-size:1rem; }
.iq-kicker { font-size:1rem; font-weight:600; color:var(--color-main); letter-spacing:0; text-transform:none; }
.iq-main-btn { color:var(--color-card)!important; background:var(--color-main)!important; border-color:var(--color-main)!important; }
.iq-main-btn:hover { background:color-mix(in srgb,var(--color-main) 87%,var(--color-ink))!important; }
.iq [data-screen=welcome] { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:1.4rem 2rem; align-items:center; }
.iq-welcome-art { min-width:0; padding:1rem; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--color-main) 7%,var(--color-base)),var(--color-base) 70%); border-radius:var(--color-rad); }
.iq-welcome-art svg { display:block; width:100%; height:auto; }
.iq-welcome-copy { min-width:0; padding:1rem 0; }
.iq-welcome-copy .iq-kicker { margin:0 0 .65rem; }
.iq-welcome-copy h2 { font-size:clamp(1.75rem,3vw,2.6rem); margin:0 0 1rem; max-width:20ch; line-height:1.07; }
.iq-welcome-copy>p:not(.iq-kicker) { font-size:.94rem; line-height:1.7; max-width:55ch; }
.iq-mode { padding:0; border:0; margin:1.2rem 0 .8rem; display:flex; flex-direction:column; gap:.65rem; }
.iq-mode legend { font-size:.77rem; font-weight:650; color:var(--color-muted); margin-bottom:.6rem; }
.iq-mode label { display:flex; gap:.7rem; align-items:center; min-height:48px; border:1px solid var(--color-rule); border-radius:var(--color-rad); background:var(--color-base); padding:.7rem .9rem; font-size:.86rem; font-weight:600; cursor:pointer; }
.iq-mode label:has(input:checked) { border-color:var(--color-main); background:color-mix(in srgb,var(--color-main) 5%,var(--color-card)); }
.iq-mode input { width:18px; height:18px; margin:0; accent-color:var(--color-main); flex:none; }
.iq-hint { color:var(--color-muted); font-size:.76rem!important; line-height:1.7; }
#iq-start { min-width:205px; padding:.85rem 1.4rem; font-size:.92rem; min-height:52px; }
.iq-limit { border:1px solid var(--color-rule); border-left:5px solid var(--color-hi); padding:1rem 1.2rem; border-radius:var(--color-rad); background:var(--color-base); font-size:.84rem; line-height:1.7; }
.iq [data-screen=welcome]>.iq-limit { grid-column:1/-1; }
.iq-resume { grid-column:1/-1; border:1px dashed var(--color-main); background:var(--color-card); border-radius:var(--color-rad); padding:1rem 1.2rem; font-size:.85rem; }
.iq-resume p { max-width:80ch; margin:0 0 .8rem; }
.iq-resume button { margin:0 .5rem .2rem 0; }
.iq-sessionbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--color-rule); }
#iq-counter { font-family:var(--color-heading); font-weight:600; font-size:1.2rem; letter-spacing:-.025em; }
#iq-clock { font-variant-numeric:tabular-nums; font-size:.86rem; font-weight:600; color:var(--color-muted); padding:.4rem .65rem; background:var(--color-base); border:1px solid var(--color-rule); border-radius:var(--color-rad); }
#iq-clock.is-low { color:var(--color-main); border-color:var(--color-main); }
#iq-finish { font-size:.74rem; min-height:40px; color:var(--color-main); }
.iq-progress { height:7px; border-radius:var(--color-rad); background:var(--color-rule); overflow:hidden; margin:.9rem 0 .35rem; }
.iq-progress>span { display:block; height:100%; background:var(--color-hi); border-radius:var(--color-rad); transition:width .18s ease; }
#iq-progress-text { margin:.35rem 0 1.2rem; }
.iq-stage { padding:1.4rem; background:var(--color-base); border:1px solid var(--color-rule); border-radius:var(--color-rad); position:relative; }
.iq-question-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.iq-family { color:var(--color-main); font-size:.78rem; font-weight:700; border-left:4px solid var(--color-hi); padding-left:.7rem; }
#iq-flag { font-size:.72rem; padding:.45rem .7rem; min-height:40px; }
#iq-flag[aria-pressed=true] { border-color:var(--color-hi); background:color-mix(in srgb,var(--color-hi) 8%,var(--color-card)); }
#iq-instruction { margin:1.1rem 0 1.3rem; font-size:1.2rem; line-height:1.4; max-width:60ch; }
.iq-matrix { display:grid; grid-template-columns:repeat(var(--iq-cols,3),minmax(0,1fr)); gap:.8rem; width:min(560px,100%); margin:1.3rem auto; padding:1rem; border:1px solid var(--color-rule); background:var(--color-card); border-radius:var(--color-rad); box-shadow:0 5px 0 color-mix(in srgb,var(--color-rule) 55%,transparent); }
.iq-cell { aspect-ratio:1; border:1px solid var(--color-rule); background:var(--color-base); border-radius:calc(var(--color-rad)*.5); display:flex; align-items:center; justify-content:center; min-width:0; position:relative; padding:.55rem; }
.iq-cell svg { display:block; width:100%; height:100%; overflow:visible; }
.iq-cell-label { position:absolute; left:.3rem; bottom:.2rem; color:var(--color-muted); font-size:.64rem; font-weight:600; }
.iq-cell.iq-missing { border:2px dashed var(--color-main); color:var(--color-main); font-family:var(--color-heading); font-size:clamp(1.8rem,4vw,3rem); font-weight:600; background:color-mix(in srgb,var(--color-main) 5%,var(--color-card)); }
.iq-cell.iq-spacer { background:transparent; border-color:transparent; }
.iq-choose { color:var(--color-muted); font-size:.78rem; margin:1.5rem 0 .8rem!important; text-align:center; }
.iq-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; max-width:650px; margin:0 auto; }
.iq button.iq-option { border:2px solid var(--color-rule); border-radius:calc(var(--color-rad)*.75); padding:.7rem; min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:var(--color-card); position:relative; }
.iq-option svg { width:70px; max-width:100%; height:70px; display:block; }
.iq-option-letter { font-size:.7rem; font-weight:700; color:var(--color-muted); border:1px solid var(--color-rule); background:var(--color-base); display:flex; align-items:center; justify-content:center; min-width:25px; height:25px; border-radius:calc(var(--color-rad)*.4); }
.iq button.iq-option[aria-checked=true] { border-color:var(--color-main); background:color-mix(in srgb,var(--color-main) 6%,var(--color-card)); box-shadow:0 3px 0 var(--color-main); }
.iq-option[aria-checked=true] .iq-option-letter { color:var(--color-card); background:var(--color-main); border-color:var(--color-main); }
.iq button.iq-option:hover { transform:translateY(-2px); border-color:var(--color-main); }
.iq button.iq-option:active { transform:translateY(0); }
.iq-controls { display:flex; gap:.7rem; justify-content:space-between; margin:1.8rem 0 .2rem; padding-top:1rem; border-top:1px solid var(--color-rule); }
.iq-controls button { flex:1; max-width:180px; }
#iq-skip { background:transparent; color:var(--color-muted); border-color:transparent; font-size:.78rem; }
.iq-map { margin:1.4rem 0; border:1px solid var(--color-rule); border-radius:var(--color-rad); background:var(--color-card); padding:.75rem 1rem; }
.iq summary { cursor:pointer; font-size:.87rem; font-weight:650; padding:.45rem 0; color:var(--color-ink); }
.iq summary::marker { color:var(--color-main); }
.iq-map p { font-size:.76rem; color:var(--color-muted); margin:.5rem 0 .9rem; }
.iq-map-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:.55rem; margin:.7rem 0; }
.iq button.iq-map-tile { padding:.4rem; min-height:44px; border-radius:calc(var(--color-rad)*.5); font-variant-numeric:tabular-nums; font-size:.82rem; position:relative; }
.iq-map-tile.is-answered { background:color-mix(in srgb,var(--color-hi) 10%,var(--color-card)); border-color:color-mix(in srgb,var(--color-hi) 50%,var(--color-rule)); }
.iq-map-tile.is-current { border:2px solid var(--color-main); color:var(--color-main); }
.iq-map-tile.is-flagged::after { content:''; position:absolute; width:6px; height:6px; background:var(--color-main); border-radius:50%; top:4px; right:4px; }
.iq-score { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:1.5rem; align-items:center; padding:1.8rem; border:1px solid var(--color-rule); border-left:6px solid var(--color-main); border-radius:var(--color-rad); background:var(--color-card); }
#iq-raw { font-family:var(--color-heading); font-size:clamp(2rem,3.5vw,3rem); font-weight:600; letter-spacing:-.045em; margin:.6rem 0 .5rem; }
#iq-percent { font-size:1rem; color:var(--color-main); font-weight:650; margin:.6rem 0; }
#iq-score-note { font-size:.86rem; color:var(--color-muted); line-height:1.65; }
.iq-stats { display:flex; flex-wrap:wrap; gap:1rem; margin:1.3rem 0 0; padding-top:1rem; border-top:1px solid var(--color-rule); }
.iq-stats>div { font-size:.68rem; color:var(--color-muted); min-width:85px; }
.iq-stats strong { display:block; color:var(--color-ink); font-family:var(--color-heading); font-size:1.5rem; font-weight:600; margin-top:.3rem; font-variant-numeric:tabular-nums; }
.iq-ring svg { display:block; width:100%; height:auto; }
.iq-ring-track { fill:none; stroke:var(--color-rule); stroke-width:17; }
.iq-ring-value { fill:none; stroke:var(--color-hi); stroke-width:17; stroke-linecap:round; }
.iq-ring-number { fill:var(--color-ink); font-family:var(--color-heading); font-size:57px; font-weight:650; }
.iq-ring-denominator { fill:var(--color-muted); font-family:var(--color-f2); font-size:21px; }
.iq-profile { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.85rem; margin:1rem 0 1.6rem; }
.iq-profile-item { padding:1rem; border:1px solid var(--color-rule); border-radius:var(--color-rad); background:var(--color-card); min-width:0; }
.iq-profile-item h4 { font-family:var(--color-f2); font-size:.76rem; line-height:1.35; font-weight:650; min-height:2.7em; margin:0 0 .6rem; }
.iq-profile-item>strong { display:block; font-size:1.35rem; font-family:var(--color-heading); margin:.5rem 0 .8rem; color:var(--color-main); }
.iq-profile-track { height:7px; border-radius:var(--color-rad); background:var(--color-rule); overflow:hidden; }
.iq-profile-track span { background:var(--color-hi); display:block; height:100%; }
.iq-result-actions { display:flex; flex-wrap:wrap; gap:.65rem; padding:1rem 0; border-top:1px solid var(--color-rule); border-bottom:1px solid var(--color-rule); }
.iq-result-actions button { flex:1; font-size:.76rem; min-width:145px; }
#iq-copy-text { width:100%; padding:1rem; background:var(--color-base); color:var(--color-ink); border:1px solid var(--color-rule); border-radius:var(--color-rad); margin:1rem 0; font-size:.83rem; resize:vertical; }
.iq-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.iq-review-item { border:1px solid var(--color-rule); border-radius:var(--color-rad); background:var(--color-base); padding:.5rem 1rem; min-width:0; }
.iq-review-item.is-correct { border-left:4px solid var(--color-hi); }
.iq-review-item summary { display:flex; gap:.7rem; align-items:center; font-size:.75rem; }
.iq-review-item summary>b { display:inline-flex; justify-content:center; align-items:center; width:29px; height:29px; background:var(--color-card); border:1px solid var(--color-rule); border-radius:calc(var(--color-rad)*.4); font-variant-numeric:tabular-nums; color:var(--color-main); flex:none; }
.iq-review-item summary>span:last-child { color:var(--color-muted); margin-left:auto; font-size:.67rem; }
.iq-review-item h4 { font-size:.93rem; line-height:1.5; margin:.7rem 0; }
.iq-review-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding:1rem 0; }
.iq-review-compare>div { border:1px solid var(--color-rule); padding:.65rem; background:var(--color-card); border-radius:calc(var(--color-rad)*.5); min-height:125px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; }
.iq-review-compare svg { display:block; width:70px; height:70px; }
.iq-review-compare strong { font-size:.78rem; color:var(--color-muted); }
.iq-review-label { color:var(--color-muted); font-size:.65rem; font-weight:650; }
.iq-rule { font-size:.82rem; line-height:1.75; margin:.5rem 0 1rem!important; border-top:1px solid var(--color-rule); padding-top:.8rem; }
.iq-confirm { border:2px solid var(--color-main); background:var(--color-card); border-radius:var(--color-rad); padding:1.25rem; margin:1rem 0; box-shadow:0 5px 14px color-mix(in srgb,var(--color-main) 9%,transparent); }
.iq-confirm p { font-size:.9rem; font-weight:500; margin:0 0 1rem; }
.iq-confirm button { margin:0 .5rem .25rem 0; }
.iq-notice { color:var(--color-main); font-size:.82rem; margin:.8rem 0; min-height:1.5em; }
.iq-history { border:1px solid var(--color-rule); border-radius:var(--color-rad); background:var(--color-base); padding:.75rem 1.2rem; margin:1rem 0; }
.iq-history ol { padding-left:1.5rem; margin:.7rem 0 1.1rem; font-size:.81rem; }
.iq-history li { padding:.5rem .25rem; border-bottom:1px dashed var(--color-rule); font-variant-numeric:tabular-nums; }
.iq-history li:last-child { border-bottom:0; }
.iq-history>p { font-size:.73rem; color:var(--color-muted); max-width:75ch; }
#iq-clear { font-size:.74rem; background:var(--color-card); color:var(--color-main); }
.iq-local { font-size:.75rem; color:var(--color-muted); line-height:1.7; padding-left:.8rem; border-left:3px solid var(--color-hi); margin:1rem 0 0!important; }
@container puzzle (max-width:780px) { .iq [data-screen=welcome] { grid-template-columns:minmax(0,1fr); gap:.7rem; } .iq-welcome-copy { padding:0; } .iq-welcome-copy h2 { max-width:none; } .iq-welcome-copy>p:not(.iq-kicker) { max-width:70ch; } .iq-profile { grid-template-columns:repeat(3,minmax(0,1fr)); } .iq-review { grid-template-columns:minmax(0,1fr); } .iq-score { grid-template-columns:minmax(0,1fr) 180px; padding:1.3rem; } .iq-result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .iq-result-actions button { min-width:0; } }
@container puzzle (max-width:500px) { .iq-sessionbar { flex-wrap:wrap; gap:.6rem; } #iq-counter { font-size:1.05rem; } #iq-clock { font-size:.73rem; } #iq-finish { font-size:.7rem; width:100%; } .iq-stage { padding:.9rem; } .iq-question-top { gap:.6rem; } #iq-instruction { font-size:1.08rem; margin:1rem 0; } .iq-matrix { padding:.55rem; gap:.35rem; box-shadow:0 3px 0 var(--color-rule); } .iq-cell { padding:.2rem; border-radius:calc(var(--color-rad)*.3); } .iq-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .iq button.iq-option { min-height:105px; padding:.7rem; } .iq-controls { gap:.3rem; flex-wrap:wrap; } .iq-controls button { min-width:0; padding:.6rem .5rem; font-size:.73rem; } #iq-skip { font-size:.7rem; } .iq-map-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; } .iq-score { grid-template-columns:minmax(0,1fr); gap:.75rem; padding:1.1rem; } .iq-ring { width:165px; margin:auto; } #iq-raw { font-size:2.25rem; } .iq-stats { gap:.8rem; } .iq-stats>div { min-width:70px; } .iq-stats strong { font-size:1.2rem; } .iq-profile { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .iq-profile-item { padding:.8rem; } .iq-profile-item h4 { min-height:2.7em; } .iq-limit { padding:.8rem 1rem; font-size:.78rem; } .iq-result-actions button { font-size:.72rem; padding:.6rem .6rem; } .iq-review-item { padding:.45rem .8rem; } .iq-review-item summary { flex-wrap:wrap; gap:.4rem; } .iq-review-compare { gap:.6rem; } .iq-confirm { padding:1rem; } .iq-history { padding:.65rem 1rem; } }
@media (prefers-reduced-motion:reduce) { .iq * { transition:none!important; animation:none!important; } .iq button.iq-option:hover,.iq button:active { transform:none; } }
@media print { .iq { font-size:10pt; } .iq-review { grid-template-columns:1fr 1fr; } .iq-review-item { break-inside:avoid; } .iq-score { break-inside:avoid; } .iq-result-actions,.iq-confirm,#iq-clear { display:none; } .iq-ring { width:150px; } }

/* Readable controls and open puzzle boards instead of nested frames. */
.iq [data-screen=welcome] { grid-template-columns:1fr; gap:.6rem; align-items:start; }
.iq-welcome-copy { padding:0; }
.iq-welcome-copy h2 { font-size:1.6rem; font-weight:700; max-width:none; margin:0 0 .5rem; }
.iq-welcome-copy>p:not(.iq-kicker) { font-size:1rem; line-height:1.5; max-width:70ch; margin:.4rem 0 .6rem; }
.iq-mode { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.6rem 0; }
.iq-mode legend { font-size:.9rem; margin-bottom:.3rem; }
.iq-mode label { font-size:1rem; min-height:48px; padding:.6rem .8rem; border-radius:calc(var(--color-rad)*.5); }
.iq-hint { font-size:.88rem!important; line-height:1.5; }
.iq-welcome-copy>p.iq-hint { font-size:.88rem; margin:.5rem 0 .65rem; }
#iq-start { font-size:1rem; min-height:48px; padding:.65rem 1.2rem; }
.iq-limit { padding:.65rem 0; border:0; border-radius:0; background:transparent; font-size:.9rem; line-height:1.5; margin:.2rem 0!important; }
.iq-local { font-size:.88rem; border:0; padding:0; }
.iq-history { border:0; border-radius:0; background:transparent; padding:.4rem 0; margin:.5rem 0; }
.iq-history summary { font-size:.95rem; }
.iq-history>p { font-size:.88rem; }
.iq-notice:empty { min-height:0; margin:0; }
.iq-stage { padding:1rem 0; background:transparent; border:0; border-radius:0; }
.iq-matrix { border:0; border-radius:0; background:transparent; box-shadow:none; padding:.25rem; }
.iq-cell { border:0; padding:.4rem; background:var(--color-base); }
.iq-choose,.iq-family { font-size:.95rem; }
.iq-controls { border:0; padding-top:0; }
.iq-controls button,#iq-skip,#iq-finish,#iq-flag { font-size:.95rem; min-height:44px; }
.iq-map { border:0; padding:.6rem 0; }
.iq-map p,.iq-review-label,.iq-review-item summary,.iq-review-item summary>span:last-child,.iq-rule { font-size:.9rem; }
.iq-stats>div { font-size:.9rem; }
.iq-result-actions button { font-size:.9rem; }
.iq-profile-item h4 { font-size:.9rem; }

.iq-profile-track span { animation:iq-bar-reveal .5s ease-out both; transform-origin:left; }
.iq-cell { animation:iq-question-reveal .18s ease-out; }
.iq-review-matrix { max-width:440px; margin:1rem auto; gap:.35rem; }
.iq-review-matrix .iq-cell { background:var(--color-card); }
.iq-review-matrix .iq-cell.iq-missing { background:var(--color-base); }
.iq button:focus-visible,.iq input:focus-visible,.iq textarea:focus-visible,.iq summary:focus-visible { outline:3px solid var(--color-main); outline-offset:3px; }
@keyframes iq-question-reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

@keyframes iq-bar-reveal { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@container puzzle (max-width:500px) {
 .iq-mode { grid-template-columns:1fr; gap:.4rem; }
 .iq-welcome-copy h2 { font-size:1.35rem; }
 .iq-sessionbar { padding:.4rem 0; align-items:center; }
 #iq-clock { font-size:.95rem; }
 #iq-finish { width:auto; padding:.45rem .6rem; }
 .iq-stage { padding:.4rem 0; }
 .iq-matrix { padding:0; box-shadow:none; margin:1rem auto; }
 .iq-cell { padding:.3rem; }
 .iq-controls button,#iq-skip { font-size:.95rem; }
 .iq-map-grid { gap:.4rem; }
 .iq-limit { padding:.5rem 0; font-size:.9rem; }
 .iq-result-actions button { font-size:.9rem; }
 .iq-review-item { padding:.6rem .8rem; }
 .iq-history { padding:.4rem 0; }
 .iq-review-item summary { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .iq-cell,.iq-ring-value,.iq-profile-track span { animation:none; } }

/* The score ring is drawn by the Web Animations API; its labels stay stable. */
.iq h2,.iq h3,.iq h4,#iq-counter,#iq-raw { letter-spacing:0; }
.iq button { font-size:1rem; overflow-wrap:anywhere; hyphens:auto; }
.iq-next-step { font-size:1rem; line-height:1.6; max-width:70ch; }
.iq-next-step a { color:var(--color-main); text-underline-offset:.2em; }
.iq-score { border:0; border-radius:var(--color-rad); background:color-mix(in srgb,var(--color-main) 6%,var(--color-card)); }
.iq-profile-item { border:0; border-radius:0; padding:.8rem .5rem; }
.iq-profile-item>strong { font-variant-numeric:tabular-nums; }
#iq-score-note { font-size:1rem; }

/* Review the missed rules without hunting through twenty completed items. */
.iq-review-filters { display:flex; flex-wrap:wrap; gap:.65rem; margin:1rem 0 .4rem; }
.iq-review-filters button { flex:1 1 220px; min-width:0; font-size:1rem; line-height:1.4; }
.iq-review-filters button[aria-pressed=true] { background:var(--color-main); border-color:var(--color-main); color:var(--color-card); }
.iq-review-filters button[aria-pressed=true]:hover { background:color-mix(in srgb,var(--color-main) 87%,var(--color-ink)); }
.iq-hint { font-size:.95rem!important; }
.iq-option-letter,.iq-cell-label { font-size:1rem; }
.iq-option-letter { border:0; background:transparent; }
.iq-result-actions button,.iq-review-label,.iq-review-item summary,.iq-review-item summary>span:last-child,.iq-rule,.iq-profile-item h4,.iq-notice,.iq-history ol,.iq-history>p,#iq-clear,.iq-local,.iq-map p { font-size:1rem; }
.iq-review { align-items:start; }
.iq-review-item summary::after { content:''; flex:none; width:.5rem; height:.5rem; border-right:2px solid var(--color-main); border-bottom:2px solid var(--color-main); transform:rotate(45deg); margin:0 .25rem .25rem .35rem; }
.iq-review-item[open] summary::after { transform:rotate(225deg); margin-top:.3rem; }

/* [C] The entire tool is one stage: no second frame around the question. */
.iq { font-size:16px; }
.iq [data-screen=welcome] { display:block; }
.iq-welcome-copy h2 { font-size:24px; line-height:1.25; font-weight:600; }
.iq-welcome-copy>p:not(.iq-kicker) { font-size:16px; line-height:1.6; margin:10px 0 18px; }
.iq-mode { gap:12px; margin:16px 0; }
.iq-mode legend { color:var(--color-ink); font-size:16px; margin-bottom:8px; }
.iq-mode label { border:0; min-height:58px; padding:12px; background:var(--color-base); border-radius:10px; font-weight:500; transition:background-color .16s,box-shadow .16s; }
.iq-mode label:has(input:checked) { background:color-mix(in srgb,var(--color-main) 8%,var(--color-card)); box-shadow:inset 0 0 0 2px var(--color-main); }
.iq-mode input { width:20px; height:20px; }
#iq-start { width:100%; min-height:54px; margin:8px 0 12px; border-radius:10px; font-size:18px; font-weight:600; }
.iq-hint { font-size:16px!important; }
.iq-limit { color:var(--color-muted); font-size:16px; line-height:1.6; padding:8px 0; }
.iq-welcome-copy>p.iq-hint { font-size:16px; line-height:1.55; margin:8px 0; }
.iq-resume { border:0; border-radius:0; border-top:1px solid var(--color-rule); padding:16px 0 0; margin-top:16px; font-size:16px; }
.iq-sessionbar { padding:0 0 8px; border:0; gap:12px; }
#iq-counter { font-size:19px; font-weight:600; letter-spacing:0; }
#iq-clock { padding:4px 0; font-size:16px; background:transparent; border:0; color:var(--color-muted); }
#iq-clock.is-low { color:var(--color-main); font-weight:700; }
#iq-finish { min-height:44px; padding:8px 10px; border:0; color:var(--color-main); background:var(--color-base); }
.iq-progress { height:8px; margin:4px 0 8px; border-radius:8px; }
.iq-progress>span { background:var(--color-hi); }
#iq-progress-text { margin:0 0 16px; }
.iq-stage { padding:0; border:0; border-radius:0; background:transparent; }
.iq-question-top { gap:10px; }
.iq-family { padding:0; border:0; font-size:16px; font-weight:500; }
#iq-flag { padding:8px 10px; border:0; background:var(--color-base); font-size:16px; }
#iq-instruction { margin:16px 0 20px; font-size:24px; line-height:1.35; font-weight:600; }
.iq-matrix { width:min(440px,100%); margin:20px auto; padding:0; gap:10px; border:0; background:transparent; border-radius:0; box-shadow:none; }
.iq-cell { padding:8px; border:0; border-radius:10px; background:var(--color-base); }
.iq-cell.iq-missing { border:0; background:color-mix(in srgb,var(--color-main) 10%,var(--color-card)); font-size:48px; }
.iq-cell.iq-spacer { background:transparent; border:0; }
.iq-choose { text-align:left; margin:16px 0 12px!important; font-size:16px; }
.iq-options { gap:12px; }
.iq button.iq-option { padding:10px; min-height:112px; border:0; border-radius:10px; background:var(--color-base); box-shadow:none; transition:background-color .16s,box-shadow .16s,transform .16s; }
.iq button.iq-option[aria-checked=true] { background:color-mix(in srgb,var(--color-main) 9%,var(--color-card)); box-shadow:inset 0 0 0 2px var(--color-main); }
.iq button.iq-option:hover { background:color-mix(in srgb,var(--color-main) 7%,var(--color-card)); }
.iq-option-letter { min-height:24px; color:var(--color-muted); background:transparent; border:0; border-radius:6px; font-size:16px; }
.iq-option[aria-checked=true] .iq-option-letter { color:var(--color-main); background:transparent; font-weight:700; }
.iq-controls { margin:20px 0 8px; padding:0; border:0; gap:12px; }
.iq-controls button { min-height:48px; font-size:16px; padding:10px; border-radius:10px; }
.iq-map { margin:20px 0 8px; padding:0; border:0; background:transparent; }
.iq-map summary { font-size:16px; min-height:44px; }
.iq-map-grid { gap:8px; }
.iq button.iq-map-tile { min-height:44px; padding:6px; border:0; border-radius:7px; background:var(--color-base); font-size:16px; }
.iq button.iq-map-tile.is-current { box-shadow:inset 0 0 0 2px var(--color-main); }
.iq button.iq-map-tile.is-answered { background:color-mix(in srgb,var(--color-hi) 12%,var(--color-card)); }
/* A separate result screen: a large raw count on an indigo plane. */
.iq-score { padding:24px; margin:0 0 20px; border:0; border-radius:var(--color-rad); background:var(--color-main); color:var(--color-card); gap:18px; }
.iq-score .iq-kicker,.iq-score #iq-percent,.iq-score #iq-score-note,.iq-score .iq-stats>div { color:var(--color-card); }
#iq-raw { color:var(--color-card); font-size:clamp(32px,4vw,44px); font-weight:700; letter-spacing:0; line-height:1.15; }
.iq-stats { border-color:color-mix(in srgb,var(--color-card) 30%,transparent); gap:16px; }
.iq-stats strong { color:var(--color-card); font-size:24px; }
.iq-ring-track { stroke:color-mix(in srgb,var(--color-card) 25%,var(--color-main)); }
.iq-ring-number,.iq-ring-denominator { fill:var(--color-card); }
.iq-result-actions { border:0; gap:10px; margin:12px 0; }
.iq-result-actions button { background:var(--color-base); border:0; border-radius:10px; min-height:48px; }
.iq-profile { grid-template-columns:1fr; gap:0; margin:16px 0 24px; }
.iq-profile-item { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; padding:12px 0; background:transparent; }
.iq-profile-item h4 { min-height:0; font-size:16px; margin:0; align-self:center; }
.iq-profile-item>strong { font-size:20px; margin:0; color:var(--color-main); }
.iq-profile-track { grid-column:1/-1; height:8px; margin-top:8px; }
.iq-scale { margin:20px 0 28px; }
.iq-scale h3 { font-size:20px; margin:0 0 12px; font-weight:600; }
.iq-scale-svg { display:block; width:100%; height:auto; }
.iq-scale-area { fill:color-mix(in srgb,var(--color-main) 10%,var(--color-card)); }
.iq-scale-curve { fill:none; stroke:var(--color-main); stroke-width:3; }
.iq-scale-axis { stroke:var(--color-rule); stroke-width:2; }
.iq-scale-marker { stroke:var(--color-main); stroke-width:2; stroke-dasharray:4 5; }
.iq-scale-point { fill:var(--color-hi); stroke:var(--color-main); stroke-width:2; }
.iq-scale-svg text { fill:var(--color-ink); font-family:var(--color-f2); font-size:18px; font-variant-numeric:tabular-nums; }
.iq-scale figcaption { color:var(--color-muted); font-size:16px; line-height:1.65; margin-top:8px; }
.iq-scale figcaption a { color:var(--color-main); }
.iq-review { grid-template-columns:1fr; gap:0; }
.iq-review-item { padding:10px 0; background:transparent; border:0; border-bottom:1px solid var(--color-rule); border-radius:0; }
.iq-review-item.is-correct { border-left:0; }
.iq-review-item summary { min-height:44px; font-size:16px; padding:8px 0; }
.iq-review-item summary>b { border:0; background:var(--color-base); min-width:32px; height:32px; border-radius:8px; }
.iq-review-item summary>span:last-child { font-size:16px; }
.iq-review-compare>div { border:0; border-radius:10px; background:var(--color-base); }
.iq-review-matrix { width:min(360px,100%); }
.iq-rule { border:0; padding-top:0; font-size:16px; line-height:1.7; }
.iq-history { margin-top:16px; padding:16px 0 0; border-top:1px solid var(--color-rule); }
.iq-history summary { font-size:16px; }
.iq-local { color:var(--color-muted); font-size:16px; padding:0; border:0; }
@container puzzle (max-width:500px) {
 .iq-mode { grid-template-columns:1fr; }
 .iq-score { grid-template-columns:1fr; margin-inline:0; padding:20px 18px; }
 .iq-ring { width:150px; }
 .iq-sessionbar { flex-wrap:wrap; gap:6px 12px; }
 #iq-finish { margin-left:auto; }
 #iq-counter { font-size:18px; }
 #iq-instruction { font-size:22px; }
 .iq-question-top { flex-wrap:wrap; }
 .iq-matrix { gap:6px; margin:16px auto; }
 .iq-cell { padding:5px; }
 .iq-cell.iq-missing { font-size:36px; }
 .iq-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .iq button.iq-option { min-height:108px; }
 .iq-controls { gap:8px; }
 .iq-controls button { padding:8px 6px; }
 .iq-map-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .iq-review-item summary { gap:8px; }
 .iq-score .iq-stats { justify-content:space-between; }
}
@media(prefers-reduced-motion:reduce) {
 .iq-mode label,.iq button.iq-option { transition:none; }
 .iq-scale-curve,.iq-scale-point { animation:none; }
}

/* SVG labels scale with the diagram; enlarge them on small screens. */
@container puzzle (max-width:500px) { .iq-scale-svg text { font-size:28px; } }
/* Bug hunt 11.10: in the review the "Your answer" / "Intended answer" captions sat at different heights (content was centred vertically); align captions on one line. */
.iq-review-compare>div { justify-content:flex-start; padding-top:.9rem; }
.iq-review-compare>div>.iq-review-label { min-height:1.4em; }

.iq-score .iq-result-mode { margin:0 0 8px; color:var(--color-card); font-size:16px; }
@container puzzle (max-width:500px) {
 .iq-welcome-copy>p:not(.iq-kicker) { margin:8px 0 12px; }
 .iq-mode { margin:12px 0; gap:8px; }
 .iq-mode label { min-height:50px; padding:10px 12px; }
 #iq-start { margin:4px 0 8px; }
}

/* design: sites/<d>/design/site.css */
/* [C] Wizard stage. A centered masthead and a quiet page place the test first.
   Heebo is used throughout: readable questions, open numerals, normal tracking. */
:root {
 --color-base:#f5f7ff;
 --color-card:#ffffff;
 --color-ink:#202346;
 --color-muted:#4d5575;
 --color-main:#3730a3;
 --color-hi:#10b981;
 --color-rule:#dce1f2;
 --color-rad:18px;
}
body { background:var(--color-base); color:var(--color-ink); font-family:var(--color-f2); font-size:17px; line-height:1.7; }
h1,h2,h3,h4 { font-family:var(--color-heading); letter-spacing:0; }
.iq-wra { width:100%; max-width:1040px; padding:0 24px; margin-inline:auto; }
.iq-mai { padding-top:0; padding-bottom:48px; }
.iq-mai p,.iq-mai li { overflow-wrap:break-word; }
.iq-mai a { text-underline-offset:.2em; }
.iq-hea { position:relative; background:var(--color-base); color:var(--color-ink); border:0; border-radius:0; padding:0; margin:0; box-shadow:none; }
.iq-heain { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:1040px; min-height:90px; gap:20px; padding:18px 24px; margin:0 auto; background:transparent; border:0; border-radius:0; box-shadow:none; }
.iq-hea .iq-bra { grid-column:2; justify-self:center; display:flex; align-items:center; gap:10px; font-size:20px; font-family:var(--color-heading); font-weight:700; line-height:1.2; letter-spacing:0; color:var(--color-main); white-space:nowrap; text-decoration:none; }
.iq-bra svg { width:32px; height:32px; flex:none; border-radius:8px; }
.iq-hea .iq-nav { grid-column:3; justify-self:end; display:flex; flex-wrap:nowrap; align-items:center; gap:12px; min-width:0; }
.iq-hea .iq-nav>a { padding:8px 2px; min-height:44px; color:var(--color-ink); background:transparent; border:0; border-radius:0; font-size:16px; font-weight:500; text-transform:none; letter-spacing:0; text-decoration:none; }
.iq-hea .iq-nav>a:hover { color:var(--color-main); background:transparent; text-decoration:underline; text-underline-offset:5px; }
.iq-land { position:relative; font-size:16px; }
.iq-land summary { display:flex; align-items:center; gap:6px; padding:9px 12px; min-height:44px; border:0; border-radius:10px; background:var(--color-card); color:var(--color-ink); font-size:16px; cursor:pointer; }
.iq-land summary:hover { color:var(--color-main); background:color-mix(in srgb,var(--color-main) 7%,var(--color-card)); }
.iq-lanlis { position:absolute; right:0; left:auto; top:calc(100% + 8px); z-index:20; min-width:185px; padding:8px; background:var(--color-card); color:var(--color-ink); border:1px solid var(--color-rule); border-radius:12px; box-shadow:0 12px 24px color-mix(in srgb,var(--color-ink) 12%,transparent); }
.iq-hea .iq-lanlis a { display:block; color:var(--color-ink)!important; background:var(--color-card); font-size:16px; line-height:1.5; min-height:44px; padding:10px 12px; border:0; border-radius:7px; font-weight:500; }
.iq-hea .iq-lanlis a:hover { color:var(--color-main)!important; background:var(--color-base); text-decoration:underline; }
.iq-cod,.iq-lan { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.iq-cod a,.iq-lan a { font-size:16px; padding:8px 10px; min-height:44px; background:var(--color-card); color:var(--color-ink); border:0; border-radius:8px; }
.iq-cod a[aria-current],.iq-lan a[aria-current] { color:var(--color-main); text-decoration:underline; }
/* The title belongs above a single narrow stage, never beside an illustration. */
.iq-her,.iq-her--art { display:block; max-width:640px; min-height:0; padding:22px 0 26px; margin:0 auto; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; }
.iq-her::before,.iq-her::after { content:none; }
.iq-her h1 { max-width:none; font-size:clamp(30px,3.3vw,42px); font-weight:700; line-height:1.15; letter-spacing:0; margin:0 0 12px; color:var(--color-main); }
.iq-her .iq-lea { max-width:60ch; margin:0 auto; font-size:17px; font-weight:400; line-height:1.55; color:var(--color-muted); }
.iq-too { width:100%; max-width:640px; padding:28px 32px 24px; margin:0 auto 44px; background:var(--color-card); border:0; border-top:7px solid var(--color-main); border-radius:var(--color-rad); box-shadow:0 10px 30px color-mix(in srgb,var(--color-main) 8%,transparent); }
.iq-lay { display:block; }
.iq-lay>div,.iq-lay>aside { min-width:0; }
.iq-toc { position:static; max-width:720px; margin:32px auto; padding:0; border:0; border-radius:0; background:transparent; font-size:16px; line-height:1.6; }
.iq-toc>strong,.iq-toc>p { display:block; margin:0 0 10px; font-family:var(--color-f2); font-size:17px; font-weight:600; color:var(--color-ink); }
.iq-toc ol,.iq-toc ul { padding-left:22px; margin:0; columns:2; gap:30px; }
.iq-toc li { padding:4px 0; break-inside:avoid; }
.iq-toc a { color:var(--color-main); font-size:16px; line-height:1.6; text-decoration:none; }
.iq-toc a:hover { text-decoration:underline; }
/* Reading sections share a book-like measure, separate from the test stage. */
.iq-sec { max-width:720px; padding:28px 0; margin:0 auto; border:0; border-radius:0; background:transparent; }
.iq-sec h2 { max-width:30ch; padding:0; border:0; margin:0 0 16px; color:var(--color-ink); font-size:clamp(25px,2.4vw,30px); font-weight:600; line-height:1.25; letter-spacing:0; }
.iq-sec h2::before,.iq-sec h2::after { content:none; }
.iq-sec h3,.iq-pos h3 { font-size:21px; font-weight:600; line-height:1.4; color:var(--color-ink); margin:28px 0 12px; }
.iq-sec p,.iq-pos p { max-width:72ch; font-size:17px; line-height:1.8; margin:12px 0 18px; }
.iq-sec ul,.iq-sec ol { padding-left:24px; font-size:17px; line-height:1.8; }
.iq-sec li { padding-left:3px; margin:8px 0; }
.iq-sec a,.iq-pos a { color:var(--color-main); text-decoration:underline; text-decoration-thickness:1px; }
.iq-sec a:hover,.iq-pos a:hover { text-decoration-thickness:2px; }
.iq-not { padding:16px 20px; margin:24px 0; border:0; border-left:4px solid var(--color-hi); border-radius:0; background:color-mix(in srgb,var(--color-hi) 5%,var(--color-card)); color:var(--color-ink); font-size:17px; line-height:1.7; }
.iq-for { margin:24px 0; padding:20px; border:0; border-radius:10px; background:color-mix(in srgb,var(--color-main) 5%,var(--color-card)); color:var(--color-main); font:600 22px/1.5 var(--color-heading); overflow-wrap:anywhere; }
.iq-tabwra { width:100%; overflow-x:auto; margin:24px 0; border:0; border-radius:0; background:transparent; }
.iq-tab { border-collapse:collapse; width:100%; margin:0; font-size:16px; line-height:1.6; font-variant-numeric:tabular-nums; }
.iq-tab caption { padding:12px 0; color:var(--color-ink); font-weight:600; font-size:16px; text-align:left; background:transparent; border:0; }
.iq-tab th,.iq-tab td { padding:13px 14px; text-align:left; vertical-align:top; border:0; border-bottom:1px solid var(--color-rule); }
.iq-tab thead th { background:var(--color-main); color:var(--color-card); font-weight:600; font-size:16px; text-transform:none; letter-spacing:0; }
.iq-tab tbody th { color:var(--color-ink); font-weight:600; }
.iq-tab tbody tr:nth-child(even) { background:color-mix(in srgb,var(--color-main) 3%,var(--color-card)); }
.iq-tab tbody tr:hover { background:color-mix(in srgb,var(--color-hi) 6%,var(--color-card)); }
.iq-fig { margin:28px 0; padding:0; border:0; border-radius:0; background:transparent; }
.iq-fig img { display:block; width:100%; height:auto; border:0; border-radius:12px; background:var(--color-base); }
.iq-fig figcaption { padding:12px 0 0; color:var(--color-muted); font-size:16px; line-height:1.6; }
.iq-ste { padding-left:24px; margin:18px 0; }
.iq-ste li { padding:5px 0 5px 3px; }
.iq-ste li::marker { color:var(--color-main); font-weight:600; }
.iq-btn,.iq-cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; background:var(--color-main); color:var(--color-card); border:0; border-radius:10px; font-family:var(--color-f2); font-size:17px; font-weight:600; text-transform:none; letter-spacing:0; text-decoration:none; }
.iq-btn:hover,.iq-cta:hover { background:color-mix(in srgb,var(--color-main) 88%,var(--color-ink)); }
/* Guide previews use wide illustrations and open copy, rather than nested boxes. */
.iq-car { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px auto 36px; max-width:960px; }
.iq-cara { min-width:0; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.iq-carimg { display:block; aspect-ratio:1200/630; overflow:hidden; background:var(--color-base); border:0; border-radius:12px; }
.iq-carimg img { width:100%; height:100%; object-fit:cover; display:block; }
.iq-cartxt { padding:16px 0; }
.iq-cartxt h3 { font-size:22px; font-weight:600; line-height:1.3; letter-spacing:0; margin:6px 0 10px; }
.iq-cara h3 a { color:var(--color-ink); text-decoration:none; }
.iq-cara h3 a:hover { color:var(--color-main); text-decoration:underline; }
.iq-cartxt p,.iq-carmet { color:var(--color-muted); font-size:16px; line-height:1.65; text-transform:none; letter-spacing:0; margin:10px 0; }
.iq-bli { display:flex; flex-direction:column; gap:32px; max-width:880px; margin:24px auto 40px; }
.iq-bro { display:grid; grid-template-columns:280px minmax(0,1fr); align-items:center; gap:28px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.iq-bro>a { display:block; border:0; border-radius:12px; overflow:hidden; background:var(--color-base); aspect-ratio:1200/630; }
.iq-bro>a img { width:100%; height:100%; object-fit:cover; display:block; }
.iq-bro>div { min-width:0; padding:0; border:0; }
.iq-bro h3 { margin:8px 0 10px; color:var(--color-ink); font-size:25px; font-weight:600; line-height:1.25; letter-spacing:0; }
.iq-bro h3 a { color:inherit; text-decoration:none; }
.iq-bro h3 a:hover { color:var(--color-main); text-decoration:underline; }
.iq-bro p { font-size:17px; line-height:1.65; color:var(--color-muted); margin:8px 0; }
.iq-bro .iq-carmet { font-size:16px; letter-spacing:0; }
.iq-cru { max-width:720px; margin:18px auto; color:var(--color-muted); font-size:16px; line-height:1.6; }
.iq-cru a { color:var(--color-main); text-decoration:none; }
.iq-cru a:hover { text-decoration:underline; }
.iq-pos { max-width:880px; margin:auto; }
.iq-poshea { max-width:720px; padding:24px 0; margin:0 auto; background:transparent; border:0; border-radius:0; box-shadow:none; }
.iq-poshea h1 { font-size:clamp(30px,3vw,42px); font-weight:700; line-height:1.18; letter-spacing:0; color:var(--color-main); margin:12px 0 20px; max-width:26ch; }
.iq-poskic,.iq-posmet,.iq-rea,.iq-kic { font-family:var(--color-f2); color:var(--color-muted); font-size:16px; line-height:1.6; text-transform:none; letter-spacing:0; padding:0; margin:8px 0; border:0; }
.iq-poscov { max-width:720px; padding:0; margin:0 auto 28px; border:0; border-radius:12px; background:var(--color-base); overflow:hidden; }
.iq-poscov img { display:block; width:100%; height:auto; border:0; }
.iq-pos>p,.iq-pos>ul,.iq-pos>ol { max-width:720px; margin:18px auto; font-size:17px; line-height:1.8; }
.iq-pos .iq-lea { max-width:720px; margin:28px auto; padding:0; border:0; background:transparent; color:var(--color-ink); font-size:20px; line-height:1.65; font-weight:400; }
.iq-pos .iq-lea::first-letter { float:none; font:inherit; color:inherit; margin:0; }
.iq-pos .iq-sec { padding:24px 0; }
.iq-pos .iq-fig,.iq-pos .iq-tabwra { max-width:720px; margin-inline:auto; }
.iq-toc--post { position:static!important; top:auto; max-width:720px; margin:28px auto!important; padding:20px 24px; border:0; border-radius:12px; background:var(--color-card); }
.iq-toc--post ol { columns:1; }
.iq-faq { max-width:720px; padding:28px 0; margin:20px auto; border:0; }
.iq-faq>h2 { font-family:var(--color-heading); font-size:28px; line-height:1.3; font-weight:600; letter-spacing:0; margin:0 0 20px; }
.iq-faqgri { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.iq-faqgri>div { padding:0; border:0; border-radius:0; background:transparent; }
.iq-faqgri h3 { font-size:19px; font-weight:600; line-height:1.4; margin:0 0 10px; }
.iq-faqgri p { font-size:17px; line-height:1.7; color:var(--color-muted); margin:0; }
.iq-faq details { border:0; border-bottom:1px solid var(--color-rule); padding:0; margin:0; background:transparent; border-radius:0; }
.iq-faq summary { font-size:18px; font-weight:600; line-height:1.5; padding:18px 0; cursor:pointer; }
.iq-faq details p { font-size:17px; line-height:1.7; color:var(--color-muted); margin:0 0 18px; }
/* One closing indigo plane carries the site's visual identity through all pages. */
.iq-foo { margin-top:24px; padding:36px 0; background:var(--color-main); color:var(--color-card); border:0; }
.iq-foo::before,.iq-foo::after { content:none; }
.iq-fooin { max-width:1040px; margin:auto; padding:0 24px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.iq-foo .iq-bra { font:600 20px/1.4 var(--color-heading); color:var(--color-card); text-decoration:none; }
.iq-foo p { color:var(--color-card); font-size:16px; line-height:1.7; margin:0; }
.iq-foo nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; }
.iq-foo a { display:inline-block; color:var(--color-card); font-size:16px; min-height:44px; padding:10px 0; text-underline-offset:4px; }
.iq-foo a:hover { color:var(--color-card); text-decoration-thickness:2px; }
.iq-foo .iq-lan { justify-content:center; }
.iq-foo .iq-lan a { padding:8px 12px; background:var(--color-card); color:var(--color-main); }
@media(max-width:900px) {
 .iq-heain { grid-template-columns:1fr; justify-content:center; gap:10px; padding:18px 24px 12px; }
 .iq-hea .iq-bra,.iq-hea .iq-nav { grid-column:1; justify-self:center; }
 .iq-hea .iq-nav { flex-wrap:wrap; justify-content:center; gap:16px; }
 .iq-bro { grid-template-columns:240px minmax(0,1fr); gap:20px; }
 .iq-car { grid-template-columns:1fr; gap:24px; }
 .iq-cara { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; }
 .iq-cartxt { padding:0; }
}
@media(max-width:560px) {
 body { font-size:16px; }
 .iq-wra { padding-inline:16px; }
 .iq-heain { padding:16px 16px 8px; min-height:0; }
 .iq-hea .iq-bra { font-size:20px; white-space:normal; text-align:center; }
 .iq-her { padding:16px 0 20px; }
 .iq-her h1 { font-size:32px; line-height:1.15; margin-bottom:10px; }
 .iq-her .iq-lea { font-size:16px; line-height:1.55; }
 .iq-too { padding:20px 18px; margin-bottom:32px; border-top-width:6px; border-radius:16px; }
 .iq-sec { padding:22px 0; }
 .iq-sec h2 { font-size:25px; }
 .iq-sec p,.iq-pos p,.iq-sec li { font-size:16px; line-height:1.75; }
 .iq-toc ol { columns:1; }
 .iq-bro,.iq-cara { grid-template-columns:1fr; gap:16px; }
 .iq-bro h3,.iq-cartxt h3 { font-size:23px; }
 .iq-poshea { padding:20px 0; }
 .iq-poshea h1 { font-size:32px; }
 .iq-pos .iq-lea { font-size:19px; }
 .iq-faqgri { grid-template-columns:1fr; gap:24px; }
 .iq-faq>h2 { font-size:25px; }
 .iq-tab th,.iq-tab td { padding:12px 10px; }
 .iq-fooin { padding-inline:16px; }
}
@media print {
 body { background:var(--color-card); }
 .iq-too { box-shadow:none; border:0; padding:0; }
 .iq-poshea h1 { color:var(--color-ink); }
 .iq-sec { break-inside:avoid; }
 .iq-foo { background:var(--color-card); color:var(--color-ink); }
 .iq-foo a,.iq-foo p { color:var(--color-ink); }
}

/* The result is its own screen, without a second white frame. */
.iq-too:has(.iq[data-screen=result]) { background:transparent; padding:0; border:0; box-shadow:none; }

/* The builder renders guide previews as one link with a bold title and spans. */
.iq-sec a.iq-bro,.iq-sec a.iq-cara,.iq-bro,.iq-cara { color:var(--color-ink); text-decoration:none; }
.iq-bro b,.iq-cara b { display:block; font-family:var(--color-heading); font-weight:600; letter-spacing:0; line-height:1.3; font-size:23px; margin:0 0 10px; }
.iq-bro .iq-cartxt>span,.iq-cara .iq-cartxt>span { color:var(--color-muted); font-size:16px; line-height:1.65; }
.iq-bro .iq-carmet,.iq-cara .iq-carmet { margin-top:12px; font-weight:500; }
.iq-bro:hover b,.iq-cara:hover b { color:var(--color-main); text-decoration:underline; text-underline-offset:4px; }
.iq-bro:focus-visible,.iq-cara:focus-visible { outline:3px solid var(--color-main); outline-offset:6px; }
@media(max-width:560px) { .iq-bro b,.iq-cara b { font-size:22px; } }

/* Preserve the whole cover illustration in a narrow guide-preview column. */
.iq-bro .iq-carimg { width:100%; height:auto; aspect-ratio:1200/630; min-height:0; object-fit:contain; border-radius:12px; }

/* Keep the first action within a small phone's initial viewport. */
@media(max-width:560px) {
 .iq-heain { padding-top:12px; gap:6px; }
 .iq-her { padding:12px 0 16px; }
 .iq-too { padding-top:16px; }
}