:root{--bg:#0c0d12;--bg2:#111320;--panel:rgba(20,22,34,.82);--panel-solid:#141626;--stroke:rgba(255,255,255,.08);--stroke2:rgba(255,255,255,.14);--txt:#e8ecf6;--muted:#9aa2b8;--muted2:#6b7288;--accent:#8be8dd;--shadow:0 12px 40px rgba(0,0,0,.5)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(1200px 800px at 70% -10%,#1a1d2e 0%,var(--bg) 60%);color:var(--txt);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0}canvas{display:block;position:absolute;inset:0;cursor:grab}canvas:focus-visible{outline:1px solid rgba(139,232,221,.45);outline-offset:-2px}canvas.grabbing{cursor:grabbing}canvas.pointing{cursor:pointer}#top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px;pointer-events:none;gap:16px}#brand{pointer-events:auto}#brand .kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;opacity:.9}#brand h1{margin:2px 0 0;font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}#brand h1 .zh{font-family:Noto Sans SC,sans-serif;font-weight:500;color:var(--muted)}#brand .sub{margin-top:3px;font-size:12.5px;color:var(--muted)}#brand .sub b{color:#c9d2e6;font-weight:600}#topRight{pointer-events:auto;display:flex;align-items:flex-start;gap:10px}.play-link{height:37px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(139,232,221,.34);border-radius:10px;background:#8be8dd1a;color:var(--accent);font-size:11.5px;font-weight:700;text-decoration:none;box-shadow:0 8px 24px #0000003d;backdrop-filter:blur(10px);transition:background .15s,border-color .15s,transform .15s}.play-link:hover{background:#8be8dd2e;border-color:var(--accent);transform:translateY(-1px)}.play-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.play-link-icon{font-size:9px}#langPick{display:flex;gap:2px;background:var(--panel);border:1px solid var(--stroke2);border-radius:9px;padding:3px}#langPick button{border:0;background:none;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 9px;border-radius:6px;cursor:pointer;transition:.15s}#langPick button:hover{color:var(--txt)}#langPick button.on{background:#8be8dd24;color:var(--accent)}body[data-lang=en] .vi-only,.lg .nm .n-en,body[data-lang=en] .lg .nm .n-vi{display:none}body[data-lang=en] .lg .nm .n-en{display:block}#searchWrap{pointer-events:auto;position:relative}#search{width:230px;background:var(--panel);border:1px solid var(--stroke2);color:var(--txt);border-radius:11px;padding:10px 34px;font-size:13.5px;font-family:inherit;outline:none;backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:border-color .15s,width .2s}#search:focus{border-color:var(--accent);width:250px}#search::placeholder{color:var(--muted2)}#searchWrap .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted2);font-size:14px;pointer-events:none}#searchShortcut{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--stroke2);border-radius:5px;background:#ffffff0a;color:var(--muted2);font:11px/1 Inter,sans-serif;pointer-events:none;transition:opacity .15s}#search:focus+#searchShortcut,#search:not(:placeholder-shown)+#searchShortcut{opacity:0}#searchClear{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted2);cursor:pointer;font-size:15px;display:none;border:0;background:none;padding:2px}#searchCount{position:absolute;left:0;right:0;top:44px;font-size:11.5px;color:var(--muted);padding-left:6px;pointer-events:none}#searchResults{position:absolute;top:64px;right:0;width:320px;max-width:calc(100vw - 24px);max-height:calc(100vh - 88px);display:none;overflow-y:auto;background:var(--panel-solid);border:1px solid var(--stroke2);border-radius:12px;box-shadow:var(--shadow);padding:5px;backdrop-filter:blur(12px)}#searchResults.show{display:block}.search-result{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;border:0;border-radius:8px;background:none;color:var(--txt);padding:8px 9px;text-align:left;cursor:pointer;font-family:inherit}.search-result:hover,.search-result.active{background:#8be8dd1f}.search-result-hz{font-family:Noto Sans SC,sans-serif;font-size:20px;font-weight:500;line-height:1.2}.search-result-copy{min-width:0}.search-result-py{display:block;color:var(--accent);font-size:12px;font-weight:600}.search-result-meaning{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-level{color:var(--muted2);font-size:9.5px;font-weight:700;white-space:nowrap}#dock{position:fixed;left:20px;bottom:20px;z-index:20;width:246px;background:var(--panel);border:1px solid var(--stroke);border-radius:15px;box-shadow:var(--shadow);backdrop-filter:blur(12px);max-height:calc(100vh - 100px);overflow-y:auto;transition:transform .25s}#dock,#detail{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}#dock::-webkit-scrollbar,#detail::-webkit-scrollbar{width:6px}#dock::-webkit-scrollbar-track,#detail::-webkit-scrollbar-track{background:transparent}#dock::-webkit-scrollbar-thumb,#detail::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.dock-sec{padding:13px 15px;border-bottom:1px solid var(--stroke)}.dock-sec:last-child{border-bottom:0}.dock-h{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center}.tog{display:flex;align-items:center;justify-content:space-between;padding:6px 0;cursor:pointer;user-select:none}.tog+.tog{border-top:1px dashed rgba(255,255,255,.05)}.tog .lab{font-size:13px;color:#cdd4e8;display:flex;align-items:center;gap:8px}.tog .lab .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.sw{width:36px;height:20px;border-radius:20px;background:#ffffff21;position:relative;transition:.18s;flex:none}.sw:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}.sw.on{background:var(--accent)}.sw.on:after{transform:translate(16px)}.frequency-value{color:#ffd166;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}.frequency-range{--accent:#ffd166}.frequency-labs span:nth-child(2){position:relative;left:4px}.frequency-summary{margin-top:9px;font-size:11.5px;color:#e7d7ad;font-weight:600;font-variant-numeric:tabular-nums}.frequency-source{margin-top:4px;font-size:9.5px;color:var(--muted2)}.frequency-source a{color:#d9bd78;text-decoration:none}.frequency-source a:hover{text-decoration:underline}.range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,40%),rgba(255,255,255,.14) var(--fill,40%));outline:none;margin:6px 0 3px;cursor:pointer}.range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 8px var(--accent),0 1px 3px #0006}.range::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 8px var(--accent)}.range-lab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted2)}.lv-labs span{cursor:pointer;font-weight:600;transition:color .15s}.lv-labs span:hover{color:var(--txt)}.lv-labs span.on{color:var(--accent)}.prog{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:11.5px;color:var(--muted)}.prog .pl{width:40px;font-weight:600;flex:none}.prog .pbar{flex:1;height:5px;border-radius:4px;background:#ffffff1a;overflow:hidden}.prog .pfill{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;box-shadow:0 0 6px var(--accent);transition:width .3s}.prog .pct{min-width:58px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted2)}#legend{display:flex;flex-direction:column;gap:1px;max-height:210px;overflow:auto;margin:-3px -4px;padding:3px 4px}#legend::-webkit-scrollbar{width:6px}#legend::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.lg{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:7px;cursor:pointer;transition:.12s}.lg:hover{background:#ffffff0d}.lg.off{opacity:.32}.lg .c{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 7px -1px currentColor}.lg .nm{font-size:12px;color:#d2d8ea;line-height:1.15}.lg .nm small{display:block;color:var(--muted2);font-size:10px}.lg .ct{margin-left:auto;font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}.font-picker{display:flex;flex-wrap:wrap;gap:6px}.font-picker button{font-size:11px;padding:5px 10px;border:1px solid var(--stroke2);background:#ffffff08;color:var(--muted);border-radius:8px;cursor:pointer;transition:.13s;font-family:inherit}.font-picker button:hover{background:#8be8dd1a;border-color:var(--accent);color:#fff}.font-picker button.on{background:#8be8dd29;border-color:var(--accent);color:var(--accent)}.dock-foot{padding:10px 15px;display:flex;gap:8px}.btn{flex:1;border:1px solid var(--stroke2);background:#ffffff08;color:#cdd4e8;font-family:inherit;font-size:12px;font-weight:600;padding:8px;border-radius:9px;cursor:pointer;transition:.15s}.btn:hover{background:#ffffff17;border-color:var(--accent);color:#fff}#dockToggle{display:none}#detail{position:fixed;right:20px;top:76px;z-index:25;width:312px;max-width:calc(100vw - 40px);background:var(--panel-solid);border:1px solid var(--stroke2);border-radius:16px;box-shadow:var(--shadow);transform:translate(120%);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-height:calc(100vh - 96px);overflow-y:auto}#detail.show{transform:none}#detail .dhead{padding:18px 18px 14px;position:relative;overflow:hidden}#detail .dhead .glow{position:absolute;inset:0;opacity:.22;filter:blur(30px);z-index:0}#detail .dclose{position:absolute;top:12px;right:12px;z-index:3;border:0;background:#ffffff14;color:#cfd6ea;width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1}#detail .dclose:hover{background:#ffffff29}#detail .zh{position:relative;z-index:2;font-family:Noto Sans SC,sans-serif;font-size:52px;font-weight:500;line-height:1.05;letter-spacing:.02em}#detail .row1{position:relative;z-index:2;display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}#detail .py{font-size:19px;color:#fff;font-weight:600}.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:20px;text-transform:uppercase}.badge.hsk1{background:#8be8dd29;color:#8be8dd}.badge.hsk2{background:#b388eb2e;color:#c5a6f5}.badge.hsk3{background:#ff8a6529;color:#ffab91}.badge.hub{background:#eaf0fb29;color:#eaf0fb}.badge.supplementary{background:#ffb70324;color:#ffca4b}.badge.pos{background:#ffffff12;color:var(--muted);text-transform:none;font-weight:600}.sound-btn{position:relative;width:30px;height:30px;padding:0;display:grid;place-items:center;flex:none;border:1px solid var(--stroke2);border-radius:50%;background:#ffffff09;color:var(--muted2);cursor:not-allowed;transition:.15s}.sound-btn .pw{font-size:10px;line-height:1;transform:translate(1px)}.sound-btn.on{border-color:#8be8dd80;background:#8be8dd1a;color:var(--accent);cursor:pointer}.sound-btn.on:hover{background:#8be8dd33;border-color:var(--accent);color:#d7fff8}.sound-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sound-btn:disabled{opacity:.42}.sound-btn.playing .pw{animation:pulse .45s ease}.sound-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.audio-btn{position:relative;z-index:2}.known-btn{position:relative;z-index:2;margin-top:8px;display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--stroke2);background:#ffffff08;color:var(--muted);font-family:inherit;font-size:12.5px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:.15s}.known-btn .pw{width:22px;height:22px;border-radius:50%;background:#ffffff14;display:grid;place-items:center;font-size:12px;flex:none}.known-btn:hover{background:#ffffff12;color:#cdd4e8}.known-btn.on{border-color:#8be8dd8c;background:#8be8dd1a;color:#d7fff8}.known-btn.on .pw{background:var(--accent);color:#08201d}.known-btn.on:hover{background:#8be8dd2e}@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.28)}to{transform:scale(1)}}.ex{padding:13px 0;border-bottom:1px solid var(--stroke)}.ex .rh{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}.ex-zh{font-family:Noto Sans SC,sans-serif;font-size:19px;color:#eef1fa;line-height:1.55}.ex-zh .hl{color:#ffd166;font-weight:700}.ex-py{font-size:13px;color:var(--accent);margin-top:4px}.ex-en{font-size:13px;color:#dbe1f0;margin-top:6px}.ex-vi{font-size:13px;color:#a7f3d0;margin-top:2px}.ex-audio{width:26px;height:26px}.ex-audio .pw{font-size:9px}#detail .dbody{padding:4px 18px 16px}.mean{padding:12px 0;border-bottom:1px solid var(--stroke)}.mean .en{font-size:15px;color:#eef1fa;font-weight:500}.mean .vi{font-size:14px;color:#a7f3d0;margin-top:3px}.meta-grid{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--stroke)}.meta-grid .m .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:600}.meta-grid .m .v{font-size:14px;color:#dbe1f0;margin-top:3px}.meta-grid .m .v.hv{color:#f4c78a;font-weight:600}.frequency-card{padding:7px 9px;margin:10px 0 0;border:1px solid rgba(255,209,102,.2);border-radius:9px;background:linear-gradient(135deg,#ffd16614,#ff9f6809)}.frequency-line{display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:9.5px;line-height:1.3;font-variant-numeric:tabular-nums}.frequency-card .rank{color:#ffd166;font-size:11.5px;font-weight:700}.frequency-card .rate{color:#d9deec}.frequency-card .sep,.frequency-card .source{color:var(--muted2)}.frequency-card.unranked{border-color:var(--stroke);background:#ffffff06}.frequency-card.unranked .rank{color:var(--muted2)}.rel{padding-top:12px}.strokes{padding:13px 0;border-bottom:1px solid var(--stroke)}.strokes .rh{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.radical-key{display:inline-flex;align-items:center;gap:5px;letter-spacing:0;text-transform:none;font-size:10px;font-weight:500;color:var(--muted);white-space:nowrap}.radical-dot{width:7px;height:7px;border-radius:2px;background:#ffd166;box-shadow:0 0 7px #ffd16673}.stroke-grid{display:flex;flex-wrap:wrap;gap:10px}.stroke-cell{width:80px;height:80px;border:1px solid var(--stroke);border-radius:10px;background:#0003;display:grid;place-items:center;overflow:hidden}.stroke-cell.fallback{font-family:Noto Sans SC,sans-serif;font-size:36px;color:var(--muted2)}.stroke-target{width:72px;height:72px}.rel .rh{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted2);font-weight:600;margin-bottom:9px}.rel .grp{margin-bottom:10px}.rel .grp .gc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:6px}.rel .grp .gc b{font-family:Noto Sans SC,sans-serif;color:#eaf0fb;font-size:15px;font-weight:500}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:baseline;gap:5px;background:#ffffff0d;border:1px solid var(--stroke);border-radius:8px;padding:5px 9px;cursor:pointer;transition:.13s}.chip:hover{background:#8be8dd21;border-color:var(--accent)}.chip .z{font-family:Noto Sans SC,sans-serif;font-size:15px;color:#eef1fa}.chip .p{font-size:11px;color:var(--muted)}.rel .none{font-size:12.5px;color:var(--muted2);font-style:italic}#hint{position:fixed;left:50%;bottom:22px;transform:translate(-50%);z-index:15;background:var(--panel);border:1px solid var(--stroke);border-radius:11px;padding:9px 15px;font-size:12.5px;color:var(--muted);box-shadow:var(--shadow);backdrop-filter:blur(10px);display:flex;gap:8px 16px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:calc(100vw - 24px);transition:opacity .4s}#hint b{color:#cdd4e8;font-weight:600}#hint .x{cursor:pointer;color:var(--muted2);margin-left:4px}#loading{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--bg);transition:opacity .5s}#loading.hide{opacity:0;pointer-events:none}#loading .sp{width:34px;height:34px;border:3px solid rgba(255,255,255,.14);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}#loading .lt{position:absolute;bottom:38%;font-size:13px;color:var(--muted);letter-spacing:.02em}@media(max-width:760px){#brand h1{font-size:16px}#brand .sub{display:none}#topRight{position:absolute;top:16px;right:12px}.play-link{width:37px;padding:0;justify-content:center}.play-link-label{display:none}#search{width:150px}#search:focus{width:170px}#dock{left:12px;bottom:12px;width:210px;transform:translateY(calc(100% - 46px))}#dock{max-height:calc(100vh - 24px)}#dock.open{transform:none}#dockToggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;cursor:pointer;font-size:12px;font-weight:600;color:#cdd4e8;letter-spacing:.03em}#dockToggle .ar{transition:.2s}#dock.open #dockToggle .ar{transform:rotate(180deg)}#detail{inset:auto 12px 12px;width:auto;max-height:64vh;overflow:auto}#detail.show{transform:none}#hint{display:none}}