:root{--paper: #F7F2E7;--card: #FBF7EE;--card-elevated: #FDFBF5;--ink: #2C2620;--ink-2: #6B6257;--ink-3: #9A8F7E;--ink-4: #B0A896;--line: #E9E1D0;--line-2: #D8CDBA;--moss: #2F5D46;--moss-pressed: #254A38;--moss-tint: #EEF4EC;--moss-tint-line: #CDE0D2;--moss-on: #EAF2EC;--moss-on-2: #A8C4B2;--persimmon: #C25B33;--persimmon-tint: #F6ECE5;--persimmon-tint-line: #E4C4B2;--persimmon-deep: #A04E2C;--amber: #C9822E;--amber-tint: #F8ECD6;--amber-tint-line: #D9B57C;--amber-deep: #8A5A1E;--error: #B23A2C;--error-tint: #F8E9E5;--info-blue: #3A5470;--info-tint: #EBF0F4;--info-line: #C9D4DE;--plum: #5F3D5E;--plum-tint: #F2EBF1;--plum-line: #D9CBD8;--disabled-bg: #D8D2C4;--disabled-fg: #A39B8B;--serif-en: "Source Serif 4", Georgia, "Times New Roman", serif;--serif-zh: "Noto Serif SC", "Songti SC", serif;--sans: "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;--shadow-rest: 0 1px 3px rgba(60, 45, 20, .06);--shadow-raised: 0 4px 14px rgba(47, 93, 70, .3);--shadow-sheet: 0 -8px 30px rgba(46, 38, 28, .25);--shadow-toast: 0 8px 24px rgba(44, 38, 32, .3)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body{margin:0;padding:0}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.7;min-height:100dvh}#root{max-width:560px;margin:0 auto;min-height:100dvh;position:relative}button{font-family:var(--sans)}.screen{padding:max(14px,env(safe-area-inset-top)) 20px 108px}.h1{font-family:var(--serif-zh);font-size:26px;font-weight:700;color:var(--ink)}.micro{font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:600}.caption{font-size:12px;color:var(--ink-3)}.serif-en{font-family:var(--serif-en)}.serif-zh{font-family:var(--serif-zh)}.card{background:var(--card-elevated);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-rest);padding:16px 18px;margin-bottom:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;border:none;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:.06em;border-radius:12px;padding:15px 18px;background:var(--moss);color:#fff;box-shadow:var(--shadow-raised)}.btn:active{background:var(--moss-pressed);box-shadow:none}.btn:disabled{background:var(--disabled-bg);color:var(--disabled-fg);box-shadow:none;cursor:default}.btn.outline{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);box-shadow:none}.btn.outline:active{background:var(--card)}.btn.tint{background:var(--moss-tint);color:var(--moss);border:1px solid var(--moss-tint-line);box-shadow:none}.btn.sm{width:auto;padding:9px 16px;font-size:13px;border-radius:10px}.btn.pill{width:auto;border-radius:20px;padding:8px 16px;font-size:13px}.stamp{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.05em;border-radius:3px;padding:3px 8px;background:var(--card);border:1px solid var(--line-2);color:var(--ink-2)}.stamp.amber{background:var(--amber-tint);border-color:var(--amber-tint-line);color:var(--amber-deep)}.stamp.moss{background:var(--moss-tint);border-color:var(--moss-tint-line);color:var(--moss)}.stamp.persimmon{background:var(--persimmon-tint);border-color:var(--persimmon-tint-line);color:var(--persimmon-deep)}.stamp.info{background:var(--info-tint);border-color:var(--info-line);color:var(--info-blue)}.stamp.plum{background:var(--plum-tint);border-color:var(--plum-line);color:var(--plum)}.stamp.dashed{background:transparent;border-style:dashed;color:var(--ink-3)}.rel-chip{display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;border-radius:8px;padding:6px 10px;border:1px solid var(--line);background:var(--card);font-family:var(--sans)}.rel-chip .en{font-family:var(--serif-en);font-size:13px;font-weight:600;color:var(--ink)}.rel-chip .zh{font-size:12px;color:var(--ink-2)}.rel-chip.syn{background:var(--moss-tint);border-color:var(--moss-tint-line)}.rel-chip.syn .en{color:var(--moss)}.rel-chip.ant{background:var(--persimmon-tint);border-color:var(--persimmon-tint-line)}.rel-chip.ant .en{color:var(--persimmon-deep)}.tutor{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}.tutor .ava{flex:none;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif-en);font-style:italic;font-size:17px;font-weight:600;padding-bottom:2px}.tutor .bub{background:var(--card-elevated);border:1px solid var(--line);border-radius:4px 16px 16px;padding:13px 15px;font-size:14px;line-height:1.75;color:var(--ink)}.tutor .bub .vow{font-family:var(--serif-en);font-weight:700;color:var(--persimmon);font-style:normal}.me{margin:8px 0 8px auto;width:fit-content;max-width:270px;background:var(--moss);color:#fff;border-radius:16px 4px 16px 16px;padding:10px 14px;font-size:14px;line-height:1.6}.task{display:flex;align-items:center;gap:12px;padding:13px 0}.task+.task{border-top:1px dashed var(--line-2)}.task .tk{flex:none;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line-2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}.task.done .tk{background:var(--moss);border-color:var(--moss)}.task.done .tt{text-decoration:line-through;color:var(--ink-3)}.task .tt{font-size:14.5px;font-weight:500;color:var(--ink)}.task .ts{font-size:12px;color:var(--ink-3)}.tabs{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:min(560px,100%);background:var(--card);border-top:1px solid var(--line);display:flex;z-index:30;padding:6px 8px calc(10px + env(safe-area-inset-bottom))}.tab{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:7px;font-size:10.5px;color:var(--ink-3)}.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tab.on{color:var(--moss);font-weight:600}.tab.on svg{stroke-width:2}.ctxquote{border-left:3px solid var(--persimmon);padding:4px 0 4px 13px;margin:6px 0;font-family:var(--serif-en);font-style:italic;font-size:16px;line-height:1.7;color:var(--ink)}.ctxquote b{color:var(--persimmon);font-style:normal;font-weight:700}.dash-divider{border:none;border-top:1px dashed var(--line-2);margin:18px 0 16px}.sheet-veil{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e261c73;z-index:40}.sheet{position:fixed;left:0;right:0;margin:0 auto;bottom:0;z-index:50;width:min(560px,100vw);background:var(--card);border-radius:22px 22px 0 0;box-shadow:var(--shadow-sheet);padding:12px 24px calc(26px + env(safe-area-inset-bottom));max-height:82dvh;overflow-y:auto;animation:sheetup .28s ease-out}@keyframes sheetup{0%{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){.sheet{animation:none}}.grabber{width:36px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 16px}.phrase-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0}.phrase-row+.phrase-row{border-top:1px solid var(--line)}.phrase-row .en{font-family:var(--serif-en);font-size:14px;font-weight:600;color:var(--ink)}.phrase-row .zh{font-size:12px;color:var(--ink-2);text-align:right;flex:none;max-width:45%}.hookblock{background:var(--amber-tint);border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.7;color:var(--amber-deep)}.speak-lg{flex:none;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--moss);color:#fff;box-shadow:var(--shadow-raised);display:inline-flex;align-items:center;justify-content:center}.speak-lg:active{background:var(--moss-pressed)}.speak-sm{flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;background:var(--moss-tint);border:1px solid var(--moss-tint-line);color:var(--moss);display:inline-flex;align-items:center;justify-content:center;position:relative}.speak-sm:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}.input{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;background:var(--card-elevated)}.input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px #2f5d461f}.input.err{border-color:var(--error)}.toast-wrap{position:fixed;left:50%;transform:translate(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:90;pointer-events:none}.toast{background:var(--ink);color:#fff;font-size:13.5px;border-radius:99px;padding:11px 18px;box-shadow:var(--shadow-toast);display:flex;align-items:center;gap:8px;white-space:nowrap;animation:toastin .25s ease-out}@keyframes toastin{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.w{cursor:pointer;border-radius:3px}.w.hot{border-bottom:2px dashed var(--persimmon)}.w.saved{background:var(--amber-tint);border-bottom:2px solid var(--amber)}.w.kara{background:var(--moss);color:#fff;border-radius:4px;padding:0 2px}.stc-playing{background:#f1eada;border-radius:10px;box-shadow:0 0 0 6px #f1eada}.seg{display:flex;background:#ede6d6;border-radius:20px;padding:3px}.seg button{flex:1;border:none;cursor:pointer;background:transparent;font-size:13.5px;font-weight:600;color:var(--ink-2);border-radius:17px;padding:8px}.seg button.on{background:var(--card-elevated);color:var(--ink);box-shadow:var(--shadow-rest)}.opt{display:block;width:100%;text-align:left;cursor:pointer;font-size:15px;color:var(--ink);font-family:var(--sans);background:var(--card-elevated);border:1.5px solid var(--line);border-radius:13px;padding:14px 15px;margin-bottom:9px}.opt.good{border-color:var(--moss);background:var(--moss-tint)}.opt.bad{border-color:var(--error);background:var(--error-tint)}.opt:disabled{cursor:default}.opt.dim{opacity:.55}.pbar{height:3px;background:var(--line);border-radius:99px;overflow:hidden}.pbar i{display:block;height:100%;background:var(--moss);border-radius:99px}.recbtn{width:84px;height:84px;border-radius:50%;cursor:pointer;border:1.6px solid var(--line-2);background:var(--card-elevated);color:var(--ink-2);display:flex;align-items:center;justify-content:center;margin:14px auto}.recbtn.rec{background:var(--error);border-color:var(--error);color:#fff;box-shadow:0 0 0 8px #b23a2c26,0 0 0 16px #b23a2c12;animation:recpulse 1.2s infinite}@keyframes recpulse{50%{box-shadow:0 0 0 12px #b23a2c1f,0 0 0 22px #b23a2c0d}}@media (prefers-reduced-motion: reduce){.recbtn.rec{animation:none}}.empty{text-align:center;padding:44px 24px}.empty .ic{width:56px;height:56px;border-radius:50%;border:1.6px dashed var(--amber-tint-line);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--amber)}.empty .t{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}.empty .d{font-size:13px;color:var(--ink-2);line-height:1.8;margin-bottom:18px}.mut{color:var(--ink-2)}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:18px 2px 10px}.chip{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:3px;background:var(--moss-tint);border:1px solid var(--moss-tint-line);color:var(--moss);margin-right:6px}.chip.amber{background:var(--amber-tint);border-color:var(--amber-tint-line);color:var(--amber-deep)}.btn.ghost{background:var(--moss-tint);color:var(--moss);border:1px solid var(--moss-tint-line);box-shadow:none}.pks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.pk{font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;border:1.5px solid var(--line-2);background:var(--card-elevated);border-radius:12px;padding:10px 14px;color:var(--ink)}.inrow{display:flex;gap:8px}.inrow input{flex:1;min-width:0;font-family:var(--sans);font-size:16px;border:1.5px solid var(--line-2);border-radius:11px;padding:10px 12px;background:var(--card-elevated);color:var(--ink)}.inrow input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px #2f5d461f}.inrow .okb{flex:none;border:none;background:var(--moss);color:#fff;border-radius:11px;padding:0 16px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer}.gbar{height:5px;border-radius:99px;background:var(--line);overflow:hidden}.gbar i{display:block;height:100%;background:var(--amber);border-radius:99px}