:root{color:#26334b;font-synthesis:none;background:#fff7df;font-family:Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 10%,#fff 0 3px,#0000 4px),#fff7df;min-width:320px;min-height:100vh;margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline-offset:4px;outline:5px solid #253858}.app-shell{width:min(100%,720px);min-height:100svh;padding:max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));margin:auto;position:relative;overflow:hidden}.home-screen,.ready-screen,.result-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.sun-shape{opacity:.7;background:#ffe78f;border-radius:50%;width:280px;height:280px;position:absolute;top:-155px;right:-80px}.eyebrow{color:#6a7390;letter-spacing:.12em;margin:0 0 10px;font-size:clamp(16px,4vw,20px)}h1{letter-spacing:.08em;margin:0 0 40px;font-size:clamp(44px,12vw,76px);line-height:1.18}h1 span{color:#f05e4f}.count-picker{border:0;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,360px);margin:-16px 0 26px;padding:0;display:grid}.count-picker legend{color:#6a7390;width:100%;margin-bottom:10px;font-size:18px}.count-picker button{background:#fff;border:3px solid #dfd1ae;border-radius:18px;min-height:55px;font-size:21px;font-weight:700;box-shadow:0 4px #d8ccb1}.count-picker button.selected{color:#79500d;background:#fff1b8;border-color:#f4ad3e;box-shadow:0 4px #dda13e}.mode-buttons{gap:18px;width:min(100%,470px);display:grid}.mode-button{color:#fff;border:0;border-radius:28px;align-items:center;gap:24px;min-height:108px;padding:14px 28px;font-size:clamp(27px,7vw,38px);transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 8px #26334b2e}.mode-button:active{transform:translateY(5px);box-shadow:0 3px #26334b2e}.mode-button.addition{background:#f46f5f}.mode-button.subtraction{background:#4f83df}.mode-symbol{background:#ffffff38;border-radius:50%;place-items:center;width:66px;height:66px;font-size:55px;display:grid}.sound-button{background:#fffdf7;border:2px solid #d5c9a8;border-radius:999px;margin-top:36px;padding:13px 24px;font-size:18px}.ready-clock{background:#fff;border-radius:50%;place-items:center;width:112px;height:112px;margin:4px 0 24px;font-size:58px;display:grid;box-shadow:0 7px #e3d5b4}.ready-screen h1{margin-bottom:20px}.ready-description{color:#5c6680;margin:0 0 34px;font-size:20px;font-weight:700;line-height:1.7}.question-screen{flex-direction:column;display:flex}.question-header{grid-template-columns:54px 1fr 54px;align-items:center;gap:14px;display:grid}.back-button,.sound-icon{background:#fff;border:0;border-radius:50%;width:52px;height:52px;font-size:25px;box-shadow:0 3px 10px #d8ccb1}.progress-wrap{text-align:center}.progress-wrap p{margin:0 0 8px;font-size:18px}.progress-wrap .drill-timer{color:#6a7390;font-variant-numeric:tabular-nums;margin:7px 0 -24px;font-size:15px}.progress-track{background:#e2d7bd;border-radius:999px;height:12px;overflow:hidden}.progress-track span{border-radius:inherit;background:#f4ad3e;height:100%;transition:width .3s;display:block}.problem-card{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:315px;display:flex}.calculation{white-space:nowrap;justify-content:center;align-items:center;gap:clamp(10px,3vw,26px);font-size:clamp(54px,15vw,92px);font-weight:700;display:flex}.calculation-operator{color:#f05e4f}.question-mark{color:#4f83df}.feedback{height:56px;padding-top:7px;font-size:25px;font-weight:700}.feedback.correct{color:#d94e45}.feedback.correct span{vertical-align:-3px;font-size:38px}.feedback.incorrect{color:#6f527d}.hint-button{background:#fff7d9;border:2px solid #e5a832;border-radius:999px;min-height:52px;padding:8px 24px;font-size:19px}.hint-space{place-items:center;width:100%;height:76px;display:grid}.hint-visual{flex-wrap:wrap;justify-content:center;align-items:center;gap:13px;display:flex}.dot-group{align-items:center;gap:7px;display:inline-flex}.dot.new-five{margin-left:12px}.dot{border-radius:50%;width:23px;height:23px;display:inline-block;position:relative}.dot.filled{background:#f05e4f}.dot.outlined{background:#fff;border:4px solid #4f83df}.dot.removed{opacity:.75;background:#9ea5b2}.dot.removed:after{content:"";background:#4b5260;border-radius:3px;width:30px;height:3px;position:absolute;top:10px;left:-4px;transform:rotate(-45deg)}.hint-operator{font-size:26px}.zero-mark{color:#777;font-size:17px}.answers{grid-template-columns:repeat(4,1fr);gap:12px;width:min(100%,520px);margin:0 auto;display:grid}.answers button{background:#fff;border:0;border-radius:18px;min-height:68px;font-size:clamp(28px,8vw,39px);font-weight:700;box-shadow:0 5px #d8ccb1}.answers button:active{transform:translateY(3px);box-shadow:0 2px #d8ccb1}.answers button:disabled{cursor:default;opacity:.62}.shake{animation:.3s shake;background:#f6ddec!important}@keyframes shake{25%{transform:translate(-7px)}50%{transform:translate(7px)}75%{transform:translate(-4px)}}.result-star{color:#f4ad3e;filter:drop-shadow(0 5px #e5c16a);margin-bottom:16px;font-size:76px}.result-screen h1{color:#f05e4f;margin-bottom:24px}.result-card{background:#fff;border-radius:28px;width:min(100%,460px);margin-bottom:30px;padding:28px 18px;font-size:20px;box-shadow:0 7px #e3d5b4}.result-card strong{color:#4f83df;margin-bottom:20px;font-size:30px;display:block}.result-card p{margin:11px 0}.result-card b{color:#f05e4f;font-size:26px}.result-card .result-time{border-bottom:2px dashed #dfd1ae;padding-bottom:12px}.result-card .result-time b{font-size:34px}.result-card .record-message{color:#d97916;font-size:23px;font-weight:700}.primary-button{color:#fff;background:#f46f5f;border:0;border-radius:20px;width:min(100%,420px);min-height:66px;font-size:24px;box-shadow:0 6px #c64d42}.text-button{background:0 0;border:0;margin-top:24px;padding:10px;font-size:18px;text-decoration:underline}@media (width>=620px){.answers{grid-template-columns:repeat(6,1fr)}.problem-card{min-height:360px}}@media (height<=700px){.app-shell{padding-top:14px;padding-bottom:14px}.problem-card{min-height:250px}.hint-space{height:60px}.answers button{min-height:58px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
