:root{--ink:#2b2620;--ink-soft:#5d554a;--muted:#857b6d;--paper:#fbf6ea;--paper-2:#f3ead6;--paper-3:#e8dcc0;--line:#d9cba8;--accent:#2f6fd6;--accent-ink:#1d4fa3;--gold:#e0a526;--gold-ink:#8a5a00;--due:#ffd23f;--danger:#b33a2b;--ok:#2f8a4a;--shadow:0 6px 24px #3c2d142e, 0 1px 3px #3c2d1426;--radius:12px;--zh:"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", "Source Han Sans SC", sans-serif;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--zh);color:var(--ink);-webkit-font-smoothing:antialiased;background:#a9cfe0;font-size:15px;line-height:1.45}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}[lang=zh-Hans],.zh,.hanzi-big,.hero-zh,.char,.brand-zh{font-family:var(--zh)}h2,h3{margin:0;line-height:1.25}h3{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px;font-size:.82rem}p{margin:0 0 8px}a{color:var(--accent-ink)}code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}kbd{border:1px solid var(--line);background:#fff;border-bottom-width:2px;border-radius:4px;padding:0 4px}.muted{color:var(--muted)}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;transition:background .12s,border-color .12s,transform 50ms}button:hover{background:var(--paper-2);border-color:#c9b88f}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,.tok.link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.primary{background:var(--accent);border-color:var(--accent-ink);color:#fff;font-weight:600}button.primary:hover{background:var(--accent-ink)}button.big{padding:10px 22px;font-size:1.05rem}button.small{padding:3px 9px;font-size:.85rem}button.ghost{background:0 0}button.danger{color:var(--danger);border-color:#e3b3ab}button.danger:hover{background:#fbecea}button.link{color:var(--accent-ink);text-underline-offset:2px;background:0 0;border:none;padding:2px 0;text-decoration:underline}button.icon{background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:1.1rem;line-height:1}button.icon:hover{background:#0000000f}button.close{color:var(--ink-soft);font-size:1.5rem}input[type=search],input[type=number],select{font:inherit;color:inherit;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row.subtle{gap:16px;margin-top:6px;font-size:.85rem}.app{position:fixed;inset:0;overflow:hidden}.map-canvas{touch-action:none;cursor:grab;background:#a9cfe0;width:100%;height:100%;display:block;position:absolute;inset:0}.map-canvas:active{cursor:grabbing}.splash{background:radial-gradient(circle at center, var(--paper) 0, var(--paper-3) 70%, #a9cfe0 100%);flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100%;display:flex}.splash pre{white-space:pre-wrap;max-width:80vw;color:var(--danger)}.hero-zh{letter-spacing:.15em;color:var(--ink);font-size:3rem;font-weight:700}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overscroll-behavior:contain;z-index:20;position:absolute;overflow-y:auto}.panel-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.panel-head h2{font-size:1.1rem}.topbar{z-index:30;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fbf6eaf0;align-items:center;gap:12px;padding:6px 8px 6px 14px;display:flex;position:absolute;top:10px;left:10px;right:10px}.brand{white-space:nowrap;flex-direction:column;line-height:1.05;display:flex}.brand-zh{letter-spacing:.08em;font-size:1.15rem;font-weight:700}.brand-en{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.68rem}.search{flex:260px;min-width:140px;max-width:460px;position:relative}.search input{border-radius:999px;width:100%;padding:7px 14px}.search-results{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);width:max(100%,420px);max-height:min(60vh,520px);box-shadow:var(--shadow);z-index:40;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto}.search-results li{cursor:pointer;border-radius:8px;grid-template-columns:auto auto 1fr auto 1.4em;align-items:baseline;gap:8px;padding:6px 8px;display:grid}.search-results li.active{background:var(--paper-3)}.search-results li.empty{color:var(--muted);cursor:default;display:block}.search-results .zh{font-size:1.15rem;font-weight:600}.search-results .py{color:var(--ink-soft)}.search-results .gl{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.search-results .lv{color:var(--muted);white-space:nowrap;font-size:.75rem}.stats{align-items:center;gap:6px;margin-left:auto;display:flex}.stat{border:1px solid var(--line);white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:.85rem;display:inline-flex}.stat.due{background:#fff6cc;border-color:#e9c84a}.stat.warn{background:#fdeee0;border-color:#eab58a}.stat-icon{font-size:.95rem}.explore-btn{white-space:nowrap;background:#fff6cc;border-color:#e9c84a;font-weight:600}.explore-btn.over{border-color:var(--line);background:#fff;font-weight:400}.zoom-controls{z-index:15;flex-direction:column;gap:4px;display:flex;position:absolute;bottom:18px;right:14px}.zoom-controls button{width:36px;height:36px;box-shadow:var(--shadow);padding:0;font-size:1.2rem}.legend{z-index:15;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fbf6eaf0;max-width:340px;padding:6px 8px;font-size:.85rem;position:absolute;bottom:14px;left:12px}.fog-toggle{align-items:center;gap:4px;display:flex}.fog-toggle .label{margin-right:2px;font-weight:600}.fog-toggle button{border-radius:999px;padding:2px 8px;font-size:.8rem}.fog-toggle button.on{background:var(--ink);border-color:var(--ink);color:#fff}.legend-toggle{color:var(--accent-ink);margin-left:6px;text-decoration:underline;background:0 0!important;border:none!important}.legend-body ul{gap:4px;margin:8px 0;padding:0;list-style:none;display:grid}.legend-body ul.shapes{grid-template-columns:1fr 1fr}.legend-body .shape{text-align:center;width:1.3em;color:var(--ink-soft);display:inline-block}.sw{vertical-align:-3px;border:2px solid #333;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;margin-right:6px;font-size:10px;font-weight:700;display:inline-flex}.sw.learned{background:var(--gold);border-color:var(--gold-ink)}.sw.active{background:var(--accent);border-color:var(--accent-ink)}.sw.revealed{background:#fff}.sw.frontier{color:#fff;background:#8f9aa6;border-color:#5c6670}.sw.due{background:var(--due);border-color:#a07c00}.toasts{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.save-banner{z-index:35;border-radius:var(--radius);color:#6b4500;max-width:min(92vw,620px);box-shadow:var(--shadow);background:#fff4d6;border:1px solid #d9a441;padding:8px 14px;font-size:.9rem;position:absolute;top:76px;left:50%;transform:translate(-50%)}@media (width<=700px){.save-banner{top:96px}}.toast{pointer-events:auto;cursor:pointer;background:var(--ink);color:#fff;box-shadow:var(--shadow);border-radius:999px;max-width:min(90vw,560px);padding:8px 16px;font-size:.9rem;animation:.18s ease-out toast-in}.toast.success{background:#24603a}.toast.warn{background:#8a4b12}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.badge{border:1px solid var(--line);white-space:nowrap;background:#fff;border-radius:999px;padding:1px 8px;font-size:.75rem;display:inline-block}.badge.level{font-weight:600}.badge.level-1{background:#e7f4e4;border-color:#9fcf95}.badge.level-2{background:#e4f1f6;border-color:#8fc3d8}.badge.level-3{background:#e8e8fa;border-color:#a5a5e0}.badge.level-4{background:#f6e6f4;border-color:#d6a3cf}.badge.level-5{background:#fbeadf;border-color:#e3ae8a}.badge.level-6{background:#fbe3e1;border-color:#e19d97}.badge.level-7{background:#ece6dc;border-color:#b9a88e}.badge.region{border-color:var(--region);background:color-mix(in srgb, var(--region) 22%, white)}.chips{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.chip{border:1px solid color-mix(in srgb, var(--region) 70%, #888);background:#fff;border-left-width:4px;border-radius:999px;align-items:baseline;gap:5px;padding:2px 9px 2px 7px;font-size:.88rem;display:inline-flex}.chip .zh{font-size:1.02rem;font-weight:600}.chip .py{color:var(--ink-soft);font-size:.8rem}.chip .gl{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:11em;font-size:.78rem;overflow:hidden}.chip.learned{background:#fff4d6}.chip.active{background:#e6efff}.chip.hidden{color:#6a737c;background:#eef0f2;border-style:dashed}.chip.hidden .zh{color:#6a737c}.dots{vertical-align:middle;align-items:center;gap:3px;display:inline-flex}.dot{background:0 0;border:1.5px solid #9b8f7b;border-radius:50%;width:9px;height:9px}.dot.on{background:var(--gold);border-color:var(--gold-ink)}.dots.marked{color:var(--ok);font-size:.75rem}.speak{border-radius:999px;padding:2px 8px}.callout{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:10px 12px}.callout .row{margin-top:8px}.callout.gold{background:#fff4d6;border-color:#e8c66a}.callout.due{background:#fff6cc;border-color:#e9c84a;justify-content:space-between;align-items:center;gap:10px;display:flex}.callout.due p{margin:0}.callout.due button{white-space:nowrap}.callout.done{background:#e8f4ea;border-color:#a8d3b2}.hint{color:var(--ink-soft);font-size:.85rem}.hint.warn{color:#8a4b12}.word-panel{width:390px;padding:16px 18px 18px;top:76px;bottom:12px;right:12px}.word-panel>.close{position:absolute;top:8px;right:8px}.word-head{border-left:6px solid var(--region);margin-bottom:14px;padding:2px 0 2px 14px}.hanzi-big{letter-spacing:.04em;font-size:3rem;font-weight:600;line-height:1.1}.pinyin-big{color:var(--ink-soft);align-items:center;gap:10px;margin:4px 0 6px;font-size:1.25rem;display:flex}.trad{color:var(--muted);margin-bottom:6px;font-size:.85rem}.tags{flex-wrap:wrap;gap:5px;display:flex}.word-panel section{margin-bottom:18px}.fogbox{background:#eef0f2;border:1px dashed #a3acb5;border-radius:10px;padding:12px}.glosses{margin:0;padding-left:1.3em}.glosses li{margin-bottom:2px}.stages{gap:6px;margin:0;padding:0;list-style:none;display:grid}.stages li{border:1px solid var(--line);background:#fff;border-radius:10px;grid-template-columns:28px 1fr auto;grid-template-areas:"icon title dots""icon actions actions";align-items:center;gap:4px 8px;padding:7px 10px;display:grid}.stages li.current{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent)}.stages li.done{background:#fff8e3}.stage-icon{text-align:center;grid-area:icon;font-size:1.2rem}.stage-title{flex-direction:column;grid-area:title;font-size:.9rem;font-weight:600;line-height:1.25;display:flex}.stage-title small{color:var(--muted);font-size:.78rem;font-weight:400}.stages .dots{grid-area:dots}.stage-actions{grid-area:actions;gap:6px;display:flex}.stage-actions button{white-space:nowrap}.explore-row{gap:5px;margin-bottom:12px;display:grid}.explore-row>.label{color:var(--ink-soft);align-items:center;gap:6px;font-size:.8rem;font-weight:600;display:flex}.explore-row .char{color:var(--ink);font-size:1.15rem;font-weight:700}.path-step{align-items:center;gap:4px;display:inline-flex}.sep{color:var(--muted)}.hint-btn{border-style:dashed}.sentence-list{gap:10px;margin:8px 0 0;padding:0;list-style:none;display:grid}.sentence-list li{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.sentence-list .en{color:var(--ink-soft);justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px;font-size:.88rem;display:flex}.src{color:var(--muted);white-space:nowrap;font-size:.75rem}.meta{border-top:1px solid var(--line);color:var(--muted);padding-top:8px;font-size:.78rem}.sentence{font-family:var(--zh);font-size:1.15rem;line-height:1.7}.sentence.with-pinyin{flex-wrap:wrap;align-items:flex-end;row-gap:4px;line-height:1.2;display:inline-flex}.sentence.with-pinyin ruby{flex-direction:column-reverse;align-items:center;margin:0 .1em;display:inline-flex}.sentence rt{color:var(--ink-soft);letter-spacing:0;font-family:system-ui,sans-serif;font-size:.55em}.sentence.with-pinyin rt{line-height:1.2;display:block}.tok.target{background:#fff1a8;border-radius:4px;font-weight:600;box-shadow:0 0 0 2px #fff1a8}.tok.link{cursor:pointer}.tok.link:hover{text-underline-offset:4px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.quest-log{width:330px;padding:14px 16px;top:76px;bottom:12px;left:12px}.quest-log section{margin-bottom:16px}.log-list{gap:4px;margin:0;padding:0;list-style:none;display:grid}.log-list li{border-bottom:1px dotted var(--line);align-items:center;gap:8px;padding:3px 4px 3px 0;display:flex}.log-word{text-align:left;background:0 0;border:none;flex:1;align-items:baseline;gap:8px;padding:4px 6px;display:flex}.log-word .zh{font-size:1.1rem;font-weight:600}.log-word .py{color:var(--ink-soft);font-size:.85rem}.log-word .lv{color:var(--muted);margin-left:auto;font-size:.72rem}.log-stage{align-items:center;gap:4px;font-size:.9rem;display:inline-flex}.level-bars{gap:6px;margin:0;padding:0;list-style:none;display:grid}.level-bars li{grid-template-columns:58px 1fr 76px;align-items:center;gap:8px;font-size:.82rem;display:grid}.level-bars .bar{background:var(--paper-3);border-radius:999px;height:8px;overflow:hidden}.level-bars .bar span{background:var(--gold);height:100%;display:block}.level-bars .num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.modal-backdrop{z-index:100;background:#1e190f6b;justify-content:center;align-items:center;padding:16px;animation:.15s ease-out fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.modal:focus{outline:none}.modal{background:var(--paper);border:1px solid var(--line);border-radius:16px;flex-direction:column;width:min(520px,100%);max-height:calc(100vh - 32px);display:flex;overflow:hidden;box-shadow:0 20px 60px #1e140559}.modal.wide{width:min(720px,100%)}.modal-head{justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 0 20px;display:flex}.modal-head h2{font-size:1.15rem}.modal-body{padding:12px 20px 20px;overflow-y:auto}.settings section,.about section{margin-bottom:18px}.field{grid-template-columns:minmax(180px,1fr) minmax(0,1.4fr);align-items:center;gap:10px;margin-bottom:10px;display:grid}.field>span:first-child{font-size:.92rem}.field.check{grid-template-columns:auto 1fr}.field select,.field input[type=number]{width:100%}.field input[type=range]{flex:1}.field .row{flex-wrap:nowrap}.field .row select{flex:1;min-width:0}.about ul{margin:0;padding-left:1.2em}.about li{margin-bottom:6px}table.sources{border-collapse:collapse;width:100%;margin-bottom:8px;font-size:.88rem}table.sources th,table.sources td{text-align:left;border-bottom:1px solid var(--line);padding:5px 6px}.welcome-hero{text-align:center;margin:6px 0 12px}.welcome-hero h2{margin-top:4px;font-size:1.4rem}.welcome-points{gap:12px;margin:0 0 16px;padding:0;list-style:none;display:grid}.welcome-points li{grid-template-columns:34px 1fr;align-items:start;gap:10px;display:grid}.welcome-points li>span{font-size:1.5rem;line-height:1.2}.welcome-start{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;padding-top:14px;display:flex}.welcome-start label{gap:4px;font-size:.9rem;font-weight:600;display:grid}.quest{width:min(620px,100%)}.quest-title{align-items:center;gap:8px;display:inline-flex}.quest-stages{flex-wrap:wrap;gap:4px;margin-bottom:10px;display:flex}.stage-tab{border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:.85rem;display:inline-flex}.stage-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}.stage-tab.done:not(.on){background:#fff4d6}.quest-progress{align-items:center;gap:8px;margin-bottom:10px;font-size:.88rem;display:flex}.quest-card{border:1px solid var(--line);background:#fff;border-radius:14px;flex-direction:column;gap:12px;min-height:200px;padding:18px;display:flex}.goal{color:var(--ink-soft);font-weight:600}.listen{justify-content:center;align-items:center;gap:10px;padding:10px 0;display:flex}.play{background:var(--accent);color:#fff;border-color:var(--accent-ink);border-radius:999px;padding:12px 22px;font-size:1.15rem}.play:hover{background:var(--accent-ink)}.play.slow{color:var(--accent-ink);border-color:var(--accent);background:#fff}.play.slow:hover{background:#eef3fd}.pinyin-prompt{text-align:center}.big-pinyin{color:var(--ink);padding:6px 0;font-size:1.5rem}.toggle{color:var(--ink-soft);align-self:center;align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.read-sentence{text-align:center;padding:10px 0}.read-sentence .sentence{font-size:1.6rem}.read-word{text-align:center;letter-spacing:.05em;padding:10px 0;font-size:4.2rem;font-weight:600}.answer{border-top:1px dashed var(--line);gap:10px;padding-top:12px;display:grid}.answer-word{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.answer-word .zh{font-size:2rem;font-weight:600}.answer-word .py{color:var(--ink-soft);font-size:1.15rem}.answer-sentence{background:var(--paper);border-radius:10px;padding:10px 12px}.answer-sentence .en{color:var(--ink-soft);margin:4px 0}.quest-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.quest-card.result{text-align:center;justify-content:center;align-items:center}.celebrate{text-transform:none;letter-spacing:0;color:var(--ink);font-size:1.3rem}.quest-card.result .dots .dot{width:14px;height:14px}.revealed-list{justify-items:center;gap:6px;display:grid}@media (width<=700px){:root{font-size:14px}.topbar{flex-wrap:wrap;gap:6px;padding:6px;top:6px;left:6px;right:6px}.brand{display:none}.search{flex-basis:100%;order:2;max-width:none}.search-results{width:100%}.stats{justify-content:space-between;gap:4px;width:100%;margin-left:0}.stat{padding:3px 7px}.stat-label,.btn-label{display:none}.word-panel,.quest-log{border-radius:16px 16px 0 0;width:auto;max-height:62vh;inset:auto 0 0}.quest-log{z-index:21}.legend{bottom:8px;left:8px}.field{grid-template-columns:1fr;gap:4px}.hanzi-big{font-size:2.4rem}}