: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-soft:#faece8;--blue:#2f7ca8;--blue-soft:#e8f1f6;--mustard:#d99a2b;--mustard-soft:#fbf3e3;--teal:#269688;--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(--blue);--accent-soft:var(--blue-soft);--accent-dark:#246587;grid-template-columns:330px minmax(0,920px);justify-content:center;align-items:start;gap:22px;width:min(1300px,100% - 32px);margin:24px auto 40px;display:grid}.app-layout.consonant-theme{--accent:var(--coral);--accent-soft:var(--coral-soft);--accent-dark:#b94f3d}.app,.sound-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);letter-spacing:.13em;text-transform:uppercase;margin:0 0 7px;font-size:12px;font-weight:850}.sound-selector{max-height:calc(100vh - 32px);color:var(--ink);background:#fffdf9f7;padding:21px;position:sticky;top:16px;overflow-y:auto}.sound-selector::-webkit-scrollbar{width:8px}.history-list::-webkit-scrollbar{width:8px}.sound-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 #2f7ca82e;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:14px;padding:11px 13px;display:flex}.consonant-theme .selector-count{border-color:#df6b5533}.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}.sound-group{margin-top:23px}.sound-group h3{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;display:flex}.sound-group h3:after{content:"";background:var(--line);flex:1;height:1px}.sound-checkbox-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;display:grid}.sound-checkbox{min-width:0;min-height:45px;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;justify-content:center;align-items:center;padding:7px 4px;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.sound-checkbox:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 5px 12px #372f2512}.sound-checkbox-active{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}.sound-checkbox input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.sidebar-symbol{font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:17px;font-weight:800}.app-header{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.app-header h1{color:var(--ink);letter-spacing:-.045em;margin:0;font-size:clamp(31px,4vw,43px);line-height:1.06}.app-header>div:first-child>p:last-child{max-width:620px;color:var(--muted);margin:11px 0 0;font-size:15px;line-height:1.6}.score{background:var(--accent-soft);border:1px solid var(--accent);border-radius:13px;flex-shrink:0;justify-items:end;min-width:105px;padding:12px 14px;display:grid}.score-label{color:var(--accent-dark);letter-spacing:.13em;text-transform:uppercase;font-size:11px;font-weight:850}.score-value{color:var(--ink);margin-top:2px;font-size:27px;line-height:1}.score-value span{color:var(--muted);font-size:15px;font-weight:700}.sound-card{color:#fff;background:linear-gradient(120deg,#1e3d57 0%,#285978 58%,#347ca4 100%);border:1px solid #1a385033;border-radius:20px;margin:26px 0 30px;padding:18px 22px 20px;position:relative;overflow:hidden;box-shadow:0 13px 26px #1f3d5729}.sound-card:before,.sound-card:after{content:"";pointer-events:none;border-radius:50%;position:absolute}.sound-card:before{background:#ffffff14;border:2px solid #ffffff17;width:220px;height:220px;top:-100px;right:-70px}.sound-card:after{background:#df6b5538;width:190px;height:190px;bottom:-125px;right:90px}.sound-card-header{z-index:2;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.sound-card-label,.category-badge,.sound-card-note{letter-spacing:.11em;text-transform:uppercase;font-size:12px;font-weight:820}.sound-card-label{color:#d9e7f0}.category-badge{color:#fff;background:#ffffff1f;border:1px solid #ffffff3d;border-radius:999px;padding:7px 10px}.sound-stage{aspect-ratio:1;place-items:center;width:min(250px,80vw);margin:-12px auto -9px;display:grid;position:relative}.sound-orbit{border:1px solid #ffffff24;border-radius:50%;position:absolute}.orbit-one{width:78%;height:78%}.orbit-two{border-color:#ffffff38;width:57%;height:57%}.waveform{opacity:.28;justify-content:center;align-items:center;gap:7px;display:flex;position:absolute;inset:0}.waveform span{background:linear-gradient(#0000,#fff,#0000);border-radius:999px;width:3px;height:25px;animation:2.6s ease-in-out infinite alternate sound-bar}.waveform span:nth-child(2n){height:48px;animation-delay:-.5s}.waveform span:nth-child(3n){height:72px;animation-delay:-.9s}.waveform span:nth-child(4n){height:96px;animation-delay:-1.3s}.ipa-symbol{z-index:3;min-width:148px;min-height:148px;color:var(--navy);background:#fffaf2;border:5px solid #ffffff57;border-radius:50%;place-items:center;padding:20px;font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:74px;font-weight:750;line-height:1;display:grid;position:relative;box-shadow:0 0 0 9px #ffffff14,0 12px 26px #0a1f2e33}.sound-card-note{z-index:2;color:#d9e7f0;text-align:center;margin:0;position:relative}.section-heading{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px;display:flex}.section-heading h2,.history-header h2{color:var(--ink);letter-spacing:-.025em;margin:0;font-size:23px}.section-help{max-width:360px;color:var(--muted);text-align:right;margin:0;font-size:13px;line-height:1.5}.answer-slots{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;display:grid}.slot-wrapper,.choice-group{--slot-accent:var(--accent);--slot-soft:var(--accent-soft)}.slot-voice{--slot-accent:var(--coral);--slot-soft:var(--coral-soft)}.slot-place,.slot-depth{--slot-accent:var(--blue);--slot-soft:var(--blue-soft)}.slot-manner,.slot-tense{--slot-accent:var(--teal);--slot-soft:var(--teal-soft)}.slot-height{--slot-accent:#557fb4;--slot-soft:#edf2f8}.slot-roundness{--slot-accent:var(--mustard);--slot-soft:var(--mustard-soft)}.slot-wrapper{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0;padding:14px;position:relative;overflow:hidden;box-shadow:0 6px 16px #372f250e}.slot-wrapper:before{content:"";background:var(--slot-accent);height:4px;position:absolute;inset:0 0 auto}.slot-heading{align-items:center;gap:8px;display:flex}.slot-number{color:#fff;background:var(--slot-accent);border-radius:8px;place-items:center;width:27px;height:27px;font-size:11px;font-weight:900;display:grid}.slot-label{color:var(--ink);letter-spacing:.11em;font-size:12px;font-weight:900}.slot-hint{color:var(--muted);margin:7px 0 11px;font-size:12px;display:block}.drop-zone{background:var(--slot-soft);border:1.5px dashed var(--slot-accent);border-radius:11px;justify-content:center;align-items:center;min-height:76px;padding:9px;transition:transform .15s,background .15s;display:flex}.drop-zone:hover{background:#fff;transform:translateY(-1px)}.filled-drop-zone{background:#fff;border-style:solid}.incorrect-drop-zone{border-color:var(--danger);background:var(--danger-soft);animation:.26s ease-in-out incorrect-shake}.drop-placeholder{color:#7d8791;text-align:center;font-size:13px}.selected-card{color:#fff;background:var(--slot-accent);cursor:pointer;text-transform:capitalize;border:0;border-radius:9px;width:100%;padding:12px 9px;font-weight:800;animation:.18s ease-out card-pop;box-shadow:0 6px 13px #372f251f}.selected-card:hover:not(:disabled){filter:brightness(.95)}.selected-card:disabled{cursor:default}.correct-answer{color:var(--danger);text-align:center;margin:9px 0 0;font-size:12px;font-weight:800}.word-bank{border-top:1px solid var(--line);margin-top:31px;padding-top:27px}.choice-group{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--slot-accent);border-radius:13px;margin-top:17px;padding:14px 15px}.choice-group-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.choice-group h3{color:var(--ink);letter-spacing:.11em;margin:0;font-size:12px}.choice-group-heading span{color:var(--muted);font-size:11px}.choice-list{flex-wrap:wrap;gap:8px;display:flex}.choice-card{color:var(--ink);border:1px solid var(--line-strong);cursor:grab;text-transform:capitalize;background:#fff;border-radius:10px;padding:10px 14px;font-weight:700;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;position:relative;box-shadow:0 2px 6px #372f250a}.choice-card:before{content:"";background:var(--slot-accent);vertical-align:1px;border-radius:50%;width:7px;height:7px;margin-right:8px;display:inline-block}.choice-card:hover:not(:disabled){border-color:var(--slot-accent);background:var(--slot-soft);transform:translateY(-2px);box-shadow:0 7px 15px #372f2514}.choice-card:active:not(:disabled){cursor:grabbing;transform:translateY(0)}.choice-card:disabled{cursor:default;opacity:.52}.action-buttons{grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;display:grid}.main-button,.secondary-button{cursor:pointer;border-radius:10px;width:100%;padding:14px 18px;font-weight:800;transition:transform .15s,box-shadow .15s,background .15s}.main-button{color:#fff;background:var(--accent);border:1px solid var(--accent-dark);box-shadow:0 7px 16px #2f7ca830}.consonant-theme .main-button{box-shadow:0 7px 16px #df6b5533}.main-button:hover{background:var(--accent-dark);transform:translateY(-2px)}.secondary-button{color:var(--ink);border:1.5px solid var(--line-strong);background:#fff}.secondary-button:hover{background:var(--mustard-soft);border-color:var(--mustard);transform:translateY(-2px)}.feedback{text-align:center;border:1px solid #0000;border-radius:15px;margin-top:28px;padding:23px;animation:.25s ease-out feedback-arrival;overflow:hidden}.feedback h2{color:var(--ink);margin:0}.feedback-kicker{margin-bottom:6px}.correct-feedback{background:var(--success-soft);border-color:#bfdcca}.correct-feedback .feedback-kicker{color:var(--success)}.incorrect-feedback{background:var(--danger-soft);border-color:#efc9c4}.incorrect-feedback .feedback-kicker{color:var(--danger)}.complete-description{color:#4f5d69;margin:11px 0 16px;line-height:1.6}.feedback .main-button{max-width:430px;margin:4px auto 0}.history-panel{border-top:1px solid var(--line);margin-top:35px;padding-top:28px}.history-header{text-align:center;flex-direction:column;align-items:center;gap:6px;margin-bottom:17px;display:flex}.history-header .section-kicker{margin-bottom:0}.history-header p:not(.section-kicker){color:var(--muted);margin:0;font-size:13px}.clear-history-button{margin-top:4px}.history-empty{color:var(--muted);border:1px dashed var(--line-strong);text-align:center;background:#f8f5ef;border-radius:11px;margin:0;padding:19px}.history-list{gap:12px;max-height:500px;padding-right:5px;display:grid;overflow-y:auto}.history-entry{border:1px solid var(--line);border-left:5px solid var(--success);text-align:center;background:#fff;border-radius:12px;padding:16px;position:relative;overflow:hidden}.incorrect-history-entry{border-left-color:var(--danger)}.history-entry:after{content:"";background:var(--accent-soft);pointer-events:none;border-radius:50%;width:110px;height:110px;position:absolute;bottom:-58px;right:-42px}.history-entry-heading{z-index:1;flex-direction:column;align-items:center;gap:5px;display:flex;position:relative}.history-symbol{color:var(--navy);font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:30px;font-weight:800}.history-category{color:var(--accent-dark);background:var(--accent-soft);letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:850}.history-result{color:var(--ink);font-weight:850}.history-description{z-index:1;color:#4f5d69;margin:8px 0 0;font-size:14px;position:relative}.history-time{z-index:1;color:#87909a;margin:5px 0 0;font-size:12px;position:relative}.history-errors{z-index:1;gap:8px;margin-top:14px;display:grid;position:relative}.history-error{color:#4e5964;text-align:center;background:#faf7f1;border:1px solid #e8dfd3;border-radius:8px;grid-template-columns:minmax(120px,1fr) minmax(150px,1fr) minmax(150px,1fr);gap:10px;padding:10px;font-size:13px;display:grid}.history-error strong{color:var(--ink)}@media (width<=1000px){.app-layout{grid-template-columns:1fr}.sound-selector{max-height:none;position:static}.sound-checkbox-list{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (width<=720px){.app-layout{gap:12px;width:min(100% - 16px,1300px);margin:8px auto 24px}.app,.sound-selector{border-radius:15px;padding:18px}.app-header{display:block}.app-header h1{font-size:31px}.score{justify-items:start;margin-top:16px;display:inline-grid}.section-heading{display:block}.section-help{text-align:left;margin-top:7px}.sound-stage{width:220px}.ipa-symbol{min-width:132px;min-height:132px;font-size:64px}.sound-checkbox-list{grid-template-columns:repeat(4,minmax(0,1fr))}.action-buttons{grid-template-columns:1fr}.history-error{grid-template-columns:1fr;gap:5px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes sound-bar{0%{transform:scaleY(.72)}to{transform:scaleY(1.08)}}@keyframes card-pop{0%{opacity:.65;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes feedback-arrival{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes incorrect-shake{0%,to{transform:translate(0)}33%{transform:translate(-3px)}66%{transform:translate(3px)}}.quick-filter-section{border:1px solid var(--line);background:#f7f3ec;border-radius:13px;margin-top:20px;padding:14px}.quick-filter-section h3{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:900}.quick-filter-grid{gap:8px;display:grid}.quick-filter-grid button{min-height:45px;color:var(--ink);border:1px solid var(--line-strong);text-align:left;background:#fff;border-radius:10px;grid-template-columns:1fr auto;align-items:center;padding:10px 11px;font-size:12px;font-weight:800;transition:transform .15s,border-color .15s,background .15s;display:grid}.quick-filter-grid button:hover{border-color:var(--accent);transform:translateY(-1px)}.quick-filter-grid button.active{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 2px #2f7ca81c}.consonant-theme .quick-filter-grid button.active{box-shadow:0 0 0 2px #df6b551f}.quick-filter-grid small{min-width:25px;height:25px;color:var(--muted);background:#f1ece4;border-radius:999px;place-items:center;font-size:10px;display:grid}.quick-filter-grid button.active small{color:#fff;background:var(--accent)}.answer-section{margin-top:28px}.feature-selector-grid{gap:14px;display:grid}.feature-group{--slot-accent:var(--accent);--slot-soft:var(--accent-soft);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;overflow:hidden;box-shadow:0 6px 16px #372f250e}.feature-group:before{content:"";background:var(--slot-accent);height:4px;position:absolute;inset:0 0 auto}.feature-group.slot-voice{--slot-accent:var(--coral);--slot-soft:var(--coral-soft)}.feature-group.slot-place,.feature-group.slot-depth{--slot-accent:var(--blue);--slot-soft:var(--blue-soft)}.feature-group.slot-manner,.feature-group.slot-tense{--slot-accent:var(--teal);--slot-soft:var(--teal-soft)}.feature-group.slot-height{--slot-accent:#557fb4;--slot-soft:#edf2f8}.feature-group.slot-roundness{--slot-accent:var(--mustard);--slot-soft:var(--mustard-soft)}.feature-group-correct{background:linear-gradient(90deg, var(--success-soft), white 28%);border-color:#77af8d}.feature-group-incorrect{background:linear-gradient(90deg, var(--danger-soft), white 28%);border-color:#dc918a}.feature-group-heading{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.feature-group-heading h3{color:var(--ink);letter-spacing:.11em;margin:0;font-size:13px}.feature-group-heading p{color:var(--muted);margin:4px 0 0;font-size:11px}.selected-value-badge{max-width:170px;color:var(--slot-accent);background:var(--slot-soft);text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900;overflow:hidden}.feature-choice-list{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.feature-choice{min-height:43px;color:var(--ink);border:1px solid var(--line-strong);text-transform:capitalize;background:#fff;border-radius:10px;align-items:center;gap:8px;padding:9px 13px;font-weight:750;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:inline-flex;box-shadow:0 2px 6px #372f250a}.feature-choice:hover:not(:disabled){border-color:var(--slot-accent);background:var(--slot-soft);transform:translateY(-2px);box-shadow:0 7px 15px #372f2514}.choice-indicator{color:#0000;border:1px solid var(--line-strong);background:#f4f0e9;border-radius:6px;place-items:center;width:19px;height:19px;font-size:10px;font-weight:900;display:grid}.feature-choice-selected{color:#fff;background:var(--slot-accent);border-color:var(--slot-accent);box-shadow:0 7px 15px #372f251f}.feature-choice-selected .choice-indicator{color:var(--slot-accent);background:#fff;border-color:#fff}.feature-choice-correct{color:#215e42;background:var(--success-soft);border-color:#6bad8a}.feature-choice-correct .choice-indicator{color:#fff;background:var(--success);border-color:var(--success)}.feature-choice-incorrect{color:#8f3e3e;background:var(--danger-soft);border-color:#d98b83}.feature-choice-incorrect .choice-indicator{color:#fff;background:var(--danger);border-color:var(--danger)}.feature-choice:disabled{cursor:default}.feature-correction{color:var(--danger);margin:12px 0 0;font-size:12px}.feature-correction strong{text-transform:capitalize;margin-left:5px}.main-button:disabled{cursor:not-allowed;opacity:.48;transform:none}@media (width<=720px){.feature-group-heading{grid-template-columns:auto minmax(0,1fr)}.selected-value-badge{grid-column:1/-1;justify-self:start;max-width:100%}.feature-choice{flex:calc(50% - 8px)}}@media (width<=430px){.feature-choice{flex-basis:100%}}