:root{--bg:#fff7ed;--bg-2:#ffedd5;--ink:#44403c;--ink-soft:#78716c;--brand:#f97316;--brand-d:#ea580c;--brand-l:#fb923c;--green:#16a34a;--green-l:#22c55e;--card:#fff;--line:#fed7aa;--shadow:0 10px 30px #9a34121f;--radius:24px;font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%;margin:0}body{background:linear-gradient(160deg, var(--bg), var(--bg-2));color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}#root{padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));justify-content:center;display:flex}.app{width:100%;max-width:560px}.topbar{justify-content:space-between;align-items:center;min-height:28px;margin-bottom:20px;display:flex}.brand{color:var(--brand-d);align-items:center;gap:8px;font-size:18px;font-weight:800;display:flex}.tao-avatar{vertical-align:middle;line-height:0;display:inline-block}.tao-avatar svg{width:100%;height:100%;display:block}.dots{gap:8px;display:flex}.dot{background:var(--line);border-radius:50%;width:10px;height:10px;transition:all .3s}.dot.active{background:var(--brand);transform:scale(1.25)}.dot.done{background:var(--green-l)}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;animation:.4s rise}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}h1{color:var(--brand-d);margin:0 0 8px;font-size:26px}h2{margin:0 0 12px;font-size:22px}p{line-height:1.7}.muted{color:var(--ink-soft)}.bi{display:inline-block}.en-hint{color:var(--ink-soft);opacity:.85;letter-spacing:.2px;margin-top:2px;font-size:.62em;font-weight:400;line-height:1.25;display:block}.center{text-align:center}.btn{cursor:pointer;background:var(--brand);color:#fff;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:16px 28px;font-family:inherit;font-size:18px;font-weight:700;transition:transform .12s,box-shadow .2s,background .2s;display:inline-flex;box-shadow:0 6px 16px #f9731659}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.block{width:100%}.btn.green{background:var(--green);box-shadow:0 6px 16px #16a34a59}.btn.ghost{color:var(--brand-d);border:2px solid var(--line);box-shadow:none;background:#fff}.btn.lg{padding:18px 34px;font-size:20px}.btn-row{gap:12px;margin-top:20px;display:flex}.btn-row .btn{flex:1}.input{border:2px solid var(--line);border-radius:16px;outline:none;width:100%;padding:16px;font-family:inherit;font-size:18px;transition:border .2s}.input:focus{border-color:var(--brand-l)}textarea.input{resize:vertical;min-height:90px}.hero-emoji{text-align:center;margin-bottom:8px;font-size:72px}.scene-grid{gap:14px;display:grid}.scene-tile{background:var(--card);border:2px solid var(--line);cursor:pointer;text-align:left;border-radius:20px;align-items:center;gap:16px;padding:18px;font-family:inherit;transition:transform .12s,box-shadow .2s,border-color .2s;display:flex}.scene-tile:hover{box-shadow:var(--shadow);border-color:var(--brand-l);transform:translateY(-2px)}.scene-tile .scene-emoji{background:var(--bg);border-radius:16px;flex:none;place-items:center;width:64px;height:64px;font-size:40px;display:grid}.scene-tile .scene-name{color:var(--ink);font-size:20px;font-weight:800}.scene-tile .scene-sub{color:var(--ink-soft);font-size:14px}.badge-free{color:var(--green);background:#dcfce7;border-radius:999px;flex:none;margin-left:auto;padding:3px 10px;font-size:12px;font-weight:700}.illus{background:var(--bg);border-radius:20px;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:18px;padding:24px 12px;font-size:56px;display:flex}.illus span{animation:3s ease-in-out infinite bob}.illus span:nth-child(2){animation-delay:.3s}.illus span:nth-child(3){animation-delay:.6s}.illus span:nth-child(4){animation-delay:.9s}.illus span:nth-child(5){animation-delay:1.2s}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.prompt-bubble{border:2px solid var(--line);background:#fff7ed;border-radius:18px;margin-bottom:8px;padding:16px 18px;font-size:18px;line-height:1.6;position:relative}.hint-chips{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.chip{color:var(--brand-d);background:#ffedd5;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}.chip-active{background:var(--brand);color:#fff}.mic-wrap{flex-direction:column;align-items:center;gap:14px;margin:10px 0;display:flex}.mic-btn{background:var(--brand);color:#fff;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:50%;place-items:center;width:120px;height:120px;font-size:52px;transition:transform .15s;display:grid;box-shadow:0 10px 24px #f9731666}.mic-btn:disabled{opacity:.7;cursor:default}.mic-btn.busy{background:var(--brand-l);animation:1.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.listening-dots{gap:7px;margin-top:2px;display:inline-flex}.listening-dots span{background:var(--brand-l);border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite dot-bounce}.listening-dots span:nth-child(2){animation-delay:.18s}.listening-dots span:nth-child(3){animation-delay:.36s}@keyframes dot-bounce{0%,80%,to{opacity:.4;transform:scale(.5)}40%{opacity:1;transform:scale(1)}}.mic-btn:hover{transform:scale(1.04)}.mic-btn.recording{background:#ef4444;animation:1.3s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #ef444480}70%{box-shadow:0 0 0 22px #ef444400}to{box-shadow:0 0 #ef444400}}.mic-label{color:var(--ink-soft);font-weight:700}.transcript{background:var(--bg);border:2px dashed var(--line);border-radius:16px;width:100%;min-height:80px;padding:18px;font-size:22px;line-height:1.6}.transcript.empty{color:#cbb9a8}.transcript .interim{color:var(--ink-soft)}.learn-head{text-align:center;margin-bottom:8px}.char-progress{color:var(--ink-soft);font-size:14px;font-weight:700}.hanzi-stage{flex-direction:column;align-items:center;gap:8px;display:flex}.hanzi-target{border:3px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;border-radius:24px;width:240px;height:240px;position:relative}.hanzi-pinyin{color:var(--brand-d);letter-spacing:1px;font-size:22px;font-weight:700}.hanzi-fallback{border:3px solid var(--line);-webkit-user-select:none;user-select:none;background:#fff;border-radius:24px;place-items:center;width:240px;height:240px;font-size:140px;display:grid}.result-canvas{width:100%;box-shadow:var(--shadow);border-radius:20px;display:block}.tao{background:#f0fdf4;border:2px solid #bbf7d0;border-radius:18px;align-items:flex-start;gap:14px;margin-top:16px;padding:16px;display:flex}.tao .avatar{flex:none;font-size:40px}.tao .bubble{font-size:17px;line-height:1.6}.tao .name{color:var(--green);margin-bottom:2px;font-weight:800}.tao.loading .bubble:after{content:"正在思考…";color:var(--ink-soft)}.paywall{text-align:center}.price{color:var(--brand-d);margin:8px 0;font-size:40px;font-weight:900}.price small{color:var(--ink-soft);font-size:18px;font-weight:600}.feat{text-align:left;margin:18px 0;padding:0;list-style:none}.feat li{padding:8px 0;font-size:16px}.feat li:before{content:"✅ "}.fineprint{color:var(--ink-soft);margin-top:16px;font-size:13px}.share-again{border-top:1px dashed var(--line);margin-top:18px;padding-top:18px}.wechat-box{background:var(--bg);border:2px solid var(--line);border-radius:16px;flex-direction:column;align-items:center;gap:10px;max-width:100%;padding:14px 18px;display:inline-flex}.wechat-id{letter-spacing:.5px;color:var(--ink);white-space:nowrap;-webkit-user-select:all;user-select:all;font-size:18px;font-weight:800}.copy-btn{flex:none;padding:9px 26px;font-size:15px}.note{color:var(--ink-soft);border:1px dashed var(--line);background:#fffbeb;border-radius:12px;margin-top:14px;padding:10px 14px;font-size:14px}.scene-tile{touch-action:manipulation}@media (width<=360px){#root{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}.card{padding:22px 16px}h1{font-size:23px}}@media (hover:none){.btn:hover,.scene-tile:hover,.mic-btn:hover{transform:none}}