:root{--paper: #ffffff;--surface: #f4f5f7;--ink: #17191e;--muted: #5b616e;--line: #e3e5ea;--accent: #c4301c;--accent-strong: #9c2313;--accent-soft: #fbeeeb;--grid-line: rgba(196, 48, 28, .22);--t1: #d6332a;--t2: #d27306;--t3: #2b8a3e;--t4: #1f5fd6;--t5: #7b818c;--radius: 12px;--radius-sm: 8px;--shadow: 0 1px 2px rgba(23, 25, 30, .04), 0 4px 14px rgba(23, 25, 30, .05);--font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;--font-hanzi: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif}*{box-sizing:border-box}html{font-family:var(--font-sans);color:var(--ink);background:var(--surface);-webkit-text-size-adjust:100%}body{margin:0;line-height:1.6;font-size:1rem}a{color:var(--accent-strong);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}:focus-visible{outline:2px solid var(--t4);outline-offset:2px;border-radius:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hz{font-family:var(--font-hanzi);font-weight:500}.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}.pinyin{font-weight:500}.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t5{color:var(--t5)}.tone-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.85rem;color:var(--muted);margin:0;padding:0;list-style:none}.tone-legend li{display:inline-flex;align-items:center;gap:.4rem}.tone-legend .dot{width:.6rem;height:.6rem;border-radius:999px;background:currentColor}.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:4rem;padding-top:.6rem;padding-bottom:.6rem;flex-wrap:wrap}.logo{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}.logo:hover{text-decoration:none}.logo-mark{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;font-family:var(--font-hanzi);font-size:1.3rem;line-height:1;color:var(--accent);background:var(--paper);border:1.5px solid var(--accent);border-radius:6px;background-image:linear-gradient(var(--grid-line),var(--grid-line)),linear-gradient(var(--grid-line),var(--grid-line));background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat}.site-search{flex:1 1 18rem;display:flex;max-width:30rem;margin-left:auto}.site-search input{flex:1;min-width:0;height:2.5rem;padding:0 .9rem;border:1px solid var(--line);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}.site-search input:focus{outline:none;border-color:var(--ink);background:var(--paper)}.site-search button{height:2.5rem;padding:0 1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}.site-search button:hover{background:var(--accent);border-color:var(--accent)}.nav{display:flex;gap:.25rem}.nav a{color:var(--muted);font-size:.92rem;font-weight:500;padding:.45rem .75rem;border-radius:var(--radius-sm)}.nav a:hover{color:var(--ink);background:var(--surface);text-decoration:none}.nav a[aria-current=page]{color:var(--ink);background:var(--surface)}@media(max-width:720px){.header-inner{gap:.6rem .75rem}.site-search{order:3;flex-basis:100%;max-width:none}.nav{margin-left:auto}.nav a{padding:.4rem .55rem;font-size:.88rem}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:var(--radius-sm);padding:.65rem 1.2rem;border:1px solid transparent;font:inherit;font-weight:600;font-size:.95rem;line-height:1.3;cursor:pointer}.btn:hover{text-decoration:none}.btn-primary{background:var(--accent);color:var(--paper)}.btn-primary:hover{background:var(--accent-strong);color:var(--paper)}.btn-outline{border-color:var(--line);color:var(--ink);background:var(--paper)}.btn-outline:hover{border-color:var(--ink);color:var(--ink)}.hero{padding:2.5rem 0 1.5rem}.eyebrow{margin:0 0 .5rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.hero h1{font-size:clamp(1.75rem,3.5vw,2.4rem);margin:0 0 .6rem;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}.hero p{color:var(--muted);margin:0;max-width:44rem;font-size:1.05rem;text-wrap:pretty}.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:3rem 0 1rem}.section-head h2,.section-title{font-size:1.3rem;margin:0;letter-spacing:-.01em;line-height:1.3}.section-title{margin:3rem 0 1rem}.section-head p{margin:0;color:var(--muted);font-size:.92rem}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.5rem;margin:1rem 0}.card h3{margin:0 0 .4rem;font-size:1.05rem}.card p{margin:0;color:var(--muted);font-size:.95rem}.cell{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}.cell:before{content:"";position:absolute;inset:10%;pointer-events:none;background-image:linear-gradient(var(--grid-line),var(--grid-line)),linear-gradient(var(--grid-line),var(--grid-line));background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat;border:1px dashed var(--grid-line);opacity:0;transition:opacity .15s ease}.home-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center;padding:3.5rem 0 2.5rem}.home-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.12;letter-spacing:-.03em;margin:0 0 1rem;text-wrap:balance}.home-hero .lead{color:var(--muted);font-size:1.1rem;margin:0 0 1.75rem;max-width:34rem;text-wrap:pretty}.lookup{display:flex;gap:.5rem;max-width:34rem}.lookup input{flex:1;min-width:0;height:3.25rem;padding:0 1.1rem;border:1.5px solid var(--ink);border-radius:var(--radius-sm);background:var(--paper);font:inherit;font-size:1.05rem;color:var(--ink)}.lookup input:focus{outline:3px solid var(--accent-soft);outline-offset:0}.lookup .btn{height:3.25rem;padding:0 1.4rem}.lookup-hints{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}.lookup-hints a{display:inline-flex;align-items:baseline;gap:.3rem;padding:.2rem .6rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:var(--ink)}.lookup-hints a:hover{border-color:var(--ink);text-decoration:none}.lookup-hints .hz{font-size:1rem}.specimen{display:grid;grid-template-columns:1fr;gap:1rem;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow)}.specimen-cell{position:relative;aspect-ratio:1;border:2px solid var(--accent);border-radius:4px;display:grid;place-items:center}.specimen-cell svg.guide{position:absolute;inset:0;width:100%;height:100%}.specimen-cell .glyph{position:relative;width:82%;height:82%;color:var(--ink)}.specimen-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.specimen-meta .pinyin{font-size:1.5rem;font-weight:600}.specimen-meta .gloss{color:var(--muted);font-size:.92rem}@media(max-width:860px){.home-hero{grid-template-columns:1fr;gap:2rem;padding-top:2.25rem}.specimen{max-width:22rem}}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:860px){.tools{grid-template-columns:1fr}}.tool{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.4rem;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}a.tool:hover{border-color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}.tool .tool-sample{font-size:1.05rem;margin:0 0 .25rem;min-height:1.6em}.tool .tool-sample .hz{font-size:1.25rem;margin-right:.35rem;color:var(--ink)}.tool h3{margin:0;font-size:1.05rem}.tool p{margin:0;color:var(--muted);font-size:.93rem}.tool .more{margin-top:auto;padding-top:.5rem;font-size:.88rem;font-weight:600;color:var(--accent-strong)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem;margin:0 0 1.5rem}.char-card{display:flex;flex-direction:column;gap:.4rem;color:var(--ink);text-align:center}.char-card .cell svg{position:relative;width:66%;height:66%}.char-card .pinyin{font-size:.88rem}.char-card:hover{text-decoration:none}.char-card:hover .cell{border-color:var(--accent)}.char-card:hover .cell:before{opacity:1}.index-toolbar{position:sticky;top:4rem;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;background:var(--surface);padding:.75rem 0;margin-bottom:.5rem;border-bottom:1px solid var(--line)}@media(max-width:720px){.index-toolbar{top:6.6rem}}.index-filter{flex:1 1 16rem;max-width:22rem;position:relative}.index-filter input{width:100%;height:2.5rem;padding:0 .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);font:inherit;font-size:.95rem;color:var(--ink)}.index-filter input:focus{outline:none;border-color:var(--ink)}.band-nav{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}.band-nav a{white-space:nowrap;font-size:.82rem;font-weight:500;color:var(--muted);padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.band-nav a:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}.filter-count{font-size:.85rem;color:var(--muted);margin:0}.filter-empty{color:var(--muted);padding:2rem 0;text-align:center}.index-band h2{display:flex;align-items:baseline;gap:.6rem;font-size:1.1rem;margin:2rem 0 .75rem;scroll-margin-top:9rem}.index-band h2 small{font-size:.82rem;color:var(--muted);font-weight:500}.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;margin:0 0 1rem}a.idx{display:flex;flex-direction:column;gap:.3rem;color:var(--ink);text-align:center}a.idx .cell b{position:relative;font-family:var(--font-hanzi);font-weight:500;font-size:2rem;line-height:1}a.idx .pinyin{font-size:.8rem}a.idx:hover{text-decoration:none}a.idx:hover .cell{border-color:var(--accent)}a.idx:hover .cell:before{opacity:1}.crumbs{color:var(--muted);font-size:.85rem;margin:1.5rem 0 0}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}.char-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:2.5rem;align-items:start;margin:1.25rem 0 0}.char-aside{position:sticky;top:5rem;display:flex;flex-direction:column;gap:1rem}@media(max-width:860px){.char-layout{grid-template-columns:1fr;gap:1.5rem}.char-aside{position:static}}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}.panel-label{margin:0 0 .75rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.char-head{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.75rem}.title-row{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}.char-head h1{font-family:var(--font-hanzi);font-weight:500;font-size:4.5rem;margin:0;line-height:1}.reading-block{display:flex;flex-direction:column;gap:.35rem;min-width:0}.char-head .py{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:0;font-size:1.9rem;font-weight:600;line-height:1.2}.char-head .py .sep{color:var(--line);font-weight:400}.reading-note{margin:0;font-size:.85rem;color:var(--muted)}.char-head .def{margin:1.1rem 0 0;font-size:1.15rem;line-height:1.55;max-width:44rem;text-wrap:pretty}.speak-btn{display:inline-grid;place-items:center;width:3rem;height:3rem;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.speak-btn svg{width:1.3rem;height:1.3rem}.speak-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}button.py-btn{border:0;background:none;cursor:pointer;padding:0 0 2px;font:inherit;color:inherit;border-bottom:2px dotted currentColor}button.py-btn:hover{border-bottom-style:solid}.spell-box{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line)}.spell-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin:0;font-size:1rem}.spell-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:.25rem}.spell-row .sep{color:var(--line)}.spell-group{display:inline-flex;align-items:center;gap:.35rem}.spell-group .op{color:var(--muted)}button.part-btn{border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:.15rem .55rem;border-radius:6px;font:inherit;font-weight:600;color:var(--ink)}button.part-btn:hover{border-color:var(--ink)}button.part-btn.whole{background:var(--paper)}button.spell-play{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border:0;background:var(--ink);color:var(--paper);cursor:pointer;font-size:.65rem;line-height:1;border-radius:999px}button.spell-play:hover{background:var(--accent)}.played{animation:played-pulse .45s ease}@media(prefers-reduced-motion:reduce){.played{animation:none}}#audio-status:empty{display:none}#audio-status{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}@keyframes played-pulse{0%{transform:scale(1)}35%{transform:scale(1.12)}to{transform:scale(1)}}.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;margin:1.25rem 0 0;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.facts div{background:var(--paper);padding:.7rem .9rem}.facts dt{font-size:.75rem;color:var(--muted);margin:0 0 .15rem}.facts dd{margin:0;font-size:1rem;font-weight:600}.facts dd .hz{font-size:1.15rem}.facts dd small{font-weight:400;color:var(--muted);font-size:.82rem}.section-nav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;margin:1.5rem 0 0;border-bottom:1px solid var(--line)}.section-nav a{white-space:nowrap;padding:.6rem .85rem;font-size:.9rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.section-nav a:hover{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}.char-section{scroll-margin-top:5.5rem}.char-section>h2{font-size:1.25rem;margin:2.25rem 0 .4rem;letter-spacing:-.01em}.char-section>.section-intro{color:var(--muted);margin:0 0 1rem;font-size:.95rem}.stroke-player svg.big{display:block;width:100%;height:auto;aspect-ratio:1;background:var(--paper)}.stroke-player .rice-grid line{stroke:var(--grid-line);stroke-width:4;stroke-dasharray:18 14}.stroke-player .rice-grid rect{fill:none;stroke:var(--accent);stroke-width:8}.player-controls{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:1rem}.pc-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--radius-sm);padding:.45rem .75rem;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;line-height:1.3;transition:border-color .12s ease,color .12s ease,background .12s ease}.pc-btn:hover{border-color:var(--ink)}.pc-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);flex:1 1 auto}.pc-btn.primary:hover{background:var(--accent);border-color:var(--accent)}.pc-btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}.player-speed{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.42rem .5rem;font:inherit;font-size:.85rem;background:var(--paper);color:var(--ink);cursor:pointer}.player-status{font-size:.85rem;color:var(--muted);margin:.6rem 0 0}.stroke-player .stk{fill:var(--ink);transition:opacity .15s ease}.mode-playing .stk.done,.mode-paused .stk.done{transition:none}#stk-draw{fill:var(--ink)}#pen-tip{fill:var(--accent);stroke:#fff;stroke-width:6;opacity:0;pointer-events:none}.stroke-player .guides{transition:opacity .18s ease}.stroke-player text.num{transition:opacity .18s ease}.mode-playing .stk:not(.done),.mode-paused .stk:not(.done){opacity:0}.mode-playing.trace .stk:not(.done),.mode-paused.trace .stk:not(.done){opacity:1;fill:#dcdfe5}.mode-playing .guides,.mode-paused .guides{opacity:0}.mode-playing text.num,.mode-paused text.num{opacity:.3}.mode-playing text.num.done,.mode-paused text.num.done{opacity:1}.mode-playing #pen-tip,.mode-paused #pen-tip{opacity:1}@media(prefers-reduced-motion:reduce){.stroke-player .stk,.stroke-player .guides,.stroke-player text.num{transition:none}}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{display:inline-flex;align-items:center;gap:.25rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.25rem .8rem;font-size:.85rem;font-weight:500}a.chip:hover{border-color:var(--ink);text-decoration:none}a.chip.hsk{background:var(--surface);color:var(--t4);font-weight:600}a.chip.hsk:hover{background:var(--t4);border-color:var(--t4);color:var(--paper)}.hero .hl{color:var(--accent)}.notes-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:720px){.notes-row{grid-template-columns:1fr}}.note-card{margin:0}.note-card h3{margin:0 0 .6rem;font-size:1rem}.note-card .ety-type{display:inline-block;margin:0 0 .6rem;font-size:.78rem;font-weight:600;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:.15rem .5rem}.note-card .ety-line{margin:0 0 .5rem;font-size:1rem;color:var(--ink);line-height:1.6}.note-card .ety-line b{font-family:var(--font-hanzi);font-weight:600;font-size:1.3rem}.note-card .ety-line.story{color:var(--muted)}.note-card b.kw{font-family:var(--font-sans);color:var(--ink);font-size:1.4rem;font-weight:700}.note-card .frame-no{color:var(--muted);font-size:.82rem;font-weight:400}.note-card .src-note{margin:.75rem 0 0;font-size:.8rem;color:var(--muted)}.comp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}.comp-label{font-size:.8rem;color:var(--muted)}.chip.comp{width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-radius:var(--radius-sm);font-family:var(--font-hanzi);font-size:1.35rem;font-weight:500;position:relative}a.chip.comp:hover{border-color:var(--accent);color:var(--ink)}.chip.comp .mult{position:absolute;right:2px;bottom:0;font-family:var(--font-sans);font-size:.65rem;color:var(--muted)}.chip.comp.unknown{width:auto;padding:0 .7rem;border-style:dashed;font-family:var(--font-sans);font-size:.8rem;cursor:help;color:var(--muted)}.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:720px){.rel-grid{grid-template-columns:1fr}}.rel-label{margin:0 0 .75rem;font-size:.9rem;color:var(--muted)}.rel-label b{color:var(--ink)}.rel-label .hz{font-size:1.1rem}.rel-chips{display:flex;flex-wrap:wrap;gap:.4rem}.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}table.words{width:100%;border-collapse:collapse}table.words th,table.words td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:baseline}table.words th{color:var(--muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--surface)}table.words tr:last-child td{border-bottom:0}table.words td.hw{font-family:var(--font-hanzi);font-size:1.3rem;font-weight:500;white-space:nowrap}table.words td.hw a{color:var(--ink);border-bottom:1px solid var(--line)}table.words td.hw a:hover{border-bottom-color:var(--accent);text-decoration:none}table.words td.py{white-space:nowrap;font-size:1rem}table.words td.mean{color:var(--muted)}table.words tr.lead-row td{background:var(--accent-soft)}.tag{display:inline-block;font-family:var(--font-sans);font-size:.7rem;color:var(--accent-strong);border:1px solid currentColor;border-radius:999px;padding:0 .45rem;margin-left:.4rem;vertical-align:middle;font-weight:500}.site-footer{border-top:1px solid var(--line);background:var(--paper);margin-top:5rem;padding:2rem 0 3rem;color:var(--muted);font-size:.85rem}.footer-inner{display:flex;flex-direction:column;gap:.75rem}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.footer-top .logo{font-size:1rem}.footer-links{display:flex;gap:1rem;flex-wrap:wrap}.site-footer p{margin:0;max-width:60rem}.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}.site-footer a:hover{color:var(--ink)}.footer-links a{text-decoration:none;color:var(--ink);font-weight:500}