:root {
  --cirrusky-selected-base: #f6f8ee;
  --cirrusky-selected-image:
    radial-gradient(ellipse at 8% 4%, rgb(249 218 199 / 62%) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 8%, rgb(205 226 247 / 68%) 0%, transparent 44%),
    radial-gradient(ellipse at 78% 94%, rgb(229 216 244 / 55%) 0%, transparent 46%),
    linear-gradient(145deg, #f8faef 0%, #f3f8f7 48%, #f8f4fa 100%);
  --cirrusky-page-base: var(--cirrusky-selected-base);
  --cirrusky-page-image: var(--cirrusky-selected-image);
  --cirrusky-atmosphere-image:
    radial-gradient(circle at 8% 6%, rgb(240 160 120 / 11%) 0%, transparent 34%),
    radial-gradient(circle at 92% 12%, rgb(105 177 224 / 10%) 0%, transparent 36%),
    radial-gradient(circle at 76% 94%, rgb(166 130 211 / 8%) 0%, transparent 38%);

  --cirrusky-swatch-original: linear-gradient(135deg, #fff 0 46%, #d4d4d8 47% 53%, #fff 54% 100%);
  --cirrusky-swatch-mist: linear-gradient(135deg, #f9dac7, #cde2f7 52%, #e5d8f4);
  --cirrusky-swatch-dawn: linear-gradient(135deg, #f8d6bd, #f2c8d5 52%, #d9cff3);
  --cirrusky-swatch-aurora: linear-gradient(135deg, #ccebd8, #c9e5f5 52%, #d9cef4);
  --cirrusky-swatch-sage: #f4f9e0;
  --cirrusky-swatch-slate: #e9ecef;

  --cirrusky-picker-surface: rgb(250 250 246 / 88%);
  --cirrusky-picker-control: rgb(250 250 246 / 92%);
  --cirrusky-picker-hover: rgb(239 241 232 / 94%);
  --cirrusky-picker-text: #373943;
  --cirrusky-picker-muted: #727581;
  --cirrusky-picker-border: rgb(83 87 96 / 18%);
  --cirrusky-picker-shadow: rgb(54 58 67 / 16%);
}

html[data-cirrusky-background="dawn"] {
  --cirrusky-selected-base: #fbf3eb;
  --cirrusky-selected-image:
    radial-gradient(ellipse at 10% 3%, rgb(255 210 171 / 72%) 0%, transparent 43%),
    radial-gradient(ellipse at 90% 12%, rgb(244 197 211 / 64%) 0%, transparent 44%),
    radial-gradient(ellipse at 72% 92%, rgb(218 205 244 / 58%) 0%, transparent 45%),
    linear-gradient(145deg, #fdf6ec 0%, #faf0f2 50%, #f5f1fa 100%);
  --cirrusky-atmosphere-image:
    radial-gradient(circle at 8% 5%, rgb(242 126 70 / 12%) 0%, transparent 35%),
    radial-gradient(circle at 92% 12%, rgb(215 92 134 / 9%) 0%, transparent 36%),
    radial-gradient(circle at 74% 94%, rgb(132 93 190 / 8%) 0%, transparent 38%);
}

html[data-cirrusky-background="aurora"] {
  --cirrusky-selected-base: #eff8f2;
  --cirrusky-selected-image:
    radial-gradient(ellipse at 8% 7%, rgb(190 235 207 / 72%) 0%, transparent 43%),
    radial-gradient(ellipse at 92% 10%, rgb(190 225 246 / 68%) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 94%, rgb(217 203 244 / 58%) 0%, transparent 45%),
    linear-gradient(145deg, #eff9f1 0%, #edf7f8 50%, #f4f0fa 100%);
  --cirrusky-atmosphere-image:
    radial-gradient(circle at 8% 7%, rgb(62 174 104 / 11%) 0%, transparent 35%),
    radial-gradient(circle at 92% 10%, rgb(52 148 204 / 9%) 0%, transparent 37%),
    radial-gradient(circle at 72% 94%, rgb(128 86 196 / 8%) 0%, transparent 38%);
}

html[data-cirrusky-background="sage"] {
  --cirrusky-selected-base: #f4f9e0;
  --cirrusky-selected-image: none;
  --cirrusky-atmosphere-image: linear-gradient(rgb(156 190 99 / 8%), rgb(156 190 99 / 8%));
}

html[data-cirrusky-background="slate"] {
  --cirrusky-selected-base: #eceff1;
  --cirrusky-selected-image: none;
  --cirrusky-atmosphere-image: linear-gradient(rgb(117 137 151 / 7%), rgb(117 137 151 / 7%));
}

html[data-cirrusky-background]:not([data-cirrusky-background="original"]) {
  min-height: 100%;
  background-color: var(--cirrusky-page-base) !important;
}

html[data-cirrusky-background]:not([data-cirrusky-background="original"]) body {
  min-height: 100vh;
  background-color: var(--cirrusky-page-base) !important;
  background-image: var(--cirrusky-page-image) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100vh !important;
  background-attachment: fixed !important;
}

/* This low-strength overlay keeps the palette perceptible even when a theme
   paints an opaque outer wrapper. It never receives pointer or keyboard input. */
.cirrusky-background-atmosphere {
  position: fixed;
  z-index: 9990;
  inset: 0;
  background-image: var(--cirrusky-atmosphere-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

html[data-cirrusky-background="original"] .cirrusky-background-atmosphere {
  display: none;
}

.cirrusky-background-picker {
  position: fixed;
  z-index: 100000;
  inset-inline-start: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  color: var(--cirrusky-picker-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.25;
}

.cirrusky-background-picker button {
  appearance: none;
  border: 1px solid var(--cirrusky-picker-border);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cirrusky-background-picker__toggle {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  background: var(--cirrusky-picker-control);
  box-shadow: 0 8px 24px var(--cirrusky-picker-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.cirrusky-background-picker__toggle:hover,
.cirrusky-background-picker__toggle:focus-visible {
  background: var(--cirrusky-picker-hover);
  box-shadow: 0 10px 27px var(--cirrusky-picker-shadow);
  transform: translateY(-1px);
}

.cirrusky-background-picker__toggle:focus-visible,
.cirrusky-background-picker__choice:focus-visible {
  outline: 2px solid rgb(37 123 193 / 85%);
  outline-offset: 2px;
}

.cirrusky-background-picker__dots {
  display: grid;
  width: 22px;
  height: 22px;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 3px;
  place-content: center;
}

.cirrusky-background-picker__dots i {
  display: block;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(55 60 70 / 10%);
}

.cirrusky-background-picker__dots i:nth-child(1) { background: #f0bfa4; }
.cirrusky-background-picker__dots i:nth-child(2) { background: #a9d1ec; }
.cirrusky-background-picker__dots i:nth-child(3) { background: #b8ddc4; }
.cirrusky-background-picker__dots i:nth-child(4) { background: #cdbce7; }

.cirrusky-background-picker__panel {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 10px);
  width: 168px;
  padding: 8px;
  border: 1px solid var(--cirrusky-picker-border);
  border-radius: 14px;
  background: var(--cirrusky-picker-surface);
  box-shadow: 0 13px 35px var(--cirrusky-picker-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom left;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.cirrusky-background-picker[data-open="true"] .cirrusky-background-picker__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.cirrusky-background-picker__title {
  margin: 0;
  padding: 6px 7px 8px;
  color: var(--cirrusky-picker-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.cirrusky-background-picker__choices {
  display: grid;
  gap: 3px;
}

.cirrusky-background-picker__choice {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  padding: 6px 7px;
  border-color: transparent !important;
  border-radius: 10px;
  background: transparent;
  text-align: start;
  transition: background-color 140ms ease;
}

.cirrusky-background-picker__choice:hover,
.cirrusky-background-picker__choice[aria-pressed="true"] {
  background: var(--cirrusky-picker-hover);
}

.cirrusky-background-picker__choice[aria-pressed="true"] {
  font-weight: 650;
}

.cirrusky-background-picker__swatch {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cirrusky-picker-border);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
}

[data-background-choice="mist"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-mist); }
[data-background-choice="original"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-original); }
[data-background-choice="dawn"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-dawn); }
[data-background-choice="aurora"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-aurora); }
[data-background-choice="sage"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-sage); }
[data-background-choice="slate"] .cirrusky-background-picker__swatch { background: var(--cirrusky-swatch-slate); }

@media (prefers-reduced-motion: reduce) {
  .cirrusky-background-picker *,
  .cirrusky-background-picker *::before,
  .cirrusky-background-picker *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .cirrusky-background-picker,
  .cirrusky-background-atmosphere {
    display: none !important;
  }
}