/* Demo styling only; all positioning comes from data-⚓️-* attributes. */
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 250;
}

:root {
  --tile: 6rem;
  color-scheme: dark;
  background: oklch(17% 0.01 260);
  color: oklch(88% 0.01 260);
  font: 400 1rem/1.5 system-ui, sans-serif;
}

body {
  margin: 0;
  padding: clamp(1.25rem, 5vw, 3rem);
}

header {
  max-width: 60ch;
  margin-block-end: 2rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header p {
  margin: 0;
  color: oklch(70% 0.01 260);
}

code {
  font: 0.9em ui-monospace, monospace;
  color: oklch(85% 0.08 200);
  white-space: nowrap;
}

a { color: oklch(80% 0.1 200); }

/* The grid: plain CSS grid, reflows instantly like any grid. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  gap: 1rem;
  padding-inline-end: 1rem;
  border-inline-end: 2px dashed oklch(40% 0.02 260);
  resize: horizontal;
  overflow: hidden;
  min-width: calc(var(--tile) + 1rem);
}

/* Invisible structure: the grid item that actually occupies a track. */
.cell {
  aspect-ratio: 1;
  height: auto;
  --hue: calc(200 + sibling-index() * 5);
}

/* The visible tile, anchored to its cell. Size and glide come from the
   library (data-⚓️-fill sizes it from the cell; data-⚓️-transition="glide"
   animates it) — this rule is only looks. */
.tile {
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: oklch(30% 0.07 var(--hue));
  border: 1px solid oklch(45% 0.09 var(--hue));
  color: oklch(92% 0.04 var(--hue));
  font: 600 1.5rem/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}