@font-face{font-family:Tuni Hanzi;src:url(/fonts/tuni-hanzi.woff2)format("woff2");font-display:swap}.blog{--forest:#254e40;--sage:#dce6d5;--sage-soft:#ebf0e5;--honey:#edd79f;--paper:#fffffa;--reading:#34493d;--foliage:#647366;--hairline:#e1e8db;--font-display:var(--font-manrope), var(--font-noto-thai), sans-serif;--font-hanzi:"Tuni Hanzi", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;--font-zh:"PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;--ease-out:cubic-bezier(.16, 1, .3, 1);min-height:100dvh}.blog[lang=en]{font-family:var(--font-english)}.blog[lang=th]{font-family:var(--font-noto-thai), var(--font-english)}.blog main:focus{outline:none}.blog .site-shell{width:min(100% - 96px,1240px)}.blog :is(section,aside,h2,h3,[id]){scroll-margin-top:28px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.reading-progress{display:none}@supports (animation-timeline:scroll()){.reading-progress{z-index:30;background:var(--forest);transform-origin:0;height:3px;animation:linear both reading-progress;animation-timeline:scroll(root);display:block;position:fixed;inset:0 0 auto;transform:scaleX(0)}}@keyframes reading-progress{to{transform:scaleX(1)}}.blog-eyebrow{color:var(--forest);letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;font-size:11px;font-weight:700;line-height:1.7}.blog-eyebrow a{color:inherit;text-decoration:none}.blog-eyebrow a:hover{text-underline-offset:4px;text-decoration:underline}.blog-lead{color:#4b6050;max-width:560px;margin:24px 0 0;font-size:18px;line-height:1.75}.blog-section-title{color:var(--forest);font-family:var(--font-display);letter-spacing:-.045em;margin:0 0 32px;font-size:clamp(26px,2.8vw,36px);font-weight:600;line-height:1.15}.draft-badge{color:#8f3a2c;letter-spacing:0;text-transform:none;background:#f6e4dc;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700}.breadcrumbs ol{color:var(--muted);flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.breadcrumbs li{align-items:center;gap:8px;display:inline-flex}.breadcrumbs a{min-height:32px;color:var(--muted);align-items:center;text-decoration:none;display:inline-flex}.breadcrumbs a:hover{color:var(--forest);text-underline-offset:4px;text-decoration:underline}.breadcrumbs-separator{color:#b5c2b3}.blog-hero{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;padding-block:48px 40px;display:grid}.blog-hero h1{max-width:820px;color:var(--forest);font-family:var(--font-display);letter-spacing:-.065em;text-wrap:balance;margin:0;font-size:clamp(44px,5.8vw,80px);font-weight:600;line-height:1.02}.blog-hero-mascot{width:250px;height:auto;margin-bottom:-18px}.blog-hero-compact{grid-template-columns:minmax(0,1fr);padding-block:28px 32px}.blog-hero-compact .breadcrumbs{margin-bottom:36px}.blog-hero-compact h1{font-size:clamp(38px,4.8vw,64px)}.blog-latest{padding-bottom:88px}.post-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px;display:grid}.post-card{flex-direction:column;gap:22px;display:flex;position:relative}.post-card-art{aspect-ratio:4/3;transition:transform .4s var(--ease-out);border-radius:28px;overflow:hidden}.post-card-art>*{width:100%;height:100%}.post-card-art:has(>.post-cover){aspect-ratio:16/9}.post-card:hover .post-card-art{transform:translateY(-4px)}.post-cover{object-fit:cover;display:block}.post-card-meta{color:var(--foliage);flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;display:flex}.post-card-title{color:var(--ink);letter-spacing:-.025em;text-wrap:balance;margin:10px 0 0;font-size:21px;font-weight:600;line-height:1.35;transition:color .16s}.post-card:hover .post-card-title{color:var(--forest)}.post-card-link{text-decoration:none}.post-card-link:after{content:"";border-radius:28px;position:absolute;inset:0}.post-card-link:focus-visible{outline:none}.post-card-link:focus-visible:after{outline:2px solid var(--accent);outline-offset:8px}.post-card-excerpt{color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:10px 0 0;font-size:15px;line-height:1.7;display:-webkit-box;overflow:hidden}.post-card-date{color:var(--muted);margin:14px 0 0;font-size:12px}.blog-topics{padding-bottom:72px}.tool-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.tool-list a{border:1px solid var(--hairline);background:var(--paper);color:var(--ink);border-radius:20px;gap:4px;padding:20px 22px;text-decoration:none;transition:border-color .16s;display:grid}.tool-list a:hover{border-color:#a7bea5}.tool-list strong{color:var(--forest);font-size:18px}.tool-list span{color:var(--muted);font-size:15px;line-height:1.6}.guide-outline{border:1px solid var(--hairline);background:var(--paper);border-radius:24px;margin:0 0 2.6em;padding:22px 26px 18px}.prose+.guide-outline{margin:3em 0 0}.guide-outline-head{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px;display:flex}.guide-outline-head .blog-eyebrow{margin:0}.guide-outline-overview{color:var(--forest);text-underline-offset:4px;white-space:nowrap;font-size:13px;font-weight:600}.guide-outline ol{margin:0;padding:0;list-style:none}.guide-outline li a{border-top:1px solid var(--hairline);color:var(--ink);grid-template-columns:30px minmax(0,1fr);gap:8px;padding:12px 0;font-size:15px;font-weight:600;line-height:1.45;text-decoration:none;transition:color .16s;display:grid}.guide-outline li:first-child a{border-top:0}.guide-outline li[data-depth="1"] a{padding-left:26px;font-weight:500}.guide-outline li[data-depth="2"] a{padding-left:52px;font-weight:500}.guide-outline-index{color:var(--foliage);font-variant-numeric:tabular-nums;padding-top:2px;font-size:12px}.guide-outline li a:hover,.guide-outline li a[aria-current]{color:var(--forest)}.guide-outline li a[aria-current] .guide-outline-index{color:var(--forest);font-weight:800}.guide-outline li a[aria-current] span:last-child{text-decoration:underline;-webkit-text-decoration-color:var(--honey);text-decoration-color:var(--honey);text-underline-offset:5px;text-decoration-thickness:3px}.guide-outline-steps{border-top:1px solid var(--hairline);justify-content:space-between;align-items:center;gap:16px;margin-top:8px;padding-top:14px;display:flex}.guide-outline-steps a{min-height:44px;color:var(--forest);align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.guide-outline-steps a:hover{text-underline-offset:4px;text-decoration:underline}.guide-outline-steps .guide-outline-next{background:var(--forest);color:var(--paper);border-radius:100px;margin-left:auto;padding:0 20px}.guide-outline-steps .guide-outline-next:hover{background:var(--pressed);text-decoration:none}.glyph-tile{isolation:isolate;border:1px solid var(--hairline);background-color:var(--paper);color:var(--forest);text-align:center;background-image:radial-gradient(at 100% 0,#f3dca5a6 0%,#f3dca500 58%),radial-gradient(at 0 100%,#c9d8c4cc 0%,#c9d8c400 62%);border-radius:28px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;container-type:inline-size}.glyph-motif{z-index:-1;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.glyph-pinyin{color:var(--foliage);font-family:var(--font-english);letter-spacing:.02em;font-size:clamp(13px,6.5cqi,24px);font-weight:600}.glyph-hanzi{color:var(--forest);font-family:var(--font-hanzi);font-size:clamp(64px,40cqi,190px);line-height:1.12}.glyph-hanzi-long{font-size:clamp(40px,22cqi,120px)}.glyph-rule{background:var(--honey);border-radius:2px;width:clamp(20px,13cqi,52px);height:4px;margin:4px 0 14px}.glyph-meaning{color:var(--ink);padding-inline:12px;font-size:clamp(12px,5.4cqi,20px);font-weight:600}.glyph-tile-empty span{font-family:var(--font-display);letter-spacing:-.03em;padding:24px;font-size:clamp(18px,8cqi,30px);font-weight:600}.glyph-tile-lg{aspect-ratio:4/5;width:100%}.post-header{padding-top:20px}.post-heading{border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr);align-items:end;gap:64px;padding-block:44px 52px;display:grid}.post-heading-glyph{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}.post h1{max-width:860px;color:var(--forest);font-family:var(--font-display);letter-spacing:-.058em;text-wrap:balance;margin:0;font-size:clamp(38px,4.8vw,66px);font-weight:600;line-height:1.05}.post-lead{color:#4b6050;max-width:640px;margin:26px 0 0;font-size:19px;line-height:1.7}.post-byline{align-items:center;gap:14px;margin-top:34px;display:flex}.post-byline p{color:var(--muted);flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:13px;display:flex}.post-byline p>span+span:before{content:"·";color:#b5c2b3;margin-right:10px}.post-byline a{color:var(--ink);font-weight:600;text-decoration:none}.post-byline a:hover{color:var(--forest);text-underline-offset:4px;text-decoration:underline}.author-monogram{background:var(--forest);width:40px;height:40px;color:var(--paper);font-family:var(--font-display);border-radius:50%;flex:0 0 40px;place-items:center;font-size:15px;font-weight:600;display:inline-grid}.post-layout{grid-template-columns:210px minmax(0,720px);gap:clamp(40px,6vw,96px);padding-block:52px 72px;display:grid}.post-layout-single{grid-template-columns:minmax(0,720px);justify-content:center}.post-aside nav{max-height:calc(100dvh - 64px);position:sticky;top:32px;overflow-y:auto}.post-aside .blog-eyebrow{color:var(--muted);margin-bottom:14px}.toc-list{border-left:1px solid var(--border);margin:0;padding:0;list-style:none}.toc-list a{color:var(--muted);border-left:2px solid #0000;margin-left:-1px;padding:7px 0 7px 16px;font-size:13px;line-height:1.5;text-decoration:none;transition:color .16s,border-color .16s;display:block}.toc-list a:hover{color:var(--forest)}.toc-list a[aria-current]{border-left-color:var(--forest);color:var(--forest);font-weight:600}.toc-list li[data-depth="3"] a{padding-left:28px;font-size:12px}.post-toc-mobile{display:none}.post-main{min-width:0}.prose{color:var(--reading);font-size:18px;line-height:1.8}.prose>:first-child{margin-top:0}.prose>p{margin:0 0 1.25em}.prose>h2{color:var(--forest);font-family:var(--font-display);letter-spacing:-.04em;text-wrap:balance;margin:2.1em 0 .65em;font-size:clamp(26px,2.6vw,34px);font-weight:600;line-height:1.2}.prose>h3{color:var(--ink);letter-spacing:-.02em;margin:1.8em 0 .55em;font-size:22px;font-weight:600;line-height:1.35}.prose>h4{color:var(--ink);margin:1.6em 0 .5em;font-size:18px;font-weight:700}.heading-anchor{color:var(--foliage);opacity:0;margin-left:.35em;font-weight:400;text-decoration:none;transition:opacity .16s}:is(h2,h3,h4):hover>.heading-anchor,.heading-anchor:focus-visible{opacity:1}.prose :where(a:not([class])){color:var(--forest);text-underline-offset:4px;-webkit-text-decoration:underline #254e4059;text-decoration:underline #254e4059;text-decoration-thickness:1.5px;transition:text-decoration-color .16s}.prose :where(a:not([class])):hover{text-decoration-color:currentColor}.prose strong{color:var(--ink);font-weight:700}.prose :is(ul,ol){margin:0 0 1.4em;padding-left:1.3em}.prose ul,.callout ul{list-style:outside}.prose ol,.callout ol,.post-sources ol{list-style:decimal}.prose li+li{margin-top:.45em}.prose li::marker{color:var(--forest);font-weight:700}.prose>blockquote{color:var(--forest);letter-spacing:-.02em;margin:1.8em 0;font-size:22px;font-weight:600;line-height:1.55}.prose>blockquote:before{content:"";background:var(--honey);border-radius:2px;width:40px;height:4px;margin-bottom:18px;display:block}.prose>blockquote p{margin:0}.prose>hr{background:var(--border);border:0;height:1px;margin:3em 0}.prose code{background:var(--sage-soft);border-radius:6px;padding:.15em .4em;font-size:.88em}.prose figure{margin:2.2em 0}.prose figure img{border-radius:22px;width:100%;height:auto;display:block}.prose figcaption{color:var(--muted);margin-top:12px;font-size:13px;line-height:1.6}.prose :where(:lang(zh-Hans)){font-family:var(--font-zh)}.zh-ruby{ruby-align:center;ruby-position:over}.zh-ruby rt{color:var(--foliage);font-family:var(--font-english);letter-spacing:.02em;font-size:.58em;font-weight:600}.table-scroll{border:1px solid var(--border);background:var(--paper);border-radius:20px;margin:2em 0;overflow-x:auto}.table-scroll table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6}.table-scroll th{background:var(--sage-soft);color:var(--muted);letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap;padding:12px 18px;font-size:12px;font-weight:700}.table-scroll td{border-top:1px solid var(--border);vertical-align:middle;padding:14px 18px}.table-scroll td :where(:lang(zh-Hans)){color:var(--forest);font-size:1.4em}.word-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:1.8em 0;display:grid}.word-card{border:1px solid var(--hairline);background:var(--paper);border-radius:22px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hanzi hanzi""text play";align-items:end;gap:12px;padding:18px 18px 16px;display:grid}.word-hanzi{color:var(--forest);font-family:var(--font-hanzi);grid-area:hanzi;font-size:54px;line-height:1}.word-hanzi-long{font-size:40px}.word-hanzi-phrase{font-size:32px;line-height:1.2}.word-text{flex-direction:column;grid-area:text;min-width:0;display:flex}.word-pinyin{color:var(--foliage);font-family:var(--font-english);font-size:15px;font-weight:600;line-height:1.3}.word-rule{background:var(--honey);border-radius:2px;width:22px;height:3px;margin:8px 0}.word-meaning{color:var(--ink);font-size:15px;font-weight:600;line-height:1.4}.tone-explorer{margin:2em 0}.tone-explorer-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.tone-explorer-head p{color:var(--muted);margin:0;font-size:15px;line-height:1.5}.tone-play-all{border:1px solid var(--forest);min-height:44px;color:var(--forest);font:inherit;cursor:pointer;background:0 0;border-radius:100px;flex-shrink:0;align-items:center;gap:10px;padding:0 18px;font-size:14px;font-weight:600;transition:background .16s,color .16s;display:inline-flex}.tone-play-all:hover,.tone-play-all[aria-pressed=true]{background:var(--forest);color:var(--paper)}.tone-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.tone-card{grid-row:span 4;grid-template-rows:subgrid;border:1px solid var(--hairline);min-width:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s, border-color .2s, transform .16s var(--ease-out);background:#fffffab8;border-radius:22px;place-items:start;row-gap:6px;padding:14px 14px 16px;display:grid}.tone-card:hover{border-color:#a7bea5}.tone-card:active{transform:scale(.98)}.tone-card[data-state=chosen]{background:var(--sage);border-color:#a7bea5}.tone-card-top{justify-content:space-between;align-items:flex-start;gap:8px;width:100%;display:flex}.tone-card-top .tone-icon{margin-top:3px}.tone-label{color:var(--foliage);font-size:12px;font-weight:700;line-height:1.35}.tone-graph{width:100%;height:auto;margin-block:4px 2px;display:block;overflow:visible}.tone-guides{fill:none;stroke:#dee4d9;stroke-dasharray:6 14;stroke-width:3px}.tone-base,.tone-stroke{fill:none;stroke-linecap:round;stroke-width:18px}.tone-base{stroke:#0000}.tone-stroke{stroke:var(--forest);transition:stroke .2s}.tone-card[data-state=dim] .tone-stroke{stroke:#cbd8c6}.tone-card[data-state=chosen] :is(.tone-base,.tone-guides){stroke:#b9cbb5}.tone-dot{fill:var(--paper);stroke:var(--forest);stroke-width:9px}.tone-pinyin{color:var(--forest);font-family:var(--font-english);font-size:26px;font-weight:600;line-height:1.2}.tone-word{flex-wrap:wrap;align-items:baseline;gap:2px 8px;display:flex}.tone-hanzi{color:var(--forest);font-family:var(--font-hanzi);font-size:24px;line-height:1.2}.tone-meaning{color:var(--muted);font-size:13px;line-height:1.4}.tone-icon{border-block:5px solid #0000;width:0;height:0;color:var(--forest);border-left:8px solid;flex-shrink:0;display:inline-block}.tone-icon-stop{background:currentColor;border:0;border-radius:2px;width:9px;height:9px}.tone-play-all .tone-icon{color:inherit}.tone-card[data-active] .tone-icon-stop{animation:1s ease-in-out infinite tone-pulse}@keyframes tone-pulse{50%{opacity:.35}}.example{background:var(--sage-soft);border-radius:22px;margin:1.8em 0;padding:24px 28px}.example-zh{color:var(--forest);font-family:var(--font-zh);margin:0;font-size:26px;line-height:1.5}.example-pinyin{color:var(--foliage);margin:6px 0 0;font-size:15px;font-weight:600}.example-meaning{color:var(--reading);border-top:1px solid #d4dece;margin-top:14px;padding-top:12px;font-size:15px}.play-button{background:var(--paper);width:44px;height:44px;color:var(--forest);vertical-align:middle;cursor:pointer;transition:background .16s, border-color .16s, color .16s, transform .16s var(--ease-out);border:1px solid #c9d6c5;border-radius:50%;flex-shrink:0;place-items:center;padding:0;display:inline-grid}.play-button:hover{border-color:var(--forest)}.play-button:active{transform:scale(.94)}.play-button[data-playing]{border-color:var(--forest);background:var(--forest);color:var(--paper)}.play-button-icon{border-block:6px solid #0000;border-left:10px solid;width:0;height:0;margin-left:3px}.play-button[data-playing] .play-button-icon{background:currentColor;border:0;border-radius:2px;width:10px;height:10px;margin:0;animation:1s ease-in-out infinite tone-pulse}.play-button-sm{width:40px;height:40px}.play-button-sm .play-button-icon{border-block-width:5px;border-left-width:8px}.play-button-lg{border-color:var(--forest);background:var(--forest);width:60px;height:60px;color:var(--paper)}.play-button-lg:hover{background:var(--pressed)}.play-button-lg .play-button-icon{border-block-width:8px;border-left-width:13px;margin-left:4px}.play-button-lg[data-playing] .play-button-icon{width:14px;height:14px}.word-card .play-button{grid-area:play}.example-zh .play-button{margin-left:12px;position:relative;top:-2px}figure.say-box{border:1px solid var(--hairline);background-color:var(--paper);background-image:radial-gradient(at 100% 0,#f3dca580 0%,#f3dca500 55%);border-radius:28px;margin:1.6em 0 2.2em;padding:30px 32px 26px}.say-box-main{flex-wrap:wrap;align-items:center;gap:12px 24px;display:flex}.say-box-hanzi{color:var(--forest);font-family:var(--font-hanzi);font-size:clamp(56px,8vw,88px);line-height:1.1}.say-box-pinyin{color:var(--foliage);font-family:var(--font-english);letter-spacing:.01em;margin:8px 0 0;font-size:22px;font-weight:600}.say-box>figcaption{border-top:1px solid var(--hairline);flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-top:18px;padding-top:14px;display:flex}.say-box-meaning{color:var(--ink);font-size:19px;font-weight:700;line-height:1.5}.say-box-literal{color:var(--muted);font-size:15px;line-height:1.5}.vocab-list{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.vocab-card{min-width:0;display:grid}.vocab-card-examples{border:1px solid var(--hairline);background:var(--paper);border-radius:22px;grid-column:1/-1;overflow:hidden}.vocab-card-examples>.word-card{border:0;border-radius:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"hanzi text play";align-items:center;gap:20px}.vocab-level{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:8px;font-size:11px;font-weight:700;line-height:1.4}ul.vocab-examples{border-top:1px solid var(--hairline);margin:0;padding:0;list-style:none}.vocab-examples li{padding:16px 20px 18px}.vocab-examples li+li{border-top:1px solid var(--hairline);margin-top:0}.vocab-examples .example-zh{font-size:21px}.vocab-examples .example-pinyin{margin-top:2px;font-size:13px}.vocab-examples .example-meaning{border:0;margin:6px 0 0;padding:0;font-size:15px;line-height:1.6}.quiz{background:var(--sage-soft);border-radius:28px;margin:2.6em 0;padding:26px 30px 8px}.quiz-title{color:var(--forest);letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:700}.quiz-question{border:0;border-top:1px solid #d4dece;min-width:0;margin:0;padding:18px 0 20px}.quiz-title+.quiz-question{border-top:0}.quiz-question legend{float:left;width:100%;color:var(--ink);align-items:center;gap:12px;margin-bottom:14px;padding:0;font-size:18px;font-weight:700;line-height:1.45;display:flex}.quiz-options{clear:both;flex-wrap:wrap;gap:10px;display:flex}.quiz-option{background:var(--paper);min-height:48px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border:1px solid #c9d6c5;border-radius:16px;padding:10px 18px;font-size:16px;font-weight:600;line-height:1.35;transition:background .16s,border-color .16s,color .16s,opacity .16s}.quiz-option:hover:not(:disabled){border-color:var(--forest)}.quiz-option:disabled{cursor:default;opacity:.5}.quiz-option[data-state]{opacity:1}.quiz-option[data-state=right]{border-color:var(--forest);background:var(--forest);color:var(--paper)}.quiz-option[data-state=wrong]{color:#8f3a2c;background:#f7e7df;border-color:#e2b4a8}.quiz-feedback{color:var(--reading);margin:0;font-size:15px;line-height:1.6}.quiz-question[data-answered] .quiz-feedback{margin-top:12px}.quiz-retry{min-height:44px;color:var(--forest);font:inherit;text-underline-offset:4px;cursor:pointer;background:0 0;border:0;margin-left:10px;padding:0;font-weight:700;text-decoration:underline}.callout{background:var(--sage-soft);border-radius:22px;margin:1.8em 0;padding:22px 26px;font-size:16px;line-height:1.75}.callout-tip{background:#f8f0db}.callout-warning{background:#f7e7df}.callout-title{color:var(--forest);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:700}.callout-tip .callout-title{color:#765817}.callout-warning .callout-title{color:#8f3a2c}.callout>p{margin:0 0 .8em}.callout>:last-child{margin-bottom:0}.callout :is(ul,ol){margin:0;padding-left:1.2em}.cta-button{background:var(--forest);min-height:50px;color:var(--paper);white-space:nowrap;transition:background .16s, transform .16s var(--ease-out);border-radius:100px;justify-content:center;align-items:center;gap:10px;padding:0 24px;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex}.cta-button:hover{background:var(--pressed);transform:translateY(-1px)}.cta-button:active{transform:translateY(1px)}.cta-button-inverse{background:var(--paper);color:var(--forest)}.cta-button-inverse:hover{background:#fbf3dd}.cta-button-inverse:focus-visible{outline-color:var(--honey)}.cta-top{border:1px solid var(--hairline);background:var(--paper);border-radius:24px;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;margin:2em 0 2.4em;padding:12px 16px 12px 8px;display:grid}.cta-top-mascot{width:76px;height:auto;margin-block:-10px}.cta-top-copy p{color:var(--muted);margin:0;font-size:14px;line-height:1.55}.cta-top-copy .cta-top-title{color:var(--forest);margin-bottom:2px;font-size:16px;font-weight:700;line-height:1.4}.cta-middle{background-color:#e5ebdd;background-image:radial-gradient(at 100% 0,#f3dca5b8 0%,#f3dca500 56%);border-radius:32px;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:24px;margin:3em 0;padding:44px 0 0 44px;display:grid;overflow:hidden}.cta-middle-copy{padding-bottom:44px}.cta-middle-copy .blog-eyebrow{margin-bottom:14px}.cta-middle-title{color:var(--forest);font-family:var(--font-display);letter-spacing:-.045em;white-space:pre-line;margin:0;font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.12}.cta-middle-body{color:#4b6050;max-width:400px;margin:16px 0 26px;font-size:16px;line-height:1.7}.cta-middle-art{justify-content:center;align-self:stretch;align-items:flex-end;min-height:260px;max-height:340px;display:flex;overflow:hidden}.cta-middle-art img{align-self:flex-start;width:100%;max-width:230px;height:auto;margin-top:8px;display:block}.cta-phone img{border:6px solid #202823;border-bottom:0;border-radius:36px 36px 0 0;max-width:210px;box-shadow:0 0 0 1px #a2aa9f}.cta-middle-widget .cta-middle-art{align-items:center;max-height:none;padding-bottom:32px}.cta-middle-widget .cta-middle-art img{align-self:center;max-width:200px;margin-top:0}.cta-bottom{background-color:var(--forest);color:var(--paper);background-image:radial-gradient(at 100% 0,#edd79f42 0%,#edd79f00 52%),radial-gradient(at 0 100%,#3d6b58 0%,#254e4000 60%);border-radius:36px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;margin-block:8px 96px;padding:68px 0 0 68px;display:grid;overflow:hidden}.cta-bottom-copy{max-width:580px;padding-bottom:68px}.cta-bottom .blog-eyebrow{color:var(--honey)}.cta-bottom h2{color:var(--paper);font-family:var(--font-display);letter-spacing:-.058em;white-space:pre-line;margin:0;font-size:clamp(36px,4.6vw,60px);font-weight:600;line-height:1.04}.cta-bottom-copy>p:not(.blog-eyebrow,.cta-bottom-note){color:#dce6d5;max-width:470px;margin:22px 0 32px;font-size:17px;line-height:1.75}.cta-bottom-note{color:#b9c9b6;margin:18px 0 0;font-size:12px;line-height:1.6}.cta-bottom-mascot{width:250px;height:auto;margin:0 56px -8px 0}.post-faq{margin-top:56px}.post-faq-item{border-top:1px solid var(--border);padding-block:22px}.post-faq-item h3{color:var(--ink);letter-spacing:-.015em;margin:0;font-size:19px;font-weight:600;line-height:1.45}.post-faq-item p{margin:8px 0 0;font-size:17px}.post-sources{margin-top:48px}.post-sources h2{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;font-size:12px;font-weight:700}.post-sources ol{color:var(--muted);margin:0;padding-left:1.2em;font-size:14px;line-height:1.7}.post-sources li+li{margin-top:6px}.post-sources a{color:var(--forest);text-underline-offset:4px}.author-card{border-top:1px solid var(--border);grid-template-columns:56px minmax(0,1fr);gap:20px;margin-top:56px;padding-top:34px;display:grid}.author-card .author-monogram{width:56px;height:56px;font-size:21px}.author-card .blog-eyebrow{color:var(--muted);margin-bottom:6px}.author-card-name{margin:0;font-size:20px;font-weight:700}.author-card-name a{color:var(--forest);text-decoration:none}.author-card-name a:hover{text-underline-offset:4px;text-decoration:underline}.author-card-role{color:var(--foliage);margin:2px 0 10px;font-size:13px;font-weight:600}.author-card p:last-child{color:var(--reading);margin:0;font-size:15px;line-height:1.75}.author-hero-heading{align-items:center;gap:22px;display:flex}.author-hero-heading .blog-eyebrow{margin-bottom:6px}.author-hero .author-monogram{flex-basis:76px;width:76px;height:76px;font-size:30px}.author-hero-role{color:var(--foliage);margin:24px 0 0;font-size:15px;font-weight:600}.author-hero .blog-lead{margin-top:10px}.author-profiles{flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;display:flex}.author-profiles a{min-height:44px;color:var(--forest);text-underline-offset:5px;align-items:center;font-weight:600;display:inline-flex}.author-avatar{object-fit:cover}.author-facts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 56px;padding-block:8px 72px;display:grid}.author-facts h2{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:700}.blog[lang=th] .author-facts h2{letter-spacing:.02em;font-size:13px}.author-facts ul{margin:0;padding:0;list-style:none}.author-facts li{border-top:1px solid var(--border);color:var(--reading);padding-block:12px;font-size:15px;line-height:1.6}.author-fact-note{color:var(--muted)}.blog[lang=th] :is(.blog-hero h1,.post h1,.prose>h2,.cta-middle-title,.cta-bottom h2,.blog-section-title){font-family:var(--font-noto-thai), sans-serif;letter-spacing:-.01em;line-height:1.4}.blog[lang=th] .blog-eyebrow{letter-spacing:.02em;font-size:13px}.blog[lang=th] .prose{font-size:17px;line-height:1.95}@media (min-width:1320px){.post-layout:not(.post-layout-single) .cta-middle{margin-right:-120px}}@media (max-width:1100px) and (min-width:768px){.blog .site-shell{width:calc(100% - 64px)}}@media (max-width:1080px){.post-layout{grid-template-columns:minmax(0,720px);justify-content:center;padding-top:32px}.post-aside{display:none}.post-toc-mobile{border:1px solid var(--border);background:var(--paper);border-radius:20px;margin-bottom:32px;display:block}.post-toc-mobile summary{min-height:54px;color:var(--forest);cursor:pointer;justify-content:space-between;align-items:center;padding:0 20px;font-size:14px;font-weight:700;list-style:none;display:flex}.post-toc-mobile summary::-webkit-details-marker{display:none}.post-toc-mobile summary:after{content:"+";font-size:20px;font-weight:400}.post-toc-mobile[open] summary:after{content:"−"}.post-toc-mobile .toc-list{margin:0 20px 18px}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-hero-mascot{width:200px}}@media (max-width:767px){.blog .site-shell{width:calc(100% - 40px)}.blog-hero{grid-template-columns:minmax(0,1fr);padding-block:28px;position:relative}.blog-hero h1{padding-right:84px;font-size:clamp(38px,11vw,54px)}.blog-hero-compact h1{padding-right:0}.blog-hero-mascot{width:108px;margin:0;position:absolute;top:14px;right:-10px}.blog-lead{font-size:16px}.post-grid{grid-template-columns:minmax(0,1fr);gap:44px}.post-header{padding-top:8px}.post-heading,.post-heading-glyph{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:28px 36px}.post-heading .glyph-tile-lg{aspect-ratio:auto;text-align:left;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"hanzi pinyin""hanzi rule""hanzi meaning";align-content:center;justify-items:start;column-gap:24px;padding:22px 28px;display:grid}.post-heading .glyph-pinyin{grid-area:pinyin;align-self:end}.post-heading .glyph-hanzi{grid-area:hanzi;font-size:92px}.post-heading .glyph-rule{grid-area:rule;margin:8px 0}.post-heading .glyph-meaning{grid-area:meaning;align-self:start;padding:0}.post-heading .glyph-tile-lg .glyph-motif{display:none}.post h1{font-size:clamp(34px,9.4vw,46px)}.post-lead{font-size:17px}.post-byline{align-items:flex-start;margin-top:26px}.prose{font-size:17px;line-height:1.75}.prose>h2{font-size:26px}.prose>h3{font-size:20px}.word-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tone-explorer-head{flex-direction:column;align-items:flex-start;gap:12px}.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.word-card{gap:10px;padding:16px}.word-hanzi{font-size:46px}.word-hanzi-long{font-size:34px}.word-hanzi-phrase{font-size:26px}.example{padding:20px}figure.say-box{padding:24px 22px 20px}.say-box-pinyin{font-size:19px}.vocab-list{grid-template-columns:repeat(2,minmax(0,1fr))}.vocab-examples li{padding:14px 16px 16px}.quiz{padding:22px 20px 4px}.quiz-option{flex:100%}.example-zh{font-size:23px}.cta-top{grid-template-columns:56px minmax(0,1fr);padding:14px 16px 16px 6px}.cta-top-mascot{width:56px;margin:0}.cta-top .cta-button{grid-column:1/-1;width:100%}.cta-middle{grid-template-columns:minmax(0,1fr);gap:4px;padding:32px 24px 0}.cta-middle-copy{padding-bottom:8px}.cta-middle-art{min-height:220px;max-height:240px}.cta-middle-widget .cta-middle-art{max-height:none;padding-bottom:28px}.table-scroll :is(th,td){padding-inline:14px}.cta-bottom{border-radius:28px;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:64px;padding:44px 24px 0}.cta-bottom-copy{padding-bottom:8px}.cta-bottom .cta-button{width:100%}.cta-bottom-mascot{justify-self:center;width:150px;margin:12px 0 -6px}.author-card{grid-template-columns:48px minmax(0,1fr);gap:16px}.author-card .author-monogram{width:48px;height:48px;font-size:18px}}@media print{.top-nav,.reading-progress,.post-aside,.post-toc-mobile,[data-cta-block],.guide-outline,.support-footer{display:none!important}.post-layout{display:block}.prose{color:#222;font-size:12pt}}
.blog .tool-hero{padding-block:8px 28px}.blog .tool-hero .breadcrumbs{margin-bottom:14px}.blog .tool-hero h1{font-size:clamp(34px,3.6vw,50px)}.blog .tool-hero .blog-lead{max-width:720px;margin-top:12px;font-size:17px;line-height:1.6}.tool-body{padding-bottom:8px}.tool-body+.post-layout{padding-top:64px}.tools-hero .breadcrumbs{margin-bottom:36px}.tools-list{gap:24px;padding-bottom:88px;display:grid}.tool-card{border:1px solid var(--hairline);background:var(--paper);transition:border-color .2s, transform .3s var(--ease-out);border-radius:32px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);display:grid;position:relative;overflow:hidden}.tool-card:hover{border-color:#a7bea5;transform:translateY(-3px)}.tool-card-art{background-color:#e5ebdd;background-image:radial-gradient(at 100% 0,#f3dca5b8 0%,#f3dca500 56%),radial-gradient(at 0 100%,#c9d8c4cc 0%,#c9d8c400 62%);place-items:center;min-height:380px;padding:44px;display:grid}.tool-card-body{flex-direction:column;justify-content:center;padding:48px 52px;display:flex}.tool-card-body .blog-eyebrow{margin-bottom:14px}.tool-card-title{font-family:var(--font-display);letter-spacing:-.045em;margin:0;font-size:clamp(30px,3.2vw,42px);font-weight:600;line-height:1.1}.tool-card-link{color:var(--forest);text-decoration:none}.tool-card-link:after{content:"";z-index:1;border-radius:32px;position:absolute;inset:0}.tool-card-link:focus-visible{outline:none}.tool-card-link:focus-visible:after{outline:2px solid var(--accent);outline-offset:4px}.tool-card-description{color:#4b6050;margin:16px 0 0;font-size:17px;line-height:1.7}.tool-card-features{gap:10px;margin:24px 0 0;padding:0;list-style:none;display:grid}.tool-card-features li{color:var(--ink);align-items:baseline;gap:12px;font-size:15px;font-weight:600;line-height:1.5;display:flex}.tool-card-features li:before{content:"";background:var(--honey);border-radius:50%;flex:0 0 8px;width:8px;height:8px;transform:translateY(-1px)}.tool-card-action{background:var(--forest);min-height:50px;color:var(--paper);border-radius:100px;align-self:flex-start;align-items:center;gap:12px;margin-top:32px;padding:0 24px;font-size:15px;font-weight:600;transition:background .16s;display:inline-flex}.tool-card-action span{transition:transform .24s var(--ease-out);font-size:18px;line-height:1}.tool-card:hover .tool-card-action{background:var(--pressed)}.tool-card:hover .tool-card-action span{transform:translate(3px)}.blog[lang=th] .tool-card-title{font-family:var(--font-noto-thai), sans-serif;letter-spacing:-.01em;line-height:1.4}.counter-art{gap:14px;width:min(100%,440px);display:grid}.counter-art-paper{background:#fff;border-radius:22px;padding:24px 22px 18px;transform:rotate(-1.5deg);box-shadow:0 24px 48px -28px #183e3259,0 0 0 1px #254e4012}.counter-art-text{flex-wrap:wrap;align-items:flex-start;gap:10px 6px;margin:0;display:flex}.counter-art-text>span[data-level]{flex-direction:column;align-items:center;gap:6px;display:inline-flex}.counter-art-text>span>span:first-child,.counter-art-stop{color:var(--forest);font-family:var(--font-zh);font-size:30px;line-height:1.25}.counter-art-text>span>span:first-child{border-bottom:3px solid;padding-bottom:4px}.counter-art-text small{color:var(--muted);letter-spacing:.06em;white-space:nowrap;font-size:9px;font-weight:700}.counter-art-stats{grid-template-columns:1fr 1fr;gap:12px;display:grid}.counter-art-stats p{background:#fffffae6;border-radius:18px;gap:6px;margin:0;padding:14px 16px;display:grid}.counter-art-stats strong{color:var(--forest);font-family:var(--font-display);letter-spacing:-.04em;font-size:30px;font-weight:600;line-height:1}.counter-art-stats span{color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}.counter-art-bar{border-radius:6px;gap:3px;height:12px;display:flex;overflow:hidden}.counter-art [data-level="1"]>span:first-child{border-color:#254e40}.counter-art [data-level="2"]>span:first-child{border-color:#74a08a}.counter-art [data-level="3"]>span:first-child{border-color:#e3c27a}.counter-art-bar [data-level="1"]{background:#254e40}.counter-art-bar [data-level="2"]{background:#74a08a}.counter-art-bar [data-level="3"]{background:#e3c27a}.tool-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;display:grid}.tool-side{gap:12px;display:grid;position:sticky;top:20px;container-type:inline-size}.tool-results{gap:12px;min-width:0;display:grid}.tool-input{border:1px solid var(--hairline);background:#fff;border-radius:26px;flex-direction:column;transition:border-color .16s,box-shadow .16s;display:flex;overflow:hidden;box-shadow:0 18px 40px -32px #183e3266}.tool-input:focus-within{border-color:#8fae98;box-shadow:0 0 0 4px #254e4014,0 18px 40px -32px #183e3266}.tool-input-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px 12px 2px 22px;display:flex}.tool-input-head div{gap:4px;margin-left:auto;display:flex}.tool-label{color:var(--forest);letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:700}.tool-input textarea{box-sizing:border-box;width:100%;height:236px;min-height:140px;color:var(--ink);font-family:var(--font-zh);resize:vertical;background:0 0;border:0;padding:10px 22px 14px;font-size:20px;line-height:1.7;display:block}.tool-input textarea:focus-visible{outline:none}.tool-input textarea::placeholder{color:#95a396;font-family:var(--font-english);font-size:17px}.tool-privacy{border-top:1px solid var(--hairline);background:var(--paper);color:var(--muted);margin:0;padding:10px 22px 12px;font-size:12px;line-height:1.5}.tool-button{background:var(--paper);min-height:38px;color:var(--forest);font:inherit;cursor:pointer;border:1px solid #c9d6c5;border-radius:100px;padding:0 16px;font-size:13px;font-weight:600;transition:background .16s,border-color .16s,color .16s}.tool-button:hover{border-color:var(--forest);background:var(--forest);color:var(--paper)}.tool-button-quiet{color:var(--muted);background:0 0;border-color:#0000}.tool-button-quiet:hover{background:var(--sage-soft);color:var(--forest);border-color:#0000}.tool-cta .cta-top{border-radius:22px;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;margin:0;padding:10px 12px 10px 6px}.tool-cta .cta-top-mascot{width:56px;margin-block:-4px}.tool-cta .cta-top-copy .cta-top-title{font-size:15px}.tool-cta .cta-top-copy p{font-size:13px;line-height:1.45}.tool-cta .cta-button{min-height:44px;padding:0 18px;font-size:14px}@container (max-width:560px){.tool-cta .cta-top{grid-template-columns:56px minmax(0,1fr);padding:12px 14px 14px 6px}.tool-cta .cta-button{grid-column:1/-1;width:100%}}.counter-stats{gap:12px;display:grid}.counter-stats-main{grid-template-columns:1fr 1fr;gap:12px;margin:0;display:grid}.counter-stat{background:var(--sage);border-radius:22px;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0;padding:18px 20px 16px;display:flex}.counter-stat dt{color:var(--forest);font-size:13px;font-weight:600;line-height:1.4}.counter-stat dd{color:var(--forest);font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.05em;margin:0;font-size:46px;font-weight:600;line-height:1}.counter-stats-more{border:1px solid var(--hairline);background:var(--paper);border-radius:22px;grid-template-columns:1fr 1fr;margin:0;display:grid;overflow:hidden}.counter-stats-more div{justify-content:space-between;align-items:baseline;gap:12px;min-width:0;padding:12px 18px;display:flex}.counter-stats-more div:nth-child(n+3){border-top:1px solid var(--hairline)}.counter-stats-more div:nth-child(odd){border-right:1px solid var(--hairline)}.counter-stats-more dt{color:var(--muted);font-size:13px;line-height:1.35}.counter-stats-more dd{color:var(--forest);font-variant-numeric:tabular-nums;margin:0;font-size:17px;font-weight:700}.counter-hsk{border:1px solid var(--hairline);background:var(--paper);border-radius:28px;padding:22px 24px 24px}.counter-hsk-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;display:flex}.counter-hsk h2{color:var(--forest);font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:21px;font-weight:600;line-height:1.25}.counter-hsk h3{color:var(--ink);margin:28px 0 12px;font-size:16px;font-weight:700}.counter-level{color:var(--muted);align-items:center;gap:10px;font-size:14px;font-weight:600;display:inline-flex}.counter-level select{border:1px solid var(--border);min-height:40px;color:var(--forest);font:inherit;cursor:pointer;background:#fff;border-radius:12px;padding:0 12px;font-weight:700}.counter-coverage{color:var(--ink);margin:16px 0 12px;font-size:17px;font-weight:600;line-height:1.5}.counter-bar{background:var(--sage-soft);border-radius:7px;gap:2px;height:14px;display:flex;overflow:hidden}.counter-bar span{min-width:3px}:is(.counter-bar span,.counter-levels li .counter-swatch){background:#e3c27a}:is(.counter-bar span[data-level="7"],.counter-levels li[data-level="7"] .counter-swatch){background:#d4917a}:is(.counter-bar span[data-known][data-level="1"],.counter-levels li[data-known][data-level="1"] .counter-swatch){background:#254e40}:is(.counter-bar span[data-known][data-level="2"],.counter-levels li[data-known][data-level="2"] .counter-swatch){background:#3a6a57}:is(.counter-bar span[data-known][data-level="3"],.counter-levels li[data-known][data-level="3"] .counter-swatch){background:#55856f}:is(.counter-bar span[data-known][data-level="4"],.counter-levels li[data-known][data-level="4"] .counter-swatch){background:#74a08a}:is(.counter-bar span[data-known][data-level="5"],.counter-levels li[data-known][data-level="5"] .counter-swatch){background:#95b8a4}:is(.counter-bar span[data-known][data-level="6"],.counter-levels li[data-known][data-level="6"] .counter-swatch){background:#b6cfbf}.counter-levels{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 28px;margin:16px 0 0;padding:0;list-style:none;display:grid}.counter-levels li{color:var(--ink);white-space:nowrap;align-items:center;gap:10px;padding-block:6px;font-size:14px;font-weight:700;display:flex}.counter-levels li span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-weight:500}.counter-swatch{border-radius:3px;flex:0 0 10px;width:10px;height:10px}.counter-words{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.counter-words li{border:1px solid var(--hairline);background:#fff;border-radius:14px;align-items:baseline;gap:8px;padding:8px 12px;display:inline-flex}.counter-words li span:first-child{color:var(--forest);font-family:var(--font-zh);font-size:20px;line-height:1.2}.counter-words li span:nth-child(2){color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}.counter-words li span:nth-child(3){color:var(--foliage);font-size:12px;font-weight:600}.counter-words .counter-words-more{color:var(--muted);background:0 0;border-style:dashed;align-items:center;font-size:13px}.prose ul.tool-related{margin:0 0 1.4em;padding:0;list-style:none}.tool-related li{border-top:1px solid var(--border);gap:2px;padding-block:14px;display:grid}.prose .tool-related li+li{margin-top:0}.tool-related a{font-weight:700}.tool-related span{color:var(--muted);font-size:16px}.pinyin-art{justify-items:center;gap:14px;width:min(100%,440px);display:grid}.pinyin-art-paper{box-sizing:border-box;background:#fff;border-radius:22px;width:100%;padding:22px 22px 18px;transform:rotate(-1.5deg);box-shadow:0 24px 48px -28px #183e3259,0 0 0 1px #254e4012}.pinyin-art-ruby{color:var(--forest);font-family:var(--font-zh);text-align:center;margin:0;font-size:34px;line-height:1.9}.pinyin-art-ruby ruby{ruby-position:over}.pinyin-art-ruby rt{color:var(--foliage);font-family:var(--font-english);letter-spacing:.02em;font-size:12px;font-weight:700}.pinyin-art-ruby ruby[data-context]{background:#f3dca5;border-radius:10px;padding:0 4px}.pinyin-art-ruby ruby[data-context] rt{color:#7a5200}.pinyin-art-text{color:var(--forest);background:#fffffae6;border-radius:100px;margin:0;padding:10px 18px;font-size:17px;font-weight:600}.pinyin-art-styles{gap:6px;margin:0;display:flex}.pinyin-art-styles span{color:var(--muted);background:#fffffa99;border-radius:100px;padding:6px 12px;font-size:12px;font-weight:600}.pinyin-art-styles span[data-active]{background:var(--forest);color:var(--paper)}.tool-note,.counter-note{color:var(--muted);margin:16px 0 0;font-size:15px;line-height:1.6}.pinyin-panel{border:1px solid var(--hairline);background:var(--paper);border-radius:26px;align-content:start;padding:20px 24px 24px}.pinyin-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;display:flex}.pinyin-head h2{color:var(--forest);font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:21px;font-weight:600;line-height:1.25}.pinyin-options{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.pinyin-tones{background:var(--sage-soft);border:0;border-radius:100px;gap:2px;margin:0;padding:3px;display:flex}.pinyin-tones legend{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pinyin-tones label{position:relative}.pinyin-tones input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.pinyin-tones span{min-height:34px;color:var(--muted);border-radius:100px;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:600;transition:background .16s,color .16s,box-shadow .16s;display:inline-flex}.pinyin-tones small{color:inherit;opacity:.75;font-size:12px;font-weight:500}.pinyin-tones input:checked+span{color:var(--forest);background:#fff;box-shadow:0 1px 2px #183e321f}.pinyin-tones input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}.pinyin-switch{min-height:40px;color:var(--ink);cursor:pointer;align-items:center;gap:10px;font-size:13px;font-weight:600;display:inline-flex}.pinyin-switch input{appearance:none;cursor:pointer;background:#c9d6c5;border-radius:11px;flex:0 0 36px;width:36px;height:22px;margin:0;transition:background .16s;position:relative}.pinyin-switch input:before{content:"";width:16px;height:16px;transition:transform .2s var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #183e3233}.pinyin-switch input:checked{background:var(--forest)}.pinyin-switch input:checked:before{transform:translate(14px)}.pinyin-result{color:var(--ink);font-family:var(--font-zh);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:14px;padding:6px 2px 4px;font-size:28px;line-height:2.5}.pinyin-result ruby{ruby-align:center;ruby-position:over}.pinyin-result rt{color:var(--foliage);font-family:var(--font-english);letter-spacing:.01em;font-size:13px;font-weight:600}.pinyin-word{white-space:nowrap;margin-right:.18em;display:inline-block}.pinyin-syllable{color:inherit;font:inherit;line-height:inherit;background:0 0;border:0;border-radius:6px;padding:0;display:inline}button.pinyin-syllable{cursor:pointer;transition:background .16s}button.pinyin-syllable:hover,button.pinyin-syllable[aria-expanded=true]{background:var(--sage-soft)}button.pinyin-syllable ruby{text-underline-offset:7px;-webkit-text-decoration:underline dotted #c9a24a;text-decoration:underline dotted #c9a24a;text-decoration-thickness:2px}.pinyin-syllable[data-changed] rt{color:#9a6200}.pinyin-syllable[data-changed] ruby{background:#f8f0db;border-radius:6px}.pinyin-choice{line-height:2.5;display:inline-block;position:relative}.pinyin-menu{z-index:5;border:1px solid var(--border);background:var(--paper);white-space:nowrap;border-radius:14px;gap:4px;padding:5px;line-height:1;display:flex;position:absolute;top:calc(100% - 6px);left:50%;transform:translate(-50%);box-shadow:0 18px 36px -18px #183e3259}.pinyin-menu button{min-width:44px;min-height:40px;color:var(--forest);font-family:var(--font-english);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:0 10px;font-size:15px;font-weight:600}.pinyin-menu button:hover{background:var(--sage-soft)}.pinyin-menu button[aria-pressed=true]{background:var(--forest);color:var(--paper)}.pinyin-legend{color:var(--muted);flex-wrap:wrap;gap:6px 20px;margin:6px 0 0;padding:0;font-size:13px;line-height:1.5;list-style:none;display:flex}.pinyin-legend li{align-items:center;gap:8px;display:flex}.pinyin-legend li:before{content:"";border-bottom:2px dotted #c9a24a;flex:0 0 16px;height:0}.pinyin-legend li[data-legend=changed]:before{background:#f8f0db;border:0;border-radius:4px;height:12px;box-shadow:inset 0 -2px #9a6200}.pinyin-output{background:var(--sage-soft);border-radius:20px;margin-top:18px;padding:14px 18px 18px}.pinyin-output-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.pinyin-output h3{color:var(--forest);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:12px;font-weight:700}.pinyin-output p{color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;font-size:17px;line-height:1.7}.blog :is(.tool-columns,.tool-card) [lang=zh-Latn-pinyin]{font-family:var(--font-english)}.blog[lang=th] :is(.tool-label,.pinyin-output h3,.tool-card-body .blog-eyebrow){letter-spacing:.02em;font-size:13px}@media (max-width:900px){.tool-card{grid-template-columns:minmax(0,1fr)}.tool-card-art{min-height:0;padding:40px 32px}}@media (max-width:1023px){.tool-columns{grid-template-columns:minmax(0,1fr)}.tool-side{position:static}}@media (max-width:767px){.tools-list{padding-bottom:56px}.tool-card,.tool-card-link:after{border-radius:26px}.tool-card-art{padding:32px 20px}.counter-art-text>span>span:first-child,.counter-art-stop{font-size:24px}.counter-art-stats strong{font-size:26px}.tool-card-body{padding:28px 24px 30px}.tool-card-description{font-size:16px}.tool-card-action{justify-content:center;align-self:stretch}.tool-body+.post-layout{padding-top:40px}.tool-input{border-radius:22px}.tool-input-head{padding:10px 10px 2px 18px}.tool-button{min-height:44px}.tool-input textarea{height:180px;padding:8px 18px 12px;font-size:18px}.tool-privacy{padding-inline:18px}.counter-stat{border-radius:18px;padding:14px 16px}.counter-stat dd{font-size:34px}.counter-stats-more div{padding:10px 14px}.counter-hsk{border-radius:22px;padding:20px 18px 22px}.pinyin-panel{border-radius:22px;padding:18px 16px 20px}.pinyin-result{font-size:24px}.pinyin-art-ruby{font-size:26px}.counter-levels{grid-template-columns:minmax(0,1fr)}}