:root{color:#172033;background:#f5f9ff;font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-width:320px;min-height:100vh}button,a{font:inherit}a{color:#075985;font-weight:700;text-underline-offset:.2em}a:focus-visible,button:focus-visible{outline:4px solid #0f172a;outline-offset:4px}.page-layout{min-height:100vh;padding:clamp(1rem,4vw,3rem)}.page-layout__content{width:min(100%,62rem);margin:0 auto}.home-actions{display:flex;width:min(100%,28rem);flex-direction:column;gap:.75rem}.home-actions .primary-button{width:100%}.page-layout h1{margin:0 0 1.5rem;color:#172033;font-size:clamp(1.75rem,7vw,3rem);line-height:1.15;overflow-wrap:anywhere}.page-layout p{font-size:1.125rem}.primary-button{min-height:3rem;border:3px solid #075985;border-radius:.875rem;padding:.7rem 1.25rem;background:#075985;color:#fff;cursor:pointer;font-weight:800;line-height:1.2}.primary-button:hover:not(:disabled){background:#0c4a6e}.primary-button:disabled{cursor:not-allowed;opacity:.62}.kana-question__kana{margin:0 0 .75rem;color:#172033;font-size:clamp(4rem,16vw,7rem);line-height:1;text-align:center}.kana-question__instruction{max-width:36rem;margin:0 auto 1.25rem;color:#334155;font-size:clamp(1rem,4vw,1.35rem);font-weight:800;line-height:1.4;text-align:center}.kana-question__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1rem}.kana-picture-choice{min-height:12rem;width:100%;align-items:center;border:2px solid #334155;border-radius:1rem;padding:1rem;background:#fff;color:#172033;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;font-weight:700}.kana-picture-choice[aria-pressed=true]{border-width:3px;border-color:#075985;background:#e0f2fe}.kana-picture-choice:disabled{cursor:default;opacity:.72}.kana-picture-choice img,.kana-picture-choice svg{width:min(10rem,100%);max-width:100%;aspect-ratio:1;height:auto;object-fit:contain}.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem}.answer-button{margin-top:0}.hint-button{border-color:#b45309;background:#f59e0b;color:#172033}.hint-button:hover:not(:disabled){background:#d97706}.choice-feedback{margin:1.5rem 0;border-radius:.75rem;padding:.75rem 1rem;background:#fff;font-weight:700}.stroke-order-page{display:grid;justify-items:center;gap:.75rem;margin:0 auto;text-align:center}.stroke-row-options{display:grid;width:min(100%,28rem);gap:.55rem}.stroke-row-actions{display:grid;width:min(100%,28rem);gap:.55rem;justify-items:center}.stroke-row-actions .primary-button{width:100%}.stroke-row-actions p{margin:0}.stroke-row-option{min-height:2.75rem;border:2px solid #7dd3fc;border-radius:.75rem;padding:.55rem 1rem;background:#fff;color:#0f172a;cursor:pointer;font-size:1.1rem;font-weight:800}.stroke-row-option[aria-pressed=true]{border-color:#075985;background:#e0f2fe;box-shadow:0 0 0 2px #bae6fd}.stroke-order-progress,.stroke-order-stroke-progress{margin:0;color:#334155;font-weight:800}.stroke-order-kana{margin:0;color:#172033;font-size:clamp(4rem,16vw,7rem);line-height:1}.stroke-order-stroke-progress{font-size:1.1rem}.stroke-feedback-slot{display:flex;width:min(100%,28rem);height:3.5rem;align-items:center;justify-content:center}.stroke-canvas{display:block;width:min(100%,28rem);aspect-ratio:1;margin:.5rem auto;border:3px solid #bae6fd;border-radius:1.25rem;background:#f8fcff;box-shadow:0 .5rem 1.25rem #0e74901f;touch-action:none}.stroke-next-slot{display:flex;width:100%;height:3rem;align-items:center;justify-content:center}.stroke-guide{fill:none;stroke:#94a3b8;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.28}.stroke-guide--active{stroke:#f59e0b;opacity:.75}.stroke-guide--completed{stroke:#38bdf8;opacity:.92}.stroke-hint--hidden{opacity:0;pointer-events:none}.stroke-input{fill:none;stroke:#0f766e;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.stroke-hint-start{fill:#fb7185;stroke:#fff;stroke-width:2}.stroke-hint-arrow{fill:none;stroke:#fb7185;stroke-width:4;stroke-linecap:round}.stroke-hint-label{fill:#475569;font-size:8px;font-weight:800;text-anchor:start}.stroke-feedback{margin:0;border:3px solid;border-radius:.875rem;padding:.7rem 1rem;font-size:1.15rem;font-weight:900;white-space:nowrap}.stroke-feedback--retry{border-color:#fb7185;background:#fff1f2;color:#9f1239}.stroke-feedback--retry:before{content:"↻ "}.stroke-feedback--success{border-color:#34d399;background:#ecfdf5;color:#047857}.stroke-feedback--success:before{content:"✓ "}.stroke-result-list{width:min(100%,28rem);margin:0 0 1rem;padding:0;list-style:none;text-align:left}.stroke-result-list li{margin-bottom:.5rem;border-radius:.75rem;padding:.75rem 1rem;background:#fff;box-shadow:0 .25rem .75rem #0f172a14;font-size:1.15rem;font-weight:800}.perfect-result-celebration{position:relative;isolation:isolate;overflow:hidden;margin:1.5rem 0;border:3px solid #f59e0b;border-radius:1rem;padding:1rem;background:#fffbeb;text-align:center}.perfect-result-celebration__message{position:relative;z-index:1;display:block;color:#b45309;font-size:clamp(1.5rem,7vw,2.25rem);font-weight:900}.perfect-result-celebration__stars,.perfect-result-celebration__confetti{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-around;font-size:clamp(1.25rem,6vw,2rem)}.perfect-result-celebration__stars{align-items:flex-end;padding-bottom:.25rem;color:#f59e0b;animation:perfect-result-stars 1.6s ease-in-out infinite}.perfect-result-celebration__confetti{color:#0284c7;animation:perfect-result-confetti 2.2s ease-in-out infinite}@keyframes perfect-result-stars{0%,to{opacity:.45;transform:scale(.9) rotate(-4deg)}50%{opacity:1;transform:scale(1.1) rotate(4deg)}}@keyframes perfect-result-confetti{0%{opacity:0;transform:translateY(-.5rem) rotate(0)}35%,75%{opacity:.8}to{opacity:0;transform:translateY(.75rem) rotate(18deg)}}@media (prefers-reduced-motion: reduce){.perfect-result-celebration__stars,.perfect-result-celebration__confetti{animation:none}}@media (max-width: 26rem){.page-layout{padding:.75rem}.page-layout h1{margin-bottom:.5rem;font-size:1.5rem}.kana-question__kana{margin-bottom:.75rem;font-size:clamp(3.25rem,18vw,4.5rem)}.kana-question__choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.kana-picture-choice{min-height:7rem;border-radius:.75rem;padding:.5rem .25rem;gap:.25rem;font-size:.9rem}.kana-picture-choice img,.kana-picture-choice svg{width:min(22vw,5rem)}.answer-button{margin-top:0}.quiz-actions{gap:.5rem}.choice-feedback{margin:.75rem 0;padding:.5rem .75rem}}