:root{font-family:Segoe UI,Arial,sans-serif;color:#182c42;background:#f5f8fc;font-synthesis:none;--metal:#c2daef;--metalloid:#d9edf8;--nonmetal:#e0e5eb;--halogen:#c4e5c4;--noble:#f6d1a5;--alkali:#8cb9df;--alkaline:#a4c9e7}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit}button,select{border:1px solid #bac8d6;background:white;border-radius:6px;padding:10px 14px;cursor:pointer}button:hover{background:#eaf1f9}button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #246abc;outline-offset:3px}[hidden]{display:none!important}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #d9e2ec;background:white}.brand{display:flex;gap:14px;align-items:center}.brand-mark{background:#1e5d96;color:white;width:48px;height:52px;border-radius:5px;display:grid;place-content:center;font-size:26px;font-weight:700;line-height:1}.brand-mark span{font-size:10px;letter-spacing:3px;margin-top:3px}h1{font-size:24px;margin:0;letter-spacing:-.5px}.brand p{font-size:14px;margin:4px 0 0;color:#607287}.edition{font-size:12px;letter-spacing:2px;color:#617388}main{padding:24px 32px;max-width:2200px;margin:auto}.toolbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.views,.actions{display:flex;gap:6px}.views{padding:4px;background:#e5edf5;border-radius:8px}.views button{background:transparent;border-color:transparent}.views button[aria-pressed=true]{background:#1c4f7e;color:white;box-shadow:0 2px 4px #173a6020}.actions{align-items:center}.actions button{font-size:14px}.table-heading{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}h2{font-size:19px;font-weight:600;margin:0}#count{color:#637489;font-size:14px;white-space:nowrap}.notice{font-size:13px;color:#64768a;margin:10px 0 22px}.table-scroll{overflow-x:auto;padding-bottom:12px}#periodic-table{display:grid;grid-template-columns:34px repeat(var(--columns),minmax(48px,1fr));gap:5px;align-items:stretch}#periodic-table[data-view=main]{max-width:1100px;margin:auto;grid-template-columns:34px repeat(8,minmax(70px,1fr))}.axis,.group-label{display:flex;align-items:center;justify-content:center;font-size:13px;min-height:38px;color:#536a80}.group-label{flex-direction:column;font-weight:700;gap:3px}.group-label span{font-size:11px;font-weight:500;white-space:nowrap}.element{position:relative;background:var(--color);border:1px solid #587a992d;border-radius:4px;min-height:69px;display:grid;place-items:center;aspect-ratio:.94;transition:filter .12s}.element:hover{filter:brightness(.96)}.element strong{font-size:clamp(22px,2.2vw,36px);font-weight:650;line-height:1}.element .number{position:absolute;bottom:5px;left:6px;font-size:12px;font-variant-numeric:tabular-nums}.metal{--color:var(--metal)}.metalloid{--color:var(--metalloid)}.nonmetal{--color:var(--nonmetal)}.halogen{--color:var(--halogen)}.noble{--color:var(--noble)}.alkali{--color:var(--alkali)}.alkaline{--color:var(--alkaline)}.placeholder{border:1px dashed #9db3c9;color:#496682;border-radius:4px;display:grid;place-items:center;font-size:12px}.series-label{display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-size:12px;color:#536a80}#legend{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px;padding:18px 0;border-top:1px solid #d9e2ec}.legend-item{display:flex;align-items:center;gap:7px;font-size:13px}.legend-item i{width:16px;height:16px;border-radius:3px;background:var(--color);border:1px solid #587a9933}footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#64768a}footer p{margin:0}#settings{padding:20px;background:white;margin-top:12px;border:1px solid #d9e2ec;border-radius:8px;display:flex;gap:30px;flex-wrap:wrap}#settings>label{font-size:14px;display:flex;gap:12px;align-items:center}fieldset{border:0;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap;color:#64768a}legend{font-size:12px;margin-bottom:8px}fieldset label{font-size:14px}.print-controls{margin-top:16px;display:flex;align-items:center;gap:12px}.print-preview .table-scroll,.print-preview #legend{filter:grayscale(1)}.presentation header,.presentation .toolbar,.presentation #settings{display:none!important}#exit-present{position:fixed;right:20px;bottom:20px;box-shadow:0 4px 20px #182c4220}#exit-present span{font-size:12px;color:#64768a;margin-left:8px}.presentation main{padding-bottom:80px}
.element{aspect-ratio:auto;min-width:0;width:100%;height:clamp(69px,5.3vw,100px)}
@media(max-width:700px){header{padding:18px}.edition,.brand p{display:none}main{padding:18px}.toolbar{gap:12px}.views{width:100%}.views button{flex:1;font-size:14px;padding:9px}.actions{flex-wrap:wrap}.table-heading{align-items:flex-start;flex-direction:column;gap:6px}footer{flex-direction:column}#settings>label{align-items:flex-start;flex-direction:column}}
@media print{@page{size:landscape;margin:8mm}body{background:white;color:black}header,.toolbar,#settings,.print-controls,#exit-present{display:none!important}main{padding:0}.table-heading{margin-top:0}.table-scroll{overflow:visible;filter:grayscale(1)}#legend{filter:grayscale(1)}#periodic-table{grid-template-columns:20px repeat(var(--columns),minmax(0,1fr));gap:2px}.element{min-height:35px;break-inside:avoid;border:1px solid #555}.element strong{font-size:17px}.element .number{font-size:8px;left:2px;bottom:2px}.group-label,.group-label span,.axis,.placeholder{font-size:8px}.series-label{font-size:9px}.notice,footer{font-size:9px}.element{print-color-adjust:exact}#periodic-table[data-view=main]{grid-template-columns:20px repeat(8,minmax(0,1fr))}}