:root{color:#2d2618;background:linear-gradient(180deg,#c5e9f4,#f6f0d4 60%,#d8eebe);background-attachment:fixed;background-color:#c5e9f4;font-family:Nunito,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--leaf: #3d8f55;--leaf-dark: #276d3d;--banana: #ffd451;--banana-deep: #f0a928;--banana-light: #fff39a;--sky: #bfe7f2;--ink: #2d2618;--muted: #6e624c;--panel: #fffaf0;--panel-soft: #fff7e3;--line: #e0c991;--shadow: 0 14px 32px rgba(75, 54, 22, .16);--shadow-soft: 0 8px 18px rgba(75, 54, 22, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;width:100%;height:100vh;overflow:hidden;background:linear-gradient(180deg,#c5e9f4,#f6f0d4 60%,#d8eebe);background-attachment:fixed;background-color:#d8eebe}button{font:inherit}.app-shell{height:100dvh;min-height:0;background:radial-gradient(circle at 88% 12%,rgba(255,233,138,.55) 0 6%,transparent 12%),radial-gradient(circle at 12% 88%,rgba(160,220,140,.45) 0 8%,transparent 18%),linear-gradient(180deg,#c5e9f4,#f6f0d4 60%,#d8eebe);color:var(--ink);overflow:hidden;padding:clamp(12px,2vh,20px)}.intro-dialog,.intro-screen,.mode-select,.completion-screen{width:min(1060px,100%);height:100%;min-height:0;margin:0 auto;display:grid;align-content:center;justify-items:center;gap:clamp(14px,2vh,24px)}.intro-screen__visual,.completion-screen__visual{position:relative;min-height:240px;display:grid;place-items:center}.section-heading{max-width:760px;text-align:center}.section-heading h1,.section-heading h2,.training-header h1,.hint-panel h2{margin:0;line-height:1.05;font-family:Fredoka,Nunito,system-ui,sans-serif}.section-heading h1{font-size:clamp(2.4rem,8vw,5rem);color:#38260f}.section-heading h2,.hint-panel h2{font-size:clamp(2rem,5vw,3.4rem)}.section-heading p,.training-header p,.hint-panel p{color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);line-height:1.45}.eyebrow{margin:0 0 8px;color:#8a551b;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.primary-button,.secondary-button,.text-button,.intro-back-button{border:0;cursor:pointer;min-height:54px;padding:14px 22px;font-weight:900;border-radius:14px;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,filter .16s ease}.primary-button{background:linear-gradient(180deg,#4fb069,#2f8047);color:#fff;box-shadow:0 8px #1f5c33,0 14px 22px #276d3d40}.primary-button:disabled{background:#c8d8c8;box-shadow:0 6px #9bb19b;cursor:not-allowed;filter:saturate(.6)}.secondary-button{background:linear-gradient(180deg,#ffe6a3,#f8c769);color:#5c3c12;box-shadow:0 6px #c9941f,0 12px 16px #b4781e2e}.text-button{min-height:44px;padding:10px 16px;background:#fffaf0;color:#5c3c12;border:2px solid #dfb34a;border-radius:12px}.intro-back-button{background:linear-gradient(180deg,#f1f0eb,#d9d6cd);color:#786f61;box-shadow:0 8px #b9b4aa,0 14px 22px #645c5029}.primary-button:hover:not(:disabled),.secondary-button:hover,.text-button:hover,.intro-back-button:hover,.sound-toggle:hover,.mode-back-button:hover{transform:translateY(-2px)}.mode-button:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 38px #4b361638}.primary-button:active:not(:disabled),.secondary-button:active,.intro-back-button:active{transform:translateY(2px);box-shadow:0 2px 0 currentColor}.primary-button:focus-visible,.secondary-button:focus-visible,.text-button:focus-visible,.intro-back-button:focus-visible,.mode-button:focus-visible,.falling-banana:focus-visible{outline:4px solid #1f6feb;outline-offset:4px}.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.sound-toggle,.mode-back-button{position:fixed;top:clamp(10px,1.5vh,16px);z-index:20;min-height:42px;padding:9px 13px;border:2px solid #d8a32c;border-radius:12px;background:#fffaf0f0;color:#5c3c12;font-weight:900;font-size:.95rem;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.sound-toggle{right:clamp(10px,1.5vw,18px)}.mode-back-button{left:clamp(10px,1.5vw,18px)}.sound-toggle--on{background:#e7f8df;border-color:var(--leaf);color:#276d3d}.speech-bubble{position:relative;max-width:540px;padding:18px 22px;background:#fff;border:3px solid #f0c267;border-radius:22px;box-shadow:0 10px 24px #52381229}.speech-bubble__text{margin:0;font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:800;color:#3a2a14;line-height:1.35;white-space:pre-line}.speech-bubble:before{content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:22px solid #f0c267}.speech-bubble:after{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:18px solid #fff}.speech-bubble--inline{flex:1;min-width:240px}.mascot-say{display:flex;align-items:center;gap:14px;width:100%;max-width:none}.mascot-say--small .mascot-say__avatar .mascot{width:clamp(56px,7vh,72px);height:clamp(68px,9vh,90px)}.mascot-say--small{height:clamp(70px,11vh,92px);align-items:center}.mascot-say--small .speech-bubble{height:100%;display:flex;align-items:center;overflow:hidden;padding:clamp(10px,1.5vh,14px) clamp(14px,2vw,18px)}.mascot-say--small .speech-bubble__text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(.92rem,1.4vw,1.08rem)}.mascot-say__avatar{flex-shrink:0}.intro-dialog{position:relative}.intro-dialog__scene{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:28px;width:min(840px,100%)}.intro-dialog__mascot .mascot{width:220px;height:260px}.intro-dialog__actions{display:grid;justify-items:center;gap:16px}.intro-dialog__button-row,.name-form__buttons{display:grid;grid-auto-columns:minmax(128px,1fr);grid-auto-flow:column;gap:12px;justify-content:center}.intro-dialog__button-row{width:min(292px,100%)}.intro-dialog__button-row--single{width:min(140px,100%)}.name-form__buttons{width:min(292px,100%)}.intro-dialog__button-row .primary-button,.intro-dialog__button-row .text-button,.intro-dialog__button-row .intro-back-button,.name-form__buttons .primary-button,.name-form__buttons .text-button,.name-form__buttons .intro-back-button{width:100%;min-height:54px;padding:14px 16px}.name-form{display:grid;gap:10px;justify-items:center}.name-form__label{font-weight:900;color:#5c3c12}.name-form__input{min-width:280px;padding:14px 18px;border:3px solid #dfb34a;border-radius:14px;font-size:1.4rem;font-weight:800;color:#38260f;background:#fffaf0;text-align:center}.name-form__input:focus-visible{outline:4px solid #1f6feb;outline-offset:2px}.terms-card{width:min(720px,100%);display:grid;gap:16px;padding:22px;background:var(--panel);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.terms-card__example{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:clamp(2rem,6vw,3.4rem);font-weight:1000;color:#38260f}.expr{display:inline-flex;align-items:center;gap:.35em;font-family:inherit;font-weight:inherit;line-height:1}.expr__num{cursor:default;position:relative}.expr__num[data-tooltip]{cursor:help}.expr__num[data-tooltip]:hover:after,.expr__num[data-tooltip]:focus:after{content:attr(data-tooltip);position:absolute;top:100%;left:50%;margin-top:8px;transform:translate(-50%);background:#38260f;color:#fff;padding:6px 12px;border-radius:8px;font-size:.95rem;font-weight:700;font-family:Nunito,system-ui,sans-serif;line-height:1.1;white-space:nowrap;z-index:100;pointer-events:none;box-shadow:0 4px 12px #0000002e}.expr__num[data-tooltip]:hover:before,.expr__num[data-tooltip]:focus:before{content:"";position:absolute;top:100%;left:50%;margin-top:2px;transform:translate(-50%);border:6px solid transparent;border-bottom-color:#38260f;z-index:100;pointer-events:none}.expr__num--minuend{color:#b27310}.expr__num--subtrahend{color:#b34b18}.expr__num--difference{color:#356d18}.expr__op{color:#5c3c12}.terms-card__num{display:grid;place-items:center;min-width:64px;min-height:64px;padding:4px 12px;border:3px solid currentColor;border-radius:14px}.terms-card__num--minuend{background:#fff1ba;color:#b27310}.terms-card__num--subtrahend{background:#ffd6c0;color:#b34b18}.terms-card__num--difference{background:#e0f3cb;color:#356d18}.terms-card__op{color:#5c3c12}.terms-card__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.terms-card__list li{display:grid;justify-items:center;gap:6px;padding:12px 10px;background:#fffaef;border:2px solid var(--line);border-radius:14px;text-align:center}.terms-card__list strong{color:#38260f;font-size:1.1rem}.terms-card__list small{color:var(--muted);font-weight:700}.terms-card__chip{display:grid;place-items:center;min-width:44px;min-height:44px;padding:4px 10px;border-radius:12px;border:3px solid currentColor;font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:1.6rem;font-weight:1000}.terms-card__chip--minuend{background:#fff1ba;color:#b27310}.terms-card__chip--subtrahend{background:#ffd6c0;color:#b34b18}.terms-card__chip--difference{background:#e0f3cb;color:#356d18}.intro-dialog__dots{display:flex;gap:10px;list-style:none;padding:0;margin:4px 0 0}.intro-dialog__dots li{width:14px;height:14px;background:#f0e0b3;border:2px solid #d8b455;border-radius:50%}.intro-dialog__dots li.is-active{background:var(--banana)}.term-strip{width:min(760px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.term-strip div{display:grid;gap:4px;padding:16px;background:var(--panel);border:2px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.term-strip strong{color:#5f8f1f;font-size:2.4rem}.term-strip span{font-weight:900}.term-strip small{color:var(--muted)}.mode-grid{width:min(1160px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mode-button{display:flex;flex-direction:column;align-items:stretch;gap:18px;min-height:320px;padding:22px;border:3px solid var(--line);border-radius:22px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}.mode-button__visual{width:100%;height:160px;border-radius:16px;background:linear-gradient(180deg,#eaf6dc,#d3eab2);border:2px solid #b9d796;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 12px 12px;overflow:hidden}.mode-button__visual svg{width:88%;height:105px;display:block}.mode-button__metaphor{font-size:.92rem;font-weight:700;color:#3f5e1f;line-height:1.25;text-align:center}.mode-button__method{margin:0;font-size:1.5rem;font-weight:1000;font-family:Fredoka,Nunito,system-ui,sans-serif;color:var(--ink);line-height:1.2}.mode-button__description{margin:0;padding:0;color:var(--muted);font-size:1.05rem;line-height:1.4}.mode-select__check{margin-top:clamp(8px,1.4vh,14px);min-width:220px}.progress-tree__falls{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:#a3461a;font-size:1rem;font-weight:1000}.answer-stage__result--wrong{color:#a3461a;background:#ffe8dcf0}.check-breakdown{list-style:none;margin:12px auto 0;padding:0;display:grid;gap:6px;width:min(420px,100%)}.check-breakdown li{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;background:#fffaf0;border:2px solid var(--line);border-radius:12px}.check-breakdown__name{font-weight:800;color:#38260f}.check-breakdown__count{font-weight:1000;color:#a3461a}.check-breakdown__score{display:inline-flex;align-items:baseline;gap:4px;font-weight:1000;font-size:1.15rem}.check-breakdown__correct{color:#2f8f3f}.check-breakdown__wrong{color:#c8341a}.check-breakdown__sep{color:#8a6a3a}.training-screen{width:min(1360px,100%);height:100%;min-height:0;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,30vw);gap:clamp(12px,1.6vh,18px);align-items:stretch}.training-screen__main,.review-screen__content{min-width:0;min-height:0;display:grid;gap:clamp(8px,1.2vh,12px);align-content:stretch}.training-screen__main{height:100%;grid-template-rows:minmax(72px,auto) minmax(70px,auto) minmax(168px,28vh) minmax(0,1fr)}.training-screen__main--no-method{grid-template-rows:minmax(72px,auto) minmax(70px,auto) minmax(0,1fr);align-content:start}.training-screen--learning .answer-stage--hint{height:auto;max-height:100%;align-self:start}.training-header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:0;padding:clamp(10px,1.6vh,14px) clamp(16px,2vw,22px);background:#fffaf0eb;border:3px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft)}.training-header .eyebrow{margin:0 0 2px}.training-header h1{font-size:clamp(2.2rem,7vh,4.2rem);line-height:.95}.method-view{min-height:0;height:100%;padding:clamp(10px,1.5vh,16px);overflow:hidden;background:#fffdf3;border:3px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.method-view--number-line{display:grid;gap:clamp(6px,1vh,10px);grid-template-rows:minmax(0,1fr) auto}.banana-line-wrap{width:100%;min-height:0;overflow:hidden;padding:0}.banana-line__svg{display:block;width:100%;min-width:0;height:100%;max-height:100%}.nl-slice{transition:opacity .2s ease}.nl-slice__num{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:22px;font-weight:900}.banana-line__controls{display:flex;justify-content:center}.method-view--parts{padding:clamp(10px,1.5vh,16px)}.parts-view{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(5px,.8vh,8px);justify-items:center;height:100%;min-height:0}.parts-view__stage-label{font-size:clamp(.95rem,1.5vh,1.08rem);font-weight:900;color:#5c3c12;text-align:center}.parts-view__groups{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(5px,.8vh,8px);min-height:0;overflow:hidden}.banana-group{display:grid;grid-template-columns:repeat(5,clamp(23px,2.9vh,30px));width:max-content;gap:clamp(3px,.55vh,5px);padding:clamp(6px,.8vh,8px);background:#fff7d4;border:3px dashed #d8a32c;border-radius:16px}.banana-group--small{grid-template-columns:repeat(5,clamp(23px,2.9vh,30px));background:#ffeec3}.banana-icon{display:block;width:100%;height:clamp(16px,2.1vh,20px);background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 38%),linear-gradient(135deg,var(--banana-light),var(--banana-deep));border:2.5px solid #9b6612;border-radius:60% 16%;transform:rotate(-12deg);box-shadow:0 3px #88501029;transition:opacity .22s ease,transform .22s ease}.banana-icon--small{width:22px;height:14px;border-width:2px}.banana-icon--removed{opacity:.18;transform:rotate(-12deg) scale(.85);filter:grayscale(.6)}.parts-view__plus{font-size:clamp(1.5rem,3vh,2.2rem);font-weight:1000;color:#5c3c12}.parts-view__formula{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(5px,1vh,8px);font-size:clamp(1.1rem,2.45vh,1.75rem);font-weight:1000;color:#3f3a24}.parts-formula__step{padding:5px 10px;background:#ffe49a;border:2px solid #d8a32c;border-radius:12px;color:#784713;opacity:.4;transition:opacity .2s ease,transform .2s ease}.parts-formula__step.is-active{opacity:1;transform:scale(1.05)}.parts-formula__eq{color:#5c3c12}.parts-view__step-btn{margin-top:4px;min-height:36px;padding:8px 12px}.method-view--sum{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(5px,.8vh,8px);justify-items:center;padding:clamp(10px,1.5vh,16px)}.sum-view__lead{margin:0;text-align:center;font-size:clamp(.9rem,1.35vh,1rem);font-weight:900;color:#5c3c12;max-width:540px}.sum-view__bowls{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(6px,1vh,10px);justify-content:center}.sum-view__bowl{min-width:clamp(86px,11vw,108px);padding:clamp(7px,1vh,10px) clamp(9px,1.3vw,12px);background:#fff7d4;border:3px solid #d8a32c;border-radius:18px;display:grid;gap:4px;justify-items:center}.sum-view__bowl--missing{background:#e7f8df;border-color:var(--leaf)}.sum-view__bowl--total{background:#fff;border-color:#38260f}.sum-bowl__count{font-size:clamp(1.4rem,3.2vh,2.25rem);font-weight:1000;font-family:Fredoka,Nunito,system-ui,sans-serif;color:#38260f;line-height:1}.sum-view__bowl--missing .sum-bowl__count{color:var(--leaf-dark)}.sum-bowl__label{font-size:.92rem;font-weight:800;color:var(--muted)}.sum-view__plus,.sum-view__equals{font-size:clamp(1.6rem,3vh,2.2rem);font-weight:1000;color:#5c3c12}.sum-view__row{display:flex;flex-wrap:wrap;gap:clamp(4px,.7vh,6px);justify-content:center;align-content:center;max-height:100%;overflow:hidden;padding:clamp(7px,1vh,10px) clamp(10px,1.5vw,14px);background:#fff;border:2px dashed #d8a32c;border-radius:14px}.banana-slot{display:inline-block;width:clamp(17px,2.2vh,24px);height:clamp(19px,2.5vh,28px);border-radius:50% 18%;border:2.5px solid #9b6612;transform:rotate(-12deg)}.banana-slot--filled{background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 38%),linear-gradient(135deg,var(--banana-light),var(--banana-deep))}.banana-slot--empty{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#fff3d6 4px 8px);border-style:dashed;opacity:.65}.sum-view__caption{margin:0;text-align:center;color:var(--muted);font-weight:800;font-size:clamp(.9rem,1.5vh,1rem)}.answer-stage{position:relative;min-height:0;height:100%;overflow:hidden;background:linear-gradient(180deg,#def3f7d9,#bee8c8c7);border:3px solid #9bc8ce;border-radius:18px}.answer-stage--hint{background:#fffaf0;border-color:var(--line)}.answer-stage--hint .hint-panel{height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}.answer-stage--hint .learning-panel{height:100%}.learning-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.2vh,30px);padding:clamp(14px,2.2vh,22px) clamp(16px,3vw,28px);background:transparent}.learning-panel__equation{width:min(720px,100%);margin:0;text-align:center;color:var(--ink);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:1000;line-height:1.1}.learning-panel__answer{display:inline-flex;align-items:baseline;gap:.35em;opacity:0;color:#356d18;animation:learning-answer-appear .26s ease-out var(--answer-delay, 2.4s) forwards}.learning-number-line{display:block;width:min(720px,100%);height:clamp(110px,18vh,160px)}.learning-number-line__axis,.learning-number-line__tick{stroke:#131313;stroke-width:2.5}.learning-number-line__answer-segment{opacity:0;stroke:#0e3a54;stroke-width:5;stroke-linecap:round;animation:learning-answer-appear .26s ease-out var(--answer-delay, 2.4s) forwards}.learning-number-line__answer-bleed{opacity:0;stroke:#0e3a5447;stroke-width:10;stroke-linecap:round;animation:learning-answer-appear .26s ease-out var(--answer-delay, 2.4s) forwards}.parts-learning{width:min(820px,100%);display:flex;justify-content:center}.parts-learning__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:clamp(6px,1.2vw,12px);font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:1000;color:var(--ink)}.parts-learning__op{color:#5c3c12}.parts-learning__answer{color:#356d18}.parts-learning__part{color:#b34b18}.parts-learning__minuend{color:#b27310}.parts-learning__split{position:relative;display:inline-flex;flex-direction:column;align-items:center}.parts-learning__sub{display:inline-block;color:#b34b18}.parts-learning__branches{width:clamp(46px,5.5vw,60px);height:clamp(28px,3.5vw,38px);margin-top:2px;overflow:visible}.parts-learning__branch{fill:none;stroke:#0e3a54;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.parts-learning__branch-bleed{fill:none;stroke:#0e3a5447;stroke-width:5.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.parts-learning__sub-parts{display:inline-flex;gap:clamp(18px,3vw,28px);font-size:.7em;color:#b34b18;opacity:0;animation:learning-answer-appear .3s ease-out var(--step-delay, 0ms) forwards}.parts-learning__appearing{display:inline-flex;align-items:baseline;gap:clamp(6px,1.2vw,12px);opacity:0;animation:learning-answer-appear .3s ease-out var(--step-delay, 0ms) forwards}.sum-learning{display:block;width:min(720px,100%);height:clamp(150px,26vh,220px)}.sum-learning__line{stroke:#131313;stroke-width:2.5}.sum-learning__arc{fill:none;stroke:#0e3a54;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.sum-learning__arc-bleed{fill:none;stroke:#0e3a5447;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.sum-learning__label{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:30px;font-weight:1000;fill:#131313;opacity:0;animation:learning-answer-appear .26s ease-out var(--step-delay, 0ms) forwards}.sum-learning__label--minuend{fill:#b27310}.sum-learning__label--subtrahend{fill:#b34b18}.sum-learning__label--difference{fill:#356d18}.learning-number-line__arc{fill:none;stroke:#0e3a54;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.learning-number-line__arc-bleed{fill:none;stroke:#0e3a5447;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:learning-arc-draw .6s ease-out var(--step-delay, 0ms) forwards}.learning-number-line__label{fill:#131313;font-size:26px;font-weight:800}@keyframes learning-arc-draw{0%{opacity:0;stroke-dashoffset:1}20%{opacity:1}to{opacity:1;stroke-dashoffset:0}}@keyframes learning-answer-appear{0%{opacity:0}to{opacity:1}}.learning-panel__placeholder{width:min(720px,100%);display:grid;justify-items:center;gap:14px;padding:clamp(20px,4vw,38px);color:var(--ink);text-align:center;background:#fffaf0;border:3px dashed var(--line);border-radius:18px}.learning-panel__placeholder h2,.learning-panel__placeholder p{margin:0}.learning-panel__placeholder h2{font-size:clamp(1.4rem,3vw,2rem)}.learning-panel__placeholder p{color:var(--muted);font-weight:800;line-height:1.45}.learning-panel__placeholder strong{color:#276d3d;font-size:clamp(1.4rem,3vw,2rem);font-weight:1000}.answer-stage__waiting,.answer-stage__result{position:absolute;inset:0;z-index:4;display:grid;align-content:center;justify-items:center;gap:20px;color:#255160;font-size:clamp(1.25rem,3vw,1.8rem);font-weight:1000;text-align:center;background:#e6f8faeb}.answer-stage__result--correct{color:#276d3d;background:#edffe2f0}.wait-line{width:min(360px,82%);height:14px;overflow:hidden;background:#fff7dc;border:2px solid #d8a32c;border-radius:8px}.wait-line:before{content:"";display:block;width:100%;height:100%;background:var(--banana);transform-origin:left;animation:wait-shrink var(--wait-duration, 5s) linear forwards}.falling-zone{position:absolute;inset:0;pointer-events:none}.falling-zone--active{pointer-events:auto}.falling-banana{position:absolute;top:-120px;left:var(--fall-left);width:clamp(116px,11vw,150px);height:clamp(80px,8vw,104px);padding:0;border:0;background:transparent;cursor:pointer;animation:fall var(--fall-duration) linear var(--fall-delay) forwards;transform:rotate(var(--fall-tilt));filter:drop-shadow(0 14px 14px rgba(70,48,18,.18))}.falling-banana:disabled{cursor:default;opacity:.42;animation-play-state:paused}.falling-banana__svg{position:absolute;inset:0;width:100%;height:100%}.falling-banana__answer{position:relative;z-index:1;display:grid;width:100%;height:100%;place-items:center;color:#4b320d;font-size:2.2rem;font-weight:1000;font-family:Fredoka,Nunito,system-ui,sans-serif;text-shadow:0 2px 0 rgba(255,255,255,.5)}.progress-tree{display:grid;grid-template-rows:auto 1fr;gap:clamp(8px,1vh,10px);min-width:0;height:100%;min-height:0;padding:clamp(10px,1.5vh,14px);background:linear-gradient(180deg,#f1faea,#d8eebe);border:3px solid #acd282;border-radius:18px;box-shadow:var(--shadow)}.progress-tree__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:#305d33;font-size:1.2rem;font-weight:1000}.progress-tree__label{color:var(--muted)}.progress-tree__bar{display:none;width:100%;height:14px;background:#fff8e1;border:2px solid #b9d796;border-radius:999px;overflow:hidden}.progress-tree__bar-fill{height:100%;background:linear-gradient(180deg,#6fc36c,#3d9b50);border-radius:999px;transition:width .32s ease-out}.tree-scene{position:relative;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;border-radius:14px;background:#cce8d3}.tree-scene__svg{display:block;width:100%;height:100%;position:absolute;inset:0}.tree-banana{transform-origin:184px 212px;transition:transform .4s ease}.tree-banana--won{transform:rotate(12deg) scale(1.1)}.tree-scene__monkey{position:absolute;left:50%;bottom:calc(var(--monkey-progress) * 48%);z-index:7;transform:translate(-50%);transition:bottom .48s cubic-bezier(.4,1.4,.6,1)}.mascot{position:relative;width:200px;height:240px;display:block}.mascot svg{display:block;width:100%;height:100%}.mascot--compact{width:110px;height:132px}.mascot__mouth-smile,.mascot__mouth-oh,.mascot__mouth-flat,.mascot__held-banana{transition:opacity .24s ease}.mascot__mouth-oh,.mascot__mouth-flat,.mascot__held-banana{opacity:0}.mascot--hello .mascot__arm-right{transform-origin:152px 150px;animation:wave 1.6s ease-in-out infinite}.mascot--happy.mascot--with-banana .mascot__held-banana{opacity:1}.mascot--thinking .mascot__mouth-smile{opacity:0}.mascot--thinking .mascot__mouth-flat{opacity:1}.mascot--oops .mascot__mouth-smile{opacity:0}.mascot--oops .mascot__mouth-oh{opacity:1}.mascot--climb svg{transform:rotate(-4deg)}.review-screen{width:min(1360px,100%);height:100%;min-height:0;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,28vw);gap:clamp(12px,1.6vh,18px)}.review-screen__content{height:100%;min-height:0;grid-template-rows:minmax(168px,28vh) minmax(0,1fr)}.hint-panel{display:grid;align-content:center;gap:14px;min-height:0;overflow:hidden;padding:clamp(18px,2.4vh,24px);background:#fffaf0;border:3px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.hint-panel__text{margin:0;color:#3f3a24;font-size:clamp(1.15rem,2.5vw,1.5rem);font-weight:800;line-height:1.4}.completion-screen{text-align:center;position:relative}.celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.celebration__piece{position:absolute;top:-86px;left:var(--c-left);width:54px;height:40px;background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 38%),linear-gradient(135deg,var(--banana-light),var(--banana-deep));border:2.5px solid #9b6612;border-radius:60% 18%;animation:confetti-fall var(--c-duration) cubic-bezier(.4,.05,.6,1) var(--c-delay) infinite;filter:drop-shadow(0 8px 8px rgba(70,48,18,.18))}.celebration__piece--1{width:24px;height:24px;background:radial-gradient(circle at 40% 30%,#fff,#ffd24a 60%,#f0a928);border-radius:50%;border-width:2px}.celebration__piece--2{width:28px;height:28px;background:linear-gradient(135deg,#fff39a,#ff9d2f);border:none;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.celebration__piece--3{width:46px;height:34px;background:linear-gradient(135deg,#b6e8a3,#4caf50);border-color:#2f7a3d;border-radius:60% 18%}.completion-screen__visual,.section-heading,.button-row{position:relative;z-index:2}@keyframes confetti-fall{0%{transform:translateY(-60px) rotate(var(--c-tilt));opacity:0}10%{opacity:1}to{transform:translateY(110vh) rotate(calc(var(--c-tilt) + 540deg));opacity:1}}@keyframes wait-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes fall{0%{top:-120px}to{top:100%}}@keyframes wave{0%,to{transform:rotate(0)}50%{transform:rotate(-18deg)}}@media(max-width:1080px){.mode-grid{grid-template-columns:repeat(2,1fr)}.training-screen,.review-screen{grid-template-columns:minmax(0,1fr) minmax(240px,26vw)}}@media(max-width:940px){body{height:auto;min-height:100vh;overflow:auto}.app-shell{height:auto;min-height:100vh;overflow:visible;padding:clamp(10px,2vw,16px)}.intro-dialog__scene{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}.intro-dialog__mascot .mascot{width:150px;height:180px}.intro-screen,.mode-select,.completion-screen,.training-screen,.review-screen{min-height:0;height:auto}.mode-grid,.training-screen,.review-screen{grid-template-columns:1fr}.progress-tree{min-height:0;height:auto;order:2}.tree-scene{height:auto;aspect-ratio:320 / 420;max-width:280px;margin:0 auto}.training-header{text-align:center}.training-screen__main,.training-screen__main--no-method{height:auto;grid-template-rows:auto auto auto auto}.training-screen--learning .answer-stage--hint{max-height:none}.answer-stage{min-height:320px}.term-strip,.terms-card__list{grid-template-columns:1fr}.sound-toggle,.mode-back-button{font-size:.85rem;padding:7px 11px}.speech-bubble{max-width:100%}}@media(max-width:640px){.mascot-say{gap:8px}.speech-bubble--inline{min-width:0}.mascot-say--small{height:52px;gap:8px}.mascot-say--small .mascot-say__avatar .mascot{width:38px;height:46px}.mascot-say--small .speech-bubble{padding:6px 10px}.mascot-say--small .speech-bubble__text{font-size:.85rem;line-height:1.2;-webkit-line-clamp:2;line-clamp:2}.hint-panel .mascot-say--small{height:52px}.hint-panel .mascot-say--small .mascot-say__avatar .mascot{width:36px;height:44px}.hint-panel .mascot-say--small .speech-bubble{padding:6px 10px}.hint-panel .mascot-say--small .speech-bubble__text{font-size:.82rem}}@media(max-width:640px){body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible;padding-top:calc(env(safe-area-inset-top,0px) + 60px);padding-bottom:max(12px,env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.training-screen,.review-screen{height:auto;min-height:100%;overflow:visible;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:8px;width:100%}.training-screen>*{min-width:0;width:100%;max-width:100%}.training-screen__main{height:auto;min-height:0;grid-template-rows:auto 52px 240px minmax(280px,auto)}.training-screen__main>*{min-width:0;width:100%;max-width:100%}.training-screen--hint .training-screen__main{grid-template-rows:auto 52px 240px auto}.training-screen__main--no-method,.training-screen--learning .training-screen__main{grid-template-rows:auto 52px minmax(360px,auto)}.mode-select,.intro-dialog,.completion-screen{height:auto;overflow:visible;align-content:start;padding:8px 0}.mode-grid{grid-template-columns:1fr;gap:12px}.mode-button{min-height:0;padding:16px;gap:12px}.mode-button__visual{width:100%;height:130px;padding:8px 10px 10px;gap:4px}.mode-button__visual svg{height:80px}.mode-button__metaphor{font-size:.85rem;font-weight:700}.mode-button__method{font-size:1.2rem}.mode-button__description{font-size:.95rem}.mode-select__check{width:100%;min-width:0}.training-header{padding:10px 12px;border-width:2px;border-radius:14px}.training-header h1{font-size:clamp(1.8rem,8vw,2.6rem)}.training-header .eyebrow{font-size:.8rem}.method-view{padding:12px 14px;border-width:2px;border-radius:14px;overflow:visible}.method-view{height:100%;min-height:0}.method-view--number-line{grid-template-rows:minmax(0,1fr) auto;gap:6px}.method-view--parts{grid-template-rows:auto minmax(0,1fr) auto auto;gap:4px}.method-view--sum{grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px}.banana-line-wrap{padding:0 6px;overflow:hidden;height:100%}.sum-view__row{max-height:100%;overflow:hidden}.training-screen--hint .method-view,.training-screen--learning .method-view{padding:10px 12px}.answer-stage{height:auto;min-height:280px;border-width:2px;border-radius:14px}.answer-stage--hint{height:auto;min-height:0;overflow:visible}.answer-stage--hint .hint-panel,.answer-stage--hint .learning-panel{height:auto;overflow:visible;min-height:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.hint-panel{overflow:visible;padding:14px;border-width:2px;border-radius:14px;gap:10px;align-content:start}.hint-panel .eyebrow{margin:0;font-size:.78rem}.hint-panel__text{font-size:.98rem;line-height:1.35}.hint-panel .mascot-say--small{height:auto}.hint-panel .primary-button,.learning-panel .primary-button{width:100%;max-width:320px;margin:4px auto 0;min-height:44px;padding:10px 14px;font-size:1rem}.training-screen--learning .answer-stage--hint{min-height:300px}.learning-panel{gap:10px;padding:12px 14px;justify-content:center;min-height:280px}.learning-panel__equation{font-size:1.25rem}.learning-number-line,.sum-learning{height:130px}.parts-learning{min-height:130px;display:flex;align-items:center;justify-content:center}.parts-learning__row{font-size:1.3rem}.falling-banana{width:clamp(64px,20vw,100px);height:clamp(48px,14vw,70px)}.falling-banana__answer{font-size:clamp(1.2rem,5vw,1.6rem)}.progress-tree{padding:10px 14px;border-width:2px;border-radius:14px;background:linear-gradient(180deg,#f1faea,#d8eebe);gap:8px}.progress-tree__top{margin:0;font-size:1.1rem}.progress-tree__bar{display:block}.tree-scene{display:none}.banana-group{grid-template-columns:repeat(5,clamp(18px,5vw,26px));padding:5px}.banana-icon{height:clamp(14px,3.8vw,18px)}.sound-toggle,.mode-back-button{top:calc(env(safe-area-inset-top,0px) + 8px);min-height:36px;padding:6px 10px;font-size:.78rem;border-radius:10px}.sound-toggle{right:max(8px,env(safe-area-inset-right,0px))}.mode-back-button{left:max(8px,env(safe-area-inset-left,0px))}.name-form__input{min-width:0;width:100%;max-width:280px;font-size:1.2rem;padding:12px 14px}.primary-button,.secondary-button,.intro-back-button{min-height:48px;padding:12px 16px}.text-button{min-height:40px;padding:8px 12px}.terms-card{padding:14px}.terms-card__chip{min-width:36px;min-height:36px;font-size:1.2rem}.speech-bubble{padding:12px 14px}.speech-bubble__text{font-size:1rem}.check-breakdown{font-size:.9rem}.check-breakdown li{padding:6px 10px}}@media(max-width:380px){.training-header h1{font-size:1.6rem}.mode-button__visual{height:110px}.mode-button__visual svg{height:64px}.mode-button__metaphor{font-size:.78rem}.mode-button__method{font-size:1.05rem}.falling-banana{width:clamp(56px,22vw,80px);height:clamp(42px,16vw,60px)}.falling-banana__answer{font-size:clamp(1rem,5vw,1.3rem)}.tree-scene{max-width:200px}.sound-toggle,.mode-back-button{font-size:.72rem;padding:5px 8px;min-height:32px}}@media(max-height:520px)and (orientation:landscape){.app-shell{padding:6px}.intro-dialog__mascot .mascot{width:120px;height:144px}.completion-screen__visual,.intro-screen__visual{min-height:140px}.training-header{padding:6px 12px}.training-header h1{font-size:clamp(1.5rem,5vh,2.4rem)}.answer-stage{min-height:180px}.falling-banana{width:clamp(80px,14vh,130px);height:clamp(56px,10vh,90px)}}@media(prefers-reduced-motion:reduce){.mascot__paw,.mascot__tail{animation-duration:1ms!important}html{scroll-behavior:auto!important}}
