:root{--ink:#17395d;--muted:#57768d;--line:#cddfe8;--blue:#2788c5;--mint:#edf8f0;--gold:#fff3c5}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--ink);font:600 16px system-ui,sans-serif;background:radial-gradient(circle at 5% 0,#fff2c7,transparent 30%),linear-gradient(140deg,#edfaff,#f8fbf4);min-height:100vh}button,input,select{font:inherit;color:inherit}button,a,select,input{touch-action:manipulation}button,.home{border:2px solid var(--line);border-radius:14px;background:#fff;padding:12px 18px;cursor:pointer;text-decoration:none;color:var(--ink)}button:hover,.home:hover{border-color:var(--blue)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d38e14;outline-offset:3px}.app{max-width:1120px;margin:auto;padding:26px 22px 45px}.brand{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-bottom:24px}.brand h1{font-size:32px;margin:0}.brand p{font-size:13px;margin:5px 0;color:var(--muted)}.brand .home{justify-self:end;font-size:14px}.card{background:#fff;border:2px solid var(--line);border-radius:25px;padding:26px;box-shadow:0 14px 40px #23435b0c}.controls{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.controls label{display:grid;gap:7px;font-size:14px}.controls select{border:2px solid var(--line);border-radius:12px;background:#fff;padding:11px;max-width:100%}.small{font-size:13px;color:var(--muted);line-height:1.6}.settings{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}.settings button{background:#f2f8fc;font-size:14px}.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:22px 0}.phase{text-align:left;padding:23px;background:#fff;min-height:145px}.phase strong{display:block;font-size:23px;margin:10px 0}.phase span{display:block;color:var(--muted);font-size:14px;line-height:1.5}.phase[data-phase=learn]{background:#fff9e8}.phase[data-phase=practice]{background:#edf8f0}.phase[data-phase=test]{background:#edf5ff}.phase[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 3px #d9f0fa}.primary{background:linear-gradient(135deg,#287fb8,#3ca9df);color:#fff;border:0;box-shadow:0 4px 0 #1d618e}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px 0 0}.status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:14px;background:#f0f7fb;font-variant-numeric:tabular-nums}.status b{font-size:20px}.board{text-align:center;padding:25px 8px}.horizontal{font-size:clamp(28px,5vw,46px);margin:20px 0 12px;font-variant-numeric:tabular-nums}.stackarea{margin:22px auto;max-width:360px;border:1px solid #c6e0ed;border-radius:16px;padding:16px;background-color:#fbfeff;background-image:linear-gradient(#d9eaf2 1px,transparent 1px),linear-gradient(90deg,#d9eaf2 1px,transparent 1px);background-size:42px 42px}.stackarea.reveal{animation:arrive .65s ease-out}.vertical{display:grid;grid-template-columns:40px repeat(3,48px);justify-content:center;align-items:center;margin:6px auto;font-size:38px;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.vertical>*{min-height:49px;display:grid;place-content:center}.vertical .head{font:600 12px system-ui;color:var(--muted);min-height:26px}.vertical .line{grid-column:1/-1;min-height:0;border-bottom:3px solid var(--ink)}.vertical .result{grid-column:2/-1;justify-self:end;letter-spacing:5px;padding-right:8px;min-height:48px}.worknotes{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:12px}.worknotes label{display:grid;gap:5px}.worknotes input{width:90px;text-align:center;padding:8px;border:1px solid #a8cbdc;border-radius:8px;background:#ffffffda}.answerlabel{display:block;margin:20px 0 8px}.answer{width:180px;padding:14px;border:3px solid #b8d7e5;border-radius:17px;text-align:center;font-size:35px;background:#fff}.feedback{min-height:32px;line-height:1.6;margin-top:18px}.step{background:#fff9e8;border:1px solid #eddca9;border-radius:15px;padding:18px;margin:20px auto;max-width:700px;text-align:left;font-size:18px;line-height:1.7}.step small{display:block;font-size:14px;color:var(--muted)}.meter{height:8px;background:#e5eef5;border-radius:9px;margin-top:16px;overflow:hidden}.meter i{display:block;background:#329acc;height:100%;width:0}.printtools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.printtools h2{margin:0 0 5px;font-size:21px}.printtools select{padding:10px;border:2px solid var(--line);border-radius:12px;background:#fff}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.summary div{padding:18px;border-radius:15px;background:#edf8f0}.summary b{display:block;font-size:26px}.summary span{font-size:13px;color:var(--muted)}table{border-collapse:collapse;width:100%;margin-top:20px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.reviewwrap{overflow:auto}.end{text-align:center}.end h2{font-size:29px}dialog{border:2px solid var(--line);border-radius:22px;width:min(480px,calc(100% - 24px));padding:26px;color:var(--ink)}dialog::backdrop{background:#17395d77}dialog label{display:grid;gap:8px;margin:16px 0}dialog input{padding:12px;border:2px solid var(--line);border-radius:12px;width:100%}footer{text-align:center;color:var(--muted);font-size:12px;margin-top:25px}.printarea{display:none}@keyframes arrive{from{transform:translate(-35px,-20px);opacity:.3}to{transform:translate(0,0);opacity:1}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-width:650px){.app{padding:16px 12px}.brand{grid-template-columns:1fr 1fr;gap:12px}.brand>div{grid-column:1/-1}.brand .home{font-size:12px}.card{padding:18px}.phases{gap:8px}.phase{padding:13px;min-height:125px}.phase strong{font-size:18px}.phase span{font-size:12px}.summary{grid-template-columns:1fr}.controls{align-items:stretch}.controls label{flex:1;min-width:150px}.vertical{grid-template-columns:34px repeat(3,42px);font-size:34px}}@media print{@page{size:letter portrait;margin:.45in}body{background:white;color:#142f4a;font-size:11pt}.app{display:none!important}.printarea{display:block!important}.sheet{break-after:page;page-break-after:always}.sheet:last-child{break-after:auto;page-break-after:auto}.sheetheader{border-bottom:2px solid #17395d;padding-bottom:10px;margin-bottom:16px;display:flex;justify-content:space-between;gap:15px}.sheetheader h1{font-size:20pt;margin:0 0 6px}.sheetheader p{margin:5px 0;font-size:10pt}.worksheet{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}.printproblem{position:relative;min-height:2in;border-bottom:1px dashed #d2dde5;padding:10px 4px}.printproblem .num{font-size:9pt;color:#57768d;display:block;margin-bottom:12px}.printproblem .expression{font-size:18pt;white-space:nowrap}.printproblem.stacked{min-height:1.12in}.printproblem .vertical{font-size:23pt;grid-template-columns:22px repeat(3,28px)}.printproblem .vertical>*{min-height:29px}.printproblem .vertical .head{display:none}.printproblem .vertical .line{min-height:0}.printproblem .vertical .result{min-height:28px}.printgrid{margin-top:12px;height:1.25in;background-size:22px 22px;background-image:linear-gradient(#e2edf3 1px,transparent 1px),linear-gradient(90deg,#e2edf3 1px,transparent 1px);print-color-adjust:exact;-webkit-print-color-adjust:exact}.answergrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;font-size:12pt}.printstep{margin:18px 0;padding:12px;border-left:3px solid #bad7e5;line-height:1.6}.sheetfoot{font-size:9pt;color:#57768d;margin-top:16px}.learnprint .vertical{font-size:30pt}.learnprint .horizontal{font-size:25pt}.learnprint .vertical>*{min-height:40px}}

/* Compact top controls and side-by-side practice workspace. */
.toptools{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}.toptools>.controls{flex:1 1 460px}.printtools{flex:1 1 380px;max-width:470px;gap:10px;justify-content:flex-end}.printtools label{display:grid;gap:6px;font-size:12px;flex:1}.printtools select{width:100%;padding:9px;font-size:12px}.printbuttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;width:100%}.printbuttons button{font-size:12px;padding:10px 12px}.phase{min-height:96px;padding:15px}.phase strong{font-size:19px;margin:5px 0}.phase span{font-size:12px}.problemrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:24px;align-items:center;max-width:920px;margin:0 auto}.problemrow .board{min-width:0;padding:18px 0}.problemrow .stackarea{margin:16px auto}.problemrow form{text-align:center}.problemrow .answerlabel{margin-top:8px}.problemrow .actions{margin-top:8px;gap:10px}.problemrow .actions button{font-size:14px;padding:12px}.problemrow .feedback{margin-top:10px}.problemrow .horizontal{font-size:clamp(28px,4vw,40px)}
@media(max-width:700px){.problemrow{grid-template-columns:1fr;gap:0}.printtools{max-width:none}.phase{min-height:96px;padding:10px}.phase strong{font-size:17px}.phase span{font-size:11px}}
@media print{.worksheet{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,1.95in);gap:0 10px}.printproblem,.printproblem.stacked{min-height:0;height:1.95in;padding:8px 2px;break-inside:avoid}.printproblem .num{margin-bottom:12px}.printproblem .expression{font-size:12pt}.printgrid{height:1.35in;margin-top:10px;background-size:18px 18px}.printproblem .vertical{font-size:20pt;grid-template-columns:16px repeat(3,22px);margin-top:25px}.printproblem .vertical>*{min-height:26px}.sheetheader{margin-bottom:10px}.sheetheader h1{font-size:18pt}.sheetheader p{font-size:9pt}.sheetfoot{margin-top:10px}}

/* Answer follows the equation or the stacked answer line. */
.problemrow{grid-template-columns:minmax(0,1.3fr) minmax(240px,.9fr)}
.answerSlot{display:inline-flex;vertical-align:middle}.answerSlot .answer{width:112px;font-size:inherit;padding:8px 4px;border-width:2px;letter-spacing:0;min-width:0}
.problemrow .vertical .result{width:144px;min-height:58px;display:flex;align-items:center;justify-content:flex-end;letter-spacing:0;padding:0}
.answer.stackedAnswer{width:144px;min-width:0;font:inherit;text-align:right;padding:3px 8px;letter-spacing:5px;border-width:2px;border-radius:10px}
.problemrow #answerForm{align-self:center}.problemrow #feedback{min-height:0}.problemrow #feedback:empty{display:none}
@media(max-width:700px){.problemrow{grid-template-columns:1fr}.answerSlot .answer{width:96px}.problemrow .horizontal{font-size:28px}}