/* Interactive periodic table */
:root[data-theme="light"]{--c1:#f4cfc6;--c2:#f3dfb8;--c3:#d5e4cf;--c4:#cfe0e8;--c5:#dad2e8;--c6:#e3e8c4;--c7:#f0d0e0;--c8:#cfd9ee;--c9:#e8d6c0;--c10:#d8d2c2}
:root[data-theme="dark"]{--c1:#5a3a36;--c2:#5a4c32;--c3:#34503c;--c4:#324b57;--c5:#46405e;--c6:#4a5232;--c7:#5a3a4d;--c8:#35446a;--c9:#5a4634;--c10:#4a463c}
.page.wide{max-width:1240px}
.ptbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.seg2{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel)}
.seg2 button{padding:8px 13px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--mute);font-size:.88rem}
.seg2 button:last-child{border-right:0}.seg2 button.on{background:var(--cy);color:var(--on);font-weight:650}
.ptq{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--text);font:inherit;font-size:.92rem;min-width:170px}
.ptquiz{padding:10px 16px;margin-bottom:10px;border:1px solid var(--cy);border-radius:12px;background:color-mix(in srgb,var(--cy) 10%,var(--panel))}
.ptquiz .big{font-size:1.15rem;color:var(--cy)}.ptquiz .sc{float:right;color:var(--mute)}
.ptwrap{overflow-x:auto;padding-bottom:6px}
.ptgrid{display:grid;grid-template-columns:repeat(18,minmax(46px,1fr));grid-template-rows:repeat(7,58px) 16px repeat(2,58px);gap:3px;min-width:880px}
.pe{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;line-height:1.1;border:1px solid var(--line);border-radius:6px;background:var(--bg,var(--panel));color:var(--text);transition:opacity .15s}
.pe i{position:absolute;top:2px;left:4px;font-size:.62rem;font-style:normal;color:var(--mute)}
.pe b{font-size:1.08rem}.pe small{font-size:.58rem;color:var(--mute)}
.pe:hover{border-color:var(--cy);z-index:1}.pe.dim{opacity:.2}.pe.sel{outline:2px solid var(--cy);outline-offset:1px;z-index:2}
.ptlab{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:.72rem;color:var(--mute);text-align:right}
.ptlow{display:grid;grid-template-columns:1fr minmax(270px,360px);gap:20px;margin-top:18px;align-items:start}
.ptleg{display:flex;flex-wrap:wrap;gap:8px}
.ptleg button{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font-size:.82rem}
.ptleg button.on{border-color:var(--cy);background:color-mix(in srgb,var(--cy) 12%,var(--panel))}
.ptleg i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
.ptscale{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--mute)}
.ptscale i{width:200px;height:11px;border-radius:99px;border:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--cy) 8%,var(--panel)),color-mix(in srgb,var(--cy) 86%,var(--panel)))}
.ptscale em{font-style:normal;margin-left:10px}
.pd{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px}
.pd.empty p{color:var(--mute);margin:6px 0 0}
.pd h3{margin:10px 0 0;font-family:Georgia,serif;font-size:1.5rem}
.pdh{display:inline-flex;align-items:baseline;gap:10px;padding:8px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.pdz{color:var(--mute);font-size:.95rem}.pds{font:700 2rem Georgia,serif}
.pcat{margin:0 0 8px;color:var(--mute);font-size:.88rem}
.pd div:not(.pdh){display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:.92rem}
.pd div span{color:var(--mute)}.pd div b{text-align:right;font-weight:600}
@media(max-width:860px){.ptlow{grid-template-columns:1fr}}