/* ════════════════════════════════════════════════════════════════════
   DEVICE PRIMITIVES — the iPhone 17 bezel with a live screen behind it.
   Shared by the Dreadfuls hero (ai-products.html) and homepage card 4.
   Extracted from build-log.css 2026-09-14 when card 4 started using it.

   ⚑ The bezel is Apple's own PNG with a REAL ALPHA HOLE at the screen,
   so the screen is a div sitting BEHIND it, not an image composited
   into it. Rect measured, not read off a spec sheet: 1206x2622 at
   (72,69) in a 1350x2760 asset, which is the percentages below. If the
   bezel file is ever re-exported those four numbers must be re-measured.
   See [[apple-bezel-mockups]].

   Everything inside a screen is sized in cqw so one container-query
   unit scales the whole phone: the screens are 402px logical wide, and
   1cqw = 1% of the phone's rendered width.
   ════════════════════════════════════════════════════════════════════ */
.dfs-stage{
  display:flex; align-items:center; justify-content:center;
  gap:0; inline-size:100%; block-size:100%;
}
/* ⚑ Size the phones off the stage's HEIGHT, never its width. Sizing by
   width let a 2560px window blow each phone up to 1141px and overflow the
   band. aspect-ratio matches the bezel file (810x1656) so width stays
   derived, which also keeps container-type:inline-size non-circular. */
.dfp{
  position:relative; block-size:82%; aspect-ratio:810/1656; flex:0 0 auto;
  container-type:inline-size;
  filter:drop-shadow(0 14px 26px rgba(20,20,24,.42));
}
.dfp > img{ position:relative; z-index:2; inline-size:100%; block-size:100%; display:block; }
.dfp-screen{
  position:absolute; z-index:1;
  left:5.3333%; top:2.5%; inline-size:89.3333%; block-size:95%;
  background:var(--df-surface,#141418);
  border-radius:11%/5.4%;
  overflow:hidden;
  display:flex; flex-direction:column;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* ⚑ .study-visual centres its text; an app screen must not inherit that.
     Only .dfs-q and the progress line opt back in. */
  text-align:left;
}
/* ⚑ FILM GRAIN: RANDOM, AND BEHIND (Daniel, 14 Sep late). §8 asks for 8% grain. The first
   build drew it as a regular 3px dot lattice, read as a pattern; the second made it noise but
   laid it OVER the screen, so it sat on top of every card and number. Grain belongs to the
   ground, so it is now a background layer on the screen itself: cards and text paint over it.
   The alpha is baked into the tile because a background layer has no opacity of its own. */
.dfp-screen{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px,
             var(--df-surface,#141418);
}
.dfp.is-lead{ block-size:100%; z-index:3; margin-inline:-2.6%; }
.dfp.is-flank{ opacity:.96; }

/* screen furniture, all in cqw so it tracks the phone's width */
.dfs-status{ display:flex; justify-content:space-between;
  padding:4.2cqw 6cqw 1.5cqw; font-size:2.9cqw; color:#9AA0A9; }
.dfs-body{ flex:1; padding:1.5cqw 6cqw 3cqw; display:flex; flex-direction:column;
  gap:4.4cqw; overflow:hidden; }
.dfs-wm{ font-family:"IM Fell English",Georgia,serif; font-size:7.6cqw; color:#E8E8E0; }
.dfs-lbl{ font-size:2.6cqw; letter-spacing:.15em; text-transform:uppercase; color:#9AA0A9; }
.dfs-card{ background:#243B39; border-radius:2.4cqw; padding:4cqw 4.4cqw;
  display:flex; flex-direction:column; gap:2.6cqw; }
.dfs-card b{ font-family:"EB Garamond",Georgia,serif; font-weight:400;
  font-size:6cqw; color:#E8E8E0; line-height:1.15; }
.dfs-card span{ font-size:3cqw; color:#9AA0A9; }
.dfs-prog{ block-size:1.6cqw; background:#1A1F2E; border-radius:1cqw; overflow:hidden; }
.dfs-prog i{ display:block; block-size:100%; inline-size:35%; background:#7FFFD4; }
.dfs-row{ display:flex; gap:3.6cqw; align-items:center; }
.dfs-po{ inline-size:13.5cqw; aspect-ratio:5/7; border-radius:1.7cqw; background:#1A1F2E;
  flex:0 0 auto; border:1px solid rgba(127,255,212,.24);
  display:flex; align-items:center; justify-content:center; }
.dfs-po span{ font-family:"IM Fell English",Georgia,serif; font-size:5.6cqw;
  color:#7FFFD4; opacity:.75; }
.dfs-inf{ flex:1; min-inline-size:0; }
.dfs-inf b{ display:block; font-family:"EB Garamond",Georgia,serif; font-weight:400;
  font-size:4.7cqw; color:#E8E8E0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.dfs-inf span{ font-size:3cqw; color:#9AA0A9; }
.dfs-sc{ font-weight:600; font-size:6.2cqw; color:#7FFFD4; font-variant-numeric:tabular-nums; }
.dfs-q{ font-family:"EB Garamond",Georgia,serif; font-size:4.6cqw; color:#E8E8E0;
  text-align:center; }
.dfs-vs{ display:flex; align-items:stretch; }
.dfs-vc{ flex:1; border:1px solid rgba(127,255,212,.46); border-radius:2.2cqw;
  padding:4.6cqw 2.6cqw; display:flex; flex-direction:column; gap:1.2cqw;
  align-items:center; justify-content:center; text-align:center; }
.dfs-vc b{ font-family:"EB Garamond",Georgia,serif; font-weight:400; font-size:4.4cqw;
  color:#E8E8E0; line-height:1.15; }
.dfs-vc span{ font-size:2.7cqw; color:#9AA0A9; }
.dfs-vc em{ font-style:normal; font-weight:600; font-size:4.4cqw; color:#7FFFD4; }
.dfs-or{ align-self:center; inline-size:8.6cqw; aspect-ratio:1; border-radius:50%;
  background:#243B39; border:1px solid #7FFFD4; color:#7FFFD4; display:flex;
  align-items:center; justify-content:center; font-size:2.4cqw; margin-inline:-2.4cqw;
  z-index:1; flex:0 0 auto; }
.dfs-acts{ display:flex; justify-content:space-between; align-items:center;
  font-size:2.7cqw; color:#9AA0A9; }
.dfs-acts i{ font-style:normal; border:1px solid #9AA0A9; border-radius:1.4cqw;
  padding:2cqw 3.2cqw; color:#E8E8E0; }
.dfs-big{ display:flex; align-items:baseline; gap:2.4cqw; }
.dfs-big em{ font-style:normal; font-weight:600; font-size:13cqw; color:#7FFFD4;
  line-height:1; font-variant-numeric:tabular-nums; }
.dfs-big span{ font-size:2.6cqw; color:#9AA0A9; letter-spacing:.1em; }
/* ⚑⚑ THE SUBCATEGORY OUTRANKS THE WORD THAT DESCRIBES IT. This row used to
   set the category name at #9AA0A9 with nothing else in it, so "Scariness"
   read as a caption for its own score. The category is the fixed axis and
   reads first; the word interprets the score and reads second, muted and
   italic. Daniel caught this on the specimen; it was wrong in both places. */
.dfs-sub{ display:flex; flex-direction:column; gap:.3cqw; }
.dfs-sub .top{ display:flex; justify-content:space-between; align-items:center; gap:2cqw; }
.dfs-sub .q{ font-size:3.5cqw; color:#E8E8E0; font-family:"EB Garamond",Georgia,serif;
  line-height:1.25; }
.dfs-sub .a{ font-size:3cqw; color:#9AA0A9; font-family:"EB Garamond",Georgia,serif;
  font-style:italic; line-height:1.3; }
/* ⚑ DROPLETS, DRAWN, NOT CIRCLES WITH A TOKEN RADIUS. The old glyph was a
   square with a teardrop border-radius that simply read as a dot at 3.4cqw.
   ⚑ Provisional: REELSCARED.md §15 marks the rating glyph pending Q5. */
.dfs-drops{ display:flex; gap:1.1cqw; flex:0 0 auto; }
.dfs-drops svg{ inline-size:3.2cqw; block-size:3.6cqw; display:block; }
/* ⚑ TAB BAR, PORTED FROM THE ARTIFACT (14 Sep late). Lucide outlines with labels, per §2's
   five tabs; Rate is larger and breaks the bar's top edge, and the bar curves up behind it.
   All in cqw so it scales with the phone. */
.dfs-nav{ display:flex; justify-content:space-around; align-items:flex-end;
  padding:2.6cqw 1.4cqw 4.8cqw; border-top:1px solid rgba(154,160,169,.22);
  background:#1A1F2E; }
.dfs-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1.1cqw;
  font-size:2.3cqw; line-height:1; color:#9AA0A9; white-space:nowrap; }
.dfs-tab svg{ inline-size:5.4cqw; block-size:5.4cqw; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dfs-tab.on{ color:#7FFFD4; }
/* ⚑ THE CURVE ENDS EXACTLY ON THE BAR'S TOP LINE (Daniel, 14 Sep late: the arc overhung the
   line). The bump is drawn from the BAR, not the button: a disc whose top is lifted by exactly
   the height that shows, clipped 1px below the bar's edge. The arc's two ends land on the line
   and the disc's fill covers the line where the button crosses it. */
.dfs-nav{ position:relative; }
/* only Dreadfuls bars have a Rate bump; FindaFan phones share .dfs-nav */
.dfs-nav:has(.dfs-rate)::before{ content:""; box-sizing:border-box; position:absolute; left:50%; top:calc(-5.9cqw - 1px); inline-size:17cqw;
  block-size:17cqw; margin-inline-start:-8.5cqw; border-radius:50%; background:#1A1F2E;
  border:1px solid rgba(154,160,169,.22); clip-path:inset(0 0 calc(100% - 5.9cqw - 1px) 0); }
/* equal tabs, so Rate sits exactly under the curve whatever the label lengths */
.dfs-tab{ flex:1 1 0; min-inline-size:0; }
.dfs-rate{ position:relative; z-index:1; margin-block-start:-7cqw; }
.dfs-rb{ inline-size:11.6cqw; block-size:11.6cqw; border-radius:50%; border:1px solid #7FFFD4;
  color:#7FFFD4; display:flex; align-items:center; justify-content:center; }
.dfs-rb svg{ inline-size:5.6cqw; block-size:5.6cqw; stroke-width:2.2; }
.dfs-drops svg{ inline-size:3.6cqw; block-size:3.6cqw; }

@media (max-width: 720px){
  .dfs-stage{ gap:0; }
  .dfp.is-flank{ display:none; }
  .dfp.is-lead{ block-size:100%; margin-inline:0; }
}

/* ⚑ The hero device stage sits BARE. [[no-frames-on-visuals]] is site-wide
   since 2026-08-28: visual support carries no card, border or background.
   .study-visual's base rule supplies all three, so this opts out the way
   .is-prototype already does. */
.study-visual.is-devices{
  border:0; background:transparent; padding:0; overflow:visible;
}

/* ── FindaFan screen variant: brutalist shell white, harsh black, the
     Braves red as the team accent (FINDAFAN.md §5). Same furniture classes
     as Dreadfuls so one stage can hold both products. ── */
.dfp-screen.is-ff{ background:#EFEDE7; color:#111; font-family:"Space Grotesk",var(--font-sans,system-ui,sans-serif); }
.dfp-screen.is-ff::after{ display:none; }
.dfp-screen.is-ff .dfs-status{ color:#111; font-weight:500; }
.dfp-screen.is-ff .dfs-wm{ font-family:inherit; font-weight:700; font-size:8.6cqw; color:#111; letter-spacing:-.035em; }
.ff-rule{ block-size:1.2cqw; background:#111; }
.ff-claim{ border:1cqw solid #111; background:#CE1141; color:#EFEDE7; padding:3.6cqw 4cqw;
  box-shadow:1.8cqw 1.8cqw 0 #111; display:flex; flex-direction:column; gap:1.2cqw; }
.ff-claim b{ font-weight:700; font-size:6.4cqw; letter-spacing:-.02em; line-height:1.05; }
.ff-claim span{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:3cqw;
  font-weight:600; letter-spacing:.14em; opacity:.92; }
/* ⚑ Real Houston, not an abstraction: the inner loop from OpenStreetMap,
   desaturated to 16% and lifted so the brutalist zone boxes read on top of
   it. The zones ARE Montrose, Heights, EaDo, Midtown, Third Ward and the
   Museum District, in roughly their real relative positions. */
.ff-map{ border:1cqw solid #111; background:#E3E0D8 center/cover no-repeat;
  position:relative; overflow:hidden; aspect-ratio:330/262; }
.ff-map.has-map{ background-image:url("../assets/images/cards/ai/houston-inner-loop.jpg"); }
/* ⚑ THE ZONES SIT ON THE MAP, THEY DO NOT BURY IT. These were opaque
   #EFEDE7 and the Houston streets underneath were invisible, so it still
   read as the abstract grid it replaced. 28% lets the street structure
   through; the claimed zone stays near-opaque because it is the one thing
   that has to win.
   ⚑ A transparent .ff-zone was first added ABOVE this rule and lost the
   cascade to it silently. Same file, same specificity, later wins. Change
   the value here, never stack a second rule. */
.ff-zone{ position:absolute; border:.8cqw solid #111; background:rgba(239,237,231,.28); }
.ff-zone.hot{ background:rgba(206,17,65,.82); }
.ff-pin{ position:absolute; inline-size:4.8cqw; aspect-ratio:1; border-radius:50%;
  background:#111; border:.8cqw solid #EFEDE7; }
.ff-count b{ display:block; font-weight:700; font-size:7.2cqw; letter-spacing:-.02em; color:#111; }
.ff-count span{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:3.2cqw;
  font-weight:600; letter-spacing:.06em; color:#111; }
.dfp-screen.is-ff .dfs-nav{ background:#EFEDE7; border-top:1.2cqw solid #111; padding:0; gap:0; }
.dfp-screen.is-ff .dfs-nav i{ flex:1; block-size:14cqw; border:0; border-right:.8cqw solid #111;
  border-radius:0; display:block; }
.dfp-screen.is-ff .dfs-nav i:last-child{ border-right:0; }
.dfp-screen.is-ff .dfs-nav i.on{ background:#111; }

/* ── Launch screen ────────────────────────────────────────────────────────
   ⚑ No nav, no chrome, nothing to tap. Its only job is the mark. */
.dfs-launch-body{ justify-content:center; align-items:center; gap:0;
  padding-block:6cqw 10cqw; }
/* ⚑⚑ SPECIFICITY, NOT SIZE. `.study-visual img` is (0,1,1) and `.dfs-coin`
   was (0,1,0), so the wrapper's rule won and stretched the coin to
   152x263 instead of square. This is the SECOND time today a broad
   `.study-visual` rule leaked into an app screen; the first centred all
   their text. Any screen-content rule must out-specify that wrapper.
   ⚑ object-fit:contain is a belt-and-braces guard: even if something else
   wins the box, the artwork will not be cropped, only letterboxed. */
.dfp-screen .dfs-coin{ inline-size:52cqw; block-size:52cqw; aspect-ratio:1;
  object-fit:contain; max-inline-size:none; }
.dfs-word{ font-family:"IM Fell English",Georgia,serif; font-size:9.5cqw;
  color:#E8E8E0; line-height:1; margin-block-start:5cqw; }
.dfs-rule{ inline-size:13cqw; block-size:1px; margin-block:4.6cqw;
  background:rgba(127,255,212,.42); }
.dfs-foot{ margin:0; font-size:2.5cqw; letter-spacing:.2em; text-transform:uppercase;
  color:#9AA0A9; text-align:center; line-height:2; }

/* ── Continue-marathon card as a real target ─────────────────────────────
   ⚑ It carried the marathon's state and no sign it went anywhere, so the
   route to the marathon screen was invisible. The chevron is the message;
   no "tap to open" copy accompanies it. */
.dfs-go{ display:flex; flex-direction:row; align-items:center; gap:2.6cqw;
  text-decoration:none; color:inherit; }
.dfs-go-main{ flex:1; min-inline-size:0; display:flex; flex-direction:column;
  gap:1.6cqw; }
.dfs-go svg{ inline-size:3.6cqw; block-size:3.6cqw; flex:0 0 auto; color:#9AA0A9; }
.dfs-go:hover svg, .dfs-go:focus-visible svg{ color:#7FFFD4; }

/* ══════════════════════════════════════════════════════════════════
   DREADFULS SCREENS, PORTED FROM THE ARTIFACT (14 Sep late)
   Daniel: the hero and the homepage card must show the newest design, and
   the newest design lives in the Dreadfuls artifact. These rules are the
   artifact's own, GENERATED from its stylesheet: every length over 1.6px is
   converted from the artifact's 250px phone into cqw (1px = 0.4cqw), so the
   screens scale with any phone on this site. Scoped under .dfx so nothing
   leaks into the page. Hairlines stay in px so they stay crisp.
   ⚑ Regenerate from the artifact rather than hand-editing, or the two drift.
   ⚑ The markup carries `inert`: the buttons are the app's, drawn, not usable
   here, and must not become tab stops on the portfolio.
   ══════════════════════════════════════════════════════════════════ */
.dfx{ --p-surface:#141418; --p-primary:#1A1F2E; --p-secondary:#243B39; --p-accent:#7FFFD4;
  --p-text:#E8E8E0; --p-muted:#9AA0A9; --p-warn:#E8B14C;
  --app-display:"IM Fell English",Georgia,serif; --app-text:"EB Garamond",Georgia,serif;
  --app-data:"IBM Plex Mono",ui-monospace,Menlo,monospace; --f-display:"DM Serif Display",Georgia,serif;
  color:var(--p-text); line-height:1.6; font-size:5.6cqw; font-family:var(--app-data); }
.dfx .pbody{ overflow:hidden !important; }
.dfx .st{display:flex;justify-content:space-between;padding:3.6cqw 5.6cqw 1.2cqw;font-size:3.6cqw;
      color:var(--p-muted);font-variant-numeric:tabular-nums}
.dfx .pbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.6cqw 5.6cqw 3.2cqw;
    display:flex;flex-direction:column;gap:4.8cqw;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-muted) 45%,transparent) transparent;
    overscroll-behavior:contain}
.dfx .brand{font-family:var(--app-display);font-size:7.6cqw;color:var(--p-text);letter-spacing:-.01em}
.dfx .plabel{font-size:3.4cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted)}
.dfx .mcard{background:var(--p-secondary);border-radius:2.4cqw;padding:4.4cqw 4.8cqw;
         display:flex;flex-direction:column;gap:2.8cqw}
.dfx .mcard .ttl{font-family:var(--app-text);font-size:6.4cqw;color:var(--p-text);line-height:1.15}
.dfx .mcard .meta{font-size:3.6cqw;color:var(--p-muted)}
.dfx .bar{block-size:1.6cqw;background:var(--p-primary);border-radius:0.8cqw;overflow:hidden}
.dfx .mcard--go{flex-direction:row;align-items:center;gap:3.6cqw;text-decoration:none;
    cursor:pointer;border:1px solid transparent}
.dfx .mcard--go .mc-main{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:2.0cqw}
.dfx .mcard--go .ttl,.dfx .mcard--go .meta,.dfx .mcard--go .mini-bar{display:block}
.dfx .mcard--go .chev{flex:0 0 auto;color:var(--p-muted)}
.dfx .bar i{display:block;block-size:100%;background:var(--p-accent);inline-size:13%}
.dfx .row{display:flex;gap:3.6cqw;align-items:center}
.dfx .poster{inline-size:14.4cqw;block-size:20.8cqw;border-radius:1.6cqw;flex:0 0 auto;
    background:var(--p-primary);border:1px solid color-mix(in srgb,var(--p-accent) 22%,transparent);
    display:flex;align-items:center;justify-content:center}
.dfx .poster span{font-family:var(--app-display);font-size:6.0cqw;color:var(--p-accent);opacity:.75}
.dfx .row .info{flex:1;min-inline-size:0}
.dfx .row .info b{display:block;font-family:var(--app-text);font-size:5.4cqw;color:var(--p-text);
    font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfx .row .info span{font-size:3.6cqw;color:var(--p-muted)}
.dfx .score{font-family:var(--app-data);font-weight:600;font-size:6.8cqw;color:var(--p-accent);
    font-variant-numeric:tabular-nums}
.dfx .sect{display:flex;flex-direction:column;gap:2.8cqw}
.dfx .carou{display:flex;gap:2.4cqw;overflow-x:auto;overflow-y:hidden;padding-block-end:1.6cqw;
    scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-muted) 45%,transparent) transparent;
    scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.dfx .cslot{scroll-snap-align:start}
.dfx .cslot{inline-size:13.2cqw;flex:0 0 auto;display:flex;flex-direction:column;gap:1.2cqw}
.dfx .cslot .pf{inline-size:13.2cqw;block-size:18.8cqw;border-radius:1.2cqw;background:var(--p-primary);
    border:1px solid color-mix(in srgb,var(--p-accent) 22%,transparent);
    display:flex;align-items:center;justify-content:center;position:relative}
.dfx .cslot .pf span{font-family:var(--app-display);font-size:5.2cqw;color:var(--p-accent);opacity:.8}
.dfx .cslot .rk{position:absolute;inset-block-start:-1px;inset-inline-start:-1px;
    background:var(--p-accent);color:var(--p-primary);font-family:var(--app-data);
    font-weight:600;font-size:2.8cqw;padding:0 1.0cqw;border-radius:1.2cqw 0 1.2cqw 0;
    line-height:1.35}
.dfx .cslot em{font-style:normal;font-family:var(--app-data);font-weight:600;font-size:3.2cqw;
    color:var(--p-accent);text-align:center}
.dfx .upc{display:flex;gap:2.8cqw;align-items:center}
.dfx .upc .d{font-family:var(--app-data);font-size:3.2cqw;color:var(--p-accent);inline-size:10.4cqw;
    flex:0 0 auto;letter-spacing:.04em}
.dfx .upc .n{font-family:var(--app-text);font-size:4.6cqw;color:var(--p-text);flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfx .trend{display:flex;justify-content:space-between;align-items:baseline;gap:3.2cqw}
.dfx .trend .n{font-family:var(--app-text);font-size:4.6cqw;color:var(--p-text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfx .trend .m{font-size:3.2cqw;color:var(--p-muted);flex:0 0 auto}
.dfx .mini-bar{block-size:1.2cqw;background:var(--p-primary);border-radius:0.8cqw;overflow:hidden}
.dfx .mini-bar i{display:block;block-size:100%;background:var(--p-accent);inline-size:35%}
.dfx .rank-q{font-family:var(--app-text);font-size:5.2cqw;color:var(--p-text);text-align:center}
.dfx .buckets{display:flex;gap:2.8cqw}
.dfx .bucket{flex:1;display:flex;flex-direction:column;align-items:center;gap:2.0cqw}
.dfx .bucket .dot{inline-size:13.6cqw;block-size:13.6cqw;border-radius:50%;border:1.6px solid var(--p-muted);
    display:flex;align-items:center;justify-content:center;color:var(--p-muted);font-size:6.0cqw}
.dfx .bucket.sel .dot{border-color:var(--p-accent);background:var(--p-accent);color:var(--p-primary)}
.dfx .bucket span{font-size:3.0cqw;color:var(--p-muted);text-align:center;line-height:1.3}
.dfx .bucket.sel span{color:var(--p-accent)}
.dfx .versus{display:flex;align-items:stretch;gap:0;position:relative}
.dfx .vs-card{flex:1;border:1.4px solid color-mix(in srgb,var(--p-accent) 45%,transparent);
    border-radius:2.4cqw;padding:5.6cqw 3.6cqw;display:flex;flex-direction:column;gap:1.6cqw;
    align-items:center;text-align:center;justify-content:center;min-block-size:35.2cqw}
.dfx .vs-card b{font-family:var(--app-text);font-size:5.4cqw;color:var(--p-text);font-weight:400;line-height:1.15}
.dfx .vs-card span{font-size:3.2cqw;color:var(--p-muted)}
.dfx .vs-card em{font-style:normal;font-family:var(--app-data);font-weight:600;font-size:5.2cqw;color:var(--p-accent);
    font-variant-numeric:tabular-nums}
.dfx .vs-or{align-self:center;inline-size:10.4cqw;block-size:10.4cqw;border-radius:50%;
    background:var(--p-secondary);border:1.4px solid var(--p-accent);color:var(--p-accent);
    display:flex;align-items:center;justify-content:center;font-size:3.0cqw;letter-spacing:.06em;
    margin-inline:-7px;z-index:1;flex:0 0 auto}
.dfx .rank-acts{display:flex;justify-content:space-between;align-items:center;gap:2.4cqw;
    font-size:3.4cqw;color:var(--p-muted)}
.dfx .rank-acts .tough{border:1px solid var(--p-muted);border-radius:1.6cqw;padding:2.4cqw 4.4cqw;color:var(--p-text)}
.dfx .st-item{background:var(--ink);padding:6.0cqw 6.8cqw;display:flex;flex-direction:column;gap:2.0cqw}
.dfx .st-item b{font-size:4.0cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim);
    font-weight:500}
.dfx .st-item span{font-size:5.2cqw;color:var(--paper)}
.dfx .st-item em{font-style:normal;font-size:4.2cqw;color:var(--paper-dim);line-height:1.45}
.dfx button{font-family:var(--app-data);text-transform:none;letter-spacing:0;color:var(--p-text);
    background:none;border:1px solid transparent;padding:0;transition:none}
.dfx .r-top{display:flex;flex-direction:column;gap:3.2cqw;padding:1.6cqw 5.6cqw 4.0cqw;
    border-block-end:1px solid color-mix(in srgb,var(--p-muted) 20%,transparent)}
.dfx .r-head{display:flex;gap:3.6cqw;align-items:center}
.dfx .r-head .info{flex:1;min-inline-size:0}
.dfx .r-head .info b{display:block;font-family:var(--app-display);font-weight:400;font-size:6.4cqw;
    color:var(--p-text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfx .r-head .info span{display:block;font-size:3.4cqw;color:var(--p-muted)}
.dfx .r-live{text-align:end;flex:0 0 auto;min-inline-size:23.2cqw}
.dfx .r-live em{display:block;font-family:var(--app-data);font-weight:600;font-style:normal;font-size:12.0cqw;
    line-height:1;color:var(--p-accent);font-variant-numeric:tabular-nums}
.dfx .r-live em.empty{color:var(--p-muted);opacity:.45}
.dfx .r-live i{display:block;font-style:normal;font-family:var(--app-data);font-size:3.6cqw;min-block-size:5.2cqw;
    color:var(--p-accent);opacity:0;transition:opacity .2s ease-out}
.dfx .r-live i.show{opacity:1}
.dfx .r-live i.down{color:var(--p-muted)}
.dfx .seg{display:flex;border:1px solid color-mix(in srgb,var(--p-muted) 45%,transparent);border-radius:2.0cqw;overflow:hidden}
.dfx .seg button{flex:1;border-radius:0;font-size:3.4cqw;padding:2.4cqw 1.6cqw;color:var(--p-muted)}
.dfx .seg button[aria-pressed="true"]{background:var(--p-secondary);color:var(--p-text)}
.dfx .r-body{gap:5.6cqw}
.dfx .r-q{font-family:var(--app-text);font-size:6.0cqw;color:var(--p-text);text-align:center;line-height:1.2}
.dfx .r-sub{font-size:3.4cqw;color:var(--p-muted);text-align:center}
.dfx .bucket{padding:1.6cqw 0;cursor:pointer}
.dfx .bucket span{font-size:3.6cqw}
.dfx .vs-card{cursor:pointer;min-block-size:41.6cqw;padding:5.6cqw 3.6cqw;
    border:1.4px solid color-mix(in srgb,var(--p-accent) 45%,transparent);border-radius:2.4cqw}
.dfx .vs-card i{font-style:normal;font-size:3.0cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--p-muted)}
.dfx .vs-card i.match{color:var(--p-accent)}
.dfx .rank-acts button{font-size:3.6cqw;color:var(--p-muted);padding:3.2cqw 1.6cqw}
.dfx .rank-acts button:disabled{opacity:.35}
.dfx .rank-acts .tough{border:1px solid var(--p-muted);border-radius:1.6cqw;padding:2.8cqw 4.0cqw;color:var(--p-text)}
.dfx .r-go{inline-size:100%;background:var(--p-accent);color:var(--p-primary);font-weight:600;
    font-size:3.8cqw;letter-spacing:.08em;text-transform:uppercase;padding:4.0cqw;border-radius:2.0cqw;margin-block-start:auto}
.dfx .cmp{display:flex;flex-direction:column;gap:3.6cqw;padding-block-start:4.8cqw;
    border-block-start:1px solid color-mix(in srgb,var(--p-muted) 20%,transparent)}
.dfx .cmp .versus .vs-card{min-block-size:32.0cqw}
.dfx .cmp-done{display:grid;grid-template-columns:5.6cqw 1fr 5.6cqw 1fr;gap:2.4cqw;align-items:center;
    font-size:3.6cqw;color:var(--p-muted);padding:2.4cqw 3.2cqw;border-radius:2.0cqw;background:var(--p-primary)}
.dfx .cmp-done em{font-style:normal;font-family:var(--app-data);color:var(--p-muted)}
.dfx .cmp-done span{font-family:var(--app-text);font-size:4.8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfx .cmp-done span:last-child{text-align:end}
.dfx .cmp-done span.won{color:var(--p-accent)}
.dfx .cmp-done i{font-style:normal;text-align:center;color:var(--p-text)}
.dfx .cmp-next{block-size:12.0cqw;border:1px dashed color-mix(in srgb,var(--p-muted) 40%,transparent);border-radius:2.0cqw;
    font-family:var(--app-data);font-size:3.4cqw;color:var(--p-muted);display:flex;align-items:center;padding-inline:3.6cqw;opacity:.6}
.dfx .r-go:disabled{opacity:.3;cursor:default}
.dfx .recs{display:flex;flex-direction:column;gap:2.4cqw}
.dfx .rec{inline-size:100%;padding:3.6cqw 4.0cqw;border:1px solid color-mix(in srgb,var(--p-muted) 45%,transparent);
    border-radius:2.0cqw;font-family:var(--app-text);font-size:5.2cqw;color:var(--p-text);text-align:start}
.dfx .rec.sel{border-color:var(--p-accent);background:color-mix(in srgb,var(--p-accent) 14%,transparent);color:var(--p-accent)}

/* site-side glue for the ported screens */
.dfx .pbody{ flex:1; }
.dfx .dfs-nav{ margin-block-start:auto; }
.dfs-rate.on{ color:#7FFFD4; }
.dfs-rate.on .dfs-rb{ background:#7FFFD4; color:#1A1F2E; }
/* ⚑ NO SCROLLBAR ON THE MOCKUP CAROUSEL (Daniel, 15 Sep): the Top 10 is drawn, not scrollable,
   here. As the posters slid in, the browser drew a horizontal scrollbar across the scores. */
.dfx .carou{ overflow:hidden; scrollbar-width:none; }
.dfx .carou::-webkit-scrollbar{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   FINDAFAN SCREENS (.ffx), 15 Sep 2026 — the hero's three phones
   Ported by hand from the real prototype (~/findafan/app), the same way
   .dfx was ported from the Dreadfuls artifact: every size in cqw so one
   screen serves any phone on this site. Scoped under .ffx so nothing here
   can reach the Dreadfuls screens or the site.
   ⚑ Team colour lives ONLY in the band and the tabs (FINDAFAN.md §5):
   Braves #CE1141 with #13274F as the secondary edge and shadow.
   ⚑ The map here is the SCHEMATIC zone diagram, not Mapbox: a hero must
   not depend on a network call or a token, and the real map's tiles turn
   to mush at this size. Geometry matches §7.1 (Loop 610 centre, four
   quadrants split by I-10, Hardy and Telephone Road).
   ══════════════════════════════════════════════════════════════════ */
.ffx{ --ink:#0A0A0A; --shell:#EFEEE9; --team:#CE1141; --team2:#13274F;
  background:var(--shell); color:var(--ink);
  font-family:"Space Grotesk",var(--font-sans,system-ui,sans-serif); }
.ffx::after{ display:none; }
.ffx .dfs-status{ color:var(--ink); font-weight:500; }
.ffx .ffx-body{ flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* band: the one place the team colour fills */
.ffx-band{ background:var(--team); color:#fff; border-block-end:2.6cqw solid var(--team2);
  box-shadow:0 .5cqw 0 var(--ink); padding:3cqw 5.2cqw 4.4cqw; }
.ffx-brandrow{ display:flex; align-items:center; justify-content:space-between; }
.ffx-brand{ font-weight:700; font-size:4.4cqw; letter-spacing:-.03em; }
.ffx-chiprow{ display:flex; gap:1.6cqw; }
.ffx-ichip{ inline-size:9cqw; block-size:9cqw; border:.55cqw solid var(--ink); background:var(--shell);
  box-shadow:.8cqw .8cqw 0 var(--team2); display:grid; place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:2.6cqw; font-weight:500; color:var(--ink); }
/* ⚑ EVERY p AND h INSIDE A SCREEN NEEDS ITS OWN color. The site has a global `p` rule, and
   ANY matching rule beats an inherited one, so .ffx-band's white never reached this <p>:
   the team name rendered near-black on the team's red. Same trap as the coin's size rule. */
.ffx-team{ color:#fff; margin:5.6cqw 0 0; font-size:11cqw; line-height:.92; letter-spacing:-.04em; font-weight:700; }
.ffx-teamline{ color:#fff; margin:1.6cqw 0 0; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:3cqw; }

/* team tabs: two-tone tile + nickname, active one takes the team colour */
.ffx-tabs{ display:flex; gap:1.6cqw; padding:3.4cqw 5.2cqw 0; }
.ffx-tab{ display:flex; align-items:center; gap:1.6cqw; padding:1cqw 2.4cqw 1cqw 1cqw;
  border:.55cqw solid var(--ink); background:var(--shell);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:2.8cqw; font-weight:500; }
.ffx-tab.on{ background:var(--team); color:#fff; box-shadow:1cqw 1cqw 0 var(--team2), 1cqw 1cqw 0 .55cqw var(--ink); }
.ffx-tile{ inline-size:6.4cqw; block-size:6.4cqw; border:.55cqw solid var(--ink); display:grid; place-items:center;
  font-size:2.2cqw; font-weight:700; color:#fff; }

/* the zone map */
.ffx-map{ position:relative; margin:3.4cqw 5.2cqw 0; border:.55cqw solid var(--ink); background:#E7E5DE;
  box-shadow:1.2cqw 1.2cqw 0 var(--ink); overflow:hidden; aspect-ratio:900/700; }
.dfp-screen .ffx-map img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover;
  object-position:50% 46%; max-inline-size:none; }
.ffx-map svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; }
/* zone fills, the app's own (§8.2) */
.ffx{ --zf-central:#FFD23F; --zf-northwest:#8ECBF5; --zf-northeast:#A9E39A; --zf-southwest:#FFAB8A; --zf-southeast:#CDB6F0; }
.ffx-z{ stroke:#0A0A0A; stroke-width:5; fill-opacity:.42; }
/* ⚑ THE REST STATE IS THE FINISHED STATE (the rule dreadfuls-hero.js set): with no JS, no
   motion, or reduced motion, the map shows Central selected, which is where the app opens
   and what the fan list beneath it is already showing. */
.ffx-z[data-z="central"]{ fill-opacity:.92; stroke-width:10; }
.ffx-zlab[data-z="central"] rect{ fill:#0A0A0A; }
.ffx-zlab[data-z="central"] text{ fill:#EFEEE9; }
.ffx-zname{ font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700; font-size:24px;
  text-anchor:middle; fill:#0A0A0A; }
.ffx-zcount{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:18px; text-anchor:middle; fill:#0A0A0A; }
.ffx-allzones{ position:absolute; inset-block-start:2.4cqw; inset-inline-start:2.4cqw; padding:1cqw 1.8cqw;
  border:.55cqw solid var(--ink); background:var(--shell); box-shadow:.7cqw .7cqw 0 var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.6cqw; font-weight:500; }
.ffx-zonebar{ display:flex; gap:1.6cqw; padding:3cqw 5.2cqw 0; }
.ffx-zonebtn{ flex:1; display:flex; align-items:center; gap:1.6cqw; padding:1.8cqw 2.4cqw;
  border:.55cqw solid var(--ink); background:var(--shell); font-weight:700; font-size:3.2cqw; }
.ffx-sw{ inline-size:3.2cqw; block-size:3.2cqw; border:.55cqw solid var(--ink); }
.ffx-club{ display:flex; align-items:center; gap:1.2cqw; padding:1.8cqw 2.8cqw; border:.55cqw solid var(--ink);
  background:var(--ink); color:var(--shell); font-weight:700; font-size:3.2cqw;
  box-shadow:.8cqw .8cqw 0 var(--team2), .8cqw .8cqw 0 .55cqw var(--ink); }

.ffx-h2{ display:flex; align-items:center; gap:1.6cqw; margin:4cqw 5.2cqw 0; font-size:4.2cqw;
  letter-spacing:-.02em; font-weight:700; }
.ffx-num{ background:var(--ink); color:var(--shell); padding:0 1.4cqw;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:3.8cqw; }
.ffx-rows{ display:flex; flex-direction:column; gap:1.6cqw; margin:2.4cqw 5.2cqw 0; }
.ffx-row{ display:flex; align-items:center; gap:2.4cqw; padding:1.8cqw 2.4cqw;
  border:.55cqw solid var(--ink); background:var(--shell); }
.ffx-icon{ inline-size:9.6cqw; block-size:9.6cqw; border:.55cqw solid var(--ink); display:grid; place-items:center;
  font-weight:700; font-size:3.4cqw; color:#fff; flex:0 0 auto; }
.ffx-row b{ display:block; font-size:3.6cqw; font-weight:700; }
.ffx-badges{ display:flex; gap:.8cqw; margin-block-start:.8cqw; }
.ffx-badges i{ font-style:normal; border:.4cqw solid var(--ink); padding:0 1cqw;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.2cqw; }

/* the onboarding phone */
.ffx-top{ display:flex; align-items:center; gap:2.4cqw; padding:3.6cqw 5.2cqw 0; }
.ffx-back{ inline-size:8cqw; block-size:8cqw; border:.55cqw solid var(--ink); display:grid; place-items:center;
  font-size:4cqw; }
.ffx-step{ flex:1; display:flex; flex-direction:column; gap:1.2cqw;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.6cqw; }
.ffx-bar{ block-size:1.6cqw; border:.55cqw solid var(--ink); }
.ffx-bar i{ display:block; block-size:100%; background:var(--ink); inline-size:43%; }
.ffx-title{ color:var(--ink); margin:5.2cqw 5.2cqw 0; font-size:7.4cqw; line-height:1.02; letter-spacing:-.03em; font-weight:700; }
.ffx-field{ display:flex; margin:3.6cqw 5.2cqw 0; border:.55cqw solid var(--ink); background:#fff; }
.ffx-field span{ padding:2.4cqw; border-inline-end:.55cqw solid var(--ink); font-size:3.2cqw; }
.ffx-field em{ font-style:normal; padding:2.4cqw; font-size:3.4cqw; color:#8a8984; }
.ffx-opt{ display:flex; align-items:center; gap:2.4cqw; padding:2.4cqw; border:.55cqw solid var(--ink);
  background:var(--shell); font-size:3.8cqw; font-weight:700; }
.ffx-opt.on{ background:#fff; box-shadow:1.2cqw 1.2cqw 0 var(--ink); }
.ffx-opt.off{ border-style:dashed; color:#4A4A46; }
.ffx-opt small{ display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.4cqw; font-weight:400; }
.ffx-check{ inline-size:5.6cqw; block-size:5.6cqw; border:.55cqw solid var(--ink); background:var(--ink);
  color:var(--shell); display:grid; place-items:center; font-size:3cqw; margin-inline-start:auto; }
.ffx-check.empty{ background:var(--shell); }

/* the fan-profile phone */
.ffx-sheet{ margin-block-start:auto; background:var(--shell); border-block-start:.8cqw solid var(--ink);
  box-shadow:0 -1.6cqw 0 var(--ink); padding:3.2cqw 5.2cqw 6cqw; display:flex; flex-direction:column; gap:3cqw; }
.ffx-grab{ inline-size:12cqw; block-size:1.2cqw; background:var(--ink); margin:0 auto 1cqw; }
.ffx-fanhead{ display:flex; align-items:center; gap:3.2cqw; }
.ffx-bigicon{ inline-size:20cqw; block-size:20cqw; border:.7cqw solid var(--ink); display:grid; place-items:center;
  font-weight:700; font-size:7cqw; color:#fff; }
.ffx-fanname{ color:var(--ink); margin:0; font-size:6cqw; font-weight:700; letter-spacing:-.02em; }
.ffx-meta{ color:var(--ink); margin:.8cqw 0 0; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.6cqw; }
.ffx-reached{ display:inline-flex; gap:1cqw; margin-block-start:1.2cqw; padding:.6cqw 1.6cqw;
  background:var(--ink); color:var(--shell); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.4cqw; }
.ffx-socials{ display:grid; grid-template-columns:1fr 1fr; gap:1.6cqw; }
.ffx-social{ display:flex; align-items:center; gap:1.6cqw; padding:2.4cqw; border:.55cqw solid var(--ink);
  background:#fff; font-size:3.2cqw; font-weight:700; }
.ffx-bio{ color:var(--ink); margin:0; padding:2.8cqw; border:.55cqw solid var(--ink); background:#fff; font-size:3.4cqw; line-height:1.4; }
.ffx-save{ display:flex; align-items:center; justify-content:center; gap:1.6cqw; padding:3cqw;
  border:.55cqw solid var(--ink); background:var(--ink); color:var(--shell); font-weight:700; font-size:3.8cqw;
  box-shadow:1.2cqw 1.2cqw 0 var(--team2), 1.2cqw 1.2cqw 0 .55cqw var(--ink); }

/* ── Motion: the zones claim themselves, one after another ───────────────
   ⚑ The hero's job is to show what the app IS, and what it is, is a city
   cut into fan territories. So the only thing that moves is the map: each
   zone lights in turn on a 12s loop, and the count under the headline
   changes with it. Nothing else animates; §8.2's "nothing bouncy" applies
   to the product, and a hero that fidgets reads as a template.
   ⚑ Reduced motion stops the cycle on Central, which is the state every
   other screen in the hero is already showing. */
@keyframes ffx-claim{ 0%,16%{ fill-opacity:.92; } 20%,100%{ fill-opacity:.42; } }
@keyframes ffx-claim-stroke{ 0%,16%{ stroke-width:10; } 20%,100%{ stroke-width:5; } }
.ffx-cycle.is-playing .ffx-z{ animation:ffx-claim 9s linear 1, ffx-claim-stroke 9s linear 1; }
.ffx-cycle.is-playing .ffx-zlab rect{ animation:ffx-lab 9s linear 1; }
.ffx-cycle.is-playing .ffx-zlab text{ animation:ffx-labtext 9s linear 1; }
.ffx-cycle.is-playing .ffx-zlab[data-z="central"] *{ animation-delay:0s; }
.ffx-cycle.is-playing .ffx-zlab[data-z="northwest"] *{ animation-delay:1.8s; }
.ffx-cycle.is-playing .ffx-zlab[data-z="northeast"] *{ animation-delay:3.6s; }
.ffx-cycle.is-playing .ffx-zlab[data-z="southeast"] *{ animation-delay:5.4s; }
.ffx-cycle.is-playing .ffx-zlab[data-z="southwest"] *{ animation-delay:7.2s; }
@keyframes ffx-lab{ 0%,16%{ fill:#0A0A0A; } 20%,100%{ fill:#EFEEE9; } }
@keyframes ffx-labtext{ 0%,16%{ fill:#EFEEE9; } 20%,100%{ fill:#0A0A0A; } }
.ffx-cycle.is-playing .ffx-z[data-z="central"]{ animation-delay:0s, 0s; }
.ffx-cycle.is-playing .ffx-z[data-z="northwest"]{ animation-delay:1.8s, 1.8s; }
.ffx-cycle.is-playing .ffx-z[data-z="northeast"]{ animation-delay:3.6s, 3.6s; }
.ffx-cycle.is-playing .ffx-z[data-z="southeast"]{ animation-delay:5.4s, 5.4s; }
.ffx-cycle.is-playing .ffx-z[data-z="southwest"]{ animation-delay:7.2s, 7.2s; }
/* the readout under the map rolls with the same clock: five lines, one step each */
.ffx-reel{ block-size:5.4cqw; overflow:hidden; }
.ffx-reel u{ display:block; block-size:5.4cqw; text-decoration:none; }
@keyframes ffx-roll{ 0%,16%{ transform:translateY(0); } 20%,36%{ transform:translateY(-5.4cqw); }
  40%,56%{ transform:translateY(-10.8cqw); } 60%,76%{ transform:translateY(-16.2cqw); }
  80%,96%{ transform:translateY(-21.6cqw); } 100%{ transform:translateY(0); } }
.ffx-cycle.is-playing .ffx-reel > div{ animation:ffx-roll 9s steps(1, end) 1; }
@media (prefers-reduced-motion:reduce){
  .ffx-cycle .ffx-z, .ffx-cycle .ffx-reel > div, .ffx-cycle .ffx-zlab *{ animation:none; }
  .ffx-cycle .ffx-z[data-z="central"]{ fill-opacity:.92; stroke-width:10; }
  .ffx-cycle .ffx-zlab[data-z="central"] rect{ fill:#0A0A0A; }
  .ffx-cycle .ffx-zlab[data-z="central"] text{ fill:#EFEEE9; }
}

/* the fan sheet keeps Home behind it, dimmed, so it reads as a sheet and not
   as a screen of its own */
.ffx-behind{ position:relative; }
.ffx-behind > .ffx-band, .ffx-behind > .ffx-rows{ filter:saturate(.75); }
.ffx-behind::before{ content:""; position:absolute; inset:0; background:rgba(10,10,10,.45); z-index:1; }
.ffx-behind > .ffx-sheet{ position:relative; z-index:2; }

/* sheet head and the report link, to match the real screen */
.ffx-sheethead{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:4.4cqw; }
.ffx-x{ inline-size:8cqw; block-size:8cqw; border:.55cqw solid var(--ink); display:grid; place-items:center;
  font-size:4cqw; font-weight:400; }
.ffx-report{ text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.8cqw;
  text-decoration:underline; text-underline-offset:.6cqw; }