@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#293d3b;background:#f7f7f3}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:20px 4%;border-bottom:1px solid #d4ddd7;background:white}header span,.eyebrow{font-size:11px;letter-spacing:2px;color:#50716b}a{color:#315f56}button,input,select{font:inherit}button{min-height:44px;padding:10px 16px;border:1px solid #adbfb5;background:#fff;border-radius:8px;color:inherit;cursor:pointer;touch-action:manipulation}button:hover{box-shadow:0 0 0 2px #4c807b55}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #236995;outline-offset:3px}button:disabled,input:disabled{opacity:.5;cursor:default}.primary{background:#315f56;color:white;border-color:#315f56}main{max-width:1150px;margin:auto;padding:28px 25px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,4vw,42px);margin:8px 0 15px}h2{font-size:23px}p,li{line-height:1.65}.heading{text-align:center}.setup{max-width:760px;margin:24px auto;padding:30px;background:white;border:1px solid #b8c7bc;border-radius:14px}.setup ol{padding-left:22px}.options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}label{display:block;font-weight:600}select,input{display:block;width:100%;padding:12px;border:1px solid #91aaa0;border-radius:7px;margin:8px 0 15px;min-height:44px;background:white;color:#293d3b}.fine{font-size:12px;color:#60756e}hr{border:0;border-top:1px solid #d8e0db;margin:30px 0}.lesson-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.lesson-title h1{font-size:30px}.material{border:2px solid #96afa3;border-radius:16px;background:white;padding:24px}.problem{text-align:center}.problem h2{font-size:clamp(22px,3vw,32px);line-height:1.6;margin:6px 0 10px}.steps{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}.steps span{padding:7px 14px;border-radius:20px;background:#f0f2ee;font-size:13px}.steps .active{background:#315f56;color:white}#feedback{background:#f0f4ed;border-radius:8px;min-height:55px;text-align:center;padding:12px;line-height:1.55}#feedback.success{background:#d2efda;font-weight:700}.tray{border:1px solid #d6ded7;border-radius:10px;padding:14px;background:#fafbf7}.tray h3{font-size:15px;margin:0 0 12px}.tray small{font-size:12px;color:#6b7c73;font-weight:400;margin-left:12px}.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.tile{display:inline-flex;align-items:center;justify-content:center;min-width:55px;min-height:48px;border:2px solid #40534a;border-radius:3px;padding:8px;font-weight:700;font-size:17px;color:#193429;user-select:none}.positive{background:#c9efd1}.negative{background:#ffd0d3;color:#792b37}.zero{background:#f0f0ea;color:#424f49}.tile[aria-pressed=true]{outline:3px solid #256996;outline-offset:2px;box-shadow:0 0 0 5px #dbeafa}.expression-slots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:25px 0}.slot{min-width:55px;min-height:48px;background:#ededeb;border:2px dashed #819388;border-radius:3px;color:#75857c}.groups{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:740px;margin:auto}.group{text-align:center}.group h3{font-size:17px}.circle{width:100%;aspect-ratio:1;border:3px solid #46574e;border-radius:50%;padding:28px;display:flex;align-items:center;justify-content:center;background:white}.sorted-tiles{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.sorted-tiles:empty{display:none}.circle-hint{color:#75867d;font-size:13px}.sorted-tiles .tile{min-width:48px;min-height:42px;font-size:15px;padding:5px}.total-slot{margin-top:16px;min-width:145px;border:2px dashed #819388;background:#f0f1ed}.total-slot.filled{border-style:solid;font-size:20px;font-weight:700}.zero-help{text-align:center;color:#60756e;font-size:12px;margin:20px 0}#answer-form{max-width:550px;margin:25px auto}.answer-row{display:flex;gap:12px;align-items:center}.answer-row input{margin:8px 0;font-size:23px;min-width:0}.answer-row button{flex-shrink:0}.bottom-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.finish{text-align:center}.finish a{display:block;margin-top:22px}footer{font-size:12px;text-align:center;color:#60756e;padding:20px}@media(max-width:650px){header span{display:none}main{padding:20px 12px}.material{padding:14px}.groups{gap:12px}.circle{padding:14px;min-height:170px;aspect-ratio:auto}.group h3{font-size:14px}.sorted-tiles .tile{min-width:39px;font-size:13px}.tile{min-width:48px;font-size:15px}.total-slot{min-width:0;width:100%;font-size:12px}.setup{padding:20px}.lesson-title{align-items:start}.lesson-title h1{font-size:25px}.lesson-title button{font-size:12px}.tray small{display:block;margin:6px 0 0}.answer-row{flex-wrap:wrap}.answer-row input{flex:1 1 160px}.steps{gap:5px}.steps span{padding:6px 9px;font-size:11px}.options{gap:10px}}
button.tile{touch-action:none;cursor:grab}.drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%);opacity:.9;box-shadow:0 8px 20px #263f4e44}
.total-slot.positive{background:#c9efd1}.total-slot.negative{background:#ffd0d3}.total-slot.zero{background:#f0f0ea}
/* Match the physical material: tray, expression, slots, compact circles, square totals. */
.material .problem{margin-top:20px}.material .problem h2{margin:4px 0 8px}.material .expression-slots{margin:0 0 18px}.material .groups{max-width:480px;gap:36px}.material .group h3{margin:8px 0 12px}.material .circle{width:200px;height:200px;min-height:200px;aspect-ratio:1;padding:18px;margin:0 auto}.material .total-slot{display:flex;align-items:center;justify-content:center;width:72px;height:72px;min-width:72px;min-height:72px;padding:6px;margin:14px auto 0;border-radius:3px;font-size:12px;line-height:1.3}.material .total-slot.filled{font-size:19px}.material .sorted-tiles{gap:4px}.material .sorted-tiles .tile{min-width:40px;min-height:38px;padding:4px;font-size:14px}@media(max-width:550px){.material .groups{gap:12px}.material .circle{width:150px;height:150px;min-height:150px;padding:12px}.material .sorted-tiles .tile{min-width:34px;min-height:32px;font-size:12px}.material .total-slot{width:64px;height:64px;min-width:64px;min-height:64px}}@media(max-width:370px){.material .groups{gap:8px}.material .circle{width:126px;height:126px;min-height:126px;padding:8px}.material .sorted-tiles .tile{min-width:29px;min-height:27px;padding:2px;font-size:11px}}
.return-tile{font-size:12px;margin:0 0 12px;min-height:44px}
.setup-instruction{display:block;font-size:15px;line-height:1.5;color:#50716b;margin-bottom:8px}
#answer-watermark{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none;background:#ffffff45;color:#21834d;font-size:clamp(42px,12vw,150px);font-weight:700;letter-spacing:.04em;text-align:center;text-shadow:0 2px 0 white,0 0 18px #ffffff;opacity:.9;transform:rotate(-7deg);animation:answer-stamp .18s ease-out}@keyframes answer-stamp{from{opacity:0;scale:1.12}to{opacity:.9;scale:1}}@media(prefers-reduced-motion:reduce){#answer-watermark{animation:none}}