:root{color:#e9edf2;font-synthesis:none;background:#0b1015;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 0,#172734 0,#0000 34rem),#0b1015;min-width:320px;margin:0}button,input{font:inherit}button{color:inherit}main{max-width:1560px;margin:auto;padding:30px 28px 50px}header{border-bottom:1px solid #2b343d;grid-template-columns:auto 1fr minmax(260px,390px);align-items:center;gap:30px;padding-bottom:24px;display:grid}.brand{align-items:center;gap:14px;display:flex}.mark{color:#92efcf;border:1px solid #92efcf;place-items:center;width:58px;height:58px;font-size:25px;display:grid}.brand p,.eyebrow{color:#92a1ad;letter-spacing:.18em;margin:0;font-size:11px}.brand h1{margin:2px 0 0;font-family:Georgia,Songti SC,serif;font-size:26px}.intro{color:#aeb8c0;max-width:430px}.search{border-bottom:1px solid #70808d;display:flex}.search input{color:#fff;background:0 0;border:0;outline:0;width:100%;padding:12px 5px}.search button{color:#92efcf;cursor:pointer;background:0 0;border:0}.filters{align-items:center;gap:7px;padding:20px 0 15px;display:flex;overflow:auto}.filters button{white-space:nowrap;cursor:pointer;background:#131b22;border:1px solid #2c3943;border-radius:2px;padding:7px 10px;font-size:12px}.filters button.on{color:#08100d;background:#92efcf;border-color:#92efcf}.filters span{color:#71808c;margin-left:auto;font-size:12px}.table-wrap{padding-bottom:12px;overflow:auto}.periodic{grid-template-rows:repeat(9,74px);grid-template-columns:repeat(18,64px);gap:5px;min-width:1237px;display:grid;position:relative}.element{cursor:pointer;background:#172027;border:1px solid #42505b;flex-direction:column;justify-content:center;align-items:center;transition:all .18s;display:flex;position:relative;overflow:hidden}.element:hover,.element:focus{z-index:2;border-color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px #0008}.element small{color:#9aa6af;font-size:9px;position:absolute;top:4px;left:5px}.element b{font-family:Georgia,serif;font-size:23px}.element span{font-size:10px}.element.dim{opacity:.08;pointer-events:none}.cat-碱金属{background:#32251f;border-color:#aa7058}.cat-碱土金属{background:#302d1c;border-color:#a5964d}.cat-过渡金属{background:#182b31;border-color:#417e89}.cat-后过渡金属{background:#232c27;border-color:#668c74}.cat-类金属{background:#27301d;border-color:#7b9852}.cat-非金属{background:#183028;border-color:#4eaa82}.cat-卤素{background:#202b3d;border-color:#6387b7}.cat-稀有气体{background:#2d2139;border-color:#8c66ae}.cat-镧系元素{background:#37242d;border-color:#a66480}.cat-锕系元素{background:#352124;border-color:#a15e5e}.series{color:#84919a;letter-spacing:.15em;align-self:center;padding-left:5px;font-size:11px}.lan{grid-area:8/1/auto/4}.act{grid-area:9/1/auto/4}.hint,.empty{text-align:center;color:#798791;font-size:12px}.empty{color:#f2a898;font-size:14px}.backdrop{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#03070bd9;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.detail{background:#111920;border:1px solid #3b4751;grid-template-columns:180px minmax(0,390px);width:min(100%,620px);display:grid;position:relative;box-shadow:0 24px 80px #000}.close{cursor:pointer;background:0 0;border:0;font-size:28px;position:absolute;top:8px;right:12px}.hero{border:0;border-right:1px solid #3b4751;flex-direction:column;justify-content:center;align-items:center;min-height:330px;display:flex}.hero small{font-size:14px}.hero strong{font-family:Georgia,serif;font-size:75px;line-height:1}.hero span{font-size:20px}.detail-copy{padding:34px}.detail-copy h2{margin:8px 0 22px;font-family:Georgia,Songti SC,serif;font-size:31px}.detail-copy h2 i{color:#71808c;font-weight:400}dl{margin:0}dl div{border-top:1px solid #2b353d;grid-template-columns:110px 1fr;padding:9px 0;font-size:13px;display:grid}dt{color:#86949e}dd{overflow-wrap:anywhere;margin:0}.note{color:#71808c;margin-top:18px;font-size:11px;line-height:1.6}@media (width<=760px){main{padding:20px 14px}header{grid-template-columns:1fr}.intro{margin:0}.filters{padding-top:15px}.detail{grid-template-columns:1fr;max-height:90vh;overflow:auto}.hero{border-bottom:1px solid #3b4751;border-right:0;min-height:160px}.hero strong{font-size:54px}.detail-copy{padding:24px}.periodic{transform-origin:0 0}}