/* Load after the legacy inline styles; keep question facts and counts intact. */
:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#080d1c;color:#edf5ff;font-size:18px;line-height:1.55;--edge:#526d91;--muted:#c3d3e8;--accent:#9be6ff}
body{margin:0;background:radial-gradient(ellipse at 15% 0,#23365a88,transparent 55%),radial-gradient(ellipse at 95% 15%,#35265466,transparent 50%),#080d1c;min-height:100dvh}
main{max-width:1120px;padding:20px 24px 28px;margin:auto;overflow-wrap:anywhere}
header{gap:12px;padding-bottom:8px;border-bottom:1px solid #344663}
h1{font-size:clamp(20px,2.4vw,28px);letter-spacing:.025em;margin:4px 0;font-weight:800}
h2{font-size:22px;line-height:1.4;margin:16px 0 10px}h3{font-size:21px;line-height:1.5}p{line-height:1.65;margin:12px 0}
button,select,summary{min-height:48px;font:inherit;line-height:1.4}button,select{padding:11px 16px;border-color:var(--edge);border-radius:13px;background:#192b47;color:#edf5ff}button{touch-action:manipulation;font-weight:600}button:disabled{opacity:1;color:#c3d3e8;background:#202c40;border-color:#53647e}
@media(hover:hover){button:not(:disabled):hover{background:#274a70;border-color:var(--accent)}}
button.active,button[aria-pressed="true"]{background:#244e72;border-color:#9be6ff;box-shadow:inset 0 -3px #9be6ff}
:where(button,select,summary,input,a):focus-visible{outline:3px solid #ffe394;outline-offset:4px}#question:focus-visible{outline:2px solid #ffe394;outline-offset:6px;border-radius:6px}
nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}nav button{min-width:0;min-height:52px;font-size:18px}
.row{gap:10px}.row>*{min-width:0}#status,#storage,.muted{color:var(--muted);font-size:15px;line-height:1.6}#daily{margin:8px 0}#topic{color:#edf5ff}
article{padding:22px;margin:16px 0;background:linear-gradient(135deg,#15233c,#111a30);border:1px solid var(--edge);border-radius:22px;box-shadow:0 14px 40px #02071344}
#status{padding-bottom:10px;border-bottom:1px solid #384c69;margin-bottom:14px;font-weight:600}
#lesson{max-width:850px;margin:auto}#lesson h3{color:#aeeaff;margin:14px 0 6px}#learn,#example{font-size:20px}#example{padding:14px 18px;background:#1a3046;border:1px solid #436684;border-radius:14px}#begin,#next,#done{min-height:52px;background:#245a77;border-color:#9be6ff;font-weight:750}#begin{margin-top:8px}
summary{display:list-item;padding:12px 8px;font-weight:600;cursor:pointer}details{border-radius:12px}details[open]>summary{color:#b9eeff}#scopeNote{border-bottom:1px solid #344663}#mission{padding:0 12px;border:1px solid #695f9e}#geometryExtra{margin:12px 0;padding:0 12px}
#question{font-size:clamp(23px,2.3vw,28px);line-height:1.55;margin:0 0 16px;font-weight:750;color:#f4f8ff}
#passage{font-size:20px;background:#1a3046;border-left:4px solid #9be6ff;border-radius:12px;padding:16px 20px;white-space:pre-line}
#diagram,.instruction-visual{min-width:0;padding:14px;margin:0;border:1px solid #577498;border-radius:16px;background:#0d182b;max-height:none;overflow:visible}
.instruction-visual:empty{display:none}.instruction-visual{margin:14px 0}
#diagram svg,.instruction-visual svg,#geometryExtra svg{display:block;width:100%;height:auto;max-width:480px;max-height:none;margin:auto}
/* Legacy #diagram svg expanded each countable object to full width. */
#diagram .exact-object,.instruction-visual .exact-object{display:inline-flex;flex:0 0 36px;width:36px;height:40px;max-width:36px;margin:0}
.exact-scene{gap:10px}.exact-group{padding:12px;gap:6px;background:#1c3046;color:#f3f8ff;border-color:#6686a5}.exact-group p{font-size:17px;line-height:1.4;margin:0 0 6px}.exact-group>span:not(.exact-object){font-size:28px;margin:4px}
.context-image{max-width:480px;width:100%;height:auto;object-fit:contain;margin:10px auto;border-radius:12px}.visual-caption{font-size:17px;line-height:1.5;margin:0 0 12px;color:#d8e7fa}.picture-card{font-size:58px}.visual-step{background:#182a43;border-color:#577498}
#answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}#answers button{min-width:0;min-height:68px;font-size:22px;line-height:1.45;text-align:left;padding:14px 18px;border-width:2px;background:#1c304e}
#answers .correct{background:#143e37!important;color:#c3ffe8;border-color:#73e3b5}#answers .wrong{background:#462936!important;color:#ffe1e9;border-color:#f1a2b7}
#thinking{background:#23314d;border-left:4px solid #ffe394;border-radius:10px;padding:12px 16px;font-size:18px;margin:12px 0}#feedback{font-size:19px;padding:12px 16px;margin:12px 0;background:#16263e}#feedback:empty{display:none}
fieldset.mission{padding:12px 16px;margin:12px 0 0}fieldset.mission p{font-size:17px}#confidence{justify-content:flex-start}
.in-practice main>section{display:none}.in-practice #topic{font-size:18px;margin:8px 0}.in-practice article{margin:12px 0}.in-practice #storage{margin:10px 0}
dialog{width:min(94%,760px);padding:22px;border-color:#80d8fb;background:#101b30;color:#edf5ff;max-height:90dvh;border-radius:20px;line-height:1.65}dialog::backdrop{background:#020713dd}dialog label{display:block;padding:10px 0;min-height:48px}input[type=checkbox]{width:26px;height:26px;margin-right:8px;accent-color:#9be6ff}input[type=file]{min-height:48px;width:100%;font:inherit}input::file-selector-button{font:inherit;min-height:48px;padding:8px 12px;border:1px solid #577498;border-radius:10px;background:#192b47;color:white}
@media(min-width:860px){
 #practice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:24px;align-items:start}
 #practice>*{min-width:0;grid-column:1/-1}
 #question{grid-row:1}#passage{grid-row:2;margin:0 0 16px}
 #diagram{grid-column:1;grid-row:3/7;align-self:start}
 #practice>.row:has(#think){grid-column:2;grid-row:3;justify-content:flex-start}
 #answers{grid-column:2;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0}
 #thinking{grid-column:2;grid-row:5}#feedback{grid-column:2;grid-row:6}
 #practice>.row:has(#back){grid-row:7;padding-top:16px;margin-top:16px;border-top:1px solid #384c69}
 #practice:has(#diagram[hidden]) #answers{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
 #practice:has(#diagram[hidden])>.row:has(#think),#practice:has(#diagram[hidden]) #thinking,#practice:has(#diagram[hidden]) #feedback{grid-column:1/-1}
}
@media(max-width:600px){
 main{padding:12px}header{gap:8px}header>span{font-size:15px}header button{font-size:15px;padding:10px 12px}nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}nav button{font-size:17px}article{padding:16px;border-radius:18px}#answers{grid-template-columns:1fr;gap:10px}#answers button{font-size:21px;min-height:60px}#question{font-size:23px;margin:16px 0}#learn,#example,#passage{font-size:19px}#diagram{padding:12px}.row{justify-content:flex-start}#practice>.row button{flex:1}#confidence button{flex:1}dialog{padding:16px}#storage{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){button.active,button[aria-pressed="true"]{outline:2px solid Highlight}.correct,.wrong{border:3px solid CanvasText!important}}