:root{font-family:DM Sans,Noto Sans SC,-apple-system,BlinkMacSystemFont,sans-serif;color:#303030;background:#f4f4f4;font-synthesis:none;--ink:#303030;--muted:#838383;--line:#e7e7e7;--on-dark:#e9e9e9;--ipa-font:Arial,"Helvetica Neue",Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8f8f8f;outline-offset:4px}a{color:inherit;text-decoration:none}svg.lucide{width:18px;height:18px;stroke-width:1.7;flex-shrink:0}button{transition:background .18s,color .18s,box-shadow .18s,transform .18s}button:hover{color:#181818}input[type=range]{accent-color:#626262;height:3px;cursor:pointer}input[type=range]:focus-visible{outline-offset:6px}.project-header{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 22px;color:#777;font-size:12px}.project-header h1{display:flex;align-items:baseline;gap:10px;margin:0;font-size:12px;font-weight:400;color:#777}.project-header h1 strong{font-size:20px;letter-spacing:2px;color:#3f4f26}.project-source{margin-left:auto;font-size:11px}.project-home:hover,.project-source:hover{color:#3f4f26}@media(max-width:520px){.project-header{gap:12px;margin-bottom:14px}.project-header h1{gap:6px}.project-header h1 strong{font-size:17px}.project-source{font-size:10px}}main{max-width:1512px;margin:0 auto;padding:38px 56px 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:22px;align-items:stretch}.explorer{min-width:0;border:1px solid #e2e2e2;border-radius:20px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 5px 20px #34343405}.icon-button{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:#939393}.icon-button:hover{background:#f0f0f0}.viewport{height:465px;flex:1;min-height:380px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 46%,#fefefe 0,#fafafa 55%,#f6f6f6)}.viewport:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(#98989830 .7px,transparent .7px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse,#0000 30%,#000);mask-image:radial-gradient(ellipse,#0000 30%,#000);pointer-events:none}.viewport canvas{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;cursor:grab;touch-action:none}.viewport canvas:active{cursor:grabbing}.loading{z-index:6;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fbfbfb;color:#8d8d8d;font-size:13px;text-align:center;gap:10px}.loading small{max-width:300px;line-height:1.8}.loader-ring{width:28px;height:28px;border:2px solid #e5e5e5;border-top-color:#868686;border-radius:100%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.model-label{position:absolute;z-index:4;pointer-events:none;width:0;height:0;color:#919191}.model-label:after{content:"";position:absolute;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;background:#fff9;left:-3px;top:-3px}.model-label:before{content:"";position:absolute;height:1px;width:47px;background:currentColor;transform-origin:left center;transform:rotate(-45deg);opacity:.65}.model-label span{position:absolute;left:31px;top:-48px;font-size:10px;white-space:nowrap;letter-spacing:1px;background:#ffffffca;border:1px solid #dfdfdf66;padding:5px 9px;border-radius:5px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.model-label.tongue{color:#6e6e6e}.model-label.tongue:before{transform:rotate(145deg);width:60px}.model-label.tongue span{left:-100px;top:33px;background:#f7f7f7e0;border-color:#cecece}.model-label.teeth:before{transform:rotate(-10deg);width:46px}.model-label.teeth span{top:-24px;left:48px}.model-label[hidden]{display:none}.model-label.alveolar:before{transform:rotate(-85deg);width:75px}.model-label.alveolar span{left:-15px;top:-99px}.model-label.tongue-tip{color:#6e6e6e}.model-label.tongue-tip:before{transform:rotate(48deg);width:55px}.model-label.tongue-tip span{left:30px;top:40px;background:#f7f7f7e0;border-color:#cecece}.layer-bar{position:absolute;top:14px;left:14px;z-index:5}.layer-buttons{display:flex;flex-direction:column;gap:6px}.layer-button{font-size:10px;padding:6px 8px;border-radius:5px;color:#9e9e9e;white-space:nowrap}.layer-button:before{content:"";width:5px;height:5px;border:1px solid #b2b2b2;display:inline-block;border-radius:50%;margin-right:5px}.layer-button.active{color:#5e5e5e;background:#ededed}.layer-button.active:before{background:#8e8e8e;border-color:#8e8e8e}.player{display:flex;align-items:center;gap:17px;padding:19px 23px 14px}.play-button{width:42px;height:42px;flex-shrink:0;background:var(--ink);color:var(--on-dark);border-radius:50%;display:grid;place-items:center}.play-button:hover{background:#4b4b4b;color:#f9f9f9;transform:scale(1.04)}.play-button svg{width:17px;height:17px;fill:currentColor;stroke-width:0}.play-button.playing{background:#e5e5e5;color:#464646}.player-track{flex:1;min-width:0}.progress-track{height:3px;background:#f0f0f0;border-radius:4px;overflow:hidden}.progress-track>div{height:100%;background:#c2c2c2;width:0;transition:width .09s linear}.speed-switch{display:flex;border-radius:6px;background:#f5f5f5;padding:3px;font-size:10px;gap:2px}.speed-switch button{padding:5px 6px;border-radius:4px;color:#9c9c9c}.speed-switch button.active{background:#fff;color:#575757;box-shadow:0 1px 3px #0000000c}.loop-button.active{background:#ededed;color:#767676}.pose-scrubber{position:absolute;right:18px;bottom:16px;z-index:5;display:flex;align-items:center;gap:9px;color:#919191;font-size:10px}.pose-scrubber label{white-space:nowrap}.pose-scrubber input{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:120px;max-width:none;height:16px;margin:0;background:transparent;cursor:pointer}.pose-scrubber input::-webkit-slider-runnable-track{height:2px;border:0;border-radius:2px;background:#ededed}.pose-scrubber input::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-3px;border:0;border-radius:50%;background:#8e8e8e;box-shadow:none}.pose-scrubber input::-moz-range-track,.pose-scrubber input::-moz-range-progress{height:2px;border:0;border-radius:2px;background:#ededed}.pose-scrubber input::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#8e8e8e;box-shadow:none}.toast{position:fixed;z-index:20;bottom:28px;left:50%;transform:translate(-50%,20px);background:#353535;color:#f4f4f4;border-radius:10px;padding:13px 21px;box-shadow:0 5px 20px #0002;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{transform:translate(-50%);opacity:1}.play-button:disabled,#loop:disabled,.pose-scrubber input:disabled{cursor:default}@media(min-width:1450px){.viewport{height:480px}.workspace{grid-template-columns:minmax(0,1fr) 350px}}@media(max-width:1150px){main{padding:30px 30px 0}.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.viewport{min-height:350px}.player{gap:11px;padding:17px 17px 12px}}@media(max-width:850px){main{padding:27px 20px 0}.workspace{grid-template-columns:1fr}.viewport{height:440px;flex:none}.layer-button{padding:6px 10px}}@media(max-width:520px){.icon-button{width:27px;height:27px}.viewport{height:340px;min-height:300px}.layer-button{padding:4px 9px}.player{padding:16px 13px 12px;gap:11px}.play-button{width:36px;height:36px}.speed-switch{font-size:9px}.model-label span{font-size:9px;padding:4px 6px}.toast{width:calc(100% - 32px);text-align:center;font-size:11px}}.viewport{min-height:330px}@media(max-width:850px){.viewport{height:420px}}@media(max-width:520px){.viewport{height:330px}.model-label.teeth span{left:-62px;top:-48px}.model-label.teeth:before{transform:rotate(-135deg);width:40px}}main{padding-top:24px;padding-bottom:28px}.sound-picker{display:flex;gap:12px;margin-bottom:14px;padding-bottom:4px;overflow-x:auto;scrollbar-width:thin}.sound-group{flex:0 0 auto;min-width:0;padding:11px;border:1px solid #dedede;border-radius:12px;background:#fafafa}.sound-group h2{font-size:11px;line-height:14px;font-weight:600;margin:0 0 9px;color:#555}.sound-grid{display:grid;grid-template-columns:repeat(3,40px);gap:4px}.monophthongs .sound-grid,.diphthongs .sound-grid{grid-template-columns:repeat(5,40px)}.monophthongs [data-sound=ah],.monophthongs [data-sound=uu]{grid-column:1}.friction .sound-grid{grid-template-columns:repeat(5,40px)}.sonorants [data-sound=w]{grid-column:1}.sound-card{width:40px;min-width:40px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:1px;border:1px solid #e5e5e5;border-radius:5px;background:#fff;text-align:center}.card-symbol{font:22px/1 var(--ipa-font);color:#555}.card-word{font-size:8px;line-height:1;color:#999}.sound-card:hover{background:#ededed;border-color:#aaa}.sound-card.selected{background:#ededed;border-color:transparent}.sound-card.selected .card-symbol,.sound-card.selected .card-word{color:#252525}.sound-card.mastered{background:#2e7d4f;border-color:#2e7d4f}.sound-card.mastered:hover{background:#256a42;border-color:#256a42}.sound-card.mastered.selected{background:#256a42;border-color:transparent}.sound-card.mastered .card-symbol,.sound-card.mastered .card-word{color:#fff}.sound-menu{position:fixed;z-index:30;min-width:156px;max-width:calc(100vw - 16px);padding:5px;border:1px solid #dedede;border-radius:9px;background:#fff;box-shadow:0 5px 20px #00000018}.sound-menu[hidden]{display:none}.sound-menu button{display:block;width:100%;padding:10px 12px;border-radius:5px;text-align:left;font-size:12px;white-space:nowrap}.sound-menu button:hover,.sound-menu button:focus-visible{background:#ededed;outline:none}main{display:grid;grid-template-columns:minmax(0,max-content);padding:18px 32px 20px}.workspace{grid-template-columns:minmax(0,1fr) 316px;gap:16px}.viewport{height:clamp(270px,calc(100dvh - 350px),490px);min-height:270px;flex:none}.player{padding:10px 18px 8px;gap:13px}.play-button{height:34px;width:34px}.mouth-scene{position:absolute;top:0;right:0;bottom:0;left:0}.viewport:has(.sound-details:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 218px;min-height:min-content}.viewport:has(.sound-details:not([hidden])) .mouth-scene{right:218px}.sound-details{position:relative;z-index:5;grid-column:2;align-self:start;justify-self:end;margin:14px 14px 52px 0;display:grid;justify-items:center;gap:8px;width:190px;padding:10px;border-radius:10px;background:#ffffffbd;text-align:center}.sound-details[hidden],.sound-details [hidden]{display:none!important}#selected-symbol{font:24px/1.1 var(--ipa-font);color:#444}#vowel-map{display:block;width:146px;height:auto;overflow:visible}.map-grid{fill:none;stroke:#d2d2d2;stroke-width:1.5}.map-labels{fill:#929292;font-size:15px;text-anchor:middle}.map-reference{fill:#c5c5c5}#map-halo{fill:#7772}#map-point{fill:#666}#map-end{fill:#fff;stroke:#777;stroke-width:1.5}#map-motion{fill:none;stroke:#777;stroke-width:2}.consonant-flow{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:12px;color:#666}.consonant-flow span:not(.flow-arrow){padding:8px;border:1px solid #e0e0e0;border-radius:6px}.flow-arrow{color:#aaa}.sound-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:0;font-size:10px;line-height:1.5}.sound-traits dt{color:#999}.sound-traits dd{margin:2px 0 0;color:#626262;font-size:11px}.sound-details[data-kind=consonant] .sound-traits{grid-template-columns:1fr;gap:3px;text-align:left}.sound-details[data-kind=consonant] .sound-traits div{display:flex;align-items:baseline;gap:10px}.sound-details[data-kind=consonant] .sound-traits dd{margin:0}.sound-tip{width:100%;text-align:left}.sound-tip h3{margin:0 0 4px;color:#777;font-size:11px;font-weight:500}.sound-tip p{margin:0;font:11px/1.65 var(--ipa-font);color:#686868;overflow-wrap:anywhere}@media(max-width:1150px){main{padding:14px 20px 20px}.sound-picker{gap:8px}.sound-group{padding:9px}.card-word{display:none}.workspace{grid-template-columns:minmax(0,1fr) 260px;gap:12px}.layer-button{padding:5px 6px}}@media(max-width:850px){.sound-group h2{margin-bottom:7px}.workspace{grid-template-columns:1fr}.viewport{height:clamp(230px,calc(100dvh - 430px),380px);min-height:230px}}@media(max-width:520px){main{padding:10px}.sound-picker{gap:7px;margin-bottom:9px}.sound-group{padding:7px}.sound-group h2{font-size:10px;margin-bottom:4px}.viewport{height:clamp(220px,calc(100dvh - 350px),340px);min-height:220px}.layer-button{padding:4px 7px}.player{padding:8px 12px 7px;gap:9px}.play-button{width:31px;height:31px}.workspace{gap:10px}.model-label.palate:before{width:28px;transform:rotate(-55deg)}.model-label.palate span{left:17px;top:-34px}.model-label.alveolar:before{width:43px}.model-label.alveolar span{left:-12px;top:-64px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:600px){.viewport:has(.sound-details:not([hidden])){display:flex;flex-direction:column;height:auto}.viewport:has(.sound-details:not([hidden])) .mouth-scene{position:relative;inset:auto;order:1;width:100%;height:clamp(240px,calc(100dvh - 430px),340px)}.sound-details{position:relative;top:auto;right:auto;align-self:flex-end;margin:12px 12px 0 0;flex:none}}.sound-card.word-match{position:relative;background:#dedede}.sound-card.word-match:after{content:"";position:absolute;right:3px;top:3px;width:3px;height:3px;border-radius:50%;background:#666}.sound-card.mastered.word-match{background:#2e7d4f}.sound-card.mastered.selected.word-match{background:#256a42}.sound-card.mastered.word-match:after{background:#fff}.dictionary-card{position:relative;min-width:0;min-height:0;border:1px solid #e0e0e0;border-radius:20px;background:#fff;overflow:hidden}.dictionary-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:16px;padding:20px;overflow:auto}#lookup-form{position:relative;display:flex;align-items:center;min-width:0;flex:none}#lookup-input{width:0;min-width:0;flex:1;height:40px;padding:0 42px 0 11px;border:1px solid #ddd;border-radius:8px;background:#f7f7f7;font:inherit;font-size:13px;color:#333}#lookup-input:focus-visible{outline:2px solid #999;outline-offset:2px;background:#fff}#lookup-submit{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:32px;height:32px;border-radius:5px;color:#888;padding:0}#lookup-submit:hover{background:#ededed;color:#333}#lookup-form[aria-busy=true] #lookup-submit{opacity:.4;cursor:progress}#lookup-result{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:8px 0 4px;flex:none;min-width:0}#lookup-word{font-size:28px;line-height:1.15;font-weight:400;letter-spacing:-.4px;overflow-wrap:anywhere;max-width:100%}.pronunciations{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;max-width:100%;min-width:0}.pronunciation-line{display:flex;align-items:center;gap:4px;max-width:100%;min-width:0}.accent-label{font-size:12px;color:#888;flex:none}.lookup-ipa,.lookup-variant{font:18px/1.3 var(--ipa-font);color:#777;overflow-wrap:anywhere;min-width:0;max-width:100%}.lookup-variant{padding:5px 23px 5px 8px;border:1px solid #e2e2e2;border-radius:6px;background:#fafafa}.word-play{display:grid;place-items:center;flex:none;width:22px;height:24px;padding:0;color:#888}.word-play svg{width:16px;height:16px}.word-play:hover,.word-play.playing{color:#333}.word-play:disabled{cursor:default}#lookup-message{margin:0;flex:none;color:#888;font-family:var(--ipa-font);font-size:11px;line-height:1.6;overflow-wrap:anywhere}.dictionary-card [hidden]{display:none!important}.word-history{display:flex;flex-direction:column;min-height:90px;flex:1;padding-top:16px;gap:12px}#history-empty{font-size:12px;color:#aaa;text-align:center;margin:30px 0}#word-history{list-style:none;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;min-height:0;margin:0;padding:0;scrollbar-width:thin}.history-item{position:relative;min-width:0;flex:none;background:transparent;border:0;border-bottom:1px solid #ededed;border-radius:0;transition:background .15s}#word-history>.history-item:last-child{border-bottom:0}.history-item.current,.history-item.current:hover{background:#ededed}.history-item:hover{background:#f4f4f4}.history-open{display:grid;grid-template-columns:fit-content(48%) minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:40px;padding:7px 25px 7px 26px;text-align:left;touch-action:pan-y}.history-open strong{font-size:14px;line-height:1.3;font-weight:400;overflow-wrap:anywhere;color:#444}.history-open span{font:15px/1.3 var(--ipa-font);color:#888;overflow-wrap:anywhere}.history-drag,.history-remove{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:21px;height:24px;color:#aaa;padding:0;border-radius:4px}.history-drag{left:1px;font-size:20px;line-height:1;cursor:grab;touch-action:none}.history-remove{right:1px;font-size:18px;opacity:0}.history-item:hover .history-remove,.history-item:focus-within .history-remove{opacity:1}.history-drag:hover,.history-remove:hover{color:#555;background:#e5e5e5}.history-item.dragging{opacity:.3}.history-item.drop-target{box-shadow:inset 0 -2px #999;background:#f4f4f4}.history-drag-preview{position:fixed;z-index:50;pointer-events:none;box-shadow:0 8px 25px #0002;background:#fff;transform:rotate(-2deg)}.history-drag-preview *{pointer-events:none}.history-dragging,.history-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1150px){.dictionary-content{padding:16px;gap:14px}}@media(max-width:850px){.dictionary-card{grid-row:1}.dictionary-content{position:static}#lookup-result{text-align:left;align-items:flex-start;padding:4px 0}.pronunciations{justify-content:flex-start}.word-history{min-height:0;padding-top:12px;gap:10px}#word-history{max-height:170px}#history-empty{margin:8px 0}}@media(hover:none){.history-remove{opacity:1}}