/* notfoundium.com: the periodic table page (generated by notfoundium/periodic-table-gen.py; one grid place per element). */
.pt .z1 { grid-area: 1 / 1; }
.pt .z2 { grid-area: 1 / 18; }
.pt .z3 { grid-area: 2 / 1; }
.pt .z4 { grid-area: 2 / 2; }
.pt .z5 { grid-area: 2 / 13; }
.pt .z6 { grid-area: 2 / 14; }
.pt .z7 { grid-area: 2 / 15; }
.pt .z8 { grid-area: 2 / 16; }
.pt .z9 { grid-area: 2 / 17; }
.pt .z10 { grid-area: 2 / 18; }
.pt .z11 { grid-area: 3 / 1; }
.pt .z12 { grid-area: 3 / 2; }
.pt .z13 { grid-area: 3 / 13; }
.pt .z14 { grid-area: 3 / 14; }
.pt .z15 { grid-area: 3 / 15; }
.pt .z16 { grid-area: 3 / 16; }
.pt .z17 { grid-area: 3 / 17; }
.pt .z18 { grid-area: 3 / 18; }
.pt .z19 { grid-area: 4 / 1; }
.pt .z20 { grid-area: 4 / 2; }
.pt .z21 { grid-area: 4 / 3; }
.pt .z22 { grid-area: 4 / 4; }
.pt .z23 { grid-area: 4 / 5; }
.pt .z24 { grid-area: 4 / 6; }
.pt .z25 { grid-area: 4 / 7; }
.pt .z26 { grid-area: 4 / 8; }
.pt .z27 { grid-area: 4 / 9; }
.pt .z28 { grid-area: 4 / 10; }
.pt .z29 { grid-area: 4 / 11; }
.pt .z30 { grid-area: 4 / 12; }
.pt .z31 { grid-area: 4 / 13; }
.pt .z32 { grid-area: 4 / 14; }
.pt .z33 { grid-area: 4 / 15; }
.pt .z34 { grid-area: 4 / 16; }
.pt .z35 { grid-area: 4 / 17; }
.pt .z36 { grid-area: 4 / 18; }
.pt .z37 { grid-area: 5 / 1; }
.pt .z38 { grid-area: 5 / 2; }
.pt .z39 { grid-area: 5 / 3; }
.pt .z40 { grid-area: 5 / 4; }
.pt .z41 { grid-area: 5 / 5; }
.pt .z42 { grid-area: 5 / 6; }
.pt .z43 { grid-area: 5 / 7; }
.pt .z44 { grid-area: 5 / 8; }
.pt .z45 { grid-area: 5 / 9; }
.pt .z46 { grid-area: 5 / 10; }
.pt .z47 { grid-area: 5 / 11; }
.pt .z48 { grid-area: 5 / 12; }
.pt .z49 { grid-area: 5 / 13; }
.pt .z50 { grid-area: 5 / 14; }
.pt .z51 { grid-area: 5 / 15; }
.pt .z52 { grid-area: 5 / 16; }
.pt .z53 { grid-area: 5 / 17; }
.pt .z54 { grid-area: 5 / 18; }
.pt .z55 { grid-area: 6 / 1; }
.pt .z56 { grid-area: 6 / 2; }
.pt .z57 { grid-area: 9 / 3; }
.pt .z58 { grid-area: 9 / 4; }
.pt .z59 { grid-area: 9 / 5; }
.pt .z60 { grid-area: 9 / 6; }
.pt .z61 { grid-area: 9 / 7; }
.pt .z62 { grid-area: 9 / 8; }
.pt .z63 { grid-area: 9 / 9; }
.pt .z64 { grid-area: 9 / 10; }
.pt .z65 { grid-area: 9 / 11; }
.pt .z66 { grid-area: 9 / 12; }
.pt .z67 { grid-area: 9 / 13; }
.pt .z68 { grid-area: 9 / 14; }
.pt .z69 { grid-area: 9 / 15; }
.pt .z70 { grid-area: 9 / 16; }
.pt .z71 { grid-area: 9 / 17; }
.pt .z72 { grid-area: 6 / 4; }
.pt .z73 { grid-area: 6 / 5; }
.pt .z74 { grid-area: 6 / 6; }
.pt .z75 { grid-area: 6 / 7; }
.pt .z76 { grid-area: 6 / 8; }
.pt .z77 { grid-area: 6 / 9; }
.pt .z78 { grid-area: 6 / 10; }
.pt .z79 { grid-area: 6 / 11; }
.pt .z80 { grid-area: 6 / 12; }
.pt .z81 { grid-area: 6 / 13; }
.pt .z82 { grid-area: 6 / 14; }
.pt .z83 { grid-area: 6 / 15; }
.pt .z84 { grid-area: 6 / 16; }
.pt .z85 { grid-area: 6 / 17; }
.pt .z86 { grid-area: 6 / 18; }
.pt .z87 { grid-area: 7 / 1; }
.pt .z88 { grid-area: 7 / 2; }
.pt .z89 { grid-area: 10 / 3; }
.pt .z90 { grid-area: 10 / 4; }
.pt .z91 { grid-area: 10 / 5; }
.pt .z92 { grid-area: 10 / 6; }
.pt .z93 { grid-area: 10 / 7; }
.pt .z94 { grid-area: 10 / 8; }
.pt .z95 { grid-area: 10 / 9; }
.pt .z96 { grid-area: 10 / 10; }
.pt .z97 { grid-area: 10 / 11; }
.pt .z98 { grid-area: 10 / 12; }
.pt .z99 { grid-area: 10 / 13; }
.pt .z100 { grid-area: 10 / 14; }
.pt .z101 { grid-area: 10 / 15; }
.pt .z102 { grid-area: 10 / 16; }
.pt .z103 { grid-area: 10 / 17; }
.pt .z104 { grid-area: 7 / 4; }
.pt .z105 { grid-area: 7 / 5; }
.pt .z106 { grid-area: 7 / 6; }
.pt .z107 { grid-area: 7 / 7; }
.pt .z108 { grid-area: 7 / 8; }
.pt .z109 { grid-area: 7 / 9; }
.pt .z110 { grid-area: 7 / 10; }
.pt .z111 { grid-area: 7 / 11; }
.pt .z112 { grid-area: 7 / 12; }
.pt .z113 { grid-area: 7 / 13; }
.pt .z114 { grid-area: 7 / 14; }
.pt .z115 { grid-area: 7 / 15; }
.pt .z116 { grid-area: 7 / 16; }
.pt .z117 { grid-area: 7 / 17; }
.pt .z118 { grid-area: 7 / 18; }


/* The table: 18 columns, 10 rows (row 8 is the gap above the lanthanides and actinides). */
.pt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; max-width: 1400px; }
.pt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(18, minmax(52px, 1fr)); grid-template-rows: repeat(7, auto) 14px repeat(2, auto); gap: 4px; min-width: 1000px; }
.pt .el { position: relative; display: grid; align-content: center; justify-items: center; aspect-ratio: 1 / 1.08; padding: 3px; border-radius: 7px; border: 1px solid var(--hair); background: var(--raised); color: var(--ink); }
.pt .el .z { position: absolute; top: 3px; left: 5px; font: 400 10px/1 var(--mono); color: var(--muted); }
.pt .el .sym { font-weight: 500; font-size: clamp(16px, 1.6vw, 24px); line-height: 1; letter-spacing: -0.02em; }
.pt .el .nm { margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: var(--muted); }
.pt .s { background: color-mix(in srgb, var(--raised) 86%, #e5484d); }
.pt .p { background: color-mix(in srgb, var(--raised) 88%, #f5b800); }
.pt .d { background: color-mix(in srgb, var(--raised) 88%, #0b33d6); }
.pt .f { background: color-mix(in srgb, var(--raised) 86%, #18a058); }
.pt .series { grid-area: 6 / 3; display: grid; place-items: center; font: 400 10px/1.2 var(--mono); color: var(--muted); border: 1px dashed var(--hair); border-radius: 7px; text-align: center; }
.pt .series.act { grid-area: 7 / 3; }

/* Element 404 in the hollow of periods 1 to 3, where the table has nothing. */
.pt .nf { grid-area: 1 / 4 / 4 / 6; aspect-ratio: auto; z-index: 1; border: 2px solid var(--accent); background: var(--raised); box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 22%, transparent); transition: opacity 0.6s ease, border-style 0s, transform 0.6s cubic-bezier(.2, .7, .2, 1); cursor: help; outline-offset: 3px; }
.pt .nf .z { top: 8px; left: 10px; font-size: 13px; }
.pt .nf .sym { font-size: clamp(40px, 4.6vw, 68px); color: var(--accent); }
.pt .nf .nm { font-size: 13px; color: var(--ink); white-space: normal; }
.pt .nf .life { margin-top: 2px; font: 400 11px/1 var(--mono); color: var(--muted); }
.pt .nf .gone { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 8px; font-size: 13px; color: var(--accent); opacity: 0; transition: opacity 0.6s ease; }
.pt .nf .gone b { display: block; font-weight: 500; font-size: 17px; }
.pt .nf:hover, .pt .nf:focus-visible { border-style: dashed; background: transparent; box-shadow: none; }
.pt .nf:hover > :not(.gone), .pt .nf:focus-visible > :not(.gone) { opacity: 0; transition: opacity 0.6s ease; }
.pt .nf:hover .gone, .pt .nf:focus-visible .gone { opacity: 1; }
.pt .note-cell { grid-area: 1 / 6 / 4 / 13; align-self: center; padding: 0 12px 0 18px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pt .note-cell b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 16px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .pt .nf, .pt .nf .gone, .pt .nf > * { transition: none; } }

.pt-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.pt-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pt-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hair); }
.pt-legend .s { background: color-mix(in srgb, var(--raised) 70%, #e5484d); }
.pt-legend .p { background: color-mix(in srgb, var(--raised) 70%, #f5b800); }
.pt-legend .d { background: color-mix(in srgb, var(--raised) 70%, #0b33d6); }
.pt-legend .f { background: color-mix(in srgb, var(--raised) 70%, #18a058); }
.pt-legend .nfk { border: 2px solid var(--accent); background: var(--raised); }
.pt-hero { padding-top: 64px; padding-bottom: 5vh; max-width: 1240px; }
.pt-hero h1 { font-size: clamp(40px, 5.4vw, 84px); }
.pt-hero .lede { max-width: 44rem; }
.pt-band { padding-top: 4vh; padding-bottom: 9vh; }
.scroll-hint { display: none; margin: 0 0 10px; font: 400 12px/1.4 var(--mono); color: var(--muted); }
@media (max-width: 1040px) { .scroll-hint { display: block; } }