@media screen {
  .debug * {
    border: 0;
    outline: 1px solid oklch(61% 0.27 15);
    outline-offset: 0;
  }

  :root {
    --font-sans:
      'Söhne', system-ui, -apple-system, BlinkMacSystemFont, 'Inter',
      'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-serif:
      'Martina Plantijn', 'IBM Plex Serif', 'Source Serif Pro', ui-serif, serif;
    --font-display: var(--font-serif);
    --font-mono:
      ui-monospace, SFMono-Regular, 'SF Mono', 'IBM Plex Mono', monospace;

    --focus-ring-color: var(--color-accent);
    --focus-ring-offset: calc(2 * var(--hairline));
    --focus-ring-style: solid;
    --focus-ring-width: calc(2 * var(--hairline));

    --ratio: 1.2;
    --s-8: calc(1rem * pow(var(--ratio), -8));
    --s-7: calc(1rem * pow(var(--ratio), -7));
    --s-7: calc(1rem * pow(var(--ratio), -7));
    --s-6: calc(1rem * pow(var(--ratio), -6));
    --s-5: calc(1rem * pow(var(--ratio), -5));
    --s-4: calc(1rem * pow(var(--ratio), -4));
    --s-3: calc(1rem * pow(var(--ratio), -3));
    --s-2: calc(1rem * pow(var(--ratio), -2));
    --s-1: calc(1rem * pow(var(--ratio), -1));
    --s0: 1rem;
    --s1: calc(1rem * pow(var(--ratio), 1));
    --s2: calc(1rem * pow(var(--ratio), 2));
    --s3: calc(1rem * pow(var(--ratio), 3));
    --s4: calc(1rem * pow(var(--ratio), 4));
    --s5: calc(1rem * pow(var(--ratio), 5));
    --s6: calc(1rem * pow(var(--ratio), 6));
    --s7: calc(1rem * pow(var(--ratio), 7));
    --s8: calc(1rem * pow(var(--ratio), 8));
    --s9: calc(1rem * pow(var(--ratio), 9));
    --s10: calc(1rem * pow(var(--ratio), 10));
    --s11: calc(1rem * pow(var(--ratio), 11));
    --s12: calc(1rem * pow(var(--ratio), 12));

    --r-8: calc(1em * pow(var(--ratio), -8));
    --r-7: calc(1em * pow(var(--ratio), -7));
    --r-6: calc(1em * pow(var(--ratio), -6));
    --r-5: calc(1em * pow(var(--ratio), -5));
    --r-4: calc(1em * pow(var(--ratio), -4));
    --r-3: calc(1em * pow(var(--ratio), -3));
    --r-2: calc(1em * pow(var(--ratio), -2));
    --r-1: calc(1em * pow(var(--ratio), -1));
    --r0: 1em;
    --r1: calc(1em * pow(var(--ratio), 1));
    --r2: calc(1em * pow(var(--ratio), 2));
    --r3: calc(1em * pow(var(--ratio), 3));
    --r4: calc(1em * pow(var(--ratio), 4));
    --r5: calc(1em * pow(var(--ratio), 5));
    --r6: calc(1em * pow(var(--ratio), 6));
    --r7: calc(1em * pow(var(--ratio), 7));
    --r8: calc(1em * pow(var(--ratio), 8));
    --r9: calc(1em * pow(var(--ratio), 9));
    --r10: calc(1em * pow(var(--ratio), 10));
    --r11: calc(1em * pow(var(--ratio), 11));
    --r12: calc(1em * pow(var(--ratio), 12));

    @supports not (width: calc(0px * pow(0, 0))) {
      --s-8: calc(var(--s-7) / var(--ratio));
      --s-7: calc(var(--s-6) / var(--ratio));
      --s-6: calc(var(--s-5) / var(--ratio));
      --s-5: calc(var(--s-4) / var(--ratio));
      --s-4: calc(var(--s-3) / var(--ratio));
      --s-3: calc(var(--s-2) / var(--ratio));
      --s-2: calc(var(--s-1) / var(--ratio));
      --s-1: calc(var(--s0) / var(--ratio));
      --s1: calc(var(--s0) * var(--ratio));
      --s2: calc(var(--s1) * var(--ratio));
      --s3: calc(var(--s2) * var(--ratio));
      --s4: calc(var(--s3) * var(--ratio));
      --s5: calc(var(--s4) * var(--ratio));
      --s6: calc(var(--s5) * var(--ratio));
      --s7: calc(var(--s6) * var(--ratio));
      --s8: calc(var(--s7) * var(--ratio));
      --s9: calc(var(--s8) * var(--ratio));
      --s10: calc(var(--s9) * var(--ratio));
      --s11: calc(var(--s10) * var(--ratio));
      --s11: calc(var(--s11) * var(--ratio));
    }

    --safe-padding-top: env(safe-area-inset-top, 0);
    --safe-padding-bottom: env(safe-area-inset-bottom, 0);
    --safe-padding-left: max(env(safe-area-inset-left, 0), var(--s2));
    --safe-padding-right: max(env(safe-area-inset-right, 0), var(--s2));

    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

    --bg-blur: blur(var(--s0)) saturate(130%);
    --content-width: min(48rem, 100%);
    --delineation: var(--hairline) solid var(--color-border);
    --border-decorative: var(--hairline) solid var(--color-border-decorative);
    --rounded: calc(infinity * 1px);

    --hairline: 0.5px;
    @media (prefers-contrast: more) {
      --hairline: max(0.05rem, 1px);
    }

    background-color: var(--color-bg);
    color: var(--color-fg);
    color-scheme: light only;
    font-family: var(--font-sans);
    font-size: clamp(100%, 82.61% + 0.8696dvi, 150%);
    font-variant-numeric: proportional-nums;
    font-weight: 400;
    text-combine-upright: digits;
  }

  ::selection {
    background-color: var(--color-selection);
  }

  :focus {
    outline-color: var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    outline-style: var(--focus-ring-style);
    outline-width: var(--focus-ring-width);
  }

  @supports selector(:focus-visible) {
    :focus {
      outline: none;
    }

    :focus-visible {
      outline-color: var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
      outline-style: var(--focus-ring-style);
      outline-width: var(--focus-ring-width);
    }
  }

  @media (prefers-color-scheme: dark) {
    html {
      --noise-mask-blend-mode: lighten;
      font-weight: 300;
    }
  }

  body {
    line-height: 1.6;
  }

  section {
    margin-trim: block;
  }

  hr {
    border-block-start: 0;
    border-block-end: var(--delineation);
  }

  /* p {
	font-optical-sizing: none;
	font-variation-settings: 'opsz' 16;
} */

  :where(h1, h2, h3, h4, h5, h6) {
    line-height: 1.15;
  }

  a {
    border-radius: var(--r-4);
    color: oklch(from currentColor l c h / 75%);
    font-weight: bold;
    text-decoration-color: var(--color-border);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0;
    transition: 100ms ease;
    transition-property: color, text-decoration-color;
  }

  a:hover:not([unavailable]) {
    color: var(--color-fg);
    text-decoration-color: var(--color-accent-warm);
  }

  a[unavailable] {
    cursor: not-allowed;
    text-decoration-style: wavy;
  }

  abbr,
  .caps {
    font-style: normal;
    font-variant-caps: all-small-caps;
  }

  span.caps {
    display: contents;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
    font-size: 83%;
    font-variant-numeric: lining-nums;
    font-weight: 475;
    letter-spacing: -0.01em;
  }

  code {
    background-color: oklch(from var(--color-fg-2) l c h / 8%);
    border-radius: var(--r-4);
    padding-block: 0.2em;
    padding-inline: 0.3em;
  }

  article,
  .prose {
    font-variant-numeric: oldstyle-nums proportional-nums;
  }

  /* https://piccalil.li/blog/my-favourite-3-lines-of-css */
  :is(.flow, .frame-content) > :not(script, style) + :not(script, style) {
    margin-block-start: var(--flow-space, 1lh);
  }

  :is(.flow, .frame-content) :is(ol, ul, dl):not([class]) > li + li,
  :is(.flow, .frame-content) :is(ol, ul, dl):not([class]) :is(ol, ul, dl) {
    margin-block-start: 0.5em;
  }

  :is(h1, h2, h3) {
    --flow-space: var(--s5);
  }
  :is(h4, h5, h6) {
    --flow-space: var(--s1);
  }
  :is(.flow, .frame-content) h2 {
    font-size: var(--s2);
    letter-spacing: -0.01em;
  }
  :is(.flow, .frame-content) h3 {
    font-size: var(--s1);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  :is(.flow, .frame-content) h4 {
    font-size: var(--s0);
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .lucide {
    aspect-ratio: 1;
    width: 1em;
  }

  /* Temporary */
  a[href='#'] {
    cursor: not-allowed;
  }
}