*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body,#root{min-height:100vh}img,svg{display:block;max-width:100%}:root{--font-body: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;--font-display: "Verdana", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;--color-text: #24313c;--color-muted: #667680;--color-border-strong: #6fbbc1;--color-border-soft: #c6dfe2;--color-surface-top: #ffffff;--color-surface-base: #f5fbf9;--color-secondary: #eaf4f6;--color-accent: #22a06b;--color-accent-dark: #16794f;--color-feedback-glow: rgba(34, 160, 107, .24);--color-feedback-spark: rgba(255, 198, 87, .34);--color-focus: #f2a900;--color-page-top: #e9fbf4;--color-page-bottom: #f8fbff;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--border-width-medium: 2px;--border-width-strong: 2px;--radius-panel: 8px;--radius-button: 8px;--shadow-card: 0 18px 42px rgba(72, 112, 120, .16);--shadow-button: 0 6px 14px rgba(62, 109, 116, .16)}body{color:var(--color-text);font-family:var(--font-body);background-color:var(--color-page-bottom);background-image:linear-gradient(180deg,var(--color-page-top),var(--color-page-bottom)),linear-gradient(rgba(111,187,193,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(111,187,193,.08) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}button{min-width:44px;min-height:44px;border:var(--border-width-medium) solid var(--color-border-strong);border-radius:var(--radius-button);background:var(--color-surface-top);color:var(--color-text);font-family:var(--font-body);font-size:.95rem;font-weight:700;letter-spacing:0;line-height:1.15;padding:10px 14px;cursor:pointer;box-shadow:var(--shadow-button);transition:transform .12s ease-out,box-shadow .12s ease-out,background-color .12s ease-out,border-color .12s ease-out}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 9px 18px #3e6d7433}button:active:not(:disabled){transform:translateY(1px);box-shadow:0 3px 8px #3e6d7429}button:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.primary-button{background:var(--color-accent);border-color:var(--color-accent-dark);color:#fff}.primary-button:hover:not(:disabled){background:#27b678}.secondary-button{background:var(--color-secondary)}.secondary-button:hover:not(:disabled){background:#f3fafb}@media(prefers-reduced-motion:reduce){button{transition:none}}.app-shell{min-height:100vh;display:grid;place-items:center;padding:var(--space-5)}.update-notice{position:fixed;top:var(--space-3);left:50%;transform:translate(-50%);z-index:20;width:min(calc(100% - var(--space-4)),420px);border:var(--border-width-medium) solid var(--color-border-strong);border-radius:var(--radius-panel);background:#fffffff5;box-shadow:var(--shadow-card);padding:var(--space-2) var(--space-3);display:grid;gap:var(--space-2)}.update-notice p{margin:0;font-size:.84rem;line-height:1.35}.update-notice button{width:100%}.panel{width:min(100%,560px);border:var(--border-width-strong) solid rgba(111,187,193,.78);border-radius:var(--radius-panel);background:linear-gradient(180deg,var(--color-surface-top),var(--color-surface-base));padding:var(--space-5);box-shadow:var(--shadow-card)}.eyebrow{margin:0;font-size:.78rem;font-weight:700;color:var(--color-muted)}h1,h2{margin:0 0 var(--space-3);font-family:var(--font-display);letter-spacing:0}h1{font-size:clamp(2.25rem,9vw,4rem);line-height:1}h2{font-size:clamp(1.35rem,4.8vw,1.9rem);line-height:1.15}h3{margin:0 0 var(--space-2);font-family:var(--font-body);font-size:1rem;letter-spacing:0}html:lang(ja-JP) p{line-height:1.6}html:lang(ja-JP) button,html:lang(ja-JP) .numeric-button{font-family:var(--font-body);letter-spacing:0}p{margin:0 0 var(--space-3);line-height:1.45}.button-row{display:grid;gap:var(--space-3)}.title-panel{display:grid;gap:var(--space-5);text-align:center}.title-panel .button-row{margin:0}.title-hero{display:grid;gap:var(--space-3);padding-block:var(--space-3)}.title-kicker{width:min(100%,25rem);margin:0 auto;color:var(--color-muted);font-size:clamp(.98rem,3.5vw,1.15rem);font-weight:700}.title-start-button{min-height:76px;font-size:clamp(1.35rem,5.6vw,1.8rem)}.title-provenance{margin-top:var(--space-1);padding-top:var(--space-2);border-top:1px solid rgba(111,187,193,.28);text-align:center}.title-provenance-link,.title-provenance-text{display:inline-block;font-size:.76rem;color:#24313c94;overflow-wrap:anywhere}.title-provenance-link{text-underline-offset:.18em}.title-provenance-link:hover{color:var(--color-text)}.title-provenance-link:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.mastery-panel{margin:var(--space-3) 0;border:var(--border-width-medium) solid var(--color-border-soft);border-radius:var(--radius-panel);background:#ffffffb8;padding:var(--space-3)}.mastery-description{margin-bottom:var(--space-2);font-size:.9rem;color:var(--color-muted)}.mastery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.mastery-card{border:1px solid #b8d9dd;border-radius:var(--radius-button);background:#fff;padding:var(--space-2);text-align:center}.mastery-card--idle{border-color:#d4e5e8;background:#f7fbfc}.mastery-card--growing{border-color:#8bc8cc;background:#eefafa}.mastery-card--strong{border-color:#71c19a;background:#edf9f2}.mastery-card--practice{border-color:#f0b86f;background:#fff8ea}.mastery-table-label,.mastery-value,.mastery-rate{margin:0}.mastery-table-label{font-size:.78rem}.mastery-value{margin-top:var(--space-1);font-size:.72rem;line-height:1.3}.mastery-rate{margin-top:var(--space-1);font-family:var(--font-display);font-size:.9rem;font-weight:800}.mastery-practice-button{width:100%;margin-top:var(--space-2);min-height:34px;padding-inline:var(--space-1);font-size:clamp(.68rem,2.2vw,.78rem);line-height:1.2}.practice-scope-selector{display:grid;gap:var(--space-2)}.practice-scope-description{margin:0;color:var(--color-muted)}.practice-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.practice-scope-button{min-height:60px;font-size:clamp(.78rem,2.6vw,.92rem);line-height:1.2;padding-inline:var(--space-2);overflow-wrap:anywhere}.practice-scope-button.is-selected{background:#dff5f2;border-color:var(--color-accent);color:#155a40}.mode-select-panel{display:grid;gap:var(--space-4)}.mode-select-intro{display:grid;gap:var(--space-2)}.mode-select-intro h2,.mode-select-intro p{margin:0}.mode-start-section{display:grid;gap:var(--space-2)}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.mode-card{display:grid}.mode-start-button{width:100%;min-height:76px;font-size:clamp(1.05rem,3.4vw,1.3rem)}.mode-high-score{margin:var(--space-2) 0 0;font-size:.92rem;color:var(--color-muted)}.mode-high-score-value{color:var(--color-text);font-weight:800}.mode-reset-progress-button{color:var(--color-muted)}.mode-footer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.quiz-panel{position:relative;display:grid;gap:var(--space-4)}.correct-feedback-burst{position:absolute;inset:0;border-radius:var(--radius-panel);pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 34%,var(--color-feedback-spark),transparent 58%)}.quiz-panel h2{margin-bottom:0}.quiz-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);align-items:center;gap:var(--space-3)}.quiz-header p{margin:0}.quiz-score{color:var(--color-muted);font-size:.88rem;font-weight:700}.quiz-progress-group{min-width:0}.quiz-progress-label{margin:0 0 5px;color:var(--color-muted);font-size:.76rem;font-weight:700;text-align:right}.quiz-progress-track{position:relative;height:12px;border:1px solid #9fcfd2;border-radius:999px;background:#edf7f8;overflow:hidden}.quiz-progress-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fc288,#23a86e);transition:width .18s ease-out}.quiz-workspace{display:grid;place-items:center;min-height:170px;border:2px solid #b9dde0;border-radius:var(--radius-panel);background:linear-gradient(180deg,#fffffff0,#f1faf9f5),linear-gradient(rgba(111,187,193,.13) 1px,transparent 1px);background-size:auto,100% 42px;padding:var(--space-4)}.quiz-expression{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(.45rem,2.5vw,.9rem);margin:0;font-family:var(--font-display);font-size:clamp(2.25rem,10vw,4.4rem);font-weight:800;line-height:1.05}.answer-slot{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(92px,24vw,132px);min-height:clamp(64px,14vw,86px);padding:8px 14px;border:2px solid #56aeb6;border-radius:var(--radius-button);background:#fff;box-shadow:inset 0 -5px #6fbbc124;transition:background-color .12s ease-out,box-shadow .12s ease-out,border-color .12s ease-out,transform .12s ease-out}.numeric-pad{display:grid;gap:var(--space-2)}.numeric-pad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.numeric-button,.numeric-action-button,.submit-button{width:100%;min-height:58px}.numeric-button{border-color:#86cbd0;font-size:clamp(1.35rem,5vw,1.75rem);font-weight:800}.numeric-action-button{background:#eef7f8;border-color:#b2d8dc;color:#4e6970;font-size:clamp(.76rem,2.8vw,.9rem)}.submit-button{margin-top:var(--space-1);min-height:62px;font-size:clamp(1.1rem,4vw,1.35rem)}.result-panel{text-align:center}.result-panel--entry{will-change:transform,opacity}.result-score{font-family:var(--font-display);font-size:1.7rem;font-weight:800;margin-top:var(--space-2)}.result-status{border:1px solid #b6d8dc;border-radius:var(--radius-panel);background:#ffffffb8;padding:var(--space-3);margin-top:var(--space-3)}.mode-high-score,.result-status,.overlay-panel p{overflow-wrap:anywhere}.overlay-backdrop{position:absolute;inset:0;background:#24313c6b;display:grid;place-items:center;padding:var(--space-4)}.overlay-panel{width:min(100%,360px);background:var(--color-surface-top);border:var(--border-width-strong) solid var(--color-border-strong);border-radius:var(--radius-panel);padding:var(--space-4);box-shadow:var(--shadow-card)}.overlay-panel h3{margin:0 0 var(--space-3)}.overlay-panel p{margin-bottom:var(--space-2)}@media(prefers-reduced-motion:no-preference){.quiz-panel--correct-feedback{animation:quiz-correct-feedback .22s ease-out}.correct-feedback-burst.is-active{animation:correct-feedback-burst .22s ease-out}.result-panel--entry{animation:result-panel-entry .26s ease-out}.answer-slot--keyboard-feedback-a,.answer-slot--keyboard-feedback-b{animation:answer-slot-keyboard-feedback .15s ease-out}.answer-slot--submit-feedback-a,.answer-slot--submit-feedback-b{animation:answer-slot-submit-feedback .17s ease-out}@keyframes quiz-correct-feedback{0%{box-shadow:var(--shadow-card)}35%{box-shadow:inset 0 0 0 4px var(--color-feedback-glow),var(--shadow-card)}to{box-shadow:var(--shadow-card)}}@keyframes correct-feedback-burst{0%{opacity:0;transform:scale(.92)}35%{opacity:.64;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes result-panel-entry{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes answer-slot-keyboard-feedback{0%{background:#fff;transform:scale(1)}45%{background:#fff4c7;border-color:#e2a93b;box-shadow:inset 0 -5px #e2a93b24,0 0 0 4px #f2a90033;transform:scale(1.03)}to{background:#fff;transform:scale(1)}}@keyframes answer-slot-submit-feedback{0%{background:#fff;transform:scale(1)}45%{background:#dcf8e8;border-color:#22a06b;box-shadow:inset 0 -5px #22a06b1f,0 0 0 4px #22a06b2e;transform:scale(1.04)}to{background:#fff;transform:scale(1)}}}@media(prefers-reduced-motion:reduce){.quiz-panel--correct-feedback{box-shadow:inset 0 0 0 4px var(--color-feedback-glow),var(--shadow-card)}.correct-feedback-burst{display:none}.answer-slot--keyboard-feedback-a,.answer-slot--keyboard-feedback-b{background:#fff4c7;border-color:#e2a93b;box-shadow:inset 0 -5px #e2a93b24,0 0 0 4px #f2a90033}.answer-slot--submit-feedback-a,.answer-slot--submit-feedback-b{background:#dcf8e8;border-color:#22a06b;box-shadow:inset 0 -5px #22a06b1f,0 0 0 4px #22a06b2e}}@media(max-width:480px){.app-shell{padding:var(--space-3)}.update-notice{top:var(--space-2)}.panel{padding:var(--space-4)}.title-panel{gap:var(--space-4)}.mode-card{padding:var(--space-2)}.practice-scope-grid,.mode-grid,.mode-footer-actions{grid-template-columns:1fr}.mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-header{grid-template-columns:1fr}.quiz-progress-label{text-align:left}.quiz-workspace{min-height:150px;padding:var(--space-3)}.numeric-button,.numeric-action-button{min-height:56px}}@media(max-height:700px){.app-shell{align-items:start;padding-top:var(--space-3);padding-bottom:var(--space-3)}.quiz-panel{gap:var(--space-3)}.quiz-workspace{min-height:130px}.numeric-button,.numeric-action-button,.submit-button{min-height:50px}}@media(display-mode:standalone){.app-shell{padding-top:calc(var(--space-4) + env(safe-area-inset-top));padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}}