:root{--bg: #f7f7f8;--surface: #ffffff;--surface-2: #f0f0f2;--surface-3: #e8e8ea;--ink: #1c1c1f;--ink-2: #5a5a62;--muted: #9a9aa2;--accent: #5b5bd6;--accent-strong: #4b4bc0;--accent-soft: #ececfc;--accent-ink: #ffffff;--ok: #22a35e;--ok-soft: #e6f6ee;--danger: #e0414d;--danger-soft: #fdeaea;--line: #e6e6e9;--line-strong: #d4d4d9;--shadow-sm: 0 1px 2px rgba(28, 28, 31, .05);--shadow-md: 0 4px 16px rgba(28, 28, 31, .08);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--font-ipa: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans", "Arial Unicode MS", "PingFang SC", "Microsoft YaHei", sans-serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;--ease: cubic-bezier(.22, .61, .36, 1)}[data-theme=dark]{--bg: #17171a;--surface: #202024;--surface-2: #2a2a2f;--surface-3: #34343a;--ink: #f2f2f4;--ink-2: #b8b8bf;--muted: #82828a;--accent: #7b7be8;--accent-strong: #9494f0;--accent-soft: #2b2b45;--accent-ink: #ffffff;--ok: #34c47a;--ok-soft: #173228;--danger: #f0656f;--danger-soft: #381c20;--line: #323238;--line-strong: #43434b;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%}body{font-family:var(--font-ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-size:15px;font-weight:600;transition:transform .12s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),opacity .2s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4}.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px #5b5bd659}.btn.primary:hover:not(:disabled){background:var(--accent-strong);box-shadow:0 4px 14px #5b5bd666}.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-strong)}.btn.ghost:hover:not(:disabled){color:var(--ink);border-color:var(--accent)}.icon-btn{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:500;transition:color .15s,border-color .15s}.icon-btn:hover{color:var(--accent);border-color:var(--accent)}.back-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);transition:color .15s,border-color .15s,transform .12s var(--ease)}.back-btn:hover{color:var(--accent);border-color:var(--accent)}.back-btn:active{transform:scale(.92)}.app{max-width:900px;margin:0 auto;padding:0 16px 40px;min-height:100vh;display:flex;flex-direction:column}.quiz,.result,.stats,.sounds{max-width:560px;margin:0 auto}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px 0 8px;background:var(--bg);box-shadow:0 1px 0 var(--line)}.top-spacer{width:64px;flex:0 0 64px}.brand{display:flex;align-items:center;gap:12px}.brand-logo{position:relative;width:38px;height:38px;flex:none;-webkit-user-select:none;user-select:none}.brand-logo .bl-core{position:absolute;top:7px;right:7px;bottom:7px;left:7px;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#6a5bd8,#a45bd6);color:#fff;font-size:15px;font-weight:800;font-family:Georgia,Times New Roman,serif;box-shadow:0 3px 10px #5b5bd673}.brand-logo .bl-wave{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;border:2px solid rgba(106,91,216,.55);opacity:0;animation:bl-wave 2.4s cubic-bezier(.2,.6,.35,1) infinite}.brand-logo .bl-wave.w2{animation-delay:.8s}.brand-logo .bl-wave.w3{animation-delay:1.6s}@keyframes bl-wave{0%{transform:scale(.7);opacity:.8}to{transform:scale(1.8);opacity:0}}.brand-word{font-size:19px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(120deg,var(--accent) 8%,#9a6ade 55%,#e06a9e 96%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-user-select:none;user-select:none}.top-actions{display:flex;gap:8px}.hero{padding:36px 0 22px;text-align:center}.hero h1{margin:0 0 10px;font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.02em}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:400px;margin:0 auto}.setup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);display:grid;gap:18px}.setup-head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}.setup-head p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border-radius:var(--r-md);padding:4px}.seg-btn{padding:10px 8px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--ink-2);display:grid;gap:1px;transition:background-color .15s,color .15s,box-shadow .15s}.seg-btn span{font-size:11.5px;font-weight:400;color:var(--muted)}.seg-btn.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.seg-btn.active span{color:var(--ink-2)}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}.level-card{position:relative;padding:13px 14px 12px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;gap:3px;text-align:left;transition:border-color .15s,transform .12s var(--ease),box-shadow .15s,background-color .15s}.level-card .lc-emoji{font-size:26px;line-height:1.3}.level-card .lc-name{font-size:13.5px;font-weight:700;color:var(--ink)}.level-card .lc-desc{font-size:12px;color:var(--muted);line-height:1.4}.level-card .lc-count{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--accent)}.level-card:hover{border-color:var(--accent);transform:translateY(-1px)}.level-card.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 14px #5b5bd62e}.level-card.active .lc-name{color:var(--accent)}.level-card.active .lc-count{color:var(--accent-strong)}.start-zone{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:stretch;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:14px}.mode-sub{display:grid;gap:7px}.mode-sub-title{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}.mode-sub .seg-sm{width:100%;flex:1;align-content:center}.start-btn{align-self:center;min-width:190px;padding:15px 22px;font-size:16px;border-radius:var(--r-md)}.setup-meta{text-align:center;font-size:12.5px;color:var(--muted)}@media(max-width:560px){.start-zone{grid-template-columns:1fr}.start-btn{min-width:0}}.home-links{display:grid;gap:8px;margin-top:22px}.home-links button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink-2);text-align:left;transition:border-color .15s,color .15s,transform .12s var(--ease)}.home-links button:hover{border-color:var(--accent);color:var(--ink)}.home-links button:active{transform:scale(.98)}.hl-icon{font-size:16px;width:22px;text-align:center}.hl-arrow{margin-left:auto;color:var(--muted)}.quiz-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px 0 10px;background:var(--bg);box-shadow:0 1px 0 var(--line);width:min(900px,100vw - 32px);margin-left:min(0px,(min(900px,100vw - 32px) - 560px) / -2);margin-right:min(0px,(min(900px,100vw - 32px) - 560px) / -2)}.quiz-progress{flex:1;display:grid;gap:6px;padding:0 4px}.quiz-progress-label{font-size:12.5px;font-weight:600;color:var(--muted);text-align:center}.progress-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}.progress-track i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s var(--ease)}.hint-btn{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:500;transition:all .15s}.hint-btn:hover,.hint-btn.on{color:var(--accent);border-color:var(--accent)}.top-placeholder{width:40px}.stats-title{flex:1;text-align:center;font-weight:700;font-size:17px}.word-stage{text-align:center;padding:26px 0 6px;animation:rise-in .35s var(--ease)}.word-level{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:3px 12px}.word{font-size:52px;font-weight:800;line-height:1.15;letter-spacing:-.01em;margin:10px 0 6px;font-family:var(--font-ui)}.listen-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:600;transition:all .15s}.listen-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}.listen-btn:disabled{opacity:.4}.hint-ipa{margin-top:12px;font-size:13.5px;color:var(--muted)}.hint-ipa b{font-family:var(--font-ipa);font-size:18px;color:var(--ink)}.keypad-wrap{padding:22px 0 4px}.stage-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px;display:flex;align-items:baseline;gap:4px}.stage-label b{color:var(--accent);font-size:15px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.keypad.full{grid-template-columns:repeat(4,1fr)}.key-btn{position:relative;min-height:64px;border-radius:var(--r-md);background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;transition:transform .1s var(--ease),border-color .15s,box-shadow .15s,background-color .15s}.key-btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.key-btn:active:not(:disabled){transform:scale(.94)}.key-btn.playing{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px #5b5bd62e}.key-btn .key-state{position:absolute;top:4px;right:5px;font-size:11px;line-height:1;pointer-events:none;animation:pop-in .25s var(--ease)}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.key-btn:disabled{opacity:.45}.key-sym{font-family:var(--font-ipa);font-size:30px;font-weight:500;line-height:1}.answer-stage{padding:18px 0 2px;min-height:108px}.answer-empty{padding:18px;border-radius:var(--r-md);border:1.5px dashed var(--line-strong);text-align:center;font-size:13.5px;color:var(--muted)}.answer-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.answer-item{position:relative;animation:pop-in .22s var(--ease)}.chip{min-width:58px;height:58px;border-radius:var(--r-md);border:2px solid var(--accent);background:var(--surface);font-family:var(--font-ipa);font-size:26px;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;transition:transform .1s var(--ease),background-color .15s}.chip:hover{background:var(--accent-soft)}.chip:active{transform:scale(.93)}.chip-del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink-2);color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .1s,background-color .15s}.chip-del:hover{background:var(--danger);transform:scale(1.1)}.undo-btn{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--line);background:var(--surface);transition:color .15s,border-color .15s}.undo-btn:hover{color:var(--danger);border-color:var(--danger)}.listen-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 0 4px}.submit-bar{padding:18px 0 6px;margin-top:10px}.submit-btn{width:100%;padding:17px;font-size:16.5px;border-radius:var(--r-md)}.result{animation:rise-in .3s var(--ease)}.result-banner{margin-top:12px;padding:28px 20px;border-radius:var(--r-lg);text-align:center;display:grid;justify-items:center;gap:4px}.result-banner.good{background:var(--ok-soft);border:1px solid rgba(34,163,94,.3);animation:success-pop .45s var(--ease)}.result-banner.bad{background:var(--danger-soft);border:1px solid rgba(224,65,77,.3);animation:shake .4s var(--ease)}.result-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;margin-bottom:6px}.result-banner.good .result-icon{background:var(--ok)}.result-banner.bad .result-icon{background:var(--danger)}.result-main h2{margin:0;font-size:24px;font-weight:800}.result-banner.good .result-main h2{color:var(--ok)}.result-banner.bad .result-main h2{color:var(--danger)}.result-word{font-size:34px;font-weight:800;margin-top:4px}.result-ipa{font-family:var(--font-ipa);font-size:20px;color:var(--ink-2);display:flex;align-items:center;gap:8px}.result-ipa .who{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--muted)}.diff{display:grid;gap:8px;margin:18px 0 0;animation:rise-in .3s var(--ease)}.diff-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}.diff-row.mine{border-left:4px solid var(--danger)}.diff-row.good{border-left:4px solid var(--ok)}.diff-label{font-size:12.5px;font-weight:600;color:var(--muted)}.diff-ipa{font-family:var(--font-ipa);font-size:21px;font-weight:500}.diff-row.mine .diff-ipa{color:var(--danger)}.diff-row.good .diff-ipa{color:var(--ok)}.why{margin-top:18px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:grid;gap:8px;animation:rise-in .3s var(--ease)}.why-title{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}.why-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0}.why-solution{font-size:14px;color:var(--ink-2)}.why-solution b{font-family:var(--font-ipa);font-size:17px;color:var(--ink)}.why-detail{justify-self:start;font-size:13.5px;font-weight:600;color:var(--accent);padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .15s}.why-detail:hover{border-color:var(--accent)}.detail{margin-top:18px;animation:rise-in .3s var(--ease)}.section-title{font-size:14px;font-weight:700;color:var(--ink-2);margin:18px 0 10px}.sec-hint{font-weight:400;font-size:12.5px;color:var(--muted)}.verdict-list{display:grid;gap:8px}.verdict{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}.verdict .pos{font-size:12px;font-weight:600;color:var(--muted);min-width:18px}.verdict .ph{font-family:var(--font-ipa);font-size:20px;font-weight:500}.verdict .ph.right{color:var(--ok)}.verdict .ph.wrong{color:var(--danger)}.verdict .ph.mine{color:var(--muted);font-size:16px}.verdict .spell{font-size:12px;color:var(--ink-2);background:var(--surface-2);border-radius:6px;padding:2px 8px}.verdict-badge{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}.verdict .ph.right+.verdict-badge{color:var(--ok)}.explain{margin-bottom:10px;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}.rule-label{font-size:14px;font-weight:600;margin-bottom:4px}.rule-label .arrow{color:var(--muted);font-weight:500;font-family:var(--font-ipa)}.explain p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}.stats{padding-top:4px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 4px}.stat-card{padding:18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.stat-card .num{font-weight:800;font-size:32px;line-height:1.1;letter-spacing:-.02em}.stat-card .num.accent{color:var(--accent)}.stat-card .num.amber{color:#d97706}.stat-card .lbl{font-size:12.5px;color:var(--muted);margin-top:4px}.empty-note{font-size:13.5px;color:var(--muted);line-height:1.7;padding:6px 0 0}.weak-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.weak-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.weak-name{min-width:108px;font-size:13.5px;font-weight:500;color:var(--ink-2)}.weak-bar{flex:1;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}.weak-bar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s var(--ease)}.weak-pct{font-size:12px;color:var(--muted);min-width:74px;text-align:right}.practice-zone{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.practice-zone .btn{flex:1}.sound-legend{font-size:13px;color:var(--muted);padding:6px 0 4px}.sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sound-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:15px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .12s var(--ease)}.sound-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}.sound-card:active{transform:scale(.98)}.sound-card.playing{border-color:var(--accent);box-shadow:0 0 0 3px #5b5bd62e}.sound-card .sc-top{display:flex;align-items:center;justify-content:space-between;width:100%}.sound-card .sc-sym{font-family:var(--font-ipa);font-size:30px;font-weight:500;line-height:1.1}.sound-card .sc-play{font-size:12px;color:var(--accent);background:var(--accent-soft);border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.sound-card .sc-name{font-size:14px;font-weight:600}.sound-card .sc-spell{font-size:11.5px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:1px 7px}.sound-card .sc-ex{display:flex;flex-wrap:wrap;gap:4px}.sound-card .sc-ex i{font-style:normal;font-size:12px;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 8px}.sound-card .sc-cue{font-size:11.5px;color:var(--ink-2);line-height:1.5}.sound-card .sc-synth{margin-top:auto;font-size:10.5px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:6px;padding:1px 8px}.guide{padding-bottom:40px}.guide-source{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 2px 12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:12px;color:var(--ink-2)}.guide-source a{color:var(--accent-strong);font-weight:600;text-decoration:none}.guide-source span{font-size:11px;color:var(--muted)}.guide-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}.guide-tabs::-webkit-scrollbar{display:none}.guide-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink-2);scroll-snap-align:start;transition:border-color .15s,background .15s,color .15s,transform .12s var(--ease)}.guide-tab .gt-emoji{font-size:15px}.guide-tab .gt-hint{font-size:10.5px;font-weight:400;color:var(--muted)}.guide-tab:hover{border-color:var(--accent);color:var(--ink)}.guide-tab:active{transform:scale(.97)}.guide-tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.guide-tab.active .gt-hint{color:#ffffffbf}.guide-body{margin-top:6px}.guide-note{font-size:13px;line-height:1.65;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 14px}.guide-note b{color:var(--ink)}.word-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-size:13px;transition:background .15s,transform .12s var(--ease)}.word-chip .wc-fr{font-weight:600}.word-chip .wc-zh{font-size:11px;color:var(--muted)}.word-chip:hover{background:var(--accent);color:var(--accent-ink)}.word-chip:hover .wc-zh{color:#ffffffbf}.word-chip:active{transform:scale(.96)}.word-chip.playing{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px #5b5bd638}.word-chip.playing .wc-zh{color:#ffffffbf}.sound-entry-list{display:grid;gap:12px}.sound-entry{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;box-shadow:var(--shadow-sm)}.se-head{display:flex;align-items:center;gap:10px}.se-spelling{font-size:17px;font-weight:700;letter-spacing:.2px}.se-ipa{font-family:var(--font-ipa);font-size:15px;color:var(--accent-strong);background:var(--accent-soft);border-radius:8px;padding:2px 9px}.se-play{margin-left:auto;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:13px;transition:background .15s,transform .12s var(--ease)}.se-play:hover{background:var(--accent);color:var(--accent-ink)}.se-play:active{transform:scale(.92)}.se-play.playing{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px #5b5bd633}.se-desc{margin:10px 0;font-size:13.5px;line-height:1.65;color:var(--ink-2)}.se-words{display:flex;flex-wrap:wrap;gap:7px}.se-sentence{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2)}.ss-play{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;transition:background .15s,transform .12s var(--ease)}.ss-play:hover{background:var(--accent);color:var(--accent-ink)}.ss-play:active{transform:scale(.92)}.ss-play.playing{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px #5b5bd638}.ss-fr{font-size:14px;font-weight:600;line-height:1.5}.ss-zh{font-size:12px;color:var(--muted);margin-top:2px}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}.letter-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px 10px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color .15s,transform .12s var(--ease)}.letter-cell:hover{border-color:var(--accent)}.letter-cell:active{transform:scale(.96)}.letter-cell.playing{border-color:var(--accent);box-shadow:0 0 0 3px #5b5bd62e}.letter-cell .lc-letter{font-size:22px;font-weight:700;line-height:1.1;text-transform:none}.letter-cell .lc-ipa{font-family:var(--font-ipa);font-size:12px;color:var(--accent-strong)}.letter-cell .lc-play{font-size:10px;color:var(--muted)}.nasal-demo{background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid var(--line);border-radius:var(--r-md);padding:16px;margin-bottom:14px}.nd-play{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;margin-bottom:12px;transition:transform .12s var(--ease),opacity .15s}.nd-play:hover{opacity:.9}.nd-play:active{transform:scale(.96)}.nd-play.playing{box-shadow:0 0 0 3px #5b5bd640}.nd-phrase{display:flex;flex-wrap:wrap;gap:8px}.nd-part{flex:1 1 auto;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,transform .12s var(--ease)}.nd-part:hover{border-color:var(--accent)}.nd-part:active{transform:scale(.95)}.nd-part.playing{border-color:var(--accent);box-shadow:0 0 0 3px #5b5bd633}.nd-part .ndp-word{font-size:17px;font-weight:700}.nd-part .ndp-ipa{font-family:var(--font-ipa);font-size:15px;color:var(--accent-strong)}.nd-part .ndp-zh{font-size:11px;color:var(--muted)}.nd-caption{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}.nasal-rules{display:grid;gap:10px}.nasal-rule{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px}.nasal-rule h4{margin:0 0 4px;font-size:14.5px;font-weight:700}.nasal-rule p{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--ink-2)}.nr-words{display:flex;flex-wrap:wrap;gap:7px}.tech-demo{margin-left:10px;padding:5px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;vertical-align:middle;transition:transform .12s var(--ease)}.tech-demo:hover{opacity:.9}.tech-demo:active{transform:scale(.95)}.tech-demo.playing{box-shadow:0 0 0 3px #5b5bd640}.tech-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;counter-reset:step}.tech-steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;counter-increment:step}.tech-steps h4{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--accent-strong)}.tech-steps p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-2)}.tech-tip{font-size:13px;line-height:1.65;color:var(--ink);background:var(--ok-soft);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:12px}.tech-drills{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.td-label{font-size:13px;font-weight:600;color:var(--ink-2)}.liaison-list{display:grid;gap:10px}.liaison{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--shadow-sm)}.ls-play{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,transform .12s var(--ease)}.ls-play:hover{background:var(--accent);color:var(--accent-ink)}.ls-play:active{transform:scale(.92)}.ls-play.playing{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px #5b5bd633}.ls-fr{font-size:15.5px;font-weight:700;line-height:1.4}.ls-zh{font-size:12.5px;color:var(--muted);margin-top:2px}.ls-tip{font-size:12px;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:3px 9px;margin-top:7px;display:inline-block}.hl-desc{font-size:11.5px;color:var(--muted);font-weight:400}.guide-takeaways{display:grid;gap:8px;margin-bottom:14px}.takeaway{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}.takeaway .tk-emoji{font-size:19px;line-height:1.3}.takeaway .tk-title{font-size:14px;font-weight:700;margin-bottom:2px}.takeaway .tk-desc{font-size:12.5px;line-height:1.6;color:var(--ink-2)}.liaison-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.liaison-intro .li-def{margin:0 0 6px;font-size:13.5px;line-height:1.65}.liaison-intro .li-note{margin:0 0 12px;font-size:12.5px;color:var(--ink-2);line-height:1.6}.li-case{background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px}.li-case-title{font-size:13.5px;font-weight:700;margin-bottom:8px;color:var(--accent-strong)}.li-case ol{margin:0 0 10px;padding-left:18px;display:grid;gap:5px}.li-case li{font-size:12.5px;line-height:1.6;color:var(--ink-2)}.li-case-result{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.li-case-result .li-ipa{font-family:var(--font-ipa);font-size:15px;font-weight:600;color:var(--accent-strong);background:var(--accent-soft);border-radius:8px;padding:2px 9px}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes success-pop{0%{transform:scale(.94)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}}@media(max-width:640px){.app{padding:0 12px 30px}.hero{padding:28px 0 18px}.hero h1{font-size:28px}.guide-tab .gt-hint{display:none}.word{font-size:44px}.key-btn{min-height:58px}.key-sym{font-size:27px}.keypad,.sound-grid{gap:8px}.submit-bar{padding-bottom:6px}}.dict-view{display:flex;flex-direction:column;gap:16px;max-width:680px;margin:0 auto;padding:18px 0 60px;width:100%}.dict-view .topbar{width:min(900px,100vw - 32px);margin-left:min(0px,(min(900px,100vw - 32px) - 680px) / -2);margin-right:min(0px,(min(900px,100vw - 32px) - 680px) / -2)}.dict-hero{text-align:center;padding:26px 0 4px}.dict-hero h1{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.02em}.dict-hero p{margin:0 auto;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:420px}.dict-toolbar{display:grid;gap:12px}.dict-search{width:100%;padding:13px 16px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:15px;transition:border-color .15s,box-shadow .15s}.dict-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.dict-search::placeholder{color:var(--muted)}.dict-filters{display:flex;gap:8px;flex-wrap:wrap}.dict-chip{padding:7px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);transition:all .15s var(--ease)}.dict-chip:hover{border-color:var(--accent);color:var(--accent)}.dict-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.dict-count{font-size:12.5px;color:var(--muted);padding:0 2px}.dict-list{display:grid;gap:10px}.dict-row{display:flex;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color .15s,transform .12s var(--ease)}.dict-row:hover{border-color:var(--accent);transform:translateY(-1px)}.dict-play{flex:0 0 44px;width:44px;height:44px;align-self:flex-start;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface-2);font-size:18px;color:var(--ink-2);display:grid;place-items:center;transition:all .15s var(--ease)}.dict-play:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:scale(1.05)}.dict-play:disabled{opacity:.45;cursor:not-allowed}.dict-play.playing{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);animation:playing-pulse 1.1s ease-in-out infinite}@keyframes playing-pulse{0%,to{box-shadow:0 0 #5b5bd659}50%{box-shadow:0 0 0 8px #5b5bd600}}.dict-main{flex:1;min-width:0}.dict-wordline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dict-word{font-size:17.5px;font-weight:800;letter-spacing:-.01em}.dict-badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.04em}.cefr-a1{background:var(--ok-soft);color:var(--ok)}.cefr-a2{background:var(--accent-soft);color:var(--accent)}.cefr-b1{background:var(--danger-soft);color:var(--danger)}.dict-ipa{margin-top:3px;font-family:var(--font-ipa);font-size:13.5px;color:var(--ink-2)}.dict-gloss{margin-top:3px;font-size:13px;color:var(--ink-2);line-height:1.55}.dict-phonemes{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.dp-chip{padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);font-family:var(--font-ipa);font-size:13px;color:var(--ink-2);transition:all .12s var(--ease)}.dp-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.dict-empty{text-align:center;padding:36px 16px;color:var(--muted);font-size:14px}.app-footer{margin-top:auto;padding:18px 16px 0;border-top:1px solid var(--line);text-align:center;font-size:12px;line-height:1.8;color:var(--muted)}.app-footer p{margin:0}@media(max-width:380px){.keypad.full{grid-template-columns:repeat(3,1fr)}.sound-card{padding:12px 13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}