@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-latin-ext-400-normal-DRk46D-x.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-latin-ext-400-normal-Bbz-b3yf.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-latin-400-normal-BrHNak5F.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-latin-400-normal-BbWidj28.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-latin-ext-700-normal-BoVPHkS0.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-latin-ext-700-normal-CKkU2Dpt.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-latin-700-normal-GZI4o3u0.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-latin-700-normal-BK6Glc0m.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--fog:#e6ecf0;--paper:#f9fbfc;--ink:#1c2533;--ink-2:#4b5769;--ink-3:#7a8699;--line:#cfd8df;--chili:#c8102e;--chili-deep:#9c0c24;--chili-soft:#fbe3e6;--lantern:#f2a22c;--lantern-soft:#fff1d9;--bamboo:#2b8a55;--bamboo-soft:#dff2e6;--night:#131b2c;--night-2:#1d2842;--night-line:#33415f;--t1:#2f6fde;--t2:#14a085;--t3:#8e44ad;--t4:#e0452b;--t5:#8a94a6;--ok:#2b8a55;--close:#d99513;--bad:#d64545;--display:"Bricolage Grotesque Variable", "Avenir Next", system-ui, sans-serif;--body:"Atkinson Hyperlegible", system-ui, sans-serif;--han:"PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;--r-s:10px;--r-m:16px;--r-l:26px;--shadow:0 1px 0 #1c25330f, 0 6px 18px -10px #1c253359;--nav-h:68px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--fog);color:var(--ink);font:17px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--t1);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.app{max-width:520px;min-height:100dvh;padding:0 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));margin:0 auto}.app.bare{padding-bottom:32px}h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0;line-height:1.15}h1{font-size:30px;font-weight:750}h2{font-size:22px;font-weight:700}h3{font-size:18px;font-weight:650}p{margin:0}.muted{color:var(--ink-2)}.small{font-size:14px}.han{font-family:var(--han)}.btn{cursor:pointer;background:var(--chili);color:#fff;min-height:52px;box-shadow:0 3px 0 var(--chili-deep);border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-size:17px;font-weight:700;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active{box-shadow:0 1px 0 var(--chili-deep);transform:translateY(2px)}.btn[disabled]{cursor:default;background:#b9c3cc;box-shadow:0 3px #9aa6b1}.btn.block{width:100%}.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--line) inset}.btn.ghost:active{box-shadow:0 0 0 2px var(--ink-3) inset}.btn.green{background:var(--bamboo);box-shadow:0 3px #1d6440}.btn.small{min-height:40px;padding:0 16px;font-size:15px}.icon-btn{background:var(--paper);cursor:pointer;width:48px;height:48px;box-shadow:0 0 0 2px var(--line) inset;border:0;border-radius:50%;place-items:center;font-size:20px;display:inline-grid}.link{color:var(--chili);cursor:pointer;background:0 0;border:0;padding:8px 0;font-weight:700}.topbar{background:var(--fog);z-index:5;align-items:center;gap:12px;padding:14px 0 10px;display:flex;position:sticky;top:0}.topbar .who{flex:1;align-items:center;gap:10px;min-width:0;font-weight:700;display:flex}.pill{background:var(--paper);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:15px;font-weight:700;display:inline-flex}.pill.fire{color:#c2410c}.pill.bamboo{color:#8a5a00}.nav{z-index:20;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);position:fixed;bottom:0;left:0;right:0}.nav-inner{max-width:520px;height:var(--nav-h);grid-template-columns:repeat(5,1fr);margin:0 auto;display:grid}.nav a{color:var(--ink-3);flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:12px;font-weight:700;text-decoration:none;display:flex}.nav a svg{width:26px;height:26px}.nav a[aria-current=page]{color:var(--chili)}.card{background:var(--paper);border-radius:var(--r-m);box-shadow:var(--shadow);padding:18px}.stack{gap:14px;display:grid}.row{align-items:center;gap:12px;display:flex}.spacer{flex:1}.journey{margin:6px 0 18px}.journey .days{font-family:var(--display);letter-spacing:-.03em;font-size:64px;font-weight:800;line-height:.9}.journey .to{font-family:var(--display);margin-top:4px;font-size:20px;font-weight:650}.route{margin-top:14px}.route svg{width:100%;height:44px;display:block}.pace{border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:14px;font-weight:700;display:inline-flex}.pace.on{background:var(--bamboo-soft);color:#1d6440}.pace.ahead{color:#1f4fa8;background:#e3edfd}.pace.behind{background:var(--lantern-soft);color:#8a5a00}.review-cta{text-align:left;cursor:pointer;background:var(--night);color:#fff;border-radius:var(--r-m);border:0;align-items:center;gap:14px;width:100%;margin-bottom:20px;padding:16px 18px;display:flex}.review-cta .big{font-family:var(--display);font-size:20px;font-weight:700}.metro{padding-left:8px;position:relative}.station{grid-template-columns:44px 1fr;gap:14px;padding-bottom:22px;display:grid;position:relative}.station:before{content:"";background:var(--chili);border-radius:3px;width:6px;position:absolute;top:40px;bottom:-2px;left:19px}.station:last-child:before{display:none}.station.locked:before{background:var(--line)}.station.done:before{background:var(--chili)}.stop{cursor:pointer;background:var(--paper);width:44px;height:44px;box-shadow:0 0 0 5px var(--chili) inset;font-family:var(--display);color:var(--ink);border:0;border-radius:50%;place-items:center;font-size:17px;font-weight:800;display:grid}.station.done .stop{background:var(--chili);color:#fff}.station.locked .stop{box-shadow:0 0 0 5px var(--line) inset;color:var(--ink-3)}.station.current .stop{animation:2.4s ease-in-out infinite here}@keyframes here{0%,to{box-shadow:0 0 0 5px var(--chili) inset, 0 0 0 0 #c8102e59}50%{box-shadow:0 0 0 5px var(--chili) inset, 0 0 0 10px #c8102e00}}.station-head{text-align:left;cursor:pointer;background:0 0;border:0;width:100%;padding:0}.station-name{font-family:var(--display);font-size:20px;font-weight:700}.station-sub{color:var(--ink-2);font-size:14px}.station-body{gap:10px;margin-top:12px;display:grid}.lesson-btn{text-align:left;border-radius:var(--r-s);cursor:pointer;background:var(--paper);border:2px solid var(--line);align-items:center;gap:12px;width:100%;padding:12px 14px;font-weight:700;display:flex}.lesson-btn.next{border-color:var(--chili);background:#fff}.lesson-btn[disabled]{opacity:.55;cursor:default}.lesson-btn .dot{background:var(--fog);border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-size:14px;display:grid}.lesson-btn.done .dot{background:var(--bamboo);color:#fff}.player{flex-direction:column;min-height:100dvh;padding:12px 0 20px;display:flex}.player-top{align-items:center;gap:14px;display:flex}.progress{background:#d3dbe2;border-radius:999px;flex:1;height:14px;overflow:hidden}.progress>span{background:var(--chili);border-radius:999px;height:100%;transition:width .35s;display:block}.ex{flex-direction:column;flex:1;gap:18px;padding:22px 0;display:flex}.ex-title{font-family:var(--display);font-size:22px;font-weight:700}.ex-foot{padding-top:6px}.phrase-card{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow);text-align:center;padding:22px 18px 18px}.phrase-pic{font-size:54px;line-height:1}.phrase-en{color:var(--ink-2);margin-top:8px;font-size:18px}.phrase-note{color:var(--ink-2);text-align:left;background:var(--fog);border-radius:var(--r-s);margin-top:10px;padding:10px 12px;font-size:15px}.sandhi{color:var(--ink-2);margin-top:6px;font-size:14px}.tone-text{flex-wrap:wrap;justify-content:center;gap:2px 4px;display:inline-flex}.tone-text .syl{flex-direction:column;align-items:center;display:inline-flex}.tone-text .py{min-height:1.3em;font-size:15px;font-weight:700}.tone-text .hz{font-family:var(--han);font-size:38px;font-weight:600;line-height:1.15}.tone-text.big .hz{font-size:48px}.tone-text.small .hz{font-size:24px}.tone-text.small .py{font-size:12px}.tone-text .gap{width:10px}.c1{color:var(--t1)}.c2{color:var(--t2)}.c3{color:var(--t3)}.c4{color:var(--t4)}.c5{color:var(--t5)}.play-row{justify-content:center;gap:12px;margin-top:14px;display:flex}.studio{background:var(--night);border-radius:var(--r-l);color:#e8edf7;padding:14px 14px 16px}.studio canvas{width:100%;height:190px;display:block}.studio-legend{color:#aab6cf;flex-wrap:wrap;gap:14px;margin:6px 4px 0;font-size:13px;display:flex}.studio-legend i{vertical-align:middle;border-radius:2px;width:18px;height:3px;margin-right:6px;display:inline-block}.mic-wrap{flex-direction:column;align-items:center;gap:8px;margin-top:12px;display:flex}.mic{cursor:pointer;background:var(--chili);color:#fff;width:84px;height:84px;box-shadow:0 4px 0 var(--chili-deep), 0 0 0 6px #c8102e2e;border:0;border-radius:50%;place-items:center;display:grid}.mic svg{width:36px;height:36px}.mic.live{background:var(--lantern);animation:1.2s ease-in-out infinite pulse;box-shadow:0 4px #b97510,0 0 0 10px #f2a22c40}@keyframes pulse{50%{box-shadow:0 4px #b97510,0 0 0 16px #f2a22c14}}.mic-hint{color:#aab6cf;font-size:14px}.studio .icon-btn{color:#fff;background:#26324f;box-shadow:inset 0 0 0 2px #3a4868}.studio .icon-btn svg{width:22px;height:22px}.studio .icon-btn[disabled]{opacity:.35}.icon-btn svg{width:22px;height:22px}.verdicts{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.chip{border-radius:var(--r-s);background:#26324f;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:8px 10px 6px;display:inline-flex}.chip .hz{font-family:var(--han);color:#fff;font-size:24px;font-weight:600}.chip .v{font-size:12px;font-weight:700}.chip.green{background:#2b8a5547;box-shadow:inset 0 0 0 2px #3fb574}.chip.green .v{color:#7fe0a8}.chip.amber{background:#d9951340;box-shadow:inset 0 0 0 2px #e8a92b}.chip.amber .v{color:#ffd27d}.chip.red{background:#d6454540;box-shadow:inset 0 0 0 2px #e05c5c}.chip.red .v{color:#ff9f9f}.chip.skip{opacity:.6}.chip.skip .v{color:#aab6cf}.tip{border-radius:var(--r-s);color:#fff;background:#26324f;margin-top:12px;padding:12px 14px;font-size:16px}.soundcheck{color:#aab6cf;margin-top:10px;font-size:14px}.soundcheck b{color:#fff}.choices{gap:12px;display:grid}.choices.grid2{grid-template-columns:1fr 1fr}.choice{border-radius:var(--r-m);cursor:pointer;text-align:left;background:var(--paper);border:2px solid var(--line);width:100%;min-height:64px;box-shadow:0 3px 0 var(--line);align-items:center;gap:12px;padding:12px 16px;font-size:17px;display:flex}.choices.grid2 .choice{text-align:center;flex-direction:column;justify-content:center;min-height:118px}.choice .emo{font-size:34px;line-height:1}.choice[aria-pressed=true]{border-color:var(--t1);box-shadow:0 3px 0 var(--t1);background:#eef4ff}.choice.right{border-color:var(--ok);box-shadow:0 3px 0 var(--ok);background:var(--bamboo-soft)}.choice.wrong{border-color:var(--bad);box-shadow:0 3px 0 var(--bad);background:#fde8e8}.tone-choice svg{width:64px;height:40px}.big-play{cursor:pointer;background:var(--t1);color:#fff;border:0;border-radius:50%;place-items:center;width:96px;height:96px;margin:4px auto;display:grid;box-shadow:0 4px #1f4fa8}.big-play svg{width:40px;height:40px}.tiles{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.tile{font-family:var(--han);border-radius:var(--r-s);background:var(--paper);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);cursor:pointer;padding:10px 14px;font-size:24px}.tile[disabled]{opacity:.25;cursor:default}.answer-line{border-bottom:2px solid var(--line);flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px;min-height:64px;padding-bottom:8px;display:flex}.sign{text-align:center;font-family:var(--han);letter-spacing:.08em;border-radius:8px;margin:8px auto;padding:18px 28px;font-size:46px;font-weight:700;box-shadow:0 4px #0003}.sign.green{color:#fff;background:#127a3e}.sign.blue{color:#fff;background:#1d4fa3}.sign.white{color:#1c2533;background:#fff;border:3px solid #1c2533}.chat{gap:10px;display:grid}.bubble{border-radius:18px;max-width:86%;padding:12px 14px}.bubble.app{background:var(--paper);box-shadow:var(--shadow);border-bottom-left-radius:6px;justify-self:start}.bubble.you{background:var(--night);color:#fff;border-bottom-right-radius:6px;justify-self:end}.bubble .en{opacity:.75;margin-top:4px;font-size:14px}.setting{color:var(--ink-2);background:var(--paper);border-radius:var(--r-s);padding:10px 12px;font-size:15px}.sheet{z-index:30;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:.22s ease-out rise;position:fixed;bottom:0;left:0;right:0}.sheet-inner{gap:12px;max-width:520px;margin:0 auto;display:grid}.sheet.good{background:var(--bamboo-soft);color:#1d6440}.sheet.bad{color:#a12a2a;background:#fde8e8}.sheet h3{font-size:22px}@keyframes rise{0%{transform:translateY(100%)}to{transform:none}}.end{text-align:center;justify-items:center;gap:18px;padding-top:12vh;display:grid}.end .earned{font-family:var(--display);color:#8a5a00;font-size:72px;font-weight:800;line-height:1}.stats{justify-content:center;gap:12px;display:flex}.stat{background:var(--paper);border-radius:var(--r-m);min-width:104px;box-shadow:var(--shadow);padding:12px 16px}.stat b{font-family:var(--display);font-size:26px;display:block}.meter{background:#d3dbe2;border-radius:999px;height:18px;overflow:hidden}.meter>span{background:linear-gradient(90deg, var(--chili), var(--lantern));height:100%;display:block}.tabs{background:#d7dfe5;border-radius:999px;gap:4px;padding:4px;display:inline-flex}.tabs button{cursor:pointer;color:var(--ink-2);white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:8px 14px;font-size:15px;font-weight:700}.tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}.rank{border-bottom:1px solid var(--line);grid-template-columns:28px 56px 1fr auto;align-items:center;gap:12px;padding:10px 0;display:grid}.rank:last-child{border-bottom:0}.rank .pos{font-family:var(--display);color:var(--ink-3);font-size:20px;font-weight:800}.rank .amt{font-weight:800}.avatar-stage{justify-items:center;gap:10px;padding:10px 0 4px;display:grid}.title-tag{color:#8a5a00;background:var(--lantern-soft);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}.cat-row{scrollbar-width:none;gap:8px;padding:4px 0 10px;display:flex;overflow-x:auto}.cat-row button{background:var(--paper);cursor:pointer;box-shadow:0 0 0 2px var(--line) inset;border:0;border-radius:999px;flex:none;padding:8px 14px;font-weight:700}.cat-row button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}.items{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.item{background:var(--paper);border-radius:var(--r-m);text-align:center;box-shadow:var(--shadow);border:2px solid #0000;justify-items:center;gap:8px;padding:12px;display:grid}.item.equipped{border-color:var(--bamboo)}.item .name{font-size:15px;font-weight:700;line-height:1.2}.item .price{color:#8a5a00;font-weight:800}.item .lock{color:var(--ink-3);font-size:13px}.swatches{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.swatch{width:34px;height:34px;box-shadow:0 0 0 2px var(--line);cursor:pointer;border:3px solid #fff;border-radius:50%}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}.search{border:2px solid var(--line);background:var(--paper);width:100%;min-height:50px;font:inherit;border-radius:999px;padding:0 18px}.pb-row{border-bottom:1px solid var(--line);cursor:pointer;text-align:left;background:0 0;border-top:0;border-left:0;border-right:0;grid-template-columns:1fr auto;align-items:center;gap:8px;width:100%;padding:12px 0;display:grid}.pb-row .zh{font-family:var(--han);font-size:22px;font-weight:600}.showcard{z-index:40;text-align:center;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px;display:flex;position:fixed;inset:0}.showcard .zh{font-family:var(--han);color:#000;font-size:clamp(48px,16vw,110px);font-weight:700;line-height:1.15}.showcard .close{top:calc(14px + env(safe-area-inset-top));position:absolute;right:14px}.picker{text-align:center;gap:26px;padding-top:10vh;display:grid}.picker .brand{font-family:var(--han);color:var(--chili);font-size:52px;font-weight:800;line-height:1}.picker .brand small{font-family:var(--display);color:var(--ink);margin-top:8px;font-size:20px;font-weight:700;display:block}.people{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.person{background:var(--paper);border-radius:var(--r-m);cursor:pointer;box-shadow:var(--shadow);border:0;justify-items:center;gap:8px;padding:14px 6px;font-weight:700;display:grid}.pin-dots{justify-content:center;gap:16px;margin:8px 0;display:flex}.pin-dots span{border:3px solid var(--ink);border-radius:50%;width:18px;height:18px}.pin-dots span.on{background:var(--ink)}.pad{grid-template-columns:repeat(3,76px);justify-content:center;gap:14px;display:grid}.pad button{background:var(--paper);height:76px;font-family:var(--display);cursor:pointer;box-shadow:var(--shadow);border:0;border-radius:50%;font-size:28px;font-weight:700}.error{color:var(--bad);font-weight:700}.toast{left:50%;top:calc(14px + env(safe-area-inset-top));z-index:50;background:var(--ink);color:#fff;box-shadow:var(--shadow);border-radius:999px;max-width:calc(100% - 32px);padding:12px 18px;font-weight:700;position:fixed;transform:translate(-50%)}.offline{text-align:center;color:#8a5a00;background:var(--lantern-soft);border-radius:999px;width:fit-content;margin:0 auto 8px;padding:4px 10px;font-size:13px}.field{gap:6px;display:grid}.field input,.field select{border-radius:var(--r-s);border:2px solid var(--line);min-height:48px;font:inherit;background:#fff;padding:0 12px}.switch{justify-content:space-between;align-items:center;gap:12px;display:flex}