*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--background:#faf9f5;--surface:#faf9f5;--surface-low:#f4f4f0;--surface-container:#efeeea;--surface-high:#e9e8e4;--on-surface:#1b1c1a;--on-surface-variant:#4d4636;--outline:#7e7664;--outline-variant:#d0c6b0;--primary:#735c00;--primary-container:#ffd966;--on-primary-container:#765e00;--secondary:#136964;--secondary-container:#a4f0e9;--on-secondary-container:#1d706a;--tertiary:#98443e;--tertiary-container:#ffd2cd;--success:#2f8f5b;--success-soft:#e7f7ee;--warning:#c58a00;--warning-soft:#fff4d6;--white:#fff;--shadow:0 10px 30px #23201814;--radius-lg:16px;--radius-xl:24px;--font-display:"Quicksand", system-ui, sans-serif;--font-body:"Nunito Sans", system-ui, sans-serif}html,body,#root{min-height:100%}body{font-family:var(--font-body);background:radial-gradient(circle at top left, #ffd96647, transparent 32%), radial-gradient(circle at top right, #a4f0e959, transparent 28%), linear-gradient(180deg, #fffdf7 0%, var(--background) 45%, #f3f1ea 100%);color:var(--on-surface);line-height:1.5}img{max-width:100%;display:block}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#faf9f5e0;border-bottom:1px solid #d0c6b08c;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex;position:sticky;top:0}.brand{align-items:center;gap:.75rem;display:flex}.brand-mark{background:var(--primary-container);width:42px;height:42px;font-family:var(--font-display);color:var(--on-primary-container);border-radius:14px;place-items:center;font-weight:700;display:grid;box-shadow:inset 0 -3px #735c001f}.brand-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1.1}.brand-subtitle{color:var(--on-surface-variant);font-size:.8rem;font-weight:600}.main{flex:1;width:min(720px,100%);margin:0 auto;padding:1.25rem 1.25rem 3rem}.hero{border-radius:calc(var(--radius-xl) + 4px);background:linear-gradient(145deg, #ffd9668c, #a4f0e959), var(--white);box-shadow:var(--shadow);margin-bottom:1.5rem;padding:1.5rem;position:relative;overflow:hidden}.hero h1{font-family:var(--font-display);margin-bottom:.5rem;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.15}.hero p{color:var(--on-surface-variant);max-width:34ch;font-size:1.05rem}.section-label{font-family:var(--font-display);margin-bottom:.85rem;font-size:1.15rem;font-weight:700}.subject-grid{gap:.85rem;display:grid}.subject-tile{border-radius:var(--radius-xl);background:var(--white);box-shadow:var(--shadow);border:2px solid #0000;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;min-height:88px;padding:1rem 1.1rem;transition:transform .18s,box-shadow .18s;display:grid}.subject-tile:hover{transform:translateY(-2px)}.subject-tile.ready{cursor:pointer}.subject-tile.locked{opacity:.72;cursor:default}.subject-icon{border-radius:18px;place-items:center;width:56px;height:56px;font-size:1.6rem;display:grid}.subject-name{font-family:var(--font-display);font-size:1.05rem;font-weight:700}.subject-desc{color:var(--on-surface-variant);font-size:.92rem}.pill{letter-spacing:.02em;border-radius:999px;justify-content:center;align-items:center;min-height:32px;padding:.25rem .75rem;font-size:.78rem;font-weight:700;display:inline-flex}.pill.ready{background:var(--secondary-container);color:var(--on-secondary-container)}.pill.soon{background:var(--surface-high);color:var(--outline)}.card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:1.25rem}.page-kicker{background:var(--secondary-container);color:var(--on-secondary-container);border-radius:999px;align-items:center;gap:.4rem;margin-bottom:.85rem;padding:.35rem .75rem;font-size:.82rem;font-weight:700;display:inline-flex}.page-title{font-family:var(--font-display);margin-bottom:.4rem;font-size:clamp(1.6rem,4vw,2rem);line-height:1.2}.page-lead{color:var(--on-surface-variant);margin-bottom:1.25rem}.cover-image{border-radius:var(--radius-xl);object-fit:cover;aspect-ratio:16/10;background:var(--surface-low);width:100%;margin-bottom:1.25rem}.meta-list{gap:.65rem;margin-bottom:1.5rem;display:grid}.meta-item{border-radius:var(--radius-lg);background:var(--surface-low);justify-content:space-between;gap:1rem;padding:.85rem 1rem;font-weight:600;display:flex}.meta-item span:last-child{color:var(--secondary)}.btn{border-radius:var(--radius-lg);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;min-height:56px;padding:.85rem 1.25rem;font-weight:700;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:active{transform:translateY(2px)}.btn-primary{background:var(--primary-container);width:100%;color:var(--on-primary-container);box-shadow:0 4px #735c002e}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{background:var(--surface-container);width:100%;color:var(--on-surface)}.btn-row{gap:.75rem;display:grid}.progress-wrap{margin-bottom:1rem}.progress-top{justify-content:space-between;gap:1rem;margin-bottom:.45rem;font-size:.92rem;font-weight:700;display:flex}.progress-bar{background:var(--surface-high);border-radius:999px;height:16px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#ffd966,#89d4cd);height:100%;transition:width .25s}.question-image{border-radius:var(--radius-xl);aspect-ratio:4/3;object-fit:cover;background:var(--surface-low);width:100%;margin-bottom:1rem}.question-text{font-family:var(--font-display);margin-bottom:1rem;font-size:1.35rem;font-weight:700}.options{gap:.75rem;margin-bottom:1.25rem;display:grid}.option{text-align:left;border-radius:var(--radius-lg);border:2px solid var(--outline-variant);background:var(--white);cursor:pointer;width:100%;min-height:64px;color:var(--on-surface);grid-template-columns:auto 1fr;align-items:center;gap:.85rem;padding:.9rem 1rem;font-weight:700;display:grid;box-shadow:0 3px #7d76642e}.option:disabled{cursor:default}.option.selected{background:#fff7d6;border-color:#c9a227}.option.correct{border-color:var(--success);background:var(--success-soft)}.option.wrong{background:var(--warning-soft);border-color:#d08a2f}.option-letter{background:var(--surface-container);width:36px;height:36px;font-family:var(--font-display);border-radius:12px;place-items:center;display:grid}.feedback{border-radius:var(--radius-lg);margin-bottom:1rem;padding:.9rem 1rem;font-weight:600}.feedback.good{background:var(--success-soft);color:#1f6b45}.feedback.retry{background:var(--warning-soft);color:#8a5a00}.reading-box{border-radius:var(--radius-xl);white-space:pre-wrap;background:#fff8e8;border:2px solid #c9a22740;margin-bottom:1.25rem;padding:1.15rem;font-size:1.05rem;line-height:1.7}.essay-input{resize:vertical;border:2px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--white);outline:none;width:100%;min-height:140px;margin-bottom:1rem;padding:1rem}.essay-input:focus{background:#fffdf4;border-color:#c9a227}.helper{color:var(--on-surface-variant);margin-bottom:1rem;font-size:.95rem}.result-hero{text-align:center;border-radius:calc(var(--radius-xl) + 4px);background:linear-gradient(160deg, #ffd966b3, #a4f0e973), var(--white);box-shadow:var(--shadow);margin-bottom:1.25rem;padding:1.5rem 1.25rem}.result-hero h1{font-family:var(--font-display);margin:.4rem 0;font-size:clamp(2rem,6vw,2.6rem)}.stars{letter-spacing:.15em;font-size:1.8rem}.score-big{font-family:var(--font-display);color:var(--secondary);font-size:3rem;font-weight:700}.back-link{color:var(--secondary);align-items:center;gap:.35rem;margin-bottom:0;font-weight:700;display:inline-flex}.quiz-nav{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.back-btn{cursor:pointer;background:0 0;border:none;padding:0}.exit-link{color:var(--outline);font-size:.92rem;font-weight:700}.essay-layout{gap:1rem;display:grid}.essay-passage-sticky{z-index:10;border-radius:var(--radius-xl);background:#fff8e8;border:2px solid #c9a22747;padding:.85rem 1rem 1rem;position:sticky;top:72px;box-shadow:0 8px 24px #23201814}.essay-passage-label{font-family:var(--font-display);color:var(--on-primary-container);margin-bottom:.45rem;font-size:.92rem;font-weight:700}.essay-passage-scroll{white-space:pre-wrap;max-height:min(28vh,180px);color:var(--on-surface);padding-right:.25rem;font-size:.98rem;line-height:1.65;overflow-y:auto}.essay-answer-card{margin-bottom:1rem}.chapter-list{gap:1.25rem;display:grid}.chapter-card{margin-bottom:0}@media (width>=720px){.essay-passage-sticky{top:80px}.essay-passage-scroll{max-height:min(32vh,220px)}}.sound-toggle{background:var(--secondary-container);min-height:42px;color:var(--on-secondary-container);cursor:pointer;border:none;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;font-weight:700;box-shadow:0 2px #1369642e}.sound-toggle[aria-pressed=true]{background:var(--surface-high);color:var(--outline);box-shadow:none}@media (width>=720px){.subject-grid{grid-template-columns:1fr 1fr}.subject-tile{grid-template-rows:auto auto;grid-template-columns:auto 1fr}.subject-tile .pill{grid-column:2;justify-self:start}}