:root{--text:#4b4753;--text-h:#08060d;--bg:#faf9f7;--bar-bg:#fff;--panel-bg:#fff;--border:#e5e4e7;--accent:#aa3bff;--accent-bg:#aa3bff1a;--ink-current:#08060d;--ink-done:#c7c4cd;--grid-line:#e9dff5;--shadow:#0000000f 0 4px 12px -2px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#b6b2bd;--text-h:#f3f4f6;--bg:#121218;--bar-bg:#1a1a22;--panel-bg:#1a1a22;--border:#2e2d38;--accent:#c084fc;--accent-bg:#c084fc26;--ink-current:#f3f4f6;--ink-done:#4a4854;--grid-line:#322b3d;--shadow:#0006 0 4px 12px -2px}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}#root{min-height:100dvh}.app{flex-direction:column;min-height:100dvh;display:flex}.app-empty{padding:28px 16px;padding-left:calc(16px + var(--safe-left));padding-right:calc(16px + var(--safe-right));color:var(--text);text-align:center;font-size:14px}.search-box{z-index:20;background:var(--bar-bg);border-bottom:1px solid var(--border);padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));position:sticky;top:0}.search-input{width:100%;font:inherit;border:1.5px solid var(--border);background:var(--panel-bg);color:var(--text-h);border-radius:12px;outline:none;padding:13px 14px;font-size:17px;transition:border-color .15s;display:block}.search-input:focus{border-color:var(--accent)}.search-dropdown{z-index:10;top:calc(100% - 2px);left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;max-height:min(420px,70dvh);margin:0;padding:6px;list-style:none;position:absolute;overflow-y:auto;box-shadow:0 12px 24px -8px #0000002e}.search-option{cursor:pointer;border-radius:8px;align-items:baseline;gap:10px;padding:10px;display:flex}.search-option--active,.search-option:hover{background:var(--accent-bg)}.search-option-hanzi{color:var(--text-h);min-width:2.4em;font-size:19px;font-weight:600}.search-option-pinyin{color:var(--accent);min-width:4.5em;font-size:14px}.search-option-meaning{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.search-empty{z-index:10;top:calc(100% - 2px);left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));background:var(--panel-bg);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:14px 16px;font-size:14px;position:absolute}.level-badge{color:var(--accent);background:var(--accent-bg);letter-spacing:.02em;border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:11px;font-weight:700}.level-badge--sm{padding:1px 6px;font-size:10px}.word-list{padding:12px calc(12px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(12px + var(--safe-left));flex-direction:column;flex:1;gap:10px;display:flex}.word-result{background:var(--panel-bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;padding:16px}.word-result-header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:14px;padding-bottom:12px;display:flex}.word-result-hanzi{color:var(--text-h);margin:0;font-size:30px;font-weight:700}.word-result-meta{flex-direction:column;gap:3px;display:flex}.word-result-pinyin-row{align-items:center;gap:8px;display:flex}.word-result-pinyin{color:var(--accent);font-size:15px;font-weight:600}.word-result-trad{color:var(--text);margin-left:8px;font-size:18px;font-weight:400}.word-result-meanings{counter-reset:meaning;margin:0;padding:0;list-style:none}.word-result-meanings li{counter-increment:meaning}.word-result-meanings li:not(:only-child):before{content:counter(meaning) ". ";color:var(--accent);font-weight:600}.word-result-meaning{color:var(--text);font-size:13px}.word-result-tags{flex-wrap:wrap;gap:4px;margin-top:2px;display:flex}.word-tag{color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:11px}.word-result-rows{flex-direction:column;gap:14px;display:flex}.char-row{align-items:center;gap:12px;display:flex}.char-row-label{flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:2px;min-width:48px;display:flex}.char-row-hanzi{color:var(--text-h);font-size:22px;font-weight:600}.char-row-pinyin{color:var(--accent);font-size:12px;font-weight:600}.char-row-count{color:var(--text);opacity:.7;font-size:10px}.char-row-panels{flex:1;align-items:center;gap:6px;min-width:0;padding:4px 2px;display:flex;overflow-x:auto}.char-row-divider{background:var(--border);flex-shrink:0;align-self:stretch;width:1px;margin:4px 2px}.stroke-panel{border-radius:8px;flex-shrink:0;width:56px;height:56px;overflow:hidden}.stroke-panel-loading{background:linear-gradient(90deg, var(--accent-bg), var(--border), var(--accent-bg));background-size:200% 100%;border-radius:8px;width:100%;height:56px;animation:1.2s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stroke-panel-bg{fill:var(--bg)}.stroke-panel--reference .stroke-panel-bg{fill:var(--accent-bg)}.stroke-panel-guides line{stroke:var(--grid-line);stroke-width:1px;stroke-dasharray:3 3}.stroke-solid{fill:var(--ink-current)}.stroke-done{fill:var(--ink-done)}.stroke-current{fill:var(--accent)}@media (width>=720px){.search-box{padding-left:calc(50vw - 340px + var(--safe-left));padding-right:calc(50vw - 340px + var(--safe-right))}.search-dropdown,.search-empty{left:calc(50vw - 340px + var(--safe-left));right:calc(50vw - 340px + var(--safe-right))}.word-list{width:100%;max-width:680px;padding-left:var(--safe-left);padding-right:var(--safe-right);margin:0 auto}}@media (width<=380px){.stroke-panel,.stroke-panel-loading{width:46px;height:46px}.char-row-label{min-width:40px}}
