:root{--color-page:#eef3f7;--color-surface:#fff;--color-chart-bg:#f8fafc;--color-heading:#111827;--color-text:#1f2937;--color-muted:#56657a;--color-border:#d4dde8;--color-button-border:#aebacc;--color-track:#dfe8ef;--color-accent:#255f85;--color-accent-dark:#1d4c6b;--color-accent-soft:#eaf5f8;--color-focus:#95c4dc;--color-disabled-bg:#edf2f7;--color-selected-disabled:#dbeef5;--color-score-bg:#f2f8fb;--color-correct-bg:#ecfdf3;--color-correct-border:#3f9b67;--color-correct-text:#14532d;--color-incorrect-bg:#fff1f2;--color-incorrect-border:#d64f62;--color-incorrect-text:#9f1239;--color-explanation-bg:#f8fafc;--shadow-card:0 18px 48px #0f172a1f;--radius-card:8px;--radius-control:8px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;color:var(--color-text);background:var(--color-page);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{background:var(--color-page);min-width:320px}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}#root{min-height:100svh}button{font-family:inherit}img{max-width:100%}h1{color:var(--color-heading);letter-spacing:0;margin:0;font-size:2rem;line-height:1.25}p{margin:0}@media (width<=768px){h1{font-size:1.7rem}}@media (width<=480px){h1{font-size:1.45rem}}.app-shell{min-height:100svh;padding:var(--space-6) var(--space-4);place-items:center;display:grid}.quiz-card{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);width:100%;max-width:920px;box-shadow:var(--shadow-card)}.question-screen,.result-screen,.setup-screen{gap:var(--space-5);padding:var(--space-6);flex-direction:column;display:flex}.screen-header{justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);align-items:flex-start;display:flex}.app-title,.question-count,.question-symbol,.result-summary,.score-text{margin:0}.app-title{color:var(--color-heading);font-size:1.05rem;font-weight:800}.setup-header{gap:var(--space-2);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);display:grid}.setup-fieldset{gap:var(--space-3);border:0;min-width:0;margin:0;padding:0;display:grid}.setup-fieldset legend{margin-bottom:var(--space-3);color:var(--color-heading);font-size:1.05rem;font-weight:900}.setup-option-grid{gap:var(--space-3);display:grid}.question-count-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-choice{align-items:center;gap:var(--space-3);min-width:0;min-height:82px;padding:var(--space-4);border:1px solid var(--color-button-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:flex}.setup-choice:hover:not(.disabled){border-color:var(--color-accent);background:var(--color-accent-soft)}.setup-choice:focus-within{outline:3px solid var(--color-focus);outline-offset:3px}.setup-choice input{width:18px;height:18px;accent-color:var(--color-accent);flex:none;margin:0}.setup-choice-text{gap:var(--space-1);min-width:0;display:grid}.setup-choice-main{color:var(--color-heading);overflow-wrap:anywhere;font-weight:900;line-height:1.3}.setup-choice-sub{color:var(--color-muted);font-size:.9rem;font-weight:800;line-height:1.35}.setup-choice.selected{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:inset 0 0 0 2px var(--color-accent)}.setup-choice.disabled{background:var(--color-disabled-bg);color:var(--color-muted);cursor:not-allowed}.setup-choice.disabled .setup-choice-main,.setup-choice.disabled .setup-choice-sub{color:var(--color-muted)}.setup-help{color:var(--color-muted);font-weight:700}.progress-area{gap:var(--space-2);width:min(320px,100%);display:grid}.question-count{color:var(--color-accent);text-align:right;font-size:1.15rem;font-weight:800}.progress-track{background:var(--color-track);border-radius:999px;width:100%;height:10px;overflow:hidden}.progress-bar{border-radius:inherit;background:var(--color-accent);height:100%;display:block}.question-copy{gap:var(--space-2);display:grid}.question-symbol{color:var(--color-muted);font-weight:700}.question-symbol span{color:var(--color-text)}.chart-frame{aspect-ratio:16/9;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-chart-bg);width:100%;overflow:hidden}.chart-frame img{object-fit:contain;width:100%;height:100%;display:block}.answer-buttons{gap:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.answer-button,.next-button,.retry-button,.secondary-button,.start-button{border:1px solid var(--color-button-border);border-radius:var(--radius-control);min-height:56px;font:inherit;letter-spacing:0;cursor:pointer;font-weight:800;line-height:1.25}.answer-button{justify-content:center;align-items:center;gap:var(--space-2);background:var(--color-surface);color:var(--color-text);white-space:normal;overflow-wrap:anywhere;padding:14px 12px;display:inline-flex}.answer-button:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-soft)}.answer-button:focus-visible,.next-button:focus-visible,.retry-button:focus-visible,.secondary-button:focus-visible,.start-button:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.answer-button.selected{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:inset 0 0 0 2px var(--color-accent)}.answer-button:disabled{cursor:not-allowed;background:var(--color-disabled-bg);color:var(--color-muted);opacity:1}.answer-button.selected:disabled{background:var(--color-selected-disabled);color:var(--color-heading)}.answer-button.correct-answer:disabled{border-color:var(--color-correct-border);background:var(--color-correct-bg);color:var(--color-correct-text);box-shadow:inset 0 0 0 2px var(--color-correct-border)}.answer-button.incorrect-selected:disabled{border-color:var(--color-incorrect-border);background:var(--color-incorrect-bg);color:var(--color-incorrect-text);box-shadow:inset 0 0 0 2px var(--color-incorrect-border)}.answer-marker{font-weight:900}.feedback{padding:var(--space-4);border-radius:var(--radius-control);text-align:center;font-size:1.15rem;font-weight:900}.feedback.correct{border:2px solid var(--color-correct-border);background:var(--color-correct-bg);color:var(--color-correct-text)}.feedback.incorrect{border:2px solid var(--color-incorrect-border);background:var(--color-incorrect-bg);color:var(--color-incorrect-text)}.next-button,.retry-button,.start-button{border-color:var(--color-accent);background:var(--color-accent);color:#fff;align-self:center;min-width:220px;padding:14px 24px}.next-button:hover,.retry-button:hover,.start-button:hover:not(:disabled){border-color:var(--color-accent-dark);background:var(--color-accent-dark)}.start-button{width:min(420px,100%)}.start-button:disabled{border-color:var(--color-button-border);background:var(--color-disabled-bg);color:var(--color-muted);cursor:not-allowed}.secondary-button{background:var(--color-surface);min-width:220px;color:var(--color-accent);border-color:var(--color-accent);padding:14px 24px}.secondary-button:hover{background:var(--color-accent-soft)}.explanation-panel{gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-explanation-bg);display:grid}.explanation-panel h2{color:var(--color-heading);letter-spacing:0;margin:0;font-size:1rem;line-height:1.35}.explanation-panel p{color:var(--color-text);overflow-wrap:anywhere;white-space:pre-line;line-height:1.8}.result-screen{text-align:center;align-items:center}.result-header{align-items:center;gap:var(--space-3);flex-direction:column;width:100%}.result-summary{color:var(--color-text);font-size:1.25rem;font-weight:800}.result-actions{justify-content:center;gap:var(--space-3);flex-wrap:wrap;width:100%;display:flex}.score-text{justify-content:center;align-items:baseline;gap:var(--space-2);width:100%;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-score-bg);color:var(--color-accent);flex-wrap:wrap;display:flex}.score-label,.score-unit{font-size:1.25rem;font-weight:800}.score-number{font-size:4rem;font-weight:900;line-height:1}@media (width<=768px){.app-shell{padding:var(--space-4)}.question-screen,.result-screen,.setup-screen{padding:var(--space-5)}.screen-header{flex-direction:column}.progress-area{width:100%}.question-count{text-align:left}.answer-buttons,.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.app-shell{padding:var(--space-3)}.question-screen,.result-screen,.setup-screen{gap:var(--space-4);padding:var(--space-4)}.answer-button,.next-button,.retry-button,.secondary-button,.start-button{min-height:54px}.next-button,.retry-button,.secondary-button{width:100%;min-width:0}.question-count-grid,.category-grid{grid-template-columns:1fr}.score-text{padding:var(--space-4)}.score-number{font-size:3.25rem}}
