@layer site {
  :root {
    --ckcss-ink: #17211f;
    --ckcss-paper: #fbfaf5;
    --ckcss-accent: #e7613a;
    --ckcss-mint: #b8e1ca;
    --ckcss-rule: color-mix(in srgb, var(--ckcss-ink) 17%, transparent);
  }

  html { scroll-behavior: smooth; }
  body { background: var(--ckcss-paper); color: var(--ckcss-ink); }
  a { color: inherit; text-underline-offset: .18em; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3, .ckcss-brand { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
  h1 { font-size: clamp(3.1rem, 7vw, 6.4rem); line-height: .94; max-inline-size: 10ch; }
  h1 em { color: var(--ckcss-accent); font-weight: inherit; }
  h2 { font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1; max-inline-size: 15ch; }
  h3 { font-size: 1.45rem; line-height: 1.05; }

  .ckcss-header { border-block-end: 1px solid var(--ckcss-rule); }
  .ckcss-nav { min-block-size: 4.8rem; justify-content: space-between; align-items: center; }
  .ckcss-brand { color: var(--ckcss-ink); font-size: 1.7rem; font-weight: 700; text-decoration: none; }
  .ckcss-brand span { color: var(--ckcss-accent); }
  .ckcss-nav-links { font-size: .88rem; gap: clamp(.75rem, 3vw, 2rem); }
  .ckcss-nav-links a { text-decoration: none; }
  .ckcss-nav-links a:hover { text-decoration: underline; }

  .ckcss-hero { border-block-end: 1px solid var(--ckcss-rule); padding-block: clamp(4.5rem, 11vw, 9rem); }
  .ckcss-hero-copy { align-content: center; }
  .ckcss-eyebrow { color: var(--ckcss-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
  .ckcss-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; max-inline-size: 53ch; }
  .ckcss-button { align-items: center; border: 1px solid var(--ckcss-ink); display: inline-flex; font-weight: 700; justify-content: center; min-block-size: 2.9rem; padding-inline: 1.1rem; text-decoration: none; }
  .ckcss-button--primary { background: var(--ckcss-ink); color: var(--ckcss-paper); }
  .ckcss-button--primary:hover { background: var(--ckcss-accent); border-color: var(--ckcss-accent); }
  .ckcss-button--quiet { border-color: transparent; text-decoration: underline; }
  .ckcss-code-wrap { align-self: center; background: var(--ckcss-ink); box-shadow: .75rem .75rem 0 var(--ckcss-mint); color: #ebf2e9; inline-size: min(100%, 34rem); }
  .ckcss-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.75rem, 1.5vw, .95rem); line-height: 1.7; margin: 0; overflow-x: auto; padding: clamp(1.25rem, 4vw, 2.25rem); }
  .ckcss-code span { color: var(--ckcss-mint); }

  .ckcss-section { padding-block: clamp(4.5rem, 10vw, 8rem); }
  .ckcss-section-heading { border-block-end: 1px solid var(--ckcss-rule); padding-block-end: 2rem; }
  .ckcss-feature { border-block-start: 3px solid var(--ckcss-ink); min-block-size: 14rem; padding-block-start: 1rem; }
  .ckcss-feature p, .ckcss-primitive p, .ckcss-steps { line-height: 1.55; }
  .ckcss-index { color: var(--ckcss-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
  .ckcss-section--ink { background: var(--ckcss-ink); color: #f8f7f1; }
  .ckcss-section--ink .ckcss-section-heading { border-color: color-mix(in srgb, white 20%, transparent); }
  .ckcss-primitive { border: 1px solid color-mix(in srgb, white 26%, transparent); min-block-size: 13rem; padding: clamp(1.25rem, 3vw, 2rem); }
  .ckcss-primitive code { color: var(--ckcss-mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; letter-spacing: -.06em; }
  .ckcss-start { max-inline-size: 52rem; }
  .ckcss-steps { padding-inline-start: 1.3rem; }
  .ckcss-steps li { padding-inline-start: .4rem; }
  .ckcss-steps code { background: #ebe9df; font-size: .9em; overflow-wrap: anywhere; padding: .15em .3em; }
  .ckcss-footer { background: var(--ckcss-mint); padding-block: 2rem; }
  .ckcss-footer-inner { justify-content: space-between; }
  .ckcss-footer p { font-size: .9rem; }

  @media (max-width: 42rem) {
    .ckcss-nav { padding-block: 1rem; }
    .ckcss-nav-links { font-size: .78rem; }
    .ckcss-code-wrap { box-shadow: .45rem .45rem 0 var(--ckcss-mint); }
  }
}