/* Celestial fairy tale: silver constellations, midnight plum, and rose light. */
html[data-theme="celestial"] {
  --paper: #20172d;
  --ink: #f4eaf3;
  --muted: #c0afc9;
  --rose: #e7a9c4;
  --line: #55405f;
  --pink: #51324f;
  --purple: #3a2c4c;
  color-scheme: dark;
  background: var(--paper);
}

html[data-theme="celestial"] body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 83% 17%, #71406330, transparent 43%),
    radial-gradient(ellipse at 8% 53%, #63549120, transparent 47%),
    radial-gradient(circle at 16px 23px, #dfcce385 0 0.65px, transparent 1px),
    radial-gradient(circle at 91px 119px, #d3b9e142 0 0.7px, transparent 1.1px);
  background-size:
    auto,
    auto,
    187px 211px,
    293px 307px;
}

html[data-theme="celestial"] .site-header,
html[data-theme="celestial"] footer {
  border-color: #71547a69;
}

html[data-theme="celestial"] .wordmark {
  color: #f0dfe9;
}
html[data-theme="celestial"] .monogram {
  border-color: #c5aec385;
  background: linear-gradient(145deg, #6b466042, #3a264600);
  box-shadow: 0 0 20px #d7a5ce0a;
}

html[data-theme="celestial"] .eyebrow {
  color: #c6b5d2;
}
html[data-theme="celestial"] h1,
html[data-theme="celestial"] h2 {
  text-shadow: 0 2px 35px #e3acc012;
}
html[data-theme="celestial"] .heading-star,
html[data-theme="celestial"] .art-star,
html[data-theme="celestial"] .gallery-heading h1 > span {
  color: #dfcde9;
  text-shadow: 0 0 22px #d9afe365;
}

html[data-theme="celestial"] .button {
  background: #e2aec6;
  color: #301d35;
  border: 1px solid #f3d5e3;
  box-shadow: 0 4px 25px #cb82bd12;
}
html[data-theme="celestial"] .button:hover {
  background: #f0c4d8;
}
html[data-theme="celestial"] nav a:hover,
html[data-theme="celestial"] .quiet-link:hover,
html[data-theme="celestial"] .piece-nav button:hover {
  color: #f5c9e0;
}

html[data-theme="celestial"] .hero-art {
  isolation: isolate;
}
html[data-theme="celestial"] .hero-art::before {
  content: "";
  position: absolute;
  inset: 45px -16px 5px;
  border: 1px solid #c2a4d432;
  border-radius: 50% 50% 45% 45%;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: -1;
}
html[data-theme="celestial"] .hero-art::after {
  content: "";
  position: absolute;
  width: 37px;
  height: 37px;
  top: 17px;
  right: 48px;
  border-radius: 50%;
  box-shadow: -10px 5px 0 -3px #e6d3eb;
  transform: rotate(-22deg);
  pointer-events: none;
}
html[data-theme="celestial"] .arched-art {
  position: relative;
  background: #493353;
  box-shadow:
    0 0 0 9px var(--paper),
    0 0 0 10px #a68aaa,
    0 18px 75px #bd82c023;
}
html[data-theme="celestial"] .arched-art img {
  filter: brightness(0.73) saturate(0.7) hue-rotate(10deg);
}
html[data-theme="celestial"] .arched-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #42286228, transparent 55%, #301b4440);
  box-shadow: inset 0 0 45px #34244830;
  pointer-events: none;
}
html[data-theme="celestial"] .orbit-text {
  color: #d1bddb;
}
html[data-theme="celestial"] .art-caption {
  background: #39283f;
  border: 1px solid #94748a;
  color: #f0dce9;
  box-shadow: 0 8px 24px #100c2440;
}

html[data-theme="celestial"] .ribbon {
  background: linear-gradient(90deg, transparent, #6c4a6726, transparent);
  border-color: #a1809a45;
  color: #dec7e8;
}
html[data-theme="celestial"] .ribbon span {
  color: #cab7ce;
}
html[data-theme="celestial"] .portals > a {
  background:
    radial-gradient(ellipse at top right, #65435a75, transparent 75%), #2d2037;
  border-color: #76566f;
  border-radius: 3px 30px 3px 3px;
}
html[data-theme="celestial"] .portals > a:nth-child(2) {
  background:
    radial-gradient(ellipse at top right, #55467585, transparent 75%), #292237;
  border-color: #6c5b84;
}
html[data-theme="celestial"] .portals > a:hover {
  border-color: #d3aacb;
}
html[data-theme="celestial"] .portal-icon {
  color: #e0c9e8;
}

html[data-theme="celestial"] .demo-note {
  background: #382941;
  color: #dbc5df;
  border: 1px solid #674c73;
}
html[data-theme="celestial"] .gallery-controls {
  background: #20172dcc;
  border-color: #6f537c;
}
html[data-theme="celestial"] input::placeholder,
html[data-theme="celestial"] textarea::placeholder {
  color: #b8a6c0;
  opacity: 1;
}
html[data-theme="celestial"] select {
  background-color: #2b2036;
  border-color: #70577c;
}
html[data-theme="celestial"] .filter-tabs button:hover,
html[data-theme="celestial"] .surprise:hover {
  color: #f7cfe4;
}
html[data-theme="celestial"] .piece-card .image-wrap {
  background: #392a44;
  border: 1px solid #a380af45;
  box-shadow: 0 8px 25px #100a171f;
}
html[data-theme="celestial"] .piece-card:hover h3 {
  color: #edbfd4;
}
html[data-theme="celestial"] .preview-badge {
  background: #2a1d37ed;
  color: #f4eaf3;
  border: 1px solid #b097b46b;
}
html[data-theme="celestial"] dialog {
  background: #261c32;
  border-color: #85678f;
  box-shadow: 0 24px 110px #0e071d99;
}
html[data-theme="celestial"] dialog::backdrop {
  background: #100b1ade;
}
html[data-theme="celestial"] .lightbox-image {
  background: #17111f;
}
html[data-theme="celestial"] .tags span {
  color: #f4d9e8;
}
html[data-theme="celestial"] .close {
  background: #34253f;
  color: #f4eaf3;
}

@media (max-width: 640px) {
  /* Keep the decorative orbit inside the narrow hero column. Rotation expands
     its bounding box beyond the viewport even with zero horizontal inset. */
  html[data-theme="celestial"] .hero-art::before {
    inset-inline: 5px;
    transform: none;
  }
  html[data-theme="celestial"] .hero-art::after {
    right: 36px;
  }
}