:root{color-scheme:light dark; --bg:#ffffff; --fg:#0f0f0f; --surface:#ffffff; --muted:#666666; --line:rgba(15,15,15,0.12); --line-strong:rgba(15,15,15,0.22); --cell:#ffffff; --cell-hover:color-mix(in oklab,var(--surface),var(--fg) 4%); --focus:#0f0f0f; --overlay:rgba(255,255,255,0.94); --sheet-margin:clamp(12px,3vmin,28px)}@media (prefers-color-scheme:dark){:root{ --bg:#0f0f0f; --fg:#f7f7f2; --surface:#151515; --muted:#a7a7a0; --line:rgba(247,247,242,0.13); --line-strong:rgba(247,247,242,0.24); --cell:#151515; --cell-hover:color-mix(in oklab,var(--surface),var(--fg) 8%); --focus:#f7f7f2; --overlay:rgba(17,16,15,0.95)}} *{box-sizing:border-box}html,body{height:100%;margin:0;min-height:100%}body{background:var(--bg);color:var(--fg);font-family:ui-serif,"Songti SC",STSong,"Noto Serif CJK SC","Noto Serif CJK TC",serif;overflow:hidden;text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}#app{display:grid;height:100svh;padding:var(--sheet-margin);place-items:center;width:100vw}.site-nav{align-items:center;background:color-mix(in oklab,var(--bg),transparent 5%);display:flex;font:15px/1.4 "Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;gap:18px;justify-content:space-between;padding:var(--page-pad-y) var(--page-pad-x)}.brand,.site-nav a{color:inherit;text-decoration:none}.brand{font-family:inherit;font-size:18px;font-weight:650}.site-nav nav{display:flex;gap:16px}.site-nav nav a{color:var(--muted)}.site-nav nav a:hover,.site-nav nav a[aria-current="page"]{color:var(--focus)}.matrix{display:grid;gap:1px;grid-template-columns:repeat(70,minmax(0,1fr));grid-template-rows:repeat(50,minmax(0,1fr));height:min(calc(100svh - (var(--sheet-margin) * 2)),calc((100vw - (var(--sheet-margin) * 2))/1.4));max-height:100%;max-width:100%;padding:0;width:min(calc(100vw - (var(--sheet-margin) * 2)),calc((100svh - (var(--sheet-margin) * 2)) * 1.4))}.cell{align-items:center;background:var(--cell);border:0;color:var(--fg);cursor:pointer;display:flex;font-family:inherit;font-size:clamp(5px,min(1.15vw,1.35svh),14px);height:100%;justify-content:center;line-height:1;min-width:0;padding:0;width:100%}.cell:hover{background:var(--cell-hover)}.cell.selected{box-shadow:inset 0 0 0 2px var(--focus);position:relative;z-index:1}.detail{align-items:center;backdrop-filter:blur(10px);background:var(--overlay);display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:10}.detail[hidden]{display:none}.detail-card{display:grid;gap:clamp(14px,3vw,24px);justify-items:center;max-width:min(720px,100%);width:100%}.pinyin{color:var(--muted);font:22px/1.2 ui-sans-serif,system-ui,sans-serif;min-height:28px;text-align:center}.middle{align-items:center;display:grid;gap:clamp(12px,3vw,28px);grid-template-columns:44px minmax(0,1fr);justify-items:center;width:min(460px,100%)}.zhuyin{color:var(--muted);font-size:26px;line-height:1.15;min-height:160px;writing-mode:vertical-rl}.big-char{font-size:clamp(150px,42vw,340px);line-height:0.95;min-width:0;text-align:center}.english{color:var(--fg);font:20px/1.45 ui-sans-serif,system-ui,sans-serif;max-width:52ch;min-height:30px;text-align:center}@media (max-width:420px){.site-nav{align-items:flex-start}.site-nav nav{gap:12px}}