@layer components {
  .not-found {
    max-inline-size: 30rem;
    margin-inline: auto;
    padding-block: var(--space-l) var(--space-xl);
    text-align: center;
  }

  .not-found-kicker {
    margin: 0;
    color: var(--muted);
    font-size: var(--step-00);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .not-found-title {
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-wrap: balance;
  }

  .not-found-lead {
    max-inline-size: 26rem;
    margin-inline: auto;
  }

  .not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s);
    margin-block-start: var(--space-s);

    .btn { margin-block-start: 0; }
    /* Equal-weight navigation: the ghost keeps its ink but matches the
       primary box instead of shrinking to a chip beside it. */
    .btn.ghost {
      padding: 0.7em 1em;
      min-block-size: var(--touch);
      font-size: inherit;
    }
  }

  .trouble {
    margin-block-start: var(--space-xl);
    text-align: center;

    .lead { margin-block-end: 0; }

    /* Anchor buttons are inline by default; their padding paints outside
       the line box and climbs over the lead. Flex them like touch targets. */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* The scene: guilty dog, empty bowl, a corner of the page in its teeth. */
  .not-found-art {
    inline-size: min(100%, 19rem);
    margin-inline: auto;
  }

  .nf-ground { fill: color-mix(in oklch, var(--mist) 70%, transparent); }

  .nf-paw { fill: color-mix(in oklch, var(--dusk) 55%, transparent); }

  .nf-bone {
    fill: var(--cream);
    stroke: color-mix(in oklch, var(--ink) 20%, var(--mist));
  }

  .nf-coat { fill: var(--paprika); }

  .nf-coat-deep { fill: color-mix(in oklch, var(--paprika) 82%, var(--ink)); }

  .nf-light { fill: color-mix(in oklch, var(--paprika) 30%, var(--cream)); }

  .nf-ink { fill: var(--ink); }

  .nf-line {
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
  }

  .nf-tail {
    fill: none;
    stroke: var(--paprika);
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: 88% 92%;
    animation: nf-wag 0.8s ease-in-out infinite alternate;
  }

  .nf-collar {
    fill: none;
    stroke: var(--plum);
    stroke-linecap: round;
  }

  .nf-tag { fill: var(--gold); }

  .nf-paper-sheet {
    fill: var(--cream);
    stroke: color-mix(in oklch, var(--ink) 22%, var(--mist));
  }

  .nf-paper-text {
    fill: var(--ink);
    font-family: var(--font-display);
    text-anchor: middle;
  }

  .nf-bowl { fill: var(--clay); }

  .nf-bowl-rim { fill: color-mix(in oklch, var(--clay) 80%, var(--ink)); }

  .nf-bowl-in { fill: color-mix(in oklch, var(--paper) 80%, var(--mist)); }

  .nf-crumb { fill: var(--gold); }

  .nf-paper {
    transform-box: fill-box;
    transform-origin: 8% 50%;
    animation: nf-chew 1.4s ease-in-out infinite alternate;
  }

  .nf-dog { animation: nf-sniff 3.4s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .nf-tail,
    .nf-paper,
    .nf-dog { animation: none; }
  }
}

@keyframes nf-wag {
  from { rotate: -6deg; }
  to { rotate: 16deg; }
}

@keyframes nf-chew {
  from { rotate: -1.2deg; }
  to { rotate: 2.2deg; }
}

@keyframes nf-sniff {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.4rem; }
}