:root{font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;color:#242b26;background:#f6f5ef;font-synthesis:none;--green:#245c46;--muted:#687068;--line:#d9ddd2}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}a{color:var(--green);text-underline-offset:4px}header,main,footer{max-width:1040px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:30px 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:650;font-size:19px}.seal{background:var(--green);color:#fff;font:26px serif;padding:6px 8px;border-radius:3px}.english{font-size:10px;letter-spacing:2px;margin-left:10px;color:var(--muted)}.quiet{font-size:12px;color:var(--muted)}main{padding:0 72px}.lookup{padding:64px 0 40px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:600}h1{font-family:"Noto Serif TC","Songti TC",serif;font-size:clamp(40px,6vw,64px);font-weight:500;line-height:1.3;letter-spacing:2px;margin:18px 0}.accent{color:var(--green)}.intro{color:var(--muted);font-size:16px;margin-bottom:32px}form>label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}.search-box{display:flex;border:1px solid #9ba999;border-radius:8px;background:#fff;box-shadow:0 4px 20px #263b2510;padding:7px;transition:border-color .15s,box-shadow .15s}.search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #245c4618}input{width:100%;min-width:0;border:0;background:none;font-size:20px;padding:12px;outline:none}input::placeholder{color:#889087;font-size:17px}button{border:0}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #478969;outline-offset:4px}.submit{background:var(--green);color:white;border-radius:5px;min-width:108px;padding:12px 18px;transition:background .15s}.submit:hover{background:#163e2e}.submit span{margin-left:12px}#clear{background:none;font-size:25px;color:var(--muted);min-width:36px}.options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}.options p{margin:0}.version-label{display:flex;gap:8px;align-items:center}select{border:1px solid var(--line);background:transparent;color:#303b32;padding:8px;border-radius:5px}.examples{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--muted)}.examples button{background:none;padding:8px 12px;color:var(--green);border-bottom:1px solid #b7c2b3;transition:background .15s}.examples button:hover{background:#e5eade}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 0;border-top:1px solid var(--line)}h2{font-size:15px;margin:0}#status{font-size:12px;color:var(--muted)}.empty{display:flex;justify-content:center;align-items:center;gap:26px;padding:35px 0 50px;color:var(--muted)}.empty-glyph{font:76px serif;color:#b2bcad}.empty p{font-size:15px}.empty small{display:block;font-size:12px;margin-top:10px}.result-row{display:flex;align-items:center;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);animation:arrive .2s ease-out}.character{font:58px/1.2 "Noto Serif TC","Songti TC",serif;min-width:74px;text-align:center}.codes{display:grid;gap:14px;flex:1}.code-line{display:flex;align-items:center;gap:20px}.roots{display:flex;gap:8px}.root{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:38px;font-size:23px}.root small{font:12px ui-monospace,monospace;color:var(--muted)}.copy{margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--green);padding:9px 12px;font-size:12px;white-space:nowrap}.copy:hover{background:#e5eade}.missing{color:var(--muted);font-size:14px}.reference,.about{border-bottom:1px solid var(--line);padding:20px 0;font-size:13px}.reference{margin-top:30px}.reference summary{display:flex;justify-content:space-between}.reference summary,.about summary{cursor:pointer;font-weight:550}.reference p,.about p{line-height:1.9;color:var(--muted)}#keyboard{padding:24px 0 8px}.key-row{display:flex;justify-content:center;gap:6px;margin:6px 0}.key{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:5px;background:#fafbf7;width:58px;padding:8px 2px;gap:4px;font-size:19px}.key small{font-size:11px;color:var(--muted)}footer{display:flex;justify-content:space-between;padding:36px 72px;font-size:12px;color:var(--muted)}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){header{padding:20px}.english{display:none}.quiet{font-size:11px}main{padding:0 22px}.lookup{padding-top:38px}h1{font-size:43px}.intro{font-size:14px}.search-box{padding:5px}input{padding:11px 7px;font-size:19px}input::placeholder{font-size:14px}.submit{min-width:76px;padding:12px 10px}.submit span{margin-left:3px}.options{font-size:11px}.result-row{gap:10px}.character{font-size:43px;min-width:50px}.root{font-size:21px;min-width:26px}.roots{gap:5px}.code-line{gap:6px;flex-wrap:wrap}.copy{padding:8px;font-size:11px}.empty{gap:18px}.empty small{font-size:11px}.empty-glyph{font-size:60px}.key-row{gap:3px}.key{font-size:17px;width:9%;padding:7px 1px}.key small{font-size:10px}footer{padding:30px 22px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.search-mode{border:0;padding:0;margin:0 0 22px;display:flex;gap:24px}.search-mode legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.search-mode label{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer}.search-mode input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--green)}.search-mode input:focus-visible{outline:3px solid #478969;outline-offset:3px}
/* Functional colors pair exact stroke groups with code positions. */
.tone-0{color:#2264a7}.tone-1{color:#b84820}.tone-2{color:#8251a1}.tone-3{color:#286c4c}.tone-4{color:#896200}
path.tone-0{fill:#2264a7}path.tone-1{fill:#b84820}path.tone-2{fill:#8251a1}path.tone-3{fill:#286c4c}path.tone-4{fill:#896200}
.root[class*="tone-"] small{color:inherit}.muted-stroke{fill:#e0e3dd}.colored-glyph{display:block;width:100%;height:auto}.character.has-glyph{width:84px;flex-shrink:0}.character.has-glyph .colored-glyph{width:84px}.code-line{flex-wrap:wrap}.diagram-open{background:transparent;color:var(--green);border:1px solid #aabcae;border-radius:5px;padding:9px 12px;font-size:12px;white-space:nowrap}.diagram-open:hover{background:#e5eade}.diagram-availability{font-size:12px;color:var(--muted);margin:0;line-height:1.7}.diagram-availability button{margin-left:6px}.diagram-dialog{width:min(590px,calc(100% - 24px));max-height:90svh;border:1px solid var(--line);border-radius:12px;padding:24px;background:#f6f5ef;color:#242b26;overscroll-behavior:contain}.diagram-dialog::backdrop{background:#192a235c}.diagram-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.diagram-header h2{font-size:18px;line-height:1.5}.diagram-close{background:transparent;color:var(--muted);font-size:28px;width:44px;height:44px;flex-shrink:0;border-radius:5px}.diagram-stage{width:220px;margin:10px auto 16px;border:1px solid var(--line);background:linear-gradient(90deg,transparent calc(50% - .5px),#d9ddd2 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#d9ddd2 50%,transparent calc(50% + .5px))}.diagram-hint{font-size:13px;line-height:1.7;text-align:center;color:var(--muted)}.diagram-parts{display:flex;justify-content:center;gap:8px}.diagram-part{flex:1;max-width:94px;min-width:0;padding:8px 4px;border-radius:6px;background:#fff;border:2px solid transparent;cursor:pointer}.diagram-part[aria-pressed="true"]{border-color:currentColor}.diagram-part:hover{background:#eef1e8}.diagram-part .colored-glyph{margin:6px 0}.part-number{font-size:11px}.part-key{font-size:17px;font-weight:600}.diagram-selection{font-size:13px;text-align:center;min-height:22px;margin:18px 0 8px}.diagram-all{display:block;margin:0 auto;padding:9px 16px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--green)}.diagram-note{font-size:11px;line-height:1.8;color:var(--muted);margin:22px 0 0}.diagram-message{text-align:center;padding:32px 0}html:has(.diagram-dialog[open]){overflow:hidden}@media(max-width:600px){.character.has-glyph,.character.has-glyph .colored-glyph{width:64px}.diagram-dialog{padding:16px}.diagram-stage{width:180px}.diagram-header h2{font-size:16px}.diagram-parts{gap:4px}.part-key{font-size:15px}.diagram-open{font-size:11px;padding:8px}.code-line:has(.diagram-open) .roots{flex-basis:100%}.code-line:has(.diagram-open) .copy{margin-left:0}}
.source-page{padding-top:30px}.source-page h1{font-size:32px}.source-page p,.source-page li{line-height:1.9;font-size:14px}.source-page h2{margin-top:30px}.source-page li{margin:8px 0}

/* Keep the mobile viewport focused on querying and reading results. */
@media(max-width:600px){
  header{padding:12px 20px}
  .lookup{padding:12px 0}
  .lookup .eyebrow,.lookup .intro{display:none}
  .lookup h1,#search-form>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .search-mode{margin-bottom:8px}
  .search-mode label{min-height:36px}
  .options{margin-top:8px}
  .examples{margin-top:8px}
  .result-heading{padding:14px 0}
}
.omitted-stroke{fill:#939b90}.diagram-explanation{font-size:13px;line-height:1.8;margin:20px 0 8px}.diagram-omission{font-size:12px;color:#5b6458;line-height:1.7;margin:8px 0}.diagram-omission::before{content:"";display:inline-block;width:10px;height:10px;background:#939b90;margin-right:6px}
stop.tone-0{stop-color:#2264a7}stop.tone-1{stop-color:#b84820}stop.tone-2{stop-color:#8251a1}stop.tone-3{stop-color:#286c4c}stop.tone-4{stop-color:#896200}stop.omitted-stroke{stop-color:#939b90}stop.muted-stroke{stop-color:#e0e3dd}