@layer cfc.reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  html {
    hanging-punctuation: first last;
    interpolate-size: allow-keywords;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    min-height: 100dvh;
    font-family: var(--cfc-font-body);
    font-size: var(--cfc-fs-md);
    font-weight: 450;
    line-height: var(--cfc-lh-body);
    color: var(--cfc-fg);
    background-color: var(--cfc-bg);
    background-image: radial-gradient(1200px 700px at 12% -10%,
      color-mix(in oklch, var(--cfc-accent) calc(8% + var(--cfc-breath) * 6%), transparent),
      transparent 55%),
    radial-gradient(900px 520px at 110% 8%,
      color-mix(in oklch, var(--cfc-accent) calc(5% + var(--cfc-breath) * 4%), transparent),
      transparent 50%);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background-attachment: fixed;
    margin: 0;
  }

  img, svg, video, canvas, picture {
    max-width: 100%;
    height: auto;
    display: block;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--cfc-font-display);
    font-weight: 560;
    line-height: var(--cfc-lh-tight);
    letter-spacing: var(--cfc-tracking-display);
    text-wrap: balance;
    color: var(--cfc-fg);
    margin: 0;
  }

  p, li, blockquote, figcaption {
    text-wrap: pretty;
  }

  p, figure, blockquote, ul, ol, dl, pre {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  a {
    color: var(--cfc-accent);
    text-underline-offset: .18em;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--cfc-accent);
    outline-offset: 3px;
  }

  ::selection {
    background: color-mix(in oklch, var(--cfc-accent) 38%, transparent);
    color: var(--cfc-fg);
  }

  dialog {
    color: inherit;
  }

  [hidden] {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html:focus-visible {
      scroll-behavior: auto;
    }
  }
}

@layer cfc.tokens {
  :root {
    --cfc-hue: 258;
    --cfc-bg: light-dark(oklch(97.5% .01 90), oklch(.145 .02 var(--cfc-hue)));
    --cfc-bg-raised: light-dark(oklch(99.5% .008 90), oklch(.188 .024 var(--cfc-hue)));
    --cfc-bg-sink: light-dark(oklch(94.5% .012 90), oklch(.118 .018 var(--cfc-hue)));
    --cfc-fg: light-dark(oklch(.22 .03 var(--cfc-hue)), oklch(95.5% .012 90));
    --cfc-fg-muted: light-dark(oklch(.4 .024 var(--cfc-hue)), oklch(.76 .02 var(--cfc-hue)));
    --cfc-fg-faint: light-dark(oklch(.52 .018 var(--cfc-hue)), oklch(.6 .018 var(--cfc-hue)));
    --cfc-accent: light-dark(oklch(.46 .16 var(--cfc-accent-hue)), oklch(.8 .12 var(--cfc-accent-hue)));
    --cfc-accent-soft: color-mix(in oklch, var(--cfc-accent) 18%, transparent);
    --cfc-accent-fg: light-dark(oklch(99% .01 95), oklch(.18 .04 var(--cfc-hue)));
    --cfc-light: light-dark(oklch(100% .02 95), oklch(88% .04 95));
    --cfc-line: color-mix(in oklch, var(--cfc-fg) 12%, transparent);
    --cfc-line-strong: color-mix(in oklch, var(--cfc-fg) 24%, transparent);
    --cfc-danger: light-dark(oklch(52% .18 25), oklch(72% .14 25));
    --cfc-ok: light-dark(oklch(48% .12 155), oklch(78% .1 155));
    --cfc-font-display: "Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
    --cfc-font-body: "Commissioner", "Segoe UI", system-ui, sans-serif;
    --cfc-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
    --cfc-fs-xs: clamp(.75rem, .7rem + .2vw, .8125rem);
    --cfc-fs-sm: clamp(.875rem, .82rem + .22vw, .9375rem);
    --cfc-fs-md: clamp(1rem, .94rem + .28vw, 1.125rem);
    --cfc-fs-lg: clamp(1.125rem, 1.02rem + .45vw, 1.35rem);
    --cfc-fs-xl: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
    --cfc-fs-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
    --cfc-fs-3xl: clamp(2.75rem, 1.4rem + 4.4vw, 5.75rem);
    --cfc-fs-hero: clamp(3.25rem, .6rem + 8.4vw, 9.25rem);
    --cfc-lh-tight: 1.05;
    --cfc-lh-snug: 1.25;
    --cfc-lh-body: 1.6;
    --cfc-tracking-display: -.032em;
    --cfc-tracking-caps: .14em;
    --cfc-measure: 66ch;
    --cfc-space-3xs: .125rem;
    --cfc-space-2xs: .25rem;
    --cfc-space-xs: .5rem;
    --cfc-space-sm: .75rem;
    --cfc-space-md: 1rem;
    --cfc-space-lg: 1.5rem;
    --cfc-space-xl: 2.25rem;
    --cfc-space-2xl: 3.5rem;
    --cfc-space-3xl: 5.5rem;
    --cfc-space-gutter: clamp(1.15rem, 4vw, 3rem);
    --cfc-width: 74rem;
    --cfc-radius-sm: .4rem;
    --cfc-radius-md: .85rem;
    --cfc-radius-lg: 1.35rem;
    --cfc-radius-xl: 1.85rem;
    --cfc-radius-full: 999px;
    --cfc-shadow-color: light-dark(oklch(.38 .05 var(--cfc-hue) / .16), oklch(.06 .03 var(--cfc-hue) / .62));
    --cfc-shadow: 0 1px 1px color-mix(in oklch, var(--cfc-shadow-color) 45%, transparent),
    0 calc(6px + var(--cfc-breath) * 6px) calc(22px + var(--cfc-breath) * 10px) calc(-4px + var(--cfc-breath) * 4px)
      color-mix(in oklch, var(--cfc-shadow-color) 75%, transparent);
    --cfc-shadow-awake: 0 1px 1px color-mix(in oklch, var(--cfc-shadow-color) 55%, transparent),
    0 18px 44px -10px color-mix(in oklch, var(--cfc-shadow-color) 95%, transparent),
    0 0 0 1px color-mix(in oklch, var(--cfc-accent) 28%, transparent),
    0 0 32px -8px color-mix(in oklch, var(--cfc-accent) 35%, transparent);
    --cfc-inset: inset 0 1px 0 color-mix(in oklch, var(--cfc-light) 22%, transparent),
    inset 0 -1px 0 color-mix(in oklch, var(--cfc-fg) 8%, transparent);
    --cfc-d-instant: 90ms;
    --cfc-d-fast: .18s;
    --cfc-d-mid: .34s;
    --cfc-d-slow: .68s;
    --cfc-breath-period: 8s;
    --cfc-hue-period: 22s;
    --cfc-ease-out: cubic-bezier(.16, 1, .3, 1);
    --cfc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --cfc-ease-spring: linear(0,
    .061,
    .241 4.6%,
    .458,
    .675 12.4%,
    .981,
    1.068 18.3%,
    1.104 20.7%,
    1.112,
    1.099 25.6%,
    1.019 32.4%,
    .99 35.3%,
    .978 38.6%,
    .985 43.5%,
    1.007 52.5%,
    1.001 62.3%,
    1);
    color-scheme: dark;
  }

  :root:has(#cfc-theme-light:checked) {
    color-scheme: light;
  }

  :root:has(#cfc-theme-dark:checked) {
    color-scheme: dark;
  }

  :root:has(#cfc-theme-system:checked) {
    color-scheme: light dark;
  }
}

@layer cfc.engine {
  :root {
    animation: cfc-breathe var(--cfc-breath-period) ease-in-out infinite alternate,
    cfc-hue-drift var(--cfc-hue-period) ease-in-out infinite alternate;
  }

  @keyframes cfc-breathe {
    from {
      --cfc-breath: 0;
    }

    to {
      --cfc-breath: 1;
    }
  }

  @keyframes cfc-hue-drift {
    from {
      --cfc-accent-hue: 248;
    }

    to {
      --cfc-accent-hue: 278;
    }
  }

  .cfc-pulse {
    --cfc-pulse-amp: .035;
    scale: calc(1 + var(--cfc-breath) * var(--cfc-pulse-amp));
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --cfc-breath: .5;
      --cfc-accent-hue: 258;
      animation: none;
    }

    .cfc-pulse {
      scale: 1;
    }
  }

  .cfc-awake {
    --cfc-awake: 0;
    transition: --cfc-awake var(--cfc-d-mid) var(--cfc-ease-spring),
    transform var(--cfc-d-mid) var(--cfc-ease-spring),
    translate var(--cfc-d-mid) var(--cfc-ease-spring),
    scale var(--cfc-d-mid) var(--cfc-ease-spring),
    box-shadow var(--cfc-d-mid) var(--cfc-ease-out),
    background-color var(--cfc-d-mid) var(--cfc-ease-out),
    border-color var(--cfc-d-fast) var(--cfc-ease-out),
    color var(--cfc-d-fast) var(--cfc-ease-out),
    filter var(--cfc-d-mid) var(--cfc-ease-out),
    opacity var(--cfc-d-fast) var(--cfc-ease-out);
  }

  .cfc-awake:hover, .cfc-awake:focus-visible, .cfc-awake:has(:focus-visible), .cfc-awake:has(:hover) {
    --cfc-awake: 1;
  }

  .cfc-lift:hover, .cfc-lift:focus-visible {
    translate: 0 -.15rem;
  }

  @media (hover: none) {
    .cfc-awake:hover, .cfc-awake:has(:hover) {
      --cfc-awake: 0;
    }

    .cfc-awake:focus-visible, .cfc-awake:has(:focus-visible) {
      --cfc-awake: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cfc-awake {
      transition-duration: .01ms;
    }

    .cfc-lift:hover, .cfc-lift:focus-visible {
      translate: none;
    }
  }

  @keyframes cfc-reveal {
    from {
      opacity: 0;
      filter: blur(8px);
      translate: 0 1.75rem;
    }

    to {
      opacity: 1;
      filter: none;
      translate: 0;
    }
  }

  @keyframes cfc-parallax-shift {
    from {
      translate: 0 10%;
    }

    to {
      translate: 0 -10%;
    }
  }

  @keyframes cfc-progress-fill {
    from {
      scale: 0 1;
    }

    to {
      scale: 1;
    }
  }

  @keyframes cfc-scrub-fade {
    from {
      opacity: .12;
    }

    to {
      opacity: 1;
    }
  }

  .cfc-reveal {
    animation: linear both cfc-reveal view();
    animation-range: entry cover 38%;
  }

  .cfc-reveal[data-delay="late"] {
    animation-range: entry 12% cover 52%;
  }

  .cfc-parallax {
    will-change: translate;
    animation: linear both cfc-parallax-shift view();
    animation-range: cover;
  }

  .cfc-progress {
    transform-origin: 0;
    animation: linear both cfc-progress-fill scroll(root);
  }

  .cfc-scrub {
    animation: linear both cfc-scrub-fade view();
    animation-range: cover 10% cover 70%;
  }

  .cfc-progress-bar {
    z-index: 40;
    pointer-events: none;
    background: var(--cfc-accent);
    transform-origin: 0;
    height: 2px;
    animation: linear both cfc-progress-fill scroll(root);
    position: fixed;
    inset: 0 0 auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .cfc-reveal, .cfc-parallax, .cfc-progress, .cfc-scrub, .cfc-progress-bar {
      opacity: 1;
      filter: none;
      animation: none;
      translate: none;
      scale: 1;
    }

    .cfc-progress-bar {
      display: none;
    }
  }

  .cfc-surface {
    --cfc-light-mix: calc(5% + (var(--cfc-breath) * 5%) + (var(--cfc-awake) * 10%));
    background-color: var(--cfc-bg-raised);
    background-image: linear-gradient(165deg,
    color-mix(in oklch, var(--cfc-light) var(--cfc-light-mix), transparent),
    transparent 46%);
    border: 1px solid color-mix(in oklch, var(--cfc-fg) calc(9% + var(--cfc-breath) * 7%), transparent);
    border-radius: var(--cfc-radius-lg);
    box-shadow: var(--cfc-shadow), var(--cfc-inset);
  }

  .cfc-surface.cfc-awake:hover, .cfc-surface.cfc-awake:focus-within {
    box-shadow: var(--cfc-shadow-awake);
    border-color: color-mix(in oklch, var(--cfc-accent) 38%, var(--cfc-line));
  }

  .cfc-orb {
    --cfc-pulse-amp: .045;
    aspect-ratio: 1;
    background: radial-gradient(circle at 32% 28%,
      color-mix(in oklch, var(--cfc-light) 78%, white),
      transparent 42%),
    radial-gradient(circle at 50% 54%,
      var(--cfc-accent),
      oklch(.28 .08 var(--cfc-accent-hue)));
    width: min(46vw, 18rem);
    box-shadow: 0 0 calc(1.6rem + var(--cfc-breath) * 2.4rem) color-mix(in oklch, var(--cfc-accent) 48%, transparent),
    inset 0 0 2.4rem color-mix(in oklch, var(--cfc-light) 28%, transparent);
    scale: calc(1 + var(--cfc-breath) * var(--cfc-pulse-amp));
    border-radius: 50%;
  }

  .cfc-hairline {
    background: color-mix(in oklch, var(--cfc-fg) calc(10% + var(--cfc-breath) * 12%), transparent);
    border: 0;
    height: 1px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cfc-orb {
      scale: 1;
    }
  }

  ::view-transition-old(root) {
    animation: .36s var(--cfc-ease-out) both cfc-vt-out;
  }

  ::view-transition-new(root) {
    animation: .5s var(--cfc-ease-out) both cfc-vt-in;
  }

  ::view-transition-old(cfc-title), ::view-transition-new(cfc-title) {
    height: auto;
    animation-duration: .52s;
    overflow: clip;
  }

  ::view-transition-old(cfc-hero), ::view-transition-new(cfc-hero) {
    height: auto;
    animation-duration: .64s;
    overflow: clip;
  }

  @keyframes cfc-vt-out {
    to {
      opacity: 0;
      filter: blur(10px);
    }
  }

  @keyframes cfc-vt-in {
    from {
      opacity: 0;
      filter: blur(10px);
    }
  }

  .cfc-title {
    view-transition-name: cfc-title;
  }

  .cfc-hero {
    view-transition-name: cfc-hero;
  }

  [popover] {
    transition: overlay var(--cfc-d-mid) allow-discrete,
    display var(--cfc-d-mid) allow-discrete,
    opacity var(--cfc-d-mid) var(--cfc-ease-out),
    scale var(--cfc-d-mid) var(--cfc-ease-spring),
    translate var(--cfc-d-mid) var(--cfc-ease-spring);
  }

  [popover]:popover-open {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    [popover]:popover-open {
      opacity: 0;
      scale: .96;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(cfc-title), ::view-transition-new(cfc-title), ::view-transition-old(cfc-hero), ::view-transition-new(cfc-hero) {
      animation: none;
    }

    [popover] {
      transition: none;
    }
  }
}

@layer cfc.primitives {
  .cfc-stack {
    align-items: stretch;
    gap: var(--cfc-gap, var(--cfc-space-md));
    flex-direction: column;
    display: flex;
  }

  .cfc-stack[data-gap="3xs"] {
    --cfc-gap: var(--cfc-space-3xs);
  }

  .cfc-stack[data-gap="2xs"] {
    --cfc-gap: var(--cfc-space-2xs);
  }

  .cfc-stack[data-gap="xs"] {
    --cfc-gap: var(--cfc-space-xs);
  }

  .cfc-stack[data-gap="sm"] {
    --cfc-gap: var(--cfc-space-sm);
  }

  .cfc-stack[data-gap="md"] {
    --cfc-gap: var(--cfc-space-md);
  }

  .cfc-stack[data-gap="lg"] {
    --cfc-gap: var(--cfc-space-lg);
  }

  .cfc-stack[data-gap="xl"] {
    --cfc-gap: var(--cfc-space-xl);
  }

  .cfc-stack[data-gap="2xl"] {
    --cfc-gap: var(--cfc-space-2xl);
  }

  .cfc-stack[data-gap="3xl"] {
    --cfc-gap: var(--cfc-space-3xl);
  }

  .cfc-cluster {
    align-items: center;
    gap: var(--cfc-gap, var(--cfc-space-sm));
    flex-wrap: wrap;
    display: flex;
  }

  .cfc-cluster[data-gap="3xs"] {
    --cfc-gap: var(--cfc-space-3xs);
  }

  .cfc-cluster[data-gap="2xs"] {
    --cfc-gap: var(--cfc-space-2xs);
  }

  .cfc-cluster[data-gap="xs"] {
    --cfc-gap: var(--cfc-space-xs);
  }

  .cfc-cluster[data-gap="sm"] {
    --cfc-gap: var(--cfc-space-sm);
  }

  .cfc-cluster[data-gap="md"] {
    --cfc-gap: var(--cfc-space-md);
  }

  .cfc-cluster[data-gap="lg"] {
    --cfc-gap: var(--cfc-space-lg);
  }

  .cfc-cluster[data-align="start"] {
    align-items: flex-start;
  }

  .cfc-cluster[data-align="end"] {
    align-items: flex-end;
  }

  .cfc-cluster[data-justify="between"] {
    justify-content: space-between;
  }

  .cfc-cluster[data-justify="center"] {
    justify-content: center;
  }

  .cfc-cluster[data-justify="end"] {
    justify-content: flex-end;
  }

  .cfc-reel {
    gap: var(--cfc-gap, var(--cfc-space-md));
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block: var(--cfc-space-xs);
    padding-inline: 1px;
    display: flex;
    overflow-x: auto;
  }

  .cfc-reel > * {
    scroll-snap-align: start;
    flex: none;
  }

  .cfc-reel[data-gap="lg"] {
    --cfc-gap: var(--cfc-space-lg);
  }

  .cfc-reel[data-gap="xl"] {
    --cfc-gap: var(--cfc-space-xl);
  }

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

  .cfc-grid[data-gap="sm"] {
    --cfc-gap: var(--cfc-space-sm);
  }

  .cfc-grid[data-gap="md"] {
    --cfc-gap: var(--cfc-space-md);
  }

  .cfc-grid[data-gap="lg"] {
    --cfc-gap: var(--cfc-space-lg);
  }

  .cfc-grid[data-gap="xl"] {
    --cfc-gap: var(--cfc-space-xl);
  }

  .cfc-grid[data-cols="2"] {
    --cfc-col: 22rem;
  }

  .cfc-grid[data-cols="3"] {
    --cfc-col: 16rem;
  }

  .cfc-grid[data-cols="4"] {
    --cfc-col: 12rem;
  }

  .cfc-grid[data-subgrid] {
    grid-template-columns: subgrid;
  }

  .cfc-frame {
    width: min(100% - var(--cfc-space-gutter) * 2, var(--cfc-width));
    margin-inline: auto;
    container-type: inline-size;
  }

  .cfc-frame[data-narrow] {
    --cfc-width: 44rem;
  }

  .cfc-frame[data-wide] {
    --cfc-width: 86rem;
  }

  .cfc-prose {
    max-width: var(--cfc-measure);
    font-size: var(--cfc-fs-lg);
    color: var(--cfc-fg-muted);
  }

  .cfc-prose > * + * {
    margin-block-start: .85em;
  }

  .cfc-prose :is(h1, h2, h3, h4) {
    color: var(--cfc-fg);
    margin-block-start: 1.4em;
  }

  .cfc-prose a {
    text-decoration-thickness: 1px;
  }

  .cfc-prose code {
    font-family: var(--cfc-font-mono);
    background: color-mix(in oklch, var(--cfc-fg) 8%, transparent);
    border-radius: var(--cfc-radius-sm);
    padding: .12em .38em;
    font-size: .86em;
  }

  .cfc-lede {
    font-size: var(--cfc-fs-xl);
    line-height: var(--cfc-lh-snug);
    color: var(--cfc-fg-muted);
    max-width: 28ch;
    font-family: var(--cfc-font-display);
    font-weight: 420;
  }

  .cfc-kicker {
    align-items: center;
    gap: var(--cfc-space-xs);
    width: fit-content;
    font-size: var(--cfc-fs-xs);
    letter-spacing: var(--cfc-tracking-caps);
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cfc-accent) 62%, var(--cfc-fg));
    font-weight: 650;
    display: inline-flex;
  }

  .cfc-surface {
    padding: var(--cfc-space-lg);
  }

  .cfc-surface[data-pad="sm"] {
    padding: var(--cfc-space-sm);
  }

  .cfc-surface[data-pad="md"] {
    padding: var(--cfc-space-md);
  }

  .cfc-surface[data-pad="lg"] {
    padding: var(--cfc-space-lg);
  }

  .cfc-surface[data-pad="xl"] {
    padding: var(--cfc-space-xl);
  }

  .cfc-surface[data-flush] {
    padding: 0;
    overflow: clip;
  }
}

@layer cfc.components {
  .cfc-btn {
    --cfc-awake: 0;
    justify-content: center;
    align-items: center;
    gap: var(--cfc-space-xs);
    border-radius: var(--cfc-radius-full);
    background: var(--cfc-accent);
    min-height: 2.7em;
    color: var(--cfc-accent-fg);
    font-family: var(--cfc-font-body);
    font-size: var(--cfc-fs-sm);
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: var(--cfc-inset);
    transition: transform var(--cfc-d-mid) var(--cfc-ease-spring),
    box-shadow var(--cfc-d-mid) var(--cfc-ease-out),
    background-color var(--cfc-d-fast) var(--cfc-ease-out),
    border-color var(--cfc-d-fast) var(--cfc-ease-out),
    color var(--cfc-d-fast) var(--cfc-ease-out);
    border: 1px solid #0000;
    padding: .65em 1.25em;
    font-weight: 650;
    text-decoration: none;
    display: inline-flex;
  }

  .cfc-btn:hover, .cfc-btn:focus-visible {
    --cfc-awake: 1;
    box-shadow: var(--cfc-shadow-awake);
    translate: 0 -.12rem;
  }

  .cfc-btn:active {
    translate: 0;
    scale: .98;
  }

  .cfc-btn[data-variant="ghost"] {
    background: color-mix(in oklch, var(--cfc-fg) 6%, transparent);
    color: var(--cfc-fg);
    border-color: var(--cfc-line);
    box-shadow: none;
  }

  .cfc-btn[data-variant="ghost"]:hover, .cfc-btn[data-variant="ghost"]:focus-visible {
    border-color: color-mix(in oklch, var(--cfc-accent) 40%, var(--cfc-line));
    background: color-mix(in oklch, var(--cfc-accent) 10%, transparent);
  }

  .cfc-btn[data-variant="quiet"] {
    color: var(--cfc-fg-muted);
    box-shadow: none;
    background: none;
  }

  .cfc-btn[data-variant="quiet"]:hover, .cfc-btn[data-variant="quiet"]:focus-visible {
    color: var(--cfc-fg);
    background: color-mix(in oklch, var(--cfc-fg) 6%, transparent);
    box-shadow: none;
  }

  .cfc-btn[data-size="sm"] {
    min-height: 2.15em;
    font-size: var(--cfc-fs-xs);
    padding: .4em .9em;
  }

  @media (prefers-reduced-motion: reduce) {
    .cfc-btn {
      transition: none;
    }

    .cfc-btn:hover, .cfc-btn:focus-visible {
      translate: none;
    }
  }

  .cfc-link {
    color: var(--cfc-fg);
    background-image: linear-gradient(90deg,
    color-mix(in oklch, var(--cfc-accent) calc(55% + var(--cfc-breath) * 20%), transparent),
    var(--cfc-accent));
    transition: color var(--cfc-d-fast) var(--cfc-ease-out),
    background-size var(--cfc-d-mid) var(--cfc-ease-spring);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    text-decoration: none;
  }

  .cfc-link:hover, .cfc-link:focus-visible {
    color: var(--cfc-accent);
    background-size: 100% .42em;
  }

  .cfc-link-quiet {
    color: var(--cfc-fg-muted);
    transition: color var(--cfc-d-fast) var(--cfc-ease-out);
    text-decoration: none;
  }

  .cfc-link-quiet:hover, .cfc-link-quiet:focus-visible {
    color: var(--cfc-fg);
  }

  .cfc-card {
    gap: var(--cfc-space-sm);
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .cfc-card-title {
    font-size: var(--cfc-fs-xl);
    text-wrap: balance;
  }

  .cfc-card-body {
    color: var(--cfc-fg-muted);
    font-size: var(--cfc-fs-md);
  }

  .cfc-card-meta {
    font-size: var(--cfc-fs-xs);
    letter-spacing: var(--cfc-tracking-caps);
    text-transform: uppercase;
    color: var(--cfc-fg-faint);
    margin-block-start: auto;
  }

  .cfc-theme-input {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .cfc-skip {
    inset: var(--cfc-space-sm) auto auto var(--cfc-space-sm);
    z-index: 60;
    border-radius: var(--cfc-radius-full);
    background: var(--cfc-accent);
    color: var(--cfc-accent-fg);
    padding: .5em .9em;
    font-weight: 650;
    text-decoration: none;
    position: absolute;
    translate: 0 -200%;
  }

  .cfc-skip:focus {
    translate: 0;
  }

  .cfc-nav-shell {
    z-index: 30;
    position: sticky;
    top: 0;
  }

  @supports (container-type: scroll-state) {
    .cfc-nav-shell {
      container-type: scroll-state;
    }

    @container scroll-state(stuck: top) {
      .cfc-nav {
        box-shadow: var(--cfc-shadow);
        border-bottom-color: color-mix(in oklch, var(--cfc-accent) 22%, var(--cfc-line));
      }
    }
  }

  .cfc-nav {
    justify-content: space-between;
    align-items: center;
    gap: var(--cfc-space-sm) var(--cfc-space-lg);
    padding-block: var(--cfc-space-sm);
    border-bottom: 1px solid color-mix(in oklch, var(--cfc-fg) calc(6% + var(--cfc-breath) * 8%), transparent);
    background: color-mix(in oklch, var(--cfc-bg) 90%, transparent);
    backdrop-filter: blur(18px) saturate(1.45);
    flex-wrap: wrap;
    display: flex;
  }

  .cfc-nav-mark {
    font-family: var(--cfc-font-display);
    font-size: var(--cfc-fs-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cfc-fg);
    view-transition-name: cfc-mark;
    font-weight: 620;
    text-decoration: none;
  }

  .cfc-nav-links {
    font-size: var(--cfc-fs-sm);
  }

  .cfc-nav-links > a {
    color: var(--cfc-fg-muted);
    transition: color var(--cfc-d-fast) var(--cfc-ease-out);
    padding: .3em .15em;
    text-decoration: none;
  }

  .cfc-nav-links > a:hover, .cfc-nav-links > a[aria-current="page"] {
    color: var(--cfc-fg);
  }

  .cfc-theme {
    border: 1px solid var(--cfc-line);
    border-radius: var(--cfc-radius-full);
    background: color-mix(in oklch, var(--cfc-bg-sink) 80%, transparent);
    padding: .15rem;
    display: inline-flex;
  }

  .cfc-theme label {
    border-radius: var(--cfc-radius-full);
    font-size: var(--cfc-fs-xs);
    color: var(--cfc-fg-muted);
    cursor: pointer;
    padding: .28em .7em;
    font-weight: 600;
  }

  :root:has(#cfc-theme-system:checked) .cfc-theme label[for="cfc-theme-system"], :root:has(#cfc-theme-dark:checked) .cfc-theme label[for="cfc-theme-dark"], :root:has(#cfc-theme-light:checked) .cfc-theme label[for="cfc-theme-light"] {
    background: var(--cfc-bg-raised);
    color: var(--cfc-fg);
    box-shadow: var(--cfc-shadow);
  }

  .cfc-footer {
    padding-block: var(--cfc-space-xl);
    border-top: 1px solid var(--cfc-line);
    color: var(--cfc-fg-faint);
    font-size: var(--cfc-fs-sm);
    margin-block-start: var(--cfc-space-3xl);
  }

  @media (width < 50rem) {
    .cfc-nav-links {
      width: 100%;
    }

    .cfc-theme {
      justify-content: space-between;
      width: 100%;
    }
  }

  .cfc-hero {
    min-height: 100dvh;
    padding-block: var(--cfc-space-3xl) var(--cfc-space-2xl);
    align-content: end;
    display: grid;
    position: relative;
  }

  .cfc-hero-title {
    font-size: var(--cfc-fs-hero);
    max-width: 12ch;
    font-weight: 560;
    line-height: .92;
  }

  .cfc-hero-stage {
    min-height: 70dvh;
    padding-block: var(--cfc-space-3xl);
    align-content: center;
    display: grid;
  }

  .cfc-field {
    align-items: stretch;
    gap: var(--cfc-space-2xs);
    flex-direction: column;
    display: flex;
  }

  .cfc-field > span, .cfc-field > label {
    font-size: var(--cfc-fs-sm);
    color: var(--cfc-fg);
    font-weight: 600;
  }

  .cfc-field small {
    color: var(--cfc-fg-faint);
    font-size: var(--cfc-fs-xs);
  }

  .cfc-field :is(input, textarea, select) {
    border: 1px solid var(--cfc-line);
    border-radius: var(--cfc-radius-md);
    background: var(--cfc-bg-sink);
    width: 100%;
    min-height: 2.7em;
    color: var(--cfc-fg);
    transition: border-color var(--cfc-d-fast) var(--cfc-ease-out),
    box-shadow var(--cfc-d-fast) var(--cfc-ease-out),
    background-color var(--cfc-d-fast) var(--cfc-ease-out);
    padding: .65em .9em;
  }

  .cfc-field textarea {
    resize: vertical;
    field-sizing: content;
    min-height: 8rem;
  }

  .cfc-field :is(input, textarea, select)::placeholder {
    color: var(--cfc-fg-faint);
  }

  .cfc-field:focus-within :is(input, textarea, select) {
    border-color: var(--cfc-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cfc-accent) 22%, transparent);
    background: var(--cfc-bg-raised);
  }

  .cfc-field:has(:user-invalid) :is(input, textarea, select), .cfc-field:has(:invalid:not(:placeholder-shown):not(:focus)) :is(input, textarea, select) {
    border-color: var(--cfc-danger);
  }

  .cfc-field:has(:user-valid:not(:placeholder-shown)) :is(input, textarea, select) {
    border-color: color-mix(in oklch, var(--cfc-ok) 70%, var(--cfc-line));
  }

  .cfc-accordion {
    border: 1px solid var(--cfc-line);
    border-radius: var(--cfc-radius-lg);
    background: var(--cfc-bg-raised);
    flex-direction: column;
    display: flex;
    overflow: clip;
  }

  .cfc-accordion details {
    interpolate-size: allow-keywords;
    border-bottom: 1px solid var(--cfc-line);
  }

  .cfc-accordion details:last-child {
    border-bottom: 0;
  }

  .cfc-accordion summary {
    justify-content: space-between;
    align-items: center;
    gap: var(--cfc-space-md);
    padding: var(--cfc-space-md) var(--cfc-space-lg);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
  }

  .cfc-accordion summary::-webkit-details-marker {
    display: none;
  }

  .cfc-accordion summary:after {
    content: "";
    width: .5rem;
    height: .5rem;
    transition: rotate var(--cfc-d-mid) var(--cfc-ease-spring);
    border-bottom: 1.5px solid;
    border-right: 1.5px solid;
    translate: 0 -.12em;
    rotate: 45deg;
  }

  .cfc-accordion details[open] summary:after {
    translate: 0 .12em;
    rotate: 225deg;
  }

  .cfc-accordion details::details-content {
    opacity: 0;
    height: 0;
    transition: height var(--cfc-d-mid) var(--cfc-ease-out),
    opacity var(--cfc-d-fast) var(--cfc-ease-out),
    content-visibility var(--cfc-d-mid) allow-discrete;
    display: block;
    overflow: clip;
  }

  .cfc-accordion details[open]::details-content {
    opacity: 1;
    height: auto;
  }

  .cfc-accordion .cfc-accordion-body {
    padding: 0 var(--cfc-space-lg) var(--cfc-space-lg);
    color: var(--cfc-fg-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .cfc-accordion details::details-content, .cfc-accordion summary:after {
      transition: none;
    }
  }

  .cfc-dialog {
    width: min(36rem, calc(100% - var(--cfc-space-xl)));
    padding: var(--cfc-space-xl);
    border: 1px solid var(--cfc-line-strong);
    border-radius: var(--cfc-radius-xl);
    background: var(--cfc-bg-raised);
    color: var(--cfc-fg);
    box-shadow: var(--cfc-shadow-awake);
    margin: auto;
  }

  .cfc-dialog::backdrop {
    background: oklch(.12 .03 var(--cfc-hue) / .62);
    backdrop-filter: blur(8px);
    transition: opacity var(--cfc-d-mid) var(--cfc-ease-out);
  }

  .cfc-dialog h2 {
    font-size: var(--cfc-fs-xl);
    margin-block-end: var(--cfc-space-sm);
  }

  .cfc-dialog p {
    color: var(--cfc-fg-muted);
  }

  .cfc-dialog-actions {
    justify-content: flex-end;
    gap: var(--cfc-space-sm);
    margin-block-start: var(--cfc-space-lg);
    display: flex;
  }

  @starting-style {
    .cfc-dialog:popover-open {
      translate: 0 .6rem;
    }
  }

  .cfc-tooltip {
    border: 1px solid var(--cfc-line);
    border-radius: var(--cfc-radius-md);
    background: var(--cfc-bg-raised);
    max-width: 18rem;
    color: var(--cfc-fg);
    font-size: var(--cfc-fs-sm);
    line-height: var(--cfc-lh-snug);
    box-shadow: var(--cfc-shadow);
    position-area: block-start;
    position-try-fallbacks: flip-block, flip-inline;
    margin: 0;
    padding: .55em .8em;
    position: absolute;
  }

  .cfc-tooltip:popover-open {
    opacity: 1;
  }

  .cfc-tabs {
    gap: var(--cfc-space-md);
    display: grid;
  }

  .cfc-tabs > input {
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .cfc-tabs-list {
    gap: var(--cfc-space-3xs);
    border: 1px solid var(--cfc-line);
    border-radius: var(--cfc-radius-full);
    background: var(--cfc-bg-sink);
    flex-wrap: wrap;
    width: fit-content;
    padding: .2rem;
    display: flex;
  }

  .cfc-tabs-list label {
    border-radius: var(--cfc-radius-full);
    font-size: var(--cfc-fs-sm);
    color: var(--cfc-fg-muted);
    cursor: pointer;
    transition: background-color var(--cfc-d-fast) var(--cfc-ease-out),
    color var(--cfc-d-fast) var(--cfc-ease-out);
    padding: .45em 1em;
    font-weight: 600;
  }

  .cfc-tab-panel {
    display: none;
  }

  .cfc-tabs > input:first-of-type:checked ~ .cfc-tabs-list label:first-child, .cfc-tabs > input:nth-of-type(2):checked ~ .cfc-tabs-list label:nth-child(2), .cfc-tabs > input:nth-of-type(3):checked ~ .cfc-tabs-list label:nth-child(3), .cfc-tabs > input:nth-of-type(4):checked ~ .cfc-tabs-list label:nth-child(4) {
    background: var(--cfc-bg-raised);
    color: var(--cfc-fg);
    box-shadow: var(--cfc-shadow);
  }

  .cfc-tabs > input:first-of-type:checked ~ .cfc-tabs-panels > .cfc-tab-panel:first-child, .cfc-tabs > input:nth-of-type(2):checked ~ .cfc-tabs-panels > .cfc-tab-panel:nth-child(2), .cfc-tabs > input:nth-of-type(3):checked ~ .cfc-tabs-panels > .cfc-tab-panel:nth-child(3), .cfc-tabs > input:nth-of-type(4):checked ~ .cfc-tabs-panels > .cfc-tab-panel:nth-child(4) {
    display: block;
  }

  .cfc-tabs > input:focus-visible ~ .cfc-tabs-list {
    outline: 2px solid var(--cfc-accent);
    outline-offset: 3px;
  }

  .cfc-badge {
    border-radius: var(--cfc-radius-full);
    border: 1px solid color-mix(in oklch, var(--cfc-accent) 32%, var(--cfc-line));
    background: color-mix(in oklch, var(--cfc-accent) calc(12% + var(--cfc-breath) * 8%), transparent);
    width: fit-content;
    max-width: 100%;
    color: var(--cfc-accent);
    font-size: var(--cfc-fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    align-items: center;
    gap: .35em;
    padding: .22em .7em;
    font-weight: 650;
    display: inline-flex;
  }

  .cfc-badge[data-tone="mute"] {
    color: var(--cfc-fg-muted);
    border-color: var(--cfc-line);
    background: color-mix(in oklch, var(--cfc-fg) 6%, transparent);
  }

  .cfc-media {
    border-radius: var(--cfc-radius-lg);
    background: var(--cfc-bg-sink);
    border: 1px solid var(--cfc-line);
    overflow: clip;
  }

  .cfc-media > :is(img, video, iframe) {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .cfc-media[data-ratio="wide"] {
    aspect-ratio: 16 / 9;
  }

  .cfc-media[data-ratio="photo"] {
    aspect-ratio: 4 / 3;
  }

  .cfc-media[data-ratio="square"] {
    aspect-ratio: 1;
  }

  .cfc-media-caption {
    padding: var(--cfc-space-sm) var(--cfc-space-md);
    font-size: var(--cfc-fs-sm);
    color: var(--cfc-fg-muted);
  }
}

@layer cfc.utilities {
  .cfc-pause, .cfc-pause * {
    animation-play-state: paused !important;
  }

  .cfc-reveal-none {
    opacity: 1;
    filter: none;
    animation: none;
    translate: none;
  }

  .cfc-pulse-stop {
    --cfc-breath: .5;
    --cfc-pulse-amp: 0;
    animation: none;
    scale: 1;
  }

  .cfc-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .cfc-sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
}

@property --cfc-breath {
  syntax: "<number>";
  inherits: true;
  initial-value: .5;
}

@property --cfc-awake {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --cfc-accent-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 258;
}

@property --cfc-light-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 6%;
}

@property --cfc-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 258;
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}