:root{color-scheme:dark;--gold:#ffda62;--blue:#91e4ff;--bg:#0b0d0f;--panel:#161a20;--line:#798694;--text:#f4f3ed}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:17px Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select{color:inherit;background:#222831;border:1px solid #8795a5;border-radius:9px;min-height:46px;padding:9px 14px;cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--gold)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}#game{max-width:1440px;margin:auto;min-height:100svh;display:flex;flex-direction:column;padding:0 24px}header{min-height:67px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;align-items:center;gap:9px}.brand img{height:48px;width:39px;object-fit:contain}.brand small{display:block;letter-spacing:.12em;color:var(--gold);font-size:11px}.brand strong{letter-spacing:.07em;font-size:18px}nav{display:flex;gap:8px}nav button{font-size:19px}nav button span{font-size:14px}#taskbar{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 0 3px}#level{font-size:14px;color:var(--gold)}h1{font-size:26px;margin:0}#mode{font-size:12px;letter-spacing:.1em;color:var(--gold)}#question-audio{min-height:35px;padding:5px 9px}#question{min-height:76px;display:flex;justify-content:center;align-items:center;padding:6px 12px 15px}#question p{font-size:clamp(20px,2.1vw,28px);line-height:1.4;text-align:center;margin:0;max-width:1140px}.question-term{border-bottom:3px solid transparent;transition:background .3s,color .3s}.active-word{background:#40381f;border-bottom-color:var(--gold);color:var(--gold)}.col-word,.whole-word{color:var(--blue);border-bottom-color:var(--blue);background:#193d4a}#workspace{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:24px;align-items:center;flex:1}.table-panel{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:13px;background:var(--panel);padding-bottom:8px;min-width:0}.table-top{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;border-bottom:1px solid var(--line);gap:12px;font-size:16px;font-weight:bold}#survey-note{font-size:13px;color:#bcc4cf;font-weight:normal}#table{padding:15px 13px 5px}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:5px}th{font-weight:normal}th:first-child{width:25%}.corner{font-size:15px;color:#b7c0cb;text-align:left;padding-left:13px}.axis{width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;padding:8px;background:transparent;border-color:transparent;font-size:18px;font-weight:bold;line-height:1.15}.cell{width:100%;height:65px;display:flex;align-items:center;justify-content:center;background:#20262e;border:1px solid #8795a5;padding:6px}.cell strong{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums}.total{background:#303944}.row-focus,.row-band{background:#41371e;border-color:var(--gold);color:var(--gold)}.column-focus,.col-band{background:#1c3947;border-color:var(--blue);color:var(--blue)}.cell.row-band.col-band,.intersection{border:3px solid var(--gold);color:var(--gold);background:#403823}.source-focus,.selected,.whole-focus{border:3px solid var(--blue);background:#193b48;color:var(--blue)}.solved strong{color:#b2f5c4}.meaning-mark{outline:3px dashed var(--gold)}.winner{border:3px solid var(--gold);color:var(--gold)}#table-key{padding:4px 19px;display:flex;justify-content:space-between;font-size:13px;color:#bcc5cf}#table-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}.table-trace{stroke-width:3.5;stroke-dasharray:1;stroke-dashoffset:0;animation:trace 1.2s ease-in-out both}.row-trace{stroke:var(--gold)}.col-trace{stroke:var(--blue)}.connection-path{stroke:var(--blue);stroke-width:2.5;stroke-dasharray:1;animation:trace 1.2s ease-in-out both}.intersection-ring{fill:none;stroke:var(--gold);stroke-width:3;animation:ring-in 1.4s ease-out}.evidence-bracket{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:5 5}#visual{border-top:1px solid #798694;margin:8px 16px 0;padding:14px 8px 7px;min-height:72px;position:relative;z-index:1}.work-caption{margin:0;text-align:center;font-size:17px;line-height:1.4;color:#d4d9df}.work-caption span{margin:0 16px}.reading-statement{font-size:22px;line-height:1.4;text-align:center;margin:0}.reading-statement strong{color:var(--gold);font-size:30px}.equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:29px;min-height:46px}.term,.result{display:inline-flex;align-items:center;justify-content:center;min-width:53px;min-height:44px;padding:5px 10px;border:1px solid var(--blue);border-radius:7px;color:var(--blue);font-variant-numeric:tabular-nums;background:#173441}.result{border-color:var(--gold);color:var(--gold);background:#39331d}.fraction-work{display:flex;align-items:center;justify-content:center;gap:18px}.fraction-stack{display:flex;flex-direction:column;min-width:80px;text-align:center;font-size:31px;font-weight:bold}.numerator{color:var(--gold);padding:3px;border-bottom:2px solid var(--text)}.denominator{color:var(--blue);padding:3px}.fraction-notes{display:flex;flex-direction:column;gap:21px;font-size:15px;max-width:75%;line-height:1.2}.fraction-notes span:first-child{color:var(--gold)}.fraction-notes span:last-child{color:var(--blue)}.conversion{font-size:23px;text-align:center;margin-top:8px}.compare-work{display:flex;justify-content:center;gap:22px}.compare-work>div{display:flex;align-items:center;flex-direction:column;gap:5px;text-align:center}.compare-work small{font-size:14px}.compare-work+.work-caption{margin-top:10px}.sum-check{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 25px;font-size:20px}.sum-check p{margin:0}#visual-panel{align-self:center;min-width:0;border-left:2px solid #b7a365;padding-left:20px}#coach{display:flex;flex-direction:column;gap:10px;align-items:flex-start}#coach img{height:87px;width:78px;object-fit:contain}#cue{font-size:21px;line-height:1.4;margin:0}#step-detail{font-size:13px;color:#b6c0ca;margin:15px 0}#choices{display:flex;flex-direction:column;gap:8px}#choices button{font-size:17px;text-align:left;line-height:1.35}.symbol-choice{font-size:26px!important;text-align:center!important}#animation-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}#animation-controls button{font-size:15px;padding:8px}#next-step{grid-column:1/-1;background:var(--gold);border-color:var(--gold);color:#0b0d0f;font-weight:bold}#animation-controls label{grid-column:1/-1}#speed{width:100%;font-size:14px;min-height:37px}#response{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:10px 0;min-height:93px}#feedback{grid-column:1/-1;text-align:center;min-height:23px;font-size:17px}.retry{color:var(--gold)}.success{color:#b2f5c4}#entry{display:flex;align-items:center;justify-content:center;gap:10px}input{width:99px;height:46px;background:#20262d;color:var(--text);border:2px solid #7b8591;border-radius:8px;text-align:center;font-size:28px;cursor:pointer}input.active{border-color:var(--gold)}.input-fraction{display:flex;flex-direction:column;gap:4px}.input-fraction input{width:80px;height:37px;font-size:25px}.input-fraction label:first-child{border-bottom:2px solid white;padding-bottom:4px}.entry-icon{font-size:13px}#keypad{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}#keypad button{font-size:20px;min-width:43px;min-height:46px;padding:8px}#keypad [data-key=Clear],#keypad [data-key=Delete]{font-size:14px;min-width:69px}#action{display:flex;justify-content:center}#action:empty{display:none}#response:not(:has(#entry:not([hidden]))) #action{grid-column:1/-1}.primary{background:var(--gold);border-color:var(--gold);color:var(--bg);font-size:19px;font-weight:bold;min-width:120px}.primary:hover{background:#ffda74}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:7px 0;border-top:1px solid var(--line);min-height:44px}#progress{color:var(--gold);white-space:nowrap;font-size:16px}#path{display:flex;flex:1;max-width:530px;gap:4px}#path span{flex:1;height:5px;background:#414b55}#path .earned{background:var(--gold)}#path .current{background:var(--blue)}#teacher{font-size:12px;min-height:33px;padding:6px 10px}dialog{background:#171c22;color:var(--text);border:1px solid #75808c;border-radius:15px;max-width:94vw;width:740px;max-height:87svh;padding:23px}dialog::backdrop{background:#000c}.dialog-head{display:flex;align-items:center;justify-content:space-between}#welcome{width:400px;text-align:center}#welcome img{height:150px}#welcome h2{font-size:26px}#welcome p{font-size:17px;line-height:1.4}.giant{font-size:26px;min-height:65px;min-width:200px}#skill-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}#skill-list button{display:flex;gap:12px;align-items:center;text-align:left}#skill-list b{color:var(--gold)}#skill-list span{font-size:15px}#skill-list em{margin-left:auto;color:var(--gold)}#report p{line-height:1.45}#report table{table-layout:auto}#report th{width:auto;text-align:left}#report td{padding:8px}.flying{position:fixed;z-index:20;pointer-events:none;border:2px solid var(--blue);border-radius:8px;background:#214858;color:white;display:grid;place-items:center;font-size:28px}.landed{animation:ring-in .7s}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes ring-in{from{opacity:0}to{opacity:1}}
@media(min-width:851px) and (max-height:750px){header{min-height:54px}.brand img{height:39px}#taskbar{padding:8px 0 2px}h1{font-size:23px}#question{min-height:61px;padding:5px 10px 10px}#question p{font-size:22px}.table-top{padding:8px 13px}#table{padding:7px 9px 3px}.axis{min-height:47px;font-size:16px}.cell{height:49px;min-height:46px}.cell strong{font-size:29px}#visual{padding:8px 6px 4px;margin-top:6px;min-height:55px}.fraction-stack{font-size:26px}.fraction-notes{gap:15px;font-size:14px}#coach img{height:60px;width:52px}#cue{font-size:18px;line-height:1.35}#step-detail{margin:10px 0}#response{min-height:80px;padding:5px 0}#feedback{font-size:15px}footer{padding:5px 0;min-height:39px}.term,.result{min-height:39px;font-size:25px}.reading-statement{font-size:20px}}
@media(min-width:851px) and (max-height:650px){header{min-height:49px}#taskbar{padding-top:5px}#question{min-height:52px;padding-bottom:7px}#question p{font-size:20px}#table{padding:4px 7px}table{border-spacing:3px}.axis,.cell{height:44px;min-height:44px}.axis{font-size:15px}.cell strong{font-size:27px}#table-key{padding:2px 14px}.table-top{padding:6px 12px}#visual{margin:5px 12px 0;padding:6px 4px 3px;min-height:43px}.fraction-stack{font-size:23px}.fraction-notes{font-size:13px;gap:13px}.equation{font-size:24px;gap:7px;min-height:37px}.work-caption{font-size:16px}.term,.result{min-height:34px;font-size:24px}.input-fraction input{height:33px}.input-fraction{gap:3px}#response{min-height:75px;gap:3px 12px}#cue{font-size:17px}#coach img{height:46px;width:42px}#animation-controls button{min-height:39px}#speed{min-height:33px}#survey-note{font-size:12px}}
@media(max-width:850px){#game{padding:0 12px}header{flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 0}.brand small{display:none}.brand img{height:34px}.brand strong{font-size:16px}nav button{min-height:39px;padding:6px 10px}#taskbar{gap:8px;flex-wrap:wrap}h1{font-size:23px}#question{padding:6px 0 12px;min-height:66px}#question p{font-size:21px}#workspace{grid-template-columns:1fr;gap:12px}#visual-panel{border-left:0;border-top:1px solid var(--line);padding:9px 0;display:grid;grid-template-columns:1.2fr 1fr;gap:7px 15px}#coach{flex-direction:row;align-items:center;grid-row:1/3}#coach img{height:57px;width:48px}#cue{font-size:18px;line-height:1.35}#step-detail{grid-column:2;margin:0;font-size:12px}#animation-controls{grid-column:2;margin:0;grid-template-columns:1fr 1fr 1.4fr;gap:5px}#next-step{grid-column:auto}#animation-controls label{grid-column:1/-1}#animation-controls button{font-size:13px;padding:5px;min-height:40px}#speed{min-height:32px;padding:4px}#choices{grid-column:2}#choices button{font-size:15px}.axis{font-size:16px;min-height:49px}.cell{height:51px}.cell strong{font-size:28px}#table{padding:7px}.table-top{padding:8px 12px}#visual{padding:9px 5px;margin-top:5px;min-height:55px}#response{gap:5px 8px}#keypad button{min-width:38px;font-size:17px;padding:6px;min-height:44px}input{width:76px}#path{display:none}.fraction-notes{font-size:13px;gap:16px}.fraction-stack{font-size:26px}#skill-list{grid-template-columns:1fr}}
@media(max-width:520px){#game{padding:0 7px}header{flex-wrap:nowrap;justify-content:space-between}.brand img{width:27px}.brand strong{font-size:13px}nav{gap:4px}nav button{padding:5px;min-width:33px}nav button span{display:none}#mode{font-size:10px}h1{font-size:20px}#question p{font-size:19px}#survey-note{display:none}.axis{font-size:13px;min-height:45px;padding:4px}.cell{height:46px;min-height:44px}.cell strong{font-size:23px}table{border-spacing:3px}th:first-child{width:26%}.corner{font-size:12px;padding-left:4px}#table{padding:3px}.table-top{font-size:14px}#table-label{font-size:11px}#visual-panel{grid-template-columns:1fr}#coach,#choices,#animation-controls,#step-detail{grid-column:1;grid-row:auto}#coach img{display:none}#cue{font-size:17px}#animation-controls{grid-template-columns:1fr 1fr 1.5fr 1.2fr}#animation-controls label{grid-column:auto}#speed{height:40px}#step-detail{font-size:12px}#response{grid-template-columns:auto 1fr}#action{grid-column:1/-1}#keypad button{min-width:35px;padding:5px;font-size:17px}.entry-icon{display:none}.input-fraction input{width:68px}.fraction-notes{font-size:12px;gap:12px}.fraction-stack{font-size:25px;min-width:55px}.equation{font-size:22px;gap:5px}.term,.result{min-width:38px;font-size:22px;padding:5px}.compare-work{gap:8px}.compare-work small{font-size:12px}.reading-statement{font-size:17px}.work-caption{font-size:15px}#feedback{font-size:15px}.sum-check{font-size:16px}.conversion{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

nav{flex-wrap:wrap;justify-content:flex-end}#audio,#sound,#mute-all{font-size:13px;min-height:44px}#mute-all[aria-pressed="true"]{border-color:var(--gold);background:#453819}@media(max-width:520px){header{flex-wrap:wrap;justify-content:center}nav{justify-content:center}#audio,#sound,#mute-all{padding:5px 8px;font-size:12px}}

.cell.active-target{outline:3px dashed var(--gold);outline-offset:2px}

#replay{grid-column:1/-1}#animation-controls{position:relative}#table .total{font-weight:800}

#animation-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#animation-controls #replay,#animation-controls #next-step{grid-column:auto}#animation-controls button{font-size:12px;padding:7px 3px;min-height:44px}#animation-controls #next-step{background:#242b32;color:#edf3f6;border:1px solid #8795a5}#animation-controls label{grid-column:1/-1}

/* Keep inactive controls readable and mathematical traces distinct on dark panels. */
button:disabled{opacity:1;color:#b9c3cf;background:#171c22;border-color:#647180;cursor:default} .row-trace,.col-trace{stroke-width:4.5}.connection-path{stroke-width:3.5}.evidence-bracket{stroke-width:2.5}

.cell.color-linked strong{color:inherit}.color-linked{border-width:2px}.connection-path,.table-trace{stroke-linecap:round;stroke-linejoin:round}.flying{font-weight:600;box-sizing:border-box;transform-origin:top left;will-change:transform,width,height;box-shadow:0 3px 12px #0006}.cell,.axis{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

.practice-options{display:flex;gap:10px;margin:8px 0 16px}.practice-options button{flex:1;border-color:var(--blue)}#action{gap:10px}

:root{--meet:#f6adff}.cell.row-band.col-band,.cell.intersection{border:3px solid var(--meet);color:var(--meet);background:#48264e}.cell.meeting-cell strong,.intersection-number{color:var(--meet)!important}.intersection-ring{stroke:var(--meet)}.table-trace,.connection-path{stroke-dasharray:none;stroke-dashoffset:0;animation:arrow-reveal .4s ease-out both}.arrow-head{animation:arrow-reveal .4s ease-out both}@keyframes arrow-reveal{from{opacity:.35}to{opacity:1}}#action{flex-wrap:wrap}

.cell.meeting-cell,.cell.row-band.col-band{color:var(--meet)!important;border-color:var(--meet)!important;background:#48264e!important}.fraction-notes span:first-child{color:var(--meet)}

/* Independent answers stay beside the table; teaching appears only when needed. */
#response{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:8px 0;gap:10px}#feedback:empty{display:none}#entry{justify-content:center}#keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#keypad button{min-width:0;min-height:46px}#action{display:flex;flex-direction:column;gap:8px}#coach:has(img[hidden]):has(#cue[hidden]){display:none}#step-detail{margin:8px 0}#visual-panel{align-self:center}#visual:empty{display:none}@media(max-width:850px){#visual-panel{display:flex;flex-direction:column}#response{width:100%;max-width:350px;align-self:center}}

.cell.missing-value strong{color:#ffda62!important;text-shadow:0 0 12px #ffda6230}#exit-lesson{display:block;margin:0 0 12px auto;border-color:var(--blue);min-height:44px}#celebration{position:fixed;right:24px;bottom:70px;width:min(32vw,400px);z-index:25;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:celebration-pop .35s ease-out}#praise-words{background:#fff3cf;color:#17191c;border-radius:18px;padding:12px 20px;text-align:center;font-size:clamp(24px,2.6vw,36px);font-weight:700;margin:0}#praise-pose{width:100%;aspect-ratio:1;background-image:url('assets/praise-poses-transparent.png');background-repeat:no-repeat;background-size:500% 200%}#praise-stars{color:#ffda62;font-size:36px;letter-spacing:8px;margin-top:-25px;text-shadow:0 2px 8px #000}@keyframes celebration-pop{from{opacity:0;transform:translateY(20px) scale(.85)}to{opacity:1;transform:none}}@media(max-width:850px){#celebration{width:min(55vw,300px);bottom:25px;right:12px}}

#celebration.fading{opacity:0;transition:opacity .3s ease-out}
#praise-stars{max-width:100%;font-size:clamp(22px,2.4vw,36px);letter-spacing:4px}

/* Keep fraction work readable beside the table. */
.input-fraction input{min-width:96px;font-size:clamp(28px,2.4vw,38px)}.entry-icon{font-size:16px!important;line-height:1.3}.calculator-result{font-size:18px;line-height:1.4;color:var(--blue);margin:8px 0}.cell.solved{animation:solved-settle .35s ease-out}@keyframes solved-settle{from{box-shadow:0 0 0 3px #b7f4ce}to{box-shadow:none}}@media(prefers-reduced-motion:reduce){.cell.solved{animation:none}}

#feedback{font-size:clamp(16px,1.35vw,20px);line-height:1.4}

/* Answer selection stays distinct from instructional source highlights. */
.cell[aria-pressed]{position:relative}.cell[aria-pressed="true"]{border:3px solid #f6adff!important;box-shadow:inset 0 0 0 2px #161a20}.selection-check{position:absolute;right:5px;top:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f6adff;color:#161a20;font-size:16px;font-weight:bold;pointer-events:none}

/* Put the mathematical question first; keep response directions secondary. */
#question{flex-direction:column;gap:8px}#question .question-main{font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1.22;color:var(--gold);max-width:1180px}#question .question-directions{font-size:clamp(16px,1.5vw,20px);font-weight:400;line-height:1.35;color:#fff;max-width:1100px}@media(max-height:700px){#question{gap:5px;padding-top:4px;padding-bottom:10px}#question .question-main{font-size:clamp(24px,2.6vw,32px)}#question .question-directions{font-size:16px}}

.percent-guide{display:flex;justify-content:center;align-items:center;gap:20px;font-size:18px;color:#fff;padding:12px}.percent-guide b{color:var(--gold)}.percent-guide>span{animation:guide-in .5s ease both}.percent-guide>span:nth-child(2){animation-delay:.2s}.percent-guide>span:nth-child(3){animation-delay:.5s}@keyframes guide-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:850px){.percent-guide{font-size:16px;gap:10px;flex-wrap:wrap}}

.answer-cursor{position:absolute;width:2px;background:#ffda62;pointer-events:none;animation:answer-blink 1s steps(1,end) infinite;z-index:2}#entry input{caret-color:transparent}@keyframes answer-blink{0%,49%{opacity:1}50%,100%{opacity:0}}@media(prefers-reduced-motion:reduce){.answer-cursor{animation:none}}
#entry input.active::placeholder{color:transparent}