:root{color-scheme:dark;--bg:#0b0d15;--panel:#121622;--text:#f3f4fb;--muted:#a0abc2;--accent:#a2c6ff;--accent-strong:#79baff;--wash:#233653;--border:#ffffff15;--secondary:#bc95ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#23233d80,transparent 40%),var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,select,summary{cursor:pointer}button{border:1px solid var(--border);background:#1b2333;color:#d5ddef;border-radius:7px;padding:10px 12px;font-size:12px;transition:background .15s,transform .15s}button:hover:not(:disabled){background:var(--wash);border-color:var(--accent)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.site-header,main,footer{max-width:1400px;margin:auto;padding-left:40px;padding-right:40px}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.wordmark{font-weight:900;font-size:26px;letter-spacing:2px}.wordmark span{background:linear-gradient(100deg,#70bfff,#bd83fa);background-clip:text;color:transparent}.back-link{font-size:12px;color:var(--muted)}.back-link:hover{color:var(--accent)}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:48px 0 35px}.eyebrow,.section-label,.card-label{font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--accent-strong)}h1{font-size:clamp(32px,4vw,48px);line-height:1.15;letter-spacing:-1.7px;margin:14px 0}h1 span{background:linear-gradient(100deg,#8ac8ff,#d0a5ff);background-clip:text;color:transparent}.subtitle{font-size:14px;color:var(--muted);margin:16px 0 0}select{background:var(--panel);color:#d4dbee;border:1px solid var(--border);border-radius:7px;padding:10px 30px 10px 12px;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(235px,1fr) minmax(320px,1.55fr) minmax(210px,.85fr);gap:24px;align-items:start}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:26px;min-width:0}h2{font-size:21px;letter-spacing:-.5px;line-height:1.3;margin:14px 0}.hint{font-size:11px;color:var(--muted);line-height:1.7}.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0 14px}.family-grid button{min-height:49px;font-size:17px;font-weight:600}.family-grid button span{font-size:10px;color:var(--muted);margin-right:3px}.family-grid button.active,.indvFactBtn.active{background:var(--accent);color:#101828;border-color:var(--accent)}.family-grid button.active span{color:#263c58}.family-grid button.partial{background:var(--wash);border-color:var(--accent);color:var(--accent)}.selection-actions{display:flex;gap:8px}.selection-actions button{flex:1;font-size:11px;background:transparent}.fact-details{border-top:1px solid var(--border);margin-top:24px;padding-top:18px}summary{font-size:12px;list-style:none;color:#d5ddef}summary::-webkit-details-marker{display:none}summary span{float:right;color:var(--accent);font-size:16px}details[open] summary span{transform:rotate(45deg)}.matrix-scroll{overflow-x:auto;margin:17px -8px 0;padding:0 8px 8px}#collapsible-div{min-width:414px}.row{display:grid;grid-template-columns:25px repeat(13,1fr);gap:3px;margin-bottom:4px}.row-label{font-size:10px;align-self:center;text-align:center;color:var(--muted)}.indvFactBtn{padding:5px 0;min-height:31px;border-radius:4px;font-size:9px}.legend{display:flex;gap:16px;font-size:9px;color:var(--muted);margin-top:22px}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.selected-dot{background:var(--accent)}.partial-dot{background:var(--wash);outline:1px solid var(--accent)}.practice-panel{min-width:0}.practice-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 3px 12px}#card-count{font-size:10px;color:var(--muted)}.flashcard{background:radial-gradient(ellipse at 90% 0%,var(--wash),transparent 80%),#151c2b;border:1px solid #a2c6ff30;border-radius:15px;min-height:329px;text-align:center;padding:26px 25px 18px;box-shadow:0 18px 40px #0002}.card-label{color:#acb9d3;font-size:8px}.equation{display:flex;align-items:center;justify-content:center;gap:20px;font-size:clamp(49px,5vw,73px);font-weight:600;letter-spacing:-2px;line-height:1.3;margin:23px 0 19px;font-variant-numeric:tabular-nums}.operator{font-size:.6em;font-weight:400;color:var(--accent)}#answer-form{border-top:1px solid #ffffff20;padding-top:16px}#answer-form label{display:block;font-size:8px;letter-spacing:2px;color:#a6b2cc}#answer{display:block;width:150px;margin:8px auto 0;border:1px solid #ffffff25;background:#0b111dcc;border-radius:9px;padding:4px 10px;color:var(--accent);text-align:center;font-size:42px;line-height:1.3;outline:none;font-variant-numeric:tabular-nums}#answer:focus{border-color:var(--accent);box-shadow:0 0 0 3px #a2c6ff12}#answer::placeholder{color:#6e7a94}#practice-status{font-size:11px;color:#b3bfd6;min-height:18px;margin:12px 0 0}.flashcard.complete{border-color:var(--accent)}.practice-controls{display:flex;gap:10px;margin:14px 0}.practice-controls button{flex:1}#show-answer{background:var(--wash);color:var(--accent);border-color:#a2c6ff30}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:310px;margin:20px auto 17px}.numpad button{min-height:46px;font-size:19px}.numpad .key-action{font-size:11px;color:var(--muted)}.auto-restart{display:flex;justify-content:center;align-items:center;gap:9px;font-size:11px;color:#b1bdd3}.auto-restart input{accent-color:var(--accent);width:15px;height:15px}.keyboard-hint{text-align:center;font-size:10px;color:#8c9ab5;max-width:330px;margin:12px auto}.progress-heading{display:flex;justify-content:space-between;margin-top:24px;font-size:11px;color:var(--muted)}#progress-percent{color:var(--accent)}progress{display:block;width:100%;height:5px;border:0;border-radius:10px;overflow:hidden;margin:10px 0 18px;background:#253046;accent-color:var(--accent)}progress::-webkit-progress-bar{background:#253046}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}.stats{margin:0}.stats>div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:12px 0;gap:15px}.stats dt{font-size:11px;color:var(--muted)}.stats dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}.session-stat{display:flex;flex-direction:column;padding:24px 0 20px}.session-stat span:first-child{font-size:11px;color:var(--muted)}.session-stat strong{font-size:43px;color:var(--accent);line-height:1.5}.session-stat span:last-child{font-size:10px;color:var(--muted)}.encouragement{font-size:13px;color:#c2cce0;line-height:1.8;border-top:1px solid var(--border);padding-top:20px}footer{display:flex;align-items:center;gap:25px;border-top:1px solid var(--border);margin-top:58px;padding-top:25px;padding-bottom:30px}footer .wordmark{font-size:18px}footer>span{font-size:10px;color:var(--muted)}footer>span:last-child{margin-left:auto}@media(max-width:1099px){.workspace{grid-template-columns:minmax(230px,1fr) minmax(320px,1.5fr)}.stats-panel{grid-column:1/-1}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.session-stat{padding:15px 0}.session-stat strong{font-size:32px}}@media(max-width:650px){.site-header,main,footer{padding-left:20px;padding-right:20px}.site-header{height:76px}.wordmark{font-size:22px}.intro{display:block;padding:33px 0 28px}.workspace{grid-template-columns:1fr;gap:22px}.stats-panel{grid-column:auto}.panel{padding:22px}.family-grid{grid-template-columns:repeat(6,1fr)}.family-grid button{padding:8px 4px}.family-grid button span{display:none}.practice-panel{grid-row:2}.stats{grid-template-columns:repeat(2,1fr)}.equation{font-size:65px;gap:20px}.flashcard{min-height:325px}.numpad{max-width:100%}footer{flex-wrap:wrap;gap:12px}footer>span:last-child{width:100%;margin:0}.practice-top .section-label{font-size:8px}}@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Hybrid: Option B's vertical selection rail and stacked arithmetic,
   with Option A's site framing, progress sidebar, and keypad. */
.workspace{grid-template-columns:120px minmax(300px,1fr) minmax(220px,280px);gap:32px}
.intro{padding:32px 0 28px}.intro h1{font-size:34px}
.selection-panel{position:relative;min-width:0;padding:0;background:transparent;border:0}
.all-option-btn{display:block;width:120px;min-height:40px;box-sizing:border-box}
.selection-bar{display:flex;width:120px;padding:8px;gap:12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);margin:8px 0}
.family-grid{display:grid;grid-template-columns:48px;grid-template-rows:repeat(12,36px);gap:6px;margin:0;flex-shrink:0;width:48px}
.family-grid button,.indvFactBtn{width:48px;height:36px;min-height:36px;padding:0;font-size:14px;font-weight:600;box-sizing:border-box;border-radius:6px}
.family-grid button span{display:none}.family-grid button.active{color:#101828}
.expand-btn{position:absolute;top:269px;left:82px;width:30px;height:42px;padding:0;font-size:25px;line-height:1}
.matrix-scroll{margin:0;padding:0;overflow:auto;flex:1;min-width:0}
.matrix-scroll[hidden]{display:none}#collapsible-div{min-width:696px}
.row{display:grid;grid-template-columns:repeat(13,48px);gap:6px;height:36px;margin-bottom:6px}.row:last-child{margin-bottom:0}
.selection-hint{font-size:10px;margin-top:12px}
.workspace.facts-open{grid-template-columns:minmax(290px,1.15fr) minmax(300px,1fr) minmax(220px,280px);gap:24px}
.facts-open .selection-bar{width:100%}.facts-open .expand-btn{position:static;width:120px;height:36px;margin:0 0 8px}
.practice-top{margin-bottom:10px}.practice-controls{margin:0 0 14px}
.flashcard{max-width:520px;margin:0 auto;text-align:right;min-height:350px}
.card-label{display:block;text-align:center}
.equation{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'. first' 'operator second';justify-content:initial;gap:0 18px;margin:20px auto 14px;max-width:270px;line-height:1.1}
#num1-area{grid-area:first;text-align:right}#num2-area{grid-area:second;text-align:right}.operator{grid-area:operator;align-self:center;text-align:right;font-size:.8em}
#answer-form{max-width:270px;margin:0 auto}#answer-form label{text-align:center}#answer{width:100%;text-align:right;margin:8px 0 0}
#practice-status{text-align:center}
.numpad{width:100%;max-width:310px;grid-template-columns:repeat(3,minmax(0,1fr))}.numpad button{width:100%;min-width:0}
@media(max-width:1099px){.workspace,.workspace.facts-open{grid-template-columns:120px minmax(0,1fr);gap:24px}.workspace.facts-open .selection-panel{grid-column:1/-1}.workspace.facts-open .practice-panel{grid-column:1/-1}.stats-panel{grid-column:1/-1}.practice-controls{max-width:520px;margin:0 auto 14px}.selection-bar{box-sizing:border-box}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.workspace,.workspace.facts-open{grid-template-columns:120px minmax(0,1fr);gap:14px}.site-header,main,footer{padding-left:14px;padding-right:14px}.intro h1{font-size:29px}.practice-panel{grid-row:auto;min-width:0}.practice-top{flex-wrap:wrap}.practice-controls{flex-wrap:wrap;gap:7px}.practice-controls button{flex-basis:100%;padding:8px;font-size:11px}.flashcard{padding:20px 12px;min-height:280px}.equation{font-size:45px;gap:0 8px}#answer{font-size:34px}.numpad{gap:5px}.numpad button{min-height:39px;padding:6px;font-size:16px}.numpad .key-action{font-size:10px}.auto-restart{font-size:10px;align-items:flex-start}.stats-panel{grid-column:1/-1}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.family-grid{grid-template-columns:48px}.keyboard-hint{font-size:9px}}
@media(max-width:360px){.workspace{grid-template-columns:105px minmax(0,1fr);gap:10px}.all-option-btn,.selection-bar{width:105px}.expand-btn{left:69px}.equation{font-size:37px}.back-link{font-size:10px}}
/* Compact selection controls and mobile keyboard opt-in. */
.workspace{grid-template-columns:80px minmax(300px,1fr) minmax(220px,280px)}
.all-option-btn{width:80px;min-height:34px;padding:6px;font-size:11px}
.selection-bar{width:80px;padding:8px 14px;justify-content:center;gap:8px}
.family-grid{width:50px;grid-template-columns:50px;grid-template-rows:repeat(12,30px);gap:5px}
.family-grid button{width:50px;height:30px;min-height:30px;padding:0;font-size:13px}
.indvFactBtn{width:35px;height:30px;min-height:30px;font-size:13px;padding:0}
.row{grid-template-columns:repeat(13,35px);gap:4px;height:30px;margin-bottom:5px}
#collapsible-div{min-width:503px}
.expand-btn,.facts-open .expand-btn{position:absolute;top:236px;left:auto;right:-13px;width:26px;height:38px;padding:0;margin:0;border-radius:7px;font-size:24px;z-index:2}
.facts-open .selection-bar{padding:8px 10px;justify-content:flex-start}
.workspace.facts-open{grid-template-columns:minmax(580px,1.2fr) minmax(300px,1fr) minmax(220px,280px)}
.practice-controls{width:100%;max-width:520px;margin:0 auto 14px;flex-wrap:nowrap;gap:10px}
.practice-controls button{flex:1 1 0;min-width:0;font-size:12px;padding:10px 6px}
.keyboard-toggle{display:block;max-width:310px;width:100%;margin:0 auto 14px;font-size:11px;background:transparent}
.keyboard-toggle[hidden]{display:none}
@media(max-width:1250px){.workspace.facts-open{grid-template-columns:minmax(0,1fr) minmax(220px,280px)}.facts-open .selection-panel{grid-column:1/-1;max-width:600px}.facts-open .practice-panel{grid-column:1}.facts-open .stats-panel{grid-column:2}}
@media(max-width:1099px){.workspace{grid-template-columns:80px minmax(0,1fr)}.workspace.facts-open{grid-template-columns:minmax(0,1fr)}.facts-open .practice-panel,.facts-open .stats-panel{grid-column:1}.stats-panel{grid-column:1/-1}.selection-bar{box-sizing:border-box}}
@media(max-width:650px){.workspace{grid-template-columns:80px minmax(0,1fr);gap:16px}.workspace.facts-open{grid-template-columns:minmax(0,1fr)}.practice-controls{flex-wrap:nowrap;gap:6px}.practice-controls button{flex:1 1 0;font-size:10px;padding:8px 2px}.family-grid{grid-template-columns:50px}.selection-hint{font-size:9px}.expand-btn{right:-12px}.intro{padding:26px 0 22px}}
@media(max-width:360px){.workspace{grid-template-columns:80px minmax(0,1fr);gap:14px}.all-option-btn,.selection-bar{width:80px}.expand-btn{left:auto;right:-12px}.practice-controls button{font-size:9px}}
/* Screenshot revision: wider practice area and controls beneath the card. */
.intro{padding-top:0;padding-bottom:28px}
.intro h1{margin-top:14px}
.practice-panel{width:100%;max-width:520px;justify-self:center}
.flashcard{width:100%;max-width:520px;margin:0 auto;text-align:center;min-height:350px;padding:26px 25px 18px}
.equation{width:100%;max-width:390px;grid-template-columns:1fr 1fr;gap:0 18px;margin:20px auto 14px}
#answer-form{width:100%;max-width:390px}
#answer{width:100%}
.practice-controls{width:100%;max-width:520px;margin:14px auto 20px;gap:10px;flex-wrap:nowrap}
.numpad{width:100%;max-width:520px;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 auto 18px}
.numpad button{min-height:52px}
#numpad-div button:nth-child(10){grid-column:4;grid-row:3}
#numpad-div button:nth-child(11){grid-column:5;grid-row:2}
#numpad-div button:nth-child(12){grid-column:5;grid-row:3}
.keyboard-toggle{max-width:520px}
@media(max-width:650px){.intro{padding-top:0;padding-bottom:22px}.flashcard{padding:20px 12px;min-height:280px}.equation{font-size:45px;gap:0 8px}.practice-controls{gap:6px;margin:12px auto 16px}.numpad{gap:5px}.numpad button{min-height:42px;font-size:15px;padding:5px}.numpad .key-action{font-size:10px}}
/* Hybrid 3 sidebar restored and matched to the supplied screenshots. */
.stats-panel h2.section-label{font-size:13px;color:var(--accent-strong);letter-spacing:1.5px;margin:0;line-height:1.4}
.stats-panel .progress-heading{color:var(--secondary);letter-spacing:1.5px;font-size:11px;margin-top:24px}
.stats-panel .stats{display:block}
.stats-panel .stats>div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:15px 0}
.stats-panel .stats dd{font-size:20px}
.session-stat{padding:24px 0 0}
.session-stat>span:first-child{font-size:11px;letter-spacing:1.5px;color:var(--secondary)}
.session-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:24px 0 15px;font-size:13px;color:var(--muted)}
.session-row strong{font-size:20px;color:var(--text);line-height:1.6}
.stats-panel>.hint{margin-top:12px;font-size:11px}
.card-label,#answer-form label,#practice-status{width:100%;max-width:390px;margin-left:auto;margin-right:auto;text-align:left}
.equation .operator{text-align:left}
.flashcard.empty #num1-area,.flashcard.empty #num2-area{color:#65718a}
#practice-status{min-height:18px}
.expand-btn,.facts-open .expand-btn{right:-18px;left:auto}
/* Ten half-columns keep the last two keys centered under five number keys. */
#numpad-div{grid-template-columns:repeat(10,minmax(0,1fr))}
#numpad-div button{grid-column:span 2}
#numpad-div button:nth-child(10){grid-column:4 / span 2;grid-row:3}
#numpad-div button:nth-child(11){grid-column:9 / span 2;grid-row:2}
#numpad-div button:nth-child(12){grid-column:6 / span 2;grid-row:3}
@media(max-width:650px){.expand-btn,.facts-open .expand-btn{right:-18px}.card-label,#answer-form label,#practice-status{max-width:390px}.stats-panel .stats{display:block}}
/* One subtle Nerdsty purple-pink pulse; the accepted answer stays for 180ms. */
.flashcard.answer-correct{animation:nerdsty-correct 180ms ease-out 1}
@keyframes nerdsty-correct{
  0%,45%{border-color:#d79bff;box-shadow:0 0 0 1px #cb8df980,0 0 18px #cb8df940,0 18px 40px #0002}
  100%{border-color:#a2c6ff30;box-shadow:0 18px 40px #0002}
}
@media(prefers-reduced-motion:reduce){.flashcard.answer-correct{animation:none;border-color:#d79bff}}
/* A two-sided flashcard: reveal stays open until the learner turns it back. */
.flashcard{padding:0;perspective:1200px;overflow:visible;min-height:0}
.card-turn{position:relative;transform-style:preserve-3d;transition:transform 480ms ease}
.flashcard.is-flipped .card-turn{transform:rotateY(180deg)}
.card-front,.card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px}
.card-front{padding:26px 25px 18px;min-height:350px}
.card-back{position:absolute;inset:0;transform:rotateY(180deg);background:radial-gradient(ellipse at 90% 0%,#423254,transparent 85%),#151c2b;padding:26px 25px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;text-align:center}
.card-back .card-label{text-align:center;color:#d7b5ff}
.revealed-fact{font-size:clamp(27px,3.5vw,44px);font-weight:600;color:#e3c5ff;line-height:1.3;margin:32px 0;font-variant-numeric:tabular-nums}
.card-back p{font-size:11px;color:var(--muted);margin:0}
.card-back:focus-visible{outline:2px solid var(--secondary);outline-offset:5px}
@media(max-width:650px){.flashcard{padding:0;min-height:0}.card-front{padding:20px 12px;min-height:280px}.card-back{padding:20px 12px}.revealed-fact{font-size:clamp(23px,5vw,32px)}}
@media(prefers-reduced-motion:reduce){.card-turn{transition:none}}
/* Phone practice view: facts live in their own screen. */
.mobile-facts-button,.mobile-facts-close{display:none}
@media(max-width:650px){
 .site-header{height:54px;padding-left:14px;padding-right:14px}
 .intro{padding:0 0 10px}.intro h1{font-size:23px;margin:10px 0 0}
 .mobile-facts-button{display:block;width:100%;max-width:520px;margin:0 auto 10px;min-height:36px;color:var(--accent);background:var(--wash)}
 .workspace,.workspace.facts-open{display:block}
 .selection-panel{display:none}
 .practice-panel{width:100%;max-width:520px;margin:0 auto}
 .flashcard{min-height:0}.card-front{min-height:0;padding:16px 18px 12px}
 .card-label{font-size:8px}.equation{font-size:50px;line-height:1.05;margin:12px auto 10px}
 #answer-form{padding-top:9px}#answer{font-size:32px;margin-top:5px;padding:3px 10px}
 #practice-status{margin-top:7px;min-height:14px;font-size:10px}
 .practice-controls{margin:10px auto;gap:8px}.practice-controls button{font-size:12px;min-height:36px;padding:7px}
 #numpad-div{gap:6px;margin:0 auto 10px}#numpad-div button{min-height:42px;font-size:18px;padding:5px}#numpad-div .key-action{font-size:11px}
 .auto-restart{font-size:10px;align-items:center}.keyboard-hint{margin:6px auto;font-size:9px}
 .keyboard-toggle{margin-bottom:8px;padding:6px}
 .stats-panel{margin:20px auto 0;max-width:520px}
 footer{margin-top:24px}
 body.mobile-selecting{overflow:hidden}
 .mobile-selecting .selection-panel{display:block;position:fixed;inset:0;z-index:100;background:var(--bg);padding:16px 20px 32px;overflow:auto;overscroll-behavior:contain}
 .mobile-facts-close{display:block;width:100%;min-height:44px;position:sticky;top:0;z-index:3;background:var(--wash);color:var(--accent);margin-bottom:18px}
 .mobile-selecting .selection-bar{width:100%;padding:8px;justify-content:flex-start}
 .mobile-selecting .matrix-scroll{display:block}.mobile-selecting .matrix-scroll[hidden]{display:block}
 .mobile-selecting .expand-btn{display:none}
 .mobile-selecting .family-grid{grid-template-columns:50px;grid-template-rows:repeat(12,36px);gap:6px}
 .mobile-selecting .family-grid button,.mobile-selecting .indvFactBtn{height:36px;min-height:36px}
 .mobile-selecting .row{height:36px;margin-bottom:6px}
 .mobile-selecting .selection-hint{font-size:11px}
}
@media(max-width:650px) and (max-height:700px){
 .site-header{height:46px}.intro h1{font-size:20px;margin-top:6px}.intro{padding-bottom:7px}
 .card-front{padding:12px 16px 9px}.equation{font-size:42px;margin:8px auto}#answer{font-size:28px}
 #numpad-div button{min-height:36px}.practice-controls button{min-height:32px}.mobile-facts-button{min-height:32px;margin-bottom:8px;padding:6px}
}
/* Phone-sized physical flashcard: large, centered arithmetic. */
@media(max-width:650px){
 .card-front{padding:16px 18px 12px}
 .equation{width:min(100%,240px);max-width:240px;grid-template-columns:48px minmax(0,1fr);column-gap:12px;row-gap:0;font-size:clamp(76px,23vw,100px);font-weight:600;line-height:1.02;letter-spacing:-3px;margin:14px auto 12px}
 #num1-area,#num2-area{text-align:right;padding-right:18px}
 .equation .operator{text-align:center;font-size:.6em;letter-spacing:0;color:var(--accent)}
 #answer-form{padding-top:10px}
 #answer{font-size:40px;line-height:1.15;text-align:center}
 .card-back .revealed-fact{font-size:clamp(32px,8.7vw,46px)}
}
@media(max-width:650px) and (max-height:700px){
 .equation{font-size:clamp(68px,21vw,82px);margin:8px auto;line-height:1}
 #answer{font-size:32px}
}
.voice-controls{width:100%;max-width:520px;margin:0 auto 12px;display:flex;align-items:center;gap:12px}
#voice-toggle{min-width:120px;color:var(--secondary);background:#251d35;border-color:#bc95ff40}
#voice-toggle[aria-pressed=true]{background:#bc95ff;color:#151021}
#voice-status{font-size:10px;color:var(--muted);line-height:1.4}
@media(max-width:650px){.voice-controls{gap:10px;margin-bottom:10px}#voice-toggle{min-width:110px;padding:7px;font-size:11px}#voice-status{font-size:9px}}
/* Voice practice: the keypad stays available farther down the page. */
.voice-mode .keyboard-toggle,.voice-mode .keyboard-hint{display:none}
.voice-mode .flashcard.answer-wrong{border-color:#d38997}
.voice-mode #voice-toggle{min-width:130px}
@media(max-width:650px){
 .voice-mode .card-front{min-height:65svh;display:flex;flex-direction:column;padding:18px 22px 14px}
 .voice-mode .equation{flex:1;align-content:center;max-width:310px;width:100%;font-size:clamp(105px,29vw,175px);grid-template-columns:45px minmax(0,1fr);line-height:1.03;margin:8px auto}
 .voice-mode .equation #num1-area,.voice-mode .equation #num2-area{padding-right:12px}
 .voice-mode #answer{font-size:48px}
 .voice-mode .practice-controls{margin:10px auto}
 .voice-mode .voice-controls{margin:8px auto}
 .voice-mode #numpad-div{margin-top:18svh}
 .voice-mode .card-back .revealed-fact{font-size:clamp(42px,12vw,65px)}
}
@media(min-width:651px){.voice-mode .equation{font-size:100px}.voice-mode #numpad-div{margin-top:140px}}

.voice-privacy{font-size:9px;color:var(--muted);max-width:520px;margin:0 auto 10px}.voice-mode .voice-privacy{display:none}
/* Immediate practice; compact mobile setup controls above the card. */
.voice-controls{margin-top:14px}
@media(max-width:650px){
 main{display:flex;flex-direction:column}
 .intro{order:0}
 .mobile-facts-button{order:1;margin-bottom:8px}
 .workspace{display:contents!important}
 .selection-panel{order:2}
 .practice-panel{display:flex;flex-direction:column;order:3}
 .voice-controls{order:-2;margin:0 auto 4px}
 .voice-privacy{order:-1;margin:0 auto 8px;font-size:8px}
 .flashcard{order:0}
 .practice-controls{order:1}
 #numpad-div{order:2}
 .keyboard-toggle{order:3}
 .auto-restart{order:4}
 .keyboard-hint{order:5}
 .stats-panel{order:4;width:100%}
}
/* Fill the former spacer with immediate speech feedback. */
.voice-feedback{display:none}
.voice-mode .voice-feedback{display:block;width:100%;max-width:520px;min-height:76px;margin:12px auto 18px;padding:12px 16px;border:1px solid #bc95ff35;border-radius:10px;background:#1d192c}
.voice-feedback>span{font-size:8px;letter-spacing:1.6px;color:var(--secondary)}
.voice-feedback p{font-size:22px;line-height:1.3;color:var(--text);margin:5px 0 0;overflow-wrap:anywhere}
.voice-mode #numpad-div{margin-top:0}
@media(max-width:650px){.voice-feedback{order:2}.voice-mode .voice-feedback{margin:6px auto 14px;min-height:70px}.voice-mode #numpad-div{order:3;margin-top:0}.keyboard-toggle{order:4}.auto-restart{order:5}.keyboard-hint{order:6}}
/* v14: two clear toggles, one transcript, optional voice help. */
.voice-controls{display:flex;gap:10px;max-width:520px;width:100%}
#voice-toggle,#auto-restart{flex:1 1 0;width:auto;min-width:0;min-height:38px;margin:0;padding:9px 12px;border:1px solid var(--border);border-radius:7px;background:#1b2333;color:#d5ddef;font-size:12px}
#voice-toggle[aria-pressed=true],#auto-restart[aria-pressed=true]{background:#bc95ff;color:#151021;border-color:#bc95ff}
.voice-privacy{text-align:center;display:block!important;font-size:9px;margin:0 auto 10px;max-width:520px;color:var(--muted);position:relative}
.voice-help{display:inline-block}.voice-help summary{display:inline;cursor:pointer;color:var(--secondary);font-size:13px}
.voice-help-content{position:absolute;top:24px;left:0;right:0;z-index:10;background:var(--panel);padding:16px;border:1px solid #bc95ff60;border-radius:10px;text-align:left;box-shadow:0 8px 24px #0007;font-size:11px}
.voice-help-content p{margin:8px 0 0}
.voice-mode .voice-privacy{display:block!important}
@media(max-width:650px){.voice-controls{margin:0 auto 5px}.voice-mode #voice-toggle{min-width:0}#voice-toggle,#auto-restart{min-height:36px;font-size:12px}.voice-privacy{margin-bottom:10px}}
/* v15: one desktop action row; retain the established mobile groups. */
#voice-toggle[aria-pressed=true],#auto-restart[aria-pressed=true]{background:#382c4b;color:#e3c5ff;border-color:#bc95ff}
@media(min-width:651px){
 .unified-controls{display:flex;gap:8px;align-items:stretch;margin:14px auto 20px}
 .unified-controls .voice-controls,.unified-controls .answer-controls{display:contents}
 .unified-controls button,.unified-controls #voice-toggle,.unified-controls #auto-restart{flex:1 1 0;min-width:0;width:auto;font-size:11px;padding:10px 5px;min-height:38px}
}
@media(max-width:650px){
 .unified-controls{display:contents}
 .unified-controls .voice-controls{order:-2;display:flex;width:100%;margin:0 auto 5px;gap:10px}
 .answer-controls{order:1;display:flex;flex-direction:row-reverse;width:100%;max-width:520px;margin:10px auto;gap:8px}
 .answer-controls button{flex:1 1 0;min-width:0;font-size:12px;min-height:36px;padding:7px}
}
.flashcard.answer-correct .operator{animation:nerdsty-times-spin 180ms ease-out 1;color:var(--accent)}
@keyframes nerdsty-times-spin{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.flashcard.answer-correct .operator{animation:none}}

.equation .operator {
    justify-self: start;
    width: fit-content;
    transform-origin: center;
}

.flashcard.answer-correct .operator {
    color: #d79bff;
}

@media (max-width: 650px) {
    .answer-controls {
        flex-direction: row;
    }
}

#numpad-div button {
    touch-action: manipulation;
}