@font-face{font-family:Nunito;src:url('/flash/fonts/Nunito.ttf');font-weight:200 1000;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/flash/fonts/DMSans.ttf');font-weight:100 1000;font-display:swap}
:root{font-family:'DM Sans',Arial,sans-serif;color:#314d49;background:#f7f6ee;color-scheme:light;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 80%,#e4ecd9,transparent 75%)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #ba8242;outline-offset:5px}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:18px;z-index:100;background:#fff2cc;padding:12px}.skip-link:focus{top:14px}.header{display:flex;align-items:center;gap:15px;max-width:1200px;padding:22px 28px;margin:auto;font-size:11px}.brand{display:grid;place-content:center;width:38px;height:38px;background:#436e60;color:#fff8dd;border-radius:12px;font:900 28px/1 Nunito;padding-bottom:4px}.controls{display:flex;gap:8px;margin-left:auto}.controls button{border:1px solid #acbdad;color:#486653;background:#fffcf1;border-radius:20px;padding:9px 14px;font-size:10px}main{max-width:1120px;margin:auto;padding:22px 28px 0}.lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.eyebrow{font-size:8px;letter-spacing:.18em;font-weight:700;color:#7d9178;margin:0 0 5px}h1{font:900 44px/1.05 Nunito,sans-serif;letter-spacing:-.05em;margin:0}h1>span{color:#be8c50}.range-note{font-size:10px;color:#73866c;border:1px solid #c6d2ba;border-radius:20px;padding:8px 12px}.readout{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 12px 16px}.phase-label{font-size:8px;font-weight:700;letter-spacing:.16em;color:#91a183;margin:0 0 8px}.instructions h2{font:800 clamp(19px,2.5vw,27px)/1.25 Nunito,sans-serif;letter-spacing:-.025em;margin:0}.instructions>p:last-child{font-size:11px;color:#7f8e77;margin:6px 0 0;line-height:1.5}.count-display{display:flex;align-items:center;gap:13px;flex-shrink:0}.count-display strong{font:900 85px/.95 Nunito,sans-serif;letter-spacing:-.06em;color:#49715d;min-width:1.1em;text-align:center;font-variant-numeric:tabular-nums}.count-display>span{max-width:55px;font-size:10px;line-height:1.5;color:#7a8b70}.counting-board{position:relative;height:clamp(330px,53dvh,470px);overflow:hidden;border:2px solid #bdcbb0;border-radius:28px;background:linear-gradient(165deg,#eff3e4,#e3ecd5);box-shadow:0 9px 0 #c9d6ba4d,0 18px 45px #5d765514;isolation:isolate;touch-action:none}.floor-lines{position:absolute;inset:0;background-image:linear-gradient(#b4c5a015 1px,transparent 1px),linear-gradient(90deg,#b4c5a015 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 80%);pointer-events:none}.counting-board:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:12%;background:linear-gradient(transparent,#c9d8b333);pointer-events:none}.balls{position:absolute;inset:0}.roll{position:absolute;inset:0;width:100%;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;color:#7f9873;font-size:15px;touch-action:manipulation}.roll>small{font-size:10px;color:#96a58b;margin-top:-10px}.tap-circle{display:grid;place-items:center;width:79px;height:79px;border-radius:50%;border:1px dashed #a5b999;background:#ffffff26}.tap-circle svg{width:37px;height:37px;fill:none;stroke:#88a17c;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.ball{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border:0;padding:0;border-radius:50%;background:transparent;box-shadow:0 7px 5px #5a704a28;touch-action:none;z-index:2;display:grid;place-items:center;font:900 calc(var(--size)*.48)/1 Nunito,sans-serif;color:#3d5353;transform-origin:center;will-change:transform;transition:left .9s ease,top .9s ease,width .9s ease,height .9s ease}.ball-art{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 28% 24%,#ffffff6e,transparent 48%),var(--ball-color);box-shadow:inset -8px -8px 14px #504e5721,inset 2px 2px 5px #ffffff54;pointer-events:none}.ball-art:before{content:'';position:absolute;inset:-8% 31%;border-inline:5px solid #ffffff48;border-radius:50%;rotate:-28deg}.ball-art:after{content:'';position:absolute;left:21%;top:14%;width:22%;height:12%;border-radius:50%;background:#ffffff40;rotate:-30deg}.ball-number{position:relative;min-width:1.23em;min-height:1.23em;display:grid;place-content:center;border-radius:50%;background:#fff9e6e8;box-shadow:0 1px 4px #3c593011;opacity:0;scale:.65;transition:opacity .18s,scale .24s;pointer-events:none}.ball.counted .ball-number{opacity:1;scale:1}.ball:disabled{cursor:default}.ball:not(:disabled):hover{filter:brightness(1.04)}.ball:not(:disabled):active{scale:.95}.ball:focus-visible{outline-offset:5px}.counting-board[data-phase=lining-up] .ball{box-shadow:0 5px 5px #5a704a23,0 0 0 4px #fff8d448}.counting-board[data-phase=entering] .ball{transition:none}.status{min-height:19px;text-align:center;font-size:11px;line-height:1.6;color:#71896a;margin:20px 0 0}.practice-note{text-align:center;font-size:10px;color:#89957f;margin:5px 0 0}footer{max-width:1120px;margin:auto;display:flex;justify-content:space-between;gap:20px;padding:24px 28px;font-size:9px;color:#8a977f}footer a:hover{color:#446c57}noscript{text-align:center;padding:18px;background:#fff0c5}.tutor-app[data-tutor-tool=counting] main{padding-top:20px}.tutor-app[data-tutor-tool=counting] .tutor-bar{touch-action:none}
@media(max-width:600px){main{padding:19px 16px 0}.lesson-heading{margin-bottom:18px}h1{font-size:36px}.eyebrow{font-size:7px}.range-note{font-size:9px;padding:7px 9px}.readout{padding:0 5px 15px;gap:12px}.instructions h2{font-size:19px;max-width:190px}.instructions>p:last-child{font-size:10px;max-width:190px}.count-display{gap:4px}.count-display strong{font-size:68px;min-width:1em}.count-display>span{font-size:8px;max-width:38px}.phase-label{font-size:7px}.counting-board{height:clamp(350px,49dvh,445px);border-radius:22px}.status{font-size:10px;margin-top:17px}.practice-note{font-size:9px}.header{padding:18px 16px}.controls button{font-size:9px;padding:8px 10px}.roll{font-size:13px}footer{font-size:8px;padding:21px 16px}.tutor-app[data-tutor-tool=counting] main{padding-top:17px}}
@media(max-height:620px) and (min-width:700px){.counting-board{height:290px}main,.tutor-app[data-tutor-tool=counting] main{padding-top:12px}.lesson-heading{margin-bottom:9px}h1{font-size:32px}.count-display strong{font-size:61px}.readout{padding-bottom:9px}.status{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.ball{will-change:auto}}