/* Mouthful 中文 — page styles on top of the shared base / sections / player CSS */
:root{--z1:var(--a2);--z1-tint:var(--a2-tint);--z2:var(--sky);--z2-tint:var(--sky-tint);--z3:var(--b2);--z3-tint:var(--b2-tint)}
.zh,.wc-word,.cc-char,.bub p,.pl-ex li span,.ord-bank .tok,.ord-answer .tok,.choice .txt,.mt,.zh-big b,.pl-sound-words b{font-family:"Noto Sans SC","Bricolage Grotesque",system-ui,sans-serif}
.gi.zh{font-family:"Noto Sans SC",sans-serif;font-weight:900}
.logo-mark.zh-mark{font-family:"Noto Sans SC",sans-serif;font-weight:900;font-size:1.2rem;padding-bottom:0}
.wc-word{letter-spacing:.02em}
.me-lv[style*="--z"] .bar i{background:var(--pc)}

/* tone lab */
.tone-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:40px}
.tone-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 16px;border:var(--bw) solid var(--stage-text);border-radius:22px;background:transparent;color:var(--stage-text);transition:transform .3s var(--spring),background-color .25s}
@media (hover:hover){.tone-card:hover{transform:translateY(-4px) rotate(-1deg)}}
.tone-card.on{background:var(--stage-text);color:var(--stage)}
.tone-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:800;background:var(--tc);color:#1D1A22;border:2px solid currentColor}
.tone-card.t1{--tc:var(--a2)}.tone-card.t2{--tc:var(--b1)}.tone-card.t3{--tc:var(--sky)}.tone-card.t4{--tc:var(--b2)}.tone-card.t0{--tc:var(--lilac)}
.tone-svg{width:100%;max-width:150px;height:auto}
.tone-grid-l{fill:none;stroke:currentColor;stroke-opacity:.18;stroke-width:1.5;stroke-dasharray:3 4}
.tone-line{fill:none;stroke:var(--tc);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tone-mark{font-family:"Gentium Book Plus",serif;font-size:2.2rem;line-height:1}
.tone-name{font-size:.8rem;font-weight:700;opacity:.8;text-align:center}
.zh-sub{color:var(--stage-text);font-size:1.4rem;margin:0 0 18px}
.sound-layout{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:24px;align-items:start}
.py-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.py-tile{height:64px;font-size:1.5rem}
.py-tile.fin{--c:var(--b1)}
.py-tile.on{background:var(--stage-text);color:var(--stage)}
.zh-big{font-size:2.6rem;line-height:1.2;margin:6px 0 8px}
.zh-big b{font-weight:800}
.sd-more .word-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;padding:8px 12px}
.sd-more .word-chip small{font-weight:600;opacity:.75}
@media (max-width:900px){ .tone-grid{grid-template-columns:repeat(3,1fr)} .sound-layout{grid-template-columns:1fr} }
@media (max-width:520px){ .tone-grid{grid-template-columns:repeat(2,1fr)} .tone-card.t0{grid-column:span 2} }

/* game */
#gOptions{grid-template-columns:1fr 1fr;align-items:stretch}      /* two equal buttons (the shared grid has a middle "vs" column the Chinese game doesn't use) */
#gOptions .opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
#gOptions .opt b{font-size:2.4rem;line-height:1.1}
#gOptions .opt small{font-weight:600;opacity:.75}

/* character of the day */
.chars-sec{background:var(--b1-tint)}
.char-card{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:28px;align-items:center;background:var(--card);border:var(--bw) solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--shadow);padding:28px}
/* 田字格: the practice grid Chinese children write characters in */
.cc-big{position:relative;display:grid;place-items:center;aspect-ratio:1;border:var(--bw) solid var(--ink);border-radius:26px;background-color:var(--paper);
  background-image:linear-gradient(to right,transparent 49.6%,color-mix(in srgb,var(--tomato) 30%,transparent) 49.6% 50.4%,transparent 50.4%),linear-gradient(to bottom,transparent 49.6%,color-mix(in srgb,var(--tomato) 30%,transparent) 49.6% 50.4%,transparent 50.4%)}
.cc-char{font-size:clamp(6rem,18vw,10rem);font-weight:900;line-height:1}
.cc-big .speak{position:absolute;top:12px;right:12px}
.cc-tags{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.cc-read{font-size:1.15rem;font-weight:600;margin:0 0 10px}
.cc-read .ipa{font-size:1.4rem}
.cc-story{display:flex;gap:8px;align-items:flex-start;font-weight:600;font-size:1.05rem;margin:0 0 12px}
.cc-story .ic{flex:none;width:1.5em;height:1.5em}
.cc-ex{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--paper);margin-bottom:14px}
.cc-ex p{margin:0}
.cc-ex b{font-size:1.25rem}
.cc-ex .tr{display:block}
.cc-nav{display:flex;gap:10px;flex-wrap:wrap}
.zh-soon{font-size:1.6rem;color:var(--ink-soft)}
@media (max-width:760px){ .char-card{grid-template-columns:1fr;padding:20px} .cc-big{max-width:240px;margin:0 auto;width:100%} }

/* handwriting font (字 button) */
.icon-btn.zh-font{font-family:"Noto Sans SC",sans-serif;font-weight:900;font-size:1.05rem}
.icon-btn.zh-font.on{background:var(--lilac);color:#1D1A22;font-family:"Ma Shan Zheng",serif;font-weight:400;font-size:1.3rem}
html.zh-hand .zh,html.zh-hand .wc-word,html.zh-hand .cc-char,html.zh-hand .bub p,html.zh-hand .gi.zh,html.zh-hand #gOptions b,html.zh-hand .pl-ex li span{font-family:"Bricolage Grotesque","Ma Shan Zheng","Noto Sans SC",serif;font-synthesis:none}
/* the handwriting is for the hanzi only: Bricolage comes first in the stack and has no hanzi, so Vietnamese, pinyin and digits keep it and only
   the characters fall through to Ma Shan Zheng (which has Latin letters but no Vietnamese ones); no fake bold for the brush font.
   The pinyin and the translation inside those boxes keep their own fonts too */
html.zh-hand .pl-ex li .py{font-family:"Gentium Book Plus","Charis SIL","Noto Sans",serif;font-weight:600}
html.zh-hand .pl-ex li .tr{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500}

/* writing pad */
.wpad{position:fixed;inset:0;z-index:170;display:grid;place-items:center;padding:12px;background:rgba(20,16,24,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.wpad.open{opacity:1}
.wpad[hidden]{display:none}
.wp-card{width:min(440px,100%);max-height:100%;overflow-y:auto;background:var(--card);border:var(--bw) solid var(--ink);border-radius:28px;box-shadow:var(--sh-lg);padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(16px);transition:transform .35s var(--spring)}
.wpad.open .wp-card{transform:none}
.wp-top{display:flex;align-items:center;gap:10px;width:100%}
.wp-head{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.wp-head b{font-size:1.15rem}
.wp-head small{color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-count{font-weight:800;font-size:.85rem;padding:4px 10px;border:2px solid var(--ink);border-radius:999px}
.wp-count:empty{display:none}
.wp-box{position:relative;border:var(--bw) solid var(--tomato);border-radius:14px;background:var(--paper);touch-action:none}
.wp-grid{position:absolute;inset:0;width:100%;height:100%}
.wp-grid path{fill:none;stroke:var(--tomato);stroke-opacity:.35;stroke-width:.6;stroke-dasharray:2 2}
#wpTarget{position:relative}
.wp-msg{min-height:2.6em;margin:0;text-align:center;font-weight:700;color:var(--ink-soft)}
.wp-tools,.wp-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wp-tools .btn,.wp-nav .btn{padding:11px 16px;font-size:.92rem}
.wp-nav .btn:disabled{opacity:.35;pointer-events:none}
.wp-credit{margin:0;font-size:.68rem;color:var(--muted)}
.cc-nav .btn .ic{width:1.3em;height:1.3em}
html.zh-hand .cc-char{font-size:clamp(8rem,26vw,13.5rem);line-height:1.1}

/* fun mode: the card on the home page and the full-screen games (arcade-zh.js) */
.fun-hub{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;max-width:780px;margin:0 auto 56px;padding:28px 30px;background:var(--lilac);color:#1D1A22;border:var(--bw) solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--shadow)}
.fun-hub-mascot{width:130px;transform:rotate(-6deg)}
.fun-hub h3{font-size:clamp(1.8rem,5vw,2.4rem);line-height:1;margin:10px 0 8px;letter-spacing:-.03em}
.fun-hub p{margin:0 0 16px;font-weight:600;max-width:48ch}
.fun-hub-btns{display:flex;gap:10px;flex-wrap:wrap}
.fun-hub-btns .btn .ic{width:1.25em;height:1.25em;margin-right:4px}
.fun-ear{margin-top:6px}
@media (max-width:620px){.fun-hub{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 18px}.fun-hub-mascot{width:96px}.fun-hub-btns{justify-content:center}}

.fx .pl-top{gap:8px}
.fx-hearts[hidden],.fx-pts[hidden]{display:none}
.fx-title{flex:1;min-width:0;font-weight:800;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-hearts{display:inline-flex;gap:2px;flex:none}
.fx-hearts i{display:inline-flex;transition:transform .3s var(--spring),opacity .3s}
.fx-hearts i.lost{opacity:.22;filter:grayscale(1);transform:scale(.8)}
.fx-hearts .ic{width:1.5em;height:1.5em}
.fx-pts{display:inline-flex;align-items:center;gap:4px;font-weight:800;white-space:nowrap;min-width:48px;justify-content:flex-end}
.fx-pts .ic{width:1.3em;height:1.3em}
.fx-snd{width:40px;height:40px;flex:none}
.fx-snd[aria-pressed="false"]{opacity:.55}
.fx-timer{flex:none;width:calc(100% - 32px);max-width:728px;margin:0 auto 6px;height:12px}
.fx-timer[hidden]{display:none}
.fx-timer i{background:var(--a2);transition:none}
.fx-timer i.low{background:var(--tomato)}

.fx-menu,.fx-q,.fx-result{display:flex;flex-direction:column;gap:12px}
.fx-say{display:flex;align-items:center;gap:10px;margin-top:6px}
.fx-mascot{display:block;width:62px;flex:none}
.fx-say .pl-bubble{position:relative;bottom:auto;left:auto;transform:none;max-width:none;width:auto;flex:1;animation:none;min-height:2.4em;display:flex;align-items:center}
.fx-say .pl-bubble:empty{visibility:hidden}
.fx-kind{margin:2px 0 0}
.fx-kind button,.fx-scope .seg2 button{font-size:.95rem;padding:11px 8px}
.fx-kind .ic{width:1.2em;height:1.2em;margin-right:4px;vertical-align:-.2em}
.fx-scope{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}
.fx-scope .seg2{margin:0;flex:1;min-width:210px}
.fx-scope small{color:var(--muted);font-weight:700}
.fx-games{display:grid;gap:12px}
.fx-game{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border:var(--bw) solid var(--ink);border-radius:22px;background:var(--card);color:var(--ink);box-shadow:var(--sh);transition:transform .25s var(--spring),box-shadow .25s}
.fx-game:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.fx-gi{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;background:var(--lilac);border:2px solid var(--ink)}
.fx-gi .ic{width:30px;height:30px}
.fx-gt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fx-gt b{font-size:1.2rem;letter-spacing:-.01em}
.fx-gt small{font-weight:600;color:var(--ink-soft);line-height:1.3}
.fx-gt em{font-style:normal;font-weight:800;font-size:.8rem;color:var(--tomato)}
.fx-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tomato);color:#1D1A22;border:2px solid var(--ink);flex:none}
.fx-go .ic{width:18px;height:18px}

.fx-kick{font-weight:800;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.fx-kick b{display:inline-flex;align-items:center;gap:2px;color:var(--tomato)}
.fx-kick .ic{width:1.15em;height:1.15em}
.fx-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:18px 12px;border:var(--bw) solid var(--ink);border-radius:26px;background:var(--card);box-shadow:var(--sh);text-align:center}
.fx-big{font-size:clamp(3.4rem,16vw,5.2rem);line-height:1.05;font-weight:800}
.fx-py{font-size:1.4rem}
.fx-mean{font-size:clamp(1.6rem,7vw,2.3rem);font-weight:800;line-height:1.15}
.fx-sub{color:var(--muted);font-weight:700}
.fx-listen{position:relative;width:92px;height:92px}
.fx-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:86px;padding:16px 10px 12px;border:var(--bw) solid var(--ink);border-radius:20px;background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--sh);text-align:center;transition:transform .2s var(--spring),background-color .2s,box-shadow .2s}
.fx-opt b{font-size:1.9rem;line-height:1.1}
.fx-opt .ipa{font-size:1.05rem}
.fx-opt .fx-m{font-size:1.02rem;line-height:1.25}
.fx-opt .fx-key{position:absolute;top:6px;left:9px;font-size:.7rem;font-weight:800;opacity:.4}
.fx-opt:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.fx-opt.right{background:var(--a2);color:#1D1A22;animation:bounce .5s var(--spring)}
.fx-opt.wrong{background:#FF8A80;color:#1D1A22;animation:shake .45s}
.fx-opt:disabled{cursor:default}
.fx-info{display:flex;flex-direction:column;gap:6px;margin-top:2px;padding:12px 14px;border:var(--bw) solid var(--ink);border-radius:20px;background:#FFD5CE;color:#1D1A22}
.fx-info-w{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fx-info-w b{font-size:1.7rem;line-height:1.15}
.fx-info-m{font-weight:700}
.fx-info-ex{display:flex;flex-direction:column;margin:0;font-weight:600}
.fx-info-ex .tr,.fx-info-ex .py{display:block}
.fx-why{margin:4px 0 0;font-weight:600;line-height:1.4;color:var(--ink-soft)}
.fx-info .fx-why{color:#1D1A22}
.fx-next{align-self:stretch;justify-content:center;margin-top:8px}

.fx-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:520px){.fx-board{grid-template-columns:repeat(4,1fr)}}
.fx-card{position:relative;aspect-ratio:3/4;padding:0;border:0;background:none;perspective:700px}
.fx-cb{position:absolute;inset:0;transition:transform .45s var(--spring);transform-style:preserve-3d}
.fx-card.up .fx-cb,.fx-card.done .fx-cb{transform:rotateY(180deg)}
.fx-back,.fx-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:var(--sh);backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center;line-height:1.15}
.fx-back{background:repeating-linear-gradient(45deg,var(--lilac) 0 10px,#B9A2FF 10px 20px);font-size:2rem;font-weight:800;color:#1D1A22}
.fx-face{background:var(--card);transform:rotateY(180deg);font-weight:700;font-size:.92rem;color:var(--ink)}
.fx-face b{font-size:2rem}
.fx-face.m{background:var(--b1-tint)}
.fx-card.done .fx-face{background:var(--a2);color:#1D1A22}
.fx-memory .fx-kick{justify-content:center}

.fx-tr{font-size:1.35rem;margin:2px 0 4px;text-align:center}
.fx-hintline{font-family:"Gentium Book Plus",serif;font-style:italic;color:var(--ink-soft);font-size:1.15rem;min-height:1.4em;text-align:center}
.fx-tools{display:flex;justify-content:center}
.fx-build .ord-answer.right{border-bottom-color:var(--a2);background:color-mix(in srgb,var(--a2) 28%,transparent)}
.fx-build .ord-answer.wrong{border-bottom-color:var(--tomato);animation:shake .45s}
.fx-build .tok{font-family:"Noto Sans SC","Bricolage Grotesque",sans-serif;font-size:1.35rem}
.fx-sentence{font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.35;text-align:center;margin:6px 0}
.fx-sentence .gap-slot{display:inline-block;min-width:2.2em;margin:0 4px;padding:0 6px;border-bottom:3px solid var(--tomato);color:var(--tomato);font-weight:800}
.fx-sentence .gap-slot.ok{color:var(--ink);border-bottom-color:var(--a2);background:color-mix(in srgb,var(--a2) 30%,transparent)}
.fx-sentence .gap-slot.no{color:var(--ink);border-bottom-color:var(--a2)}
.fx-tr2{margin:0;text-align:center;font-weight:600;color:var(--ink-soft)}
.fx-gap .fx-opt b{font-size:1.7rem}

.fx-result{align-items:center;text-align:center}
.fx-end-mascot{width:130px;margin:4px auto 0}
.fx-h4{margin:14px 0 2px;align-self:flex-start}
.fx-review{list-style:none;padding:0;margin:0;display:grid;gap:8px;width:100%;text-align:left}
.fx-review li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:2px solid var(--ink);border-radius:16px;background:var(--card)}
.fx-review b{font-size:1.4rem}
.fx-review small{margin-left:auto;font-weight:600;color:var(--ink-soft);text-align:right}
.fx-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.fx-actions .btn .ic{width:1.2em;height:1.2em;margin-right:4px}
html.zh-hand .fx-big,html.zh-hand .fx-opt b.zh,html.zh-hand .fx-sentence,html.zh-hand .fx-face b{font-family:"Bricolage Grotesque","Ma Shan Zheng","Noto Sans SC",serif;font-synthesis:none}

/* HSK: level cards (home page), word list, chips in the fun mode and on word cards (hsk-zh.js) */
.hsk-sec{background:var(--sky-tint)}
.hsk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:8px}
.hsk-card{display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--sh);position:relative}
.hsk-card::before{content:"";position:absolute;inset:0 0 auto 0;height:12px;background:var(--hc);border-radius:22px 22px 0 0;border-bottom:var(--bw) solid var(--ink)}
.hsk-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px}
.hsk-n{font-size:1.7rem;letter-spacing:-.03em}
.hsk-top span{font-weight:700;color:var(--ink-soft)}
.hsk-bar{height:14px}
.hsk-bar i{background:var(--hc)}
.hsk-stat{margin:0;font-weight:600;color:var(--ink-soft);font-size:.92rem;line-height:1.4}
.hsk-stat b{color:var(--ink)}
.hsk-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hsk-btns .btn{padding:10px 14px;font-size:.92rem}
.hsk-btns .btn .ic{width:1.2em;height:1.2em;margin-right:3px}
.hsk-note{max-width:70ch;margin:26px auto 0;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.hsk-note a{text-decoration:underline}
.hsk-chip,.lvl-hsk{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:4px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--b1);color:#1D1A22;font-weight:800;font-size:.82rem}
.part-head{grid-column:1/-1;margin:14px 0 -2px;font-size:1.05rem;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.part-head::after{content:"";flex:1;height:0;border-top:2px dashed var(--ink);opacity:.35}
.wc-hsk{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:3px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--b1);color:#1D1A22;font-weight:800;font-size:.78rem}
.wc-hsk small{font-weight:700;opacity:.7}

.seg3{grid-template-columns:repeat(3,1fr)}
.fx-levels{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700}
.fx-levels span{margin-right:2px}
.fx-levels button{min-width:42px;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:800;transition:background-color .2s,color .2s,transform .25s var(--spring)}
.fx-levels button:active{transform:scale(.94)}
.fx-levels button.on{background:var(--ink);color:var(--paper)}
.fx-hsk{font-weight:800;color:#1D1A22}
.fx.busy .fx-games{opacity:.45;pointer-events:none}
.fx.busy .fx-games::after{content:"…";display:block;text-align:center;font-weight:800;font-size:1.6rem}

.hl-tools{display:flex;flex-direction:column;gap:10px;width:100%;max-width:760px;margin:0 auto;padding:4px 16px 8px}
.hl-tools input{height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:1rem}
.hl-tools input:focus{outline:3px dashed var(--tomato);outline-offset:2px}
.hl-chips{display:flex;gap:6px;flex-wrap:wrap}
.hl-chips button{min-width:44px;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:800}
.hl-chips button.on{background:var(--ink);color:var(--paper)}
.hl-count{max-width:728px;margin:0 auto 8px;font-weight:700;color:var(--muted)}
.hl-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:8px;max-width:728px}
.hl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--ink);border-radius:16px;background:var(--card)}
.hl-main{display:flex;flex-direction:column;min-width:96px;line-height:1.15}
.hl-w{font-size:1.6rem}
.hl-m{margin-left:auto;text-align:right;font-weight:600;line-height:1.3}
.hl-m small{display:block;color:var(--muted);font-weight:700;font-size:.74rem}
.hl-empty{padding:24px;text-align:center;font-weight:700;color:var(--muted)}
.hl-more{display:flex;margin:14px auto 0;justify-content:center}
html.zh-hand .hl-w{font-family:"Bricolage Grotesque","Ma Shan Zheng","Noto Sans SC",serif;font-synthesis:none}
.m-hsk{font-weight:800;padding:1px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--b1);color:#1D1A22;font-size:.74rem}
.hl-m .hl-alt{font-weight:600;color:var(--ink-soft);font-size:.82rem}
.fx-alt{font-weight:600;color:var(--ink-soft)}
.fx-info.fx-new{background:var(--b1-tint)}

/* level tabs 1-6 and 7–9: a row that scrolls sideways when it does not fit; the levels being written look quieter */
:root{--z4:var(--tomato);--z4-tint:var(--b2-tint);--z5:var(--lilac);--z5-tint:var(--a2-tint);--z6:var(--b1);--z6-tint:var(--b1-tint);--z7:#FFD23F;--z7-tint:var(--b1-tint)}
#levelTabs{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
#levelTabs::-webkit-scrollbar{display:none}
#levelTabs button{flex:none}
#levelTabs button.soon:not(.active){opacity:.55}
#levelTabs button.beta b::after{content:"β";margin-left:3px;font-size:.7em;vertical-align:super}
@media (max-width:680px){ #levelTabs{display:flex;width:100%} #levelTabs button{min-width:88px} }
.lvl-code.wide{font-size:48px;letter-spacing:-.04em}