:root{--bg:#07111f;--bg2:#0a1627;--panel:#0f1e31;--panel2:#13253a;--line:rgba(148,163,184,.2);--text:#f8fafc;--muted:#a8b7ca;--soft:#73869e;--teal:#2dd4bf;--cyan:#38bdf8;--coral:#fb7185;--amber:#fbbf24;--shadow:0 24px 65px rgba(0,0,0,.28)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:radial-gradient(circle at 48% -10%,rgba(56,189,248,.11),transparent 32%),linear-gradient(180deg,#06101d,var(--bg));}
button,a{font:inherit}button{color:inherit}.topbar{height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(4,12,23,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand img{border-radius:13px}.brand span{display:grid}.brand strong{font-size:18px}.brand small{margin-top:2px;color:var(--muted);font-size:11px;letter-spacing:.06em}.back-link{color:var(--muted);text-decoration:none;font-size:14px;transition:.2s}.back-link:hover{color:var(--teal)}
.app-shell{width:min(1600px,100%);margin:0 auto;display:grid;grid-template-columns:238px minmax(520px,1fr) minmax(390px,500px);min-height:calc(100vh - 72px)}.learning-rail,.studio{background:rgba(8,20,35,.7)}.learning-rail{padding:30px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:30px}.learning-rail h2,.studio h2,.chart-panel h2,.method-panel h2{margin:0;font-size:18px}.steps{list-style:none;margin:24px 0 0;padding:0}.steps li{position:relative;display:flex;gap:13px;min-height:78px;color:var(--soft)}.steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;bottom:3px;width:1px;background:var(--line)}.steps b{width:31px;height:31px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#152b43;border:1px solid #275174;color:#8eacc9;font-size:12px}.steps span{display:grid;align-content:start;gap:5px;padding-top:4px}.steps strong{color:#97aac0;font-size:15px}.steps small{font-size:11px;line-height:1.45}.steps li.active b{color:#04212a;border-color:var(--teal);background:var(--teal);box-shadow:0 0 18px rgba(45,212,191,.28)}.steps li.active strong{color:var(--teal)}.progress-panel{padding:17px;border:1px solid var(--line);background:rgba(19,37,58,.58);border-radius:16px}.progress-heading{display:flex;align-items:center;justify-content:space-between}.progress-heading h3{margin:0;font-size:14px}.progress-heading span{color:var(--teal);font-size:12px;font-weight:800}.progress-track{height:6px;margin:14px 0;border-radius:9px;overflow:hidden;background:#23364c}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan));transition:.3s}.progress-panel p{margin:0;color:var(--soft);font-size:11px;line-height:1.55}.text-button{margin-top:11px;padding:0;border:0;background:none;color:#91a7bd;font-size:11px;cursor:pointer}.text-button:hover{color:var(--coral)}
.workspace{padding:34px 28px 40px;min-width:0}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.intro h1{margin:0 0 7px;font-size:clamp(30px,3vw,44px);letter-spacing:-.04em}.intro p{margin:0;color:var(--muted)}.legend{display:flex;gap:14px;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}.vowel-dot{background:var(--teal)}.consonant-dot{background:var(--cyan)}.chart-panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,35,55,.96),rgba(9,23,39,.96));box-shadow:var(--shadow)}.section-heading{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.section-heading p{margin:5px 0 0;color:var(--soft);font-size:11px}.count{text-transform:uppercase;color:var(--soft);font-size:10px;letter-spacing:.14em}.phoneme-group{padding:18px 20px 4px}.phoneme-group:last-child{padding-bottom:20px}.group-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#dce6f1;font-size:13px;font-weight:700}.group-title span{color:var(--soft);font-size:10px;font-weight:400}.phoneme-grid{display:grid;grid-template-columns:repeat(6,minmax(54px,1fr));gap:8px}.phoneme-group.consonants .phoneme-grid{grid-template-columns:repeat(8,minmax(44px,1fr))}.phoneme-button{min-height:46px;border:1px solid #2a4058;border-radius:6px;background:#14263b;color:#e9f1f8;font-family:"Times New Roman","Noto Sans",serif;font-size:24px;cursor:pointer;transition:.18s;position:relative}.phoneme-button:hover{transform:translateY(-2px);border-color:#3d7293;background:#17314a}.phoneme-button.active{border-color:var(--teal);background:rgba(45,212,191,.12);color:var(--teal);box-shadow:inset 0 0 0 1px rgba(45,212,191,.28),0 0 18px rgba(45,212,191,.12)}.phoneme-button.mastered::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--teal)}.method-panel{margin-top:20px;padding:22px;border-left:3px solid var(--teal);background:linear-gradient(90deg,rgba(45,212,191,.08),transparent)}.method-panel h2{font-size:17px}.method-panel>p{max-width:780px;color:var(--muted);font-size:13px;line-height:1.75}.method-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.method-flow span{padding:7px 10px;border:1px solid var(--line);background:#0e2034;color:#cbd8e6;font-size:11px}.method-flow i{color:var(--teal);font-style:normal}
.studio{padding:28px 24px 36px;border-left:1px solid var(--line);min-width:0}.studio-top{display:flex;justify-content:space-between;align-items:start}.studio-top>div{display:flex;gap:12px;align-items:baseline}.studio-top p{margin:0;color:var(--soft);font-size:11px}.master-button{border:1px solid #31506a;border-radius:6px;background:transparent;padding:7px 10px;color:#a9bacb;font-size:11px;cursor:pointer}.master-button.is-mastered{border-color:rgba(45,212,191,.55);color:var(--teal);background:rgba(45,212,191,.08)}.sound-hero{margin-top:24px;display:grid;grid-template-columns:1fr 180px;align-items:center;gap:12px}.sound-type{color:var(--teal);font-size:12px}.ipa-large{margin-top:5px;font-family:"Times New Roman","Noto Sans",serif;font-size:64px;line-height:1}.word-play{display:flex;align-items:center;gap:10px;margin-top:14px;padding:0;border:0;background:none;cursor:pointer}.word-play span{font-size:28px;font-weight:800}.word-play b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#1c344d;color:var(--cyan);font-size:10px}.mouth-map{text-align:center}.mouth-map svg{width:100%;max-height:140px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}.head-line,.mouth-line{fill:none;stroke:#8da0b6;stroke-width:4;stroke-linecap:round}.tongue{fill:var(--coral);opacity:.9;transition:.3s}.air-line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:5 4}.mouth-map small{color:var(--soft);font-size:10px}.instruction{margin-top:22px;padding-top:19px;border-top:1px solid var(--line)}.instruction h3,.minimal-pair h3{margin:0 0 8px;font-size:14px}.instruction p{margin:0;color:#c1cedc;font-size:13px;line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0}.feature-grid div{padding:10px 8px;background:#13263c;border:1px solid var(--line);text-align:center}.feature-grid dt{color:var(--soft);font-size:10px}.feature-grid dd{margin:5px 0 0;color:#e5edf5;font-size:11px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.actions button,.quiz-button{min-height:44px;border-radius:6px;font-weight:750;font-size:12px;cursor:pointer}.secondary{border:1px solid #34516b;background:#14283e}.primary{border:0;background:linear-gradient(135deg,#0ea5e9,#2563eb)}.primary.recording-now{background:var(--coral)}.recording{margin-top:10px;padding:10px;border:1px solid var(--line);background:#0d1d30;color:var(--muted);font-size:11px}.recording audio{width:100%;height:34px;margin-top:8px}.minimal-pair{margin-top:22px;padding:18px;border:1px solid var(--line);background:#0c1b2d}.pair-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.pair-heading p{margin:0;color:var(--soft);font-size:10px}.pair-words{display:grid;grid-template-columns:1fr 28px 1fr;gap:8px;align-items:center;margin:14px 0}.pair-words button{padding:12px 7px;border:1px solid #2c455e;background:#14283e;cursor:pointer}.pair-words b,.pair-words span{display:block}.pair-words b{font-size:18px}.pair-words span{margin-top:4px;color:var(--muted);font-family:"Times New Roman",serif}.pair-words em{text-align:center;color:var(--soft);font-size:10px;font-style:normal}.quiz-button{width:100%;border:0;background:var(--coral);color:#19090c}.quiz-choices{margin-top:12px;text-align:center}.quiz-choices p{margin:0 0 8px;color:var(--muted);font-size:11px}.quiz-choices button{width:calc(50% - 4px);padding:8px;border:1px solid #31506a;background:#13263c;cursor:pointer}.quiz-result{min-height:18px;margin:8px 0 0;text-align:center;color:var(--teal);font-size:11px}.page-footer{padding:24px max(28px,calc((100% - 1544px)/2));border-top:1px solid var(--line);background:#050d18;color:var(--soft);font-size:11px;line-height:1.6}.page-footer p{margin:0 0 8px}.page-footer nav{display:flex;gap:18px;flex-wrap:wrap}.page-footer a{color:var(--teal);text-decoration:none}
@media(max-width:1180px){.app-shell{grid-template-columns:210px 1fr}.studio{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-left:max(24px,calc((100% - 900px)/2));padding-right:max(24px,calc((100% - 900px)/2))}.sound-hero{grid-template-columns:1fr 220px}.minimal-pair{max-width:720px}}
@media(max-width:760px){.topbar{height:64px;padding:0 14px}.brand strong{font-size:15px}.back-link{font-size:12px}.app-shell{display:block}.learning-rail{border-right:0;border-bottom:1px solid var(--line);padding:20px 14px}.learning-rail>div:first-child{display:none}.workspace,.studio{padding:24px 14px}.progress-panel{max-width:none}.intro{align-items:start;gap:12px}.intro h1{font-size:30px}.legend{padding-top:8px}.section-heading{padding:15px}.phoneme-group{padding:16px 14px 2px}.phoneme-group:last-child{padding-bottom:16px}.phoneme-grid,.phoneme-group.consonants .phoneme-grid{grid-template-columns:repeat(4,1fr)}.phoneme-button{min-height:49px}.sound-hero{grid-template-columns:1fr 135px}.ipa-large{font-size:54px}.feature-grid{grid-template-columns:repeat(2,1fr)}.pair-heading{display:block}.pair-heading p{margin-top:5px}.page-footer{padding:22px 14px}}
@media(max-width:400px){.sound-hero{grid-template-columns:1fr 112px}.word-play span{font-size:24px}.actions{grid-template-columns:1fr}.intro p{font-size:13px}.count{display:none}}
.phoneme-button.playing{animation:phoneme-pulse .72s ease-in-out infinite alternate}.secondary.playing{border-color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.2)}@keyframes phoneme-pulse{to{border-color:#67e8f9;box-shadow:0 0 0 4px rgba(34,211,238,.1),0 0 22px rgba(34,211,238,.28)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}