@import "https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600&family=Noto+Serif+HK:wght@400;600&family=Noto+Serif+JP:wght@400;600&family=Noto+Serif+SC:wght@400;600&family=Noto+Serif+TC:wght@400;600&display=swap";@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.static{position:static}}:root{--bg:#f5f4f0;--surface:#fbfaf7;--surface-strong:#fff;--ink:#161714;--muted:#6c6d66;--faint:#989990;--line:#dcdcd4;--accent:#174b3e;--accent-soft:#dfe9e4;--orange:#b65d31;--sans:"Noto Sans SC", "Noto Sans CJK SC", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#111310;--surface:#171a16;--surface-strong:#1e211d;--ink:#f0f1eb;--muted:#abada5;--faint:#7d8178;--line:#363a34;--accent:#9cc9b6;--accent-soft:#263b32;--orange:#df9268;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111310;--surface:#171a16;--surface-strong:#1e211d;--ink:#f0f1eb;--muted:#abada5;--faint:#7d8178;--line:#363a34;--accent:#9cc9b6;--accent-soft:#263b32;--orange:#df9268;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}::selection{color:var(--ink);background:#e4c7aa}.site-shell{min-height:100vh;overflow:clip}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;width:min(1440px,100% - 64px);height:84px;margin:0 auto;display:flex}.wordmark{letter-spacing:.03em;align-items:center;gap:11px;font-size:17px;font-weight:600;display:inline-flex}.wordmark-mark{border:1px solid var(--ink);place-items:center;width:36px;height:36px;font-family:Noto Serif SC,serif;font-size:22px;line-height:1;display:grid}.top-actions{color:var(--muted);align-items:center;gap:30px;font-size:13px;display:flex}.top-actions a{transition:color .2s}.top-actions a:hover{color:var(--ink)}.icon-button{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;width:38px;height:38px;font-size:17px}main{width:min(1440px,100% - 64px);margin:0 auto}.hero{text-align:center;flex-direction:column;align-items:center;min-height:610px;padding:100px 0 80px;display:flex}.eyebrow,.section-kicker{color:var(--orange);letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px;font-size:11px;font-weight:700}.hero h1{letter-spacing:-.055em;max-width:900px;margin:0;font-family:Noto Serif SC,serif;font-size:clamp(49px,6.4vw,92px);font-weight:400;line-height:1.08}.hero h1 span{color:var(--muted)}.hero-copy{width:min(560px,100%);color:var(--muted);margin:28px auto 0;font-size:16px;line-height:1.8}.search-form{background:var(--surface-strong);border:1px solid var(--line);border-radius:3px;align-items:center;gap:13px;width:min(780px,100%);min-height:72px;margin-top:46px;padding:8px 9px 8px 22px;display:flex;box-shadow:0 16px 50px #282a2314}.search-icon{color:var(--faint);font-size:25px;transform:rotate(-20deg)}.search-form input{min-width:0;height:50px;color:var(--ink);background:0 0;border:0;outline:0;flex:1;font-size:15px}.search-form input::placeholder{color:var(--faint)}.search-form button{color:#f7faf8;cursor:pointer;background:#184c3f;border:0;border-radius:2px;align-self:stretch;padding:0 23px;font-size:13px}.search-form button:disabled{opacity:.65;cursor:wait}.search-form button span{margin-left:8px}.search-notice{color:var(--muted);margin:14px 0 -8px;font-size:13px}.pinyin-results{background:var(--surface-strong);border:1px solid var(--line);text-align:left;width:min(780px,100%);margin-top:22px;padding:20px}.pinyin-results-heading{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.pinyin-results-heading strong{font-size:13px;font-weight:600}.pinyin-results-heading span{color:var(--faint);font-size:10px}.pinyin-result-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;display:grid}.pinyin-result-grid button{aspect-ratio:1;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-family:Noto Serif SC,serif;font-size:20px}.pinyin-result-grid button:hover{color:var(--surface-strong);background:var(--accent);border-color:var(--accent)}.quick-examples{color:var(--faint);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:20px;font-size:11px;display:flex}.quick-examples span{letter-spacing:.08em;margin-right:5px}.quick-examples button{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:99px;padding:5px 10px}.quick-examples button:hover{border-color:var(--muted);color:var(--ink)}.compare-section{border-top:1px solid var(--line);padding:82px 0 110px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:36px;display:flex}.section-heading .section-kicker{margin-bottom:11px}.section-heading h2,.method-section h2{letter-spacing:-.04em;margin:0;font-family:Noto Serif SC,serif;font-size:clamp(31px,3.3vw,48px);font-weight:400}.share-button,.overlay-trigger{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:12px}.share-button:hover,.overlay-trigger:hover{color:var(--ink)}.character-strip{gap:8px;margin:-4px 0 24px;display:flex;overflow-x:auto}.character-strip button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:2px;min-width:44px;height:44px;font-family:Noto Serif SC,serif;font-size:21px}.character-strip button.active{color:var(--surface-strong);background:var(--ink);border-color:var(--ink)}.toolbar{background:var(--surface);border:1px solid var(--line);justify-content:center;align-items:center;gap:20px;min-height:58px;margin-bottom:18px;padding:8px;display:flex}.segmented{border:1px solid var(--line);border-radius:3px;padding:3px;display:flex}.segmented button{min-width:64px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:2px;padding:7px 15px;font-size:12px}.segmented button.active{background:var(--ink);color:var(--surface-strong)}.size-control{align-items:center;gap:4px;display:flex}.size-control button{width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:18px}.size-control button:disabled{opacity:.3;cursor:not-allowed}.size-control output{text-align:center;font-variant-numeric:tabular-nums;width:66px;font-size:13px}.size-control small{color:var(--faint);font-size:9px}.overlay-trigger{padding:8px 12px}.glyph-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.glyph-card{background:var(--surface-strong);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;cursor:pointer;flex-direction:column;min-width:0;height:380px;padding:19px 20px 16px;transition:background .2s,transform .2s;display:flex}.glyph-card:hover{background:var(--accent-soft)}.glyph-card:nth-child(5){grid-column:2}.card-top,.card-bottom{justify-content:space-between;align-items:center;display:flex}.locale-badge{font-size:13px;font-weight:600}.same-label{color:var(--faint);letter-spacing:.04em;font-size:9px}.glyph-stage{flex:1;place-items:center;min-height:0;display:grid;overflow:hidden}.glyph-loading{color:var(--faint);letter-spacing:.2em;font-size:24px}.glyph{font-weight:400;line-height:1;display:inline-block}.glyph-han-cn-sans{font-family:Noto Sans SC,sans-serif}.glyph-han-tw-sans{font-family:Noto Sans TC,sans-serif}.glyph-han-hk-sans{font-family:Noto Sans HK,sans-serif}.glyph-han-jp-sans{font-family:Noto Sans JP,sans-serif}.glyph-han-cn-serif{font-family:Noto Serif SC,serif}.glyph-han-tw-serif{font-family:Noto Serif TC,serif}.glyph-han-hk-serif{font-family:Noto Serif HK,serif}.glyph-han-jp-serif{font-family:Noto Serif JP,serif}.card-bottom{border-top:1px solid var(--line);color:var(--faint);letter-spacing:.04em;text-transform:uppercase;padding-top:14px;font-size:9px}.details-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr 1.35fr;display:grid}.info-block{border-right:1px solid var(--line);min-height:380px;padding:46px 42px}.info-block:last-child{border-right:0}.info-block .section-kicker{margin-bottom:26px}.info-block h3{margin:0 0 30px;font-family:Noto Serif SC,serif;font-size:27px;font-weight:400}.reading-list{margin:0}.reading-list div{border-bottom:1px solid var(--line);justify-content:space-between;padding:15px 0;display:flex}.reading-list dt{color:var(--muted);font-size:12px}.reading-list dd{margin:0;font-family:Noto Serif SC,serif;font-size:16px}.variant-block>div>span{color:var(--muted);margin-bottom:12px;font-size:12px;display:block}.variant-list{gap:8px;display:flex}.variant-list button{border:1px solid var(--line);background:var(--surface-strong);cursor:pointer;width:64px;height:64px;font-family:Noto Serif SC,serif;font-size:30px}.mapping-note,.muted{color:var(--muted);margin-top:25px;font-size:12px;line-height:1.75}.explanation-block>p:not(.section-kicker){color:var(--muted);font-size:13px;line-height:1.9}.explanation-block details{border-top:1px solid var(--line);color:var(--muted);margin-top:28px;padding-top:18px;font-size:11px;line-height:1.9}.explanation-block summary{color:var(--ink);cursor:pointer}.method-section{grid-template-columns:1fr 1fr;align-items:center;gap:12%;min-height:420px;padding:100px 6vw;display:grid}.method-copy{color:var(--muted);font-family:Noto Serif SC,serif;font-size:16px;line-height:2}.method-copy p+p{margin-top:24px}footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;width:min(1440px,100% - 64px);min-height:150px;margin:0 auto;padding:38px 0;display:flex}.footer-mark{align-items:center;gap:14px;display:flex}.footer-mark strong{font-size:14px}.footer-mark p{color:var(--faint);margin:4px 0 0;font-size:10px}.footer-links{color:var(--faint);gap:28px;font-size:10px;display:flex}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#090b09e0;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-close{z-index:51;color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff4d;border-radius:50%;width:44px;height:44px;font-size:25px;position:fixed;top:26px;right:28px}.fullscreen-card{color:#151713;background:#f8f7f3;flex-direction:column;justify-content:space-between;align-items:center;width:min(720px,92vw);height:min(720px,80vh);padding:40px;display:flex}.fullscreen-card .glyph{margin:auto}.fullscreen-card p{color:#7a7b74;letter-spacing:.08em;text-transform:uppercase;font-size:10px}.overlay-panel{background:var(--surface);width:min(930px,95vw);max-height:92vh;padding:48px;overflow:auto}.overlay-heading{text-align:center}.overlay-heading h2{margin:0;font-family:Noto Serif SC,serif;font-size:36px;font-weight:400}.overlay-heading p:last-child{color:var(--muted);font-size:12px}.overlay-stage{aspect-ratio:1;background:var(--surface-strong);border:1px solid var(--line);background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:50% 50%;place-items:center;width:min(410px,100%);margin:30px auto;display:grid;position:relative}.overlay-stage .glyph{font-size:min(300px,36vw);position:absolute}.overlay-one{color:#bc4d35}.overlay-two{color:#276a90}.overlay-controls{grid-template-columns:1fr 1fr;gap:30px;display:grid}.overlay-controls>div>span{justify-content:space-between;align-items:center;display:flex}.overlay-controls select{border:1px solid var(--line);background:var(--surface-strong);padding:8px}.overlay-controls output{color:var(--muted);font-size:12px}.overlay-controls input{width:100%;accent-color:var(--accent);margin-top:12px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--orange);outline-offset:3px}@media (width<=1100px){.glyph-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.glyph-card:nth-child(5){grid-column:auto}.details-section{grid-template-columns:1fr 1fr}.explanation-block{border-top:1px solid var(--line);grid-column:1/-1}.info-block:nth-child(2){border-right:0}}@media (width<=720px){.topbar,main,footer{width:min(100% - 32px,1440px)}.topbar{height:70px}.top-actions{gap:18px}.top-actions>a:first-child{display:none}.hero{min-height:540px;padding:66px 0 58px}.hero h1{font-size:clamp(42px,13vw,61px)}.hero-copy{font-size:14px}.search-form{min-height:62px;margin-top:34px;padding-left:17px}.search-form button{width:55px;padding:0;font-size:0}.search-form button span{margin:0;font-size:20px}.quick-examples span{width:100%}.pinyin-results{padding:15px}.pinyin-result-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.pinyin-result-grid button{font-size:18px}.compare-section{padding:62px 0 80px}.section-heading{align-items:start}.section-heading h2{font-size:34px}.share-button{margin-top:28px;font-size:0}.share-button:before{content:"↗";font-size:20px}.toolbar{flex-wrap:wrap;gap:8px 14px}.overlay-trigger{border-top:1px solid var(--line);flex-basis:100%;padding-top:13px}.glyph-grid{scroll-snap-type:x mandatory;scrollbar-width:none;border-left:0;margin-right:-16px;padding-right:16px;display:flex;overflow-x:auto}.glyph-grid::-webkit-scrollbar{display:none}.glyph-card{scroll-snap-align:center;border-left:1px solid var(--line);min-width:82vw;height:400px}.details-section{display:block}.info-block{border-right:0;border-bottom:1px solid var(--line);min-height:auto;padding:40px 22px}.info-block:last-child{border-bottom:0}.method-section{min-height:500px;padding:72px 10px;display:block}.method-copy{margin-top:50px}footer{align-items:start;gap:35px}.footer-links{text-align:right;flex-direction:column;align-items:end;gap:11px}.overlay-panel{padding:42px 22px 25px}.overlay-controls{grid-template-columns:1fr}.fullscreen-card{padding:25px}.fullscreen-card .glyph{font-size:210px!important}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}.about-page{min-height:100vh;padding:48px 0 110px}.about-page>article{width:min(760px,100%);margin:110px auto 0}.about-page h1{letter-spacing:-.05em;margin:0 0 40px;font-family:Noto Serif SC,serif;font-size:clamp(46px,6vw,78px);font-weight:400;line-height:1.15}.about-page .about-lead{color:var(--muted);margin-bottom:70px;font-family:Noto Serif SC,serif;font-size:20px;line-height:2}.about-page h2{margin:52px 0 15px;font-family:Noto Serif SC,serif;font-size:27px;font-weight:400}.about-page article>p:not(.section-kicker):not(.about-lead){color:var(--muted);font-size:14px;line-height:2}@media (width<=720px){.about-page{padding-top:28px}.about-page>article{margin-top:80px}}