body {
  background: #101318;
  text-shadow: 0 0 0.4vw currentColor;
  overflow: hidden;
}

.wrapper {
  position: relative;
  overflow: hidden;
  padding: 2%;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  /* Cap by viewport height so the table never overflows below the screen
     (e.g. when a Windows taskbar reduces the available height). The table
     is roughly square-ish (~10 rows × 18 cols), so 1.7 × height keeps it
     within the visible area regardless of monitor aspect ratio. */
  max-width: calc(1.7 * (100vh - 24px));
}
.wrapper > input {
  -webkit-appearance: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.periodic-table {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(18, 1fr);
}

.element {
  position: relative;
  font-size: 0.5vw;
  padding-bottom: 100%;
  cursor: pointer;
  color: #fff;
  transition: 500ms;
}
.element .overlay {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #101318;
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}
.element .square {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid;
  box-sizing: border-box;
  background: #101318;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition-property: transform, z-index, left, right, top, bottom;
  transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;
  transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;
}
.element .atomic-number {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px;
}
.element .label {
  text-align: center;
  transition: 200ms;
}
.element .symbol {
  font-size: 1.7vw;
}
.element .name {
  font-size: 0.7vw;
}
.element .atomic-mass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px;
  text-align: center;
}
.element .atomic-weight {
  position: absolute;
  right: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 2px;
  opacity: 0;
  transition: 200ms;
  text-align: right;
}
.element .model {
  display: none;
  position: absolute;
  left: -500%;
  right: -500%;
  top: -500%;
  bottom: -500%;
  transform: scale(0.1);
}
.element .model .orbital {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 5px solid;
  border-radius: 50%;
  opacity: 0.25;
}
.element .model .orbital:nth-child(1) {
  margin: 10%;
  animation-duration: 40s;
}
.element .model .orbital:nth-child(2) {
  margin: 15.5%;
  animation-duration: 34s;
}
.element .model .orbital:nth-child(3) {
  margin: 21%;
  animation-duration: 28s;
}
.element .model .orbital:nth-child(4) {
  margin: 26.5%;
  animation-duration: 22s;
}
.element .model .orbital:nth-child(5) {
  margin: 32%;
  animation-duration: 16s;
}
.element .model .orbital:nth-child(6) {
  margin: 37.5%;
  animation-duration: 10s;
}
.element .model .orbital:nth-child(7) {
  margin: 43%;
  animation-duration: 4s;
}
.element .model .orbital .electron {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.element .model .orbital .electron::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.7vw);
  top: -0.7vw;
  width: 1.4vw;
  height: 1.4vw;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0.75;
}
.element .model .orbital .electron:nth-last-child(1):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(2):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(2):first-child ~ .electron:nth-child(2) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(2) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(3):first-child ~ .electron:nth-child(3) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(2) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(3) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(4):first-child ~ .electron:nth-child(4) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(2) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(3) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(4) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(5):first-child ~ .electron:nth-child(5) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(2) {
  transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(3) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(4) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(5) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(6):first-child ~ .electron:nth-child(6) {
  transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(2) {
  transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(3) {
  transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(4) {
  transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(5) {
  transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(6) {
  transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(7):first-child ~ .electron:nth-child(7) {
  transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(2) {
  transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(3) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(4) {
  transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(5) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(6) {
  transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(7) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(8):first-child ~ .electron:nth-child(8) {
  transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(2) {
  transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(3) {
  transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(4) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(5) {
  transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(6) {
  transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(7) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(8) {
  transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(9):first-child ~ .electron:nth-child(9) {
  transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(2) {
  transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(3) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(4) {
  transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(5) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(6) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(7) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(8) {
  transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(9) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(10):first-child ~ .electron:nth-child(10) {
  transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(2) {
  transform: rotate(32.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(3) {
  transform: rotate(65.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(4) {
  transform: rotate(98.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(5) {
  transform: rotate(130.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(6) {
  transform: rotate(163.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(7) {
  transform: rotate(196.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(8) {
  transform: rotate(229.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(9) {
  transform: rotate(261.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(10) {
  transform: rotate(294.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(11):first-child ~ .electron:nth-child(11) {
  transform: rotate(327.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(2) {
  transform: rotate(30deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(3) {
  transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(4) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(5) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(6) {
  transform: rotate(150deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(7) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(8) {
  transform: rotate(210deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(9) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(10) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(11) {
  transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(12):first-child ~ .electron:nth-child(12) {
  transform: rotate(330deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(2) {
  transform: rotate(27.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(3) {
  transform: rotate(55.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(4) {
  transform: rotate(83.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(5) {
  transform: rotate(110.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(6) {
  transform: rotate(138.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(7) {
  transform: rotate(166.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(8) {
  transform: rotate(193.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(9) {
  transform: rotate(221.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(10) {
  transform: rotate(249.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(11) {
  transform: rotate(276.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(12) {
  transform: rotate(304.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(13):first-child ~ .electron:nth-child(13) {
  transform: rotate(332.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(2) {
  transform: rotate(25.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(3) {
  transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(4) {
  transform: rotate(77.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(5) {
  transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(6) {
  transform: rotate(128.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(7) {
  transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(8) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(9) {
  transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(10) {
  transform: rotate(231.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(11) {
  transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(12) {
  transform: rotate(282.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(13) {
  transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(14):first-child ~ .electron:nth-child(14) {
  transform: rotate(334.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(2) {
  transform: rotate(24deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(3) {
  transform: rotate(48deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(4) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(5) {
  transform: rotate(96deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(6) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(7) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(8) {
  transform: rotate(168deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(9) {
  transform: rotate(192deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(10) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(11) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(12) {
  transform: rotate(264deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(13) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(14) {
  transform: rotate(312deg);
}
.element .model .orbital .electron:nth-last-child(15):first-child ~ .electron:nth-child(15) {
  transform: rotate(336deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(2) {
  transform: rotate(22.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(3) {
  transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(4) {
  transform: rotate(67.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(5) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(6) {
  transform: rotate(112.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(7) {
  transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(8) {
  transform: rotate(157.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(9) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(10) {
  transform: rotate(202.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(11) {
  transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(12) {
  transform: rotate(247.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(13) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(14) {
  transform: rotate(292.5deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(15) {
  transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(16):first-child ~ .electron:nth-child(16) {
  transform: rotate(337.5deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(2) {
  transform: rotate(21.1764705882deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(3) {
  transform: rotate(42.3529411765deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(4) {
  transform: rotate(63.5294117647deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(5) {
  transform: rotate(84.7058823529deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(6) {
  transform: rotate(105.8823529412deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(7) {
  transform: rotate(127.0588235294deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(8) {
  transform: rotate(148.2352941176deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(9) {
  transform: rotate(169.4117647059deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(10) {
  transform: rotate(190.5882352941deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(11) {
  transform: rotate(211.7647058824deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(12) {
  transform: rotate(232.9411764706deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(13) {
  transform: rotate(254.1176470588deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(14) {
  transform: rotate(275.2941176471deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(15) {
  transform: rotate(296.4705882353deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(16) {
  transform: rotate(317.6470588235deg);
}
.element .model .orbital .electron:nth-last-child(17):first-child ~ .electron:nth-child(17) {
  transform: rotate(338.8235294118deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(2) {
  transform: rotate(20deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(3) {
  transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(4) {
  transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(5) {
  transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(6) {
  transform: rotate(100deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(7) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(8) {
  transform: rotate(140deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(9) {
  transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(10) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(11) {
  transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(12) {
  transform: rotate(220deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(13) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(14) {
  transform: rotate(260deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(15) {
  transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(16) {
  transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(17) {
  transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(18):first-child ~ .electron:nth-child(18) {
  transform: rotate(340deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(2) {
  transform: rotate(18.9473684211deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(3) {
  transform: rotate(37.8947368421deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(4) {
  transform: rotate(56.8421052632deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(5) {
  transform: rotate(75.7894736842deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(6) {
  transform: rotate(94.7368421053deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(7) {
  transform: rotate(113.6842105263deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(8) {
  transform: rotate(132.6315789474deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(9) {
  transform: rotate(151.5789473684deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(10) {
  transform: rotate(170.5263157895deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(11) {
  transform: rotate(189.4736842105deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(12) {
  transform: rotate(208.4210526316deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(13) {
  transform: rotate(227.3684210526deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(14) {
  transform: rotate(246.3157894737deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(15) {
  transform: rotate(265.2631578947deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(16) {
  transform: rotate(284.2105263158deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(17) {
  transform: rotate(303.1578947368deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(18) {
  transform: rotate(322.1052631579deg);
}
.element .model .orbital .electron:nth-last-child(19):first-child ~ .electron:nth-child(19) {
  transform: rotate(341.0526315789deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(2) {
  transform: rotate(18deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(3) {
  transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(4) {
  transform: rotate(54deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(5) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(6) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(7) {
  transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(8) {
  transform: rotate(126deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(9) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(10) {
  transform: rotate(162deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(11) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(12) {
  transform: rotate(198deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(13) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(14) {
  transform: rotate(234deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(15) {
  transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(16) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(17) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(18) {
  transform: rotate(306deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(19) {
  transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(20):first-child ~ .electron:nth-child(20) {
  transform: rotate(342deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(2) {
  transform: rotate(17.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(3) {
  transform: rotate(34.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(4) {
  transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(5) {
  transform: rotate(68.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(6) {
  transform: rotate(85.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(7) {
  transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(8) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(9) {
  transform: rotate(137.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(10) {
  transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(11) {
  transform: rotate(171.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(12) {
  transform: rotate(188.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(13) {
  transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(14) {
  transform: rotate(222.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(15) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(16) {
  transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(17) {
  transform: rotate(274.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(18) {
  transform: rotate(291.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(19) {
  transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(20) {
  transform: rotate(325.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(21):first-child ~ .electron:nth-child(21) {
  transform: rotate(342.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(2) {
  transform: rotate(16.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(3) {
  transform: rotate(32.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(4) {
  transform: rotate(49.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(5) {
  transform: rotate(65.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(6) {
  transform: rotate(81.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(7) {
  transform: rotate(98.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(8) {
  transform: rotate(114.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(9) {
  transform: rotate(130.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(10) {
  transform: rotate(147.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(11) {
  transform: rotate(163.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(12) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(13) {
  transform: rotate(196.3636363636deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(14) {
  transform: rotate(212.7272727273deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(15) {
  transform: rotate(229.0909090909deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(16) {
  transform: rotate(245.4545454545deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(17) {
  transform: rotate(261.8181818182deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(18) {
  transform: rotate(278.1818181818deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(19) {
  transform: rotate(294.5454545455deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(20) {
  transform: rotate(310.9090909091deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(21) {
  transform: rotate(327.2727272727deg);
}
.element .model .orbital .electron:nth-last-child(22):first-child ~ .electron:nth-child(22) {
  transform: rotate(343.6363636364deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(2) {
  transform: rotate(15.652173913deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(3) {
  transform: rotate(31.3043478261deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(4) {
  transform: rotate(46.9565217391deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(5) {
  transform: rotate(62.6086956522deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(6) {
  transform: rotate(78.2608695652deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(7) {
  transform: rotate(93.9130434783deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(8) {
  transform: rotate(109.5652173913deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(9) {
  transform: rotate(125.2173913043deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(10) {
  transform: rotate(140.8695652174deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(11) {
  transform: rotate(156.5217391304deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(12) {
  transform: rotate(172.1739130435deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(13) {
  transform: rotate(187.8260869565deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(14) {
  transform: rotate(203.4782608696deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(15) {
  transform: rotate(219.1304347826deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(16) {
  transform: rotate(234.7826086957deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(17) {
  transform: rotate(250.4347826087deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(18) {
  transform: rotate(266.0869565217deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(19) {
  transform: rotate(281.7391304348deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(20) {
  transform: rotate(297.3913043478deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(21) {
  transform: rotate(313.0434782609deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(22) {
  transform: rotate(328.6956521739deg);
}
.element .model .orbital .electron:nth-last-child(23):first-child ~ .electron:nth-child(23) {
  transform: rotate(344.347826087deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(2) {
  transform: rotate(15deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(3) {
  transform: rotate(30deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(4) {
  transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(5) {
  transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(6) {
  transform: rotate(75deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(7) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(8) {
  transform: rotate(105deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(9) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(10) {
  transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(11) {
  transform: rotate(150deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(12) {
  transform: rotate(165deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(13) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(14) {
  transform: rotate(195deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(15) {
  transform: rotate(210deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(16) {
  transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(17) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(18) {
  transform: rotate(255deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(19) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(20) {
  transform: rotate(285deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(21) {
  transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(22) {
  transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(23) {
  transform: rotate(330deg);
}
.element .model .orbital .electron:nth-last-child(24):first-child ~ .electron:nth-child(24) {
  transform: rotate(345deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(2) {
  transform: rotate(14.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(3) {
  transform: rotate(28.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(4) {
  transform: rotate(43.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(5) {
  transform: rotate(57.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(6) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(7) {
  transform: rotate(86.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(8) {
  transform: rotate(100.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(9) {
  transform: rotate(115.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(10) {
  transform: rotate(129.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(11) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(12) {
  transform: rotate(158.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(13) {
  transform: rotate(172.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(14) {
  transform: rotate(187.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(15) {
  transform: rotate(201.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(16) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(17) {
  transform: rotate(230.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(18) {
  transform: rotate(244.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(19) {
  transform: rotate(259.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(20) {
  transform: rotate(273.6deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(21) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(22) {
  transform: rotate(302.4deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(23) {
  transform: rotate(316.8deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(24) {
  transform: rotate(331.2deg);
}
.element .model .orbital .electron:nth-last-child(25):first-child ~ .electron:nth-child(25) {
  transform: rotate(345.6deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(2) {
  transform: rotate(13.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(3) {
  transform: rotate(27.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(4) {
  transform: rotate(41.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(5) {
  transform: rotate(55.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(6) {
  transform: rotate(69.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(7) {
  transform: rotate(83.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(8) {
  transform: rotate(96.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(9) {
  transform: rotate(110.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(10) {
  transform: rotate(124.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(11) {
  transform: rotate(138.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(12) {
  transform: rotate(152.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(13) {
  transform: rotate(166.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(14) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(15) {
  transform: rotate(193.8461538462deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(16) {
  transform: rotate(207.6923076923deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(17) {
  transform: rotate(221.5384615385deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(18) {
  transform: rotate(235.3846153846deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(19) {
  transform: rotate(249.2307692308deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(20) {
  transform: rotate(263.0769230769deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(21) {
  transform: rotate(276.9230769231deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(22) {
  transform: rotate(290.7692307692deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(23) {
  transform: rotate(304.6153846154deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(24) {
  transform: rotate(318.4615384615deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(25) {
  transform: rotate(332.3076923077deg);
}
.element .model .orbital .electron:nth-last-child(26):first-child ~ .electron:nth-child(26) {
  transform: rotate(346.1538461538deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(2) {
  transform: rotate(13.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(3) {
  transform: rotate(26.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(4) {
  transform: rotate(40deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(5) {
  transform: rotate(53.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(6) {
  transform: rotate(66.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(7) {
  transform: rotate(80deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(8) {
  transform: rotate(93.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(9) {
  transform: rotate(106.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(10) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(11) {
  transform: rotate(133.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(12) {
  transform: rotate(146.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(13) {
  transform: rotate(160deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(14) {
  transform: rotate(173.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(15) {
  transform: rotate(186.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(16) {
  transform: rotate(200deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(17) {
  transform: rotate(213.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(18) {
  transform: rotate(226.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(19) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(20) {
  transform: rotate(253.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(21) {
  transform: rotate(266.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(22) {
  transform: rotate(280deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(23) {
  transform: rotate(293.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(24) {
  transform: rotate(306.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(25) {
  transform: rotate(320deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(26) {
  transform: rotate(333.3333333333deg);
}
.element .model .orbital .electron:nth-last-child(27):first-child ~ .electron:nth-child(27) {
  transform: rotate(346.6666666667deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(2) {
  transform: rotate(12.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(3) {
  transform: rotate(25.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(4) {
  transform: rotate(38.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(5) {
  transform: rotate(51.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(6) {
  transform: rotate(64.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(7) {
  transform: rotate(77.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(8) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(9) {
  transform: rotate(102.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(10) {
  transform: rotate(115.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(11) {
  transform: rotate(128.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(12) {
  transform: rotate(141.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(13) {
  transform: rotate(154.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(14) {
  transform: rotate(167.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(15) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(16) {
  transform: rotate(192.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(17) {
  transform: rotate(205.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(18) {
  transform: rotate(218.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(19) {
  transform: rotate(231.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(20) {
  transform: rotate(244.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(21) {
  transform: rotate(257.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(22) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(23) {
  transform: rotate(282.8571428571deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(24) {
  transform: rotate(295.7142857143deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(25) {
  transform: rotate(308.5714285714deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(26) {
  transform: rotate(321.4285714286deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(27) {
  transform: rotate(334.2857142857deg);
}
.element .model .orbital .electron:nth-last-child(28):first-child ~ .electron:nth-child(28) {
  transform: rotate(347.1428571429deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(2) {
  transform: rotate(12.4137931034deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(3) {
  transform: rotate(24.8275862069deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(4) {
  transform: rotate(37.2413793103deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(5) {
  transform: rotate(49.6551724138deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(6) {
  transform: rotate(62.0689655172deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(7) {
  transform: rotate(74.4827586207deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(8) {
  transform: rotate(86.8965517241deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(9) {
  transform: rotate(99.3103448276deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(10) {
  transform: rotate(111.724137931deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(11) {
  transform: rotate(124.1379310345deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(12) {
  transform: rotate(136.5517241379deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(13) {
  transform: rotate(148.9655172414deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(14) {
  transform: rotate(161.3793103448deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(15) {
  transform: rotate(173.7931034483deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(16) {
  transform: rotate(186.2068965517deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(17) {
  transform: rotate(198.6206896552deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(18) {
  transform: rotate(211.0344827586deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(19) {
  transform: rotate(223.4482758621deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(20) {
  transform: rotate(235.8620689655deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(21) {
  transform: rotate(248.275862069deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(22) {
  transform: rotate(260.6896551724deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(23) {
  transform: rotate(273.1034482759deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(24) {
  transform: rotate(285.5172413793deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(25) {
  transform: rotate(297.9310344828deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(26) {
  transform: rotate(310.3448275862deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(27) {
  transform: rotate(322.7586206897deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(28) {
  transform: rotate(335.1724137931deg);
}
.element .model .orbital .electron:nth-last-child(29):first-child ~ .electron:nth-child(29) {
  transform: rotate(347.5862068966deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(2) {
  transform: rotate(12deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(3) {
  transform: rotate(24deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(4) {
  transform: rotate(36deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(5) {
  transform: rotate(48deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(6) {
  transform: rotate(60deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(7) {
  transform: rotate(72deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(8) {
  transform: rotate(84deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(9) {
  transform: rotate(96deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(10) {
  transform: rotate(108deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(11) {
  transform: rotate(120deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(12) {
  transform: rotate(132deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(13) {
  transform: rotate(144deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(14) {
  transform: rotate(156deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(15) {
  transform: rotate(168deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(16) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(17) {
  transform: rotate(192deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(18) {
  transform: rotate(204deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(19) {
  transform: rotate(216deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(20) {
  transform: rotate(228deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(21) {
  transform: rotate(240deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(22) {
  transform: rotate(252deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(23) {
  transform: rotate(264deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(24) {
  transform: rotate(276deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(25) {
  transform: rotate(288deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(26) {
  transform: rotate(300deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(27) {
  transform: rotate(312deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(28) {
  transform: rotate(324deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(29) {
  transform: rotate(336deg);
}
.element .model .orbital .electron:nth-last-child(30):first-child ~ .electron:nth-child(30) {
  transform: rotate(348deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(2) {
  transform: rotate(11.6129032258deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(3) {
  transform: rotate(23.2258064516deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(4) {
  transform: rotate(34.8387096774deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(5) {
  transform: rotate(46.4516129032deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(6) {
  transform: rotate(58.064516129deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(7) {
  transform: rotate(69.6774193548deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(8) {
  transform: rotate(81.2903225806deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(9) {
  transform: rotate(92.9032258065deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(10) {
  transform: rotate(104.5161290323deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(11) {
  transform: rotate(116.1290322581deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(12) {
  transform: rotate(127.7419354839deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(13) {
  transform: rotate(139.3548387097deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(14) {
  transform: rotate(150.9677419355deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(15) {
  transform: rotate(162.5806451613deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(16) {
  transform: rotate(174.1935483871deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(17) {
  transform: rotate(185.8064516129deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(18) {
  transform: rotate(197.4193548387deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(19) {
  transform: rotate(209.0322580645deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(20) {
  transform: rotate(220.6451612903deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(21) {
  transform: rotate(232.2580645161deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(22) {
  transform: rotate(243.8709677419deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(23) {
  transform: rotate(255.4838709677deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(24) {
  transform: rotate(267.0967741935deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(25) {
  transform: rotate(278.7096774194deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(26) {
  transform: rotate(290.3225806452deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(27) {
  transform: rotate(301.935483871deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(28) {
  transform: rotate(313.5483870968deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(29) {
  transform: rotate(325.1612903226deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(30) {
  transform: rotate(336.7741935484deg);
}
.element .model .orbital .electron:nth-last-child(31):first-child ~ .electron:nth-child(31) {
  transform: rotate(348.3870967742deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(1) {
  transform: rotate(0deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(2) {
  transform: rotate(11.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(3) {
  transform: rotate(22.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(4) {
  transform: rotate(33.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(5) {
  transform: rotate(45deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(6) {
  transform: rotate(56.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(7) {
  transform: rotate(67.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(8) {
  transform: rotate(78.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(9) {
  transform: rotate(90deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(10) {
  transform: rotate(101.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(11) {
  transform: rotate(112.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(12) {
  transform: rotate(123.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(13) {
  transform: rotate(135deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(14) {
  transform: rotate(146.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(15) {
  transform: rotate(157.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(16) {
  transform: rotate(168.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(17) {
  transform: rotate(180deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(18) {
  transform: rotate(191.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(19) {
  transform: rotate(202.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(20) {
  transform: rotate(213.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(21) {
  transform: rotate(225deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(22) {
  transform: rotate(236.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(23) {
  transform: rotate(247.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(24) {
  transform: rotate(258.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(25) {
  transform: rotate(270deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(26) {
  transform: rotate(281.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(27) {
  transform: rotate(292.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(28) {
  transform: rotate(303.75deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(29) {
  transform: rotate(315deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(30) {
  transform: rotate(326.25deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(31) {
  transform: rotate(337.5deg);
}
.element .model .orbital .electron:nth-last-child(32):first-child ~ .electron:nth-child(32) {
  transform: rotate(348.75deg);
}
.element input[type="radio"] {
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  outline: none;
}
.element input[type="radio"].activate:hover ~ .square {
  z-index: 2;
  transform: scale(1.35);
  transition-delay: 0ms;
  outline: none;
  pointer-events: none;
}
.element input[type="radio"].activate:checked + input[type="radio"].deactivate {
  z-index: 3;
  pointer-events: all;
}
.element input[type="radio"].activate:checked ~ .overlay {
  opacity: 0.75;
}
.element input[type="radio"].activate:checked ~ .square {
  z-index: 3;
  transform: scale(3);
  transition-duration: 500ms, 0ms, 200ms, 200ms, 200ms, 200ms;
  transition-delay: 0ms;
  outline: none;
  cursor: auto;
}
.element input[type="radio"].activate:checked ~ .square .label {
  transition-duration: 500ms;
  transform: scale(0.75);
}
.element input[type="radio"].activate:checked ~ .square .atomic-weight {
  opacity: 1;
  transition: 500ms;
}
.element input[type="radio"].activate:checked ~ .square .model {
  display: block;
  animation: fade-in;
  animation-duration: 1s;
}
.element input[type="radio"].activate:checked ~ .square .orbital {
  animation-name: rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.element input[type="radio"].deactivate {
  position: fixed;
  display: block;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.element input[type="radio"].deactivate:checked ~ .square {
  z-index: 1;
}

.placeholder {
  position: relative;
  z-index: -1;
  font-size: 1vw;
  padding-bottom: 100%;
  color: #fff;
  transition: 500ms;
}
.placeholder .square {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}

.gap {
  position: relative;
  padding-bottom: 100%;
  transition: 500ms;
}
.gap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: calc(200% + 5px * 2 - 4px);
  border-width: 0 0 2px 2px;
  border-style: solid;
  margin-left: -1px;
  color: #fff;
  opacity: 0.2;
}

.alkali-metal {
  color: #ecbe59;
}

.alkaline-earth-metal {
  color: #dee955;
}

.lanthanoid {
  color: #ec77a3;
}

.actinoid {
  color: #c686cc;
}

.transition-metal {
  color: #fd8572;
}

.post-transition-metal {
  color: #4cddf3;
}

.metalloid {
  color: #3aefb6;
}

.other-nonmetal {
  color: #52ee61;
}

.noble-gas {
  color: #759fff;
}

.unknown {
  color: #cccccc;
}

.r1 {
  grid-row: 1;
}

.r2 {
  grid-row: 2;
}

.r3 {
  grid-row: 3;
}

.r4 {
  grid-row: 4;
}

.r5 {
  grid-row: 5;
}

.r6 {
  grid-row: 6;
}

.r7 {
  grid-row: 7;
}

.r8 {
  grid-row: 8;
}

.r9 {
  grid-row: 9;
}

.r10 {
  grid-row: 10;
}

.c1 {
  grid-column: 1;
}

.c2 {
  grid-column: 2;
}

.c3 {
  grid-column: 3;
}

.c4 {
  grid-column: 4;
}

.c5 {
  grid-column: 5;
}

.c6 {
  grid-column: 6;
}

.c7 {
  grid-column: 7;
}

.c8 {
  grid-column: 8;
}

.c9 {
  grid-column: 9;
}

.c10 {
  grid-column: 10;
}

.c11 {
  grid-column: 11;
}

.c12 {
  grid-column: 12;
}

.c13 {
  grid-column: 13;
}

.c14 {
  grid-column: 14;
}

.c15 {
  grid-column: 15;
}

.c16 {
  grid-column: 16;
}

.c17 {
  grid-column: 17;
}

.c18 {
  grid-column: 18;
}

.r1 input[type="radio"].activate:checked ~ .square {
  top: 100%;
}

.r10 input[type="radio"].activate:checked ~ .square {
  top: -100%;
}

.c1 input[type="radio"].activate:checked ~ .square {
  left: 100%;
}

.c18 input[type="radio"].activate:checked ~ .square {
  left: -100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes noise {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0% 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}
.key {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column-start: 3;
  grid-column-end: 17;
  font-size: 0.8vw;
  line-height: 1.5;
  display: flex;
  align-items: center;
  pointer-events: none;
  user-select: none;
}
.key .row {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.key .row label {
  opacity: 0.85;
  cursor: pointer;
  transition: 120ms;
  pointer-events: all;
}
.key .row label:hover {
  opacity: 1 !important;
}

#alkali-metals:checked ~ .periodic-table .element:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .element:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .element:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .element:not(.actinoid),
#transition-metals:checked ~ .periodic-table .element:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .element:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .element:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .element:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .element:not(.noble-gas),
#unknown:checked ~ .periodic-table .element:not(.unknown),
#alkali-metals:checked ~ .periodic-table .placeholder,
#alkaline-earth-metals:checked ~ .periodic-table .placeholder,
#lanthanoids:checked ~ .periodic-table .placeholder:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .placeholder:not(.actinoid),
#transition-metals:checked ~ .periodic-table .placeholder,
#post-transition-metals:checked ~ .periodic-table .placeholder,
#metalloids:checked ~ .periodic-table .placeholder,
#other-nonmetals:checked ~ .periodic-table .placeholder,
#noble-gasses:checked ~ .periodic-table .placeholder,
#unknown:checked ~ .periodic-table .placeholder {
  opacity: 0.15;
  pointer-events: none;
}

#alkali-metals:checked ~ .periodic-table .key label:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .key label:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .key label:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .key label:not(.actinoid),
#transition-metals:checked ~ .periodic-table .key label:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .key label:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .key label:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .key label:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .key label:not(.noble-gas),
#unknown:checked ~ .periodic-table .key label:not(.unknown) {
  opacity: 0.65;
}

.category-toggle:not(#lanthanoids):not(#actinoids):checked ~ .periodic-table .gap {
  opacity: 0.5;
}

.category-toggle:checked ~ .category-cancel {
  visibility: visible;
  pointer-events: all;
  cursor: pointer;
}
/* ============================================================
   HUMAN LIFE — TRIGGER LOGO
   ============================================================ */
.human-life-trigger {
  /* Sits as a grid item in the empty central area of the periodic table.
     The table is a 18-column grid; this spans rows 2-3 and columns 7-8,
     filling the natural gap between the s-block (left) and p-block (right). */
  position: relative;
  grid-row: 2 / 4;
  grid-column: 7 / 9;
  z-index: 1;  /* below activated elements (z-index 3) so they pop in front when clicked */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #101318;
  border: 2px solid;
  border-image: linear-gradient(135deg, #ecbe59, #fd8572, #ec77a3, #c686cc, #759fff, #4cddf3, #3aefb6, #52ee61) 1;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 280ms cubic-bezier(.2,.9,.25,1.15), box-shadow 400ms;
  box-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 20px rgba(120, 200, 255, 0.15) inset;
  animation: hl-pulse 3.6s ease-in-out infinite;
}
.human-life-trigger::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg,
    rgba(236,190,89,0.55),
    rgba(253,133,114,0.55),
    rgba(236,119,163,0.55),
    rgba(198,134,204,0.55),
    rgba(117,159,255,0.55),
    rgba(76,221,243,0.55),
    rgba(58,239,182,0.55),
    rgba(82,238,97,0.55));
  background-size: 300% 300%;
  filter: blur(14px);
  opacity: 0.45;
  z-index: -1;
  animation: hl-rainbow 8s linear infinite;
}
.human-life-trigger:hover,
.human-life-trigger:focus-visible {
  transform: scale(1.06);
  box-shadow:
    0 0 30px rgba(255,255,255,0.15),
    0 0 60px rgba(120, 200, 255, 0.25);
}
.human-life-trigger:active { transform: scale(0.97); }
.hl-corner-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: clamp(10px, 0.85vw, 14px);
  letter-spacing: 0.05em;
  opacity: 0.85;
  text-shadow: 0 0 6px currentColor;
}
.hl-mass {
  /* Hidden — the centered HUMAN LIFE label is the primary subscript here.
     Kept in the DOM for accessibility/screen readers; if you want it back,
     remove `display:none` and reposition (e.g. as the atomic-mass slot). */
  display: none;
}
.hl-helix {
  display: block;
  width: 60%;
  margin-top: 4%;
  color: #4cddf3;
  /* `lighten` blend mode keeps only the brighter pixels of the atom image
     (the colored sphere and electrons), letting the black background
     of the source image disappear into the trigger's dark background.
     Result: no visible square edge around the image. */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 6px rgba(253, 133, 114, 0.3));
  animation: hl-atom-glow 4s ease-in-out infinite;
  line-height: 0;
}

/* ------------------------------------------------------------
   CUTE DECORATIVE CELL
   Sits in the empty grid area immediately right of the Hu trigger.
   Same 2×2 footprint as Hu (rows 2-3, cols 9-10), same visual
   styling (rainbow gradient border, dark backdrop) but no click
   behavior. Pure ambient decoration.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   CUTE DECORATIVE CELL
   Sits in the empty grid area immediately right of the Hu trigger.
   Same 2×2 footprint as Hu (rows 2-3, cols 9-10), but no box —
   just the video floating against the page background. The black
   background of the source video is hidden via `mix-blend-mode:
   lighten` so only the character is visible.
   ------------------------------------------------------------ */
.cute-cell {
  position: relative;
  grid-row: 2 / 4;
  grid-column: 9 / 11;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cute-cell__media {
  /* Use `contain` (not `cover`) so the portrait video isn't cropped —
     since there's no box around it, letterboxing is invisible (the
     dark "bars" are just the page background showing through). */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Hide the video's black background — only the character pixels
     show against the dark page background. */
  mix-blend-mode: lighten;
  pointer-events: none;
  outline: none;
}
.hl-atom-media {
  display: block;
  width: 100%;
  height: auto;
  /* Hide native video controls/UI completely */
  pointer-events: none;
  outline: none;
}
/* Keep legacy svg rule in case the SVG version is restored */
.hl-helix svg { display: block; width: 100%; height: auto; }
.hl-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6%;
  line-height: 1.05;
}
.hl-symbol {
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 600;
  background: linear-gradient(90deg, #ecbe59, #fd8572, #ec77a3, #c686cc, #759fff, #4cddf3, #3aefb6, #52ee61);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: hl-rainbow 5s linear infinite;
  letter-spacing: 0.01em;
}
.hl-name {
  font-size: clamp(9px, 0.85vw, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 5px;
}

@keyframes hl-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0), 0 0 20px rgba(120, 200, 255, 0.15) inset; }
  50% { box-shadow: 0 0 24px rgba(255,255,255,0.10), 0 0 30px rgba(120, 200, 255, 0.3) inset; }
}
@keyframes hl-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes hl-atom-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(253, 133, 114, 0.3)); }
  50%      { filter: drop-shadow(0 0 10px rgba(253, 133, 114, 0.5)); }
}

/* ============================================================
   HUMAN STAGE — REVEAL OVERLAY
   ============================================================ */
.human-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  color: #fff;
  font-size: 14px;
  overflow: hidden;
}
.human-stage.is-open {
  opacity: 1;
  pointer-events: auto;
}
.human-stage__bg {
  position: absolute;
  inset: 0;
  /* Originally had a brighter blue center (rgba(20,30,50,0.85)) that gave
     a subtle "deep space" gradient. But the bright center conflicted with
     the cute video's mix-blend-mode: lighten on Safari (which falls back
     to the non-alpha MP4), producing a visible dark rectangle around the
     character. The gradient is now near-uniform dark — visually similar
     but predictable behind blend-mode content. */
  background:
    radial-gradient(ellipse at 50% 45%, rgba(16,19,24,0.97) 0%, #101318 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.human-stage__close {
  position: absolute;
  top: 1.6vh;
  right: 1.6vw;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 180ms;
  outline: none;
}
.human-stage__close:hover { background: rgba(255,255,255,0.12); transform: rotate(90deg); border-color: rgba(255,255,255,0.5); }

.human-stage__title {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: opacity 700ms 300ms, transform 700ms 300ms;
}
.human-stage.is-open .human-stage__title { opacity: 1; transform: translate(-50%, 0); }
.title-pre {
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  opacity: 0.6;
}
.title-main {
  font-size: clamp(28px, 4.5vw, 64px);
  letter-spacing: 0.12em;
  font-weight: 200;
  background: linear-gradient(90deg, #ecbe59, #fd8572, #ec77a3, #759fff, #4cddf3, #52ee61);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: hl-rainbow 8s linear infinite;
  line-height: 1;
}
.title-sub {
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 0.6;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Central silhouette */
.human-figure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 28vh, 360px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms 200ms;
}
.human-stage.is-open .human-figure { opacity: 1; }
/* The cute-figure is mobile-only; default-hidden so it doesn't show
   on desktop / tablet. Enabled in the @media (max-width: 560px) block. */
.cute-figure { display: none; }
.silhouette { width: 100%; height: auto; filter: drop-shadow(0 0 25px rgba(120, 200, 255, 0.25)); }
.silhouette__body {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: draw-body 2.2s ease forwards 250ms;
}
.silhouette__heart {
  transform-origin: center;
  filter: drop-shadow(0 0 6px #fd8572);
  animation: heartbeat 1.05s ease-in-out infinite 1.4s;
}
.figure-label {
  font-size: 9px;
  letter-spacing: 0.4em;
  opacity: 0.5;
  margin-top: 8px;
  text-transform: uppercase;
}
@keyframes draw-body { to { stroke-dashoffset: 0; } }
@keyframes heartbeat {
  0%, 60%, 100% { transform: scale(1); opacity: 0.9; }
  20% { transform: scale(1.7); opacity: 1; }
  35% { transform: scale(1); opacity: 0.7; }
}

/* Orbiting element bubbles */
.human-orbits {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.orbit-element {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #101318;
  border: 2px solid currentColor;
  box-sizing: border-box;
  text-shadow: 0 0 0.4vw currentColor;
  box-shadow: 0 0 12px rgba(0,0,0,0.6), 0 0 18px currentColor;
  border-radius: 6px;
  opacity: 0;
  transform: scale(0.4);
  transition: left 1100ms cubic-bezier(.2,.9,.25,1),
              top 1100ms cubic-bezier(.2,.9,.25,1),
              width 900ms cubic-bezier(.2,.9,.25,1),
              height 900ms cubic-bezier(.2,.9,.25,1),
              opacity 600ms,
              transform 900ms cubic-bezier(.2,.9,.25,1.2);
  cursor: default;
  pointer-events: auto;
  will-change: left, top, transform;
}
.orbit-element.is-revealed { opacity: 1; transform: scale(1); }
.orbit-element.is-orbiting { animation: orbit-float 6s ease-in-out infinite; }
.orbit-element .oe-num {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 8px;
  opacity: 0.8;
}
.orbit-element .oe-sym { font-weight: 500; letter-spacing: 0.02em; }
.orbit-element .oe-name {
  font-size: 9px;
  opacity: 0.85;
  letter-spacing: 0.05em;
  margin-top: 2px;
  text-transform: uppercase;
}
.orbit-element .oe-pct {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 7px;
  opacity: 0.75;
}
.orbit-element.tier-major .oe-sym { font-size: clamp(20px, 2.2vw, 32px); }
.orbit-element.tier-minor .oe-sym { font-size: clamp(16px, 1.6vw, 24px); }
.orbit-element.tier-trace .oe-sym { font-size: clamp(12px, 1.2vw, 18px); }
.orbit-element.tier-trace .oe-name { display: none; }
.orbit-element.tier-trace .oe-num { font-size: 7px; }

@keyframes orbit-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -6px); }
}

/* ------------------------------------------------------------
   Hu atom diagram (mirrors element-click visualization)
   Lives in the left empty area of the human-stage overlay.
   6 electrons = 6 major life-elements (O, C, H, N, Ca, P)
   Each electron on its own concentric ring — same pattern as
   the original .element .model .orbital:nth-child rules.
   ------------------------------------------------------------ */
.hu-atom {
  position: absolute;
  top: 14vh;
  left: 2.5vw;
  transform: translateX(-20px);
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 1;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 800ms 800ms, transform 800ms 800ms;
  pointer-events: none;
}
.human-stage.is-open .hu-atom {
  opacity: 1;
  transform: translateX(0);
}
.hu-atom__rings {
  position: absolute;
  inset: 0;
}
.hu-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(120, 200, 255, 0.30);
  border-radius: 50%;
  animation: hu-rotate linear infinite;
  transform-origin: center center;
}
/* Concentric rings at 6 different radii, each spinning at a different speed.
   Matches the inset/animation-duration pattern from the original .element .model. */
.hu-orbit--1 { margin: 8%;  animation-duration: 26s; }
.hu-orbit--2 { margin: 14%; animation-duration: 21s; animation-direction: reverse; }
.hu-orbit--3 { margin: 20%; animation-duration: 17s; }
.hu-orbit--4 { margin: 26%; animation-duration: 13s; animation-direction: reverse; }
.hu-orbit--5 { margin: 32%; animation-duration: 10s; }
.hu-orbit--6 { margin: 38%; animation-duration: 6s;  animation-direction: reverse; }

.hu-electron {
  position: absolute;
  top: -8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
  opacity: 0.9;
}
.hu-electron::after {
  /* Element symbol label that floats outside each electron.
     Counter-rotates so it stays upright while the parent orbit spins. */
  content: var(--sym);
  position: absolute;
  top: -18px;
  left: 50%;
  font-size: clamp(9px, 0.75vw, 12px);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 6px currentColor;
  opacity: 0.95;
  white-space: nowrap;
  animation: hu-rotate-counter linear infinite;
  animation-duration: inherit;
  animation-direction: inherit;
}
/* Counter-rotate each electron's label so it stays upright as the parent orbit spins. */
.hu-orbit--1 .hu-electron::after { animation-duration: 26s; }
.hu-orbit--2 .hu-electron::after { animation-duration: 21s; }
.hu-orbit--3 .hu-electron::after { animation-duration: 17s; }
.hu-orbit--4 .hu-electron::after { animation-duration: 13s; }
.hu-orbit--5 .hu-electron::after { animation-duration: 10s; }
.hu-orbit--6 .hu-electron::after { animation-duration: 6s;  }

.hu-atom__nucleus {
  position: relative;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(120, 200, 255, 0.40),
    rgba(76, 221, 243, 0.20) 45%,
    rgba(16, 19, 24, 0.92) 80%);
  border: 1px solid rgba(120, 200, 255, 0.45);
  box-shadow:
    0 0 30px rgba(120, 200, 255, 0.30),
    0 0 60px rgba(120, 200, 255, 0.12),
    inset 0 0 14px rgba(120, 200, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.hu-atom__count {
  position: absolute;
  top: 10%;
  left: 14%;
  font-size: clamp(10px, 0.9vw, 14px);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
}
.hu-atom__symbol {
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 500;
  background: linear-gradient(90deg, #ecbe59, #fd8572, #ec77a3, #759fff, #4cddf3, #52ee61);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: hl-rainbow 6s linear infinite;
  letter-spacing: 0.02em;
  line-height: 1;
}
.hu-atom__label {
  font-size: clamp(7px, 0.55vw, 9px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  text-align: center;
}

@keyframes hu-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hu-rotate-counter {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(-360deg); }
}

/* ------------------------------------------------------------
   Hu prompt panel (password gate + chat input)
   Sits under the Hu atom in the left area of the stage.
   ------------------------------------------------------------ */
.hu-prompt {
  position: absolute;
  /* Below the Hu atom (which ends at roughly 14vh + 20vw on desktop).
     Using a calc that scales with viewport width. */
  top: calc(14vh + clamp(200px, 20vw, 300px) + 16px);
  left: 2.5vw;
  transform: translateX(-20px);
  width: clamp(220px, 22vw, 340px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity 700ms 1100ms, transform 700ms 1100ms;
  pointer-events: none;
}
.human-stage.is-open .hu-prompt {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.hu-prompt__label {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-left: 2px;
}
.hu-prompt__form {
  display: flex;
  align-items: stretch;
  background: rgba(16,19,24,0.75);
  border: 1px solid rgba(120, 200, 255, 0.35);
  box-shadow:
    0 0 16px rgba(120, 200, 255, 0.12),
    inset 0 0 12px rgba(120, 200, 255, 0.06);
  transition: border-color 250ms, box-shadow 250ms;
}
.hu-prompt__form:focus-within {
  border-color: rgba(120, 200, 255, 0.7);
  box-shadow:
    0 0 24px rgba(120, 200, 255, 0.25),
    inset 0 0 14px rgba(120, 200, 255, 0.10);
}
/* Unlocked state: shift the border to a warm color so it's visually different. */
.hu-prompt.is-unlocked .hu-prompt__form {
  border-color: rgba(82, 238, 97, 0.45);
  box-shadow:
    0 0 18px rgba(82, 238, 97, 0.18),
    inset 0 0 12px rgba(82, 238, 97, 0.06);
}
.hu-prompt.is-unlocked .hu-prompt__form:focus-within {
  border-color: rgba(82, 238, 97, 0.85);
  box-shadow:
    0 0 26px rgba(82, 238, 97, 0.32),
    inset 0 0 14px rgba(82, 238, 97, 0.12);
}
.hu-prompt__input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  letter-spacing: 0.02em;
  min-width: 0;   /* allow flex shrink */
}
.hu-prompt__input::placeholder {
  color: rgba(255,255,255,0.32);
  font-style: italic;
  letter-spacing: 0.04em;
}
.hu-prompt__submit {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
  color: rgba(120, 200, 255, 0.85);
  cursor: pointer;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms, background 180ms;
  outline: none;
}
.hu-prompt__submit:hover,
.hu-prompt__submit:focus-visible {
  background: rgba(120, 200, 255, 0.08);
  color: #4cddf3;
}
.hu-prompt.is-unlocked .hu-prompt__submit { color: rgba(82, 238, 97, 0.85); }
.hu-prompt.is-unlocked .hu-prompt__submit:hover,
.hu-prompt.is-unlocked .hu-prompt__submit:focus-visible {
  background: rgba(82, 238, 97, 0.08);
  color: #52ee61;
}
.hu-prompt__submit:disabled {
  opacity: 0.4;
  cursor: wait;
}
.hu-prompt__submit.is-loading svg { animation: hu-spin 0.9s linear infinite; }
.hu-prompt__status {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
  min-height: 14px;
  padding-left: 2px;
}
.hu-prompt__status.is-error { color: #ff8580; }
.hu-prompt__status.is-success { color: #52ee61; }

@keyframes hu-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Wrong-password shake feedback */
.hu-prompt.is-shake .hu-prompt__form {
  animation: hu-shake 0.4s ease;
  border-color: rgba(255, 133, 128, 0.7) !important;
  box-shadow:
    0 0 22px rgba(255, 133, 128, 0.25),
    inset 0 0 12px rgba(255, 133, 128, 0.10) !important;
}
@keyframes hu-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* ------------------------------------------------------------
   Response panel (inline, below the prompt)
   Grok reply appears in this panel directly under the prompt.
   ------------------------------------------------------------ */
.hu-response {
  position: absolute;
  /* Sits below the prompt. Prompt is at calc(14vh + atom-size + 16px),
     plus ~88px for its label/input/status, plus a gap. */
  top: calc(14vh + clamp(200px, 20vw, 300px) + 16px + 88px + 16px);
  left: 2.5vw;
  /* Reach down to a comfortable margin from the bottom of the viewport */
  bottom: 2vh;
  width: clamp(240px, 24vw, 360px);
  z-index: 3;
  transform: translateX(-20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
  display: flex;
  flex-direction: column;
}
.hu-response.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.hu-response__card {
  position: relative;
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(18,22,32,0.92) 0%, rgba(13,16,22,0.92) 100%);
  border: 1px solid rgba(120, 200, 255, 0.30);
  box-shadow:
    0 0 24px rgba(120, 200, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 14px 16px 12px;
  color: #fff;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;   /* allow flex children to shrink */
}
.hu-response__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 180ms;
  z-index: 2;
}
.hu-response__close:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  transform: rotate(90deg);
}
.hu-response__close svg { width: 12px; height: 12px; }
/* Expand/minimize button. Sits to the left of the close button. */
.hu-response__expand {
  position: absolute;
  top: 6px;
  right: 38px;   /* sit just left of the close button (which is at right:6px width:24px) */
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 180ms;
  z-index: 2;
}
.hu-response__expand:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.hu-response__expand svg { width: 12px; height: 12px; }
.hu-response__expand .icon-expand    { display: block; }
.hu-response__expand .icon-minimize  { display: none; }
.hu-response.is-expanded .hu-response__expand .icon-expand   { display: none; }
.hu-response.is-expanded .hu-response__expand .icon-minimize { display: block; }

/* Expanded state: overrides the inline absolute-positioning to become
   a centered full-screen-ish modal that floats above the stage. */
.hu-response.is-expanded {
  /* Override the left-column positioning */
  position: fixed !important;
  inset: 6vh 8vw !important;
  top: 6vh !important;
  bottom: 6vh !important;
  left: 8vw !important;
  right: 8vw !important;
  width: auto !important;
  max-width: 720px;
  margin: 0 auto;
  z-index: 200;
  /* Re-enable centering even at large widths */
  transform: translateX(0) !important;
}
.hu-response.is-expanded .hu-response__card {
  padding: 28px 30px 26px;
  font-size: 15px;
  border-width: 1.5px;
  border-color: rgba(120, 200, 255, 0.5);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(120, 200, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hu-response.is-expanded .hu-response__title    { font-size: 13px; letter-spacing: 0.32em; }
.hu-response.is-expanded .hu-response__sub      { font-size: 11px; }
.hu-response.is-expanded .hu-response__question { font-size: 14px; padding-left: 14px; }
.hu-response.is-expanded .hu-response__body     { font-size: 15px; line-height: 1.6; }
.hu-response.is-expanded .hu-response__close,
.hu-response.is-expanded .hu-response__expand {
  width: 30px;
  height: 30px;
}
.hu-response.is-expanded .hu-response__expand { right: 46px; }
.hu-response.is-expanded .hu-response__close svg,
.hu-response.is-expanded .hu-response__expand svg { width: 14px; height: 14px; }

/* Dark backdrop behind the expanded panel */
.hu-response__expanded-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.hu-response__expanded-bg.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.hu-response__header { padding-top: 4px; padding-right: 70px; }   /* room for 2 buttons */

.hu-response__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 8px;
  padding-right: 28px;   /* room for close button */
}
.hu-response__title {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hu-response__sub {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.hu-response__sub em {
  color: rgba(120, 200, 255, 0.8);
  font-style: normal;
}
.hu-response__question {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  letter-spacing: 0.01em;
  border-left: 2px solid rgba(120, 200, 255, 0.45);
  padding-left: 10px;
  flex-shrink: 0;
}
.hu-response__body {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  white-space: pre-wrap;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}
.hu-response__body.is-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.hu-response__body.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(120, 200, 255, 0.3);
  border-top-color: #4cddf3;
  border-radius: 50%;
  animation: hu-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.hu-response__again {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(120, 200, 255, 0.4);
  color: rgba(120, 200, 255, 0.9);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: 180ms;
  flex-shrink: 0;
}
.hu-response__again:hover {
  background: rgba(120, 200, 255, 0.1);
  border-color: rgba(120, 200, 255, 0.7);
  color: #4cddf3;
}
/* Custom scrollbar for the response body */
.hu-response__body::-webkit-scrollbar { width: 6px; }
.hu-response__body::-webkit-scrollbar-track { background: transparent; }
.hu-response__body::-webkit-scrollbar-thumb {
  background: rgba(120, 200, 255, 0.25);
  border-radius: 3px;
}
.hu-response__body::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 200, 255, 0.4);
}

/* Composition data panel */
.composition-panel {
  position: absolute;
  top: 50%;
  right: 2.5vw;
  transform: translate(20px, -50%);
  width: clamp(240px, 22vw, 320px);
  z-index: 3;
  background: rgba(16,19,24,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 18px 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 700ms 1200ms, transform 700ms 1200ms;
}
.human-stage.is-open .composition-panel { opacity: 1; transform: translate(0, -50%); }
.composition-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}
.cp-title { font-size: 11px; letter-spacing: 0.25em; opacity: 0.95; }
.cp-sub { font-size: 9px; opacity: 0.5; letter-spacing: 0.1em; text-transform: uppercase; }
.composition-list { list-style: none; padding: 0; margin: 0; }
.composition-list li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  padding: 5px 0;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.composition-list li:last-child { border-bottom: 0; }
.composition-list .cl-sym { font-weight: 600; text-shadow: 0 0 6px currentColor; }
.composition-list .cl-name { opacity: 0.85; letter-spacing: 0.04em; }
.composition-list .cl-pct { opacity: 0.85; font-variant-numeric: tabular-nums; }
.composition-panel__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: center;
}

/* Source highlight on table elements when stage is open */
.element.is-body-source .square {
  box-shadow: 0 0 20px currentColor;
}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE
   ============================================================ */
@media (max-width: 1100px) {
  .wrapper {
    width: 94%;
    margin-left: 3%;
    margin-top: 2%;
    padding: 1.5%;
  }
  .element { font-size: 0.7vw; }
  .element .symbol { font-size: 2vw; }
  .element .name { font-size: 0.8vw; }
  .key { font-size: 1vw; }
  /* Trigger is a grid item — it scales with the table automatically.
     Only its internal text needs adjustment at smaller sizes. */
  .hl-symbol { font-size: clamp(22px, 2.4vw, 36px); }
  .hl-name { font-size: clamp(7px, 0.7vw, 10px); }
  .hl-corner-num { font-size: clamp(8px, 0.7vw, 11px); }
  .hl-mass { font-size: clamp(7px, 0.6vw, 10px); }
}

/* ============================================================
   SHORT VIEWPORT (landscape phones, low-height windows)
   When the viewport is short (≤ 600px tall), the desktop
   activate-and-scale(3) animation overflows the screen.
   Reduce scale, center the activated cell, and pin the orbital
   model so it doesn't spill outside the viewport.
   This kicks in for: landscape phones (~430px tall), small
   browser windows with reduced height, etc. The width-based
   mobile breakpoint (≤560px wide) STILL takes precedence
   for portrait phones, which is what we want.
   ============================================================ */
@media (max-height: 600px) and (min-width: 561px) {
  /* Shrink the scale-up so the activated box fits in viewport height.
     scale(1.8) instead of scale(3): still clearly highlighted but won't
     overflow above/below or run off the page at the corners.
     The orbital model auto-shrinks too because its base transform is
     scale(0.1) and it multiplies through the parent's scale — so at
     scale(1.8) parent × 0.1 base = 0.18 effective vs desktop's 0.30. */
  .element input[type="radio"].activate:checked ~ .square {
    transform: scale(1.8);
  }
  .element input[type="radio"].activate:checked ~ .square .label {
    transform: scale(0.85);
  }
  /* The atomic-weight (shell counts list "1" "2" "8"...) sits beside
     the model; clamp its size so it stays within the cell footprint. */
  .element input[type="radio"].activate:checked ~ .square .atomic-weight {
    font-size: 8px;
  }

  /* Category menu pill tap targets — prevent text wrapping and give
     each pill enough hit area for a thumb on landscape phones.
     The default flex `justify-content: space-between` packs them
     tightly; we let them wrap onto multiple lines if needed and add
     a bit of vertical padding for tappability. */
  .key .row {
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: center;
  }
  .key .row label {
    white-space: nowrap;
    padding: 4px 6px;
    /* Visual feedback when tapped */
    border-radius: 4px;
    -webkit-tap-highlight-color: rgba(120, 200, 255, 0.2);
  }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .wrapper {
    width: 100%;
    margin: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    /* No more horizontal scroll — let the table shrink to fit. */
    overflow: visible;
    max-width: none;   /* override the desktop height-cap */
  }
  .periodic-table {
    /* Fill viewport width; each element cell scales down proportionally */
    width: 100%;
    grid-gap: 2px;
  }
  /* Scale element text down so the 18 columns fit phone width.
     `vw` units make every cell readable but never overflow. */
  .element { font-size: 1.1vw; }
  .element .symbol { font-size: 2.4vw; line-height: 1; }
  .element .name { display: none; }   /* hide names so cells stay square-ish */
  .element .atomic-number { font-size: 1.4vw; padding: 1px 2px; }
  .element .atomic-mass { display: none; }
  .key { font-size: 1.2vw; padding-top: 8px; }
  .key .row { flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
  .key .row label { font-size: 1.2vw; }
  .placeholder { font-size: 1.4vw; }
  /* Trigger scales with the table grid. Tune internal text for the smaller cell. */
  .hl-symbol { font-size: 3.5vw; }
  .hl-name { font-size: 1.1vw; letter-spacing: 0.05em; margin-top: 1px; }
  .hl-corner-num { font-size: 1.2vw; top: 2px; left: 3px; }
  .hl-helix { width: 30%; margin-top: 6%; }
  /* Stage overlay on mobile: stack everything vertically.
     Title at top, figure in center, prompt + composition stacked below. */
  .composition-panel {
    right: 12px;
    width: min(72vw, 280px);
  }
  .human-stage__title { top: 14px; }
  .title-main { font-size: 28px; }
  .title-pre, .title-sub { font-size: 9px; letter-spacing: 0.25em; }
}

/* ============================================================
   PHONE (≤560px)
   Tighter scaling, prompt visible below the body figure.
   ============================================================ */
@media (max-width: 560px) {
  /* ===========================================================
     MOBILE: vertical category-grouped layout.
     Replaces the 18-column periodic-table grid with a flex
     column where elements are grouped by category via `order:`.
     =========================================================== */
  .wrapper {
    padding: 12px 12px 100px;   /* bottom space for stage trigger */
  }
  .periodic-table {
    /* Switch from CSS grid to flex; the wrapper becomes a vertical scroll */
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  /* Disable the explicit grid placement classes (c1/r1, c18/r1, etc.) — they
     reference grid-row/grid-column which is now irrelevant. We'll use flex
     order instead. */
  .element { grid-area: unset !important; }

  /* Hide the placeholder lanthanide/actinide pointer cells AND the L-shaped
     gap pointer line — these are visual cues for the desktop "this row is
     shown below" trick and don't make sense in a stacked layout. */
  .element.placeholder,
  .placeholder,
  .gap { display: none !important; }

  /* Make each element a horizontal card instead of a square tile.
     Override the padding-bottom: 100% trick that forces square aspect. */
  .element {
    padding-bottom: 0;
    height: auto;
    width: 100%;
    cursor: pointer;
    font-size: inherit;
  }
  .element .square {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 10px 14px 10px 12px;
    background: rgba(16,19,24,0.55);
    border: 1.5px solid;        /* color inherited from category class */
    border-radius: 8px;
    box-shadow: 0 0 12px currentColor;
    text-shadow: 0 0 6px currentColor;
    transition: background 200ms;
    min-height: 56px;
  }
  .element .square:hover,
  .element .square:active {
    background: rgba(16,19,24,0.85);
  }
  /* Atomic number sits in the top-left of the symbol column */
  .element .atomic-number {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    padding: 0;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    z-index: 2;
  }
  /* Symbol: large, in the first column */
  .element .symbol {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    align-self: center;
    color: inherit;
  }
  /* Name: large readable, in the second column row 1 */
  .element .label {
    display: contents;
  }
  .element .name {
    display: block;
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    text-align: left;
    align-self: end;
    letter-spacing: 0.02em;
  }
  /* Atomic mass: secondary, below the name */
  .element .atomic-mass {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    text-align: left;
    align-self: start;
    padding: 0;
  }
  /* Right-side hint: tap to expand */
  .element .square::after {
    content: "›";
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 24px;
    color: rgba(255,255,255,0.4);
    align-self: center;
    padding-left: 4px;
  }
  /* Hide the electron-orbit model on mobile cards — too small to be useful here.
     The modal will show it when expanded. */
  .element .model { display: none !important; }
  .element .atomic-weight { display: none !important; }
  .element .overlay { display: none !important; }

  /* Disable the desktop activate-checked scale(3) blow-up on mobile.
     Tapping an element triggers the JS-driven modal instead. */
  .element input[type="radio"].activate:checked ~ .square,
  .element input[type="radio"].activate:checked ~ .square .label {
    transform: none !important;
    z-index: auto !important;
  }
  .element input[type="radio"].activate:checked ~ .overlay { opacity: 0 !important; }

  /* Order by category (group all of one type together).
     Lower order = appears first in the column. */
  .element.alkali-metal           { order: 1; }
  .element.alkaline-earth-metal   { order: 2; }
  .element.transition-metal       { order: 3; }
  .element.post-transition-metal  { order: 4; }
  .element.metalloid              { order: 5; }
  .element.other-nonmetal         { order: 6; }
  .element.noble-gas              { order: 7; }
  .element.lanthanoid             { order: 8; }
  .element.actinoid               { order: 9; }
  .element.unknown                { order: 10; }

  /* Hu trigger styling on mobile (it's still a child of .periodic-table).
     Make it a hero card at the very top of the column. */
  .human-life-trigger {
    order: 0;     /* first in the column */
    width: 100%;
    aspect-ratio: auto;
    height: 110px;
    padding: 0 16px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
  }
  .hl-corner-num { font-size: 11px; top: 6px; left: 10px; }
  .hl-helix {
    position: relative;
    width: 54px;
    height: 80px;
    margin: 0;
    flex-shrink: 0;
  }
  .hl-label { margin: 0; align-items: flex-start; }
  .hl-symbol { font-size: 30px; line-height: 1; }
  .hl-name { font-size: 11px; letter-spacing: 0.08em; margin-top: 2px; }

  /* Hide the decorative Cute cell on mobile — the vertical category-grouped
     layout has no natural slot for it, and screen real estate is at a
     premium on phones. The cell only appears in the desktop grid view. */
  .cute-cell { display: none; }

  /* Performance: disable mix-blend-mode and the pulsing drop-shadow
     animation on mobile. Both are GPU-expensive on iOS Safari and can
     contribute to the "A problem repeatedly occurred" crash. The atom
     video's black background still blends well enough with the dark
     trigger cell without the blend mode. */
  .hl-helix {
    mix-blend-mode: normal;
    animation: none;
    filter: none;
  }

  /* ============================================================
     KEY (category menu) on mobile: vertical pill chips
     ============================================================ */
  .key {
    /* Remove grid placement; restore as a flex stack */
    grid-row: unset;
    grid-column: unset;
    display: block;
    order: -1;     /* above the elements */
    margin-bottom: 4px;
    pointer-events: all;
    font-size: 13px;
  }
  .key .row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }
  .key .row label {
    display: block;
    padding: 9px 14px;
    border: 1px solid currentColor;
    border-radius: 20px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.04em;
    background: rgba(16,19,24,0.5);
    box-shadow: 0 0 8px currentColor;
    text-shadow: 0 0 6px currentColor;
    opacity: 0.85;
    transition: 180ms;
  }
  .key .row label:active {
    background: rgba(16,19,24,0.9);
    opacity: 1;
  }

  /* Disable the desktop CSS radio-filter on mobile — it dims non-matching
     elements via opacity 0.15 + pointer-events: none, which on this layout
     just leaves Tungsten et al visible-but-dim and confusing. On mobile we
     replace it with a JS-driven collapse system below. */
  .periodic-table .element { opacity: 1 !important; pointer-events: auto !important; }
  .periodic-table .key label { opacity: 0.85 !important; }

  /* JS-driven category collapse: when `.periodic-table` has class
     `is-filtered-<category>`, hide every other category. */
  .periodic-table.is-filtered-alkali-metal .element:not(.alkali-metal),
  .periodic-table.is-filtered-alkaline-earth-metal .element:not(.alkaline-earth-metal),
  .periodic-table.is-filtered-transition-metal .element:not(.transition-metal),
  .periodic-table.is-filtered-post-transition-metal .element:not(.post-transition-metal),
  .periodic-table.is-filtered-metalloid .element:not(.metalloid),
  .periodic-table.is-filtered-other-nonmetal .element:not(.other-nonmetal),
  .periodic-table.is-filtered-noble-gas .element:not(.noble-gas),
  .periodic-table.is-filtered-lanthanoid .element:not(.lanthanoid),
  .periodic-table.is-filtered-actinoid .element:not(.actinoid),
  .periodic-table.is-filtered-unknown .element:not(.unknown) {
    display: none;
  }
  /* But always keep the Hu trigger visible */
  .periodic-table[class*="is-filtered-"] .human-life-trigger { display: flex !important; }

  /* Highlight the active pill */
  .key .row label.is-active {
    opacity: 1 !important;
    background: rgba(16,19,24,0.95);
    box-shadow: 0 0 14px currentColor, inset 0 0 8px currentColor;
    transform: scale(1.02);
  }

  /* When a category is active (filtered), highlight its key chip
     instead of dimming non-matches (since on mobile we render
     filtered elements differently — see element rules below) */

  /* ============================================================
     STAGE OVERLAY (unchanged on mobile from previous iteration)
     ============================================================ */

  /* On phones the figure label collides with bubbles — hide it. */
  .figure-label { display: none; }

  .hu-atom { display: none; }

  /* Prompt: anchored to the bottom area as a card, full width */
  .hu-prompt {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: 10px 14px 12px;
    background: linear-gradient(180deg, rgba(16,19,24,0) 0%, rgba(16,19,24,0.92) 30%, rgba(16,19,24,0.98) 100%);
    transform: none;
    z-index: 4;
    gap: 4px;
  }
  .human-stage.is-open .hu-prompt { transform: none; }
  .hu-prompt__label { font-size: 8px; letter-spacing: 0.25em; }
  .hu-prompt__input { font-size: 13px; padding: 9px 10px; }
  .hu-prompt__status { font-size: 9px; }

  /* Response: full-screen overlay on phone */
  .hu-response {
    position: fixed;
    top: 8vh;
    bottom: 18vh;
    left: 4vw;
    right: 4vw;
    width: auto;
    z-index: 5;
    transform: none;
  }
  .hu-response.is-open { transform: none; }
  .hu-response__card { padding: 14px 14px 12px; font-size: 12px; }
  .hu-response__title { font-size: 9px; }
  .hu-response__question { font-size: 10px; padding-left: 8px; }
  .hu-response__body { font-size: 12px; line-height: 1.5; }

  .human-stage__title { top: 8px; }
  .title-main { font-size: 22px; letter-spacing: 0.08em; }
  .title-pre, .title-sub { font-size: 8px; }

  /* MOBILE: hide the stick silhouette; cute video takes center stage */
  .human-figure { display: none; }
  .figure-label { display: none; }

  /* Cute figure: anchored mid-upper area, big enough to be the focal point */
  .cute-figure {
    display: block;
    position: absolute;
    top: 34%;
    left: 50%;
    /* Width is calibrated so the inner ring (radius 95px) clears the figure's
       body and the outer ring (radius 145px) stays within mobile viewport. */
    width: 140px;
    height: 210px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 700ms 200ms;
    z-index: 2;
  }
  .human-stage.is-open .cute-figure { opacity: 1; }
  .cute-figure__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* WebM has true alpha. mix-blend-mode handles the MP4-fallback case
       (Safari) by lightening the black background against the stage bg. */
    mix-blend-mode: lighten;
    pointer-events: none;
  }

  /* ============================================================
     ORBITING ELEMENT RINGS (mobile only)
     Two concentric rings centred on the cute figure. The outer
     wrapper rotates; each .ring-slot child counter-rotates so the
     element symbols stay upright as the ring spins.
     ============================================================ */
  .ring-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    /* Ring is a centered transparent disc; children are positioned
       by transform from the disc's center. */
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
  }
  /* Two rings, two directions, two speeds. Inner spins clockwise,
     outer counter-clockwise — makes the motion more interesting and
     visually distinguishes the tiers. */
  .ring-orbit--inner {
    animation: ring-spin-cw 40s linear infinite;
  }
  .ring-orbit--outer {
    animation: ring-spin-ccw 60s linear infinite;
  }
  @keyframes ring-spin-cw  { from { transform: translate(-50%, -50%) rotate(0deg);    } to { transform: translate(-50%, -50%) rotate(360deg);  } }
  @keyframes ring-spin-ccw { from { transform: translate(-50%, -50%) rotate(0deg);    } to { transform: translate(-50%, -50%) rotate(-360deg); } }

  /* Each slot is positioned at an angle around the ring. The slot
     receives the rotation from its parent, so we counter-rotate
     its contents so the bubble text stays right-side up.
     - The slot itself sets `transform: rotate(angle) translate(R, 0)`
       to put it on the ring.
     - The bubble inside uses a CSS animation that counter-rotates
       AGAINST the parent ring spin, plus a static `-angle` rotation
       (via --slot-angle) so its baseline is upright.
  */
  .ring-slot {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  /* Counter-rotation: cancels the parent ring's spin.
     Combines a static `rotate(-1 * slot-angle)` with an animated
     `rotate(- ring-rotation)` so the bubble stays upright. */
  .ring-orbit--inner .ring-slot > .orbit-element {
    animation: ring-counter-cw 40s linear infinite;
  }
  .ring-orbit--outer .ring-slot > .orbit-element {
    animation: ring-counter-ccw 60s linear infinite;
  }
  @keyframes ring-counter-cw {
    from { transform: translate(-50%, -50%) rotate(calc(var(--slot-angle, 0deg) * -1)); }
    to   { transform: translate(-50%, -50%) rotate(calc(var(--slot-angle, 0deg) * -1 - 360deg)); }
  }
  @keyframes ring-counter-ccw {
    from { transform: translate(-50%, -50%) rotate(calc(var(--slot-angle, 0deg) * -1)); }
    to   { transform: translate(-50%, -50%) rotate(calc(var(--slot-angle, 0deg) * -1 + 360deg)); }
  }

  /* Inside the ring, the bubble overrides the JS pixel-position layout
     used on desktop. It's absolute-positioned by its slot. */
  .ring-orbit .orbit-element {
    position: absolute;
    top: 0;
    left: 0;
    /* Centered on the slot point */
    transform: translate(-50%, -50%);
    /* Override JS-set left/top from the desktop pixel placement code */
    margin: 0;
  }

  .human-figure {
    top: 34%;
    width: 130px;
  }
  /* On mobile we hide the figure (above), so the rule above is harmless
     but reserved in case mobile layout ever wants the stick figure back. */

  .composition-panel {
    top: auto;
    bottom: 80px;
    right: 4vw;
    left: 4vw;
    width: auto;
    transform: translateY(20px);
    max-height: 22vh;
    overflow-y: auto;
    padding: 8px 10px;
    font-size: 10px;
  }
  .human-stage.is-open .composition-panel { transform: translateY(0); }
  .composition-list li { font-size: 9.5px; padding: 2px 0; grid-template-columns: 22px 1fr auto; }
  .composition-panel__foot { font-size: 8px; padding-top: 6px; margin-top: 6px; }
  .cp-title { font-size: 9px; }
}

/* ============================================================
   MOBILE ELEMENT-DETAIL MODAL
   Shown by JS when an element is tapped on a small screen.
   ============================================================ */
.element-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  padding: 5vh 5vw;
  box-sizing: border-box;
}
.element-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.element-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.element-modal__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  background: linear-gradient(180deg, #121620 0%, #0d1016 100%);
  border: 2px solid currentColor;
  border-radius: 10px;
  padding: 22px 22px 18px;
  /* color: inherits from category class (.alkali-metal, .noble-gas, etc.)
     This drives the border, glow, atomic number, symbol, category label,
     and shell pill colors via `currentColor`. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 240ms cubic-bezier(.2,.9,.25,1.1);
  text-shadow: 0 0 6px currentColor;
  box-shadow: 0 0 40px currentColor;
}
.element-modal.is-open .element-modal__card { transform: scale(1); }
.element-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: 180ms;
}
.element-modal__close:hover,
.element-modal__close:active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.element-modal__num {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  text-align: left;
  text-shadow: none;
}
.element-modal__symbol {
  font-size: 88px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: inherit;
  margin: 4px 0;
}
.element-modal__name {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
  text-shadow: none;
}
.element-modal__mass {
  font-size: 14px;
  text-align: center;
  color: rgba(255,255,255,0.65);
  text-shadow: none;
  letter-spacing: 0.05em;
}
.element-modal__divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 4px 0 2px;
}
.element-modal__category {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
  opacity: 0.8;
}
.element-modal__shells-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-shadow: none;
  margin-top: 4px;
}
.element-modal__shells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.element-modal__shell {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 14px;
  background: rgba(16,19,24,0.6);
  color: inherit;
  min-width: 32px;
  text-align: center;
}

/* Scroll hint removed on mobile since the table no longer scrolls */