*{box-sizing:border-box}
:root{
 --page:#f4f6f8;--ink:#111821;--muted:#697480;--line:#d5d9dd;--white:#fff;
 --alkali:#f6b55f;
 --alkaline:#f6d36d;
 --transition:#8fd8cf;
 --post:#9fcfe9;
 --metalloid:#99d694;
 --nonmetal:#b7dc7e;
 --halogen:#7ed7df;
 --noble:#a9a0e5;
 --lanthanide:#eca0b8;
 --actinide:#dc9bd4;
}
html,body{margin:0;background:var(--page);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
.app{padding:18px 18px 28px}
.top{max-width:1500px;margin:auto;display:flex;justify-content:space-between;align-items:end;gap:24px}
small{font-size:11px;font-weight:900;color:#64717c;letter-spacing:.12em}
h1{font-size:32px;line-height:1.08;margin:5px 0 4px;font-weight:900}
p{margin:0;color:var(--muted);font-size:14px}
.search{position:relative;width:420px;max-width:100%}
.search input{width:100%;height:46px;padding:0 15px;border:1px solid #cdd2d6;background:#fff;border-radius:8px;font-size:15px;color:#17202a;outline:none;box-shadow:0 1px 3px #0000000c}
.search input:focus{border-color:#7c8b98;box-shadow:0 0 0 3px #71849718}

.legend{max-width:1500px;margin:16px auto 9px;display:flex;flex-wrap:wrap;gap:6px}
.legend button{appearance:none;border:1px solid #d4d8dc;background:#fff;border-radius:6px;padding:6px 8px;font-size:11px;font-weight:700;color:#46515b;display:flex;align-items:center;gap:6px;cursor:pointer}
.legend button:hover{background:#f8fafb}
.legend i{width:10px;height:10px;border-radius:2px;background:#ccc;display:block}
.legend [data-cat=alkali] i{background:var(--alkali)}
.legend [data-cat=alkaline] i{background:var(--alkaline)}
.legend [data-cat=transition] i{background:var(--transition)}
.legend [data-cat=post] i{background:var(--post)}
.legend [data-cat=metalloid] i{background:var(--metalloid)}
.legend [data-cat=nonmetal] i{background:var(--nonmetal)}
.legend [data-cat=halogen] i{background:var(--halogen)}
.legend [data-cat=noble] i{background:var(--noble)}
.legend [data-cat=lanthanide] i{background:var(--lanthanide)}
.legend [data-cat=actinide] i{background:var(--actinide)}

.scroll{max-width:1500px;margin:0 auto;overflow-x:auto;padding:5px 0 18px}
.group-numbers{min-width:1180px;display:grid;grid-template-columns:repeat(18,1fr);gap:3px;margin-bottom:3px;padding:0 1px}
.group-numbers span{text-align:center;font-size:10px;font-weight:700;color:#9099a1}

.ptable{min-width:1180px;display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,82px);gap:3px}
.el{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:3px;padding:5px 6px;text-align:left;cursor:pointer;color:#101820;box-shadow:inset 0 1px rgba(255,255,255,.5);transition:transform .1s,box-shadow .1s,filter .1s}
.el:hover,.el.hi{z-index:5;transform:scale(1.07);box-shadow:0 5px 18px #0003;filter:saturate(1.08) brightness(1.03);outline:2px solid #fff}
.el.dim{opacity:.17;filter:grayscale(.55)}
.z{font-size:10px;line-height:1;font-weight:700;opacity:.7}
.sym{font-size:25px;line-height:1.12;font-weight:900;margin-top:4px}
.nm{font-size:9px;line-height:1.1;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.el[data-cat=alkali]{background:var(--alkali)}
.el[data-cat=alkaline]{background:var(--alkaline)}
.el[data-cat=transition]{background:var(--transition)}
.el[data-cat=post]{background:var(--post)}
.el[data-cat=metalloid]{background:var(--metalloid)}
.el[data-cat=nonmetal]{background:var(--nonmetal)}
.el[data-cat=halogen]{background:var(--halogen)}
.el[data-cat=noble]{background:var(--noble)}
.el[data-cat=lanthanide]{background:var(--lanthanide)}
.el[data-cat=actinide]{background:var(--actinide)}

.series-block{min-width:1180px;margin-top:14px;padding-left:130px}
.series-label{font-size:10px;font-weight:800;color:#727c85;margin:7px 0 4px}
.series{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.series .el{height:76px}

#panel{position:fixed;z-index:20;right:18px;top:18px;bottom:18px;width:min(520px,calc(100% - 36px));background:#fff;border:1px solid #d8dde1;border-radius:10px;padding:24px;box-shadow:0 18px 60px #17202a55;transform:translateX(calc(100% + 60px));transition:.2s;overflow:auto}
#panel.open{transform:none}
#close{position:absolute;right:12px;top:10px;border:1px solid #d8dde1;background:#f6f7f8;border-radius:50%;width:36px;height:36px;font-size:24px;cursor:pointer}
#shade{position:fixed;inset:0;background:#16202a66;z-index:19;opacity:0;pointer-events:none;transition:.2s}
#shade.open{opacity:1;pointer-events:auto}
.big{font-size:80px;font-weight:900}
.atom{margin-top:20px;height:260px;border-radius:10px;background:#111b25;color:#d8ebfa;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px}

#results{display:none;position:absolute;left:0;right:0;top:50px;background:#fff;border:1px solid #d4d9dd;border-radius:8px;box-shadow:0 12px 35px #26374633;z-index:30;overflow:hidden}
#results.show{display:block}
.r{padding:11px 13px;border-bottom:1px solid #edf0f2;cursor:pointer}
.r:hover{background:#f4f6f8}
.r b{font-size:20px;margin-left:8px}

@media(max-width:800px){
 .app{padding:10px}
 .top{display:block}
 h1{font-size:27px}
 .search{margin-top:13px}
 .legend{margin-top:12px}
 .ptable{min-width:980px;grid-template-rows:repeat(7,68px)}
 .group-numbers{min-width:980px}
 .sym{font-size:21px}
 .nm{font-size:8px}
 .series-block{min-width:980px;padding-left:108px}
 .series .el{height:66px}
}

.search-label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.search-hint{display:block;margin-top:6px;font-size:10px;letter-spacing:0;font-weight:400}#results{top:72px;max-height:min(60vh,440px);overflow-y:auto}button.r{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:white;border:0;border-bottom:1px solid #edf0f2;color:#17202a}button.r small{display:block;font-size:10px;letter-spacing:0}button.r:hover,button.r:focus{background:#eaf3f9}#substanceSelection:empty{display:none}#substanceSelection{max-width:1500px;margin:16px auto;padding:14px;background:#fff;border:1px solid #cdd9e0;border-radius:10px}#substanceSelection p{margin-bottom:8px;line-height:1.5}#substanceSelection button{margin:3px 6px 3px 0;padding:9px 12px;border-radius:7px;border:1px solid #b7cbd6;background:#edf6fb;cursor:pointer}.legend button.active{outline:2px solid #496a7c}.el:focus-visible,button:focus-visible{outline:3px solid #194f87;outline-offset:2px}#close{z-index:2}#panel{max-width:calc(100vw - 20px)}@media(prefers-reduced-motion:reduce){*{transition:none!important}}