.stack {
  gap: 3rem;
  gap: var(--size-8, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.stack > * + * {
  margin-top: var(--size-3);
  margin-bottom: var(--size-3); }

.stack > * {
  margin-top: 0;
  margin-bottom: 0; }

header {
  min-height: var(--size-8); }

body > header {
  background-color: var(--gray-10); }

body {
  margin-left: var(--size-fluid-5);
  margin-right: var(--size-fluid-5); }

header {
  margin-top: var(--size-6);
  margin-bottom: var(--size-6); }

p, .list-view {
  margin-top: var(--size-4);
  margin-bottom: var(--size-4);
  max-width: var(--size-content-3); }

:where(html) {
  --link: var(--indigo-7);
  --link-visited: var(--purple-7);
  --text-1: var(--gray-12);
  --text-2: var(--gray-7);
  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);
  --scrollthumb-color: var(--gray-7);
  -webkit-text-size-adjust: none;
  accent-color: var(--brand, var(--link));
  background-color: var(--surface-1);
  height: 100%;
  caret-color: var(--brand, var(--link));
  color: var(--text-1);
  --csstools-color-scheme--dark:  ;
  color-scheme: light;
  font-family: var(--font-sans);
  line-height: var(--font-lineheight-3);
  scrollbar-color: var(--scrollthumb-color) transparent; }

@media (prefers-color-scheme: dark) {
  :where(html) {
    --link:var(--indigo-3);
    --link-visited:var(--purple-3);
    --text-1:var(--gray-1);
    --text-2:var(--gray-4);
    --surface-1:var(--gray-9);
    --surface-2:var(--gray-8);
    --surface-3:var(--gray-7);
    --surface-4:var(--gray-6);
    --scrollthumb-color:var(--gray-6);
    --shadow-strength:10%;
    --shadow-color:220 40% 2%;
    --csstools-color-scheme--dark: initial;
    color-scheme: dark; } }