/* #removals "Where I remove from": four mock panels (Mega, X, Reddit, a leak site), live leak vs. removed.
   Own file so it merges next to other work on styles.css; reuses its tokens (--surface, --line, --ink, --muted, ...). */
.rm { --rm-h: 372px; }   /* one fixed stage height: no shift when a panel flips */
.rm-tools { display: flex; justify-content: flex-end; margin: -12px 0 14px; }
.rm-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .rm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.rm-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.rm-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.rm-h { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 700 1.1rem/1.3 var(--sans); }
.rm-out { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.rm-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 800 .8rem/1 var(--sans); }
.rm-ico .icon { width: 16px; height: 16px; }
.rm-ico-mega { background: #d90007; }
.rm-ico-x { background: #0f1419; }
.rm-ico-rd { background: #d93a00; font-size: .72rem; }   /* Reddit orange, a step darker: white text >= 4.5:1 */
.rm-ico-site { background: var(--muted); }
@media (prefers-color-scheme: dark) { .rm-ico-x { background: #e7e9ea; color: #0f1419; } }

/* the compare stage: fixed height (no layout shift), removed layer on top, clipped from the left at --p % */
/* overflow: clip, not hidden: a hidden box still scrolls to show a focused child, and the stage-wide handle at 100 % sits
   past its right edge, so focusing it (Tab, a tap) slid both layers out of view */
.rm-stage { position: relative; height: var(--rm-h); overflow: hidden; overflow: clip; border-radius: 12px; border: 1px solid var(--line); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: ew-resize; }
/* desktop: the four mock UIs sit back at 70% saturation until one is hovered or focused (colour only, nothing moves);
   dark: the white mock screens are also dimmed, not glaring */
.rm-stage { filter: saturate(var(--rm-sat, 1)); }
@media (min-width: 820px) { .rm-stage { --rm-sat: .7; } .rm-card:focus-within .rm-stage { --rm-sat: 1; } }
@media (min-width: 820px) and (hover: hover) { .rm-card:hover .rm-stage { --rm-sat: 1; } }
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) { .rm-stage { transition: filter .25s; } }
@media (prefers-color-scheme: dark) { .rm-stage { filter: brightness(.86) saturate(calc(var(--rm-sat, 1) * .95)); } }
/* #removals (draggable): never a filter on the stage. A filtered parent of the moving clip / handle is a cached layer
   iOS Safari repaints late (the edge moved, the layers didn't, until the card scrolled away). Desktop: saturate the
   layers; dark: a 14 % black veil (= brightness .86); phones: no filter at all */
#removals .rm-stage { filter: none; transition: none; }
@media (min-width: 820px) { #removals .rm-layer { filter: saturate(var(--rm-sat)); } }
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) { :where(#removals) .rm-layer { transition: filter .25s; } }   /* :where: the edge's clip-path transition (.rm-anim .rm-gone) still wins */
@media (prefers-color-scheme: dark) { #removals .rm-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(0 0 0 / .14); pointer-events: none; } }
html:not(.js) .rm-stage { cursor: auto; }
.rm-layer { position: absolute; inset: 0; overflow: hidden; }
.rm-gone { clip-path: inset(0 0 0 calc(var(--p, 100) * 1%)); }
/* the handle is a stage-wide box moved by transform (its % = the stage width): no layout shift while it animates;
   its left edge is the compare edge. --p: no JS = 100 (all live), the video page's wipe; the landing's js/removals.js
   writes clip + transform inline (plain values, no var() for the engine to re-resolve) */
.rm-handle { position: absolute; inset: 0; z-index: 3; transform: translateX(calc(var(--p, 100) * 1%)); pointer-events: none; }
.rm-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.rm-knob { position: absolute; top: 50%; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
/* keep the knob inside the stage at both ends; idle (all live) it is parked in the bottom corner and the edge line is
   hidden, so nothing of the live leak is covered */
.rm-stage[data-end="r"] .rm-knob { transform: translateX(-20px); }
.rm-stage[data-end="idle"] .rm-knob { transform: translate(-20px, calc(var(--rm-h) / 2 - 30px)); }
.rm-stage[data-end="idle"] .rm-handle::before { opacity: 0; }
.rm-stage[data-end="l"] .rm-knob { transform: translateX(20px); }
.rm-knob::before, .rm-knob::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--on-accent); border-width: 0 0 2px 2px; }
.rm-knob::before { left: 9px; transform: rotate(45deg); }
.rm-knob::after { right: 9px; transform: rotate(-135deg); }
.rm-handle:focus-visible { outline: none; }
/* at rest on either end the line only doubles the stage border and the knob covers edge content ("369 files", photos):
   hide the line; with a mouse also the knob, until the pointer is on the stage or the slider has keyboard focus.
   Touch keeps the knob: no hover, it is the drag hint there. */
.rm-stage:is([data-end="r"], [data-end="l"]) .rm-handle::before { opacity: 0; }
@media (hover: hover) {
  .rm-stage:is([data-end="r"], [data-end="l"]):not(:hover) .rm-handle:not(:focus-visible) .rm-knob { opacity: 0; }
}
.rm-handle:focus-visible .rm-knob { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  /* --rm-t: the ambient sweep's glide time (js/removals.js), unset = the .7s Remove / Show again flip */
  .rm-anim .rm-gone { transition: clip-path var(--rm-t, .7s) cubic-bezier(.6, 0, .25, 1); }
  .rm-anim .rm-handle { transition: transform var(--rm-t, .7s) cubic-bezier(.6, 0, .25, 1); }
  .rm-knob { transition: transform .2s, opacity .2s; }
}
.rm-act { margin: 0; }
.rm-btn { min-width: 9.5em; justify-content: center; }
.rm-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
html:not(.js) .rm-handle, html:not(.js) .rm-act, html:not(.js) .rm-tools { display: none; }

/* leak-side photos: blurred like the hero card's tiles until Reveal */
.rm-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(var(--leak-blur)) saturate(.8); transform: scale(1.15); transition: filter .25s, transform .25s; }
.rm.revealed .rm-img { filter: none; transform: none; }
.rm-th { display: block; min-width: 0; overflow: hidden; background: #8a8f98; }
:where(.rm-layer) :is(p, ul) { margin: 0; }   /* zero class weight: each panel sets its own margins */
.rm .rm-layer [hidden] { display: none; }
.rm-layer b { font-weight: 700; }

/* 1. Mega (+ the aggregator card that links to it) */
.mg { --mg-bg: #f6f6f8; --mg-ink: #303233; --mg-mut: #6d7072; --mg-line: #e3e4e7; background: var(--mg-bg); color: var(--mg-ink); padding: 12px; font: 400 .88rem/1.4 var(--sans); }
@media (prefers-color-scheme: dark) { .mg { --mg-bg: #1b1b1d; --mg-ink: #ececee; --mg-mut: #9da0a3; --mg-line: #333437; } }
.agg { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px; border-radius: 12px; background: #16181d; color: #f1f2f4; }
.agg-th { grid-row: span 2; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: #2b2e35; }
.agg-b { display: grid; min-width: 0; }
.agg-pill { justify-self: start; padding: 1px 8px; border-radius: 999px; background: #ff3d6e; color: #fff; font: 800 .62rem/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.agg-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agg-meta { color: #a9adb6; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agg-open { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 8px; background: #e0262f; color: #fff; font: 700 .78rem/1 var(--sans); }
.mg-m, .mg-logo { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #d90007; font: 900 .66rem/1 var(--sans); }
.mg-win { margin-top: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--mg-line); overflow: hidden; }
@media (prefers-color-scheme: dark) { .mg-win { background: #232325; } }
.mg-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--mg-line); font-weight: 700; }
.mg-logo { width: 24px; height: 24px; background: #d90007; color: #fff; font-size: .8rem; flex: none; }
.mg-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-list { list-style: none; padding: 4px 0; }
/* the window runs to the stage's foot (one height for all four panels): the rows share the room, no empty grey band */
.mg.rm-live { display: flex; flex-direction: column; }
.mg.rm-live .mg-win { flex: 1; display: flex; flex-direction: column; }
.mg.rm-live .mg-list { flex: 1; display: flex; flex-direction: column; }
.mg.rm-live .mg-list li { flex: 1; }
/* the idle knob rests on the stage's bottom-right corner: keep the last row's size clear of it */
.mg.rm-live .mg-list li:last-child { padding-right: 62px; }
.mg-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; }
.mg-list li + li { border-top: 1px solid var(--mg-line); }
.mg-fold { width: 28px; height: 22px; border-radius: 3px 3px 4px 4px; background: linear-gradient(#ffcc4d, #f5b72a); box-shadow: inset 0 4px 0 #f0a81f; }
.mg-txt { display: grid; place-items: center; width: 24px; height: 28px; margin-left: 2px; border-radius: 3px; background: #8f9499; color: #fff; font: 800 .5rem/1 var(--sans); }
.mg-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-c { color: var(--mg-mut); font-size: .8rem; }
.mg-gone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.mg-bang { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: #f0373a; color: #fff; font: 800 2.2rem/1 var(--sans); }
.mg-gh { font: 700 1.2rem/1.3 var(--sans); }
.mg-gone p:not(.mg-gh) { color: var(--mg-mut); }
.mg-gone ul { padding: 0; list-style: none; color: var(--mg-mut); }
.mg-gone li::before { content: "• "; }

/* 2. X */
.xp { --xp-bg: #fff; --xp-ink: #0f1419; --xp-mut: #536471; --xp-line: #eff3f4; --xp-off: #f7f9f9; background: var(--xp-bg); color: var(--xp-ink); padding: 14px 16px;
  font: 400 .95rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
@media (prefers-color-scheme: dark) { .xp { --xp-bg: #000; --xp-ink: #e7e9ea; --xp-mut: #71767b; --xp-line: #2f3336; --xp-off: #16181c; } }
.xp-head { display: flex; align-items: center; gap: 10px; }
.xp-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #794bc4; color: #fff; font-weight: 700; }
.xp-who { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.xp-who > span { color: var(--xp-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-logo { font: 800 1.1rem/1 var(--sans); }
.xp-text { display: grid; margin: 10px 0; }
.xp-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 196px; overflow: hidden; border-radius: 16px; border: 1px solid var(--xp-line); }
.xp-off { display: grid; place-items: center; grid-template-columns: 1fr; padding: 20px; background: var(--xp-off); color: var(--xp-mut); font-size: .9rem; text-align: center; }
.xp-acts { display: flex; justify-content: space-between; margin-top: 10px; padding-right: 20%; color: var(--xp-mut); font-size: .8rem; }
/* X action counts: reply / repost / like / views icons (inline masks, no requests) */
.xa { display: inline-flex; align-items: center; gap: 5px; }
.xa::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--xa) center / contain no-repeat; mask: var(--xa) center / contain no-repeat; }
.xa-re { --xa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.xa-rt { --xa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.xa-lk { --xa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.xa-vw { --xa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }

/* 3. Reddit */
.rd { --rd-bg: #fff; --rd-ink: #1c1c1c; --rd-mut: #576f76; --rd-off: #edeff1; background: var(--rd-bg); color: var(--rd-ink); padding: 14px 16px; font: 400 .9rem/1.4 var(--sans); }
@media (prefers-color-scheme: dark) { .rd { --rd-bg: #0e1113; --rd-ink: #eef1f3; --rd-mut: #8ba2ad; --rd-off: #1a1f22; } }
.rd-head { display: flex; align-items: center; gap: 6px; color: var(--rd-mut); font-size: .8rem; white-space: nowrap; overflow: hidden; }
.rd-head b { color: var(--rd-ink); overflow: hidden; text-overflow: ellipsis; }
.rd-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #d93a00; color: #fff; font: 800 .62rem/1 var(--sans); }
.rd-title { margin: 8px 0 10px; font: 700 1.05rem/1.3 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-media { height: 200px; overflow: hidden; border-radius: 14px; background: var(--rd-off); }
/* the post runs to the stage's foot like the other panels: the image takes the spare height, no empty band */
.rd.rm-layer { display: flex; flex-direction: column; }
.rd.rm-layer > * { flex: none; }
.rd.rm-layer .rd-media { flex: 1 1 auto; min-height: 150px; height: auto; }
.rd.rm-layer .rd-acts { margin-top: 14px; line-height: 24px; }   /* the photo ends above the idle knob's corner (52 px up) */
.rd-acts { display: flex; gap: 18px; margin-top: 10px; color: var(--rd-mut); font-size: .8rem; font-weight: 600; }
.rd-gone .rd-title { color: var(--rd-mut); opacity: .6; margin-bottom: 4px; }
#removals .rd-gone .rd-title { margin-bottom: 10px; }
.rd-note { margin-bottom: 8px; color: var(--rd-mut); font-size: .88rem; }
/* #removals: the note inside the empty photo box, the title's own margin: both layers keep one geometry (no row of the
   removed post sits lower than the live one beside it) */
#removals .rd-off { display: grid; place-items: center; padding: 20px; text-align: center; }
#removals .rd-off .rd-note { margin: 0; }
.rd-gone .rd-acts { opacity: .5; }

/* 4. a leak site, drawn after a real one (fapello-style profile page: light, Tailwind palette, pink-500 accent).
   System fonts only (theirs is Inter: no font request here). The live layer is cropped by the stage like a screenshot.
   Container queries on the layer: the stage's own width decides phone (2 columns, 112 px tiles, tight head) vs wide (4, 160 px).
   The head is fapello's desktop row (avatar left, the rest right) at every width, so the first tile row shows whole at 320. */
.fp { --fp-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; container-type: inline-size;
  background: #f0f2f5; color: #111827; font: 400 .85rem/1.35 var(--fp-sans); }
.fp-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.fp-menu { flex: none; width: 20px; height: 20px; color: #374151; }
.fp-logo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1rem/1.2 var(--fp-sans); letter-spacing: -.03em; }
.fp-logo::first-letter { color: #ec4899; }
.fp-pill { flex: none; padding: 3px 8px; border-radius: 6px; color: #fff; font: 700 .68rem/1.3 var(--fp-sans); }
.fp-p1 { background: #ec4899; }
.fp-p2 { background: #3b82f6; }
.fp-p3 { display: none; background: #8b5cf6; }
.fp .fp-search { display: flex; align-items: center; gap: 6px; max-width: 280px; height: 30px; margin: 6px auto 0; padding: 0 10px; border-radius: 6px;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .12); color: #9ca3af; }
.fp-search .icon { width: 14px; height: 14px; }
.fp-head { display: flex; align-items: center; gap: 12px; margin: 8px 12px 0; }
.fp-ring { flex: none; padding: 4px; border-radius: 50%; background: linear-gradient(to top right, #ca8a04, #db2777); }
.fp-av { display: block; width: 72px; height: 72px; border: 4px solid #fff; border-radius: 50%; }
.fp-who { display: grid; flex: 1; justify-items: start; gap: 4px; min-width: 0; }
.fp-name, .fp-aka { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-name { font: 600 1rem/1.2 var(--fp-sans); }
.fp-aka { color: #4b5563; font-size: .74rem; font-weight: 600; }
.fp-tags, .fp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fp-tags span, .fp-follow, .fp-disc { border-radius: 6px; color: #fff; font-weight: 600; }
.fp-tags span { padding: 1px 5px; font-size: .66rem; }
.fp-of { background: #93c5fd; }
.fp-pt { background: #f9a8d4; }
.fp-ig { background: #d8b4fe; }
.fp-follow, .fp-disc { padding: 3px 9px; font-size: .74rem; }
.fp-follow { background: #ec4899; }
.fp-disc { background: #3b82f6; }
.fp-heart { color: #ec4899; font-size: 1.15rem; line-height: 1; }
.fp-count { display: grid; grid-template-columns: auto auto; gap: 14px; color: #374151; font-size: .76rem; }
.fp-count b { color: #111827; }
.fp .fp-hr { display: flex; align-items: center; gap: 8px; margin: 8px 12px 6px; color: #9ca3af; }
.fp-hr::before, .fp-hr::after { content: ""; flex: 1; height: 1px; background: #d1d5db; }
.fp-hr .icon { width: 14px; height: 14px; }
.fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 12px; }
.fp-grid .rm-th { height: 112px; border-radius: 6px; }
.fp .fp-next { margin: 12px 0 0; color: #ec4899; font-weight: 700; text-align: center; }
@container (min-width: 440px) {
  .fp-menu { display: none; }
  .fp-p3 { display: inline; }
  .fp-head { gap: 18px; margin: 12px 16px 0; }
  .fp-who { gap: 5px; }
  .fp-name { font-size: 1.1rem; }
  .fp-tags span { padding: 1px 7px; font-size: .7rem; }
  .fp-follow, .fp-disc { padding: 4px 12px; font-size: .78rem; }
  .fp-av { width: 88px; height: 88px; }
  .fp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 16px; }
  .fp-grid .rm-th { height: 160px; }
}
/* 320 px phones: the wordmark keeps its room; a smaller avatar + shorter tiles keep the first tile row whole */
@container (max-width: 299px) {
  .fp-p2 { display: none; }
  .fp-head { gap: 10px; }
  .fp-av { width: 60px; height: 60px; }
  .fp-grid .rm-th { height: 96px; }
}
/* removed: the same site shell, the profile gone */
.fp .fp-404 { margin: 52px 0 0; color: #d1d5db; font: 900 4.5rem/1 var(--fp-sans); letter-spacing: .04em; text-align: center; }
.fp .fp-gh { margin: 12px 24px 0; color: #374151; font-size: 1rem; font-weight: 600; text-align: center; }
/* dark: the leak site in its own dark theme, like the other three panels */
@media (prefers-color-scheme: dark) {
  .fp { background: #0f131a; color: #e5e7eb; }
  .fp-bar, .fp .fp-search { background: #1c222c; box-shadow: none; }
  .fp-menu, .fp-aka, .fp-count, .fp .fp-hr { color: #9ca3af; }
  .fp-count b { color: #f3f4f6; }
  .fp-av { border-color: #0f131a; }
  .fp-hr::before, .fp-hr::after { background: #2d3440; }
  .fp .fp-404 { color: #2d3440; }
  .fp .fp-gh { color: #d1d5db; }
}