:root {
  --space-1: var(--size-2, 0.5rem);
  --space-2: var(--size-3, 0.75rem);
  --space-3: var(--size-4, 1rem);
  --space-4: var(--size-5, 1.5rem);
  --space-5: var(--size-7, 2.5rem);
  --radius: var(--radius-md, 18px);
  --surface-1: var(--surface-color, #121116);
  --surface-2: color-mix(in oklab, var(--surface-1) 92%, white 8%);
  --surface-3: color-mix(in oklab, var(--surface-1) 86%, white 14%);
  --muted: var(--color-muted, #aca2b2);
}

.stack > * + * {
  margin-top: var(--stack-space, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}
.cluster .push {
  margin-left: auto;
}

.center {
  margin-inline: auto;
  max-width: var(--center-max, 72ch);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-4));
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999);
}
.switcher > :nth-last-child(n + 3),
.switcher > :nth-last-child(n + 3) ~ * {
  flex-basis: 100%;
}

.sidebar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(15rem, 22rem) 1fr;
}
@media (max-width: 800px) {
  .sidebar {
    grid-template-columns: 1fr;
  }
}
.sidebar > aside {
  position: sticky;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  align-self: start;
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--surface-1), white 10%);
  box-shadow: var(
    --shadow-soft,
    0 18px 38px rgba(6, 3, 10, 0.45)
  );
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
  text-decoration: none;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(
    --shadow-hard,
    0 24px 64px rgba(10, 5, 16, 0.55)
  );
}

.pad-1 {
  padding: var(--space-1);
}
.pad-2 {
  padding: var(--space-2);
}
.pad-3 {
  padding: var(--space-3);
}
.mar-0 {
  margin: 0;
}
.mt-2 {
  margin-top: var(--space-2);
}
.mb-2 {
  margin-bottom: var(--space-2);
}

.num {
  font-variant-numeric: tabular-nums;
}