:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{min-width:320px;min-height:100%}#root{min-height:100vh}:root{--ink:#24313f;--muted:#66717d;--cream:#f7f3eb;--paper:#fffdf9;--panel:#fff;--line:#ded7cc;--line-strong:#cfc5b8;--navy:#1f3d57;--navy-light:#347aa4;--coral:#df6b55;--coral-dark:#b94f3d;--coral-soft:#faece8;--blue:#2f7ca8;--blue-dark:#246587;--blue-soft:#e8f1f6;--mustard:#d99a2b;--mustard-dark:#a97418;--mustard-soft:#fbf3e3;--teal:#269688;--teal-dark:#1d746a;--teal-soft:#e6f3f1;--violet:#8067a8;--violet-soft:#f0ebf6;--success:#2f7f57;--success-soft:#edf7f1;--danger:#b94f4f;--danger-soft:#fff0ee;--shadow:0 10px 28px #372f2514}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--ink);background-color:var(--cream);background-image:linear-gradient(#5b4e3c0b 1px,#0000 1px),linear-gradient(90deg,#5b4e3c0b 1px,#0000 1px);background-size:28px 28px;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-layout{--accent:var(--mustard);--accent-soft:var(--mustard-soft);--accent-dark:var(--mustard-dark);grid-template-columns:300px minmax(0,960px);justify-content:center;align-items:start;gap:22px;width:min(1300px,100% - 32px);margin:24px auto 40px;display:grid}.app,.category-selector{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px}.app{background:#fffdf9f7;width:100%;min-width:0;padding:30px;overflow:hidden}.eyebrow,.section-kicker,.feedback-kicker{color:var(--accent-dark);letter-spacing:.13em;text-transform:uppercase;margin:0 0 7px;font-size:12px;font-weight:850}.category-selector{background:#fffdf9f7;max-height:calc(100vh - 32px);padding:21px;position:sticky;top:16px;overflow-y:auto}.category-selector::-webkit-scrollbar{width:8px}.history-list::-webkit-scrollbar{width:8px}.category-selector::-webkit-scrollbar-thumb{background:#c9c1b7;border-radius:999px}.history-list::-webkit-scrollbar-thumb{background:#c9c1b7;border-radius:999px}.selector-heading{text-align:center}.selector-heading h2{color:var(--ink);margin:0;font-size:21px;line-height:1.25}.selector-count{background:var(--accent-soft);border:1px solid #d99a2b38;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:14px;padding:11px 13px;display:flex}.selector-count strong{color:var(--accent-dark);font-size:24px;line-height:1}.selector-count span{color:var(--muted);font-size:13px}.selector-question-count{color:var(--muted);margin:8px 0 0;font-size:12px}.selector-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;display:grid}.selector-actions button,.clear-history-button{color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);cursor:pointer;border-radius:9px;padding:9px 11px;font-size:13px;font-weight:750;transition:transform .15s,border-color .15s,background .15s}.selector-actions button:hover,.clear-history-button:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.selection-warning{color:#91433d;background:var(--danger-soft);text-align:center;border:1px solid #efc9c4;border-radius:9px;margin:14px 0 0;padding:10px;font-size:13px}.category-checkbox-list{gap:7px;margin-top:18px;display:grid}.category-checkbox{--category-color:var(--mustard);--category-soft:var(--mustard-soft);min-height:43px;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:9px;padding:9px 10px;font-size:13px;font-weight:750;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:flex;position:relative}.category-checkbox:hover{border-color:var(--category-color);transform:translateY(-1px);box-shadow:0 5px 12px #372f2512}.category-checkbox input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.category-checkmark{color:#0000;border:1px solid var(--line-strong);background:#f5f1ea;border-radius:7px;flex:0 0 21px;justify-content:center;align-items:center;width:21px;height:21px;font-size:12px;font-weight:900;display:inline-flex}.category-checkbox-active{background:var(--category-soft);border-color:color-mix(in srgb, var(--category-color) 48%, var(--line))}.category-checkbox-active .category-checkmark{color:#fff;background:var(--category-color);border-color:var(--category-color)}.category-noun,.category-pronoun,.category-determiner,.category-verb,.category-auxiliary,.category-modal,.category-adjective,.category-qualifier,.category-adverb,.category-preposition,.category-conjunction,.category-complementizer{--category-color:var(--mustard);--category-soft:var(--mustard-soft)}.app-header{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.app-header h1{color:var(--ink);letter-spacing:-.035em;margin:0;font-size:clamp(30px,4vw,42px);line-height:1.06}.app-header p:not(.eyebrow){max-width:650px;color:var(--muted);margin:10px 0 0;line-height:1.55}.score{color:#fff;background:var(--navy);text-align:center;border:1px solid #ffffff24;border-radius:13px;min-width:100px;padding:11px 15px;display:grid;box-shadow:0 7px 16px #1f3d5726}.score-label{color:#ffffffb8;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:850}.score-value{margin-top:2px;font-size:25px;line-height:1}.score-value span{color:#ffffffad;font-size:15px}.question-card{color:#fff;background:linear-gradient(135deg,#193750 0%,#235477 62%,#337ca4 100%);border:1px solid #1f3d5733;border-radius:18px;margin-top:26px;padding:18px;position:relative;overflow:hidden;box-shadow:0 14px 28px #1f3d5729}.question-card:before{content:"";border:2px solid #ffffff1f;border-radius:50%;width:190px;height:190px;position:absolute;top:-100px;right:-65px}.question-card:after{content:"";background:#d99a2b38;border-radius:50%;width:160px;height:160px;position:absolute;bottom:-116px;right:75px}.question-card-header{z-index:2;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.question-card-label{color:#ffffffc2;letter-spacing:.13em;text-transform:uppercase;font-size:11px;font-weight:850}.word-class-badge{color:#fff;background:#ffffff1f;border:1px solid #fff3;border-radius:999px;justify-content:center;align-items:center;min-width:45px;height:35px;font-family:Georgia,Times New Roman,serif;font-size:20px;font-weight:800;display:inline-flex}.sentence-stage{z-index:2;background:#ffffff14;border:1px solid #ffffff21;border-radius:14px;justify-content:center;align-items:center;min-height:180px;margin-top:14px;padding:30px 36px;display:flex;position:relative;overflow:hidden}.sentence-decoration{pointer-events:none;position:absolute}.decoration-one{border:2px solid #ffffff1f;border-radius:18px;width:74px;height:74px;top:-28px;left:-24px;transform:rotate(18deg)}.decoration-two{background:#df6b5521;border-radius:28px;width:90px;height:90px;bottom:-38px;right:-32px;transform:rotate(22deg)}.sentence{z-index:2;text-align:center;margin:0;font-size:clamp(22px,3vw,30px);line-height:1.65;position:relative}.target-word{color:#fff7dd;text-underline-offset:7px;padding:0 2px 2px;font-weight:850;text-decoration-line:underline;text-decoration-color:#f2b847;text-decoration-thickness:4px;display:inline}.question-pool{z-index:2;color:#ffffffb8;text-align:center;margin:14px 0 0;font-size:13px;position:relative}.answer-section{margin-top:28px}.section-heading{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:15px;display:flex}.section-heading h2{color:var(--ink);margin:0;font-size:23px;line-height:1.2}.section-help{max-width:340px;color:var(--muted);text-align:right;margin:0;font-size:13px;line-height:1.45}.category-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.category-button{--category-color:var(--mustard);--category-soft:var(--mustard-soft);min-height:68px;color:var(--ink);border:1px solid var(--line-strong);cursor:pointer;background:#fff;border-radius:12px;justify-content:flex-start;align-items:center;gap:9px;padding:10px 11px;font-size:13px;font-weight:800;transition:transform .15s,border-color .15s,box-shadow .15s,color .15s,background .15s;display:flex;box-shadow:0 5px 13px #372f250d}.category-button:hover:not(:disabled){border-color:var(--category-color);transform:translateY(-2px);box-shadow:0 9px 18px #372f2517}.category-button-mark{min-width:40px;height:34px;color:var(--category-color);background:var(--category-soft);border-radius:9px;flex:0 0 40px;justify-content:center;align-items:center;padding:0 5px;font-family:Georgia,Times New Roman,serif;font-size:13px;font-weight:900;display:inline-flex}.category-button-text{text-align:left;gap:3px;min-width:0;display:grid}.category-button-label{overflow-wrap:anywhere;font-weight:850;line-height:1.15}.category-button-subtitle{color:var(--muted);font-size:10px;font-weight:650;line-height:1.25}.category-button.selected .category-button-subtitle{color:#fffc}.category-button.correct-choice .category-button-subtitle{color:#41735a}.category-button.incorrect-choice .category-button-subtitle{color:#97514c}.category-button.selected{color:#fff;background:var(--category-color);border-color:var(--category-color)}.category-button.selected .category-button-mark{color:inherit;background:#ffffff29}.category-button.correct-choice{color:#215e42;background:var(--success-soft);border-color:#6bad8a}.category-button.correct-choice .category-button-mark{color:#fff;background:var(--success)}.category-button.incorrect-choice{color:#8f3e3e;background:var(--danger-soft);border-color:#d98b83}.category-button.incorrect-choice .category-button-mark{color:#fff;background:var(--danger)}.category-button:disabled{cursor:default}.action-buttons{grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;display:grid}.main-button,.secondary-button{cursor:pointer;border-radius:10px;width:100%;padding:13px 18px;font-weight:800;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}.main-button{color:#3c2d0f;background:var(--mustard);border:2px solid var(--mustard);box-shadow:0 7px 15px #d99a2b29}.main-button:hover:not(:disabled){background:#e3a638;border-color:#e3a638;transform:translateY(-1px)}.main-button:disabled{cursor:default;opacity:.45;box-shadow:none}.secondary-button{color:var(--navy);border:2px solid var(--navy);background:#fff}.secondary-button:hover{color:#fff;background:var(--navy);transform:translateY(-1px)}.feedback{text-align:center;border:1px solid;border-radius:15px;margin-top:26px;padding:23px}.feedback h2{color:var(--ink);margin:0 0 10px;font-size:26px}.feedback-answer{margin:0;font-size:17px;line-height:1.55}.feedback-explanation{max-width:720px;color:var(--muted);margin:12px auto 0;line-height:1.55}.correct-feedback{background:var(--success-soft);border-color:#bedecb}.correct-feedback .feedback-kicker{color:var(--success)}.incorrect-feedback{background:var(--danger-soft);border-color:#efc3bd}.incorrect-feedback .feedback-kicker{color:var(--danger)}.feedback .main-button{margin-top:17px}.history-panel{border-top:1px solid var(--line);margin-top:36px;padding-top:27px}.history-header{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:17px;display:flex}.history-header h2{color:var(--ink);margin:0;font-size:24px}.history-header p:not(.section-kicker){color:var(--muted);margin:6px 0 0;font-size:14px}.history-empty{color:var(--muted);border:1px dashed var(--line-strong);text-align:center;background:#f6f2eb;border-radius:12px;margin:0;padding:21px}.history-list{gap:12px;max-height:540px;padding-right:5px;display:grid;overflow-y:auto}.history-entry{border:1px solid var(--line);border-left:5px solid var(--line-strong);background:#fff;border-radius:13px;padding:17px;box-shadow:0 5px 14px #372f250b}.correct-history-entry{border-left-color:var(--teal);background:linear-gradient(90deg, var(--teal-soft), white 26%)}.incorrect-history-entry{border-left-color:var(--coral);background:linear-gradient(90deg, var(--coral-soft), white 26%)}.history-entry-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.history-status{letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:850;display:inline-flex}.history-status-correct{color:var(--teal-dark);background:var(--teal-soft)}.history-status-incorrect{color:var(--coral-dark);background:var(--coral-soft)}.history-time{color:#7a828e;font-size:11px}.history-sentence{color:var(--ink);text-align:center;margin:14px 0 0;font-size:17px;line-height:1.6}.history-sentence .target-word{color:var(--ink);-webkit-text-decoration-color:var(--mustard);text-decoration-color:var(--mustard);text-underline-offset:5px;text-decoration-thickness:3px}.history-error{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px;display:grid}.history-error span{text-align:center;background:#ffffffd9;border:1px solid #ded7ccd1;border-radius:9px;gap:3px;padding:11px;font-size:13px;line-height:1.4;display:grid}.history-error small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800}@media (width<=1000px){.app-layout{grid-template-columns:1fr}.category-selector{max-height:none;position:static}.category-checkbox-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=700px){.app-layout{gap:12px;width:min(100% - 16px,1300px);margin:8px auto 22px}.app,.category-selector{border-radius:14px;padding:18px}.app-header{display:block}.app-header h1{font-size:30px}.score{margin-top:17px;display:inline-grid}.sentence-stage{min-height:155px;padding:25px 16px}.sentence{font-size:21px}.section-heading{display:block}.section-help{text-align:left;margin-top:8px}.category-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.action-buttons{grid-template-columns:1fr}.category-checkbox-list{grid-template-columns:repeat(2,minmax(0,1fr))}.history-header{display:block}.clear-history-button{margin-top:13px}.history-error{grid-template-columns:1fr}}@media (width<=470px){.category-buttons,.category-checkbox-list{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}