@import url('/assets/fonts/fonts.css');
*{box-sizing:border-box}body{margin:0;background:#f5f7f7;color:#163d50;font-family:'DM Sans',sans-serif}header{display:flex;justify-content:space-between;padding:18px 4%;border-bottom:1px solid #cbd8da}a{color:inherit}main{max-width:1040px;margin:auto;padding:24px}h1{font-family:Literata,serif;font-size:clamp(25px,4vw,38px);margin:8px 0}.intro,.foot{color:#526773}.settings,.toolbar{display:flex;gap:14px;flex-wrap:wrap}label{display:block;font-weight:bold}select,input,button{font:inherit;border:1px solid #8da4ae;border-radius:8px;padding:12px;background:white;color:#163d50}select{display:block;margin:8px 0 18px}button{cursor:pointer;min-height:44px}button:hover{background:#edf3f2}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #126ca0;outline-offset:3px}#setup,#mat{background:white;border:2px solid #aabfc5;border-radius:16px;padding:22px;margin-top:24px}#custom input{margin:10px 8px 0 0;max-width:100%}#equation{font-size:clamp(26px,5vw,40px);text-align:center;margin:24px 0 10px;font-weight:bold}.rewrite{font-size:18px;color:#465d69;margin-top:8px}details{background:#f1f5fa;padding:12px;border-radius:8px}summary{cursor:pointer}#guide{background:#e7f1f3;padding:16px;border-radius:8px;font-weight:bold;min-height:56px}.tray{display:flex;align-items:center;gap:12px;margin:20px 0}.tray p{font-size:14px}.counter{border-radius:50%;width:44px;height:44px;min-width:44px;padding:0;font-size:27px;line-height:40px;touch-action:none;border:2px solid;user-select:none}.positive{background:#edf8e9;color:#316b2b;border-color:#558948}.negative{background:#fff0ef;color:#bb2828;border-color:#cf4242}.selected{outline:3px solid #db9b15;outline-offset:3px}#areas{display:grid;grid-template-columns:1fr 1fr;gap:18px}.area{border:2px dashed #94aab1;border-radius:12px;padding:16px;min-height:190px}.area.active{border-color:#245b79;background:#f7fbfd}.area h2{font-size:18px;margin:0 0 8px}.counter-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.area-drop{width:100%;border:0;background:transparent;text-align:left;padding:4px;font-size:14px}.zero-bank{border-top:1px solid #ccd8dc;margin-top:24px;padding-top:14px}.zero-bank h2{font-size:18px}.zero-bank small{font-size:14px;font-weight:normal;margin-left:10px}#pairs{display:flex;flex-wrap:wrap;gap:14px;min-height:60px}.pair{display:flex}.pair span{display:inline-block;text-align:center}.pair span+span{margin-left:-13px;background:#fff0efbb}#confirm{margin-top:14px}#answer-form{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}#answer{width:140px}#feedback{min-height:24px;font-weight:bold}#correct{position:fixed;inset:0;display:grid;place-items:center;background:#ffffffc9;color:#257744;font-weight:bold;font-size:clamp(44px,10vw,100px);pointer-events:none}#correct[hidden],[hidden]{display:none!important}.ghost{position:fixed;pointer-events:none;z-index:10;opacity:.8} @media(max-width:600px){main{padding:14px}#mat{padding:12px}#areas{gap:8px}.area{padding:8px}.counter-grid{gap:5px}.tray p{font-size:12px}header span{display:none}}
/* Compact counter mat */
#mat{border:0;background:transparent;padding:0}.material-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}.tray{display:block;margin:65px 0 0}.supply-group{margin-bottom:34px}.supply-group h2{font-size:16px}.supply-grid{display:grid;grid-template-columns:repeat(5,44px);gap:5px}.black-mat{border:5px solid #111;background:white;padding:18px;min-height:420px;display:flex;flex-direction:column;gap:16px}.area{background:#eee;min-height:135px;border:2px solid #a3a3a3}.area.active{background:#eee;border-color:#777}.area h2{font-size:16px}.area.complete,.zero-bank.complete,#answer-form.complete{border:2px solid #319455;box-shadow:0 0 8px #5abe6370}.area-drop{min-height:24px;padding:0}.counter:disabled{opacity:1}.tray .counter:disabled{opacity:.65}.zero-bank{border:2px dashed #aaa;border-radius:8px;min-height:130px;padding:12px;margin:0}.zero-bank h2{margin:0 0 12px}.zero-bank .counter{text-align:center;display:inline-block}.black-mat #answer-form{margin-top:auto;padding:12px 0}.black-mat #feedback:empty{display:none}#hint{margin-bottom:10px}#equation{margin:16px 0}.rewrite{font-size:16px}#areas{gap:12px}.toolbar{margin:20px 0}#answer-form label{font-size:15px}.selected{outline:3px solid #db9b15} @media(max-width:700px){.material-layout{grid-template-columns:100px minmax(0,1fr);gap:10px}.supply-grid{grid-template-columns:repeat(2,44px)}.black-mat{padding:8px;border-width:4px}#areas{gap:6px}.area{padding:6px}.area h2{font-size:13px}.counter-grid{gap:4px}.tray{margin-top:70px}.black-mat #answer-form{gap:8px}main{padding:10px}.toolbar{gap:6px}} 
#equation{margin:12px 0 8px}.zero-bank h2{text-align:center}.area:focus-visible{outline:3px solid #126ca0;outline-offset:3px}.area .counter-grid{margin-top:0}
.mode-options,.range-options{border:0;padding:0;margin:0 0 24px;display:grid;gap:12px}.mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}.range-options{grid-template-columns:repeat(2,minmax(0,180px))}legend{font-weight:bold;margin-bottom:12px}.mode-options button{text-align:left}.mode-options button[aria-pressed="true"],.range-options button[aria-pressed="true"]{background:#e2f1eb;border:2px solid #32745c;box-shadow:0 0 0 2px #32745c20}@media(max-width:500px){.mode-options{grid-template-columns:1fr}}