:root{
  --bg:#f6f5f1; --surface:#ffffff; --surface-2:#f0eee7; --text:#1e1d1a; --muted:#6a675f; --border:#e2dfd5;
  --accent:#2c64c9; --accent-soft:#e6eefc; --good:#1e7f48; --good-soft:#e3f2e8; --warn-soft:#fbf0d9;
  --tag:#7a5a12; --tag-bg:#f6ecd2; --shadow:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
  --g-shou:#c2410c; --g-yi:#1d4ed8; --g-mian:#7c3aed; --g-bian:#0f766e; --g-ling:#a16207; --g-tao:#be185d;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16171a; --surface:#1f2024; --surface-2:#26282d; --text:#ecebe6; --muted:#a3a19a; --border:#34363c;
    --accent:#7aa7ff; --accent-soft:#1f2c47; --good:#5ccf8b; --good-soft:#1b3326; --warn-soft:#3a3020;
    --tag:#f0d29a; --tag-bg:#3a3122; --shadow:none;
    --g-shou:#fb923c; --g-yi:#7aa2ff; --g-mian:#b794f6; --g-bian:#4fd1c5; --g-ling:#e3b341; --g-tao:#f472b6;
  }
}
:root[data-theme="dark"]{
  --bg:#16171a; --surface:#1f2024; --surface-2:#26282d; --text:#ecebe6; --muted:#a3a19a; --border:#34363c;
  --accent:#7aa7ff; --accent-soft:#1f2c47; --good:#5ccf8b; --good-soft:#1b3326; --warn-soft:#3a3020;
  --tag:#f0d29a; --tag-bg:#3a3122; --shadow:none;
  --g-shou:#fb923c; --g-yi:#7aa2ff; --g-mian:#b794f6; --g-bian:#4fd1c5; --g-ling:#e3b341; --g-tao:#f472b6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}
body{font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border)}
.top-row{display:flex;align-items:center;gap:12px;padding:12px 0 4px;flex-wrap:wrap}
.top-row h1{font-size:18px;margin:0}
.top-row .sub{color:var(--muted);font-size:13px}
.top-row .sp{margin-left:auto}
nav.tabs{display:flex;gap:6px;padding:6px 0 10px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;text-decoration:none;color:var(--muted);padding:7px 16px;border-radius:999px;font-size:15px}
nav.tabs a:hover{color:var(--text);background:var(--surface-2)}
nav.tabs a.on{color:var(--accent);background:var(--accent-soft);font-weight:600}
nav.tabs a .n{font-size:12px;opacity:.75;margin-left:4px}
main{padding:22px 0 70px}
h2{font-size:23px;margin:4px 0 8px}
h3{font-size:18px;margin:34px 0 10px;padding-top:4px;scroll-margin-top:calc(var(--hh,100px) + 12px)}
h4{font-size:15px;margin:18px 0 6px}
p{margin:8px 0}
.lead{color:var(--muted);margin-bottom:16px}
.muted{color:var(--muted)} .small{font-size:13px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);margin:12px 0}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ggrp{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
@media (max-width:640px){.ggrp{grid-template-columns:1fr}}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin:10px 0}
table{width:100%;border-collapse:collapse;font-size:14px}
.tbl table{min-width:560px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:0 6px;margin:0 1px;border-radius:5px;font-size:12px;background:var(--tag-bg);color:var(--tag);white-space:nowrap}
.mk{display:inline-block;padding:0 6px;border-radius:5px;font-size:12px;margin-left:2px;white-space:nowrap}
.mk-ben{background:var(--good-soft);color:var(--good)} .mk-shu{background:var(--accent-soft);color:var(--accent)} .mk-li{background:var(--surface-2);color:var(--muted)}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.en{font-family:"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.ipa{font-family:"Charis SIL","Doulos SIL","Gentium Plus","Lucida Grande","Arial Unicode MS",sans-serif;color:var(--muted)}
button{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:5px 12px;border-radius:8px;font-size:14px;line-height:1.4}
button:hover{border-color:var(--accent)}
button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
input[type=text],input[type=search],select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:14px}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.note{background:var(--warn-soft);border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.toc button{font-size:13px;padding:3px 10px}
.gdot{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.g-shou{--gc:var(--g-shou)} .g-yi{--gc:var(--g-yi)} .g-mian{--gc:var(--g-mian)} .g-bian{--gc:var(--g-bian)} .g-ling{--gc:var(--g-ling)} .g-tao{--gc:var(--g-tao)}
.gname{color:var(--gc)}
.gbar{border-left:4px solid var(--gc,var(--accent))}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.chain .node{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex:1 1 140px;min-width:140px}
.chain .node .e{font-size:22px;line-height:1.2}
.chain .node .r{font-size:13px;color:var(--muted);line-height:1.5}
.formula{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;background:var(--surface-2);border-radius:10px;padding:12px 14px;overflow-x:auto;white-space:pre;line-height:1.65}
.concept{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.concept .card h4{margin-top:2px}
.concept .big{font-size:26px}
.steps{counter-reset:s;list-style:none;padding:0;margin:8px 0}
.steps li{counter-increment:s;position:relative;padding:4px 0 4px 34px}
.steps li::before{content:counter(s);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tree{font-size:14px;line-height:1.7}
.tree .root{font-weight:600;padding:8px 12px;background:var(--accent-soft);border-radius:8px;display:inline-block}
.tree ul{list-style:none;margin:6px 0 0 14px;padding:0 0 0 14px;border-left:2px solid var(--border)}
.tree li{position:relative;margin:6px 0}
.tree li::before{content:"";position:absolute;left:-14px;top:13px;width:10px;border-top:2px solid var(--border)}
details.rule{border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:8px 0;background:var(--surface)}
details.rule summary{cursor:pointer;font-weight:600;list-style:none}
details.rule summary::-webkit-details-marker{display:none}
details.rule summary .n{color:var(--gc,var(--accent));margin-right:4px}
details.rule summary .ex{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
details.rule[open] summary .ex{display:none}
details.rule .ln{padding-left:2px} details.rule .ln.i1{padding-left:18px} details.rule .ln.i2{padding-left:34px}
details.rule .exl{color:var(--muted);font-weight:600;margin-right:6px}
.mcard .mq{color:var(--muted);margin-top:10px;font-size:14px}
.mcard .mm{font-size:19px;font-weight:600;line-height:1.6;margin:4px 0 8px}
.mcard .mi{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.mcard h4{margin:16px 0 6px}
.mcard h4 .sn{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;align-items:center;justify-content:center;margin-right:8px;vertical-align:1px}
.pairs{margin:4px 0;padding-left:20px} .pairs li{margin:8px 0}
.crumbs{font-size:13px;color:var(--muted);margin:8px 0 2px;line-height:1.9}
.crumbs a,.linkbtn{color:var(--accent)}
.linkbtn{border:none;background:none;padding:0;font-size:inherit;cursor:pointer;text-decoration:underline}
.subcard{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:12px 0;background:var(--surface);scroll-margin-top:calc(var(--hh,100px) + 12px)}
.subh{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.subn{display:inline-flex;width:22px;height:22px;border-radius:6px;background:var(--gc,var(--accent));color:#fff;font-size:13px;font-weight:700;align-items:center;justify-content:center}
.mcard code,.subcard code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;background:var(--surface-2);padding:1px 7px;border-radius:5px}
.lbl{font-weight:600;margin:12px 0 4px}
.grid4 td{min-width:150px}
.ok{color:var(--good)} .ng{color:#be3a30}
.derive{margin:4px 0;padding-left:22px}
.derive li{margin:8px 0}
.derive .dex{font-size:14px;margin-top:2px}
.contrast{margin:4px 0;padding-left:20px}
.contrast li{margin:6px 0}
details.chk{border:1px dashed var(--border);border-radius:8px;padding:6px 12px;margin:6px 0}
details.chk summary{cursor:pointer}
details.chk div{margin-top:6px;color:var(--text);background:var(--surface-2);border-radius:6px;padding:6px 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.chips button{font-size:13px;padding:4px 10px}
.chips button .c{color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums;font-weight:400}
.hwc{display:grid;grid-template-columns:auto 1fr;gap:12px}
.hwc .pair{font-size:20px;white-space:nowrap}
.hwc .exs{margin-top:4px}
.hwc .exs div{margin:2px 0}
.kind{font-size:12px;padding:0 7px;border-radius:5px;background:var(--surface-2);color:var(--muted)}
.check{display:flex;gap:8px;align-items:flex-start;margin:6px 0;cursor:pointer}
.check input{margin-top:6px}
/* scenes */
.sbar{position:sticky;top:var(--hh,100px);z-index:10;background:var(--bg);padding:8px 0;border-bottom:1px solid var(--border)}
.sbar .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sbar input[type=search]{flex:1 1 220px;min-width:180px}
.sbar label.tg{display:inline-flex;align-items:center;gap:5px;font-size:14px;cursor:pointer;white-space:nowrap}
.slayout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
.side{position:sticky;top:calc(var(--hh,100px) + 10px);max-height:calc(100vh - var(--hh,100px) - 20px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--surface-2);border-radius:9px;padding:3px}
.seg button{border:none;background:transparent;padding:6px 4px;border-radius:7px;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.side-hint{font-size:12px;color:var(--muted);margin:8px 4px 4px;line-height:1.5}
.si{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:transparent;padding:5px 8px;border-radius:7px;font-size:14px;color:var(--text)}
.si:hover{background:var(--surface-2)}
.si.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.si .c{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;font-weight:400}
.si.zero{opacity:.4}
.sg{font-size:12px;font-weight:700;color:var(--gc);margin:10px 8px 2px}
.smain{min-width:0}
.fpills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13px}
.fpills .cnt{color:var(--muted);margin-right:2px}
.fp{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid transparent;font-size:13px}
.fp:hover{border-color:var(--accent)}
.fp .x{font-weight:700;padding:0 5px;font-size:14px;line-height:1}
@media (max-width:860px){
  .slayout{grid-template-columns:1fr;gap:8px}
  .side{position:static;max-height:none;padding:8px}
  .side-list{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .si{flex:none;width:auto;border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:13px}
  .si .c{margin-left:4px}
  .sg{flex:none;align-self:center;margin:0 2px 0 6px}
}
.slist{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.srow{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:none}
.srow.gap{border-top:3px solid var(--surface-2)}
.play{width:34px;height:34px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--accent);border-color:var(--border)}
.play.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
.play.err{color:#be3a30}
.srow .zh{font-size:15px}
.srow .en{font-size:16px;margin-top:2px}
.srow .ipa{font-size:14px;margin-top:2px}
.srow .meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.srow .meta a{color:var(--muted)}
.hide-ipa .ipa{display:none}
.hide-en .srow .en{filter:blur(6px);cursor:pointer;user-select:none}
.hide-en .srow .en.shown{filter:none}
.more{text-align:center;padding:16px;color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:13px;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:.95}
.theme-btn{border:none;background:transparent;color:var(--muted);font-size:14px;padding:2px 6px}
footer{color:var(--muted);font-size:12px;text-align:center;padding:24px 0 40px}
@media (max-width:640px){
  .top-row .sub{display:none}
  .srow{grid-template-columns:36px 1fr;padding:10px}
  h2{font-size:20px}
}

.fsel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:3px 0}
.fsel-g{width:84px;flex:none}
.fsel button{font-size:13px;padding:3px 9px}

/* ===== ④ IPA ===== */
/* 分布条的分类色：dataviz 参考色板前 5 色，按页面表面色（浅 #ffffff / 深 #1f2024）跑过校验；色块里的字白色，浅色模式的黄色块用深色字 */
:root{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s4-ink:#0b0b0b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s4-ink:#ffffff}}
:root[data-theme="dark"]{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s4-ink:#ffffff}
.ipa-sym,.ipa-w,.ipa-big,.unit .u{font-family:"Charis SIL","Doulos SIL","Gentium Plus","Lucida Grande","Arial Unicode MS",sans-serif}
.ipa-sym{font-size:20px;font-weight:600;color:var(--text);white-space:nowrap}
.ipa-big{font-size:20px;line-height:1.5;color:var(--text)}
.ipa-w.cur{font-weight:700;background:var(--warn-soft);border-radius:4px;padding:0 3px}
mark.hl{background:var(--warn-soft);color:inherit;border-radius:4px;padding:0 1px;box-shadow:0 0 0 1px var(--border)}
.exrow{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:start;padding:7px 0;border-top:1px dashed var(--border)}
.exrow:first-child{border-top:none}
.exrow .play{width:30px;height:30px;font-size:12px}
.exrow .en{font-size:15px}
.exrow .ipa{font-size:14.5px;color:var(--text)}
.wchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.wchip{display:inline-flex;gap:5px;align-items:baseline;padding:1px 9px;border-radius:999px;background:var(--surface-2);font-size:13px;white-space:nowrap;margin:2px 0}
.wchip .ipa{color:var(--text);font-size:14px}
.wchip .c{color:var(--muted);font-size:12px}
.quote{border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 10px 10px 0;padding:10px 14px;margin:10px 0}
.units{display:flex;flex-wrap:wrap;gap:5px}
.unit{display:inline-flex;flex-direction:column;align-items:center;border:1px solid var(--border);border-radius:8px;padding:3px 7px;background:var(--surface);min-width:40px}
.unit .u{font-size:19px;line-height:1.3}
.unit .l{font-size:11px;color:var(--muted);line-height:1.3;text-align:center;max-width:120px}
.unit.has-mod{border-color:var(--accent)}
.usep{align-self:center;color:var(--muted)}
.chart{margin:8px 0 4px}
.brow{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:center;margin:4px 0}
.brow .bl{font-size:13px;color:var(--muted)}
.sbarc{display:flex;gap:2px;height:22px;margin:6px 0}
.bseg{position:relative;flex-basis:0;min-width:3px;height:100%}
.sbarc .bseg:last-child{border-radius:0 4px 4px 0}
.bseg .sl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;line-height:1;white-space:nowrap;color:#fff;pointer-events:none}
.bseg.s4 .sl{color:var(--s4-ink)}
.s1{background:var(--s1)} .s2{background:var(--s2)} .s3{background:var(--s3)} .s4{background:var(--s4)} .s5{background:var(--s5)} .s0{background:var(--muted)}
.bseg:hover,.bseg:focus-visible{filter:brightness(1.12);outline:2px solid var(--text);outline-offset:1px;z-index:1}
.lgd{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;margin:4px 0}
.lgd .li{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;flex:none}
.vtip{position:fixed;z-index:60;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.14);border-radius:8px;padding:6px 10px;font-size:13px;pointer-events:none;max-width:260px}
.vtip b{font-size:14px;margin-right:6px}
.vrow{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;border-top:1px solid var(--border)}
details.fw summary .fwn{font-size:16px}
.hide-ipa .ipa-only{display:none}
.symt td:nth-child(2){width:42%}
.symt .ipa-sym{font-size:24px}
.srow .meta a.ipa-only{color:var(--accent)}
/* ===== 手机适配 ===== */
button, .si, .fp, a { -webkit-tap-highlight-color: transparent; }
@media (max-width:640px){
  body{font-size:15px;line-height:1.7}
  .wrap{padding:0 12px}
  .top-row{padding:8px 0 0;gap:8px}
  .top-row h1{font-size:16px}
  .tb-text{display:none}
  nav.tabs{padding:4px 0 6px;gap:4px}
  nav.tabs a{padding:6px 10px;font-size:14px}
  main{padding:14px 0 50px}
  h2{font-size:19px} h3{font-size:16px;margin:26px 0 8px}
  .lead{font-size:14px}
  .card{padding:12px 13px;border-radius:10px}
  .mcard .mm{font-size:17px}
  /* 输入框 16px：iPhone 上小于 16px 会在聚焦时自动放大页面 */
  input[type=search], input[type=text], select{font-size:16px}
  /* 判断树、公式：字小一点，仍可横向滑动 */
  .formula{font-size:12px;padding:10px 11px;line-height:1.6}
  /* 第三部分：筛选栏不吸顶，句子行加大触摸目标 */
  .sbar{position:static;padding:6px 0;border-bottom:none}
  .sbar .row{gap:8px}
  .sbar input[type=search]{flex:1 1 100%}
  .srow{grid-template-columns:44px 1fr;padding:12px 10px}
  .play{width:40px;height:40px;font-size:14px}
  .srow .en{font-size:16px}
  .si{padding:6px 12px}
  .fp{padding:4px 6px 4px 12px}
  /* 表格改成卡片：每行一张，单元格前面带上列名（.grid4 仪表盘表保留横向滑动） */
  .tbl{background:transparent;border:none;box-shadow:none;overflow:visible}
  .tbl table:not(.grid4){min-width:0}
  .tbl table:not(.grid4), .tbl table:not(.grid4) tbody, .tbl table:not(.grid4) tr, .tbl table:not(.grid4) td{display:block;width:100%}
  .tbl table:not(.grid4) tr:first-child:has(th){display:none}
  .tbl table:not(.grid4) tr{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:8px 0}
  .tbl table:not(.grid4) td{border:none;padding:3px 0}
  .tbl table:not(.grid4) td:first-child{font-weight:600;white-space:normal !important}
  .tbl table:not(.grid4) td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);font-weight:400}
  .tbl table:not(.grid4) td:first-child[data-label]::before{display:none}
  .tbl:has(.grid4){overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px}
  .grid4{min-width:560px}
  .subcard{padding:10px 11px}
  .chain .node{flex:1 1 120px;min-width:120px;padding:7px 9px}
  .rule .mine{grid-template-columns:1fr}
  .fsel{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:2px}
  .fsel::-webkit-scrollbar{display:none}
  .fsel-g{width:auto;position:sticky;left:0;z-index:1;background:var(--bg);padding-right:6px;box-shadow:6px 0 6px -4px var(--bg)}
  .fsel button{flex:none}
}

/* ④ IPA 的手机适配 */
@media (max-width:640px){
  .brow{grid-template-columns:1fr;gap:0}
  .vrow{grid-template-columns:1fr;gap:4px}
  .ipa-big{font-size:18px}
  .unit{min-width:34px;padding:2px 5px}
  .unit .u{font-size:17px}
  .unit .l{max-width:96px}
  .exrow{grid-template-columns:40px minmax(0,1fr)}
  .exrow .play{width:36px;height:36px}
}