:root{color:#173a38;font-synthesis:none;text-rendering:optimizelegibility;--ink:#173a38;--green:#155c56;--green-bright:#23837a;--cream:#f7f1df;--paper:#fffdf6;--yellow:#ffd65a;--orange:#f18743;--blue:#4f87b8;--red:#a33f3f;--line:#c8d3c6;--shadow:0 10px 26px #1d3f3b24;background:#f7f1df;font-family:BIZ UDPGothic,Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}*{box-sizing:border-box}html{background:var(--cream);min-height:100%}body{background:radial-gradient(circle at 8% 4%, #ffd65a3d, transparent 28rem), linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);overscroll-behavior:none;min-width:320px;min-height:100dvh;margin:0}button,a{-webkit-tap-highlight-color:transparent}button{min-width:56px;min-height:56px;font:inherit;cursor:pointer;overflow-wrap:normal;word-break:keep-all;border:0}button:focus-visible,a:focus-visible{outline-offset:3px;outline:5px solid #215dab}button:disabled{cursor:default}h1,h2,p{margin-top:0}.app-shell main h1:focus{outline:none}.app-shell{width:min(100%,1180px);min-height:100dvh;padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:12px;min-height:56px;display:flex}.brand-button,.back-button,.settings-button{color:var(--green);background:0 0;border:2px solid #0000;border-radius:18px;justify-content:center;align-items:center;font-weight:900;display:inline-flex}.brand-button{gap:9px;padding:0 12px;font-size:1.16rem}.brand-mark{background:var(--yellow);border-radius:12px;place-items:center;width:38px;height:38px;display:grid}.back-button{background:var(--paper);border-color:#155c563d;gap:7px;padding:0 18px}.settings-button{background:var(--paper);border-color:#155c5638;width:56px;padding:0;font-size:1.4rem}.primary-button,.secondary-button,.action-button,.toggle-button,.danger-button{border-radius:18px;justify-content:center;align-items:center;min-height:60px;padding:10px 22px;font-weight:900;line-height:1.2;display:inline-flex}.primary-button,.action-button{color:#fff;background:var(--green);box-shadow:0 6px #0c4540}.primary-button:active,.action-button:active{transform:translateY(3px);box-shadow:0 3px #0c4540}.secondary-button,.toggle-button{border:3px solid var(--green);color:var(--green);background:var(--paper)}.danger-button{color:#7d2929;background:#fff8f3;border:3px solid #9a4848}.eyebrow{color:var(--green-bright);letter-spacing:.08em;overflow-wrap:normal;word-break:keep-all;margin-bottom:6px;font-size:1rem;font-weight:900}.home-screen{padding:18px 8px 48px}.home-hero{min-height:190px;box-shadow:var(--shadow);background:linear-gradient(100deg,#fffdf6fa 0 52%,#fffdf6d1 68%,#155c561f 100%),url(/photos/mount-fuji-shinkansen-n700.jpg) 50% 72%/cover;border:3px solid #155c561f;border-radius:30px;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:24px 30px;display:grid}.home-hero h1{margin-bottom:10px;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.1}.home-hero p:last-child{margin-bottom:0}.home-actions{gap:14px;width:220px;display:grid}.section-heading{justify-content:space-between;align-items:end;margin:28px 2px 12px;display:flex}.section-heading h2{margin:0;font-size:1.7rem}.five-question-badge{color:var(--green);background:var(--yellow);border-radius:999px;padding:8px 14px;font-weight:900}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;display:grid}.course-card{min-height:96px;color:var(--ink);background:var(--paper);text-align:left;border:3px solid #155c5629;border-radius:22px;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;padding:12px 16px;display:grid;box-shadow:0 4px #155c5626}.course-card:hover{border-color:var(--green-bright);transform:translateY(-2px)}.course-number{width:46px;height:46px;color:var(--green);background:var(--yellow);border-radius:15px;place-items:center;font-size:1.35rem;font-weight:900;display:grid}.course-card--subtraction .course-number{color:#642f12;background:#ffc193}.course-card--mixed .course-number{color:#fff;background:var(--green-bright)}.course-card-copy{gap:4px;display:grid}.course-card-copy strong{font-size:1.12rem}.course-card-copy strong,.course-card-copy span{overflow-wrap:normal;word-break:keep-all}.course-card-copy span{color:#49615f;font-size:1rem}.course-progress{color:var(--green);font-size:1rem;font-weight:900}.fixed-screen{min-height:0;overflow:hidden}.app-shell--course,.app-shell--practice,.app-shell--result{background-position:50%;background-size:cover;grid-template-rows:56px minmax(0,1fr);height:100dvh;min-height:0;display:grid;overflow:hidden}.app-shell--course,.app-shell--practice{background-image:linear-gradient(#f7f1dfad,#f7f1dfad),url(/photos/jr-nippo-line-817.jpg)}.app-shell--result{background-image:linear-gradient(#f7f1df9e,#f7f1df9e),url(/photos/sagami-line-205-cherry.jpg)}.course-screen,.practice-screen,.result-screen{height:100%;min-height:0;padding:8px}.course-screen{grid-template-columns:minmax(300px,.88fr) minmax(0,1.32fr);align-self:center;gap:12px;width:100%;height:auto;max-height:100%;display:grid}.course-copy-panel,.course-visual-panel{background:#fffdf6f5;border:3px solid #155c5621;border-radius:24px;min-width:0;min-height:0;box-shadow:0 8px 24px #10302d2e}.course-copy-panel{flex-direction:column;justify-content:center;padding:clamp(14px,2.2vw,28px);display:flex}.course-copy-panel h1{overflow-wrap:normal;text-wrap:balance;word-break:keep-all;margin-bottom:7px;font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.12}.course-description,.course-saved-status{overflow-wrap:normal;word-break:keep-all;margin-bottom:9px;line-height:1.45}.course-description{font-size:1.05rem}.course-saved-status{color:#49615f;font-size:1rem}.example-equation{background:#f3ecd7;border-radius:14px;align-self:flex-start;align-items:center;min-height:48px;margin-bottom:8px;display:inline-flex;overflow:hidden}.example-equation span{color:#fff;background:var(--green-bright);align-self:stretch;place-items:center;padding:0 11px;font-weight:900;display:grid}.example-equation strong{padding:4px 16px;font-size:1.55rem}.departure-button{white-space:nowrap;width:min(100%,300px);margin-top:12px;font-size:1.08rem}.course-visual-panel{background:repeating-linear-gradient(90deg,#0000 0 44px,#155c5608 44px 45px),linear-gradient(#fffdf6eb,#fffdf6eb),url(/photos/jr-nippo-line-817.jpg) 50%/cover;grid-template-rows:auto minmax(0,1fr);align-items:center;padding:10px 14px;display:grid}.visual-kicker{color:var(--green);white-space:nowrap;justify-self:center;margin:0;font-size:1.1rem;font-weight:900}.course-visual-panel .addition-stage,.course-visual-panel .subtraction-track{transform-origin:bottom;transform:scale(1.04)}@media (width>=900px) and (height>=620px){.course-visual-panel .addition-stage,.course-visual-panel .subtraction-track{transform:scale(1.24)}.course-visual-panel .subtraction-track--two-cars{transform:scale(.94)}}@media (width>=1050px) and (height>=820px){.course-visual-panel .addition-stage,.course-visual-panel .subtraction-track{transform:scale(1.28)}.course-visual-panel .subtraction-track--two-cars{transform:scale(.96)}}.train-visual{width:100%;min-width:0;margin:0;padding:2px 4px;overflow:hidden}.addition-scene,.subtraction-scene{align-content:center;min-height:184px;display:grid}.addition-groups,.connected-cars,.subtraction-track{justify-content:center;align-items:center;gap:9px;min-width:0;display:flex}.addition-stage{align-items:center;display:grid}.addition-stage>.addition-groups,.addition-stage>.connected-cars{grid-area:1/1}.connected-cars{visibility:hidden;opacity:0;gap:3px}.addition-scene--connected .addition-groups{pointer-events:none}.addition-scene--connected .addition-groups .train-unit--first{animation:2.2s cubic-bezier(.2,.72,.2,1) both couple-first-group}.addition-scene--connected .addition-groups .train-unit--second{animation:2.2s cubic-bezier(.2,.72,.2,1) both couple-second-group}.addition-scene--connected .addition-groups .math-sign{animation:1.7s ease-in both couple-sign}.addition-scene--connected .connected-cars{visibility:visible;animation:.7s ease-out 1.7s both reveal-connected-train}.train-unit{flex:0 244px;width:244px;min-width:185px;padding-top:30px;position:relative}.train-label{z-index:2;border:2px solid var(--green);min-width:78px;color:var(--green);background:var(--paper);text-align:center;white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:1rem;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%)}.train-car{border:4px solid var(--green);background:#eaf5eb;border-radius:24px 13px 12px 12px;height:105px;padding:14px 10px 9px;position:relative;box-shadow:inset 0 -8px #155c561f}.train-car:before{border:4px solid var(--green);background:var(--yellow);content:"";border-left:0;border-radius:0 12px 12px 0;width:12px;height:54px;position:absolute;top:20px;right:-10px}.seat-grid{grid-template-rows:repeat(2,37px);grid-template-columns:repeat(5,minmax(27px,1fr));gap:5px;display:grid}.seat{background:#fffdf6;border:2px solid #95aba2;border-radius:7px 7px 4px 4px;place-items:end center;display:grid;position:relative}.seat-number{color:#84968e;font-size:.78rem;font-weight:900;position:absolute;top:1px;right:3px}.passenger{width:24px;height:31px;transition:opacity 1.7s,transform 2.2s cubic-bezier(.2,.72,.2,1);display:block;position:relative}.passenger-head{border:2px solid var(--ink);background:#ffd3b4;border-radius:50%;width:11px;height:11px;position:absolute;top:0;left:7px}.passenger-body{border:2px solid var(--ink);background:var(--yellow);border-radius:7px 7px 4px 4px;width:19px;height:20px;position:absolute;bottom:0;left:3px}.passenger--first .passenger-body{background:var(--yellow);background-image:linear-gradient(90deg,#0000 42%,#173a388c 42% 58%,#0000 58%)}.passenger--second .passenger-body,.passenger--leaving .passenger-body{background-color:var(--orange);background-image:radial-gradient(circle,#ffffffc7 0 1.5px,#0000 2px);background-size:7px 7px}.passenger--remaining .passenger-body{background:#75b899}.train-wheels{justify-content:space-around;height:10px;padding:0 28px;display:flex}.train-wheels span{border:4px solid var(--ink);background:var(--yellow);border-radius:50%;width:17px;height:17px;margin-top:-4px}.math-sign{color:var(--orange);text-align:center;flex:0 0 28px;font-size:2rem;font-weight:900}.visual-caption{color:var(--green);overflow-wrap:normal;text-align:center;word-break:keep-all;margin:8px 0 0;font-size:clamp(1rem,1.6vw,1.2rem);font-weight:900;line-height:1.35}@keyframes couple-first-group{0%{opacity:1;transform:translate(0)}70%{opacity:1;transform:translate(42px)}to{opacity:0;transform:translate(54px)}}@keyframes couple-second-group{0%{opacity:1;transform:translate(0)}70%{opacity:1;transform:translate(-42px)}to{opacity:0;transform:translate(-54px)}}@keyframes couple-sign{0%{opacity:1}to{opacity:0}}@keyframes reveal-connected-train{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.subtraction-track{gap:12px}.subtraction-train-cars{flex:0 276px;align-items:center;gap:3px;min-width:185px;display:flex}.subtraction-train-cars .train-unit{flex:244px;width:244px}.subtraction-train-cars--two{flex:520px;min-width:320px;max-width:520px}.subtraction-train-cars--two .train-unit{min-width:158px}.subtraction-train-cars--two .train-car{padding-inline:7px}.subtraction-train-cars--two .seat-grid{grid-template-columns:repeat(5,minmax(20px,1fr));gap:3px}.walk-arrow{color:var(--orange);opacity:.25;font-size:1.7rem;font-weight:900;transition:opacity 1.4s}.station{background:linear-gradient(#0000 0 28%,#ffd65a4d 28% 100%);border-bottom:7px solid #806748;flex:0 142px;align-content:end;min-width:112px;height:110px;padding:6px;display:grid;position:relative}.station-sign{border:3px solid var(--green);color:var(--green);background:var(--paper);white-space:nowrap;border-radius:6px;padding:4px 14px;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%)}.station-passengers{flex-wrap:wrap-reverse;justify-content:center;align-items:end;gap:1px;min-height:65px;display:flex}.station-passengers .passenger{opacity:0;transform:translate(-55px)}.subtraction-scene--done .station-passengers .passenger{opacity:1;transform:translate(0)}.subtraction-scene--done .seat .passenger--leaving{opacity:0;transform:translate(60px)}.subtraction-scene--done .walk-arrow{opacity:1}.train-visual--compact{align-self:center}.train-visual--compact .addition-scene,.train-visual--compact .subtraction-scene{min-height:174px}.practice-screen{grid-template-rows:minmax(0,1fr) 100px;grid-template-columns:minmax(0,1fr);align-self:center;gap:8px;width:100%;max-height:640px;display:grid}.practice-lesson,.answer-panel{background:#fffdf6f5;border:3px solid #155c5621;border-radius:22px;min-width:0;min-height:0;box-shadow:0 8px 24px #10302d2e}.practice-lesson{grid-template-rows:80px minmax(0,1fr);padding:6px 12px 4px;display:grid}.practice-heading{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;display:grid}.question-count{color:var(--green);white-space:nowrap;background:#f1ead7;border-radius:999px;justify-self:start;margin:0;padding:7px 10px;font-size:1rem;font-weight:900}.equation{color:var(--ink);background:linear-gradient(90deg,#0000,#ffd65a3d 20% 80%,#0000);border-radius:22px;grid-column:2;justify-content:center;align-items:center;gap:clamp(8px,1.4vw,16px);margin:0;padding:3px 18px;font-size:clamp(3rem,7vw,5.25rem);line-height:.96;display:flex}.question-mark{width:clamp(58px,7vw,72px);height:clamp(58px,7vw,72px);color:var(--green);background:var(--yellow);border-radius:14px;place-items:center;display:grid}.practice-lesson .train-visual{align-self:stretch;align-items:center;padding:0 6px;display:grid}.practice-lesson .addition-scene,.practice-lesson .subtraction-scene{min-height:0}.practice-lesson .addition-stage,.practice-lesson .subtraction-track{transform-origin:bottom;transform:scale(.98)}.visual-actions{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.answer-panel .action-button,.answer-panel .replay-button{width:100%;min-width:0;min-height:64px;padding-inline:12px}.visual-done-label{color:var(--green-bright);white-space:nowrap;font-size:1rem;font-weight:900}.answer-panel{background:linear-gradient(#fffdf6,#fff9e9);grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(118px,.4fr) minmax(126px,.42fr) minmax(240px,1fr) minmax(260px,1fr);align-items:center;gap:8px;padding:6px 10px;display:grid}.answer-prompt{color:var(--green);overflow-wrap:normal;text-align:center;white-space:nowrap;word-break:keep-all;margin:0;font-size:1.05rem;font-weight:900;line-height:1.2}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px;height:100%;display:grid}.choice-button{border:4px solid var(--green);min-width:0;min-height:72px;color:var(--green);background:var(--paper);border-radius:19px;font-size:clamp(2rem,3.4vw,2.4rem);font-weight:900;box-shadow:0 4px #155c5640}.choice-button:disabled{color:#60736d;box-shadow:none;opacity:.72;background:#efeee7;border-color:#93a8a1}.choice-button--selected,.choice-button--selected:disabled{border-style:dashed;border-color:var(--orange);color:#733611;opacity:1}.choice-button--correct,.choice-button--correct:disabled{border-style:solid;border-color:var(--green);color:var(--green);opacity:1;background:#e5f5df}.feedback-area{grid-template-columns:minmax(96px,.65fr) minmax(86px,1fr);align-items:center;gap:6px;height:100%;min-height:0;display:grid}.feedback-message,.answer-hint{text-align:center;margin:0;line-height:1.25}.feedback-message{gap:2px;font-size:1.08rem;font-weight:900;display:grid}.feedback-line{white-space:nowrap}.feedback-message--correct{color:var(--green)}.feedback-message--try{color:#7b3b18}.answer-hint{color:#60736d;overflow-wrap:normal;word-break:keep-all;grid-column:1/-1;padding-inline:4px;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.35}.next-button{word-break:keep-all;width:100%;min-width:0;min-height:64px;padding-inline:8px}@media (width>=900px) and (height>=620px){.practice-screen{grid-template-rows:minmax(0,1fr) 118px}.practice-lesson{grid-template-rows:88px minmax(0,1fr)}.practice-lesson .addition-stage,.practice-lesson .subtraction-track{transform:scale(1.12)}.choice-button{min-height:86px;font-size:2.5rem}.answer-panel .action-button,.answer-panel .replay-button,.next-button{min-height:72px}}@media (width>=1050px) and (height>=820px){.practice-lesson .addition-stage,.practice-lesson .subtraction-track{transform:scale(1.24)}}.result-screen{grid-template-columns:minmax(330px,.85fr) minmax(0,1.35fr);align-self:center;gap:12px;width:100%;height:auto;max-height:100%;display:grid}.result-summary,.review-panel{background:#fffdf6f5;border:3px solid #155c5621;border-radius:24px;min-width:0;min-height:0;box-shadow:0 8px 24px #10302d2e}.result-summary{text-align:center;background:linear-gradient(#fffdf6e6,#fffdf6e6),url(/photos/sagami-line-205-cherry.jpg) 50%/cover;flex-direction:column;justify-content:center;align-items:center;padding:14px;display:flex}.result-summary h1{text-wrap:balance;margin-bottom:7px;font-size:clamp(1.9rem,3vw,2.55rem);line-height:1.15}.result-summary h1 span{white-space:nowrap;display:inline-block}.result-hint{overflow-wrap:normal;word-break:keep-all;margin:7px 0 0;font-size:1rem;line-height:1.4}.score-medallion{border:8px solid var(--yellow);width:124px;height:124px;color:var(--green);background:#fff9e5;border-radius:50%;justify-content:center;align-items:baseline;padding-top:25px;display:flex;box-shadow:0 6px #f187434d}.score-medallion strong{font-size:3.6rem;line-height:1}.score-medallion span{font-weight:900}.review-panel{grid-template-rows:auto auto 64px;align-content:center;gap:8px;padding:12px 16px;display:grid}.review-panel h2{white-space:nowrap;margin:0;font-size:clamp(1.3rem,2vw,1.6rem)}.mistake-list{align-content:start;gap:6px;margin:0;padding:0;list-style:none;display:grid}.mistake-list li{background:#f5ecdc;border-radius:10px;grid-template-columns:28px minmax(96px,116px) minmax(100px,1fr) auto;align-items:center;min-height:40px;padding:4px 10px;font-size:1rem;display:grid}.mistake-list li>span:first-child{color:var(--orange);font-weight:900}.mistake-list small{color:#60736d;white-space:nowrap;font-size:1rem}.all-correct-note{color:var(--green);place-self:center;font-size:1.15rem;font-weight:900}.result-actions{grid-template-columns:1fr 1.2fr;align-items:center;gap:10px;display:grid}.result-actions button{white-space:nowrap;min-width:0;min-height:64px;padding-inline:12px;font-size:1.05rem}.settings-screen{padding:18px 8px 48px}.settings-screen>h1{margin-bottom:18px}.settings-layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start;gap:16px;display:grid}.settings-column{gap:16px;display:grid}.settings-card{background:var(--paper);box-shadow:var(--shadow);border:3px solid #155c5621;border-radius:22px;padding:18px}.settings-card h2{margin-bottom:10px;font-size:1.25rem}.settings-card p{color:#49615f;line-height:1.6}.sound-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.sound-actions button{min-width:0;padding-inline:12px}.sound-actions button:disabled{color:#65716f;opacity:.72;background:#ecece8;border-color:#9aa7a4}.photo-credit-card ul{gap:4px;margin:0 0 10px;padding-left:1.3rem;display:grid}.photo-credit-card a{color:#125c77;text-underline-offset:3px;align-items:center;min-height:44px;font-weight:700;display:inline-flex}.settings-progress-list{gap:7px;margin:0;padding:0;list-style:none;display:grid}.settings-progress-list li{background:#f5efdf;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:6px 10px;display:flex}.settings-progress-list strong{color:var(--green);white-space:nowrap;font-size:1rem}.settings-progress-list li>span{overflow-wrap:normal;word-break:keep-all}@media (width>=761px){.answer-hint{white-space:nowrap}}@media (width<=760px){.app-shell,.app-shell--course,.app-shell--practice,.app-shell--result{height:auto;min-height:100dvh;display:block;overflow:visible}.topbar{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f7f1dff0;position:sticky;top:0}.home-hero,.course-screen,.practice-screen,.result-screen,.settings-layout{grid-template-columns:1fr}.practice-screen{grid-template-rows:auto auto;align-self:auto;gap:12px;max-height:none}.practice-heading{grid-template-columns:minmax(108px,auto) 1fr}.equation{grid-column:auto;padding-inline:8px}.course-screen,.result-screen{align-self:auto;max-height:none}.home-hero{background-position:62% 72%;gap:18px}.home-actions{width:100%}.course-grid{grid-template-columns:1fr}.fixed-screen{height:auto;overflow:visible}.course-copy-panel,.course-visual-panel,.practice-lesson,.result-summary,.review-panel{min-height:340px}.answer-panel{grid-template-rows:auto auto auto auto;grid-template-columns:1fr;gap:10px;min-height:0;padding:12px}.result-summary,.review-panel{min-height:0}.answer-panel .visual-actions{min-height:64px}.feedback-area{grid-template-columns:1fr;min-height:64px}.answer-hint{grid-column:1}.practice-lesson .addition-stage,.practice-lesson .subtraction-track{transform:none}.addition-groups,.connected-cars,.subtraction-track{justify-content:flex-start;width:max-content;min-width:100%}.train-visual{overflow-x:auto}}@media (width>=761px) and (height<=520px){.course-copy-panel h1{font-size:1.8rem}}@media (width<=520px){.brand-button>span:last-child{display:none}.home-hero{padding:20px}.course-card{grid-template-columns:52px 1fr}.course-progress{grid-column:2}.mistake-list li{grid-template-columns:22px 1fr auto}.mistake-list small{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.course-card:hover,.primary-button:active,.action-button:active{transform:none}}