:root {
  --ink: #0b0b0c;
  --text: #f4f5f6;
  --text-dim: rgba(244, 245, 246, 0.52);
  --spectrum: linear-gradient(90deg, #025659, #04b0b0, #14bbc8, #8dc53e, #ffb80e, #f68026, #ee4131, #ca2d94, #634a9e, #0458c6);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Canvas behind the design. Swap --canvas-image for one of the alternates
     below to change the pattern; nothing else needs to move. */
  --canvas-mark: rgba(255, 255, 255, 0.13);
  --canvas-image: repeating-linear-gradient(45deg, var(--canvas-mark) 0 1px, transparent 1px 10px);
  --canvas-size: auto;

  /* Hatch is the default because it still reads as a backdrop in the narrow
     gutter left beside a 1440 design. Two alternates, one line to swap:

     Dot grid:
     --canvas-image: radial-gradient(var(--canvas-mark) 1px, transparent 1px);
     --canvas-size: 22px 22px;

     Graph paper:
     --canvas-image: linear-gradient(var(--canvas-mark) 1px, transparent 1px),
                     linear-gradient(90deg, var(--canvas-mark) 1px, transparent 1px);
     --canvas-size: 40px 40px, 40px 40px; */
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  /* Transparent on purpose: an opaque body background paints over the negative
     z-index canvas layer below, since body is not its own stacking context. */
  background: transparent;
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

/* Fixed layer rather than a background on body: the pattern stays put while a
   10000px design scrolls past it, and it never repaints per scroll frame. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image: var(--canvas-image);
  background-size: var(--canvas-size);
  pointer-events: none;
}

/* ---------- the design ---------- */

.stage {
  padding: 0;
  /* Clip, not hidden: the incoming sheet starts off to one side and must not
     add a horizontal scrollbar, but the page still scrolls vertically. */
  overflow-x: clip;
}

.sheet {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-soft);
}

.sheet[hidden] { display: none; }

/* A concept later in the list arrives from the right, an earlier one from the
   left, so the movement matches the direction you moved in the navigator. */
.sheet.from-right {
  opacity: 0;
  transform: translateX(140px);
}

.sheet.from-left {
  opacity: 0;
  transform: translateX(-140px);
}

.plate {
  display: block;
  background: #fff;
  /* Hairline edge so the design reads as a sheet laid on the canvas. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  /* Tiles overlap by one pixel so scaling can never open a hairline seam. */
  margin-bottom: -1px;
}

.plate img.last { margin-bottom: 0; }

/* ---------- navigator island ---------- */

.island {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 35;
  padding: 6px;
  border-radius: 999px;
  background: rgba(22, 22, 26, 0.68);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: calc(100vw - 32px);
  overflow: hidden;
}

.island-track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.island-track::-webkit-scrollbar { display: none; }

.thumb {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  background: #fff;
  transform: translateX(0);
  transition: transform 340ms var(--ease-soft), width 340ms var(--ease-soft);
  pointer-events: none;
}

.chip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 200ms var(--ease-out), transform 140ms var(--ease-out);
}

.chip:hover { color: var(--text); }
.chip:active { transform: scale(0.97); }
.chip[aria-selected="true"] { color: var(--ink); }

.chip .num {
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: center;
}

.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ---------- loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out), transform 420ms var(--ease-soft);
}

.loader.done {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.02);
  pointer-events: none;
}

.loader-inner {
  width: min(420px, calc(100vw - 48px));
}

.loader-kicker {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 13px;
}

.loader-title {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 560;
}

.loader-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--spectrum);
  background-size: 420px 100%;
  transition: width 520ms var(--ease-soft);
}

.loader-ticks {
  display: flex;
  gap: 6px;
  margin: 14px 0 0;
}

.loader-ticks i {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 300ms var(--ease-out);
}

.loader-ticks i.on { background: rgba(255, 255, 255, 0.7); }

.loader-count {
  margin: 16px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.loader-weight { margin-left: 8px; opacity: 0.7; }

/* ---------- reduced motion / transparency ---------- */

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .thumb,
  .loader,
  .loader-bar span { transition-duration: 160ms; }
  .sheet.from-right,
  .sheet.from-left { transform: none; }
  .loader.done { filter: none; transform: none; }
  .chip:active { transform: none; }
}

@media (prefers-contrast: more) {
  body::before { background-image: none; }
  .plate { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); }
}

@media (prefers-reduced-transparency: reduce) {
  .island {
    background: #16161a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}