: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(--blue);--accent-soft:var(--blue-soft);--accent-dark:var(--blue-dark);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:var(--coral-dark)}.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 color-mix(in srgb, var(--accent) 25%, transparent);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}.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:650px;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}.features{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;display:grid}.feature-row{border:1px solid var(--line);border-left:4px solid var(--accent);background:#fff;border-radius:13px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;min-height:78px;padding:13px 14px;display:grid;position:relative;overflow:hidden;box-shadow:0 5px 14px #372f250d}.feature-heading{align-items:center;gap:9px;min-width:0;display:flex}.feature-index,.place-number{color:#fff;background:var(--accent);border-radius:8px;flex-shrink:0;place-items:center;width:29px;height:29px;font-size:11px;font-weight:900;display:grid}.feature-name{min-width:0;color:var(--ink);overflow-wrap:anywhere;font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:17px;font-weight:760}.feature-buttons{gap:7px;display:flex}.feature-buttons button{width:44px;height:39px;color:var(--ink);border:1.5px solid var(--line-strong);cursor:pointer;background:#fff;border-radius:9px;place-items:center;padding:0;font-size:21px;font-weight:850;transition:transform .14s,color .14s,background .14s,border-color .14s,box-shadow .14s;display:grid}.feature-buttons button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.feature-buttons button.selected{color:#fff;background:var(--accent);border-color:var(--accent-dark);box-shadow:0 5px 11px color-mix(in srgb, var(--accent) 25%, transparent);animation:.18s ease-out card-pop}.feature-buttons button:disabled{cursor:default}.correct-value{color:var(--muted);grid-column:1/-1;padding-top:2px;font-size:12px;font-weight:750}.incorrect-row{background:var(--danger-soft);border-color:#efc9c4;border-left-color:var(--danger);animation:.26s ease-in-out incorrect-shake}.incorrect-row .feature-index{background:var(--danger)}.place-groups{border-top:1px solid var(--line);margin-top:31px;padding-top:27px}.place-grid{gap:12px;display:grid}.place-section{--place-accent:var(--mustard);--place-soft:var(--mustard-soft);border:1px solid var(--line);border-left:5px solid var(--place-accent);background:#fff;border-radius:14px;transition:border-color .15s,box-shadow .15s,transform .15s;overflow:hidden;box-shadow:0 5px 14px #372f250d}.place-labial{--place-accent:var(--coral);--place-soft:var(--coral-soft)}.place-coronal{--place-accent:var(--mustard);--place-soft:var(--mustard-soft)}.place-dorsal{--place-accent:var(--teal);--place-soft:var(--teal-soft)}.place-section-active{border-color:var(--place-accent);box-shadow:0 8px 18px #372f2512}.place-header{background:linear-gradient(90deg, var(--place-soft), #fff 72%);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:11px;min-height:64px;padding:13px 15px;display:grid}.place-toggle{cursor:pointer;align-items:center;gap:10px;min-width:0;display:flex}.place-toggle input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.place-number{color:#fff;background:var(--place-accent)}.place-name{color:var(--ink);letter-spacing:.09em;font-size:14px;font-weight:900}.place-feature-count{color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:750}.place-header .correct-value{grid-column:1/-1;margin-top:-2px}.place-details{border-top:1px solid var(--line);background:#fbf8f3;gap:8px;padding:12px;display:grid}.dependent-feature-row{border-left-color:var(--place-accent);min-height:66px;box-shadow:none;background:#fff}.dependent-dot{background:var(--place-accent);width:10px;height:10px;box-shadow:0 0 0 5px var(--place-soft);border-radius:50%;flex-shrink:0}.incorrect-place{border-color:var(--danger);border-left-color:var(--danger);background:var(--danger-soft);animation:.26s ease-in-out incorrect-shake}.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 color-mix(in srgb, var(--accent) 22%, transparent)}.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 p:not(.feedback-kicker){color:#4f5d69;margin:11px 0 16px;line-height:1.6}.feedback-symbol{color:var(--navy);font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:23px;font-weight:850}.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)}.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);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;justify-content:space-between;align-items:center;gap:16px;display:flex;position:relative}.history-sound-block{align-items:center;gap:13px;min-width:0;display:flex}.history-symbol{min-width:62px;min-height:62px;color:var(--navy);border:1px solid var(--line);background:#fffaf2;border-radius:50%;place-items:center;padding:7px;font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:26px;font-weight:800;display:grid}.history-caption{color:var(--accent-dark);letter-spacing:.09em;text-transform:uppercase;font-size:10px;font-weight:850}.history-description{color:#4f5d69;margin:4px 0 0;font-size:14px;line-height:1.45}.history-result{z-index:1;color:var(--success);background:var(--success-soft);border:1px solid #c8dfd0;border-radius:999px;flex-shrink:0;padding:7px 10px;font-size:12px;font-weight:850;position:relative}.incorrect-history-entry .history-result{color:var(--danger);background:var(--danger-soft);border-color:#efc9c4}.history-time{z-index:1;color:#87909a;margin:9px 0 0 75px;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<=760px){.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))}.features,.action-buttons{grid-template-columns:1fr}.history-entry-heading{align-items:flex-start}.history-time{margin-left:0}.history-error{grid-template-columns:1fr;gap:5px}}@media (width<=520px){.feature-row,.place-header{grid-template-columns:1fr}.feature-buttons{justify-content:flex-start}.place-feature-count{justify-self:start}.history-entry-heading{display:block}.history-result{margin-top:12px;display:inline-block}}@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;display:grid}.quick-filter-grid button:hover{border-color:var(--accent);background:var(--accent-soft)}.quick-filter-grid button.active{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent)}.quick-filter-grid small{min-width:26px;height:26px;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)}.feature-section-tools{justify-items:end;gap:8px;display:grid}.feature-tool-buttons{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.feature-tool-buttons button{color:var(--ink);border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800}.feature-tool-buttons button:hover:not(:disabled){color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}.feature-tool-buttons button:disabled{cursor:default;opacity:.5}.feature-heading{flex-wrap:wrap}.feature-toggle{color:var(--muted);cursor:pointer;text-transform:uppercase;align-items:center;gap:6px;margin-left:auto;font-size:9px;font-weight:800;display:inline-flex}.feature-toggle input{opacity:0;width:1px;height:1px;position:absolute}.feature-toggle-control{background:#b5bdc3;border-radius:999px;width:34px;height:19px;position:relative}.feature-toggle-control:after{content:"";background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #0003}.feature-toggle input:checked+.feature-toggle-control{background:var(--accent)}.feature-toggle input:checked+.feature-toggle-control:after{transform:translate(15px)}.feature-row-inactive{opacity:.72;background:#f4f2ee;border-left-color:#aeb5ba}.feature-row-inactive .feature-index{background:#929ba2}.feature-row-inactive .feature-buttons button{background:#f1efeb}.ignored-value{color:var(--muted);text-transform:uppercase;grid-column:1/-1;font-size:11px;font-weight:800}@media (width<=760px){.feature-section-tools{justify-items:start;margin-top:9px}.feature-tool-buttons{justify-content:flex-start}}.feature-filter-section{border:1px solid var(--line);background:#f8f5ef;border-radius:13px;margin-top:18px;padding:14px}.feature-filter-heading,.dependent-filter-heading{justify-content:space-between;align-items:flex-start;gap:9px;display:flex}.feature-filter-heading h3{color:var(--ink);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:13px}.feature-filter-heading p{color:var(--muted);margin:5px 0 0;font-size:10px;line-height:1.45}.feature-filter-heading>span{color:var(--accent-dark);background:var(--accent-soft);border-radius:999px;padding:5px 7px;font-size:10px;font-weight:900}.feature-filter-actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;display:grid}.feature-filter-actions.compact{flex:none;margin-top:0;display:flex}.feature-filter-actions button{color:var(--ink);border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:7px 8px;font-size:10px;font-weight:800}.feature-filter-actions button:hover:not(:disabled){color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}.feature-filter-actions button:disabled{cursor:default;opacity:.5}.feature-filter-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px;display:grid}.feature-filter-option{min-height:35px;color:var(--muted);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:6px;padding:7px;font-size:10px;font-weight:750;display:grid;position:relative}.feature-filter-option.active{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}.feature-filter-option input{opacity:0;width:1px;height:1px;position:absolute}.feature-filter-check{color:#0000;border:1px solid var(--line-strong);background:#f1eee8;border-radius:5px;place-items:center;width:18px;height:18px;font-size:9px;font-weight:900;display:grid}.feature-filter-option.active .feature-filter-check{color:#fff;background:var(--accent);border-color:var(--accent)}.dependent-filter-area{border-top:1px solid var(--line);margin-top:14px;padding-top:13px}.dependent-filter-heading strong{color:var(--ink);font-size:11px;display:block}.dependent-filter-heading small{max-width:150px;color:var(--muted);margin-top:3px;font-size:9px;line-height:1.35;display:block}.dependent-filter-group{margin-top:11px}.dependent-filter-group h4{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:9px}.feature-toggle,.feature-toggle-control,.ignored-value{display:none}@media (width<=1000px){.feature-filter-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=600px){.feature-filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}