/* 双语化学辞典 — lab-notebook reference page.
   Sticky search bar, element-tile headword, reading column left, structure bench right. */
:root{
  --paper:#EFEFF5; --sheet:#F9F9FC; --ink:#1C1B2A; --muted:#63617A; --rule:#DEDDE8;
  --accent:#5B4BD6; --accent-soft:#E7E5F8; --ok:#2F7A4F; --warn:#A6561A;
  --svg-filter:none; --mol-bg:#F9F9FC;
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --f-latin:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",Arial,system-ui,sans-serif;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121219; --sheet:#1A1A23; --ink:#EBEAF3; --muted:#A3A1B8; --rule:#2F2E3C;
  --accent:#A9A0F5; --accent-soft:#25223D; --ok:#7BC79A; --warn:#E4A36B;
  --svg-filter:invert(1) hue-rotate(180deg); --mol-bg:#1A1A23; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121219; --sheet:#1A1A23; --ink:#EBEAF3; --muted:#A3A1B8; --rule:#2F2E3C;
  --accent:#A9A0F5; --accent-soft:#25223D; --ok:#7BC79A; --warn:#E4A36B;
  --svg-filter:invert(1) hue-rotate(180deg); --mol-bg:#1A1A23; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
header.bar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-block:12px}
.brand{font-family:var(--f-display);font-weight:900;font-size:20px;letter-spacing:.02em;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand small{font-family:var(--f-latin);font-weight:400;font-size:13px;color:var(--muted);margin-left:6px;letter-spacing:0}
form.search{flex:1 1 360px;display:flex;gap:8px;min-width:0;position:relative}
.search input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--sheet);color:var(--ink)}
.search input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;list-style:none;margin:0;padding:4px 0;max-height:60vh;overflow-y:auto;box-shadow:0 8px 24px rgb(0 0 0 / .12);z-index:6}
.suggest a{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;color:var(--ink);text-decoration:none}
.suggest a:hover,.suggest a[aria-selected="true"]{background:var(--accent-soft)}
.suggest .en{color:var(--muted);font-family:var(--f-latin)}
button{font:inherit;cursor:pointer}
.btn{background:var(--accent);color:var(--sheet);border:0;border-radius:6px;padding:9px 16px;font-weight:600;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--sheet)}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px 11px;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.controls{display:flex;flex-wrap:wrap;gap:8px}
main.wrap{padding-block:12px 64px}
.crumbs{font-size:13px;color:var(--muted);padding-top:14px}
.crumbs a{color:var(--muted)}

.head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding-block:22px 18px;border-bottom:1px solid var(--rule)}
.tile{width:132px;height:148px;flex:none;border:2px solid var(--ink);background:var(--sheet);position:relative;padding:8px 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.tile .tl{position:absolute;top:6px;left:8px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.tile .tr{position:absolute;top:6px;right:8px;font-family:var(--f-mono);font-size:11px;color:var(--accent)}
.tile .sym{font-family:var(--f-display);font-weight:900;font-size:34px;line-height:1.1;word-break:break-all}
.tile .bl{position:absolute;bottom:6px;left:4px;right:4px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.headtxt{flex:1 1 320px;min-width:0}
.kind{display:inline-block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.kind a{color:inherit;text-decoration:none}
h1{margin:4px 0 0;font-family:var(--f-display);font-weight:900;font-size:clamp(28px,4.4vw,44px);line-height:1.15;text-wrap:balance}
h1 .h1en{display:block;font-family:var(--f-latin);font-weight:600;font-size:.62em;color:var(--muted);margin-top:4px}
.aka{margin-top:8px;font-size:13.5px;color:var(--muted)}
.aka b{color:var(--ink);font-weight:500}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:36px;padding-top:26px}
.grid.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.col{min-width:0;display:flex;flex-direction:column;gap:30px}
section h2{margin:0 0 10px;font-family:var(--f-display);font-weight:700;font-size:19px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-wrap:balance}
section h2 .en{font-family:var(--f-latin);font-weight:400;font-size:14px;color:var(--muted)}
.bi{display:grid;gap:6px}
.bi p{margin:0;max-width:68ch}
.bi p.en{font-family:var(--f-latin);font-size:15.5px;color:var(--muted)}
[data-lang="zh"] .en{display:none}
[data-lang="en"] .zh{display:none}
.def{font-size:17px}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.timeline li{position:relative;padding:0 0 14px 18px}
.timeline li::before{content:"";position:absolute;left:-6px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--sheet);border:2px solid var(--accent)}
.timeline .yr{font-family:var(--f-mono);font-weight:500;color:var(--accent);font-size:13px}
.eq{font-family:var(--f-mono);font-size:14.5px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;overflow-x:auto;white-space:pre}
.steps{margin:0;padding-left:22px;display:grid;gap:8px}
.examples{display:grid;gap:10px}
.related{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:999px;padding:3px 11px;font-size:13px;text-decoration:none}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
span.chip{color:var(--muted)}

aside.bench{min-width:0;display:flex;flex-direction:column;gap:22px}
aside.bench>*{flex-shrink:0}
@media (min-width:901px){aside.bench{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:4px}}
.panel{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.panel .ph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:13px;flex-wrap:wrap}
.panel .ph b{font-family:var(--f-display);font-size:14.5px}
.viewer{position:relative;width:100%;height:300px;background:var(--mol-bg)}
.viewer .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:20px}
.svg2d{display:flex;justify-content:center;padding:8px;min-height:60px}
.svg2d svg,.iso svg{filter:var(--svg-filter);max-width:100%;height:auto}
.smiles{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.pg{display:flex;gap:14px;align-items:center;padding:12px}
.pg .sch{font-family:var(--f-latin);font-style:italic;font-size:30px;color:var(--accent);min-width:64px;text-align:center}
.pg .sch sub{font-style:normal;font-size:.55em}
table.props{width:100%;border-collapse:collapse;font-size:13.5px}
table.props td,table.props th{padding:6px 12px;border-top:1px solid var(--rule);vertical-align:top;text-align:left;font-weight:400}
table.props tr:first-child td,table.props tr:first-child th{border-top:0}
table.props th{color:var(--muted);width:44%}
table.props td{font-variant-numeric:tabular-nums}
table.props .en{display:block;font-family:var(--f-latin);font-size:12px}
.src{font-size:11.5px;color:var(--muted);padding:6px 12px;border-top:1px solid var(--rule)}
.isos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:1px;background:var(--rule)}
.iso{background:var(--sheet);border:0;padding:8px 6px;text-align:center;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;line-height:1.35}
.iso:hover{background:var(--accent-soft)}
.iso[aria-current="true"]{outline:2px solid var(--accent);outline-offset:-2px}
.iso .rel{color:var(--muted);font-size:11px}
.iso .pgm{font-family:var(--f-latin);font-style:italic;color:var(--accent)}
.badge{font-size:10.5px;padding:0 6px;border-radius:3px;border:1px solid currentColor}
.badge.ok{color:var(--ok)} .badge.bad{color:var(--warn)}

/* home + category */
.hero{padding-block:36px 20px}
.hero h1{font-size:clamp(30px,5vw,52px)}
.hero p{max-width:60ch;color:var(--muted);margin:10px 0 0}
.stats{font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-top:14px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 36px;padding-top:20px}
.cat h2{margin:0 0 8px;font-family:var(--f-display);font-size:18px;border-bottom:2px solid var(--ink);padding-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cat h2 a{color:inherit;text-decoration:none}
.cat h2 small{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400}
.termlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.termlist a{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--rule)}
.termlist a:hover{color:var(--accent)}
.termlist .en{font-family:var(--f-latin);color:var(--muted);font-size:14px;text-align:right}
.cols{columns:3 240px;column-gap:36px}
.cols li{break-inside:avoid}
footer{font-size:12px;color:var(--muted);padding-block:20px;border-top:1px solid var(--rule)}
footer p{margin:4px 0;max-width:90ch}

/* ---------- section nav ---------- */
.refnav{flex-basis:100%;display:flex;gap:4px 16px;flex-wrap:wrap;font-size:13.5px;margin-top:-4px}
.refnav a{color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.refnav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.refhome{padding-top:8px}
.refcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.refcard{display:flex;flex-direction:column;gap:2px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:12px 14px;color:var(--ink);text-decoration:none}
.refcard:hover{border-color:var(--accent)}
.refcard b{font-family:var(--f-display);font-size:16px}
.refcard .en{font-family:var(--f-latin);color:var(--muted);font-size:13px}
.refcard small{color:var(--muted);font-size:12px}

/* ---------- formulas ---------- */
.lv{display:inline-block;font-size:11px;letter-spacing:.04em;padding:0 7px;border-radius:3px;border:1px solid currentColor;font-weight:600;text-transform:none;white-space:nowrap}
.lv .en{margin-left:4px;font-weight:400}
.lvJ{color:#2F7A4F} .lvS{color:#1F6FA8} .lvU{color:var(--accent)} .lvG{color:#A6561A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lvJ{color:#7BC79A}:root:not([data-theme="light"]) .lvS{color:#7DB8E8}:root:not([data-theme="light"]) .lvG{color:#E4A36B}}
:root[data-theme="dark"] .lvJ{color:#7BC79A} :root[data-theme="dark"] .lvS{color:#7DB8E8} :root[data-theme="dark"] .lvG{color:#E4A36B}
.tile .fx{font-family:var(--f-latin);font-style:italic;font-size:30px}
.texbox{background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:6px;padding:8px 16px;overflow-x:auto;font-size:1.15em}
.texalt{padding:2px 16px;overflow-x:auto;color:var(--ink)}
.texalt .cap{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.texalt .cap p{margin:0}
.texstep{overflow-x:auto;padding:0 4px}
.katex-display{margin:.6em 0}
table.symtab{width:100%;border-collapse:collapse;font-size:14px}
.symtab th,.symtab td{padding:7px 12px;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.symtab thead th{border-top:0;color:var(--muted);font-weight:500;font-size:12.5px}
.symtab td.s{width:80px;white-space:nowrap}
.symtab td.u{color:var(--muted);white-space:nowrap}
.symtab .en{display:block;font-family:var(--f-latin);color:var(--muted);font-size:13px}
.der li::marker{color:var(--accent);font-weight:700}
.lims{margin:0;padding-left:20px;display:grid;gap:8px}
.lims li::marker{color:var(--warn)}
.exbox{padding:12px 16px}
.pn{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:14px;font-size:14px}
.grid.wide{grid-template-columns:minmax(0,1fr) 470px}
@media (max-width:980px){.grid.wide{grid-template-columns:minmax(0,1fr)}}
.ftools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 14px}
.ftools input{font:inherit;padding:7px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--sheet);color:var(--ink);min-width:0;flex:1 1 200px;max-width:320px}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.toc a{border:1px solid var(--rule);background:var(--sheet);border-radius:999px;padding:3px 11px;font-size:13px;color:var(--ink);text-decoration:none}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
.toc small{color:var(--muted);margin-left:5px;font-family:var(--f-mono);font-size:11px}
.ftopic{margin-bottom:30px;scroll-margin-top:110px}
.ftopic>.bi{margin-bottom:10px}
.flist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px}
.flist a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:8px 12px;color:var(--ink);text-decoration:none;height:100%}
.flist a:hover{border-color:var(--accent)}
.flist .nm{display:flex;flex-direction:column}
.flist .nm .en{font-family:var(--f-latin);color:var(--muted);font-size:13px}
.flist .tq{grid-column:1/-1;overflow-x:auto;overflow-y:hidden;font-size:14px;color:var(--ink);padding-top:2px}
.flist li[hidden]{display:none}
.fchip{border-style:dashed}

/* ---------- plots ---------- */
.plot{margin:0;padding:8px 10px;color:var(--ink)}
.plot svg{width:100%;height:auto;display:block;font-family:var(--f-body);font-size:11px;fill:currentColor}
.plot.polar svg{max-width:380px;margin:0 auto}
.plot .grid line,.plot .grid circle{stroke:var(--rule);stroke-width:1}
.plot .axis rect{stroke:var(--muted);stroke-width:1}
.plot .axis text{fill:var(--muted)}
.plot .zero{stroke:var(--muted);stroke-width:1}
.plot .lab{font-size:12.5px;fill:var(--ink)}
.plot .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.plot .ln.dash{stroke-dasharray:6 4}
.plot .fill{stroke:none;opacity:.16}
.plot .ref{stroke:var(--muted);stroke-dasharray:3 3}
.plot .note{fill:var(--muted);font-size:11px}
.plot .legend text{fill:var(--ink)}
.plot .pt{stroke:var(--sheet);stroke-width:1.5}
.plot .rl{font-size:10.5px;fill:var(--ink)}
.plot .bar{opacity:.85}
:root{--p0:#5B4BD6;--p1:#1F6FA8;--p2:#C0392B;--p3:#2F7A4F;--p4:#A6561A;--p5:#7A7F85;--pos:#1F6FA8;--neg:#C0392B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--p0:#A9A0F5;--p1:#7DB8E8;--p2:#F08A7E;--p3:#7BC79A;--p4:#E4A36B;--p5:#A9AEB4;--pos:#7DB8E8;--neg:#F08A7E}}
:root[data-theme="dark"]{--p0:#A9A0F5;--p1:#7DB8E8;--p2:#F08A7E;--p3:#7BC79A;--p4:#E4A36B;--p5:#A9AEB4;--pos:#7DB8E8;--neg:#F08A7E}
.k0{stroke:var(--p0);fill:var(--p0)} .k1{stroke:var(--p1);fill:var(--p1)} .k2{stroke:var(--p2);fill:var(--p2)}
.k3{stroke:var(--p3);fill:var(--p3)} .k4{stroke:var(--p4);fill:var(--p4)} .k5{stroke:var(--p5);fill:var(--p5)}
.kpos{stroke:var(--pos);fill:var(--pos)} .kneg{stroke:var(--neg);fill:var(--neg)}
.plot .ln.k0,.plot .ln.k1,.plot .ln.k2,.plot .ln.k3,.plot .ln.k4,.plot .ln.k5,.plot .ln.kpos,.plot .ln.kneg{fill:none}
.plot figcaption{font-size:12.5px;color:var(--muted);padding:4px 2px 0}
.plot figcaption p{margin:0}
.rchart svg{min-width:640px}

/* ---------- data tables ---------- */
.scrollx{overflow-x:auto}
table.dtab{width:100%;border-collapse:collapse;font-size:13.5px}
.dtab th,.dtab td{padding:6px 10px;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.dtab thead th{border-top:0;color:var(--muted);font-weight:500;font-size:12.5px;white-space:nowrap;position:sticky;top:0;background:var(--sheet)}
.dtab .en{display:block;font-family:var(--f-latin);color:var(--muted);font-size:12.5px}
.dtab thead .en{display:inline}
.dtab td.num{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.dtab tr.hit td{background:var(--accent-soft)}
.dtab tr[hidden]{display:none}
.src2{font-size:12px;color:var(--muted)}
section{scroll-margin-top:110px}

/* ---------- character tables ---------- */
.ctwrap{display:grid;gap:8px}
.merge{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px;cursor:pointer}
.merge .en{font-family:var(--f-latin);color:var(--muted);font-size:13px}
table.chartab{border-collapse:collapse;font-size:14.5px;min-width:100%;font-variant-numeric:tabular-nums}
.chartab th,.chartab td{padding:6px 12px;border-top:1px solid var(--rule);text-align:center;white-space:nowrap}
.chartab thead th{border-top:0;border-bottom:2px solid var(--ink);font-weight:500;font-family:var(--f-latin)}
.chartab thead th.pgn{font-size:17px;text-align:left}
.chartab th.ir{text-align:left;font-family:var(--f-latin);font-weight:600}
.chartab td.fn{text-align:left;color:var(--muted);font-family:var(--f-latin);font-size:13.5px;white-space:normal;min-width:110px}
.chartab thead th.fn{font-family:var(--f-body);font-size:12.5px;text-align:left;white-space:normal}
.chartab thead th.fn .en{display:block;font-family:var(--f-latin);font-size:11.5px;color:var(--muted)}
.chartab tr.conj td,.chartab tr.conj th{border-top:1px dashed var(--rule);color:var(--muted)}
.chartab tr.pair td,.chartab tr.pair th{border-top:1px solid var(--rule)}
.chartab .cj{font-family:var(--f-body);font-weight:400;font-size:12.5px}
.chartab .re{display:none}
.chartab.merged .cx{display:none} .chartab.merged .re{display:inline}
.chartab.merged tr.conj{display:none}
.chartab tbody tr:hover td,.chartab tbody tr:hover th{background:var(--accent-soft)}
.epsnote{font-size:13px;color:var(--muted);margin:0}
.tile .pgsym,.pgsym{font-family:var(--f-latin)}
.pgsym i{font-style:italic}
.reducer{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:12px}
.reducer label{display:flex;flex-direction:column;font-size:12.5px;font-family:var(--f-latin);gap:2px}
.reducer input{width:64px;font:inherit;padding:5px 6px;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink)}
.reducer output{flex-basis:100%;font-family:var(--f-latin);font-size:16px;min-height:1.4em}
.pglist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pglist a{display:flex;gap:12px;align-items:baseline;padding:4px 0;border-bottom:1px dotted var(--rule);color:var(--ink);text-decoration:none}
.pglist a:hover{color:var(--accent)}
.pglist .pgsym{font-size:18px;min-width:52px}
.pglist .ex{color:var(--muted);font-size:13px}

/* ---------- periodic table ---------- */
.ptwrap{overflow-x:auto;padding-bottom:6px}
.ptable{display:grid;grid-template-columns:repeat(18,minmax(46px,1fr));grid-template-rows:repeat(7,auto) 12px repeat(2,auto);gap:3px;min-width:880px}
.el{border:1px solid var(--rule);border-radius:4px;padding:3px 4px 4px;background:var(--sheet);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;align-items:center;font:inherit;line-height:1.15;min-height:62px;position:relative;cursor:pointer}
.el:hover,.el[aria-current="true"]{outline:2px solid var(--accent);outline-offset:-1px;z-index:1}
.el .z{align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;color:var(--muted)}
.el .s{font-family:var(--f-latin);font-weight:700;font-size:18px}
.el .n{font-size:11px}
.el .m{font-family:var(--f-mono);font-size:8.5px;color:var(--muted)}
.ph-lan{justify-content:center;font-family:var(--f-mono);font-size:10px;color:var(--muted);cursor:default;border-style:dashed}
.ptinfo{display:flex;align-items:center;gap:16px;padding:4px 10px;font-size:13px;min-height:0}
.ptinfo .hint{color:var(--muted);margin:0}
.ptinfo .big{font-family:var(--f-latin);font-weight:700;font-size:40px;line-height:1;min-width:64px;text-align:center}
.ptinfo dl{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:2px 10px;margin:0}
.ptinfo dt{color:var(--muted)} .ptinfo dd{margin:0;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;margin:10px 0}
.lg{display:inline-flex;gap:5px;align-items:center}
.lg i{width:14px;height:14px;border-radius:3px;border:1px solid var(--rule);display:inline-block}
.lg .en{font-family:var(--f-latin);color:var(--muted);margin-left:2px}
.ellist{margin-top:16px;font-size:13px}
.ellist ol{columns:4 200px;padding-left:0;list-style:none}
:root{--c-alkali:#F6D5D0;--c-alkaline:#F8E3C4;--c-transition:#E8DDF1;--c-post:#D9E5EF;--c-metalloid:#DCEBD7;--c-nonmetal:#F1EDC6;--c-halogen:#CFEAE7;--c-noble:#E1DBF6;--c-lanthanide:#F3D8E7;--c-actinide:#EAD3D9;
  --b-s:#F6D5D0;--b-p:#D9E5EF;--b-d:#E8DDF1;--b-f:#DCEBD7;--ph-s:var(--sheet);--ph-l:#CFE3F5;--ph-g:#F6D9D0;--ph-u:#E6E3E8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-alkali:#4A2A27;--c-alkaline:#4A3A22;--c-transition:#3A2E47;--c-post:#283847;--c-metalloid:#2B3F2A;--c-nonmetal:#45421F;--c-halogen:#1F403D;--c-noble:#332C52;--c-lanthanide:#4A2840;--c-actinide:#45282F;
  --b-s:#4A2A27;--b-p:#283847;--b-d:#3A2E47;--b-f:#2B3F2A;--ph-l:#22384C;--ph-g:#4A2E27;--ph-u:#2B2830}}
:root[data-theme="dark"]{--c-alkali:#4A2A27;--c-alkaline:#4A3A22;--c-transition:#3A2E47;--c-post:#283847;--c-metalloid:#2B3F2A;--c-nonmetal:#45421F;--c-halogen:#1F403D;--c-noble:#332C52;--c-lanthanide:#4A2840;--c-actinide:#45282F;
  --b-s:#4A2A27;--b-p:#283847;--b-d:#3A2E47;--b-f:#2B3F2A;--ph-l:#22384C;--ph-g:#4A2E27;--ph-u:#2B2830}
.c-alkali{--cat:var(--c-alkali)} .c-alkaline{--cat:var(--c-alkaline)} .c-transition{--cat:var(--c-transition)} .c-post{--cat:var(--c-post)} .c-metalloid{--cat:var(--c-metalloid)}
.c-nonmetal{--cat:var(--c-nonmetal)} .c-halogen{--cat:var(--c-halogen)} .c-noble{--cat:var(--c-noble)} .c-lanthanide{--cat:var(--c-lanthanide)} .c-actinide{--cat:var(--c-actinide)}
.lg i{background:var(--cat)}
.ptable[data-mode="cat"] .el{background:var(--cat,var(--sheet))}
.ptable[data-mode="block"] .el[data-block="s"]{background:var(--b-s)} .ptable[data-mode="block"] .el[data-block="p"]{background:var(--b-p)}
.ptable[data-mode="block"] .el[data-block="d"]{background:var(--b-d)} .ptable[data-mode="block"] .el[data-block="f"]{background:var(--b-f)}
.ptable[data-mode="phase"] .el[data-phase="l"]{background:var(--ph-l)} .ptable[data-mode="phase"] .el[data-phase="g"]{background:var(--ph-g)} .ptable[data-mode="phase"] .el[data-phase="?"]{background:var(--ph-u)}
.ptable[data-mode="en"] .el{background:var(--enbg,var(--sheet))}
.ptable .ptinfo{background:none}

.fdisc{margin-bottom:34px}
.fdisc[hidden]{display:none}
.fdisc>h2{border-bottom:2px solid var(--ink);padding-bottom:6px;font-size:22px}
.ftopic h3{font-family:var(--f-display);font-size:16.5px;margin:0 0 6px}
.ftopic h3 .en{font-family:var(--f-latin);font-weight:400;color:var(--muted);font-size:13.5px}
.dfilter{flex-wrap:wrap}

.ten{display:none}
[data-lang="en"] .ten{display:inline}
[data-lang="en"] .tzh{display:none}
.texbox .tzh,.texbox .ten,.texalt .tzh,.texalt .ten,.texstep .tzh,.texstep .ten{display:block}
[data-lang="en"] .texbox .tzh,[data-lang="en"] .texalt .tzh,[data-lang="en"] .texstep .tzh{display:none}
.texbox .ten,.texalt .ten,.texstep .ten{display:none}
[data-lang="en"] .texbox .ten,[data-lang="en"] .texalt .ten,[data-lang="en"] .texstep .ten{display:block}
.eqen{display:none}
[data-lang="en"] .eqen{display:inline}
[data-lang="en"] .eqzh{display:none}
[data-lang="en"] h1 .h1en{font-size:1em;color:var(--ink);margin-top:0}
.rchart svg{min-width:760px;font-size:12px}
.rchart .band.b0{fill:var(--accent-soft);opacity:.55}
.rchart .band.b1{fill:var(--paper);opacity:.0}
.rchart .bandl{font-size:11.5px;fill:var(--muted);font-weight:600}
.rchart .ghead{fill:var(--paper)}
.rchart .gl{font-size:13px;font-weight:700}
.rchart .k0t{fill:var(--p0)} .rchart .k1t{fill:var(--p1)} .rchart .k2t{fill:var(--p2)} .rchart .k3t{fill:var(--p3)} .rchart .k4t{fill:var(--p4)}
.rchart .zebra{fill:var(--paper);opacity:.6}
.rchart .rl{font-size:12.5px;fill:var(--ink)}
.rchart .rle{fill:var(--muted);font-family:var(--f-mono);font-size:11px}
.rchart .rv{font-size:11px;fill:var(--muted);font-family:var(--f-mono)}
.rchart a:hover .rl,.rchart a:hover .rv{fill:var(--accent)}
.rchart .bar{opacity:.9}
.rchart a:hover .bar{opacity:1;stroke:var(--ink);stroke-width:1}
.dtab tr:target td{background:var(--accent-soft);transition:background .3s}

/* ===== polish (v2) ===== */
body{background:var(--paper)}
header.bar{background:color-mix(in srgb,var(--sheet) 88%,transparent);box-shadow:0 1px 0 var(--rule),0 6px 20px rgb(0 0 0 / .04);border-bottom:0}
.search input{border-radius:10px;padding:10px 14px;box-shadow:inset 0 1px 2px rgb(0 0 0 / .04)}
.btn{border-radius:10px}
.seg{border-radius:10px}
.refnav{gap:2px 4px;margin-top:-2px}
.refnav a{padding:5px 12px;border-radius:999px;border:0;font-weight:500}
.refnav a:hover{background:var(--accent-soft);color:var(--accent)}
.refnav a[aria-current="page"]{background:var(--accent);color:var(--sheet)}
section h2{padding-left:10px;border-left:3px solid var(--accent);line-height:1.3}
.panel{border-radius:12px;box-shadow:0 1px 2px rgb(0 0 0 / .04),0 6px 18px rgb(0 0 0 / .04)}
.panel .ph{background:color-mix(in srgb,var(--accent-soft) 45%,var(--sheet))}
/* tile */
.tile{border-radius:10px;overflow:hidden;box-shadow:0 2px 0 var(--ink);padding:22px 8px}
.tile .sym{line-height:1.12;text-wrap:balance;overflow-wrap:anywhere}
.tile .sym[data-n="1"]{font-size:58px}
.tile .sym[data-n="2"]{font-size:46px}
.tile .sym[data-n="3"]{font-size:36px}
.tile .sym[data-n="4"]{font-size:29px}
.tile .sym[data-n="5"]{font-size:25px}
.tile .sym[data-n="6"],.tile .sym[data-n="7"],.tile .sym[data-n="8"],.tile .sym[data-n="9"]{font-size:20px}
.tile .fx{font-size:30px}
/* chemical equations */
.eq{font-family:"STIX Two Text","Cambria","Times New Roman",var(--f-latin);font-size:17.5px;white-space:normal;line-height:2.3;padding:8px 16px;border-radius:10px;letter-spacing:.01em;overflow-x:auto}
.eq sub{font-size:.7em;vertical-align:-.28em;line-height:0}
.eq sup{font-size:.7em;vertical-align:.55em;line-height:0}
.rx{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:-.15em;margin:0 .35em;min-width:2.4em;line-height:1.1}
.rxc{font-size:.66em;color:var(--muted);white-space:nowrap;padding:0 .35em;text-align:center;font-family:var(--f-body)}
.rx .rxa{display:block;height:0;font-size:0;border-top:1.6px solid currentColor;position:relative;margin-top:.2em}
.rx .rxa::after{content:"";position:absolute;right:-2px;top:-5.3px;border-style:solid;border-width:4.5px 0 4.5px 8px;border-color:transparent transparent transparent currentColor}
.rx .rxe{height:auto;font-size:1.1em;border:0;text-align:center;margin-top:0}
.rx .rxe::after{display:none}
.rxa0{margin:0 .3em}
/* placeholders & home */
.notice{margin-top:24px;background:var(--sheet);border:1px dashed var(--rule);border-radius:12px;padding:20px 22px;max-width:640px}
.notice p{margin:0 0 8px}
.notice .en{color:var(--muted)}
.notice .btn{display:inline-block;text-decoration:none;margin-top:6px}
.hero h1{letter-spacing:.01em}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.qlab{font-size:12.5px;color:var(--muted);margin-right:4px}
.qchip{background:var(--sheet);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgb(0 0 0 / .04)}
.qchip .en{color:var(--muted);font-family:var(--f-latin);font-size:12.5px;margin-left:2px}
.qchip:hover{border-color:var(--accent);color:var(--accent)}
.cats{gap:18px}
.cat{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:16px 18px 12px;box-shadow:0 1px 2px rgb(0 0 0 / .03)}
.cat h2{border-bottom:1px solid var(--rule);border-left:0;padding-left:0;font-size:17px}
.cat h2 small{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 9px}
.cat > p a{font-size:13.5px;text-decoration:none}
.termlist a{border-bottom-color:transparent;padding:4px 6px;border-radius:6px}
.termlist a:hover{background:var(--accent-soft)}
.flist a,.refcard{border-radius:12px}
.flist a{box-shadow:0 1px 2px rgb(0 0 0 / .03)}
.chartab{font-size:15px}
footer{margin-top:20px}
.rchart .gt{font-size:10.5px;fill:var(--muted);font-family:var(--f-mono)}
.panel .ph b .en{margin-left:8px;font-weight:400;font-family:var(--f-latin);font-size:13px;color:var(--muted)}
.cats{align-items:stretch}

/* ---- home category cards: equal height, one line per term ---- */
.cats{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cat{display:flex;flex-direction:column;padding:16px 16px 12px}
.cat h2{align-items:center}
.cat h2 a{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cat h2 a .en{font-family:var(--f-latin);font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .termlist{min-height:calc(6 * 31px);align-content:start}
.cat .termlist a{align-items:baseline;min-width:0}
.cat .termlist a > span:first-child{white-space:nowrap;flex:none}
.cat .termlist .en{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:13.5px}
.cat .more{margin-top:auto;padding-top:8px;font-size:13px;text-decoration:none;color:var(--accent);align-self:flex-start}
.cat .more:hover{text-decoration:underline}

/* ---- IR infographic ---- */
.irpanel{padding:10px 8px}
.irsvg{min-width:980px;width:100%;height:auto;display:block;font-family:var(--f-sans, system-ui, sans-serif)}
.irsvg .fp{fill:#8fbf3a;opacity:.13}
.irsvg .rgn{font-size:13px;font-weight:700;fill:var(--ink)}
.irsvg .rgne{font-size:10.5px;fill:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.irsvg .grid line{stroke:var(--rule);stroke-dasharray:2 4}
.irsvg .axl{stroke:var(--ink);stroke-width:2.5}
.irsvg .axt{font-size:12px;fill:var(--ink);font-variant-numeric:tabular-nums}
.irsvg .brk{font-size:10px;fill:var(--muted)}
.irsvg .lab{font-size:13px;font-weight:700;fill:var(--ink)}
.irsvg .bond{stroke:#777;stroke-width:2.2}
.irsvg .atom{stroke:#fff;stroke-width:1.5}
.irsvg .atl{font-size:11px;font-weight:700;fill:#fff}
.irsvg .atl.dk{fill:#555}
.irsvg .mode{font-size:10.5px;font-style:italic;fill:var(--muted)}
.irsvg .irbar{opacity:.9}
.irsvg .irbar.k0{fill:#e07a5f}.irsvg .irbar.k1{fill:#9b7fd1}.irsvg .irbar.k2{fill:#3d8fd1}.irsvg .irbar.k3{fill:#2bb3a3}.irsvg .irbar.k4{fill:#8fb23a}
.irsvg .badge{fill:var(--sheet);stroke-width:2}
.irsvg .badge.k0{stroke:#e07a5f}.irsvg .badge.k1{stroke:#9b7fd1}.irsvg .badge.k2{stroke:#3d8fd1}.irsvg .badge.k3{stroke:#2bb3a3}.irsvg .badge.k4{stroke:#8fb23a}
.irsvg .bdl{font-size:10.5px;font-weight:700;fill:var(--ink)}
.irsvg .irz{font-size:12.5px;font-weight:600;fill:var(--ink)}
.irsvg .ire{font-size:9.5px;fill:var(--muted);letter-spacing:.03em}
.irsvg .iri{cursor:pointer}
.irsvg .iri:hover .irz{fill:var(--accent)}
.irsvg .iri:hover .irbar{opacity:1;filter:brightness(1.08)}
.irkey{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13.5px;margin:10px 4px 0}
.irkey .kl{font-weight:700}
.irkey b{display:inline-grid;place-items:center;width:20px;height:20px;border:2px solid #8fb23a;border-radius:50%;font-size:11px;margin-right:4px}
.irkey span[lang]{color:var(--muted)}
.hint{color:var(--muted);font-size:14px;margin:-4px 0 10px}
.hint .en{display:block}

/* ---- NMR structure overview & cards ---- */
.ovwrap{padding:14px 10px 6px}
.ov{position:relative;margin:0 auto}
.ovg{position:absolute;top:0;width:0;border-left:1px dashed var(--rule)}
.ovax{position:absolute;height:0;border-top:2px solid var(--ink)}
.ovt{position:absolute;transform:translateX(-50%);font-size:12.5px;font-variant-numeric:tabular-nums;padding-top:6px}
.ovlab{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600}
.ovi{position:absolute;height:128px;display:flex;flex-direction:column;align-items:center}
.ovi .smol{height:70px;width:130px;color:var(--ink)}
.ovb{position:absolute;top:76px;height:16px;border-radius:4px}
.ovn{position:absolute;top:96px;left:0;right:0;text-align:center;font-size:13px;font-weight:600;line-height:1.2}
.ovn i{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--muted)}
.ovb.c0{background:#e5484d}.ovb.c1{background:#d63cbf}.ovb.c2{background:#30a46c}.ovb.c3{background:#12a9c9}.ovb.c4{background:#7c4ddb}
.ovb.c5{background:repeating-linear-gradient(45deg,#8b8d98 0 6px,#a8aab4 6px 12px)}.ovb.c6{background:#e9b10e}.ovb.c7{background:#f08c3a}.ovb.c8{background:#2b6be0}
.smol svg{width:100%;height:100%;display:block}
.smol .halo{fill:#7fdc6c;opacity:.85}
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin:16px 0}
.scol{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.scol h3{margin:0 0 6px;font-size:15px}
.scol h3 > .en{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.srow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:8px;border-top:1px dotted var(--rule);padding:2px 0}
.srow .smol{height:64px;color:var(--ink)}
.srow b{font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
h3.sub{font-size:15px;margin:18px 0 8px}
h3.sub span{color:var(--muted);font-weight:400;font-size:13px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .smol .halo{fill:#2f7d38;opacity:.8}}
:root[data-theme="dark"] .smol .halo{fill:#2f7d38;opacity:.8}
.irsvg .gbox{fill:var(--sheet);stroke:var(--rule);opacity:.92}
.irsvg .irz .ire{font-weight:400}
.smol{display:flex;align-items:center;justify-content:center}
.smol svg{width:auto;height:auto;max-width:100%;max-height:100%}
.cat{min-width:0;overflow:hidden}
.cat .termlist{grid-template-columns:minmax(0,1fr)}
.cat .termlist li{min-width:0}
.cat h2 small{flex:none}
.cat h2 a{overflow:hidden}
.cat h2 a > :first-child, .cat h2 a{white-space:nowrap;text-overflow:ellipsis}

/* ---- equations v3: sans formula font, arrow on the math axis, notes muted, "；" = new line ---- */
.eq{font-family:"Helvetica Neue","Arial","PingFang SC","Hiragino Sans GB",sans-serif;font-size:17px;line-height:2.5;letter-spacing:0}
.eq sub{font-size:.68em;vertical-align:-.3em}
.eq sup{font-size:.68em;vertical-align:.6em}
.rx{display:inline-block;position:relative;vertical-align:.5em;margin:0 .35em;min-width:2.6em;text-align:center;line-height:1}
.rxc{display:block;font-size:.62em;padding:0 .5em .3em;white-space:nowrap;color:var(--muted);font-family:inherit}
.rx .rxa{position:absolute;left:0;right:3px;bottom:-.1em;height:0;font-size:0;border-top:1.5px solid currentColor;margin:0}
.rx .rxa::after{right:-3px;top:-5.2px}
.rx .rxe{border:0;font-size:1.15em;height:auto;bottom:-.9em;right:0}
.rxa0{display:inline-block;margin:0 .3em;font-size:1.05em}
.eqn{font-size:.78em;color:var(--muted);margin-left:.45em}
.eqn::before{content:"（"}.eqn::after{content:"）"}
.eqen .eqn::before{content:"("}.eqen .eqn::after{content:")"}
.eqbr{display:block;height:0}
.irsvg .irbar{stroke:none}
.irsvg .gcol{fill:#3d8fd1;opacity:.08}
.irsvg .gsep{stroke:var(--rule);stroke-dasharray:2 3}
.irsvg .grv{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.irsvg .gbox{display:none}

/* ---- mechanisms ---- */
.mech{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;padding:14px 12px}
.mst{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}
.mmol{color:var(--ink);min-height:60px;display:flex;align-items:center;justify-content:center;max-width:100%}
.mmol svg{max-width:100%;height:auto}
.mst figcaption{max-width:250px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.45}
.mst figcaption p{margin:0}
.marr{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--muted);padding:0 4px;min-width:44px}
.marr i{font-style:normal;font-size:26px;line-height:1;color:var(--ink)}
.curly{fill:none;stroke:#d6336c;stroke-width:1.5}
.curlyh{fill:#d6336c}
.mst figcaption, .mst figcaption *{font-size:12.5px;line-height:1.45;font-family:inherit;color:var(--muted)}
.mst figcaption .zh{color:var(--ink)}

/* ---- point-group index ---- */
.steps.flow{margin:0;padding-left:1.4em;display:grid;gap:10px}
.steps.flow li::marker{color:var(--accent);font-weight:700}
.pgcats{padding-top:4px}
.pgcats .cat h2{font-size:16px}
.pglist a{border-bottom-color:transparent;padding:5px 6px;border-radius:6px}
.pglist a:hover{background:var(--accent-soft)}

/* ---- mechanisms v2: arrows level with the structures ---- */
.mech{align-items:flex-start;justify-content:center;gap:18px 0;padding:18px 14px 14px}
.mst{flex:0 1 auto;min-width:150px}
.mbox{position:relative;height:170px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.mmol{height:170px;min-height:0}
.mmol svg{max-height:170px;width:auto;height:auto}
.mno{position:absolute;top:0;left:2px;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;display:grid;place-items:center}
.mst figcaption{max-width:230px;margin:6px auto 0;padding-top:6px;border-top:1px dashed var(--rule)}
.marr{height:170px;min-width:74px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:0 6px}
.mlab{min-height:16px;text-align:center;font-size:12px;color:var(--muted);line-height:1.25;margin-bottom:4px}
.mlab span{display:block}
.mline{display:block;height:0;border-top:2px solid var(--ink);position:relative;margin:0 4px 20px}
.mline::after{content:"";position:absolute;right:-3px;top:-6px;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent var(--ink)}
.curly{stroke-width:1.7}
@media (max-width:640px){.marr{height:auto;min-width:100%;padding:4px 0}.marr .mline{transform:rotate(90deg);width:40px;margin:14px auto}.mbox,.mmol{height:auto;min-height:120px}}
.mseg{display:flex;align-items:flex-start}
.mech .mseg:first-child .mst{margin-left:0}
.pgcats{margin-top:4px}
section + section{margin-top:28px}
@media (max-width:640px){.mseg{flex-direction:column;align-items:center;width:100%}}
.mbox,.mmol,.marr{height:200px}
.mmol svg{max-height:200px}
.cats > section + section{margin-top:0}
.panel > .steps.flow{padding:14px 18px 14px 40px}
/* chrome labels: one language at a time */
.le{display:none}
[data-lang="en"] .le{display:inline}
[data-lang="en"] .lz{display:none}
/* one language at a time must win over any later display rule */
[data-lang="zh"] .en,[data-lang="zh"] .h1en,[data-lang="zh"] .ten,[data-lang="zh"] .eqen{display:none!important}
[data-lang="en"] .zh,[data-lang="en"] .tzh,[data-lang="en"] .eqzh{display:none!important}

/* ---- point-group flowchart ---- */
.fcwrap{padding:16px 12px}
.fc{display:block;width:100%;max-width:880px;height:auto;margin:0 auto;font-family:var(--f-sans, system-ui, sans-serif)}
.fc-zh,.fc-en{display:none}
[data-lang="zh"] .fc-both,[data-lang="en"] .fc-both{display:none}
[data-lang="zh"] .fc-zh,[data-lang="en"] .fc-en{display:block}
.fc .fcbox{fill:var(--sheet);stroke:var(--ink);stroke-width:2}
.fc .fcz{font-size:17px;font-weight:600;fill:var(--ink)}
.fc .fce{font-size:13.5px;fill:var(--muted)}
.fc .fcl{fill:none;stroke:var(--muted);stroke-width:2}
.fc .fcah{fill:var(--muted)}
.fc .fclab{font-size:12.5px;font-weight:600;fill:var(--muted)}
.fc .fcr{font-family:"STIX Two Text","Times New Roman",serif;font-style:italic;font-weight:700;font-size:27px;fill:var(--ink)}
.fc a:hover .fcr{fill:var(--accent)}
.fc .fcend{fill:var(--accent-soft)}
.pgcats .cat:target{outline:2px solid var(--accent);outline-offset:2px}
/* anything explicitly marked as one language follows the toggle */
[data-lang="zh"] main [lang="en"]:not(.le),[data-lang="zh"] main [lang="en"]{display:none!important}
[data-lang="en"] main [lang="zh-CN"]{display:none!important}
[data-lang="zh"] main .le{display:none!important}
/* EN mode: the English text takes the Chinese text's place and styling */
[data-lang="en"] .cat h2 a .en{font-family:var(--f-display);font-size:inherit;font-weight:700;color:var(--ink)}
[data-lang="en"] .termlist .en{text-align:left;color:var(--ink);font-family:inherit;font-size:inherit}
[data-lang="en"] .qchip .en{color:inherit;font-family:inherit}
[data-lang="en"] .ph b .en{font-size:inherit;color:inherit}
[data-lang="en"] .termlist a{justify-content:flex-start}
.tile .sym .le{line-height:1.05;display:none;text-align:center;word-break:break-word;hyphens:auto}
[data-lang="en"] .tile .sym .le{display:block}
.irsvg .ire{text-transform:uppercase}
[data-lang="en"] .irsvg .ire{text-transform:none;font-size:12.5px;font-weight:600;fill:var(--ink);letter-spacing:0}
[data-lang="en"] .irsvg .irz .ire{font-weight:600}
[data-lang="en"] .irsvg .rgne{font-size:13px;font-weight:700;fill:var(--ink);text-transform:none}
/* ---- logo ---- */
.brand{display:inline-flex;align-items:center;gap:8px}
.brand .logo{width:30px;height:30px;border-radius:7px;flex:none}
.homehero{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:start}
.homehero > *{grid-column:2}
.homehero .herologo{grid-column:1;grid-row:1 / span 2;width:96px;height:96px;border-radius:22px;box-shadow:0 6px 18px rgb(75 29 107 / .25);margin-top:6px}
@media (max-width:640px){.homehero{grid-template-columns:1fr}.homehero > *,.homehero .herologo{grid-column:1}.homehero .herologo{grid-row:auto;width:64px;height:64px;border-radius:15px}}

/* ---- flat design language: no drop shadows or gradients, hairline borders carry the structure ---- */
header.bar{box-shadow:none !important;border-bottom:1px solid var(--rule)}
.panel,.cat,.scol,.ovwrap,.qchip,.refcard,.chip,.notice,.mech,.fcwrap,.eq,.tile,.irpanel{box-shadow:none !important}
.homehero .herologo{box-shadow:none;border-radius:20px}
.btn{box-shadow:none !important}
.cat:hover,.panel:hover{box-shadow:none !important}
.search input,.flist a{box-shadow:none !important}
.tile{box-shadow:none !important;border-width:2px}

/* ---- Apple-style continuous-curvature (squircle) corners where the browser supports them; plain rounded corners elsewhere ---- */
.brand .logo,.homehero .herologo{border-radius:0}
@supports (corner-shape: squircle){
  .panel,.cat,.scol,.qchip,.chip,.btn,.seg,.search input,.tile,.notice,.eq,.refcard,.flist a,.refnav a,.mno,.ovb,.ghead{corner-shape:squircle}
  .panel,.cat,.scol,.notice,.eq{border-radius:22px}
  .btn,.search input,.seg{border-radius:16px}
  .tile{border-radius:20px}
}


/* ---- chemistry watermark: full strength at the top of the page, then only in the side margins, never under the reading column ---- */
body{position:relative;isolation:isolate;background-image:none}
body::before,body::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;background:var(--wm,url("bg-pattern.svg?v=202610192322")) var(--wmx,0) var(--wmy,0)/640px 640px repeat}
body::before{top:0;height:720px;
  /* only to the right of the text column, fading downwards: no pattern ever sits under words */
  -webkit-mask-image:linear-gradient(#000 35%,transparent),linear-gradient(to right,transparent max(860px,calc(50% + 260px)),#000 max(1000px,calc(50% + 420px)));-webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 35%,transparent),linear-gradient(to right,transparent max(860px,calc(50% + 260px)),#000 max(1000px,calc(50% + 420px)));mask-composite:intersect}
@media (max-width:900px){body::before{display:none}}
body::after{top:0;bottom:0;--gut:max(0px,calc(50% - 590px));
  -webkit-mask-image:linear-gradient(to right,#000 calc(var(--gut) - 60px),transparent var(--gut),transparent calc(100% - var(--gut)),#000 calc(100% - var(--gut) + 60px));
  mask-image:linear-gradient(to right,#000 calc(var(--gut) - 60px),transparent var(--gut),transparent calc(100% - var(--gut)),#000 calc(100% - var(--gut) + 60px))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before,:root:not([data-theme="light"]) body::after{background-image:var(--wmd,url("bg-pattern-dark.svg?v=202610192322"))}}
:root[data-theme="dark"] body::before,:root[data-theme="dark"] body::after{background-image:var(--wmd,url("bg-pattern-dark.svg?v=202610192322"))}
@media print{body::before,body::after{display:none}}

/* ---- breadcrumbs: flat chips, chevrons, current level tinted ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;margin:8px 0 4px}
.crumbs a{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;color:var(--muted);text-decoration:none;background:var(--sheet);border:1px solid var(--rule);line-height:1.5}
.crumbs a:hover{color:var(--accent);border-color:var(--accent)}
.crumbs .sep{color:var(--rule);font-size:15px;padding:0 1px}
.crumbs .hico{width:13px;height:13px;fill:currentColor;flex:none}
@supports (corner-shape: squircle){.crumbs a{corner-shape:squircle}}

/* ---- chart grid lines: a pale tint of the accent instead of neutral grey ---- */
:root{--grid:color-mix(in srgb,var(--accent) 14%,var(--sheet));--grid-strong:color-mix(in srgb,var(--accent) 24%,var(--sheet))}
.ovg{border-left:1px dotted var(--grid-strong)}
.irsvg .grid line{stroke:var(--grid-strong);stroke-dasharray:1 3.5;stroke-linecap:round}
.irsvg .gsep{stroke:var(--grid);stroke-dasharray:1 3}
.plot .grid line,.plot .grid circle{stroke:var(--grid)}
.chartab tr.conj td,.chartab tr.conj th{border-top-color:var(--grid-strong)}
.mst figcaption{border-top-color:var(--grid-strong)}
.notice{border-color:var(--grid-strong)}
[data-lang="en"] .scol h3 > .en{font-size:15px;font-weight:600;color:var(--ink)}
h2 > .zh + .en{margin-left:.5em}


/* ---- typography v2: one Apple-style sans family; serif italics only where notation needs them ---- */
h1,h2,h3,.brand,.tile .sym{letter-spacing:-.012em}
h1{font-weight:700}
section h2,.cat h2,.ftopic h3{font-weight:650}
.pg .sch,.iso .pgm,.tile .fx,.tile .pgsym,.pgsym,.chartab th.ir,.reducer output,.ptinfo .big,.el .s{font-family:var(--f-math)}
.el .s,.ptinfo .big{font-family:var(--f-display)}
.brand{font-weight:700;font-size:18px}
.brand small{font-size:12.5px}

/* ---- home hero: clear hierarchy — title, quiet subtitle, lead paragraph, secondary English, meta ---- */
.homehero{column-gap:26px;padding-block:40px 18px;align-items:center}
.homehero .herologo{width:104px;height:104px;margin-top:0;grid-row:1 / span 2;align-self:start}
.homehero h1{font-size:clamp(34px,4.6vw,50px);line-height:1.08;margin:0}
.homehero h1 .h1en{font-family:var(--f-latin);font-size:clamp(14px,1.35vw,17px);font-weight:500;color:var(--muted);letter-spacing:.005em;margin-top:10px}
[data-lang="en"] .homehero h1 .h1en{font-size:inherit;font-weight:700;color:var(--ink);margin-top:0;letter-spacing:-.012em}
.homehero p.zh,.homehero p.en{max-width:640px}
.homehero p.zh{font-size:16px;line-height:1.75;color:color-mix(in srgb,var(--ink) 78%,var(--paper));margin-top:18px}
.homehero p.en{font-size:14.5px;line-height:1.7;color:var(--muted);margin-top:8px}
[data-lang="en"] .homehero p.en{font-size:16px;color:color-mix(in srgb,var(--ink) 78%,var(--paper));margin-top:18px}
.homehero .stats{font-family:var(--f-latin);font-variant-numeric:tabular-nums;font-size:12.5px;letter-spacing:.02em;margin-top:16px;color:var(--muted)}
@media (max-width:640px){.homehero .herologo{width:64px;height:64px;grid-row:auto}}
.homehero .stats{margin-top:14px}
.homehero{padding-block:40px 22px}

/* ---- page lead: a full-width card, Chinese and English side by side ---- */
.leadbox{padding:18px 22px;margin:4px 0 22px;border-left:3px solid var(--accent)}
.leadbox .bi{display:grid;grid-template-columns:1fr;gap:8px;max-width:none}
.leadbox .bi p{margin:0;max-width:none}
.leadbox .bi p.zh{font-size:15px;line-height:1.85;color:color-mix(in srgb,var(--ink) 82%,var(--sheet))}
.leadbox .bi p.en{font-size:14px;line-height:1.75;color:var(--muted);font-family:var(--f-latin)}
[data-lang="zh"] .leadbox .bi,[data-lang="en"] .leadbox .bi{grid-template-columns:1fr}
[data-lang="en"] .leadbox .bi p.en{font-size:15px;color:color-mix(in srgb,var(--ink) 82%,var(--sheet))}
@media (max-width:760px){.leadbox .bi{grid-template-columns:1fr}}

/* ---- figure notes live inside their card; loose hints keep clear of the card above ---- */
figure.panel{margin:0 0 8px}
.fcnote{margin:10px 8px 0;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;line-height:1.75;color:var(--muted)}
.fcnote .en{display:block;margin-top:2px}
[data-lang="en"] .fcnote .en{margin-top:0}
.pgi{font-family:var(--f-math);font-style:italic;font-size:1.12em;color:var(--ink);padding:0 1px}
.pgi sub{font-size:.7em;font-style:italic}
.panel + .hint,.panel + p,.irkey + .hint{margin-top:12px}

/* pKa table */
.rchart .k5t{fill:var(--p5)}
.pkchart .stem{stroke:var(--rule);stroke-width:1.5}
.pkchart .dot{stroke:var(--sheet);stroke-width:1.5}
.pkchart a:hover .dot{stroke:var(--ink)}
.pktab td:first-child{width:140px}
.pktab .smol{height:60px;width:130px;color:var(--ink)}
.pktab .frm{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.pktab .pkv{font-weight:700;font-size:15px;white-space:nowrap}
.pktab tr.hit td{background:var(--accent-soft)}
ul.rules{margin:0;padding-left:20px;display:grid;gap:6px;max-width:80ch}
ul.rules .en{display:block;font-size:13px;color:var(--muted)}

/* not-yet-written related terms, old names, mistranslations, level badge, placeholder pages */
a.chip.todo{border-style:dashed;color:var(--muted)}
a.chip.todo small{margin-left:6px;font-size:10.5px;padding:0 5px;border-radius:4px;background:var(--paper);color:var(--muted)}
.aka .oldn,.aka .mis{display:block;margin-top:4px}
.aka .mis s{color:var(--warn);text-decoration-thickness:1.5px}
.aka .mis small{color:var(--muted)}
.lvl{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid currentColor}
.lvl-S{color:var(--ok)} .lvl-U{color:var(--accent)}
.stubtr{max-width:640px;margin-top:20px}
.stubtr td.big{font-size:20px;font-weight:600}
.backrefs{margin-top:22px}
.lvl .en{margin-left:5px;font-weight:400}

/* ---------- bilingual layout: English below Chinese; in 中 mode one tap shows it ---------- */
.enbtn{display:none;justify-self:end;border:1px solid var(--rule);background:var(--sheet);color:var(--muted);border-radius:6px;font:600 11px/1 var(--f-body);padding:3px 7px;cursor:pointer}
.enbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
[data-lang="zh"] main .enbtn{display:inline-block}
[data-lang="zh"] main .bi.showen > .en,[data-lang="zh"] main .bi.showen > [lang="en"]{display:block!important}

/* ---------- phones: one-row header, compact home ---------- */
.menubtn{display:none}
@media (max-width:640px){
  .bar .wrap{flex-wrap:nowrap;gap:8px;padding-block:8px}
  .brand .lz,.brand small{display:none}
  form.search{flex:1 1 auto}
  form.search .btn{display:none}
  .bar .controls,.bar .refnav{display:none}
  .menubtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);color:var(--ink)}
  header.bar.open .wrap{flex-wrap:wrap}
  header.bar.open .controls{display:flex;flex-basis:100%}
  header.bar.open .refnav{display:flex;flex-basis:100%;margin-top:0}
  .quick{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .quick .qchip{flex:none}
  .cats{grid-template-columns:1fr;gap:8px}
  .cat{padding:10px 14px}
  .cat h2{border-bottom:0;margin:0;font-size:16px}
  .cat .termlist,.cat .more{display:none}
  .cat h2 small::after{content:" →"}
  .quick .qlab{flex:none;white-space:nowrap}
  .head{gap:14px;padding-block:14px 12px}
  .head .tile{width:92px;height:104px}
  .head .tile .sym{font-size:24px}
}

/* nomenclature tables: both languages are content, so neither is hidden by the 中 / EN switch */
.npair{display:inline-flex;flex-direction:column;line-height:1.35;text-decoration:none;color:var(--ink)}
.npair .nzh{font-weight:600}
.npair .nen{font-family:var(--f-latin);color:var(--muted);font-size:.95em}
a.npair:hover .nzh,a.npair:hover .nen{color:var(--accent)}
.ntab td.big{font-size:17px;font-weight:600}
.ntab td.frm{font-family:var(--f-mono);white-space:nowrap}
.ntab td.muted{color:var(--muted);font-size:13px}
.ntab .smol{width:120px;height:56px;color:var(--ink)}
.ndiffs{display:grid;gap:16px}
.ndiff{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.ndiff h3{margin:0 0 6px;font-size:16px}
.ndiff h3 .en{font-weight:400;color:var(--muted);font-size:13px}
.nex{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.nex .smol{width:130px;height:64px;color:var(--ink)}
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ncard{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.ncard .smol{height:70px;color:var(--ink)}
.ncard small{color:var(--muted);font-size:12px}
.itab td.ien{font-family:var(--f-latin);font-size:15px}

/* mass spectrometry isotope patterns */
.isocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.isocard{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.isocard b .en{font-weight:400;color:var(--muted);font-size:13px}
.isosvg{width:100%;max-width:220px;height:auto}
.isosvg .ax{stroke:var(--rule);stroke-width:1.5}
.isosvg .stick{fill:var(--accent)}
.isosvg .hv{font-size:10px;fill:var(--muted);font-family:var(--f-mono)}
.isosvg .tk{font-size:11px;fill:var(--ink);font-family:var(--f-mono)}

/* keep the scrollbar slot reserved so short pages (periodic table) do not shift sideways */
html{scrollbar-gutter:stable}

/* substituent effect pills */
.spill{display:inline-flex;flex-direction:column;font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:8px;line-height:1.3}
.spill .en{font-weight:400;font-size:11px}
.spill.a3{background:color-mix(in srgb,var(--ok) 26%,var(--sheet));color:var(--ink)}
.spill.a2{background:color-mix(in srgb,var(--ok) 16%,var(--sheet));color:var(--ink)}
.spill.a1{background:color-mix(in srgb,var(--ok) 8%,var(--sheet));color:var(--ink)}
.spill.a0{background:var(--paper);color:var(--muted)}
.spill.an1{background:color-mix(in srgb,var(--warn) 10%,var(--sheet));color:var(--ink)}
.spill.an2{background:color-mix(in srgb,var(--warn) 20%,var(--sheet));color:var(--ink)}
.spill.an3{background:color-mix(in srgb,var(--warn) 32%,var(--sheet));color:var(--ink)}
.spill.dop{border:1px solid var(--accent);color:var(--accent)}
.spill.dm{border:1px solid var(--warn);color:var(--warn)}
.spill.dx{color:var(--muted)}

/* electrode potentials */
.e0wrap{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.e0wrap{grid-template-columns:minmax(0,1fr)}.e0side{display:none}}
.e0svg{width:100%;height:auto}
#e0tab td.eqn{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.ecalc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:16px}
.ecalc label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.ecalc label .en{font-size:12px}
.ecalc select{font:inherit;font-size:14px;padding:8px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink)}
.ecout{grid-column:1/-1;display:grid;gap:6px}
.ecrow{display:flex;justify-content:space-between;gap:12px;border-top:1px dotted var(--rule);padding-top:6px;flex-wrap:wrap}
.ecrow b{font-family:var(--f-mono)}
.ecverdict{margin:6px 0 0;font-weight:600;color:var(--ok)}

/* resonance arrow (↔) between drawn structures, substituent explanations */
.marr.res .mline::before{content:"";position:absolute;left:-3px;top:-6px;border-style:solid;border-width:5px 9px 5px 0;border-color:transparent var(--ink) transparent transparent}
.sexp{display:grid;gap:10px;margin-bottom:22px}
.sexp h3{margin:0;font-size:16px}
.sexp h3 .en{font-weight:400;color:var(--muted);font-size:13px}
#sbas .smol{width:110px;height:70px;color:var(--ink)}

/* refined arrows: slim curly arrows in a muted red, thin open-headed stage arrows */
.curly{stroke:var(--p2);stroke-width:1.4;stroke-linecap:round}
.curlyh{stroke:none}
.curlyh{fill:var(--p2)}
.marrow{display:block;width:100%;height:12px;overflow:visible;margin:0 0 20px}
.marrow line,.marrow path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.marr .marrow{transform:rotate(90deg);width:44px;margin:16px auto}}

/* brand subtitle is English: hide it in 中 mode */
[data-lang="zh"] .brand small{display:none}

/* reference pages: rule lists, lead boxes and notes use the full content width, with tight spacing */
ul.rules{max-width:none;gap:10px;padding-left:18px}
ul.rules .bi,.leadbox .bi,.sexp > .bi,section > .bi{gap:2px}
ul.rules .bi p,.leadbox .bi p,.sexp > .bi p,section > .bi p,.hint,ol.steps .bi p,.ndiff .bi p{max-width:none}
ul.rules .bi p.en,ol.steps .bi p.en,.ndiff .bi p.en{font-size:14px;line-height:1.55}
.isocards{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.isonote{margin:0;font-family:var(--f-mono);font-size:12.5px}

/* 数据表 dropdown in the top nav */
.navdrop{position:relative}
.navdrop summary{list-style:none;cursor:pointer;padding:5px 12px;border-radius:999px;font-weight:500;color:var(--muted);font-size:13.5px}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary::after{content:"";display:inline-block;margin-left:6px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.navdrop[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navdrop summary:hover,.navdrop[open] summary{background:var(--accent-soft);color:var(--accent)}
.navdrop.current summary{background:var(--accent);color:var(--sheet)}
.dropmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;box-shadow:0 10px 30px rgb(0 0 0 / .12);padding:14px 16px;display:grid;grid-template-columns:repeat(4,max-content);gap:6px 28px}
.dgrp{display:flex;flex-direction:column;gap:2px}
.dgrp b{font-size:11.5px;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:4px}
.dropmenu a{color:var(--ink);text-decoration:none;padding:4px 8px;margin-left:-8px;border-radius:6px;font-size:14px;white-space:nowrap}
.dropmenu a:hover{background:var(--accent-soft);color:var(--accent)}
.dropmenu a[aria-current="page"]{color:var(--accent);font-weight:600}
.dropmenu .dall{grid-column:1/-1;border-top:1px solid var(--rule);margin:6px 0 0;padding-top:10px;border-radius:0;color:var(--muted);font-size:13px}
@media (max-width:640px){
  .navdrop{flex-basis:100%}
  .dropmenu{position:static;box-shadow:none;border:0;padding:6px 0 0;grid-template-columns:1fr 1fr}
}
.hubgrp{margin-top:18px}
table.dtab.ntab{width:100%}
.ntab td,.ntab th{padding-right:22px}
.refnav .dropmenu a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* E° scale: thin axis, values in one column, names beside them */
.e0wrap{grid-template-columns:300px minmax(0,1fr)}
.e0side{padding:8px 6px 10px;position:sticky;top:96px}
.e0svg .axis{stroke:var(--ink);stroke-width:1.5}
.e0svg .tk{stroke:var(--ink);stroke-width:1.2}
.e0svg .tl{font-size:11px;fill:var(--muted);font-family:var(--f-mono)}
.e0svg .dot{fill:var(--accent)}
.e0svg .ld{fill:none;stroke:var(--rule);stroke-width:1}
.e0svg .cv{font-size:12px;fill:var(--ink);font-family:var(--f-mono);font-weight:600}
.e0svg .cl{font-size:12.5px;fill:var(--ink)}
.e0svg a:hover .cl,.e0svg a:hover .cv{fill:var(--accent)}
.e0svg .side{font-size:12px;fill:var(--muted);font-weight:600}
.e0svg .side.en{font-size:10.5px;font-weight:400}
[data-lang="zh"] .e0svg .side.en{display:none}
.e0cap{margin:4px 8px 0;font-size:12px;color:var(--muted)}
.e0cap .en{display:block}

/* home intro */
.homeintro .stats{margin:10px 0 0}
/* equal-height cards in each row, with the "all n" link pinned to the bottom edge */
.cats{align-items:stretch}
.cat{display:flex;flex-direction:column}
.cat .more{margin-top:auto;padding-top:8px}
/* one line per row on home cards; full English in the tooltip */
.cat .termlist a{flex-wrap:nowrap}
.cat .termlist .en{flex:1 1 0;text-align:right}
/* empty breadcrumb row on home so the big title sits at the same height as on every other page */
.crumbspace{visibility:hidden}
/* home: logo back beside the title; title keeps the same size and height as every other page */
.hero.homehero{padding-block:36px 20px;align-items:start}
.hero.homehero h1{font-size:clamp(30px,5vw,52px);line-height:1.15;margin:4px 0 0}
.hero.homehero h1 .h1en{font-size:.62em;font-weight:600;margin-top:4px;letter-spacing:normal}
.hero.homehero .herologo{width:100px;height:100px;margin-top:4px;grid-row:1 / span 2;align-self:start}
.hero.homehero .stats{margin-top:10px}
@media (max-width:640px){.hero.homehero .herologo{width:64px;height:64px;grid-row:auto}}

/* element entries: orbital box diagram + link to the periodic table */
.obwrap{border-top:1px solid var(--rule);padding:12px 14px 14px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
.obhead{flex-basis:100%;font-size:13px;color:var(--muted);font-weight:600}
.obhead .en{margin-left:6px;font-weight:400}
.orbitals{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px;font-family:var(--f-latin)}
.obcore{align-self:flex-start;font-size:15px;line-height:30px;color:var(--muted);font-weight:600}
.obsub{display:flex;flex-direction:column;align-items:center;gap:3px}
.obbox{display:flex}
.obbox i{font-style:normal;width:26px;height:30px;border:1.4px solid var(--ink);margin-left:-1.4px;display:flex;align-items:center;justify-content:center;font-size:16px;letter-spacing:-2px;line-height:1;color:var(--ink)}
.obbox i:first-child{margin-left:0}
.oblab{font-size:12.5px;color:var(--muted)}
.ptlink{margin-left:auto;font-size:13.5px;color:var(--accent);text-decoration:none;align-self:center}
.ptlink:hover{text-decoration:underline}
[data-lang="zh"] .obhead .en{display:none}

/* related formulas on term pages */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px}
@media (max-width:640px){.fcards{grid-template-columns:minmax(0,1fr)}}
.fcardt{padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.fcardt .fname{color:var(--ink);text-decoration:none;font-weight:600;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.fcardt .fname .en{font-weight:400;color:var(--muted);font-size:14px}
.fcardt .fname .go{margin-left:auto;color:var(--accent)}
.fcardt .fname:hover{color:var(--accent)}
.fcardt .ftex{overflow-x:auto;padding:2px 0}
.fcardt .ftex .katex-display{margin:6px 0}
.fex{border-top:1px dotted var(--rule);padding-top:6px}
.fex summary{cursor:pointer;font-size:13.5px;color:var(--accent)}
.fex summary .en{margin-left:6px}
[data-lang="zh"] .fex summary .en,[data-lang="en"] .fex summary .zh{display:none}
.fex .bi{margin-top:8px}
.fex .texstep{overflow-x:auto}
/* periodic table: element reached from an entry */
.ptable .el.pthit{outline:3px solid var(--accent);outline-offset:1px;z-index:2}

/* UV–vis page */
#uvtab .ien{display:block;font-size:13px;color:var(--muted)}
.wfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}
.solvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.solv{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.solv b{font-size:20px;font-family:var(--f-mono);color:var(--accent)}
.solv .en{display:block;font-size:12.5px;color:var(--muted)}
[data-lang="en"] .solv .en{font-size:14px;color:var(--ink)}

/* UV–vis colour bands: absorbed (top) → seen (bottom) */
.clegend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted);margin:0 0 10px}
.clegend .en{margin-left:6px}
[data-lang="zh"] .clegend .en,[data-lang="en"] .clegend .zh{display:none}
[data-lang="en"] .clegend .en{margin-left:0}
.clegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;background:var(--rule)}
.cbands{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.cband{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.cband .cs{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:6px 4px;font-weight:600;font-size:15px;line-height:1.25}
.cband .cs .en{font-weight:400;font-size:11.5px;opacity:.9}
[data-lang="en"] .cband .cs .en{font-size:13px;font-weight:600;opacity:1}
.cband .crng{text-align:center;padding:7px 2px;font-family:var(--f-latin);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
.cband .crng small{color:var(--muted);font-size:11px}
@media (max-width:900px){.cbands{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Woodward–Fieser: two balanced columns */
.wfgrid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.wfcol{display:flex;flex-direction:column;gap:12px}
.wftab td.num{white-space:nowrap;width:1%;padding-left:18px}
.wfex{padding:12px 16px}
.wfex .wfh{display:block;font-size:13.5px;margin-bottom:8px}
.wfex .wfh .en{margin-left:6px;font-weight:400;color:var(--muted)}
[data-lang="zh"] .wfex .wfh .en,[data-lang="en"] .wfex .wfh .zh{display:none}
[data-lang="en"] .wfex .wfh .en{margin-left:0;color:inherit}

/* tables menu: one row per group — label on the left, tables side by side */
.dropmenu{display:grid;grid-template-columns:max-content;gap:2px;padding:10px 14px 12px;min-width:420px}
.dgrp{display:grid;grid-template-columns:7.5em 1fr;align-items:center;column-gap:10px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.dgrp b{margin:0;font-size:12px;letter-spacing:.02em}
.dgrp .ditems{display:flex;flex-wrap:wrap;gap:2px 4px}
.dropmenu .dgrp a{margin-left:0;padding:4px 10px}
.dropmenu .dall{border-top:0;margin:4px 0 0;padding:6px 10px 0}
@media (max-width:640px){.dropmenu{min-width:0}.dgrp{grid-template-columns:1fr;row-gap:2px}.dgrp b{padding-left:2px}}
/* EN mode: home cards left-aligned, full category names */
[data-lang="en"] .cat .termlist .en{text-align:left}
[data-lang="en"] .cat h2 a,[data-lang="en"] .cat h2 a .en{white-space:normal;overflow:visible;text-overflow:clip}

/* periodic table: keep names inside their cells, especially in EN mode */
.ptable{gap:4px}
.el{overflow:hidden;min-width:0}
.el .n{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
[data-lang="en"] .el .n{font-size:10px;letter-spacing:-.01em}
[data-lang="en"] .el.nl1 .n{font-size:9px;letter-spacing:-.02em}
[data-lang="en"] .el.nl2 .n{font-size:8px;letter-spacing:-.03em}
[data-lang="both"] .el .n .le{display:none}
.ptable .el{container-type:inline-size}
[data-lang="en"] .el .n{font-size:clamp(7px,15cqw,10.5px)}
[data-lang="en"] .el.nl1 .n{font-size:clamp(6.5px,13cqw,10px)}
[data-lang="en"] .el.nl2 .n{font-size:clamp(6px,11.5cqw,9.5px)}
/* final: readable size; very long names hyphenate onto a second line instead of shrinking */
[data-lang="en"] .el .n,[data-lang="en"] .el.nl1 .n,[data-lang="en"] .el.nl2 .n{font-size:clamp(8.5px,15cqw,10.5px);white-space:normal;line-height:1.08;text-align:center;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;letter-spacing:-.01em}
[data-lang="en"] .el.nl1 .n,[data-lang="en"] .el.nl2 .n{font-size:clamp(8.5px,13cqw,10px)}
[data-lang="en"] .el .n,[data-lang="en"] .el.nl1 .n,[data-lang="en"] .el.nl2 .n{overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}