/* eyesclosed site — the few pieces bundle.css doesn't carry. Load after it. */

/* The page sits on night, the theme's own background, instead of the system's bg. */
:root { --bg: #111214; }

.ec-hero { margin: 0; }
.ec-hero .ec-quiet { white-space: nowrap; }
.hero-glyph { display: block; width: 44px; height: 22px; margin-bottom: var(--space-6); color: #cdcfd1; }

/* ── One screen ───────────────────────────────────────────────────────────
   On desktops the landing is a single screen that never scrolls: the statement
   and the palette sit centered in the column, the footer at the bottom, the
   panel on the right. Phones (and very short windows) scroll as usual, with the
   hero filling the first screen. */
@media (max-width: 1023px), (max-height: 599px) {
  .ec-hero { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  html, body { height: 100%; overflow: hidden; }
  .ec-page { box-sizing: border-box; display: flex; flex-direction: column; height: 100svh; }
  .ec-page > main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-16); }
  .ec-footer { margin-top: 0; padding-bottom: var(--space-16); }
}

/* ── The panel: the wallpaper drifting left on its own, forever. The photo
   alternates with its mirror image, so every seam matches; the track holds two
   such pairs and slides by one pair, then starts over where it looks the same.
   Desktops only; phones get the still photo under the hero. The photo is
   moonrise.webp (1877px) and moonrise-1000.webp, for 1x screens and phones. ── */
.scroll-panel { display: none; }
.hero-photo { display: block; width: 100%; height: auto; margin-top: var(--space-10); border-radius: var(--radius-md); }
@media (min-width: 1024px) {
  .ec-page { padding-right: calc(var(--ec-stage-w) + var(--space-16)); }
  .scroll-panel {
    display: block; position: fixed; top: var(--inset-stage); right: var(--inset-stage); bottom: var(--inset-stage);
    width: var(--ec-stage-w); border-radius: var(--radius-md); overflow: hidden;
  }
  .scroll-track { display: flex; width: max-content; height: 100%; animation: drift 120s linear infinite; }
  /* Backgrounds rather than <img>, so only desktops download the photo, once for all four. */
  .scroll-track span {
    flex: none; height: 100%; aspect-ratio: 1877 / 2286;
    background: url("moonrise.webp") center / cover;
    background-image: image-set(url("moonrise-1000.webp") 1x, url("moonrise.webp") 2x);
  }
  .scroll-track .flip { transform: scaleX(-1); }
  .hero-photo { display: none; }
}
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .scroll-track { animation: none; } }

/* ── Palette: the 15 colors as chips, read down the columns ────────────── */
.palette { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1023px), (max-height: 599px) { .palette { margin: var(--space-14) 0 0; } }

/* Hex, RGB or HSL for every value. The current one is fg. */
.formats { display: inline-flex; gap: var(--space-4); font-size: 14px; line-height: 20px; letter-spacing: 0; }
.formats[hidden] { display: none; }
.formats button {
  appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--fg-muted); cursor: pointer; transition: color 0.2s;
}
.formats button:hover, .formats button[aria-pressed="true"] { color: var(--fg); }

.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-10); }
@container (min-width: 440px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; } }
@container (min-width: 700px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); } }

/* A chip copies its value; "Copied" sits over the value so nothing shifts. */
.chip {
  box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-1) 0; border: 0; background: none; appearance: none;
  font: inherit; font-size: 15px; line-height: 24px; letter-spacing: 0; color: var(--fg); text-align: left; cursor: pointer;
}
.swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px var(--shade); }
.chip-value {
  position: relative; font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
  color: var(--fg-muted); transition: color 0.2s;
}
.chip:hover .chip-value { color: var(--fg); }
.chip-value::after { content: "Copied"; position: absolute; right: 0; top: 0; color: var(--fg); visibility: hidden; }
.chip.copied .v { visibility: hidden; }
.chip.copied .chip-value::after { visibility: visible; }