: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;--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 rgba(55, 47, 37, .08)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background-color:var(--cream);background-image:linear-gradient(rgba(91,78,60,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(91,78,60,.045) 1px,transparent 1px);background-size:28px 28px;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{display:grid;grid-template-columns:310px minmax(0,930px);align-items:start;justify-content:center;gap:22px;width:min(1280px,calc(100% - 32px));margin:24px auto 40px}.app,.filter-panel{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.app{width:100%;min-width:0;padding:30px;overflow:hidden;background:#fffdf9f7}.eyebrow,.section-kicker,.feedback-kicker{margin:0 0 7px;color:var(--mustard-dark);font-size:12px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.filter-panel{position:sticky;top:16px;max-height:calc(100vh - 32px);padding:21px;overflow-y:auto;background:#fffdf9f7}.filter-panel::-webkit-scrollbar,.history-list::-webkit-scrollbar{width:8px}.filter-panel::-webkit-scrollbar-thumb,.history-list::-webkit-scrollbar-thumb{background:#c9c1b7;border-radius:999px}.selector-heading{text-align:center}.selector-heading h2{margin:0;color:var(--ink);font-size:21px;line-height:1.25}.selector-count{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:11px 13px;background:var(--mustard-soft);border:1px solid rgba(217,154,43,.22);border-radius:12px}.selector-count strong{color:var(--mustard-dark);font-size:24px;line-height:1}.selector-count span{color:var(--muted);font-size:13px}.selector-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.selector-actions button,.clear-history-button{padding:9px 11px;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:9px;cursor:pointer;font-size:13px;font-weight:750;transition:transform .15s ease,border-color .15s ease,background .15s ease}.selector-actions button:hover,.clear-history-button:hover{transform:translateY(-1px);border-color:var(--mustard);background:var(--mustard-soft)}.selection-warning{margin:14px 0 0;padding:10px;color:#91433d;background:var(--danger-soft);border:1px solid #efc9c4;border-radius:9px;font-size:13px;text-align:center}.filter-group{margin-top:24px}.filter-group h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--muted);font-size:13px;letter-spacing:.09em;text-transform:uppercase}.filter-group h3:after{content:"";height:1px;flex:1;background:var(--line)}.filter-number{display:inline-flex;width:28px;height:24px;align-items:center;justify-content:center;color:#fff;background:var(--mustard);border-radius:8px;font-size:11px;letter-spacing:0}.filter-list{display:grid;gap:7px}.filter-checkbox{position:relative;display:flex;min-height:43px;align-items:center;gap:9px;padding:9px 10px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px;font-weight:750;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}.filter-checkbox:hover{transform:translateY(-1px);border-color:var(--blue);box-shadow:0 5px 12px #372f2512}.filter-checkbox input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.filter-checkmark{display:inline-flex;width:21px;height:21px;flex:0 0 21px;align-items:center;justify-content:center;color:transparent;background:#f5f1ea;border:1px solid var(--line-strong);border-radius:7px;font-size:12px;font-weight:900}.filter-checkbox-active{background:var(--blue-soft);border-color:#2f7ca866}.filter-checkbox-active .filter-checkmark{color:#fff;background:var(--blue);border-color:var(--blue)}.rule-card{margin-top:24px;padding:14px;color:var(--muted);background:#f6f2eb;border:1px dashed var(--line-strong);border-radius:11px}.rule-card-title{margin:0 0 9px;color:var(--ink);font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.rule-card p:not(.rule-card-title){margin:8px 0 0;font-size:11px;line-height:1.5}.app-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.app-header h1{margin:0;color:var(--ink);font-size:clamp(30px,4vw,42px);line-height:1.06;letter-spacing:-.035em}.app-header p:not(.eyebrow){max-width:650px;margin:10px 0 0;color:var(--muted);line-height:1.55}.score{display:grid;min-width:100px;padding:11px 15px;color:#fff;background:var(--navy);border-radius:13px;box-shadow:0 7px 16px #1f3d5726;text-align:center}.score-label{color:#ffffffb8;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.score-value{margin-top:2px;font-size:25px;line-height:1}.score-value span{color:#ffffffad;font-size:15px}.word-card{position:relative;margin-top:26px;padding:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#193750,#235477 62%,#337ca4);border-radius:18px;box-shadow:0 14px 28px #1f3d5729}.word-card:before{position:absolute;top:-100px;right:-65px;width:190px;height:190px;border:2px solid rgba(255,255,255,.12);border-radius:50%;content:""}.word-card:after{position:absolute;right:75px;bottom:-116px;width:160px;height:160px;background:#df6b5538;border-radius:50%;content:""}.word-card-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}.word-card-label,.syllable-badge{color:#ffffffc2;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.syllable-badge{padding:7px 9px;background:#ffffff1c;border:1px solid rgba(255,255,255,.16);border-radius:999px;letter-spacing:.06em}.word-stage{position:relative;z-index:2;display:grid;min-height:210px;align-content:center;justify-items:center;margin-top:14px;padding:30px 36px;overflow:hidden;background:#ffffff14;border:1px solid rgba(255,255,255,.13);border-radius:14px}.word-decoration{position:absolute;pointer-events:none}.decoration-one{top:-28px;left:-24px;width:74px;height:74px;border:2px solid rgba(255,255,255,.12);border-radius:18px;transform:rotate(18deg)}.decoration-two{right:-32px;bottom:-38px;width:90px;height:90px;background:#d99a2b29;border-radius:28px;transform:rotate(22deg)}.word{position:relative;z-index:2;margin:0;font-size:clamp(42px,7vw,70px);font-weight:800;letter-spacing:.01em;line-height:1.2;text-align:center}.syllable-preview{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:21px}.syllable-preview span{padding:6px 9px;color:#ffffffde;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-size:15px;font-weight:750}.word-prompt{position:relative;z-index:2;margin:14px 0 0;color:#ffffffbd;font-size:13px;text-align:center}.answer-section{margin-top:28px}.secondary-section{padding-top:25px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:15px}.section-heading h2{margin:0;color:var(--ink);font-size:23px;line-height:1.2}.section-help{max-width:350px;margin:0;color:var(--muted);font-size:13px;line-height:1.45;text-align:right}.stress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.stress-choice{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"symbol number" "symbol syllable";column-gap:10px;min-height:73px;align-items:center;padding:11px 13px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;box-shadow:0 5px 13px #372f250d;text-align:left;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,background .15s ease}.stress-choice:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 18px #372f2517}.primary-choice:hover:not(:disabled){border-color:var(--coral)}.secondary-choice:hover:not(:disabled){border-color:var(--blue)}.stress-symbol{grid-area:symbol;display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;font-size:28px;font-weight:900}.primary-choice .stress-symbol{color:var(--coral-dark);background:var(--coral-soft)}.secondary-choice .stress-symbol{color:var(--blue-dark);background:var(--blue-soft)}.choice-number{grid-area:number;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.stress-choice strong{grid-area:syllable;font-size:17px}.primary-choice.selected{color:#fff;background:var(--coral);border-color:var(--coral)}.secondary-choice.selected{color:#fff;background:var(--blue);border-color:var(--blue)}.stress-choice.selected .stress-symbol{color:inherit;background:#ffffff29}.stress-choice.selected .choice-number{color:#ffffffbf}.stress-choice.correct-choice{color:#215e42;background:var(--success-soft);border-color:#6bad8a}.stress-choice.correct-choice .stress-symbol{color:#fff;background:var(--success)}.stress-choice.incorrect-choice{color:#8f3e3e;background:var(--danger-soft);border-color:#d98b83}.stress-choice.incorrect-choice .stress-symbol{color:#fff;background:var(--danger)}.stress-choice:disabled{cursor:default}.no-secondary-choice{grid-template-areas:"symbol syllable"}.no-secondary-choice strong{align-self:center}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.main-button,.secondary-button{width:100%;padding:13px 18px;border-radius:10px;cursor:pointer;font-weight:800;transition:transform .15s ease,background .15s ease,border-color .15s ease}.main-button{color:#3c2d0f;background:var(--mustard);border:2px solid var(--mustard)}.main-button:hover:not(:disabled){transform:translateY(-1px);background:#e3a638;border-color:#e3a638}.main-button:disabled{cursor:default;opacity:.45}.secondary-button{color:var(--navy);background:#fff;border:2px solid var(--navy)}.secondary-button:hover{transform:translateY(-1px);color:#fff;background:var(--navy)}.feedback{margin-top:26px;padding:23px;border:1px solid;border-radius:15px;text-align:center}.feedback h2{margin:0 0 10px;color:var(--ink);font-size:26px}.stressed-word{margin:8px 0 0;color:var(--navy);font-size:clamp(28px,5vw,40px);font-weight:850;letter-spacing:.03em}.feedback-explanation{max-width:700px;margin:13px auto 0;color:var(--muted);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{margin-top:36px;padding-top:27px;border-top:1px solid var(--line)}.history-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}.history-header h2{margin:0;color:var(--ink);font-size:24px}.history-header p:not(.section-kicker){margin:6px 0 0;color:var(--muted);font-size:14px}.history-empty{margin:0;padding:21px;color:var(--muted);background:#f6f2eb;border:1px dashed var(--line-strong);border-radius:12px;text-align:center}.history-list{display:grid;gap:12px;max-height:560px;padding-right:5px;overflow-y:auto}.history-entry{padding:17px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--line-strong);border-radius:13px;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{display:flex;align-items:center;justify-content:space-between;gap:12px}.history-status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.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-word{margin:14px 0 0;color:var(--ink);font-size:27px;font-weight:820;text-align:center}.history-pattern{margin:4px 0 0;color:var(--navy);font-size:19px;font-weight:750;text-align:center}.history-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}.history-details span{display:grid;gap:3px;padding:11px;background:#ffffffdb;border:1px solid var(--line);border-radius:9px;font-size:13px;text-align:center}.history-details small{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:1000px){.app-layout{grid-template-columns:1fr}.filter-panel{position:static;max-height:none}.filter-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}@media(max-width:700px){.app-layout{width:min(100% - 16px,1280px);margin:8px auto 22px;gap:12px}.app,.filter-panel{padding:18px;border-radius:14px}.app-header{display:block}.app-header h1{font-size:30px}.score{display:inline-grid;margin-top:17px}.word-stage{min-height:175px;padding:25px 16px}.word{font-size:43px}.section-heading{display:block}.section-help{margin-top:8px;text-align:left}.action-buttons{grid-template-columns:1fr}.history-header{display:block}.clear-history-button{margin-top:13px}.history-details{grid-template-columns:1fr}}@media(max-width:430px){.stress-grid{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}}.filter-note{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.display-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:7px}.display-mode-toggle button{min-height:43px;padding:9px 10px;color:var(--navy);background:#fff;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;font-size:13px;font-weight:800;transition:transform .15s ease,color .15s ease,background .15s ease,border-color .15s ease}.display-mode-toggle button:hover{transform:translateY(-1px);border-color:var(--teal)}.display-mode-toggle button.active{color:#fff;background:var(--teal);border-color:var(--teal)}.header-tools{display:flex;align-items:flex-start;gap:9px}.current-display-badge,.representation-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;color:var(--teal-dark);background:var(--teal-soft);border:1px solid rgba(38,150,136,.28);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.current-display-badge{margin-top:3px}.word-card-badges{display:flex;align-items:center;gap:7px}.representation-badge{color:#ffffffe0;background:#ffffff1c;border-color:#ffffff29}.ipa-word,.ipa-inline,.ipa-stressed-word,.ipa-preview,.ipa-preview span{font-family:Charis SIL,Doulos SIL,Noto Sans,Segoe UI Symbol,sans-serif}.ipa-word{font-weight:650;letter-spacing:.035em}.ipa-preview span{font-weight:650}.dual-answer-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:760px;margin:15px auto 0}.dual-answer-preview>span{display:grid;gap:5px;padding:12px;background:#ffffffbd;border:1px solid var(--line);border-radius:10px}.dual-answer-preview small{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.dual-answer-preview strong{color:var(--navy);font-size:18px}@media(max-width:700px){.header-tools{margin-top:17px;justify-content:space-between}.current-display-badge{align-self:center}.word-card-badges{align-items:flex-end;flex-direction:column}.dual-answer-preview{grid-template-columns:1fr}}