@layer components {
  .cheatsheet-index {
    display: grid;
    max-inline-size: 54rem;
    border-block-start: 1px solid var(--pw-border-soft);
  }
  .cheatsheet-index__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--pw-border-soft);
    transition: color .18s, padding-inline .18s;

    &:hover {
      padding-inline: .5rem;
      color: var(--pw-primary-soft);
    }
  }
  .cheatsheet-index__number,
  .cheatsheet-index__arrow {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    color: var(--pw-fg-faint);
  }
  .cheatsheet-index__copy {
    display: grid;
    gap: .3rem;

    & strong {
      font-size: var(--pw-fs-md);
      font-weight: 450;
      color: var(--pw-fg-strong);
    }
    & > span {
      font-size: var(--pw-fs-sm);
      font-weight: 300;
      line-height: 1.5;
      color: var(--pw-fg-meta);
    }
  }
  .cheatsheet-index__item:hover .cheatsheet-index__arrow { color: currentColor; }

  @media (width <= 34rem) {
    .cheatsheet-index__item { grid-template-columns: minmax(0, 1fr) auto; }
    .cheatsheet-index__number { display: none; }
  }


  .cheat-head {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 60ch;
  }
  .cheat-head h1 {
    font-size: var(--pw-fs-display);
  }
  .sheet {
    container-type: inline-size;
    background: var(--pw-bg-app);
    border: 1px solid var(--pw-border-soft);
    border-radius: var(--pw-r-lg);
    overflow: hidden;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }


  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.5rem clamp(1.4rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--pw-border);
  }
  .sheet-brand { display: flex; align-items: center; gap: 1rem; }
  .sheet-brand__logo {
    width: 2.25rem;
    height: 2.25rem;
  }
  .sheet-brand__text { display: flex; flex-direction: column; gap: .2rem; }
  .sheet-brand__kit {
    font-size: var(--pw-fs-xs);
    font-weight: 200;
    letter-spacing: var(--pw-track-snug);
    text-transform: uppercase;
    color: var(--pw-fg-meta);
    & b { color: var(--pw-fg-strong); font-weight: 500; }
  }
  .sheet-brand__title {
    font-size: var(--pw-fs-lg);
    font-weight: 300;
    letter-spacing: var(--pw-track-snug);
    color: var(--pw-fg-strong);
  }
  .sheet-head__meta {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    color: var(--pw-fg-faint);
  }


  .sheet-intro {
    padding: 1.5rem clamp(1.4rem, 3vw, 2.25rem) 0;

    & p {
      max-width: 68ch;
      margin: 0;
      font-size: var(--pw-fs-xs);
      font-weight: 300;
      line-height: 1.6;
      color: var(--pw-fg-meta);
    }
  }


  .sheet-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--pw-border);
  }
  @container (min-width: 46rem) {
    .sheet-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container (min-width: 68rem) {
    .sheet-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .sheet-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem clamp(1.4rem, 3vw, 2.25rem);
    background: var(--pw-bg-app);
    break-inside: avoid;
  }
  .sheet-col__label {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    font-weight: 400;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-primary-soft);

    & svg {
      width: 1rem;
      height: 1rem;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  .sheet-col p {
    margin: 0;
    font-size: var(--pw-fs-xs);
    font-weight: 300;
    line-height: 1.6;
    color: var(--pw-fg-meta);
  }


  .sheet-col table {
    display: block;
    width: 100%;
    margin: 0;
  }
  .sheet-col thead { display: none; }
  .sheet-col tbody {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }
  .sheet-col tr {
    display: grid;
    gap: .3rem;
  }
  .sheet-col td {
    display: block;
    padding: 0;
    font-size: var(--pw-fs-xs);
    line-height: 1.5;
  }
  .sheet-col td:first-child {
    font-family: var(--pw-font-mono);
    color: var(--pw-code-fn);
    overflow-wrap: anywhere;
  }
  .sheet-col td:last-child {
    font-weight: 300;
    color: var(--pw-fg-subtle);
  }

  .sheet-col td code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
  }

  .sheet-col pre { margin: 0; break-inside: avoid; }


  .sheet-col blockquote {
    --note: var(--pw-secondary);
    --note-ink: var(--pw-secondary-soft);
    margin: 0;
    margin-block-start: auto;
    padding: .8rem .9rem;
    background: color-mix(in oklch, var(--note) 9%, transparent);
    border-radius: var(--pw-r-md);
    break-inside: avoid;

    &.note-tip {
      --note: var(--pw-primary-soft);
      --note-ink: var(--pw-primary-muted);
    }

    & p {
      margin: 0;
      font-size: var(--pw-fs-xs);
      font-weight: 300;
      line-height: 1.55;
      color: var(--pw-fg-subtle);
    }
    & strong {
      font-family: var(--pw-font-mono);
      font-size: var(--pw-fs-2xs);
      font-weight: 400;
      letter-spacing: var(--pw-track-eyebrow);
      text-transform: uppercase;
      color: var(--note-ink);
    }
    & code {
      color: var(--note-ink);
      background: none;
      padding: 0;
      overflow-wrap: anywhere;
    }
  }


  .sheet-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--pw-border);
    border-top: 1px solid var(--pw-border);
  }
  @container (min-width: 46rem) {
    .sheet-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .sheet-cell {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.5rem clamp(1.4rem, 3vw, 2.25rem);
    background: var(--pw-bg-app);
  }
  .sheet-cell__label {
    margin: 0;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    font-weight: 400;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }
  .sheet-cell p {
    margin: 0;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    line-height: 1.5;
  }
  .sheet-cell code {
    font-size: inherit;
    color: var(--pw-fg-subtle);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
  }
  .sheet-cell a {
    color: var(--pw-primary-soft);
    text-decoration: none;

    &:hover { color: var(--pw-fg-strong); }
  }


  .sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem clamp(1.4rem, 3vw, 2.25rem);
    border-top: 1px solid var(--pw-border);
  }
  .sheet-foot span {
    font-size: var(--pw-fs-2xs);
    font-weight: 200;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }


  .cheat-more {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);

    & ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
  }
  .cheat-more__title {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }
}