.app-frame{min-height:100dvh;display:flex;justify-content:center;background:#f0e7dc}.app-screen{width:100%;max-width:480px;height:100dvh;min-height:100dvh;background:var(--c-bg);position:relative;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px #26170b14}@media(min-width:520px){.app-frame{padding:24px 0}.app-screen{border:10px solid #2A2118;border-radius:46px;overflow:hidden;min-height:min(880px,calc(100dvh - 48px));height:min(880px,calc(100dvh - 48px))}}.page-enter-active,.page-leave-active{transition:opacity var(--t-enter) var(--ease)}.page-enter-from,.page-leave-to{opacity:0}.app-frame.admin-frame{padding:0;background:#f4f6f8}.app-screen.admin-screen{max-width:none;min-height:100dvh;height:100dvh;box-shadow:none;background:#f4f6f8}@media(min-width:520px){.app-screen.admin-screen{border:0;border-radius:0;min-height:100dvh;height:100dvh}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}button,input,select,textarea{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%}a{color:inherit}:root{--c-primary: #FF8A3D;--c-primary-press:#E8701F;--c-primary-deep: #C2410C;--c-primary-soft: #FFEEE0;--c-mom: #0F766E;--c-mom-soft: #E4F3F1;--c-ok: #15803D;--c-ok-soft: #E7F5EC;--c-warn: #B45309;--c-warn-soft: #FDF3E3;--c-danger: #B91C1C;--c-danger-soft: #FDECEC;--c-bg: #FFF8F0;--c-surface: #FFFFFF;--c-surface-2: #FBF3EA;--c-line: #EADDCE;--c-line-strong: #D6C3AE;--c-ink: #26170B;--c-ink-2: #6B5544;--c-ink-3: #8B7461;--c-on-primary: #2B1403;--fs-word-en: 48px;--fs-word-en-sm: 34px;--fs-phonetic: 22px;--fs-zh: 26px;--fs-zh-lg: 30px;--fs-btn: 22px;--fs-mom: 17px;--fs-mom-sm: 14px;--fs-label: 13px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--r-sm: 10px;--r-md: 16px;--r-lg: 24px;--r-xl: 32px;--r-full: 999px;--size-record: 116px;--size-mic-mom: 76px;--size-tap-min: 48px;--t-press: .1s;--t-enter: .24s;--ease: cubic-bezier(.32, .72, 0, 1);--shadow-1: 0 1px 2px rgba(38,23,11,.06), 0 4px 12px rgba(38,23,11,.06);--shadow-2: 0 2px 6px rgba(38,23,11,.08), 0 12px 28px rgba(38,23,11,.1);--shadow-press: 0 1px 3px rgba(38,23,11,.14);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Noto Sans SC,Microsoft YaHei,Helvetica Neue,Arial,sans-serif}@media(prefers-reduced-motion:reduce){:root{--t-press: 1ms;--t-enter: 1ms}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{background:#f0e7dc;color:var(--c-ink);min-height:100dvh}.stage{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:20px 16px 56px}.proto-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;width:100%;max-width:413px;font-size:var(--fs-mom-sm);color:#5c4a3a}.proto-bar a{color:#5c4a3a;text-decoration:none;border-bottom:1px solid #C3B0A0}.proto-bar a:hover{color:#26170b;border-color:#26170b}.proto-bar .sp{flex:1}.proto-tag{padding:2px 8px;border-radius:var(--r-full);background:#e2d5c6;color:#4a3a2c;font-size:12px;white-space:nowrap}.proto-tag.mvp{background:var(--c-primary-soft);color:#8a3d06}.proto-tag.v1{background:var(--c-mom-soft);color:#0b4f49}.phone{width:393px;height:852px;flex:none;background:var(--c-bg);border:10px solid #2A2118;border-radius:46px;box-shadow:0 24px 60px #26170b47;overflow:hidden;position:relative}.statusbar{height:30px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;font-weight:600;color:var(--c-ink-2)}@media(max-width:480px){.stage{padding:0;gap:0}.proto-bar{order:2;padding:12px 16px 24px;max-width:none}.phone{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}}.screen{display:flex;flex-direction:column;height:100%}.screen-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.screen-body>*{flex-shrink:0}.screen-body.pad{padding:var(--sp-5) var(--sp-5) var(--sp-8)}.screen-body.center{display:flex;flex-direction:column;justify-content:center;justify-content:safe center}.appbar .icon-btn{width:44px;height:44px}.icon-btn{display:grid;place-items:center;border-radius:var(--r-full);width:var(--size-tap-min);height:var(--size-tap-min);font-size:20px;color:var(--c-ink-2);transition:background var(--t-press) var(--ease)}.t-word-en{font-size:var(--fs-word-en);font-weight:800;letter-spacing:-.5px;line-height:1.1}.t-word-en-s{font-size:var(--fs-word-en-sm);font-weight:800;line-height:1.15}.t-phonetic{font-size:var(--fs-phonetic);color:var(--c-ink-2);font-weight:600;letter-spacing:.3px}.t-zh{font-size:var(--fs-zh);font-weight:700}.t-zh-lg{font-size:var(--fs-zh-lg);font-weight:800;line-height:1.3}.t-mom{font-size:var(--fs-mom);color:var(--c-ink-2);line-height:1.6}.t-mom-sm{font-size:var(--fs-mom-sm);color:var(--c-ink-3);line-height:1.55}.t-label{font-size:var(--fs-label);font-weight:700;letter-spacing:.5px;color:var(--c-ink-3);text-transform:uppercase}.center-text{text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:56px;padding:0 var(--sp-6);border-radius:var(--r-full);font-size:var(--fs-btn);font-weight:700;text-decoration:none;transition:transform var(--t-press) var(--ease),background var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--c-primary);color:var(--c-on-primary);box-shadow:var(--shadow-1)}.btn-primary:active{background:var(--c-primary-press);box-shadow:var(--shadow-press)}.btn-mom{background:var(--c-mom);color:#fff}.btn-mom:active{background:#0b5d57}.btn-ghost{background:var(--c-surface);color:var(--c-ink);border:2px solid var(--c-line-strong)}.btn-ghost:active{background:var(--c-surface-2)}.btn-quiet{color:var(--c-ink-2);font-size:var(--fs-mom);font-weight:600;min-height:var(--size-tap-min);text-decoration:none}.btn-block{display:flex;width:100%}.btn-lg{min-height:68px;font-size:24px}.btn:disabled,.btn[aria-disabled=true]{background:var(--c-surface-2);color:var(--c-ink-3);border-color:var(--c-line);box-shadow:none;cursor:not-allowed;transform:none}.record{position:relative;display:grid;place-items:center;width:var(--size-record);height:var(--size-record);border-radius:var(--r-full);background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 6px 0 var(--c-primary-press),var(--shadow-2);transition:transform var(--t-press) var(--ease),background var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease)}.record .ico{font-size:44px;line-height:1}.record:active{transform:scale(1.1);background:var(--c-primary-press);box-shadow:0 3px #c25c13,var(--shadow-press)}.record.is-recording{background:var(--c-primary-press);box-shadow:0 3px #c25c13,var(--shadow-2)}.record.is-recording:after{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:var(--r-full);border:4px solid var(--c-primary);opacity:.55;animation:ring 1.4s var(--ease) infinite}@keyframes ring{0%{transform:scale(.92);opacity:.6}to{transform:scale(1.22);opacity:0}}.record-mom{width:var(--size-mic-mom);height:var(--size-mic-mom)}.record-mom .ico{font-size:30px}.wave{display:flex;align-items:center;gap:4px;height:40px}.wave i{width:6px;border-radius:var(--r-full);background:var(--c-on-primary);height:12px;animation:bar .9s var(--ease) infinite}.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}@keyframes bar{0%,to{height:10px}50%{height:34px}}.card{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:var(--sp-5)}.card-flat{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-4)}.stack,.stack-2,.stack-3,.stack-4,.stack-5,.stack-6,.stack-8{display:flex;flex-direction:column}.stack-2{gap:var(--sp-2)}.stack-3{gap:var(--sp-3)}.stack-4{gap:var(--sp-4)}.stack-5{gap:var(--sp-5)}.stack-6{gap:var(--sp-6)}.stack-8{gap:var(--sp-8)}.row{display:flex;align-items:center;gap:var(--sp-3)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.grow{flex:1;min-width:0}.photo{position:relative;aspect-ratio:1;width:100%;display:grid;place-items:center;border-radius:var(--r-lg);background:linear-gradient(160deg,#fff3e6,#ffe3cb 60%,#f7d3b4);border:1px solid var(--c-line);overflow:hidden}.photo .emoji{font-size:96px;line-height:1;filter:saturate(1.05)}.photo:after{content:"实物照片位";position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#8a6a4c;background:#ffffffd1;padding:3px 7px;border-radius:var(--r-full)}.photo.sm{width:88px;height:88px;aspect-ratio:auto;border-radius:var(--r-md)}.photo.sm .emoji{font-size:44px}.photo.sm:after{display:none}.photo.md{width:132px;height:132px;aspect-ratio:auto}.photo.md .emoji{font-size:64px}.photo.md:after{display:none}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);font-size:var(--fs-mom-sm);font-weight:700;background:var(--c-surface-2);color:var(--c-ink-2)}.chip.ok{background:var(--c-ok-soft);color:#0e5c2c}.chip.warn{background:var(--c-warn-soft);color:#8a4108}.chip.mom{background:var(--c-mom-soft);color:#0b4f49}.chip.kid{background:var(--c-primary-soft);color:#8a3d06}.banner{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-mom);line-height:1.55}.banner .ico{font-size:20px;line-height:1.3;flex:none}.banner.warn{background:var(--c-warn-soft);color:#7a3a07;border:1px solid #F0D9B4}.banner.danger{background:var(--c-danger-soft);color:#8f1616;border:1px solid #F3C9C9}.banner.info{background:var(--c-mom-soft);color:#0b4f49;border:1px solid #C4E4E0}.banner.ok{background:var(--c-ok-soft);color:#0e5c2c;border:1px solid #C6E6D2}.progress{height:10px;border-radius:var(--r-full);background:var(--c-line);overflow:hidden}.progress>i{display:block;height:100%;border-radius:var(--r-full);background:var(--c-primary)}.progress.mom>i{background:var(--c-mom)}.playbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface-2);border:1px solid var(--c-line)}.playbar .play{width:52px;height:52px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;font-size:22px;background:var(--c-surface);box-shadow:var(--shadow-1);color:var(--c-ink);transition:transform var(--t-press) var(--ease)}.playbar .play:active{transform:scale(.94)}.playbar.kid .play{background:var(--c-primary);color:var(--c-on-primary)}.playbar .track{flex:1;height:8px;border-radius:var(--r-full);background:var(--c-line);overflow:hidden}.playbar .track>i{display:block;height:100%;background:var(--c-ink-3);border-radius:var(--r-full)}.playbar.kid .track>i{background:var(--c-primary)}.list{background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}.list-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:var(--sp-4);min-height:60px;border-bottom:1px solid var(--c-line);font-size:var(--fs-mom);color:var(--c-ink)}.list-item:last-child{border-bottom:0}.list-item .sub{font-size:var(--fs-mom-sm);color:var(--c-ink-3);margin-top:2px}.list-item .val{color:var(--c-ink-2);font-size:var(--fs-mom)}.list-item.danger{color:var(--c-danger)}.switch{width:52px;height:32px;border-radius:var(--r-full);background:var(--c-line-strong);position:relative;flex:none;transition:background var(--t-enter) var(--ease)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:var(--r-full);background:#fff;box-shadow:var(--shadow-1);transition:transform var(--t-enter) var(--ease)}.switch[aria-checked=true]{background:var(--c-mom)}.switch[aria-checked=true]:after{transform:translate(20px)}.seg{display:flex;gap:4px;padding:4px;background:var(--c-surface-2);border-radius:var(--r-full)}.seg button{flex:1;min-height:40px;border-radius:var(--r-full);font-size:var(--fs-mom);font-weight:700;color:var(--c-ink-2);transition:background var(--t-press) var(--ease)}.seg button[aria-pressed=true]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-1)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.divider{height:1px;background:var(--c-line)}.note{font-size:12px;line-height:1.5;color:#8a6a4c;background:#fff6e9;border:1px dashed #E3C9A6;border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}.page{display:flex;flex-direction:column;height:100%}.page-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.page-body>*{flex-shrink:0}.page-body.pad{padding:var(--sp-5) var(--sp-5) var(--sp-8)}.page-body.center{display:flex;flex-direction:column;justify-content:center;justify-content:safe center}.appbar{flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);min-height:56px}.appbar h1{flex:1;margin:0;font-size:20px;font-weight:700;text-align:center}.icon-btn{display:grid;place-items:center;border-radius:var(--r-full);width:var(--size-tap-min);height:var(--size-tap-min);font-size:20px;color:var(--c-ink-2);transition:background var(--t-press) var(--ease);text-decoration:none}.icon-btn:active{background:var(--c-surface-2)}.tabbar{flex:none;display:flex;border-top:1px solid var(--c-line);background:var(--c-surface);padding-bottom:env(safe-area-inset-bottom)}.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-2) 0 var(--sp-3);text-decoration:none;color:var(--c-ink-3);font-size:var(--fs-label);font-weight:600}.tabbar a .ico{font-size:22px;line-height:1}.tabbar a[aria-current=page]{color:var(--c-primary-deep)}.ask-hint{text-align:center;color:var(--c-ink-2);font-size:var(--fs-zh);font-weight:600}.heard{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);background:var(--c-mom-soft);color:#0b4f49;font-size:var(--fs-mom);font-weight:700;align-self:center}.heard button{font-size:var(--fs-mom-sm);color:#0b4f49;text-decoration:underline;font-weight:700}.result-photo{width:190px;margin:0 auto}.word-block{text-align:center}.word-block .t-phonetic{margin-top:6px}.word-block .t-zh{margin-top:var(--sp-2);color:var(--c-ink-2)}.play-row{display:flex;gap:var(--sp-3);justify-content:center}.play-big{display:inline-flex;align-items:center;gap:var(--sp-2);height:64px;padding:0 var(--sp-6);border-radius:var(--r-full);background:var(--c-primary);color:var(--c-on-primary);font-size:21px;font-weight:800;box-shadow:0 5px 0 var(--c-primary-press);transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease);border:0;cursor:pointer}.play-big:active{transform:translateY(3px) scale(.98);box-shadow:0 2px 0 var(--c-primary-press)}.play-slow{height:64px;width:64px;border-radius:var(--r-full);background:var(--c-surface);border:2px solid var(--c-line-strong);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--c-ink-2);cursor:pointer}.example{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4)}.example .en{font-size:24px;font-weight:700}.example .zh{font-size:var(--fs-mom);color:var(--c-ink-2);margin-top:4px}.footer-act{flex:none;padding:var(--sp-3) var(--sp-5) var(--sp-6);background:linear-gradient(to top,var(--c-bg) 72%,transparent)}.suggest{display:flex;gap:var(--sp-3);overflow-x:auto;padding-bottom:4px}.suggest button{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line);min-width:104px;cursor:pointer}.suggest .t-word-en-s{font-size:24px}.textinput{display:flex;gap:var(--sp-2)}.textinput input{flex:1;min-height:56px;padding:0 var(--sp-4);font-size:var(--fs-mom);border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface)}.choice{display:flex;flex-direction:column;gap:var(--sp-3)}.choice button{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);background:var(--c-surface);border:2px solid var(--c-line-strong);border-radius:var(--r-lg);text-align:left;cursor:pointer}.choice button:active{border-color:var(--c-primary);background:var(--c-primary-soft)}.target{display:flex;align-items:center;gap:var(--sp-4)}.target .t-word-en-s{line-height:1}.target .t-phonetic{font-size:20px;margin-top:4px}.play-std{min-width:72px;min-height:56px;padding:6px 10px;flex:none;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:20px;background:var(--c-primary);color:var(--c-on-primary);transition:transform var(--t-press) var(--ease);cursor:pointer;border:0}.play-std-label{font-size:13px;font-weight:800;white-space:nowrap}.play-std:active{transform:scale(.94)}.rec-zone{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}.compare-ready{min-height:0}.compare-rec-zone{flex:none;position:relative;z-index:0}.rec-zone.band-a{align-items:flex-end}.rec-zone.band-a .rec-caption{text-align:right}.rec-caption{font-size:var(--fs-zh);font-weight:700;color:var(--c-ink-2);text-align:center}.timer{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}.track-pair{display:flex;flex-direction:column;gap:var(--sp-3)}.track-label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-mom);font-weight:700;margin-bottom:var(--sp-2)}.mark-row{display:flex;gap:var(--sp-3)}.mark{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:88px;justify-content:center;border-radius:var(--r-lg);border:2px solid var(--c-line-strong);background:var(--c-surface);font-size:19px;font-weight:800;color:var(--c-ink);cursor:pointer;transition:transform var(--t-press) var(--ease),border-color var(--t-press) var(--ease),background var(--t-press) var(--ease)}.mark .ico{font-size:28px;line-height:1}.mark:active{transform:scale(.97)}.mark.got:active,.mark.got[aria-pressed=true]{border-color:var(--c-ok);background:var(--c-ok-soft);color:#0e5c2c}.mark.keep:active,.mark.keep[aria-pressed=true]{border-color:var(--c-warn);background:var(--c-warn-soft);color:#8a4108}@media(max-height:700px){.compare-ready{gap:var(--sp-4);padding-top:var(--sp-3);padding-bottom:var(--sp-4)}.compare-ready .target{padding:var(--sp-3)}.compare-ready>.t-mom{margin:0;line-height:1.45}.compare-rec-zone{gap:var(--sp-2)}.compare-rec-zone .record{width:88px;height:88px}.compare-rec-zone .rec-caption{font-size:22px}.compare-note{margin:0}}.greet{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5) var(--sp-4)}.avatar{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;font-size:24px;background:var(--c-primary-soft);flex:none}.today{display:flex;flex-direction:column;gap:var(--sp-3)}.today .row-between{align-items:baseline}.streak{display:flex;gap:6px}.streak i{width:30px;height:30px;border-radius:var(--r-full);display:grid;place-items:center;font-size:13px;font-weight:700;font-style:normal;background:var(--c-surface-2);color:var(--c-ink-3)}.streak i.on{background:var(--c-primary);color:var(--c-on-primary)}.streak i.freeze{background:var(--c-mom-soft);color:#0b4f49}.hero{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--sp-5);border-radius:var(--r-xl);background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 6px 0 var(--c-primary-press),var(--shadow-2);transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease);text-decoration:none}.hero:active{transform:translateY(3px);box-shadow:0 3px 0 var(--c-primary-press),var(--shadow-press)}.hero .ico{width:72px;height:72px;border-radius:var(--r-full);background:#ffffff6b;display:grid;place-items:center;font-size:36px;flex:none}.hero .t{display:block;font-size:30px;font-weight:800;line-height:1.2}.hero .s{display:block;font-size:var(--fs-mom);font-weight:600;opacity:.78;margin-top:4px}.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}.tile{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--shadow-1);text-decoration:none;color:var(--c-ink);min-height:108px;justify-content:center;position:relative}.tile .ico{font-size:30px;line-height:1}.tile .t{font-size:21px;font-weight:800}.tile .s{font-size:var(--fs-mom-sm);color:var(--c-ink-3)}.tile.locked{background:var(--c-surface-2);box-shadow:none;color:var(--c-ink-3);cursor:not-allowed}.tile.locked .ico{filter:grayscale(1);opacity:.5}.stage-tag{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;padding:2px 7px;border-radius:var(--r-full);background:var(--c-mom-soft);color:#0b4f49}.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}.scene{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-3) var(--sp-2);border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--shadow-1);text-decoration:none;color:var(--c-ink);position:relative}.scene .ico{font-size:30px;line-height:1}.scene .t{font-size:var(--fs-mom);font-weight:700}.scene.locked{background:var(--c-surface-2);box-shadow:none;color:var(--c-ink-3);cursor:not-allowed}.scene.locked .ico{filter:grayscale(1);opacity:.5}.scene .stage-tag{position:absolute;top:6px;right:6px;font-size:10px;font-weight:800;padding:1px 5px;border-radius:var(--r-full);background:var(--c-mom-soft);color:#0b4f49}.dots{display:flex;gap:8px;justify-content:center}.dots i{width:8px;height:8px;border-radius:var(--r-full);background:var(--c-line-strong);transition:all var(--t-enter) var(--ease)}.dots i.on{width:26px;background:var(--c-primary)}.hero-ico{font-size:84px;text-align:center;line-height:1}.picker{display:flex;gap:var(--sp-3)}.picker select{flex:1;min-height:64px;padding:0 var(--sp-4);font-size:21px;font-weight:700;border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center}.derived{text-align:center;padding:var(--sp-4);border-radius:var(--r-md);background:var(--c-primary-soft)}.derived b{font-size:21px}.perm-list{display:flex;flex-direction:column;gap:var(--sp-3)}.perm-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-mom);line-height:1.55;color:var(--c-ink-2)}.perm-list li .ico{font-size:20px;flex:none}.coach{position:relative;align-self:center;max-width:268px;background:var(--c-mom);color:#fff;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-mom);font-weight:700;line-height:1.5;animation:enter var(--t-enter) var(--ease) both}.coach:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:var(--c-mom);border-bottom:0}.demo-word{text-align:center}.group{display:flex;flex-direction:column;gap:var(--sp-3)}.group>.t-label{padding-left:var(--sp-2)}.slider-row{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}.slider-row input[type=range]{width:100%;accent-color:var(--c-mom);height:32px}.ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--c-ink-3)}.cap{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--c-warn);background:var(--c-warn-soft);padding:2px 8px;border-radius:var(--r-full)}.audio-screen{background:var(--c-surface)}.audio-word{text-align:center;padding:var(--sp-8) 0}.audio-word .en{font-size:56px;font-weight:800;letter-spacing:-1px;line-height:1.05}.audio-word .ipa{font-size:26px;font-weight:600;color:var(--c-ink-2);margin-top:var(--sp-3)}.audio-word .zh{font-size:var(--fs-zh);color:var(--c-ink-2);margin-top:var(--sp-4)}.big-keys{display:flex;gap:var(--sp-5);justify-content:center}.bigkey{width:132px;height:132px;border-radius:var(--r-full);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-mom);font-weight:800;cursor:pointer;transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease)}.bigkey .ico{font-size:46px;line-height:1}.bigkey.play{background:var(--c-mom);color:#fff;box-shadow:0 6px #0a5b55}.bigkey.play:active{transform:translateY(3px);box-shadow:0 3px #0a5b55}.bigkey.rec{background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 6px 0 var(--c-primary-press)}.bigkey.rec:active{transform:translateY(3px);box-shadow:0 3px 0 var(--c-primary-press)}.stepper{display:flex;align-items:center;justify-content:space-between}.stepper button{display:flex;align-items:center;gap:6px;font-size:var(--fs-mom);font-weight:700;color:var(--c-ink-2);min-height:var(--size-tap-min);padding:0 var(--sp-3);cursor:pointer}.lockscreen{background:#14100c;color:#f5ede4;border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.lk-row{display:flex;align-items:center;gap:var(--sp-4)}.lk-btn{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;background:#ffffff24;font-size:18px;color:#f5ede4}.lk-title{font-size:22px;font-weight:800}.lk-sub{font-size:var(--fs-mom-sm);color:#b7a996}.state-screen{height:auto;flex:1;min-height:0}.big-ico{font-size:76px;text-align:center;line-height:1}.sticky-note{position:sticky;top:0;z-index:5}.guide{display:flex;flex-direction:column;gap:var(--sp-2)}.guide li{display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-mom);color:var(--c-ink-2)}.guide li .n{width:24px;height:24px;border-radius:var(--r-full);background:var(--c-ink-2);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}.addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-sm);padding:var(--sp-3);word-break:break-all}.meter{height:12px;border-radius:var(--r-full);background:var(--c-line);overflow:hidden}.meter>i{display:block;height:100%;border-radius:var(--r-full);background:var(--c-warn)}.mode{display:flex;gap:var(--sp-4);align-items:center;width:100%;padding:var(--sp-5);border-radius:var(--r-xl);background:var(--c-surface);box-shadow:var(--shadow-1);text-decoration:none;color:var(--c-ink);transition:transform var(--t-press) var(--ease)}.mode:active{transform:scale(.985)}.mode .ico{width:64px;height:64px;border-radius:var(--r-lg);display:grid;place-items:center;font-size:32px;flex:none}.mode .t{display:block;font-size:24px;font-weight:800}.mode .s{display:block;font-size:var(--fs-mom);color:var(--c-ink-2);margin-top:4px;line-height:1.5}.mode .m{display:block;font-size:var(--fs-mom-sm);color:var(--c-ink-3);margin-top:var(--sp-2)}.mode.s1 .ico{background:#e8f1ff}.mode.s2 .ico{background:var(--c-primary-soft)}.mode.s3 .ico{background:var(--c-mom-soft)}.steps{display:flex;gap:6px;padding:0 var(--sp-5) var(--sp-4)}.steps i{flex:1;height:6px;border-radius:var(--r-full);background:var(--c-line)}.steps i.done{background:var(--c-primary)}.steps i.now{background:var(--c-primary);opacity:.55}.flow{display:flex;flex-direction:column;gap:var(--sp-2)}.flow-step{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-mom);color:var(--c-ink-3)}.flow-step .n{width:26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--c-line);color:var(--c-ink-3);flex:none}.flow-step.done{color:var(--c-ink-2)}.flow-step.done .n{background:var(--c-ok);color:#fff}.flow-step.now{background:var(--c-primary-soft);color:#8a3d06;font-weight:700}.flow-step.now .n{background:var(--c-primary);color:var(--c-on-primary)}.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}.quiz-opt{padding:var(--sp-3);border-radius:var(--r-lg);background:var(--c-surface);border:3px solid var(--c-line);box-shadow:var(--shadow-1);cursor:pointer}.quiz-opt:active{border-color:var(--c-primary)}.quiz-opt .photo{border:0}.queue{display:flex;flex-direction:column;gap:var(--sp-2)}.queue-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--shadow-1)}.bar{width:64px;height:8px;border-radius:var(--r-full);background:var(--c-line);overflow:hidden;flex:none}.bar>i{display:block;height:100%;border-radius:var(--r-full);background:var(--c-primary)}.timetabs{display:flex;gap:var(--sp-2);overflow-x:auto;padding:0 var(--sp-5) var(--sp-4)}.timetabs button{flex:none;display:flex;align-items:center;gap:6px;min-height:var(--size-tap-min);padding:0 var(--sp-4);border-radius:var(--r-full);background:var(--c-surface);border:2px solid var(--c-line);font-size:var(--fs-mom);font-weight:700;color:var(--c-ink-2);cursor:pointer}.timetabs button[aria-pressed=true]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}.sent-card{display:flex;flex-direction:column;gap:var(--sp-3)}.sent-card .en{font-size:34px;font-weight:800;line-height:1.2}.sent-card .ipa{font-size:var(--fs-phonetic);color:var(--c-ink-2);font-weight:600}.sent-card .zh{font-size:var(--fs-zh);color:var(--c-ink-2)}.sent-acts{display:flex;gap:var(--sp-3)}.sent-acts .btn{flex:1;min-height:60px;font-size:19px}.ctx{font-size:var(--fs-mom-sm);color:var(--c-ink-3);background:var(--c-surface-2);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal span{aspect-ratio:1;border-radius:var(--r-sm);display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--c-surface-2);color:var(--c-ink-3)}.cal span.on{background:var(--c-primary);color:var(--c-on-primary)}.cal span.freeze{background:var(--c-mom-soft);color:#0b4f49}.cal .hd{background:none;color:var(--c-ink-3);font-size:11px}.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}.medal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-4) var(--sp-2);border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--shadow-1)}.medal .ico{font-size:34px;line-height:1}.medal .t{font-size:12px;font-weight:700;text-align:center;color:var(--c-ink-2)}.medal.locked{background:var(--c-surface-2);box-shadow:none}.medal.locked .ico{filter:grayscale(1);opacity:.35}.rec-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-line)}.rec-row:last-child{border-bottom:0}.rec-row .play{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--c-primary);color:var(--c-on-primary);font-size:18px;flex:none;cursor:pointer;border:0}.newword{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.newword span{padding:6px 12px;border-radius:var(--r-full);background:var(--c-primary-soft);color:#8a3d06;font-size:20px;font-weight:800}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:#26170b6b;display:flex;align-items:flex-end;justify-content:center;animation:fade var(--t-enter) var(--ease)}.overlay.center{align-items:center;padding:var(--sp-5)}.overlay[hidden]{display:none}.sheet{width:100%;background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-6) var(--sp-5) var(--sp-8);animation:rise var(--t-enter) var(--ease)}.dialog{width:100%;background:var(--c-surface);border-radius:var(--r-xl);padding:var(--sp-6) var(--sp-5);animation:pop var(--t-enter) var(--ease)}.praise{text-align:center}.praise .face{font-size:84px;line-height:1;animation:bounce .6s var(--ease)}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{transform:translateY(18px)}}@keyframes pop{0%{transform:scale(.94);opacity:.4}}@keyframes bounce{0%{transform:scale(.5)}60%{transform:scale(1.12)}to{transform:scale(1)}}.enter{animation:enter var(--t-enter) var(--ease) both}@keyframes enter{0%{opacity:0;transform:translateY(10px)}}.device-banner{flex:none}.bigkey,.record,.play-big{user-select:none;-webkit-user-select:none}.record{touch-action:none;-webkit-touch-callout:none}