:root{--ink:#3d2c1e;--ink-soft:#8a7766;--cream:#fff8ec;--sand:#ffe9c7;--paper:#fff;--ok:#7fd1a0;--retry:#ffd1dc;--retry-dot:#ff8a7a;--hi:#ffc94d;--hi-text:#b23a1e;--sound:#c9e8ff;--star:#ffe27a;--line:3px solid var(--ink);--shadow:0 5px 0 var(--ink);--radius:20px;--font:"Baloo 2", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;font-size:17px;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}h1,h2,h3{margin:0;line-height:1.25}:focus-visible{outline-offset:3px;outline:3px solid #378add}.app{grid-template:"top top""side main"1fr/300px minmax(0,1fr);min-height:100dvh;display:grid}.topbar{z-index:20;padding:10px 20px;padding-top:max(10px, env(safe-area-inset-top));background:var(--sand);border-bottom:var(--line);grid-area:top;align-items:center;gap:12px;display:flex;position:sticky;top:0}.logo{letter-spacing:1px;font-size:24px;font-weight:700}.top-links{gap:8px;margin-left:auto;display:flex}.sidebar{border-right:var(--line);background:var(--sand);grid-area:side;height:calc(100dvh - 61px);padding:14px 12px 24px;position:sticky;top:61px;overflow-y:auto}.main{grid-area:main;min-width:0;padding:24px 32px 48px}.page{max-width:820px;margin:0 auto}.page.center{place-items:center;min-height:60vh;display:grid}.icon-btn{border:var(--line);background:var(--paper);cursor:pointer;border-radius:14px;place-items:center;width:44px;height:44px;display:grid}.menu-btn,.tabbar,.scrim{display:none}.card{background:var(--paper);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.pill{border:2.5px solid var(--ink);white-space:nowrap;background:var(--paper);border-radius:999px;align-items:center;gap:4px;padding:2px 12px;font-size:15px;font-weight:500;display:inline-flex}.pill.on{box-shadow:0 3px 0 var(--ink);transform:translateY(-1px)}.pill-star{background:var(--star)}.pill-due{background:var(--retry)}.pill-review{background:var(--sand)}.pill-y2core{background:var(--sound)}.pill-ext{background:#e3d7ff}.pill-y34{background:var(--ok)}.pill-tricky{background:var(--retry)}.pill-homo{background:var(--sound)}.btn{border:var(--line);min-height:56px;box-shadow:var(--shadow);background:var(--paper);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:18px;justify-content:center;align-items:center;gap:8px;padding:8px 20px;font-size:20px;font-weight:700;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.btn:disabled{opacity:.5;cursor:default}.btn-ok{background:var(--ok)}.btn-retry{background:var(--retry)}.btn-sound{background:var(--sound)}.btn-plain{background:var(--cream);font-size:17px}.btn-next{background:var(--cream)}.dot{border:2.5px solid var(--ink);background:var(--paper);vertical-align:-2px;border-radius:50%;flex:none;width:14px;height:14px;display:inline-block}.dot-learning{background:var(--hi)}.dot-retry{background:var(--retry-dot)}.dot-mastered{background:var(--ok)}.search{border:var(--line);background:var(--paper);width:100%;height:46px;font:inherit;color:var(--ink);border-radius:999px;padding:0 16px}.search::placeholder{color:var(--ink-soft)}.dir-tabs{border:var(--line);background:var(--paper);border-radius:16px;grid-template-columns:repeat(3,1fr);margin-bottom:12px;display:grid;overflow:hidden}.dir-tab{cursor:pointer;color:#7a5530;background:0 0;border:0;min-height:44px;font-size:16px;font-weight:700}.dir-tab+.dir-tab{border-left:2.5px solid var(--ink)}.dir-tab.on{background:var(--hi);color:var(--ink)}.seg{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;display:grid}.seg button{border:2.5px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:12px;min-height:40px;font-weight:700}.seg button.on{background:var(--sound);box-shadow:0 3px 0 var(--ink);transform:translateY(-1px)}.dir-tools{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.dir-tools-right{gap:10px;margin-left:auto;display:flex}.chip{border:2.5px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:999px;align-items:center;gap:6px;min-height:36px;padding:2px 12px;font-size:14px;display:inline-flex}.chip.on{background:var(--hi)}.chip-retry.on{background:var(--retry)}.link-btn{cursor:pointer;color:#7a5530;text-underline-offset:3px;background:0 0;border:0;padding:6px 2px;font-size:14px;text-decoration:underline}.directory section{margin-top:12px}.dir-section{top:var(--sticky-top,-14px);z-index:2;background:var(--sand);cursor:pointer;text-align:left;border:0;border-radius:12px;align-items:center;gap:10px;width:100%;padding:8px 6px;display:flex;position:sticky}.dir-section-title{flex-direction:column;flex:1;min-width:0;display:flex}.dir-section-name{color:#7a5530;font-size:15px;font-weight:700;line-height:1.3}.dir-section-meta{color:var(--ink-soft);align-items:center;gap:8px;font-size:12px;display:flex}.mini-bar{border:2px solid var(--ink);background:var(--paper);border-radius:999px;flex:none;width:64px;height:9px;display:flex;overflow:hidden}.chev{color:#7a5530;flex:none;transition:transform .2s}.dir-section[aria-expanded=false] .chev{transform:rotate(-90deg)}.coming{margin-top:8px;padding:16px}.coming b{font-size:17px}.coming p{color:var(--ink-soft);margin:6px 0 0;font-size:15px}.dir-letter{border:2.5px solid var(--ink);background:var(--hi);width:30px;height:30px;color:var(--ink);border-radius:10px;flex:none;place-items:center;font-weight:700;display:inline-grid}.directory ul{margin:0;padding:0;list-style:none}.dir-row{border:2.5px solid #0000;border-radius:14px;align-items:center;gap:10px;min-height:46px;padding:6px 12px;display:flex}.dir-row:hover{background:#fff9}.dir-row.on{background:var(--paper);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}.dir-id{color:var(--ink-soft);white-space:nowrap;flex-shrink:0;min-width:34px;font-size:14px}.dir-title{font-size:18px;font-weight:700}.dir-sound{color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;max-width:7.5em;margin-left:auto;font-size:14px;overflow:hidden}.dir-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.dir-intro{color:var(--ink-soft);margin:0 4px 10px;font-size:14px}.homo-list{margin:0;padding:0;list-style:none}.legend{color:var(--ink-soft);flex-wrap:wrap;gap:4px 12px;margin:20px 4px 0;font-size:13px;display:flex}.empty{color:var(--ink-soft);margin:20px 8px}.pattern-head{flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px;display:flex}.pattern-head h1{font-size:30px}.pattern-id{color:var(--ink-soft);font-size:22px}.pattern-sound{color:var(--ink-soft);font-size:18px}.steps{gap:10px;margin-bottom:18px;display:flex}.step{border:var(--line);background:var(--paper);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0}.step-ok{background:var(--ok)}.step-retry{background:var(--retry-dot)}.step.on{outline:3px solid var(--ink);outline-offset:3px}.stage{grid-template-columns:minmax(0,1fr) 120px;align-items:start;gap:20px;display:grid}.word-card-wrap{min-width:0}.word-card{cursor:pointer;width:100%;box-shadow:0 7px 0 var(--ink);flex-direction:column;align-items:center;gap:4px;padding:36px 16px 28px;display:flex;position:relative}.word-card:active{box-shadow:0 4px 0 var(--ink);transform:translateY(3px)}.word-tag{color:var(--ink-soft);font-size:14px;position:absolute;top:12px;left:14px}.word{letter-spacing:.04em;white-space:nowrap;margin-bottom:10px;font-weight:700;line-height:1}.word span,.word mark{padding:.06em 0 .04em;line-height:.9;display:inline-block}.word mark{background:var(--hi);color:var(--hi-text);border-radius:.16em;padding-inline:.04em}.word-meta{color:var(--ink-soft);font-size:20px}.actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px;display:grid}.actions .btn{white-space:nowrap;gap:6px;padding-inline:8px}.retry-hint{border:2.5px dashed var(--retry-dot);background:#fff;border-radius:14px;margin:14px 0 0;padding:8px 14px;font-size:15px}.mascot{padding-top:30px}.owl{display:block;overflow:visible}.owl-eyes{transform-origin:45px 44px;animation:5s infinite blink}.owl-happy{animation:.6s ease-out hop}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-18px)rotate(-6deg)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.owl-eyes,.owl-happy{animation:none}}.done-card{text-align:center;flex-direction:column;grid-column:1/-1;align-items:center;gap:10px;padding:28px 20px;display:flex}.done-card h2{font-size:28px}.done-card p{color:var(--ink-soft);margin:0}.done-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;display:flex}.tip{color:#6b4a2b;background:#fff1d6;border:2.5px dashed #c98a4b;border-radius:16px;margin-top:28px;padding:14px 18px;font-size:16px}.tip p{margin:0 0 6px}.tip b{background:var(--hi);border:2px solid var(--ink);color:var(--ink);border-radius:8px;margin-right:6px;padding:0 8px;font-size:14px;display:inline-block}.tip-note{color:#8a6a4b}.tip-accent{color:var(--ink-soft);font-size:14px;margin:0!important}.progress-bar{border:var(--line);background:var(--paper);border-radius:999px;height:14px;margin-bottom:20px;overflow:hidden}.progress-bar span{background:var(--ok);height:100%;transition:width .3s;display:block}.review .stage,.route-review .stage{grid-template-columns:minmax(0,1fr)}.homo-words{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;display:grid}.homo-word{cursor:pointer;flex-direction:column;align-items:center;gap:2px;padding:20px 10px 16px;display:flex}.homo-word:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.homo-word.is-speaking{background:var(--sound)}.homo-text{font-size:clamp(34px,7vw,52px);font-weight:700;line-height:1.1}.homo-zh{font-size:18px}.homo-ipa{color:var(--ink-soft);font-size:15px}.homo-sentence{flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px;padding:18px 20px;display:flex}.homo-sentence p{margin:0;font-size:clamp(20px,3.4vw,26px);line-height:1.6}.homo-sentence mark{background:var(--hi);color:var(--hi-text);border-radius:8px;padding:0 4px;font-weight:700}.homo-nav{justify-content:space-between;gap:12px;margin-top:22px;display:flex}.homo-nav .btn{min-height:48px;font-size:17px}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px;display:grid}.stat{flex-direction:column;align-items:center;padding:14px 8px;display:flex}.stat b{font-size:38px;line-height:1.1}.stat span{color:var(--ink-soft);font-size:15px}.stat-star{background:var(--star)}.stat-due{background:var(--retry)}.section-progress,.backup{margin-bottom:18px;padding:16px 20px}.section-progress h3,.backup h3{align-items:center;gap:8px;margin-bottom:12px;font-size:18px;display:flex}.stack-bar{border:var(--line);background:var(--paper);border-radius:999px;height:22px;display:flex;overflow:hidden}.stack-bar span+span{border-left:2.5px solid var(--ink)}.seg-mastered{background:var(--ok)}.seg-learning{background:var(--hi)}.seg-retry{background:var(--retry-dot)}.seg-new{background:var(--paper)}.stack-legend{color:var(--ink-soft);flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-size:14px;display:flex}.backup p{color:var(--ink-soft);margin:0 0 8px}.backup .done-actions{justify-content:flex-start}.warn{color:var(--hi-text)!important}.small{font-size:14px}.field{flex-direction:column;gap:6px;margin-bottom:4px;font-weight:500;display:flex}.field select{border:var(--line);background:var(--paper);width:100%;min-height:48px;font:inherit;color:var(--ink);border-radius:14px;padding:0 12px}.voice-settings p{margin-top:10px}.speak-hint{border:2.5px solid var(--ink);background:var(--retry);border-radius:14px;margin:14px 0 0;padding:8px 14px;font-size:15px}.speak-hint a{font-weight:700;text-decoration:underline}.btn-sound.is-speaking svg{animation:.6s ease-in-out infinite alternate pulse}@keyframes pulse{to{transform:scale(1.25)}}.msg{font-weight:700;color:#3b6d11!important;margin-top:12px!important}@media (width<=1023px){.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top""main"}.menu-btn{display:grid}.sidebar{z-index:40;width:min(340px,86vw);height:100dvh;padding-top:max(16px, env(safe-area-inset-top));box-shadow:6px 0 0 var(--ink);transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-105%)}.drawer-open .sidebar{transform:none}.scrim{z-index:30;background:#3d2c1e59;position:fixed;inset:0}.drawer-open .scrim{display:block}.main{padding:22px 24px 40px}}@media (width<=767px){body{font-size:16px}.topbar{padding:8px 14px;padding-top:max(8px, env(safe-area-inset-top))}.menu-btn{display:none}.logo{font-size:21px}.pill-due{display:none}.main{padding:16px 16px calc(96px + env(safe-area-inset-bottom));--sticky-top:calc(50px + env(safe-area-inset-top))}.main .dir-section{background:var(--cream)}.tabbar{z-index:20;background:var(--sand);border-top:var(--line);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tab{color:#7a5530;flex-direction:column;justify-content:center;align-items:center;min-height:62px;font-size:13px;display:flex;position:relative}.tab.on{color:var(--hi-text);font-weight:700}.tab.on svg{background:var(--hi);outline:2.5px solid var(--ink);border-radius:10px}.badge{background:var(--retry-dot);border:2px solid var(--ink);text-align:center;min-width:20px;height:20px;color:var(--ink);border-radius:999px;padding:0 5px;font-size:12px;font-weight:700;line-height:16px;position:absolute;top:6px;left:calc(50% + 8px)}.pattern-head{margin-bottom:12px}.pattern-head h1{font-size:26px}.stage{grid-template-columns:minmax(0,1fr)}.mascot{display:none}.word-card{padding:34px 10px 22px}.word-meta{font-size:18px}.actions{grid-template-columns:1fr 1fr;grid-template-areas:"sound next""retry ok";gap:12px;margin-top:20px}.btn-sound{grid-area:sound}.actions .btn-next{grid-area:next}.actions .btn-retry{grid-area:retry;min-height:64px}.actions .btn-ok{grid-area:ok;min-height:64px}.stats{gap:10px}.stat b{font-size:30px}.tip{margin-top:22px}}