@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#17211f;--muted:#75817d;--paper:#f6f7f3;--line:#dce2dc;--green:#b6d9ca;--deep:#24725d;--lav:#d8d1ef;--yellow:#f0e1a8;--orange:#efc8a6;--blue:#c8ddec;--pink:#ecd0d5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5vw;gap:48px;background:#fafbf8}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;width:28px;height:28px;font-family:Georgia;font-size:19px}.dot{color:var(--deep)}nav{display:flex;gap:30px;flex:1}nav a,.header-link,footer a{color:var(--muted);font-size:12px;text-decoration:none}nav a.active,nav a:hover{color:var(--ink);font-weight:700}.header-link{color:var(--ink)}.hero{max-width:1200px;margin:0 auto;padding:82px 32px 62px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:1.5px;color:var(--deep);margin:0 0 18px}.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.04;letter-spacing:-4px;margin:0;font-weight:700}.hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--deep)}.intro{font-size:15px;color:var(--muted);max-width:380px;line-height:1.7;margin:25px 0 0}.hero-note{display:flex;gap:13px;align-items:center;font:11px 'DM Mono',monospace;color:var(--muted);line-height:1.6}.hero-note strong{color:var(--ink);font-weight:400}.orbit{font-size:48px;color:var(--deep);line-height:1}.workspace{max-width:1240px;margin:0 auto 80px;padding:0 32px}.tools{display:flex;gap:12px;margin-bottom:14px}.search{background:#fff;border:1px solid var(--line);border-radius:7px;height:46px;display:flex;align-items:center;padding:0 13px;gap:10px;flex:1;color:var(--muted)}.search input{border:0;outline:0;flex:1;font:13px Manrope;color:var(--ink);background:transparent}.search kbd{border:1px solid var(--line);padding:2px 6px;border-radius:3px;color:var(--muted);font:11px 'DM Mono'}.filter-button,.reset{border:1px solid var(--line);background:#fff;border-radius:7px;padding:0 15px;font:12px Manrope;color:var(--ink);cursor:pointer}.filter-button{display:flex;gap:11px;align-items:center}.filter-button b{font-size:16px;color:var(--muted);font-weight:400}.reset{background:transparent;color:var(--muted)}.filters{padding:14px 0 20px;display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px 12px;font:11px Manrope;cursor:pointer;color:var(--muted)}.chip.selected{background:var(--ink);color:#fff;border-color:var(--ink)}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 18px 25px}.group-labels{display:grid;grid-template-columns:repeat(18,minmax(45px,1fr));gap:5px;color:#a2aca7;font:10px 'DM Mono';text-align:center;margin-bottom:7px}.periodic-grid{display:grid;grid-template-columns:repeat(18,minmax(45px,1fr));grid-template-rows:repeat(7,70px);gap:5px;min-width:900px}.element{border:1px solid rgba(23,33,31,.09);border-radius:5px;min-width:0;padding:7px 6px;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:.18s;position:relative;color:var(--ink)}.element:hover{transform:translateY(-3px);box-shadow:0 6px 12px #17211f1a;z-index:2}.element small{font:9px 'DM Mono';opacity:.65}.element strong{font-size:22px;line-height:1.1;margin-top:3px}.element span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}.nonmetal{background:var(--green)}.noble-gas{background:var(--lav)}.alkali-metal{background:var(--yellow)}.alkaline-earth-metal{background:var(--orange)}.transition-metal{background:var(--blue)}.metalloid{background:#d4dfb2}.post-transition-metal{background:#e2d6c0}.lanthanide{background:var(--pink)}.actinide{background:#e6c3b8}.dim{opacity:.12;transform:none!important}.series-labels{display:grid;grid-template-columns:90px 1fr;gap:5px;margin:25px 0 7px;font:10px 'DM Mono';color:var(--muted)}.series-grid{display:grid;grid-template-columns:repeat(14,minmax(45px,1fr));gap:5px;min-width:680px}.series-grid .element{grid-row:1!important;grid-column:auto!important}.series-grid .element:nth-child(n+15){grid-row:2!important}.legend{display:flex;gap:18px;flex-wrap:wrap;padding:20px 3px 0;color:var(--muted);font-size:10px}.legend span{display:flex;align-items:center;gap:6px}.swatch{width:9px;height:9px;border-radius:2px;display:inline-block}.below{border-top:1px solid var(--line);max-width:1200px;margin:auto;padding:62px 32px 82px;display:grid;grid-template-columns:1fr 1fr 150px;gap:30px;align-items:start}.below h2{font-size:30px;letter-spacing:-1px;margin:0}.below>p{color:var(--muted);font-size:13px;line-height:1.8;margin:0}.below a{font-size:12px;color:var(--deep);text-decoration:none;font-weight:700}.below a span{font-size:18px;margin-left:7px}footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;color:var(--muted);font:10px 'DM Mono'}footer span:last-child{display:flex;gap:24px}dialog{border:0;border-radius:12px;padding:34px;width:min(390px,90vw);color:var(--ink);box-shadow:0 20px 70px #17211f33}dialog::backdrop{background:#17211f77}.close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:25px;color:var(--muted);cursor:pointer}.big-symbol{width:90px;height:90px;border-radius:10px;display:grid;place-items:center;font-size:42px;font-weight:700;margin:4px 0 20px}.big-symbol.alkali-metal{background:var(--yellow)}.big-symbol.noble-gas{background:var(--lav)}.big-symbol.transition-metal{background:var(--blue)}.big-symbol.nonmetal{background:var(--green)}dialog h2{font-size:30px;margin:0;letter-spacing:-1px} .category-name{color:var(--muted);font-size:12px;margin:6px 0 26px}.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:28px;padding:16px 0;margin-bottom:25px}.facts div{display:flex;flex-direction:column;gap:5px}.facts small{font-size:9px;color:var(--muted)}.facts b{font:15px 'DM Mono'}.facts+a{font-size:12px;color:var(--deep);font-weight:700;text-decoration:none}@media(max-width:700px){.topbar{padding:0 20px;gap:20px}.topbar nav{display:none}.header-link{margin-left:auto}.hero{padding:55px 20px 40px;display:block}.hero h1{letter-spacing:-2px}.hero-note{margin-top:35px}.workspace{padding:0 15px}.tools{flex-wrap:wrap}.search{flex-basis:100%}.filter-button{flex:1}.table-wrap{padding:16px 10px}.below{display:block;padding:45px 20px}.below>p{margin:22px 0}.legend{gap:12px}footer{padding:22px 20px;display:block}footer span:last-child{margin-top:13px;gap:14px}}