*,*: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: "Courier New", "Consolas", monospace;--color-text: #16253e;--color-border-strong: #1b2a41;--color-border-soft: #7f8fa3;--color-surface-top: #fffdf2;--color-surface-base: #f8f1d1;--color-secondary: #d9e5f2;--color-accent: #1f8f5f;--color-accent-dark: #0f5f40;--color-feedback-glow: rgba(31, 143, 95, .45);--color-feedback-spark: rgba(255, 183, 3, .4);--color-focus: #ffb703;--color-page-top: #20355f;--color-page-bottom: #101a34;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--border-width-medium: 3px;--border-width-strong: 4px;--radius-panel: 6px;--radius-button: 4px;--shadow-card: 6px 6px 0 #1b2a41;--shadow-button: 3px 3px 0 #1b2a41}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)),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 2px,transparent 2px,transparent 16px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 2px,transparent 2px,transparent 16px)}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-display);font-size:.9rem;letter-spacing:.02em;line-height:1.1;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow-button);transition:transform 80ms steps(2,end),box-shadow 80ms steps(2,end),background-color 80ms steps(2,end)}button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-border-strong)}button:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--color-border-strong)}button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.primary-button{background:var(--color-accent);border-color:var(--color-accent-dark);color:#f7fff9}.primary-button:hover:not(:disabled){background:#25a06c}.secondary-button{background:var(--color-secondary)}.secondary-button:hover:not(:disabled){background:#e6eef8}@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:#fffdf2f5;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);max-height:min(calc(100vh - var(--space-6)),760px);overflow:auto;border:var(--border-width-strong) solid var(--color-border-strong);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-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#385270}h1,h2{margin:0 0 var(--space-3);font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase}h1{font-size:clamp(1.4rem,3.8vw,1.95rem)}h2{font-size:clamp(1.1rem,3.2vw,1.45rem)}h3{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:1rem;letter-spacing:.04em;text-transform:uppercase}html:lang(ja-JP) .eyebrow,html:lang(ja-JP) h1,html:lang(ja-JP) h2,html:lang(ja-JP) h3{font-family:var(--font-body);text-transform:none;letter-spacing:.02em}html:lang(ja-JP) .eyebrow{font-size:.78rem}html:lang(ja-JP) p{line-height:1.6}html:lang(ja-JP) button{font-family:var(--font-body);letter-spacing:.01em}html:lang(ja-JP) .numeric-button{font-family:var(--font-display)}p{margin:0 0 var(--space-3);line-height:1.45}.button-row{display:grid;gap:var(--space-2)}.title-panel{display:grid;gap:var(--space-3)}.title-panel>p,.title-panel .mastery-panel,.title-panel .button-row{margin:0}.title-provenance{margin-top:var(--space-1);padding-top:var(--space-2);border-top:2px solid rgba(27,42,65,.18);text-align:center}.title-provenance-link,.title-provenance-text{display:inline-block;font-family:var(--font-display);font-size:.78rem;letter-spacing:.04em;color:#16253ec2;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}html:lang(ja-JP) .title-provenance-link,html:lang(ja-JP) .title-provenance-text{font-family:var(--font-body);letter-spacing:.02em}.mastery-panel{margin:var(--space-3) 0;border:var(--border-width-medium) solid var(--color-border-soft);border-radius:var(--radius-panel);background:#fcfeffeb;padding:var(--space-3)}.mastery-description{margin-bottom:var(--space-2);font-size:.9rem}.mastery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.mastery-card{border:2px solid #9ab2cc;border-radius:var(--radius-button);background:#fff;padding:var(--space-2);text-align:center}.mastery-card--idle{border-color:#b8c6d8;background:#f3f7fc}.mastery-card--growing{border-color:#8aa9ce;background:#edf5ff}.mastery-card--strong{border-color:#5a8bb8;background:#e4f1ff}.mastery-card--practice{border-color:#d8a377;background:#fff6ee}.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:.86rem;font-weight:700}.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{margin-top:var(--space-2)}.practice-scope-description{margin-bottom:var(--space-2)}.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(.7rem,2.6vw,.84rem);line-height:1.2;padding-inline:var(--space-2);overflow-wrap:anywhere}.practice-scope-button.is-selected{background:#d8e9fb;border-color:var(--color-border-strong)}.mode-grid{display:grid;gap:var(--space-3);margin-block:var(--space-3) var(--space-4)}.mode-card{border:var(--border-width-medium) solid var(--color-border-soft);border-radius:var(--radius-panel);padding:var(--space-3);background:#ffffffa6}.mode-start-button{width:100%}.mode-high-score{margin:var(--space-2) 0 0;font-size:.92rem}.mode-high-score-value{font-weight:700}.mode-reset-progress-button{margin-top:var(--space-2)}.quiz-panel{position:relative}.correct-feedback-burst{position:absolute;inset:0;border-radius:var(--radius-panel);pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 38%,var(--color-feedback-spark),transparent 56%)}.quiz-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2)}.quiz-header p{margin-bottom:var(--space-2)}.quiz-header p:last-child{margin-left:auto}.quiz-progress-group{min-width:168px;margin-left:auto}.quiz-progress-label{margin:0 0 4px;font-size:.76rem;text-align:right}.quiz-progress-track{position:relative;height:10px;border:var(--border-width-medium) solid #7c95b2;border-radius:999px;background:#e8f1fb;overflow:hidden}.quiz-progress-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6fbf82,#4b9f65);transition:width .18s ease-out}.quiz-expression{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.4rem);font-weight:700}.answer-slot{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:6px 10px;border:var(--border-width-medium) solid var(--color-border-strong);border-radius:var(--radius-button);background:#f7fbff}.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:52px}.numeric-action-button{background:#e7eef7;font-size:clamp(.74rem,2.8vw,.9rem)}.numeric-button{font-size:1.1rem}.submit-button{margin-top:var(--space-1)}.result-panel{text-align:center}.result-panel--entry{will-change:transform,opacity}.result-score{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-top:var(--space-2)}.result-status{border:var(--border-width-medium) dashed #91a8c3;border-radius:var(--radius-panel);background:#f8fbffe6;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:#101820ad;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}@keyframes quiz-correct-feedback{0%{box-shadow:var(--shadow-card)}35%{box-shadow:inset 0 0 0 3px var(--color-feedback-glow),var(--shadow-card)}to{box-shadow:var(--shadow-card)}}@keyframes correct-feedback-burst{0%{opacity:0;transform:scale(.86)}35%{opacity:.62;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)}}}@media(prefers-reduced-motion:reduce){.quiz-panel--correct-feedback{box-shadow:inset 0 0 0 3px var(--color-feedback-glow),var(--shadow-card)}.correct-feedback-burst{display:none}}@media(max-width:480px){.app-shell{padding:var(--space-3)}.update-notice{top:var(--space-2)}.panel{padding:var(--space-4)}.mode-card{padding:var(--space-2)}.practice-scope-grid{grid-template-columns:1fr}.mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.numeric-button,.numeric-action-button,.submit-button{min-height:48px}.quiz-progress-group{min-width:130px}.quiz-progress-label{font-size:.72rem}}@media(max-height:700px){.app-shell{align-items:start;padding-top:var(--space-3);padding-bottom:var(--space-3)}}@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))}}