:root {
  --theme-rgb: 89, 229, 204;
  --pandora-media-darkness: 0;
  --pandora-media-theme-tint: 0;
}

.planet-wallpaper {
  position: absolute;
  inset: -7%;
  z-index: -5;
  display: none;
  width: 114%;
  height: 114%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.08) brightness(.73);
  pointer-events: none;
}

.planet-wallpaper-backdrop { display: none; }

.viewport::before {
  opacity: calc(1 - var(--pandora-media-darkness));
}

.viewport > .media-darkness {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: #000;
  opacity: var(--pandora-media-darkness);
  pointer-events: none;
}

.viewport > .media-theme-tint {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: rgb(var(--theme-rgb));
  opacity: var(--pandora-media-theme-tint);
  mix-blend-mode: color;
  pointer-events: none;
  transition: background-color .2s ease, opacity .2s ease;
}

.viewport[data-background-mode="colour"] > .media-theme-tint { display: none; }

.viewport[data-background-mode="wallpaper"] .planet-wallpaper { display: block; }
.viewport[data-background-mode="wallpaper"] .planet,
.viewport[data-background-mode="colour"] .planet { display: none; }

.appearance-menu {
  position: relative;
  display: grid;
  place-items: center;
}

.appearance-panel {
  position: absolute;
  top: calc(100% + .65rem);
  right: .7rem;
  z-index: 120;
  display: none;
  width: min(25rem, calc(100vw - 1.5rem));
  max-height: min(72vh, 43rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid rgba(var(--theme-rgb), .42);
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(var(--theme-rgb), .018) 5px),
    rgba(1, 10, 12, .97);
  box-shadow: inset 0 0 28px rgba(var(--theme-rgb), .055), 0 18px 45px rgba(0, 0, 0, .72), 0 0 20px rgba(var(--theme-rgb), .12);
  color: var(--ink);
  text-align: left;
  scrollbar-color: rgba(var(--theme-rgb), .45) transparent;
}

.appearance-menu.is-open .appearance-panel { display: block; }

.appearance-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: .5rem;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(var(--theme-rgb), .55);
  border-left: 1px solid rgba(var(--theme-rgb), .55);
  background: #030d0f;
  transform: rotate(45deg);
}

.appearance-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(var(--theme-rgb), .2);
}

.appearance-heading strong {
  color: var(--ink);
  font: 500 .95rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .17em;
}

.appearance-heading small,
.appearance-help {
  color: rgba(var(--theme-rgb), .56);
  font: 500 .6rem/1.3 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}

.appearance-group {
  min-width: 0;
  margin: 0;
  padding: .82rem 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--theme-rgb), .14);
}

.appearance-group legend {
  margin-bottom: .24rem;
  padding: 0;
  color: rgba(var(--theme-rgb), .76);
  font: 600 .68rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .15em;
}

.appearance-help { display: block; margin-bottom: .64rem; }

.background-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}

.background-modes button,
.appearance-reset {
  min-height: 2rem;
  border: 1px solid rgba(var(--theme-rgb), .22);
  background: rgba(var(--theme-rgb), .035);
  color: rgba(var(--theme-rgb), .68);
  font: 600 .61rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}

.background-modes button:hover,
.background-modes button:focus-visible,
.background-modes button.is-active,
.appearance-reset:hover,
.appearance-reset:focus-visible {
  outline: none;
  border-color: var(--cyan);
  background: rgba(var(--theme-rgb), .13);
  color: var(--ink);
  box-shadow: 0 0 10px rgba(var(--theme-rgb), .12);
}

.background-colour-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  margin-top: .72rem;
}

.appearance-panel input[type="color"] {
  width: 2.4rem;
  height: 2rem;
  padding: 2px;
  border: 1px solid rgba(var(--theme-rgb), .34);
  background: #02090b;
}

.background-colour-row output {
  color: var(--ink);
  font: 600 .66rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  max-height: 10.5rem;
  margin-top: .7rem;
  overflow: auto;
  scrollbar-color: rgba(var(--theme-rgb), .42) transparent;
}

.wallpaper-grid button {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-rgb), .2);
  background: #020708;
}

.wallpaper-grid img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }

.wallpaper-grid span {
  position: absolute;
  inset: auto 0 0;
  overflow: hidden;
  padding: .28rem .3rem;
  background: rgba(0, 0, 0, .78);
  color: rgba(255, 255, 255, .72);
  font: 600 .48rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallpaper-grid button:hover,
.wallpaper-grid button:focus-visible,
.wallpaper-grid button.is-active {
  outline: none;
  border-color: var(--cyan);
  box-shadow: inset 0 0 12px rgba(var(--theme-rgb), .22), 0 0 8px rgba(var(--theme-rgb), .18);
}

.wallpaper-grid button.is-active img { opacity: 1; }

.appearance-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  align-items: center;
  gap: .75rem;
  margin-top: .58rem;
}

.appearance-range > span {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: rgba(var(--theme-rgb), .66);
  font: 600 .62rem/1.2 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .09em;
}

.appearance-range output { color: var(--cyan); }
.appearance-range input { width: 100%; height: 3px; accent-color: var(--cyan); }

.appearance-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.7rem;
  align-items: center;
  gap: .75rem;
  margin-top: .72rem;
  padding-top: .68rem;
  border-top: 1px solid rgba(var(--theme-rgb), .12);
}

.appearance-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.appearance-toggle > span { display: grid; gap: .22rem; }
.appearance-toggle strong { color: rgba(var(--theme-rgb), .76); font: 600 .62rem/1.2 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; letter-spacing: .09em; }
.appearance-toggle small { color: rgba(205,226,220,.43); font: 400 .52rem/1.35 "Segoe UI", sans-serif; letter-spacing: .035em; }
.appearance-toggle > i {
  position: relative;
  width: 2.7rem;
  height: 1.25rem;
  border: 1px solid rgba(var(--theme-rgb), .28);
  background: rgba(var(--theme-rgb), .035);
  box-shadow: inset 0 0 10px rgba(0,0,0,.45);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.appearance-toggle > i > b {
  position: absolute;
  top: .2rem;
  left: .22rem;
  width: .72rem;
  height: .72rem;
  background: rgba(var(--theme-rgb), .42);
  box-shadow: 0 0 5px rgba(var(--theme-rgb), .22);
  transition: left .18s ease, background .18s ease, box-shadow .18s ease;
}
.appearance-toggle input:checked ~ i { border-color: rgba(var(--theme-rgb), .72); background: rgba(var(--theme-rgb), .16); box-shadow: inset 0 0 12px rgba(var(--theme-rgb), .1), 0 0 8px rgba(var(--theme-rgb), .12); }
.appearance-toggle input:checked ~ i > b { left: 1.68rem; background: var(--cyan); box-shadow: 0 0 8px rgba(var(--theme-rgb), .72); }
.appearance-toggle input:focus-visible ~ i { outline: 1px solid var(--cyan); outline-offset: 3px; }

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .48rem;
}

.theme-swatch,
.custom-theme {
  position: relative;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 1px solid rgba(var(--theme-rgb), .24);
  background: rgba(var(--theme-rgb), .03);
}

.theme-swatch::before {
  content: "";
  position: absolute;
  inset: .38rem;
  background: var(--swatch);
  box-shadow: 0 0 9px color-mix(in srgb, var(--swatch) 58%, transparent);
}

.theme-swatch:hover,
.theme-swatch:focus-visible,
.theme-swatch.is-active,
.custom-theme:hover,
.custom-theme:focus-within {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 9px rgba(var(--theme-rgb), .28);
}

.custom-theme { display: grid; place-items: center; color: var(--cyan); }
.custom-theme::after { content: "+"; font: 300 1.35rem/1 sans-serif; }
.custom-theme input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; }

.font-size-grid { display: grid; gap: .18rem; }

.appearance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
}

.appearance-saved {
  color: rgba(var(--theme-rgb), .52);
  font: 600 .57rem/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
}

.appearance-saved::before { content: "●"; margin-right: .4rem; color: var(--cyan); }
.appearance-reset { min-height: 1.8rem; padding: 0 .72rem; }

@media (max-width: 760px) {
  .appearance-panel { position: fixed; top: 7.2rem; right: .75rem; }
}