:root{color:#182434;font-synthesis:none;--ink:#182434;--paper:#efeee8;--blue:#2e5bff;--red:#ef4a35;--line:#1824343d;background:#efeee8;font-family:Noto Sans CJK SC,PingFang SC,Microsoft YaHei,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:3px}.shell{min-height:100vh;padding:28px clamp(18px,4vw,64px) 24px}.masthead{border-top:9px solid var(--ink);justify-content:space-between;align-items:flex-end;gap:32px;padding:25px 0 32px;display:flex}.brand-block{align-items:flex-start;gap:clamp(18px,3vw,44px);display:flex}.index-mark{border-top:2px solid var(--ink);letter-spacing:.12em;flex:0 0 55px;width:55px;padding-top:7px;font:800 13px/1.25 Arial,sans-serif}.eyebrow{letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:800}h1{letter-spacing:-.075em;text-transform:uppercase;margin:0;font:900 clamp(54px,8.8vw,126px)/.72 Arial,sans-serif}h1 i{color:#0000;-webkit-text-stroke:2px var(--ink);font-style:normal}.intro{max-width:295px;margin:0;padding-bottom:4px;font-size:clamp(16px,1.5vw,21px);font-weight:650;line-height:1.55}.control-deck{border:1px solid var(--ink);background:#f8f6ef;grid-template-columns:minmax(280px,.8fr) 1.7fr;display:grid}.search-box{border-right:1px solid var(--ink);padding:20px}.search-box>span,.filter-label>span{letter-spacing:.18em;margin-bottom:13px;font:800 10px/1 Arial,sans-serif;display:block}.search-box>div{border-bottom:2px solid var(--ink);display:flex}.search-box input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0;padding:8px 0 10px;font-size:16px}.search-box input::placeholder{color:#7b8086}.search-box button{cursor:pointer;background:0 0;border:0;font-size:26px}.stroke-filter{min-width:0;padding:20px}.filter-label{justify-content:space-between;display:flex}.filter-label button{color:var(--blue);cursor:pointer;background:0 0;border:0;padding:0;font-size:12px;font-weight:750}.stroke-buttons{grid-template-columns:repeat(10,1fr);gap:5px;display:grid}.stroke-buttons button{aspect-ratio:1.3;border:1px solid var(--line);cursor:pointer;background:0 0;min-width:0;transition:all .16s}.stroke-buttons button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}.stroke-buttons button.active{border-color:var(--blue);background:var(--blue);color:#fff}.stroke-buttons b{font:800 18px/1 Arial,sans-serif}.stroke-buttons small{margin-left:2px;font-size:9px}.overview{border-bottom:1px solid var(--ink);grid-template-columns:190px 1fr;gap:28px;padding:36px 0;display:grid}.section-heading h2{letter-spacing:-.02em;margin:0 0 7px;font:900 17px/1.1 Arial,sans-serif}.section-heading p{color:#68707a;margin:0;font-size:12px}.density-chart{grid-template-columns:repeat(5,1fr);gap:8px 22px;display:grid}.density-chart button{cursor:pointer;text-align:left;background:0 0;border:0;grid-template-columns:28px 1fr 19px;align-items:center;gap:8px;padding:3px 0;transition:opacity .15s;display:grid}.density-chart button.muted{opacity:.28}.density-name{font-size:11px;font-weight:800}.density-track{background:#d7d6d0;height:7px}.density-track i{background:var(--red);height:100%;display:block}.density-chart strong{text-align:right;font:800 11px/1 Arial,sans-serif}.map-section{padding-top:32px}.map-heading{justify-content:space-between;align-items:flex-end;margin-bottom:20px;display:flex}.map-key{font-size:11px;font-weight:700}.map-key i{background:var(--blue);border-radius:50%;width:9px;height:9px;margin-right:5px;display:inline-block}.radical-map{border-top:1px solid var(--ink);border-left:1px solid var(--ink);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stroke-zone{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background-image:linear-gradient(#1824340d 1px,#0000 1px),linear-gradient(90deg,#1824340d 1px,#0000 1px);background-size:24px 24px;grid-template-columns:92px 1fr;min-height:210px;display:grid}.stroke-zone>header{border-right:1px solid var(--line);background:#efeee8e6;padding:16px 12px}.zone-number{color:var(--blue);letter-spacing:-.08em;font:900 36px/.9 Arial,sans-serif;display:block}.stroke-zone header b{margin-top:16px;font-size:13px;display:block}.stroke-zone header small{color:#747a80;margin-top:4px;font-size:10px;display:block}.bubbles{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:9px;padding:15px;display:flex}.radical-bubble{border:1px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:50%;place-items:center;width:76px;height:76px;transition:transform .16s,background .16s,color .16s;display:grid;position:relative}.radical-bubble:nth-child(3n){width:68px;height:68px}.radical-bubble:nth-child(4n){width:82px;height:82px}.radical-bubble:hover,.radical-bubble.chosen{z-index:2;border-color:var(--blue);background:var(--blue);color:#fff;transform:scale(1.08)}.radical-bubble span{font-family:STKaiti,KaiTi,serif;font-size:30px;line-height:1}.radical-bubble small{text-overflow:ellipsis;white-space:nowrap;max-width:61px;font-size:9px;overflow:hidden}.empty-state{border:1px solid var(--ink);text-align:center;place-items:center;min-height:330px;display:grid}.empty-state span{color:var(--red);align-self:end;font:900 64px/1 Arial,sans-serif}.empty-state h3{margin:8px 0 0}.empty-state p{color:#68707a;align-self:start;margin:5px 0 0}.empty-state button{border:1px solid var(--ink);cursor:pointer;background:0 0;align-self:start;padding:10px 22px}.detail-drawer{z-index:10;border:1px solid var(--ink);background:#f6cb3d;grid-template-columns:minmax(150px,.8fr) 1.2fr;width:min(570px,100% - 28px);min-height:245px;transition:transform .25s cubic-bezier(.2,.8,.2,1);display:grid;position:fixed;bottom:0;right:0;transform:translateY(calc(100% + 20px));box-shadow:-10px -10px #18243429}.detail-drawer.open{transform:translateY(0)}.drawer-close{z-index:2;border:1px solid var(--ink);cursor:pointer;background:0 0;border-radius:50%;width:32px;height:32px;font-size:21px;position:absolute;top:12px;right:12px}.detail-glyph{border-right:1px solid var(--ink);place-items:center;font-family:STKaiti,KaiTi,serif;font-size:clamp(80px,13vw,130px);display:grid}.detail-copy{padding:28px 45px 24px 25px}.detail-count{letter-spacing:.15em;margin:0 0 12px;font:900 10px/1 Arial,sans-serif}.detail-copy h2{margin:0;font-size:27px}.pinyin{color:var(--blue);margin:3px 0 14px;font:800 15px/1 Arial,sans-serif}.note{min-height:40px;margin:0;font-size:13px;line-height:1.5}.examples{align-items:center;gap:8px;margin-top:16px;display:flex}.examples span{margin-right:4px;font-size:10px;font-weight:800}.examples b{border:1px solid var(--ink);border-radius:50%;place-items:center;width:34px;height:34px;font-family:STKaiti,KaiTi,serif;font-size:19px;display:grid}footer{letter-spacing:.08em;justify-content:space-between;gap:18px;padding-top:18px;font:700 10px/1.4 Arial,sans-serif;display:flex}@media (width<=850px){.masthead{align-items:flex-start}.intro{display:none}.control-deck{grid-template-columns:1fr}.search-box{border-right:0;border-bottom:1px solid var(--ink)}.stroke-buttons{grid-template-columns:repeat(5,1fr)}.overview{grid-template-columns:1fr}.density-chart{grid-template-columns:repeat(2,1fr)}.radical-map{grid-template-columns:1fr}}@media (width<=520px){.shell{padding:15px 12px}.masthead{padding:19px 0 24px}.index-mark{flex-basis:40px;width:40px}h1{font-size:51px}.overview{padding:27px 0}.density-chart{gap:7px 15px}.map-heading{align-items:flex-start}.map-key{display:none}.stroke-zone{grid-template-columns:65px 1fr;min-height:170px}.zone-number{font-size:27px}.radical-bubble,.radical-bubble:nth-child(3n),.radical-bubble:nth-child(4n){width:62px;height:62px}.radical-bubble span{font-size:25px}.detail-drawer{grid-template-columns:105px 1fr;min-height:210px}.detail-glyph{font-size:70px}.detail-copy{padding:22px 38px 18px 18px}footer{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}