:root{--font-sans:"Noto Sans", "DejaVu Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;--font-display:"Noto Serif", "DejaVu Serif", "Charis SIL", "Gentium Plus", Georgia, "Times New Roman", serif;--font-ipa:"Charis SIL", "Doulos SIL", "Gentium Plus", "Noto Sans", "DejaVu Sans", "Lucida Grande", "Segoe UI", "Arial Unicode MS", sans-serif;color:#202020;font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f4f1ea}*{box-sizing:border-box}body{background:#f4f1ea;min-width:320px;min-height:100vh;margin:0}button{font:inherit}button,select{border-radius:0}.app-shell{width:min(1100px,100% - 32px);margin:0 auto;padding:24px 0 64px}.pair-1{--pair-bg:#e7eefc;--pair-border:#2f5e9e;--pair-solid:#264f87}.pair-2{--pair-bg:#f8e8df;--pair-border:#a24f2f;--pair-solid:#853f27}.pair-3{--pair-bg:#e4f0e5;--pair-border:#347343;--pair-solid:#285f35}.pair-4{--pair-bg:#f4e8f5;--pair-border:#7a4b86;--pair-solid:#643d70}.pair-5{--pair-bg:#f8f0d5;--pair-border:#8a6814;--pair-solid:#705410}.pair-6{--pair-bg:#e0f1ef;--pair-border:#27736d;--pair-solid:#1f5d58}.hero-panel,.training-panel,.progress-panel,.content-panel{background:#fffdfa;border:1px solid #c8c0b4}.hero-panel{grid-template-columns:minmax(0,1fr) minmax(160px,220px);align-items:center;gap:16px;padding:14px 18px;display:grid}.eyebrow{color:#514c45;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px;font-size:.7rem;font-weight:750}h1,h2,h3,p{margin-top:0}h1{max-width:680px;font-family:var(--font-display);letter-spacing:-.04em;margin-bottom:5px;font-size:clamp(2rem,4vw,2.8rem);font-weight:500;line-height:1}h2{font-family:var(--font-display);margin-bottom:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;line-height:1.1}h3{margin-bottom:0;font-size:.95rem}.hero-copy{color:#3f3c37;max-width:650px;margin-bottom:0;font-size:.95rem;line-height:1.35}.language-card{justify-self:end;width:min(220px,100%)}.metric-card span,.muted{color:#5f584f}.language-select{color:#202020;width:100%;font:inherit;background:#fffdfa;border:2px solid #202020;padding:10px 12px;font-weight:750}.workspace-grid{grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-top:16px;display:grid}.mode-tabs,.catalog-tabs{flex-wrap:wrap;gap:8px;display:flex}.mode-tabs{margin-top:12px}.catalog-tabs{margin-bottom:16px}.mode-tab,.catalog-tab{cursor:pointer;color:#202020;background:#fffdfa;border:2px solid #202020;padding:10px 14px;font-weight:750;line-height:1.2;box-shadow:2px 2px #202020}.mode-tab.selected,.catalog-tab.selected{color:#fffdfa;background:#202020}.training-panel,.progress-panel,.content-panel{padding:24px}.panel-heading{margin-bottom:18px}.instructions{color:#3f3c37;margin-bottom:10px;line-height:1.6}.interaction-hint{color:#202020;background:#f4f1ea;border-left:4px solid #202020;margin-bottom:18px;padding:10px 12px;font-weight:650}.match-board,.sort-groups,.stat-grid,.contrast-grid{gap:12px;display:grid}.match-board,.sort-groups,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.match-column,.sort-bag,.sort-group,.metric-card,.contrast-card,.result-card{background:#fffdfa;border:1px solid #d6cec2}.match-column{align-content:start;gap:10px;padding:14px;display:grid}.column-title{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:2px;display:flex}.column-title span{color:#5f584f;font-size:.85rem}.sound-button,.word-button,.sort-word-card,.primary-button,.text-button,.small-button,.catalog-tab,.phoneme-main,.contrast-button{cursor:pointer}.sound-button,.word-button,.sort-word-card,.primary-button,.text-button,.small-button{border:2px solid #202020;box-shadow:2px 2px #202020}.sound-button,.word-button,.sort-word-card{color:#202020;text-align:left;background:#fff;width:100%;min-height:112px;padding:14px;display:grid}.sound-button:hover,.word-button:hover:not(:disabled),.sort-word-card:hover:not(:disabled),.text-button:hover:not(:disabled),.small-button:hover:not(:disabled),.mode-tab:hover:not(.selected),.catalog-tab:hover:not(.selected){background:#f7f7f4}.primary-button:hover:not(:disabled),.mode-tab.selected:hover,.catalog-tab.selected:hover{background:#34302a}.sound-button:active,.word-button:active:not(:disabled),.sort-word-card:active:not(:disabled),.primary-button:active:not(:disabled),.text-button:active:not(:disabled),.small-button:active:not(:disabled),.mode-tab:active:not(:disabled),.catalog-tab:active:not(:disabled),.contrast-button:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}.sound-button.selected{border-color:var(--pair-border,#202020);background:var(--pair-solid,#202020);box-shadow:2px 2px 0 var(--pair-border,#202020);color:#fffdfa}.sound-button.matched,.word-button.matched,.sort-word-card.placed{border-color:var(--pair-border,#202020);background:var(--pair-bg,#f0eadf);box-shadow:2px 2px 0 var(--pair-border,#202020)}.sound-button.selected.matched{background:var(--pair-solid,#202020)}.sound-button.correct,.word-button.correct{background:#e8f4e8;border-color:#216b36;box-shadow:2px 2px #216b36}.sound-button.incorrect,.word-button.incorrect{background:#fae8e5;border-color:#9f2d28;box-shadow:2px 2px #9f2d28}.sound-button:focus-visible,.word-button:focus-visible,.sort-word-card:focus-visible,.mode-tab:focus-visible,.catalog-tab:focus-visible,.primary-button:focus-visible,.small-button:focus-visible,.text-button:focus-visible,.phoneme-main:focus-visible,.contrast-button:focus-visible,.audio-credits summary:focus-visible{outline-offset:3px;outline:3px solid #866118}.sample-label,.word-text{font-size:1.2rem;font-weight:750;display:block}.sample-meta,.assignment-line,.word-button small{color:#5f584f;font-size:.88rem}.sound-button.selected .sample-meta,.sound-button.selected .assignment-line{color:#e9e2d8}.assignment-line{align-self:end;margin-top:18px}.assignment-line span,.word-ipa,.phoneme-ipa,.ipa-text,.ipa-heading{font-family:var(--font-ipa);font-feature-settings:"mark" 1, "mkmk" 1}.word-ipa{color:#3f3c37;margin:6px 0 18px;font-size:1.1rem;display:block}.word-button:not(.ready):not(.matched):not(:disabled){background:#fbfaf7}.word-button:disabled{cursor:default}.sort-bag{margin-top:18px;padding:14px}.sort-word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;display:grid}.sort-groups{margin-top:12px}.sort-group{min-height:180px;padding:14px}.sort-group.ready{border-color:var(--pair-border,#202020);background:var(--pair-bg,#fffdfa)}.sort-group-title{border:2px solid var(--pair-border,#202020);background:var(--pair-solid,#202020);color:#fffdfa;cursor:pointer;width:100%;font-family:var(--font-ipa);font-feature-settings:"mark" 1, "mkmk" 1;justify-content:center;align-items:baseline;gap:10px;padding:10px;font-size:1.3rem;display:flex}.sort-group-title small{font-family:var(--font-sans);letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;font-weight:750}.sort-word-card{align-content:center;min-height:78px}.sort-word-card.selected{background:#fff8df;border-style:dashed}.sort-word-card.correct{background:#e8f4e8;border-color:#216b36;box-shadow:2px 2px #216b36}.sort-word-card.incorrect{background:#fae8e5;border-color:#9f2d28;box-shadow:2px 2px #9f2d28}.sort-word-card:disabled{cursor:default}.action-row{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px;display:flex}.primary-button,.small-button,.text-button{min-height:38px;line-height:1.2}.primary-button{color:#fffdfa;background:#202020;padding:11px 18px;font-weight:750}.small-button{color:#202020;background:#fffdfa;padding:7px 10px;font-size:.88rem;font-weight:750}.primary-button:disabled,.text-button:disabled,.small-button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.error-message{color:#9f2d28;margin:14px 0 0;font-weight:650}.result-card{margin-top:16px;padding:16px}.result-card p{color:#3f3c37;margin-bottom:6px}.result-card.correct{background:#e8f4e8;border-color:#216b36}.result-card.incorrect{background:#fae8e5;border-color:#9f2d28}.progress-panel{align-self:start}.metric-card{gap:6px;padding:14px;display:grid}.metric-card strong{font-size:1.8rem;font-weight:700}.spectrogram-panel{border-top:1px solid #d6cec2;gap:10px;margin-top:18px;padding-top:18px;display:grid}.spectrogram-panel.expanded{z-index:20;box-shadow:none;background:#fffdfa;border:0;align-content:start;margin:0;padding:28px;position:fixed;inset:0;overflow:auto}.spectrogram-heading{justify-content:space-between;align-items:start;gap:12px;display:flex}.spectrogram-heading-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.spectrogram-maximise{margin-top:0}.spectrogram-status{color:#202020;letter-spacing:.05em;text-transform:uppercase;background:#fffdfa;border:1px solid #202020;padding:4px 7px;font-size:.72rem;font-weight:800}.spectrogram-status.playing{color:#fffdfa;background:#202020}.spectrogram-status.ended{background:#f8f0d5;border-color:#8a6814}.spectrogram-status.error{color:#9f2d28;background:#fae8e5;border-color:#9f2d28}.spectrogram-frame{background:#f4f1ea;border:2px solid #202020;position:relative;overflow:hidden;box-shadow:2px 2px #202020}.spectrogram-frame:before,.spectrogram-frame:after{z-index:1;color:#20202094;letter-spacing:.05em;pointer-events:none;text-transform:uppercase;font-size:.62rem;font-weight:800;position:absolute;left:8px}.spectrogram-frame canvas{width:100%;height:180px;display:block}.spectrogram-panel.expanded .spectrogram-frame canvas{height:min(72vh,760px)}.spectrogram-meta{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:3px;display:grid}.spectrogram-meta strong{font-family:var(--font-ipa);font-feature-settings:"mark" 1, "mkmk" 1;display:block}.spectrogram-meta span{color:#5f584f;font-size:.86rem;line-height:1.35;display:block}.spectrogram-replay{white-space:nowrap}.voice-panel{border-top:1px solid #d6cec2;margin-top:18px;padding-top:18px}.voice-panel p{color:#3f3c37;margin-bottom:10px;font-size:.92rem;line-height:1.45}.voice-select-label{gap:6px;margin:12px 0;font-size:.9rem;font-weight:750;display:grid}.voice-select-label select{color:#202020;width:100%;font:inherit;background:#fffdfa;border:2px solid #202020;padding:9px}.voice-current{font-weight:650}.confusion-list{margin-top:22px}.confusion-row{border-top:1px solid #d6cec2;justify-content:space-between;gap:12px;padding:11px 0;display:flex}.text-button{color:#202020;background:#fffdfa;margin-top:18px;padding:7px 10px;font-size:.88rem;font-weight:750;text-decoration:none}.text-button.compact{margin-top:0}.content-panel{margin-top:16px}.phoneme-selection-bar{background:#f4f1ea;border:1px solid #d6cec2;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:12px;display:flex}.phoneme-selection-bar p{color:#3f3c37;margin:0}.selection-actions,.explore-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.phoneme-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.phoneme-card{background:#fffdfa;border:1px solid #d6cec2;flex-direction:column;gap:10px;padding:12px;display:flex}.phoneme-card>.text-button{width:100%;margin-top:auto}.phoneme-card.active{border-color:#202020}.phoneme-card.selected{background:#f8f0d5;border-color:#8a6814}.phoneme-main{color:#202020;text-align:left;background:0 0;border:0;gap:5px;width:100%;padding:0;display:grid}.phoneme-main strong{line-height:1.25}.phoneme-main small,.contrast-button small{color:#5f584f;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;font-weight:750}.phoneme-card p{color:#5f584f;margin:0;font-size:.9rem;line-height:1.4}.phoneme-ipa{font-size:1.55rem}.phoneme-ipa.large{font-size:3rem;line-height:1}.contrast-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.contrast-grid.interactive{align-items:stretch}.contrast-card{padding:14px}.contrast-button{color:#202020;text-align:left;background:#fffdfa;border:2px solid #202020;gap:8px;width:100%;display:grid;box-shadow:2px 2px #202020}.contrast-button:hover,.contrast-button.active{background:#f8f0d5}.contrast-card p{color:#5f584f;margin:8px 0 0;line-height:1.5}.phoneme-explorer{gap:14px;display:grid}.phoneme-explorer>.text-button{justify-self:center;min-width:180px}.phoneme-explorer-heading{background:#f4f1ea;border:1px solid #d6cec2;align-items:center;gap:16px;padding:14px;display:flex}.phoneme-explorer-heading h3{margin-bottom:4px}.phoneme-explorer-heading p{color:#5f584f;margin:0;line-height:1.45}.explore-word-list{gap:10px;display:grid}.explore-word-card{background:#fffdfa;border:1px solid #d6cec2;padding:12px}.explore-word-heading{justify-content:space-between;align-items:start;gap:12px;display:flex}.explore-word-heading strong,.explore-word-heading span{display:block}.explore-word-heading span{color:#5f584f;font-family:var(--font-ipa);font-feature-settings:"mark" 1, "mkmk" 1;margin-top:4px}.track-list{border-top:1px solid #e2dcd2;gap:6px;margin-top:10px;padding-top:10px;display:grid}.track-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.track-row span{color:#5f584f;font-size:.9rem}.audio-credits{border-top:1px solid #d6cec2;margin-top:18px;padding-top:14px}.audio-credits summary{cursor:pointer;color:#3f3c37;font-weight:750}.audio-credit-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;display:grid}.audio-credit-card{background:#fbfaf7;border:1px solid #d6cec2;padding:12px}.audio-credit-card strong{font-family:var(--font-ipa);font-feature-settings:"mark" 1, "mkmk" 1;margin-bottom:6px;display:block}.audio-credit-card p{color:#5f584f;margin:0 0 6px;font-size:.9rem;line-height:1.4}.audio-credit-card p:last-child{margin-bottom:0}.audio-credit-card a{color:#202020;text-underline-offset:3px;font-weight:650}@media (width<=900px){.hero-panel,.workspace-grid{grid-template-columns:1fr}.language-card{justify-self:start}.contrast-grid,.phoneme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audio-credit-list{grid-template-columns:1fr}}@media (width<=640px){.app-shell{width:min(100% - 20px,1100px);padding-top:10px}.training-panel,.progress-panel,.content-panel{padding:18px}.hero-panel{padding:12px}.hero-panel,.match-board,.sort-groups,.sort-word-grid,.stat-grid,.contrast-grid,.phoneme-grid{grid-template-columns:1fr}.sound-button,.word-button,.sort-word-card,.primary-button,.text-button,.small-button,.mode-tab,.catalog-tab,.contrast-button{box-shadow:none}.action-row{justify-content:stretch;align-items:stretch}.action-row>button,.primary-button,.selection-actions,.explore-actions{width:100%}.selection-actions>button,.explore-actions>button{flex:150px}.explore-word-heading,.phoneme-explorer-heading,.phoneme-selection-bar,.spectrogram-meta{flex-direction:column;align-items:stretch}.spectrogram-meta{grid-template-columns:1fr}.spectrogram-panel.expanded{padding:16px}.spectrogram-panel.expanded .spectrogram-frame canvas{height:62vh}}