:root{--cream:#fff8ee;--raised:#fff;--line:#f1e2d3;--ink:#3a2a2f;--ink-muted:#7a6468;--berry:#d63b4d;--berry-soft:#ffe1e4;--mint:#17795f;--mint-soft:#d6f5e8;--oops:#b0560f;--oops-soft:#ffe8d2;--honey:#ffc94a;--sky:#cfe6ff;--rock:#7a6468;--shadow-pop:0 4px 0 0 #3a2a2f29;--r-sm:12px;--r-md:20px;--r-lg:28px;--font-display:"Baloo 2", "Quicksand", system-ui, sans-serif;--font-sans:"Quicksand", "Baloo 2", "Noto Sans SC", system-ui, sans-serif;--font-hanzi:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-fun:"ZCOOL KuaiLe", "Noto Sans SC", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--cream);min-height:100vh;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-weight:500}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}h1,h2,p{margin:0}.hanzi{font-family:var(--font-hanzi);font-weight:500}.muted{color:var(--ink-muted)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app-header{background:var(--raised);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 24px;display:flex;box-shadow:0 4px #3a2a2f14}.brand{align-items:center;gap:8px;display:flex}.seal{border-radius:var(--r-sm);background:var(--berry);color:#fff;width:40px;height:40px;font-family:var(--font-hanzi);place-items:center;font-size:22px;display:grid}.brand-name{font-family:var(--font-display);font-size:24px;font-weight:800}.nav{flex-wrap:wrap;flex:auto;justify-content:center;gap:4px;display:flex}.nav button{height:44px;color:var(--ink-muted);background:0 0;border:0;border-radius:999px;padding:0 16px;font-size:15px;font-weight:700}.nav button[aria-current=page]{background:var(--berry-soft);color:var(--ink)}.layout{flex-wrap:wrap;align-items:flex-start;gap:24px;max-width:1280px;margin:0 auto;padding:24px 24px 48px;display:flex}.main{flex-direction:column;flex:999 600px;gap:24px;min-width:0;display:flex}.aside{flex-direction:column;flex:280px;gap:16px;min-width:0;display:flex}@media (width<=900px){.aside--race{display:none}}@media (width<=600px){.layout{gap:16px;padding:16px 16px 32px}.app-header{padding:10px 16px}}.card{background:var(--raised);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}.btn{border-radius:var(--r-md);height:56px;box-shadow:var(--shadow-pop);border:0;justify-content:center;align-items:center;gap:8px;padding:0 24px;font-size:17px;font-weight:700;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:active:not(:disabled){box-shadow:none;transform:translateY(4px)}.btn-primary{background:var(--berry);color:#fff}.btn-mint{background:var(--mint);color:#fff}.btn-secondary{background:var(--raised);color:var(--ink);border:2px solid var(--ink-muted)}.btn-small{border-radius:999px;height:44px;padding:0 16px;font-size:15px}.icon-btn{background:var(--cream);width:44px;height:44px;color:var(--ink);box-shadow:var(--shadow-pop);border:0;border-radius:999px;flex-shrink:0;place-items:center;display:grid}.icon-btn:active{box-shadow:none;transform:translateY(4px)}.chip{background:var(--berry-soft);height:44px;color:var(--ink);border:0;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:700;display:inline-flex}.pill{border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:15px;font-weight:700;line-height:20px;display:inline-flex}.pill-honey{background:var(--honey)}.pill-sky{background:var(--sky)}.pill-mint{background:var(--mint-soft);color:var(--mint)}.pill-berry{background:var(--berry-soft)}.fun{font-family:var(--font-fun);color:var(--berry);font-size:40px;line-height:48px}.title-xl{font-family:var(--font-display);font-size:48px;font-weight:800;line-height:52px}.title{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:34px}.lead{color:var(--ink-muted);max-width:480px;font-size:17px;line-height:26px}@media (width<=600px){.title-xl{font-size:40px;line-height:44px}}.heard-box{border-radius:var(--r-md);background:var(--cream);border:2px dashed var(--line);flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:52px;padding:10px 14px;font-size:15px;display:flex}.heard-label{color:var(--ink-muted);font-size:13px;font-weight:700}.heard-text{flex-wrap:wrap;align-items:baseline;gap:4px 10px;display:flex}.heard-text .hanzi{font-size:24px;line-height:30px}.heard-pinyin{color:var(--ink-muted);letter-spacing:.01em;font-size:16px;font-weight:700}.loader{border-radius:var(--r-md);background:var(--sky);flex-direction:column;gap:8px;padding:14px 16px;font-size:15px;display:flex}.loader-row{justify-content:space-between;gap:8px;font-weight:700;display:flex}.loader-bar{background:var(--berry);transform-origin:0;border-radius:999px;height:12px;transition:transform .15s linear}.toggle{border-radius:var(--r-md);background:var(--sky);cursor:pointer;align-items:center;gap:12px;min-height:44px;padding:8px 14px;font-size:15px;line-height:20px;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--berry);flex-shrink:0}.round-icon.speaking{background:var(--berry);width:32px;height:32px;animation:1.2s ease-out infinite pulse}.notice{border-radius:var(--r-md);background:var(--oops-soft);padding:12px 16px;font-size:15px;line-height:22px}.hero{flex-wrap:wrap;display:flex;overflow:hidden}.hero-text{flex-direction:column;flex:340px;gap:16px;padding:40px;display:flex}.hero-art{background:var(--sky);flex:320px;min-height:280px;position:relative;overflow:hidden}@media (width<=600px){.hero-text{padding:24px}.hero-art{min-height:200px}}.row-wrap{flex-wrap:wrap;gap:12px;display:flex}.grid-auto{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.step{border-radius:var(--r-md);background:var(--sky);flex-direction:column;gap:8px;padding:20px;display:flex}.step-num{width:36px;height:36px;font-family:var(--font-display);background:#fff;border-radius:999px;place-items:center;font-size:18px;font-weight:800;display:grid}.stat{flex-direction:column;gap:2px;padding:20px;display:flex}.stat-label{color:var(--ink-muted);font-size:14px;font-weight:700}.stat-value{font-family:var(--font-display);font-size:32px;font-weight:800;line-height:38px}.side-card{flex-direction:column;gap:12px;padding:20px;display:flex}.side-card h2{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:28px}.runs{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.runs li{background:var(--cream);border-radius:16px;align-items:center;gap:10px;padding:8px 12px;font-size:15px;font-weight:700;display:flex}.runs li.is-now{background:var(--berry-soft)}.runs .rank{width:28px;font-family:var(--font-display);font-size:18px;font-weight:800}.runs .grow{flex:1}.race{overflow:hidden}.hud{flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 24px;display:flex}.hud .grow{flex:1}.score{align-items:baseline;gap:6px;display:flex}.score b{font-family:var(--font-display);font-size:36px;font-weight:800;line-height:40px}@media (width<=600px){.hud{padding:12px 16px}.hud h1{display:none}}.track-wrap{flex-direction:column;gap:6px;padding:0 24px 16px;display:flex}@media (width<=600px){.track-wrap{padding:0 16px 12px}}.track{height:36px;margin:0 18px;position:relative}.track-line{background:var(--line);border-radius:999px;height:8px;position:absolute;top:14px;left:0;right:0}.track-fill{background:var(--mint);border-radius:999px;height:8px;transition:width .4s;position:absolute;top:14px;left:0}.marker{border-radius:999px;place-items:center;font-size:11px;font-weight:700;display:grid;position:absolute;transform:translate(-50%)}.marker-ghost{border:2px dashed var(--ink-muted);background:#fff;width:28px;height:28px;top:4px}.marker-you{background:var(--berry);color:#fff;border:3px solid #fff;width:36px;height:36px;transition:left .4s cubic-bezier(.34,1.56,.64,1);top:0}.track-text{color:var(--ink-muted);font-size:14px;font-weight:600;line-height:20px}.scene{--h:420px;--koi-x:72px;--koi-w:96px;--koi-h:64px;--koi-b:118px;--rock-w:150px;--rock-h:170px;--rock-b:44px;--water:150px;--front:76px;--card-w:124px;--card-h:84px;--hanzi:52px;--jump:-170px;--jump2:-125px;height:var(--h);background:var(--cream);position:relative;overflow:hidden}@media (width<=600px){.scene{--h:340px;--koi-x:20px;--koi-w:78px;--koi-h:52px;--koi-b:100px;--rock-w:120px;--rock-h:140px;--rock-b:36px;--water:128px;--front:64px;--card-w:100px;--card-h:68px;--hanzi:40px;--jump:-150px;--jump2:-110px}}.layer{width:200%;animation:linear infinite slide;display:flex;position:absolute;left:0}.scene.is-stopped .layer{animation-play-state:paused}.half{flex-shrink:0;width:50%;height:100%;display:flex;position:relative;overflow:hidden}.crest{background:#fff;border-radius:999px;flex-shrink:0;width:26px;height:8px;margin-right:13px}.cloud{background:#fff;border-radius:999px;position:absolute}.hill{border-radius:50%;position:absolute}.water{background:var(--sky);position:absolute;bottom:0;left:0;right:0}.rock{bottom:var(--rock-b);width:var(--rock-w);height:var(--rock-h);background:var(--rock);border-radius:60px 68px 20px 20px;justify-content:center;align-items:flex-start;padding-top:18px;display:flex;position:absolute}.rock-card{width:var(--card-w);height:var(--card-h);border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-family:var(--font-hanzi);font-size:var(--hanzi);background:#fff;place-items:center;font-weight:500;display:grid}.rock-card.is-good{background:var(--mint-soft);box-shadow:none}.rock-card.is-bad{background:var(--oops-soft);box-shadow:none}.rock.approach{animation-name:approach;animation-timing-function:linear;animation-fill-mode:both}.rock.pass{animation:.65s linear both pass}.rock.stuck{left:calc(var(--koi-x) + var(--koi-w))}.rock.waiting{left:calc(100% - var(--rock-w) - 12px);animation:.28s cubic-bezier(.34,1.56,.64,1) both pop}.koi{left:var(--koi-x);bottom:var(--koi-b);width:var(--koi-w);height:var(--koi-h);position:absolute}.koi svg{width:100%;height:100%;display:block}.koi.bob{animation:1.2s ease-in-out infinite bob}.koi.jump{animation:.65s cubic-bezier(.34,1.3,.64,1) both jump}.koi.bonk{animation:.4s ease-out both bonk}.scene.shake{animation:.15s ease-in-out 2 shake}.countdown{pointer-events:none;justify-content:center;display:flex;position:absolute;top:60px;left:0;right:0}.countdown span{font-family:var(--font-display);color:var(--berry);font-size:140px;font-weight:800;line-height:140px;animation:1s ease-out 3 both count}.plus-one{left:calc(var(--koi-x) + var(--koi-w) + 20px);bottom:calc(var(--koi-b) + 130px);background:var(--honey);font-family:var(--font-display);border-radius:999px;padding:4px 14px;font-size:22px;font-weight:800;animation:.7s ease-out both floatUp;position:absolute}.toast{white-space:nowrap;background:var(--berry-soft);box-shadow:var(--shadow-pop);border-radius:999px;align-items:center;gap:8px;padding:8px 18px 8px 8px;font-size:16px;font-weight:700;animation:.3s cubic-bezier(.34,1.56,.64,1) both toast;display:flex;position:absolute;top:20px;left:50%}.toast-icon{background:var(--mint);color:#fff;border-radius:999px;place-items:center;width:30px;height:30px;display:grid}.bump{left:calc(var(--koi-x) + var(--koi-w) - 12px);bottom:calc(var(--koi-b) + 70px);background:var(--oops);color:#fff;border-radius:999px;place-items:center;width:40px;height:40px;display:grid;position:absolute}.panel{padding:20px 24px 24px}@media (width<=600px){.panel{padding:16px}}.panel-row{flex-wrap:wrap;align-items:center;gap:16px 24px;display:flex}.timer-col{flex-direction:column;flex:2 300px;gap:8px;display:flex}.timer-track{background:var(--line);border-radius:999px;height:12px;overflow:hidden}.timer-bar{background:var(--berry);transform-origin:0;border-radius:999px;height:12px;animation-name:timer;animation-timing-function:linear;animation-fill-mode:both}.mic-row{flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;display:flex}.dot{background:var(--berry);border-radius:999px;flex-shrink:0;width:10px;height:10px}.dot.pulse{animation:1.2s ease-out infinite pulse}.dot.off{background:var(--ink-muted)}.bars{align-items:center;gap:3px;height:20px;display:flex}.bars span{background:var(--berry);border-radius:999px;width:4px;height:20px;animation:.9s ease-in-out infinite wave}.bars span:nth-child(2),.bars span:nth-child(4){animation-delay:.15s}.bars span:nth-child(3){animation-delay:.3s}.heard{color:var(--ink-muted);font-size:14px;font-weight:600}.demo{border:2px dashed var(--line);border-radius:var(--r-md);flex-wrap:wrap;flex:240px;align-items:center;gap:8px;padding:8px;display:flex}.demo .label{color:var(--ink-muted);padding:0 4px 0 8px;font-size:13px;font-weight:700}.feedback{border-radius:var(--r-md);flex-wrap:wrap;align-items:center;gap:16px;padding:16px 20px;display:flex}.feedback.good{background:var(--mint-soft)}.feedback.bad{background:var(--oops-soft);flex-direction:column;align-items:flex-start;gap:8px}.feedback .big{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:34px}.good .big{color:var(--mint)}.bad .big{color:var(--oops)}.round-icon{color:#fff;border-radius:999px;flex-shrink:0;place-items:center;width:48px;height:48px;display:grid}.pop{animation:.28s cubic-bezier(.34,1.56,.64,1) both pop}.wobble{animation:.3s ease-in-out 2 wobble}.results{flex-direction:column;gap:24px;display:flex;position:relative}.confetti{pointer-events:none;height:420px;position:absolute;inset:0 0 auto;overflow:hidden}.confetti span{background:var(--honey);animation:1.8s ease-in both fall;position:absolute;top:0}.big-score{font-family:var(--font-display);font-size:80px;font-weight:800;line-height:84px}@media (width<=600px){.big-score{font-size:64px;line-height:68px}}@keyframes slide{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(-3deg)}}@keyframes approach{0%{left:calc(100% - var(--rock-w) - 12px)}to{left:calc(var(--koi-x) + var(--koi-w))}}@keyframes pass{0%{left:calc(var(--koi-x) + var(--koi-w))}to{left:calc(-1 * var(--rock-w) - 40px)}}@keyframes timer{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes jump{0%{transform:translateY(0)rotate(0)}40%{transform:translateY(var(--jump)) rotate(-18deg)}70%{transform:translateY(var(--jump2)) rotate(10deg)}to{transform:translateY(0)rotate(0)}}@keyframes bonk{0%{transform:translate(0)rotate(0)}30%{transform:translate(-30px)rotate(-24deg)}to{opacity:.75;transform:translate(-22px)rotate(-14deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes count{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.1)}60%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-24px)}60%{opacity:1;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%)}}@keyframes floatUp{0%{opacity:0;transform:translateY(0)}20%{opacity:1}to{opacity:0;transform:translateY(-64px)}}@keyframes pop{0%{opacity:0;transform:translateY(24px)scale(.96)}60%{opacity:1;transform:translateY(-4px)scale(1.01)}to{opacity:1;transform:none}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}@keyframes pulse{0%{box-shadow:0 0 #d63b4d73}to{box-shadow:0 0 0 10px #d63b4d00}}@keyframes wave{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes fall{0%{opacity:0;transform:translateY(-40px)rotate(0)}10%{opacity:1}to{opacity:0;transform:translateY(420px)rotate(260deg)}}@media (prefers-reduced-motion:reduce){.layer,.koi.bob,.scene.shake,.bars span,.dot.pulse,.confetti span,.plus-one,.wobble{animation:none}.koi.jump,.rock.pass,.toast,.countdown span,.pop,.koi.bonk{animation-duration:1ms}}