: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;--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:310px minmax(0,920px);justify-content:center;align-items:start;gap:22px;width:min(1270px,100% - 32px);margin:24px auto 40px;display:grid}.app,.question-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}.question-selector{max-height:calc(100vh - 32px);color:var(--ink);background:#fffdf9f7;padding:21px;position:sticky;top:16px;overflow-y:auto}.question-selector::-webkit-scrollbar{width:8px}.history-list::-webkit-scrollbar{width:8px}.question-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-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;line-height:1.4}.filter-group{margin-top:24px}.filter-group h3{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;align-items:center;gap:9px;margin:0 0 10px;font-size:13px;display:flex}.filter-group h3:after{content:"";background:var(--line);flex:1;height:1px}.filter-number{color:#fff;background:var(--accent);letter-spacing:0;border-radius:8px;justify-content:center;align-items:center;width:28px;height:24px;font-size:11px;display:inline-flex}.filter-note{color:var(--muted);margin:-2px 0 10px;font-size:12px;line-height:1.45}.filter-list{gap:7px;display:grid}.phrase-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-checkbox{min-width:0;min-height:43px;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:8px;padding:9px 10px;font-size:13px;font-weight:750;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;display:flex;position:relative}.filter-checkbox:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 5px 12px #372f2512}.filter-checkbox input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.filter-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}.filter-checkbox-active{background:var(--accent-soft);border-color:#d99a2b7a}.filter-checkbox-active .filter-checkmark{color:#fff;background:var(--accent);border-color:var(--accent)}.constituent-filter.filter-checkbox-active{background:var(--teal-soft);border-color:#26968861}.constituent-filter.filter-checkbox-active .filter-checkmark{background:var(--teal);border-color:var(--teal)}.nonconstituent-filter.filter-checkbox-active{background:var(--coral-soft);border-color:#df6b5561}.nonconstituent-filter.filter-checkbox-active .filter-checkmark{background:var(--coral);border-color:var(--coral)}.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:620px;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:#df6b5538;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}.syntax-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:18px;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:#d99a2b21;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-sequence{color:#fff7dd;text-underline-offset:7px;padding:0 2px 2px;font-weight:800;text-decoration-line:underline;text-decoration-color:#f2b847;text-decoration-thickness:4px;display:inline}.question-note{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:310px;color:var(--muted);text-align:right;margin:0;font-size:13px;line-height:1.45}.answer-buttons{grid-template-columns:1fr 1fr;gap:12px;display:grid}.answer-button{min-height:68px;color:var(--ink);border:1px solid var(--line-strong);cursor:pointer;background:#fff;border-radius:13px;justify-content:center;align-items:center;gap:11px;padding:14px 16px;font-weight:800;transition:transform .15s,border-color .15s,box-shadow .15s,color .15s,background .15s;display:flex;box-shadow:0 5px 13px #372f250e}.answer-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 18px #372f2517}.answer-icon{border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:20px;font-weight:900;display:inline-flex}.constituent-answer .answer-icon{color:var(--teal-dark);background:var(--teal-soft)}.nonconstituent-answer .answer-icon{color:var(--coral-dark);background:var(--coral-soft)}.constituent-answer:hover:not(:disabled){border-color:var(--teal)}.nonconstituent-answer:hover:not(:disabled){border-color:var(--coral)}.constituent-answer.selected{color:#fff;background:var(--teal);border-color:var(--teal)}.nonconstituent-answer.selected{color:#fff;background:var(--coral);border-color:var(--coral)}.answer-button.selected .answer-icon{color:inherit;background:#ffffff29}.answer-button.correct-choice{color:#215e42;background:var(--success-soft);border-color:#6bad8a}.answer-button.correct-choice .answer-icon{color:#fff;background:var(--success)}.answer-button.incorrect-choice{color:#8f3e3e;background:var(--danger-soft);border-color:#d98b83}.answer-button.incorrect-choice .answer-icon{color:#fff;background:var(--danger)}.answer-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)}.test-evidence{text-align:left;background:#ffffffd1;border:1px solid #cfc5b8cc;border-radius:12px;margin:20px auto;padding:17px 18px}.evidence-heading{align-items:center;gap:12px;display:flex}.evidence-icon{width:45px;height:45px;color:var(--mustard-dark);background:var(--mustard-soft);border-radius:12px;flex:0 0 45px;justify-content:center;align-items:center;font-family:Georgia,Times New Roman,serif;font-size:17px;font-weight:850;display:inline-flex}.evidence-heading .section-kicker{margin-bottom:2px}.test-evidence h3{color:var(--ink);margin:0;font-size:18px}.test-evidence ul{gap:8px;margin:14px 0 0;padding-left:22px;display:grid}.test-evidence li{color:#4f5a65;line-height:1.5}.feedback .main-button{margin-top:2px}.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-sequence{color:var(--ink);-webkit-text-decoration-color:var(--mustard);text-decoration-color:var(--mustard);text-underline-offset:5px;text-decoration-thickness:3px}.history-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px;display:grid}.history-details 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-details small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800}.history-explanation{color:#5c5650;background:#ffffffdb;border:1px solid #ded7ccd1;border-radius:9px;margin:12px 0 0;padding:12px 13px;font-size:14px;line-height:1.5}@media (width<=1000px){.app-layout{grid-template-columns:1fr}.question-selector{max-height:none;position:static}.filter-list{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}.phrase-filter-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=680px){.app-layout{gap:12px;width:min(100% - 16px,1270px);margin:8px auto 22px}.app,.question-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}.answer-buttons,.action-buttons{grid-template-columns:1fr}.phrase-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.history-header{display:block}.clear-history-button{margin-top:13px}.history-details{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}}.question-selector .phrase-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}@media (width<=1000px){.question-selector .phrase-filter-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=680px){.question-selector .phrase-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}