*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173453;background:#f5f8fc}.tp-head{height:54px;padding:0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #dce6f2;background:#fff}.tp-back,.tp-help{min-height:34px;border:1px solid #d6e1ee;border-radius:10px;background:#fff;color:#526a80;font-weight:750;font-size:.78rem;text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding:0 10px;width:max-content}.tp-back:hover,.tp-help:hover{background:#edf4ff;color:#1767e8;border-color:#c7d9f5}.tp-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tp-title{text-align:center;line-height:1.05}.tp-title b{display:block;font-size:.95rem}.tp-title span{font-size:.66rem;color:#73869a}.tp-help{justify-self:end;cursor:pointer}.tp-app{height:calc(100vh - 54px);padding:10px 14px 12px;display:flex;align-items:center;justify-content:center}.tp-board{width:min(1500px,100%);height:100%;display:grid;grid-template-rows:16px minmax(0,1fr) minmax(104px,22vh);gap:5px}.tp-groups{display:grid;grid-template-columns:repeat(18,1fr);gap:4px;padding-left:30px}.tp-groups span{text-align:center;font-size:.59rem;color:#8192a4;font-weight:800}.tp-grid{position:relative;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:4px;padding-left:30px}.el{min-width:0;min-height:0;border:1px solid color-mix(in srgb,var(--c) 52%,#b9c8d8);border-radius:7px;background:color-mix(in srgb,var(--c) 14%,white);color:#183651;padding:3px;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s,border-color .12s}.tp-grid .el{grid-column:var(--g);grid-row:var(--p)}.el:hover,.el:focus-visible{z-index:3;transform:translateY(-2px) scale(1.025);box-shadow:0 7px 18px #17345324;border-color:var(--c);outline:none}.el small{position:absolute;left:4px;top:3px;font-size:clamp(.42rem,.65vw,.58rem);font-weight:750;opacity:.72}.el strong{display:block;text-align:center;font-size:clamp(.82rem,1.65vw,1.55rem);line-height:1;margin-top:9%;letter-spacing:-.03em}.el span{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.42rem,.62vw,.61rem);margin-top:3px;font-weight:650}.c-alkali{--c:#e05a67}.c-alkaline{--c:#e7a23a}.c-transition{--c:#3b82c4}.c-post{--c:#5b9e9a}.c-metalloid{--c:#64a75b}.c-nonmetal{--c:#49a879}.c-halogen{--c:#27a8a4}.c-noble{--c:#786ac8}.c-lanthanide{--c:#b768b3}.c-actinide{--c:#b05e82}.c-unknown{--c:#7d8995}.tp-series{display:grid;grid-template-columns:88px 1fr;grid-template-rows:1fr 1fr;gap:4px 6px;padding-left:30px}.tp-series-label{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding-right:5px}.tp-series-label b{font-size:.64rem}.tp-series-label span{font-size:.55rem;color:#8192a4}.tp-series-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}.tp-modal[hidden]{display:none}.tp-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}.tp-shade{position:absolute;inset:0;border:0;background:#102a49b8;backdrop-filter:blur(5px)}.tp-dialog{position:relative;width:min(570px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;background:#fff;border-radius:22px;padding:25px;box-shadow:0 28px 80px #0c223c52}.tp-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:10px;background:#eef3f8;color:#4f657b;font-size:1.4rem;cursor:pointer}.tp-detail-top{display:flex;align-items:center;gap:18px;padding-right:34px}.tp-symbol{width:92px;height:92px;border-radius:20px;background:color-mix(in srgb,var(--c) 16%,white);border:1px solid var(--c);display:grid;place-items:center;font-size:2.7rem;font-weight:850;color:#173453}.tp-detail-top p{margin:0 0 4px;color:var(--c);font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.tp-detail-top h1{margin:0;font-size:2rem;letter-spacing:-.04em}.tp-detail-top span{font-size:.83rem;color:#6e8297}.tp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:22px}.tp-facts div{border:1px solid #e1e9f2;background:#f8fbfe;border-radius:13px;padding:12px}.tp-facts span{display:block;color:#778a9e;font-size:.7rem;margin-bottom:4px}.tp-facts b{font-size:.93rem}.tp-note{font-size:.72rem;color:#75889c;line-height:1.5;margin:17px 2px 0}.tp-legend h2{margin:0 0 18px}.legend-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.legend-grid span{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700}.legend-grid i{width:13px;height:13px;border-radius:4px;background:var(--c)}.tp-legend p{margin:20px 0 0;color:#718499;font-size:.8rem}@media(max-width:850px){.tp-head{height:48px;padding:0 8px}.tp-app{height:calc(100vh - 48px);padding:6px}.tp-board{grid-template-rows:12px minmax(0,1fr) minmax(86px,21vh);gap:3px}.tp-grid,.tp-series{padding-left:0}.tp-groups{padding-left:0;gap:2px}.tp-grid,.tp-series-row{gap:2px}.el{border-radius:4px;padding:1px}.el small{left:2px;top:1px}.el strong{margin-top:12%;font-size:clamp(.62rem,2.2vw,1.05rem)}.el span{display:none}.tp-series{grid-template-columns:54px 1fr;gap:2px}.tp-series-label b{font-size:.5rem}.tp-back span{display:none}.tp-title span{display:none}.tp-help{font-size:.7rem}.tp-dialog{padding:20px}.tp-symbol{width:72px;height:72px;font-size:2.1rem}.tp-detail-top h1{font-size:1.6rem}}@media(max-height:600px){.tp-head{height:44px}.tp-app{height:calc(100vh - 44px);padding:4px 8px}.tp-board{grid-template-rows:10px minmax(0,1fr) minmax(72px,20vh);gap:2px}.tp-grid,.tp-series-row{gap:2px}.el strong{font-size:clamp(.65rem,1.45vw,1.2rem)}.tp-series-label span{display:none}}