/* The 404 (Card 2) — the mock's .nf rules on the app's tokens. Below 640px it stacks (PL11). */
.nf { min-height: 100dvh; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 46% 54%; font-family: var(--sans); font-size: 16px; }
.nf-txt { display: flex; flex-direction: column; justify-content: center; padding: 0 10% 0 12%; }
.nf-code { font-family: var(--mono); font-size: 12px; color: var(--ink-mid); letter-spacing: .08em; }
.nf-h { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; margin: 10px 0 12px; }
.nf-p { color: var(--ink-mid); font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 34ch; }
.nf-btn { align-self: flex-start; height: 42px; padding: 0 18px; border: 0; border-radius: 2px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 500; cursor: pointer; }
.nf-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-mid); transition: opacity .4s; }
.nf-panel { position: relative; display: grid; place-items: center; color: var(--plum); overflow: hidden; --flower-ground: var(--paper); }
.nf-panel svg { width: 46%; max-width: 280px; margin-top: -40px; overflow: visible; touch-action: none; user-select: none; position: relative; z-index: 1; }
.nf-panel .petal { cursor: grab; }
.nf-panel .petal:active { cursor: grabbing; }
.nf-ground { position: absolute; left: 8%; right: 8%; bottom: 64px; height: 0; border-top: 1px solid var(--rule); }
.nf-ground::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--rule); }
@media (max-width: 639px) {
  .nf { grid-template-columns: 1fr; min-height: 0; }
  .nf-txt { padding: 48px 10% 48px 12%; }
  .nf-panel { min-height: 300px; }
}