Leaderboard Table

1/**
2 * LeaderboardTable — editorial league standings: rank-change arrows, zone
3 * markers, W/D/L form dots, tabular figures, and rows that FLIP to their new
4 * positions when results change.
5 *
6 * Props: teams (raw records, order doesn't matter), zones, highlightId,
7 * matchday (label shown in the caption), theme.
8 * Team: { id, name, short, color, played, won, drawn, lost, gf, ga, form, prevRank? }
9 * Points (3/1/0), goal difference and the ordering (pts, GD, GF, name) are
10 * computed for you. Rank movement is read from prevRank.
11 *
12 * Browser support: Web Animations API (all evergreen browsers). Without it the
13 * rows simply re-order.
14 * Accessibility: role="table" built from a CSS grid so rows can animate
15 * reliably; header cells use role="columnheader", rank changes are exposed as
16 * visually hidden text ("up 2 places"), form dots are one labelled image
17 * ("Last five: won, won, drew, lost, won"), and a polite live region
18 * announces re-orders. Abbreviated headers carry a full-name title/aria-label.
19 * Reduced motion: no FLIP and no flash; rows jump to their new place.
20 */
21import { useLayoutEffect, useMemo, useRef, useState } from "react";
22 
23export type Result = "W" | "D" | "L";
24export interface Team {
25  id: string;
26  name: string;
27  short: string;
28  color: string;
29  played: number;
30  won: number;
31  drawn: number;
32  lost: number;
33  gf: number;
34  ga: number;
35  form: Result[];
36  prevRank?: number;
37}
38export interface Zone { from: number; to: number; label: string; color: string }
39 
40export interface LeaderboardTableProps {
41  teams: Team[];
42  zones?: Zone[];
43  highlightId?: string;
44  caption?: string;
45  matchday?: string;
46  theme?: "light" | "dark";
47  className?: string;
48}
49 
50const pts = (t: Team) => t.won * 3 + t.drawn;
51const word = { W: "won", D: "drew", L: "lost" } as const;
52 
53export function rankTeams(teams: Team[]) {
54  return [...teams].sort((a, b) => pts(b) - pts(a) || b.gf - b.ga - (a.gf - a.ga) || b.gf - a.gf || a.name.localeCompare(b.name));
55}
56 
57export function LeaderboardTable({ teams, zones = [], highlightId, caption = "League standings", matchday, theme, className }: LeaderboardTableProps) {
58  const ranked = useMemo(() => rankTeams(teams), [teams]);
59  const key = ranked.map((t) => t.id).join("|");
60  const els = useRef(new Map<string, HTMLElement>());
61  const prevIdx = useRef(new Map<string, number>());
62  const [live, setLive] = useState("");
63  const first = useRef(true);
64 
65  useLayoutEffect(() => {
66    const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
67    let moved = 0;
68    ranked.forEach((t, i) => {
69      const el = els.current.get(t.id);
70      const was = prevIdx.current.get(t.id);
71      if (el && was !== undefined && was !== i) {
72        moved++;
73        if (!reduce && el.animate) {
74          const dy = (was - i) * el.offsetHeight;
75          const up = i < was;
76          el.animate([{ transform: `translateY(${dy}px)`, zIndex: 2 }, { transform: "translateY(0)", zIndex: 2 }], { duration: 760, easing: "cubic-bezier(.22,1,.36,1)" });
77          el.querySelector<HTMLElement>("[data-flash]")?.animate(
78            [{ opacity: 1, background: up ? "var(--l-up)" : "var(--l-down)" }, { opacity: 1, background: up ? "var(--l-up)" : "var(--l-down)", offset: 0.35 }, { opacity: 0, background: up ? "var(--l-up)" : "var(--l-down)" }],
79            { duration: 1400, easing: "ease-out" },
80          );
81        }
82      }
83      prevIdx.current.set(t.id, i);
84    });
85    if (!first.current && moved) setLive(`Standings updated${matchday ? ` for ${matchday}` : ""}. ${ranked[0].name} lead the table.`);
86    first.current = false;
87  }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
88 
89  const zoneOf = (pos: number) => zones.find((z) => pos >= z.from && pos <= z.to);
90  const H = (label: string, full: string, cls = "") => (
91    <div role="columnheader" className={`fd-lb-h ${cls}`} aria-label={full} title={full}>{label}</div>
92  );
93 
94  return (
95    <div className={`fd-lb${className ? " " + className : ""}`} data-fd-theme={theme}>
96      <style>{css}</style>
97      <div className="fd-lb-table" role="table" aria-label={caption} aria-rowcount={ranked.length + 1}>
98        <div role="rowgroup">
99          <div role="row" className="fd-lb-row fd-lb-head">
100            {H("#", "Position", "fd-lb-c-pos")}
101            {H("Club", "Club", "fd-lb-c-club")}
102            {H("P", "Played", "fd-lb-n fd-lb-nh")}
103            {H("W", "Won", "fd-lb-n fd-lb-nh")}
104            {H("D", "Drawn", "fd-lb-n fd-lb-nh")}
105            {H("L", "Lost", "fd-lb-n fd-lb-nh")}
106            {H("GD", "Goal difference", "fd-lb-n fd-lb-gd")}
107            {H("Pts", "Points", "fd-lb-n fd-lb-pts")}
108            {H("Form", "Last five matches", "fd-lb-form fd-lb-nh")}
109          </div>
110        </div>
111        <div role="rowgroup" className="fd-lb-body">
112          {ranked.map((t, i) => {
113            const pos = i + 1;
114            const z = zoneOf(pos);
115            const gd = t.gf - t.ga;
116            const mv = t.prevRank ? t.prevRank - pos : 0;
117            return (
118              <div
119                key={t.id}
120                role="row"
121                aria-rowindex={pos + 1}
122                className="fd-lb-row fd-lb-team"
123                data-me={t.id === highlightId ? "" : undefined}
124                ref={(el) => {
125                  if (el) els.current.set(t.id, el);
126                  else els.current.delete(t.id);
127                }}
128              >
129                <span className="fd-lb-flash" data-flash="" aria-hidden="true" />
130                {z && <span className="fd-lb-zone" style={{ background: z.color }} aria-hidden="true" />}
131                <div role="cell" className="fd-lb-c-pos">
132                  <span className="fd-lb-rank">{pos}</span>
133                  <span className="fd-lb-mv" data-dir={mv > 0 ? "up" : mv < 0 ? "down" : "same"}>
134                    {mv > 0 && <svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><path d="M4 1l3.2 5.2H.8z" fill="currentColor" /></svg>}
135                    {mv < 0 && <svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><path d="M4 7L.8 1.8h6.4z" fill="currentColor" /></svg>}
136                    {mv === 0 && <i aria-hidden="true" />}
137                    {mv !== 0 && <b aria-hidden="true">{Math.abs(mv)}</b>}
138                    <span className="fd-lb-sr">{mv > 0 ? `up ${mv} ${mv === 1 ? "place" : "places"}` : mv < 0 ? `down ${-mv} ${mv === -1 ? "place" : "places"}` : "no change"}</span>
139                  </span>
140                </div>
141                <div role="cell" className="fd-lb-c-club">
142                  <span className="fd-lb-crest" style={{ ["--c" as string]: t.color }} aria-hidden="true">{t.short}</span>
143                  <span className="fd-lb-name">{t.name}</span>
144                  {z && <span className="fd-lb-sr">, {z.label}</span>}
145                </div>
146                <div role="cell" className="fd-lb-n fd-lb-nh">{t.played}</div>
147                <div role="cell" className="fd-lb-n fd-lb-nh">{t.won}</div>
148                <div role="cell" className="fd-lb-n fd-lb-nh">{t.drawn}</div>
149                <div role="cell" className="fd-lb-n fd-lb-nh">{t.lost}</div>
150                <div role="cell" className="fd-lb-n fd-lb-gd">{gd > 0 ? `+${gd}` : gd < 0 ? `−${-gd}` : "0"}</div>
151                <div role="cell" className="fd-lb-n fd-lb-pts">{pts(t)}</div>
152                <div role="cell" className="fd-lb-form fd-lb-nh">
153                  <span className="fd-lb-dots" role="img" aria-label={`Last five: ${t.form.slice(-5).map((f) => word[f]).join(", ")}`}>
154                    {t.form.slice(-5).map((f, k) => (
155                      <i key={k} data-r={f} data-new={k === t.form.slice(-5).length - 1 ? "" : undefined} />
156                    ))}
157                  </span>
158                </div>
159              </div>
160            );
161          })}
162        </div>
163      </div>
164      {zones.length > 0 && (
165        <ul className="fd-lb-legend" aria-label="Zones">
166          {zones.map((z) => (
167            <li key={z.label}><i style={{ background: z.color }} aria-hidden="true" />{z.label}</li>
168          ))}
169        </ul>
170      )}
171      <div className="fd-lb-sr" role="status" aria-live="polite">{live}</div>
172    </div>
173  );
174}
175 
176const css = `
177:where(.fd-lb,.fd-lb *){box-sizing:border-box;margin:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;list-style:none;border:0;background:none}
178:where(.fd-lb,.fd-lb *)::before,:where(.fd-lb,.fd-lb *)::after{box-sizing:border-box}
179:where(.fd-lb svg){display:block;flex-shrink:0}
180.fd-lb{
181  --fd-ease-out:cubic-bezier(.22,1,.36,1);--fd-spring:cubic-bezier(.34,1.56,.64,1);--fd-dur-1:120ms;--fd-dur-2:240ms;--fd-dur-3:420ms;
182  --l-bg:#fff;--l-fg:#0E1411;--l-mut:#6A746E;--l-line:rgba(14,20,17,.09);--l-line2:rgba(14,20,17,.18);--l-hover:rgba(14,20,17,.03);--l-up:rgba(22,163,74,.12);--l-down:rgba(220,38,38,.1);--l-upc:#15803D;--l-downc:#C2271B;--l-me:rgba(5,150,105,.07);--l-w:#16A34A;--l-d:#B8BDB9;--l-l:#DC2626;
183  width:100%;font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;letter-spacing:-.006em;color:var(--l-fg);-webkit-font-smoothing:antialiased}
184[data-fd-theme="dark"].fd-lb,[data-fd-theme="dark"] .fd-lb{--l-bg:#0E1311;--l-fg:#EAF0EC;--l-mut:#8E9A93;--l-line:rgba(255,255,255,.07);--l-line2:rgba(255,255,255,.16);--l-hover:rgba(255,255,255,.035);--l-up:rgba(74,222,128,.22);--l-down:rgba(248,113,113,.2);--l-upc:#4ADE80;--l-downc:#FF8A7A;--l-me:rgba(52,211,153,.09);--l-w:#4ADE80;--l-d:#59635D;--l-l:#F87171}
185.fd-lb-table{overflow:hidden;border-radius:16px;background:var(--l-bg);box-shadow:0 0 0 1px var(--l-line),0 1px 2px rgba(14,20,17,.04),0 12px 32px -16px rgba(14,20,17,.14);container-type:inline-size}
186.fd-lb-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 44px 44px 44px 44px 56px 60px 128px;align-items:center;column-gap:4px;padding:0 20px 0 12px;background:var(--l-bg)}
187.fd-lb-head{height:40px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--l-mut);box-shadow:inset 0 -1px 0 var(--l-line2)}
188.fd-lb-h{white-space:nowrap}
189.fd-lb-team{height:56px;box-shadow:inset 0 -1px 0 var(--l-line);transition:background-color var(--fd-dur-1)}
190.fd-lb-body>.fd-lb-team:last-child{box-shadow:none}
191@media (hover:hover){.fd-lb-team:hover{background:color-mix(in srgb,var(--l-fg) 3%,var(--l-bg))}}
192.fd-lb-team[data-me]{background:var(--l-me)}
193.fd-lb-flash{position:absolute;inset:0;opacity:0;pointer-events:none}
194.fd-lb-zone{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0}
195.fd-lb-c-pos{display:flex;align-items:center;gap:6px;padding-left:8px;position:relative}
196.fd-lb-rank{display:block;min-width:24px;font-size:17px;line-height:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
197.fd-lb-mv{display:inline-flex;align-items:center;gap:2px;min-width:22px;font-size:11px;line-height:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--l-mut)}
198.fd-lb-mv[data-dir="up"]{color:var(--l-upc)}.fd-lb-mv[data-dir="down"]{color:var(--l-downc)}
199.fd-lb-mv i{display:block;width:6px;height:2px;border-radius:1px;background:currentColor;opacity:.5;margin-left:1px}
200.fd-lb-c-club{display:flex;align-items:center;gap:12px;min-width:0}
201.fd-lb-crest{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;font-size:10px;line-height:1;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.18)}
202.fd-lb-name{font-weight:600;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
203.fd-lb-n{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--l-mut)}
204.fd-lb-head .fd-lb-n{color:var(--l-mut)}
205.fd-lb-team .fd-lb-gd{color:var(--l-fg)}
206.fd-lb-pts{font-weight:700;color:var(--l-fg);font-size:16px}
207.fd-lb-head .fd-lb-pts{font-size:11px;color:var(--l-fg)}
208.fd-lb-form{display:flex;justify-content:flex-end}
209.fd-lb-head .fd-lb-form{justify-content:flex-end}
210.fd-lb-dots{display:inline-flex;gap:5px}
211.fd-lb-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--l-d)}
212.fd-lb-dots i[data-r="W"]{background:var(--l-w)}.fd-lb-dots i[data-r="L"]{background:var(--l-l)}
213.fd-lb-dots i[data-new]{box-shadow:0 0 0 2px var(--l-bg),0 0 0 3.5px color-mix(in srgb,currentColor 0%,transparent);transform:scale(1.2)}
214.fd-lb-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding:0 4px;font-size:12px;line-height:16px;color:var(--l-mut)}
215.fd-lb-legend li{display:flex;align-items:center;gap:8px}
216.fd-lb-legend i{display:block;width:3px;height:12px;border-radius:2px}
217.fd-lb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
218@container (max-width:640px){
219  .fd-lb-row{grid-template-columns:64px minmax(0,1fr) 44px 40px;padding:0 12px 0 4px}
220  .fd-lb-nh{display:none}
221  .fd-lb-c-pos{padding-left:6px}
222}
223@media (prefers-reduced-motion:reduce){.fd-lb *{transition-duration:1ms!important}}
224@media (prefers-contrast:more){.fd-lb-table{box-shadow:0 0 0 1px currentColor}}
225`;
226 
227/* ───────────────────────────── demo ───────────────────────────── */
228 
229const BASE: Team[] = [
230  { id: "har", name: "Harbourside FC", short: "HAR", color: "#1D4ED8", played: 12, won: 8, drawn: 2, lost: 2, gf: 24, ga: 11, form: ["W", "W", "D", "W", "W"] },
231  { id: "ash", name: "Ashgrove United", short: "ASH", color: "#B91C1C", played: 12, won: 8, drawn: 1, lost: 3, gf: 22, ga: 12, form: ["W", "L", "W", "W", "W"] },
232  { id: "kin", name: "Kingsley Rovers", short: "KIN", color: "#0F766E", played: 12, won: 7, drawn: 3, lost: 2, gf: 19, ga: 10, form: ["D", "W", "W", "D", "W"] },
233  { id: "red", name: "Redcliffe Athletic", short: "RED", color: "#C2410C", played: 12, won: 6, drawn: 4, lost: 2, gf: 20, ga: 14, form: ["W", "D", "D", "W", "D"] },
234  { id: "mar", name: "Marlowe Town", short: "MAR", color: "#7C3AED", played: 12, won: 6, drawn: 2, lost: 4, gf: 17, ga: 15, form: ["L", "W", "W", "L", "W"] },
235  { id: "sto", name: "Stonebridge City", short: "STO", color: "#0369A1", played: 12, won: 5, drawn: 4, lost: 3, gf: 16, ga: 13, form: ["D", "D", "W", "L", "D"] },
236  { id: "whi", name: "Whitmoor Wanderers", short: "WHI", color: "#4D7C0F", played: 12, won: 5, drawn: 2, lost: 5, gf: 15, ga: 16, form: ["L", "W", "L", "W", "L"] },
237  { id: "cal", name: "Calderbank", short: "CAL", color: "#BE185D", played: 12, won: 4, drawn: 3, lost: 5, gf: 14, ga: 17, form: ["W", "L", "D", "L", "D"] },
238  { id: "oak", name: "Oakhurst Albion", short: "OAK", color: "#A16207", played: 12, won: 3, drawn: 3, lost: 6, gf: 11, ga: 18, form: ["L", "L", "D", "W", "L"] },
239  { id: "fen", name: "Fenwick Park", short: "FEN", color: "#475569", played: 12, won: 2, drawn: 4, lost: 6, gf: 10, ga: 19, form: ["D", "L", "L", "D", "L"] },
240  { id: "bra", name: "Braeside Town", short: "BRA", color: "#0891B2", played: 12, won: 2, drawn: 2, lost: 8, gf: 9, ga: 24, form: ["L", "L", "W", "L", "L"] },
241  { id: "tho", name: "Thornley Vale", short: "THO", color: "#9F1239", played: 12, won: 1, drawn: 3, lost: 8, gf: 8, ga: 25, form: ["L", "D", "L", "L", "D"] },
242];
243 
244/** [home, away, homeGoals, awayGoals] */
245const MATCHDAYS: [string, string, number, number][][] = [
246  [["har", "ash", 1, 2], ["kin", "red", 2, 0], ["mar", "sto", 1, 1], ["whi", "cal", 0, 3], ["oak", "fen", 2, 1], ["bra", "tho", 1, 1]],
247  [["ash", "kin", 1, 1], ["red", "har", 3, 1], ["sto", "whi", 2, 0], ["cal", "mar", 2, 0], ["fen", "bra", 0, 1], ["tho", "oak", 0, 2]],
248  [["kin", "har", 0, 2], ["ash", "mar", 3, 0], ["red", "cal", 1, 2], ["sto", "oak", 0, 0], ["whi", "tho", 2, 1], ["bra", "fen", 1, 2]],
249];
250 
251function play(teams: Team[], fixtures: [string, string, number, number][]): Team[] {
252  const before = new Map(rankTeams(teams).map((t, i) => [t.id, i + 1]));
253  const next = teams.map((t) => ({ ...t, prevRank: before.get(t.id) }));
254  const by = new Map(next.map((t) => [t.id, t]));
255  for (const [h, a, hg, ag] of fixtures) {
256    const H = by.get(h)!, A = by.get(a)!;
257    H.played++; A.played++; H.gf += hg; H.ga += ag; A.gf += ag; A.ga += hg;
258    const r: [Result, Result] = hg > ag ? ["W", "L"] : hg < ag ? ["L", "W"] : ["D", "D"];
259    H.form = [...H.form, r[0]].slice(-5); A.form = [...A.form, r[1]].slice(-5);
260    if (hg > ag) { H.won++; A.lost++; } else if (hg < ag) { A.won++; H.lost++; } else { H.drawn++; A.drawn++; }
261  }
262  return next;
263}
264 
265const ZONES: Zone[] = [
266  { from: 1, to: 4, label: "Champions Cup", color: "#2563EB" },
267  { from: 5, to: 6, label: "Continental Shield", color: "#F59E0B" },
268  { from: 10, to: 12, label: "Relegation", color: "#DC2626" },
269];
270 
271export function Demo() {
272  const [theme, setTheme] = useState<"light" | "dark">("light");
273  const [step, setStep] = useState(0);
274  const [teams, setTeams] = useState(BASE);
275  const md = 12 + step;
276  const advance = () => {
277    if (step >= MATCHDAYS.length) {
278      setStep(0);
279      setTeams(BASE.map((t) => ({ ...t })));
280      return;
281    }
282    setTeams((t) => play(t, MATCHDAYS[step]));
283    setStep((s) => s + 1);
284  };
285  const last = step > 0 ? MATCHDAYS[step - 1] : [];
286  const name = (id: string) => BASE.find((t) => t.id === id)!.short;
287 
288  return (
289    <div className="fd-lbd" data-fd-theme={theme}>
290      <style>{demoCss}</style>
291      <header className="fd-lbd-top">
292        <span className="fd-lbd-brand">The Northern League</span>
293        <button type="button" className="fd-lbd-theme" aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"} onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>{theme === "dark" ? "Light" : "Dark"}</button>
294      </header>
295      <main className="fd-lbd-main">
296        <div className="fd-lbd-head">
297          <div>
298            <p className="fd-lbd-eyebrow">Season 2026/27 · Matchday {md}</p>
299            <h1>Standings</h1>
300          </div>
301          <button type="button" className="fd-lbd-btn" onClick={advance}>
302            {step >= MATCHDAYS.length ? "Reset to matchday 12" : `Play matchday ${md + 1}`}
303            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{step >= MATCHDAYS.length ? <path d="M2.5 7a4.5 4.5 0 107.7-3.2M10.5 1.5v2.5H8" /> : <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" />}</svg>
304          </button>
305        </div>
306        <LeaderboardTable theme={theme} teams={teams} zones={ZONES} highlightId="har" matchday={`matchday ${md}`} caption={`Northern League standings after matchday ${md}`} />
307        {last.length > 0 && (
308          <section className="fd-lbd-res" aria-label={`Results from matchday ${md}`}>
309            <h2>Matchday {md} results</h2>
310            <ul>
311              {last.map(([h, a, hg, ag]) => (
312                <li key={h + a}><span>{name(h)}</span><b>{hg}–{ag}</b><span>{name(a)}</span></li>
313              ))}
314            </ul>
315          </section>
316        )}
317      </main>
318    </div>
319  );
320}
321 
322const demoCss = `
323:where(.fd-lbd,.fd-lbd *){box-sizing:border-box;margin:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;list-style:none;border:0;background:none}
324:where(.fd-lbd,.fd-lbd *)::before,:where(.fd-lbd,.fd-lbd *)::after{box-sizing:border-box}
325:where(.fd-lbd svg){display:block;flex-shrink:0}
326:where(.fd-lbd button){appearance:none;-webkit-appearance:none;outline:0;border-radius:0;cursor:pointer}
327.fd-lbd{--fd-ease-out:cubic-bezier(.22,1,.36,1);--fd-spring:cubic-bezier(.34,1.56,.64,1);
328  --d-bg:#F2F5F3;--d-fg:#0E1411;--d-mut:#6A746E;--d-line:rgba(14,20,17,.09);--d-ring:rgba(5,150,105,.55);--d-card:#fff;
329  min-height:100vh;background:var(--d-bg);color:var(--d-fg);font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
330.fd-lbd[data-fd-theme="dark"]{--d-bg:#080B09;--d-fg:#EAF0EC;--d-mut:#8E9A93;--d-line:rgba(255,255,255,.08);--d-ring:rgba(52,211,153,.6);--d-card:#0E1311}
331.fd-lbd-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 clamp(16px,3vw,32px);background:var(--d-card);box-shadow:inset 0 -1px 0 var(--d-line)}
332.fd-lbd-brand{font-weight:800;font-size:15px;letter-spacing:-.03em;text-transform:uppercase}
333.fd-lbd-theme{height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--d-mut);box-shadow:inset 0 0 0 1px var(--d-line)}.fd-lbd-theme:hover{color:var(--d-fg)}
334.fd-lbd-theme:focus-visible,.fd-lbd-btn:focus-visible{outline:2px solid var(--d-ring);outline-offset:2px}
335.fd-lbd-main{max-width:960px;margin:0 auto;padding:40px clamp(16px,3vw,32px) 64px}
336.fd-lbd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
337.fd-lbd-eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mut)}
338.fd-lbd-head h1{margin-top:6px;font-size:clamp(36px,6vw,56px);line-height:1;font-weight:800;letter-spacing:-.045em}
339.fd-lbd-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;background:var(--d-fg);color:var(--d-bg);font-size:14px;font-weight:600;line-height:1;transition:transform 240ms var(--fd-spring);box-shadow:0 1px 2px rgba(0,0,0,.25)}
340.fd-lbd-btn:active{transform:scale(.96)}
341.fd-lbd-res{margin-top:32px}
342.fd-lbd-res h2{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mut)}
343.fd-lbd-res ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
344.fd-lbd-res li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:12px;background:var(--d-card);box-shadow:0 0 0 1px var(--d-line);font-size:13px;font-weight:600;letter-spacing:.02em}
345.fd-lbd-res li span:last-child{text-align:right}
346.fd-lbd-res li b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
347@media (prefers-reduced-motion:reduce){.fd-lbd *{transition-duration:1ms!important}}
348`;