body {
  --header-height: 4rem;
  display: flex;
  flex-direction: column;
  min-height: 100lvh;
  overflow: hidden;
  perspective: 1000px;
}

#scene {
  position: fixed;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(var(--header-height) + var(--padding)) var(--padding) var(--padding);
  inset: 0;
  padding: var(--header-height) var(--padding);
}

#scene-content {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#scene-content[data-layout="table"] {
  display: grid;
  grid-template-columns: repeat(18, var(--w));
  grid-auto-rows: var(--h);
  gap: 0.25rem;
  place-content: center;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-shrink: 1;
  position: fixed;
  z-index: 3;
  top: 0px;
  width: 100%;
  height: var(--header-height);
  padding: var(--padding);
}

.controls-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: var(--header-height);
  gap: calc(var(--padding) * .5);
}

.controls button {
  background-color: var(--bg-4);
  color: var(--fg-1);
  flex-shrink: 1;
}

.controls button:hover {
  background-color: var(--bg-5);
}

.controls button.is-active {
  background-color: var(--fg-1);
  color: var(--bg-3);
}

.credits {
  text-align: center;
  position: fixed;
  z-index: 1;
  bottom: 0px;
  width: 100%;
  height: var(--header-height);
  padding: var(--padding);
  font-size: .75rem;
}

.credits a {
  color: var(--red-1);
  text-decoration: none;
}

.element {
  overflow: hidden;
  pointer-events: auto;
  --w: 3.5rem;
  --h: 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-3);
  background-color: var(--color-5);
  color: var(--color-1);
  width: var(--w);
  height: var(--h);
  border-radius: .25rem;
  padding: .25rem;
  transform-style: preserve-3d;
  z-index: 8;
  cursor: pointer;
}

button.element:focus-visible,
button.element:hover {
  border: 1px solid var(--color-1);
  background-color: var(--color-4);
  color: var(--color-1);
  outline: none;
}

.element.is-expanded {
  --w: 13rem;
  --h: 13rem;
  z-index: 1;
  padding: 1rem;
  align-items: flex-start;
}

.element-description {
  display: none;
  transform-style: preserve-3d;
  flex-direction: column;
  gap: .25rem;
  width: 100%;
  font-size: .625rem;
  text-transform: none;
  color: var(--color-1);
  justify-self: flex-end;
  margin-top: 1.5rem;
  text-align: left;
}

.element.is-expanded .element-description {
  display: block;
}

.element-symbol {
  transform-style: preserve-3d;
  margin-top: -.1rem;
  margin-bottom: .2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.element.is-expanded .element-symbol {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  text-align: left;
}

.element-title {
  transform-style: preserve-3d;
  font-size: .5rem;
  font-weight: 700;
  text-align: center;
}

.element.is-expanded .element-title {
  font-size: 1.5rem;
  text-align: left;
  margin-top: 1rem;
}

.element-number {
  transform-style: preserve-3d;
  font-size: .5rem;
  text-align: right;
  align-self: flex-end;
}

.element.is-expanded .element-number {
  position: absolute;
  font-size: 1rem;
  top: 1rem;
  right: 1rem;
}

#scene-content[data-layout="sphere"] .element,
#scene-content[data-layout="helix"] .element,
#scene-content[data-layout="grid"] .element {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--w) * -.5);
  margin-top: calc(var(--h) * -.5);
}

#scene-content[data-layout="table"] .element.is-expanded {
  left: -1.625rem;
  top: -1.25rem;
  margin-left: calc(var(--w) * -.25);
  margin-top: calc(var(--h) * -.25);
  margin-right: calc(var(--w) * -.5);
  margin-bottom: calc(var(--h) * -.5);
}

@font-face {
  font-family: 'IoskeleyMono';
  src: url('https://assets.codepen.io/1137/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IoskeleyMono';
  src: url('https://assets.codepen.io/1137/IoskeleyMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black-1: #252423;
  --black-2: #262422;

  html,
  body {
    /* Ek deep dark sky blue gradient jo center se dark obsidian ki taraf jata hai */
    background: radial-gradient(circle at center, #1b2a47 0%, #050b14 100%);
    color: var(--fg-1);
    font-family: 'IoskeleyMono', monospace, sans-serif;
    height: 100%;
    /* Gradient ko poore page par stretch karne ke liye */
    margin: 0;
  }

  --black-4: #262422;
  --black-5: #272421;
  --black-6: #272421;
  --white-1: #f6f4f2;
  --white-2: #b8b6b3;
  --white-3: #9a9593;
  --white-4: #524f49;
  --white-5: #413d39;
  --white-6: #312e2b;
  --red-1: #ff4b4b;
  --red-2: #bf3e3e;
  --red-3: #9e3838;
  --red-4: #532a29;
  --red-5: #412726;
  --red-6: #322523;
  --corail-1: #ff8333;
  --corail-2: #bf672d;
  --corail-3: #9e582b;
  --corail-4: #533724;
  --corail-5: #412f23;
  --corail-6: #322922;
  --orange-1: #ffa828;
  --orange-2: #bf8026;
  --orange-3: #9e6d25;
  --orange-4: #523e23;
  --orange-5: #413422;
  --orange-6: #322b21;
  --yellow-1: #ffcc2a;
  --yellow-2: #bf9a27;
  --yellow-3: #9e8026;
  --yellow-4: #524723;
  --yellow-5: #413922;
  --yellow-6: #322d21;
  --citrus-1: #f9f640;
  --citrus-2: #bab836;
  --citrus-3: #9b9932;
  --citrus-4: #515027;
  --citrus-5: #403f24;
  --citrus-6: #323022;
  --lime-1: #b7ff54;
  --lime-2: #8bbe44;
  --lime-3: #759d3d;
  --lime-4: #42522b;
  --lime-5: #384027;
  --lime-6: #2d3123;
  --green-1: #6aff65;
  --green-2: #54be50;
  --green-3: #4a9e45;
  --green-4: #31522e;
  --green-5: #2c4029;
  --green-6: #273124;
  --emerald-1: #57f695;
  --emerald-2: #47b873;
  --emerald-3: #409962;
  --emerald-4: #2d5039;
  --emerald-5: #293f30;
  --emerald-6: #263128;
  --turquoise-1: #66ffbc;
  --turquoise-2: #52be8e;
  --turquoise-3: #479e77;
  --turquoise-4: #305242;
  --turquoise-5: #2b4035;
  --turquoise-6: #26312b;
  --cyan-1: #26f2d5;
  --cyan-2: #25b5a0;
  --cyan-3: #259686;
  --cyan-4: #244e48;
  --cyan-5: #233f39;
  --cyan-6: #23302d;
  --sega-1: #05dbe9;
  --sega-2: #0fa4ae;
  --sega-3: #138990;
  --sega-4: #1e4a4c;
  --sega-5: #203b3c;
  --sega-6: #212f2f;
  --sky-1: #33b3f1;
  --sky-2: #2e88b4;
  --sky-3: #2c7395;
  --sky-4: #26424e;
  --sky-5: #25363e;
  --sky-6: #242c2f;
  --indigo-1: #717aff;
  --indigo-2: #595fbe;
  --indigo-3: #4d519e;
  --indigo-4: #323351;
  --indigo-5: #2c2c3f;
  --indigo-6: #282630;
  --lavender-1: #a369ff;
  --lavender-2: #7d53be;
  --lavender-3: #6a489e;
  --lavender-4: #3e3051;
  --lavender-5: #342a3f;
  --lavender-6: #2b2530;
  --purple-1: #c06ddf;
  --purple-2: #9356a8;
  --purple-3: #7b4a8c;
  --purple-4: #45314b;
  --purple-5: #392b3c;
  --purple-6: #2f262d;
  --magenta-1: #e962bf;
  --magenta-2: #af4e90;
  --magenta-3: #93447a;
  --magenta-4: #4e2e43;
  --magenta-5: #3f2936;
  --magenta-6: #31252b;
  --pink-1: #ff86a7;
  --pink-2: #bf687f;
  --pink-3: #9f586b;
  --pink-4: #53363c;
  --pink-5: #412e32;
  --pink-6: #322729;
  --bg-1: #252423;
  --bg-2: #2a2928;
  --bg-3: #2f2e2d;
  --bg-4: #353433;
  --bg-5: #3a3938;
  --fg-1: #dddcda;
  --fg-2: #c6c3c1;
  --fg-3: #96918f;
  --fg-4: #65655e;
  --fg-5: #33332e;
  --input-border-radius: .25rem;
  --br: 1rem;
  --padding: 1rem;
  --border-width: 1px;
}

[data-color="fg"] {
  --color-1: var(--fg-1);
  --color-2: var(--fg-2);
  --color-3: var(--fg-3);
  --color-4: var(--fg-4);
  --color-5: var(--fg-5);
}

[data-color="bg"] {
  --color-1: var(--bg-1);
  --color-2: var(--bg-2);
  --color-3: var(--bg-3);
  --color-4: var(--bg-4);
  --color-5: var(--bg-5);
}

[data-color="0"] {
  --color-1: var(--red-1);
  --color-2: var(--red-2);
  --color-3: var(--red-3);
  --color-4: var(--red-4);
  --color-5: var(--red-5);
}

[data-color="1"] {
  --color-1: var(--corail-1);
  --color-2: var(--corail-2);
  --color-3: var(--corail-3);
  --color-4: var(--corail-4);
  --color-5: var(--corail-5);
}

[data-color="2"] {
  --color-1: var(--orange-1);
  --color-2: var(--orange-2);
  --color-3: var(--orange-3);
  --color-4: var(--orange-4);
  --color-5: var(--orange-5);
}

[data-color="3"] {
  --color-1: var(--yellow-1);
  --color-2: var(--yellow-2);
  --color-3: var(--yellow-3);
  --color-4: var(--yellow-4);
  --color-5: var(--yellow-5);
}

[data-color="4"] {
  --color-1: var(--citrus-1);
  --color-2: var(--citrus-2);
  --color-3: var(--citrus-3);
  --color-4: var(--citrus-4);
  --color-5: var(--citrus-5);
}

[data-color="5"] {
  --color-1: var(--lime-1);
  --color-2: var(--lime-2);
  --color-3: var(--lime-3);
  --color-4: var(--lime-4);
  --color-5: var(--lime-5);
}

[data-color="6"] {
  --color-1: var(--green-1);
  --color-2: var(--green-2);
  --color-3: var(--green-3);
  --color-4: var(--green-4);
  --color-5: var(--green-5);
}

[data-color="7"] {
  --color-1: var(--emerald-1);
  --color-2: var(--emerald-2);
  --color-3: var(--emerald-3);
  --color-4: var(--emerald-4);
  --color-5: var(--emerald-5);
}

[data-color="8"] {
  --color-1: var(--turquoise-1);
  --color-2: var(--turquoise-2);
  --color-3: var(--turquoise-3);
  --color-4: var(--turquoise-4);
  --color-5: var(--turquoise-5);
}

[data-color="9"] {
  --color-1: var(--cyan-1);
  --color-2: var(--cyan-2);
  --color-3: var(--cyan-3);
  --color-4: var(--cyan-4);
  --color-5: var(--cyan-5);
}

[data-color="10"] {
  --color-1: var(--sega-1);
  --color-2: var(--sega-2);
  --color-3: var(--sega-3);
  --color-4: var(--sega-4);
  --color-5: var(--sega-5);
}

[data-color="11"] {
  --color-1: var(--sky-1);
  --color-2: var(--sky-2);
  --color-3: var(--sky-3);
  --color-4: var(--sky-4);
  --color-5: var(--sky-5);
}

[data-color="12"] {
  --color-1: var(--indigo-1);
  --color-2: var(--indigo-2);
  --color-3: var(--indigo-3);
  --color-4: var(--indigo-4);
  --color-5: var(--indigo-5);
}

[data-color="13"] {
  --color-1: var(--lavender-1);
  --color-2: var(--lavender-2);
  --color-3: var(--lavender-3);
  --color-4: var(--lavender-4);
  --color-5: var(--lavender-5);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  background-color: var(--bg-1);
  color: var(--fg-1);
  font-family: 'IoskeleyMono', monospace, sans-serif;
}

.br {
  border-radius: var(--br);
}

.br .br {
  border-radius: calc(var(--br) * .5);
}

.br .br .br {
  border-radius: calc(var(--br) * .25);
}

.black {
  color: var(--bg-1);
}

.white {
  color: var(--fg-1);
}

.red {
  color: var(--red-1);
}

.orange {
  color: var(--corail-1);
}

.yellow {
  color: var(--yellow-1);
}

.blue {
  color: var(--sky-1);
}

.green {
  color: var(--green-1);
}

.grid {
  --one-cell: 100px;
  --border-color: rgba(255, 255, 255, .75);
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.grid:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(-90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size:
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell);
  background-position: 0 -1px;
  backface-visibility: hidden;
}

.grid:before {
  width: calc(75px + 100%);
  left: -75px;
}

@media (min-width: 500px) {
  .grid:before {
    width: 100%;
    left: 0;
  }
}

/* Logs */

.log {
  --width: 22ch;
  --height: 20ch;
  position: fixed;
  z-index: 10;
  top: 0;
  overflow-y: scroll;
  width: var(--width);
  height: var(--height);
  padding-left: 1ch;
  padding-right: 1ch;
  padding-bottom: 1ch;
  font-family: ui-monospace, monospace;
  white-space: pre;
  background-color: rgba(0, 0, 0, .5);
}

@keyframes reveal {
  from {
    opacity: 1;
  }

  to {
    opacity: .4;
  }
}

.log span {
  animation: reveal 2s ease-in-out forwards;
}

/* Inputs */

button,
select {
  width: 100%;
  flex-shrink: .5;
  border: none;
  background-color: var(--white-1);
  border-radius: var(--input-border-radius);
  white-space: nowrap;
  margin: 0;
  height: 2rem;
}

button {
  padding: 0 .75rem;
}

select:disabled,
button:disabled {
  background-color: var(--grey);
}

select:not(:disabled):hover,
button:not(:disabled):hover {
  cursor: pointer;
  background-color: var(--white-2);
}

legend {
  display: flex;
  gap: .5rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 2rem;
}

label {
  display: flex;
  gap: .5rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 2rem;
}

fieldset {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

fieldset.vertical {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

fieldset>* {
  border-radius: 0;
}

fieldset>*:first-child {
  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}

fieldset>*:last-child {
  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}

/* Custom Footer Styling */
.vishesh-footer {
  display: inline-block;
  margin-top: 8px;
  font-weight: 400;
  color: var(--fg-2);
}

.vishesh-footer a {
  color: var(--sky-1);
  /* Dark Sky Blue neon vibe */
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.vishesh-footer a:hover {
  color: var(--cyan-1);
  text-shadow: 0 0 10px var(--cyan-1);
  /* Subtle neon glow effect */
}