/* Optional animated place-value lesson, kept beside the child's math keypad. */
.space-panel.guide-open>.orbit-map,.space-panel.guide-open>.scene-top,.space-panel.guide-open>.scene-title,.space-panel.guide-open>.buddy-message,.space-panel.guide-open>.discovery-panel{visibility:hidden;pointer-events:none}
.math-guide{position:absolute;inset:0 0 78px;z-index:8;display:flex;flex-direction:column;gap:9px;padding:19px 25px 17px;overflow:hidden;background:#17333f;background:radial-gradient(ellipse at 76% 15%,#9fc9a111 0,transparent 50%),#17333f;color:#f7f3e4;isolation:isolate}
.math-guide[hidden]{display:none}.math-guide:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#d5e4bd66 1px,transparent 1.5px);background-size:109px 127px;background-position:26px 28px;opacity:.35}
.guide-toolbar{height:29px;min-height:29px;display:flex;justify-content:space-between;align-items:center;gap:15px}.guide-toolbar .eyebrow{font-size:8px;letter-spacing:1.7px;color:#b0c9b4;margin:0}.guide-toolbar button,#guide-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border:1px solid #9bbca440;border-radius:50%;background:#c9dfbd08;color:#d5e4c7;font-size:23px;font-weight:400;line-height:1;cursor:pointer}.guide-toolbar button:hover,#guide-close:hover{background:#c9dfbd16}.guide-title{font-size:27px;font-weight:500;line-height:1.12;letter-spacing:-.7px;margin:0;color:#fbf3d9;flex:none}.guide-steps{display:flex;gap:6px;align-items:center;flex:none;min-height:25px}.guide-stage{display:flex;align-items:center;justify-content:center;min-height:25px;flex:1;gap:5px;padding:5px 7px;border:1px solid #809e8d33;border-radius:7px;background:#071d2d11;color:#849f93;font-size:9px;line-height:1;letter-spacing:.2px;white-space:nowrap;transition:background .3s,border-color .3s,color .3s}.guide-stage.active{color:#f6d49b;background:#f0b97519;border-color:#e2ac6c99}.guide-stage.complete{color:#bbddba;background:#a6d0a41b;border-color:#a6d0a459}.guide-stage svg{height:12px;width:12px}
.guide-workspace{display:flex;align-items:center;justify-content:center;gap:17px;flex:1;min-height:185px;min-width:0;padding:5px 0}.guide-board{position:relative;flex:0 1 218px;min-width:160px;max-width:255px;padding:5px 6px 6px 32px;border-radius:13px;background:#102a35aa;border:1px solid #98b99f24;box-shadow:0 6px 18px #071c2b15}.guide-column-head,.guide-row{display:grid;grid-template-columns:repeat(var(--guide-columns,2),minmax(0,1fr));column-gap:5px;align-items:center;position:relative}.guide-column-head{min-height:27px;margin-bottom:9px;color:#91afa0;font-size:8px;line-height:1;letter-spacing:1px;text-transform:uppercase;text-align:center}.guide-column-head>[data-place]{padding:5px 2px;border-radius:4px}.guide-column-head>[data-place].active{background:#f5bd7020;color:#f4cc8c}.guide-digit{position:relative;display:flex;align-items:center;justify-content:center;min-height:50px;padding:1px 3px;border-radius:8px;color:#edeedb;font-size:44px;font-weight:500;line-height:1.05;font-variant-numeric:tabular-nums;transition:background .3s,color .3s,opacity .3s,box-shadow .3s}.guide-digit.active{color:#ffe5a9;background:#f6b66813;box-shadow:inset 0 0 0 1px #e6b56d45;animation:guideColumnPulse 2.3s ease-in-out infinite}.guide-digit.regrouped{color:#f1c291}.guide-digit.complete{color:#baddb7}.guide-digit.muted,.guide-digit[data-empty=true]{opacity:.25}.guide-carry{position:absolute;top:-14px;right:7px;min-width:20px;height:23px;padding:2px 4px;display:flex;align-items:center;justify-content:center;border:1px solid #edbb7d55;border-radius:6px;background:#345044;color:#f9d59a;font-size:17px;line-height:1;z-index:2;animation:guideCarryArrive .45s ease-out both}.guide-carry[hidden]{display:none}.guide-operation{position:absolute;left:-29px;top:8px;display:grid;place-items:center;width:27px;min-height:35px;font-size:30px;font-weight:400;line-height:1;color:#a1c0a3}.guide-line{height:2px;flex:none;background:#a4c39977;border-radius:2px;margin:5px 1px 5px -20px}.guide-answer .guide-digit{color:#b9dcaa}.guide-answer .guide-digit.active{color:#d8edbd;background:#aed09517;box-shadow:inset 0 0 0 1px #bad6a44a}.guide-answer .guide-digit:empty:after{content:'·';color:#91ab8b66}
.guide-tokens{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:9px;flex:1;min-width:0;max-width:245px;min-height:135px;padding:12px 10px;border:1px solid #8fac9933;border-radius:12px;background:#b6d2a90a}.guide-token-column,.guide-token-group,.guide-token-holder,.guide-token-lane{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:5px;min-width:0}.guide-token-label,.guide-tokens-label{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#9fbaa6;text-align:center;margin:0 0 5px;flex:0 0 100%}.guide-token{--token-color:#a9d4b4;display:inline-block;width:14px;height:14px;border:1px solid #ecf4d933;border-radius:50%;background:var(--token-color);box-shadow:0 2px 0 #0a293b44;flex:none;animation:guideTokenArrive .35s ease-out both;animation-delay:calc(var(--token-index,0)*35ms);transition:opacity .4s,transform .5s,filter .4s}.guide-token.group-a{--token-color:#9bd3b6}.guide-token.group-b{--token-color:#f3bd91}.guide-token.ones{width:14px;height:14px}.guide-token.tens{width:13px;height:64px;border-radius:4px;background:repeating-linear-gradient(to bottom,var(--token-color) 0,var(--token-color) 5px,#355b4b 5px,#355b4b 6px);border:1px solid #e2efc944;display:grid;grid-template-rows:repeat(10,minmax(0,1fr));gap:1px;padding:2px}.guide-token.tens>i,.guide-token.tens>span{display:block;min-height:0;border-radius:1px;background:#f1f5dd44}.guide-token.hundreds{width:47px;height:47px;border-radius:4px;background-color:var(--token-color);background-image:radial-gradient(circle,#e7f1ce88 1px,transparent 1.5px);background-size:4.5px 4.5px;border:1px solid #f0f4d755}.guide-token.removed{opacity:.22;filter:saturate(.3);box-shadow:none;position:relative;animation:guideTokenRemove .5s ease-out both}.guide-token.removed:after{content:'';position:absolute;top:50%;left:-2px;right:-2px;height:1.5px;background:#f2bc9b;rotate:-35deg;border-radius:2px}.guide-token.traded{opacity:.2;filter:saturate(.4);transform:translateY(-6px) scale(.75);animation:guideTokenTrade .65s ease-in-out both}.guide-token.new-ten,.guide-token.new-token{animation:guideBundleArrive .65s ease-out both}.guide-tokens[data-place=ones],.guide-token-column[data-place=ones]{flex-direction:row;flex-wrap:wrap}.guide-tokens:empty{visibility:hidden}.guide-token.legend{width:9px;height:9px}
.guide-message{flex:none;min-height:65px;padding:0 2px;text-align:center}.guide-message h3{font-size:18px;font-weight:500;letter-spacing:-.2px;line-height:1.2;color:#f3d5a0;margin:0 0 6px}.guide-message p{font-family:var(--font);font-size:13px;line-height:1.4;color:#c8d9c6;margin:0 auto;max-width:470px;text-wrap:pretty}.guide-controls{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;padding-top:3px}.guide-controls button{min-height:39px;padding:7px 12px;border:1px solid #94b29c55;border-radius:9px;background:#a8c5a710;color:#d1e2c4;font-size:11px;font-weight:500;line-height:1;cursor:pointer}.guide-controls button:hover{background:#a8c5a726}.guide-controls button:disabled{opacity:.35;cursor:default}.guide-controls button svg{width:15px;height:15px}.guide-controls #guide-play{min-width:39px;padding:7px 9px;font-size:13px}.guide-controls #guide-next{margin-left:auto;border-color:#df9f6b;background:#ebac79;color:#263f3b;min-width:79px}.guide-controls #guide-next:hover{background:#f1bc8d}.guide-controls #guide-replay{margin-right:auto}.guide-controls #guide-step-count{font-size:10px;color:#9eb69e;min-width:32px;text-align:center;white-space:nowrap}.math-guide button:focus-visible{outline:3px solid #f0c387;outline-offset:3px}
@keyframes guideColumnPulse{0%,100%{box-shadow:inset 0 0 0 1px #e6b56d45}50%{box-shadow:inset 0 0 0 1px #f7d29c88,0 0 13px #e7bb6d12}}@keyframes guideTokenArrive{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes guideCarryArrive{from{opacity:0;transform:translateY(10px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes guideTokenRemove{from{opacity:1;transform:scale(1)}to{opacity:.22;transform:scale(.9)}}@keyframes guideTokenTrade{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:translateY(-13px) scale(.8)}100%{opacity:.2;transform:translateY(-6px) scale(.75)}}@keyframes guideBundleArrive{0%{opacity:0;transform:translateY(-15px) scale(.7)}65%{opacity:1;transform:translateY(3px) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1400px){.math-guide{padding:25px 34px 21px;gap:13px;bottom:82px}.guide-title{font-size:32px}.guide-toolbar{min-height:32px}.guide-toolbar .eyebrow{font-size:9px}.guide-steps{gap:9px}.guide-stage{font-size:10px;min-height:29px}.guide-workspace{min-height:215px;gap:24px}.guide-board{flex-basis:255px;max-width:285px;padding-left:36px}.guide-digit{font-size:53px;min-height:60px}.guide-column-head{font-size:9px;min-height:30px}.guide-carry{font-size:19px;top:-14px}.guide-operation{font-size:34px;left:-31px;top:11px}.guide-tokens{max-width:310px;min-height:165px;padding:15px 13px;gap:12px}.guide-token.ones{width:17px;height:17px}.guide-token{width:17px;height:17px}.guide-token.tens{width:15px;height:73px;background-size:auto 7px}.guide-token-holder,.guide-token-group,.guide-token-column{gap:6px}.guide-message{min-height:72px}.guide-message h3{font-size:21px}.guide-message p{font-size:15px}.guide-controls button{min-height:44px;font-size:12px;padding:10px 15px}.guide-controls #guide-play{min-width:44px}.guide-controls #guide-next{min-width:91px}.guide-controls #guide-step-count{font-size:11px}}
@media(orientation:portrait) and (min-width:650px){.math-guide{inset:0 0 82px;padding:24px 20px 20px;gap:13px}.guide-title{font-size:26px;line-height:1.15}.guide-toolbar{height:31px;min-height:31px}.guide-toolbar .eyebrow{font-size:7px;letter-spacing:1.3px}.guide-steps{gap:5px}.guide-stage{min-height:28px;font-size:8px;padding:6px 4px}.guide-workspace{flex-direction:column;gap:19px;min-height:340px;padding:9px 0}.guide-board{flex:none;min-width:225px;width:90%;max-width:260px;padding:7px 10px 9px 37px}.guide-digit{font-size:54px;min-height:61px}.guide-column-head{font-size:9px;min-height:29px;margin-bottom:11px}.guide-carry{font-size:19px;top:-15px;right:9px;min-width:23px;height:25px}.guide-operation{font-size:35px;top:11px;left:-32px}.guide-tokens{width:100%;max-width:100%;min-height:100px;flex:none;flex-direction:row;flex-wrap:wrap;gap:9px;padding:13px 10px}.guide-token-column,.guide-token-group,.guide-token-holder,.guide-token-lane{gap:5px}.guide-token.ones{width:15px;height:15px}.guide-token.tens{width:13px;height:64px}.guide-message{min-height:87px}.guide-message h3{font-size:20px;line-height:1.2}.guide-message p{font-size:14px;line-height:1.5}.guide-controls{gap:6px}.guide-controls button{font-size:10px;min-height:42px;padding:8px 10px}.guide-controls #guide-play{min-width:40px}.guide-controls #guide-next{min-width:72px}.guide-controls #guide-step-count{font-size:9px;min-width:28px}}
@media(max-height:720px) and (orientation:landscape){.math-guide{bottom:65px;padding:13px 20px 12px;gap:6px}.guide-toolbar{height:25px;min-height:25px}.guide-toolbar button,#guide-close{height:29px;min-width:29px;width:29px;font-size:21px}.guide-title{font-size:23px}.guide-stage{min-height:23px;font-size:8px;padding:4px}.guide-workspace{min-height:158px;gap:13px;padding:2px 0}.guide-board{flex-basis:185px;max-width:210px;min-width:150px;padding:3px 5px 5px 28px}.guide-column-head{min-height:21px;font-size:7px;margin-bottom:8px}.guide-digit{font-size:35px;min-height:39px}.guide-carry{font-size:14px;height:19px;min-width:18px;top:-11px;right:6px;padding:1px 3px}.guide-operation{font-size:26px;left:-26px;top:5px}.guide-tokens{min-height:110px;padding:9px 8px;gap:6px}.guide-token{width:12px;height:12px}.guide-token.ones{width:12px;height:12px}.guide-token.tens{width:11px;height:54px;background-size:auto 5px}.guide-token-column,.guide-token-group,.guide-token-holder,.guide-token-lane{gap:4px}.guide-token-label,.guide-tokens-label{font-size:7px}.guide-message{min-height:50px}.guide-message h3{font-size:16px;margin-bottom:4px}.guide-message p{font-size:11px;line-height:1.35}.guide-controls{padding-top:1px;gap:6px}.guide-controls button{min-height:33px;font-size:10px;padding:7px 10px}.guide-controls #guide-play{min-width:34px}.guide-controls #guide-next{min-width:72px}.guide-controls #guide-step-count{font-size:9px}}
@media(max-width:649px){.space-panel.guide-open{overflow:visible;z-index:30}.math-guide{position:fixed;inset:60px 12px 24px;z-index:31;border:1px solid #9eb69b55;border-radius:18px;box-shadow:0 12px 65px #061b3580;padding:21px 21px 19px;gap:11px}.guide-toolbar{height:31px;min-height:31px}.guide-toolbar .eyebrow{font-size:8px}.guide-toolbar button,#guide-close{width:35px;height:35px;min-width:35px}.guide-title{font-size:27px}.guide-steps{gap:6px}.guide-stage{font-size:9px;min-height:27px}.guide-workspace{flex-direction:column;justify-content:center;min-height:270px;gap:17px;padding:5px 0}.guide-board{flex:none;width:85%;min-width:215px;max-width:270px;padding:5px 9px 8px 36px}.guide-digit{font-size:49px;min-height:56px}.guide-column-head{font-size:9px;min-height:26px;margin-bottom:11px}.guide-operation{font-size:33px;left:-31px;top:10px}.guide-carry{font-size:18px;top:-15px;right:9px;height:23px;min-width:22px}.guide-tokens{width:100%;flex:none;max-width:none;min-height:85px;flex-direction:row;flex-wrap:wrap;padding:11px 10px;gap:7px}.guide-token-column,.guide-token-group,.guide-token-holder,.guide-token-lane{gap:5px}.guide-token{width:14px;height:14px}.guide-token.ones{width:14px;height:14px}.guide-token.tens{width:12px;height:60px}.guide-message{min-height:80px}.guide-message h3{font-size:20px;margin-bottom:7px}.guide-message p{font-size:14px;line-height:1.45}.guide-controls{gap:7px;padding-top:3px}.guide-controls button{min-height:44px;font-size:11px;padding:9px 11px}.guide-controls #guide-play{min-width:42px}.guide-controls #guide-next{min-width:81px}.guide-controls #guide-step-count{font-size:10px;min-width:29px}}
@media(max-width:649px) and (max-height:730px){.math-guide{inset:55px 10px 20px;padding:14px 17px 13px;gap:7px}.guide-toolbar{height:27px;min-height:27px}.guide-toolbar button,#guide-close{height:31px;min-width:31px;width:31px}.guide-title{font-size:24px}.guide-stage{min-height:24px;font-size:8px}.guide-workspace{min-height:235px;gap:12px;padding:2px 0}.guide-board{min-width:200px;width:80%;max-width:240px;padding-top:3px;padding-bottom:5px}.guide-digit{font-size:41px;min-height:46px}.guide-column-head{font-size:8px;min-height:22px;margin-bottom:10px}.guide-carry{font-size:16px;min-width:20px;height:21px;top:-13px}.guide-operation{font-size:29px;top:7px}.guide-tokens{min-height:69px;padding:8px 9px;gap:5px}.guide-token.tens{width:11px;height:51px}.guide-token.ones{width:12px;height:12px}.guide-token-column,.guide-token-group,.guide-token-holder,.guide-token-lane{gap:4px}.guide-message{min-height:68px}.guide-message h3{font-size:18px;margin-bottom:5px}.guide-message p{font-size:12px;line-height:1.4}.guide-controls button{min-height:38px;font-size:10px;padding:8px 10px}.guide-controls #guide-play{min-width:37px}.guide-controls #guide-next{min-width:75px}.guide-controls #guide-step-count{font-size:9px}}
@media(prefers-reduced-motion:reduce){.math-guide,.math-guide *{animation:none!important;transition:none!important}}
/* Board rows include their own operation cell before the place-value columns. */
.guide-board{padding-left:7px;padding-right:7px}.guide-column-head,.guide-row{grid-template-columns:24px repeat(var(--guide-columns,2),minmax(0,1fr))}.guide-column-head>span:first-child{min-width:24px}.guide-row>.guide-operation{position:static;left:auto;top:auto;width:24px;min-height:35px;align-self:center;padding:0}.guide-value{font:inherit;font-weight:500;line-height:1.05}.guide-original{position:absolute;left:7px;top:-12px;font-size:16px;font-weight:400;line-height:1;color:#d8bca3;text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.75}.guide-digit.regrouped .guide-value{color:#f6d299}.guide-line{margin-left:6px;margin-right:2px}
.guide-token-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:0 0 100%;width:100%;padding-bottom:7px;border-bottom:1px solid #a1be9c22;font-size:9px;color:#b7cfb1;letter-spacing:.3px;line-height:1.2}.guide-token-caption>span:first-child{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#99b8a2}.guide-token-items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:5px;min-height:43px;width:100%;min-width:0}.guide-token{animation-delay:calc(var(--token-order,0)*35ms)}.guide-token.ones>i{display:none}.guide-token.hundreds{display:grid;grid-template-rows:repeat(10,minmax(0,1fr));gap:1px;padding:3px;background-image:none}.guide-token.hundreds>i{display:block;min-height:0;background:repeating-linear-gradient(to right,#edf2d6aa 0,#edf2d6aa 2px,transparent 2px,transparent 4px)}.guide-trade-note{flex:0 0 100%;width:100%;font-size:10px;line-height:1.35;color:#d9d4b4;text-align:center;padding-top:2px}.guide-trade-visual{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:100%}.guide-trade-arrow{font-size:22px;color:#e8bb85}.guide-token-arrow{font-size:22px;color:#e8bb85}
@media(min-width:1400px){.guide-token-caption{font-size:10px;padding-bottom:9px}.guide-token-caption>span:first-child{font-size:9px}.guide-token-items{gap:6px;min-height:51px}.guide-trade-note{font-size:12px}.guide-original{font-size:18px;top:-13px;left:9px}}
@media(orientation:portrait) and (min-width:650px){.guide-tokens{flex-direction:column;flex-wrap:nowrap;gap:8px}.guide-token-items{min-height:45px}.guide-trade-note{font-size:11px}.guide-token-caption{flex-basis:auto}.guide-trade-note{flex-basis:auto}.guide-original{font-size:18px;top:-14px}}
@media(max-height:720px) and (orientation:landscape){.guide-column-head,.guide-row{grid-template-columns:21px repeat(var(--guide-columns,2),minmax(0,1fr))}.guide-row>.guide-operation{width:21px;min-height:27px}.guide-column-head>span:first-child{min-width:21px}.guide-token-caption{padding-bottom:5px;font-size:8px}.guide-token-caption>span:first-child{font-size:7px}.guide-token-items{gap:4px;min-height:34px}.guide-trade-note{font-size:9px}.guide-original{font-size:13px;left:5px;top:-10px}}
@media(max-width:649px){.guide-tokens{flex-direction:column;flex-wrap:nowrap;gap:7px}.guide-token-caption{flex-basis:auto}.guide-trade-note{flex-basis:auto;font-size:10px}.guide-token-items{min-height:38px}.guide-original{font-size:17px;top:-13px;left:8px}}
@media(max-width:649px) and (max-height:730px){.guide-token-caption{padding-bottom:5px;font-size:8px}.guide-token-caption>span:first-child{font-size:7px}.guide-token-items{min-height:31px;gap:4px}.guide-tokens{gap:5px}.guide-trade-note{font-size:9px}.guide-original{font-size:15px;top:-11px;left:7px}}
@media(prefers-reduced-motion:reduce){.math-guide,.math-guide *{animation:none!important;transition:none!important}}
.guide-token.group-carry{--token-color:#f0d48f}.guide-trade-visual>span:not(.guide-token){font-size:11px;color:#e7d4a4}.guide-zero{font-size:42px;font-weight:500;line-height:1;color:#b9d9b0}.guide-value.unwritten{color:#8da88b66;font-weight:400}.guide-board[style*="--guide-columns: 3"] .guide-digit{font-size:38px}.problem-digit{display:inline-block;min-width:.61em;text-align:center;border-radius:6px;transition:background .3s,color .3s,box-shadow .3s}.problem-digit.guide-active{color:#63794f;background:#f2dcaa8a;box-shadow:0 0 0 3px #f2dcaa55}.guide-step-arrive .guide-message h3{animation:guideMessageArrive .3s ease-out both}.guide-token.bundling{animation:guideTokenTrade .75s ease-in-out both}.guide-trade-visual .guide-token{animation:guideBundleArrive .75s ease-out both;animation-delay:.25s}
@keyframes guideMessageArrive{from{opacity:.5;translate:0 4px}to{opacity:1;translate:0}}
@media(max-width:649px) and (max-height:730px){.guide-board[style*="--guide-columns: 3"] .guide-digit{font-size:33px}.guide-zero{font-size:34px}.guide-trade-visual>span:not(.guide-token){font-size:10px}}
@media(prefers-reduced-motion:reduce){.math-guide,.math-guide *,.problem-digit{animation:none!important;transition:none!important}}
