/* 404 page, shared by the React route (/404) and the static 404.html.
   Concept: the page is "undefined" - a curve with a hole at x = 404,
   a dot that travels the curve and drops through the hole. Built in SVG
   (CSS stroke drawing + SMIL motion), so it stays a few kilobytes. */
.nf {
  --nf-ink:#213e38; --nf-green:#176859; --nf-green-dark:#105447; --nf-copy:#5d6c65;
  --nf-paper:#fdfbf7; --nf-sage:#f0f4ec; --nf-sage-2:#e5eee1; --nf-line:#dde6df; --nf-clay:#c77d48;
  background:var(--nf-paper); color:var(--nf-ink);
  padding:112px 0 88px;
}
html:has(.nf) body { background:#fdfbf7; }
html:has(.nf) header { background:rgba(253,251,247,.97)!important; border-color:#e6e9df!important; box-shadow:none; }
.nf-wrap { max-width:1180px; margin-inline:auto; padding-inline:36px; }
.nf :is(a,button):focus-visible { outline:3px solid var(--nf-clay); outline-offset:4px; }

.nf-top { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.nf-eyebrow { color:var(--nf-green); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.nf-title { font-family:Outfit,system-ui,sans-serif; font-size:clamp(36px,4.6vw,58px); line-height:1.08; letter-spacing:-.045em; font-weight:650; margin:0 0 20px; color:var(--nf-ink); }
.nf-title span { color:var(--nf-green); }
.nf-lead { color:var(--nf-copy); font-size:17px; line-height:1.75; max-width:460px; margin:0 0 28px; }
.nf-actions { display:flex; flex-wrap:wrap; gap:12px; }
.nf-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding-inline:22px; border-radius:12px; font:600 14px/1 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; border:0; transition:transform .15s ease, background-color .15s ease; }
.nf-btn:hover { transform:translateY(-2px); }
.nf-btn:active { transform:translateY(1px); }
.nf-btn--primary { background:var(--nf-green); color:#fff; box-shadow:0 5px 0 var(--nf-green-dark),0 10px 22px #17685916; }
.nf-btn--ghost { background:transparent; color:var(--nf-ink); border:1px solid #d6ded5; }
.nf-btn--ghost:hover { background:#fff; }

/* The graph: a chalkboard-green panel. */
.nf-graph { margin:0; background:#1f4a41; border-radius:24px; padding:18px 18px 10px; box-shadow:0 24px 50px -30px #0f3b3280; }
.nf-graph svg { display:block; width:100%; height:auto; }
.nf-grid line { stroke:#ffffff10; stroke-width:1; }
.nf-axis { stroke:#d9e6d7; stroke-width:2; stroke-linecap:round; fill:none; opacity:.8; }
.nf-curve { fill:none; stroke:#f4efe3; stroke-width:4; stroke-linecap:round; }
.nf-guide { stroke:#f4efe3; stroke-width:1.5; stroke-dasharray:4 6; }
.nf-hole { fill:#1f4a41; stroke:#f4efe3; stroke-width:3; transform-box:fill-box; transform-origin:center; animation:nf-pulse 2.4s 4s ease-in-out infinite; }
.nf-tick { fill:#e9c9a6; font:700 15px/1 Inter,system-ui,sans-serif; letter-spacing:.04em; }
.nf-axis-label { fill:#d9e6d7; font:italic 14px Georgia,serif; opacity:.75; }
.nf-note { fill:#f4efe3; font:italic 20px Georgia,serif; }
.nf-note--small { font:500 13px Inter,system-ui,sans-serif; fill:#d9e6d7; }
.nf-dot { fill:var(--nf-clay); }
.nf-landing { fill:none; stroke:#e9c9a6; stroke-width:2; }
.nf-graph figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@keyframes nf-pop { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:scale(1); } }
@keyframes nf-pulse { 50% { transform:scale(1.25); } }

/* Lower band: a tiny puzzle, then the way back. */
.nf-lower { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; }
.nf-card { background:var(--nf-sage); border-radius:24px; padding:28px; }
.nf-card h2 { font-family:Outfit,system-ui,sans-serif; font-size:20px; font-weight:600; letter-spacing:-.015em; margin:0 0 6px; color:var(--nf-ink); }
.nf-card > p { color:var(--nf-copy); font-size:14px; line-height:1.7; margin:0 0 18px; }
.nf-seq { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.nf-seq li { display:grid; place-items:center; min-width:58px; height:46px; padding-inline:10px; border-radius:12px; background:var(--nf-paper); border:1px solid var(--nf-line); font:600 16px/1 Inter,system-ui,sans-serif; color:var(--nf-ink); }
.nf-seq .nf-gap { border:2px dashed #9fb8a6; color:#7c8f84; background:transparent; }
.nf-seq .nf-gap.is-solved { border:2px solid var(--nf-green); background:#fff; color:var(--nf-green); animation:nf-pop .35s cubic-bezier(.3,1.6,.5,1); }
.nf-choices { display:flex; flex-wrap:wrap; gap:8px; }
.nf-choice { height:44px; min-width:72px; padding-inline:16px; border-radius:12px; border:1px solid #cfdccb; background:#fff; color:var(--nf-ink); font:600 15px/1 Inter,system-ui,sans-serif; cursor:pointer; transition:transform .12s ease, border-color .12s ease; }
.nf-choice:hover { border-color:var(--nf-green); transform:translateY(-1px); }
.nf-choice.is-wrong { border-color:#d9a58a; color:#9a5a3a; animation:nf-shake .3s; }
.nf-choice.is-right { background:var(--nf-green); border-color:var(--nf-green); color:#fff; }
.nf-choice:disabled { cursor:default; transform:none; }
.nf-feedback { min-height:22px; margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--nf-copy); }
.nf-feedback.is-right { color:var(--nf-green); font-weight:600; }
@keyframes nf-shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }

.nf-links { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.nf-links a { display:inline-flex; align-items:center; height:40px; padding-inline:16px; border-radius:999px; background:var(--nf-paper); border:1px solid var(--nf-line); color:var(--nf-ink); font:500 14px/1 Inter,system-ui,sans-serif; text-decoration:none; transition:border-color .12s ease, color .12s ease; }
.nf-links a:hover { border-color:var(--nf-green); color:var(--nf-green); }

@media (max-width:900px) {
  .nf-top,.nf-lower { grid-template-columns:1fr; }
  .nf-top { gap:32px; }
}
@media (max-width:640px) {
  .nf { padding:96px 0 64px; }
  .nf-wrap { padding-inline:16px; }
  .nf-graph { padding:12px 10px 6px; border-radius:20px; }
  .nf-card { padding:22px 18px; }
  .nf-actions .nf-btn { flex:1 1 auto; }
  .nf-seq li { min-width:50px; }
}

/* Reduced motion: show the finished picture - no drawing, no dot. */
@media (prefers-reduced-motion:reduce) {
  .nf-hole,.nf-seq .nf-gap.is-solved,.nf-choice.is-wrong { animation:none!important; }
  .nf-curve { stroke-dashoffset:0!important; }
  .nf-guide { opacity:.55!important; }
  .nf-hole,.nf-note { opacity:1!important; }
  .nf-dot-group,.nf-landing { display:none; }
  .nf-btn,.nf-choice { transition:none; }
  .nf-btn:hover,.nf-choice:hover { transform:none; }
}