/* The parts every provably.fast site shares, as postquantum.provably.fast's home settled them on
   2026-10-23: a lit two-sided hero, the logo band, one board with the same columns for every row,
   status pills and code buttons, and a band of tabs over a chart. Static: nothing moves but charts.
   It reads the site's own tokens (--bg, --ink, --accent ...), so it adds no colour or font of its own.
   Challenge sites get this file from provably.fast through their Worker (site-host APP_FILE). */

:root {
  --card: color-mix(in srgb, var(--bg-2) 72%, var(--bg));
  --card-hi: color-mix(in srgb, var(--bg-2) 100%, var(--ink) 3%);
  --glow-a: color-mix(in srgb, var(--violet) 22%, transparent);
  --glow-b: color-mix(in srgb, var(--pink) 14%, transparent);
}

/* Hero: the headline and its line on one side, the pet on the other, a soft light behind. */
.kit-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 24px clamp(32px, 5vw, 80px); max-width: var(--max); margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(24px, 3vw, 40px); }
.kit-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 -6vw -40px; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-a), transparent) 78% 52% / 560px 360px no-repeat,
    radial-gradient(closest-side, var(--glow-b), transparent) 96% 30% / 420px 300px no-repeat; }
.kit-hero::after { content: ""; position: absolute; z-index: -1; inset: 0 -6vw -40px; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(closest-side, #000, transparent) 76% 50% / 640px 420px no-repeat; mask: radial-gradient(closest-side, #000, transparent) 76% 50% / 640px 420px no-repeat; }
.kit-hero-copy { min-width: 0; }
.kit-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); color: var(--ink-2); font-size: 13px; font-weight: 500; backdrop-filter: blur(6px); }
.kit-live { width: 8px; height: 8px; border-radius: 50%; background: var(--record); box-shadow: 0 0 0 4px color-mix(in srgb, var(--record) 22%, transparent); }
.kit-title { margin: 0; max-width: 24ch; color: var(--ink); font: 650 clamp(34px, 4.2vw, 58px)/1.04 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.kit-nowrap { white-space: nowrap; }
.kit-accent { background: linear-gradient(92deg, var(--violet) 10%, var(--pink) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kit-sub { margin: 18px 0 0; max-width: 60ch; color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; text-wrap: pretty; }
.kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 0; }
.cta.kit-lead { gap: 10px; padding: 15px 30px; font-size: 17px; }
/* The pet as tall as postquantum's falcon rider (300 by 236 px), whatever its shape. */
.kit-art { justify-self: end; filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--violet) 22%, transparent)); }
.kit-art img { display: block; width: auto; max-width: 100%; height: clamp(160px, 16.4vw, 236px); object-fit: contain; }

/* Who makes it: each organization's logo in the second ink, linked to its site. */
.kit-orgband { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.kit-orgband-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px clamp(28px, 5vw, 72px); padding-block: 8px 0; }
.kit-orgs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.kit-org-label { color: var(--muted); font-size: 14px; }
.kit-org { display: inline-block; height: 26px; color: var(--ink-2); background: currentColor; opacity: .8; -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; transition: color .2s, opacity .2s; }
.kit-org:hover, .kit-org:focus-visible { color: var(--ink); opacity: 1; }
.kit-org-sf { --logo: url(assets/logo-starknet-foundation.png); aspect-ratio: 480 / 112; }
.kit-org-sw { --logo: url(assets/logo-starkware.png); aspect-ratio: 600 / 110; }
.kit-org-text { color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.kit-org-text:hover { color: var(--ink); }

/* The board: one row per thing the site improves, the same columns for each. A site sets the
   columns in --kit-cols and each row's colour in --fam. */
.kit-board { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--gutter) 0; }
.kit-board-head { display: grid; gap: 6px; margin-bottom: 18px; }
.kit-board-head h2 { margin: 0; color: var(--ink); font: 600 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -.02em; }
.kit-board-sub { margin: 0; color: var(--ink-2); font-size: 15px; }
.kit-board-sub b { color: var(--record); font-weight: 600; }
.kit-table { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent) inset, 0 24px 60px -40px rgb(0 0 0 / .6); }
.kit-row { display: grid; grid-template-columns: var(--kit-cols); align-items: center; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.kit-row[data-href] { cursor: pointer; }
.kit-row[data-href]:hover { background: var(--card-hi); }
.kit-row:last-child { border-bottom: 0; border-radius: 0 0 17px 17px; }
.kit-head { padding-block: 10px; border-radius: 17px 17px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kit-head span:last-child { text-align: right; }
.kit-row.is-now { background: linear-gradient(90deg, color-mix(in srgb, var(--fam) 9%, transparent), transparent 46%); }
.kit-row.is-now:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--fam) 14%, transparent), var(--card-hi) 46%); }
.kit-name { display: grid; gap: 5px; min-width: 0; }
.kit-name-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kit-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--fam); }
.kit-name a { color: inherit; text-decoration: none; }
.kit-name a:hover b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.kit-name b { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.kit-name-what { color: var(--muted); font-size: 12.5px; }
.kit-row small, .kit-fig small { color: var(--muted); font-size: 13px; }
.kit-fig { display: grid; gap: 2px; min-width: 0; }
.kit-fig b { color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kit-fig.is-lead b { color: var(--record); font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.kit-fig.is-quiet b { color: var(--ink-2); font-size: 16px; font-weight: 500; }
.kit-pill { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.kit-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kit-pill.is-yes { color: var(--record); background: color-mix(in srgb, var(--record) 14%, transparent); }
.kit-pill.is-now { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.kit-trend { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.kit-spark { display: block; width: 100%; height: 30px; overflow: visible; }
.kit-line { fill: none; stroke: var(--fam); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kit-code { display: inline-flex; gap: 6px; justify-self: end; }
.kit-code-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kit-code-btn svg { width: 14px; height: 14px; }
.kit-code-btn:hover { border-color: var(--ink-2); background: var(--bg); }
.kit-row a:focus-visible, .kit-code-btn:focus-visible, .kit-trend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* A small pet peeking over the board's top edge. */
.kit-peek { --w: clamp(64px, 5.5vw, 84px); position: absolute; right: clamp(24px, 8%, 120px); bottom: calc(100% - var(--w) * .086); width: var(--w); height: calc(var(--w) * 1.128); overflow: hidden; pointer-events: none; }
.kit-peek img { display: block; width: 100%; height: auto; }
.kit-note { margin: 14px 0 0; max-width: 92ch; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* A band: a title, tabs to choose what it shows, and a card under them. */
.kit-band { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) 0; }
.kit-band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.kit-band h2 { margin: 0; color: var(--ink); font: 600 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -.02em; }
.kit-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.kit-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 14px var(--sans); cursor: pointer; }
.kit-tabs button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fam); }
.kit-tabs button[aria-selected="true"] { border-color: var(--line-2); background: var(--bg); color: var(--ink); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .6); }
.kit-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-panel { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }

@media (max-width: 1199px) { .kit-org { height: 24px; } }
/* Who built it: a contributor per row with the models they named, their records on each line of the
   board, and when they joined. Sortable by its column heads. */
.kit-band-sub { margin: 0; color: var(--muted); font-size: 14px; }
.kit-band-sub b { color: var(--ink); font-weight: 600; }
.kit-crew-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.kit-crew { width: 100%; border-collapse: collapse; font-size: 14px; }
.kit-crew th, .kit-crew td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.kit-crew thead th { padding-block: 8px; font-weight: 500; }
.kit-crew thead button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; }
.kit-crew thead th[style] button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fam); }
.kit-crew th[aria-sort="ascending"] button, .kit-crew th[aria-sort="descending"] button { color: var(--ink); }
.kit-crew th[aria-sort="ascending"] button::after { content: "\2191"; }
.kit-crew th[aria-sort="descending"] button::after { content: "\2193"; }
.kit-crew thead button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kit-crew tbody th, .kit-crew thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.kit-crew tbody tr:last-child th, .kit-crew tbody tr:last-child td { border-bottom: 0; }
.kit-crew tbody tr:hover, .kit-crew tbody tr:hover th { background: var(--card-hi); }
.kit-crew td b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kit-crew td.is-zero { color: var(--line-2); }
.kit-joined { color: var(--muted); }
.kit-person { display: inline-flex; align-items: center; gap: 12px; font-weight: 400; }
.kit-person-body { display: grid; gap: 3px; }
.kit-person-name { color: var(--ink); font-weight: 600; text-decoration: none; }
a.kit-person-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.kit-models { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.kit-model { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.kit-model-mark { width: 13px; height: 13px; flex: none; }

/* Narrow: each row on short lines, its lead figure first. A site names its cells' areas. */
@media (max-width: 900px) {
  .kit-hero { grid-template-columns: 1fr; }
  .kit-art { justify-self: center; }
  .kit-art img { height: 150px; }
  .kit-orgband-in { flex-direction: column; gap: 14px; }
  .kit-orgs-row { gap: 10px 14px; }
  .kit-org { height: 22px; }
  .kit-head { display: none; }
  .kit-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px; }
  .kit-code { justify-self: start; }
  .kit-panel { padding: 16px; }
  .kit-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .kit-tabs button { flex: none; }
}
/* A phone has the hero's pet already, and its board line wraps under where this one would peek. */
@media (max-width: 640px) { .kit-peek { display: none; } }

/* Two measures at once (kit.js): the region the entries reach up to their frontier, each entry
   named beside its point, the baseline as a ring, and the source in the card for a screenshot. */
.kit-pareto { margin: 18px 0 0; padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(110% 80% at 80% 0%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 62%), var(--card); }
.kit-pareto-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.kit-pareto-grid line { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.kit-pareto-tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kit-pareto-title { fill: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.kit-pareto-stop-a { stop-color: var(--violet); stop-opacity: .2; }
.kit-pareto-stop-b { stop-color: var(--record); stop-opacity: .08; }
.kit-pareto-edge-a { stop-color: var(--violet); }
.kit-pareto-edge-b { stop-color: var(--record); }
.kit-pareto-front { fill: none; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--violet) 40%, transparent)); }
.kit-pareto-trail polyline { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-opacity: .45; stroke-linejoin: round; }
.kit-pareto-trail circle { fill: var(--c); fill-opacity: .65; }
.kit-pareto-ring { fill: none; stroke: var(--c); stroke-width: 1.2; stroke-opacity: .55; }
.kit-pareto-zone { fill: var(--violet); fill-opacity: .07; }
.kit-pareto-zone-text { fill: var(--violet); font-size: 12px; font-weight: 600; }
.kit-pareto-ghost circle { fill: var(--card); stroke: var(--c); stroke-width: 1.6; stroke-opacity: .7; }
.kit-pareto-halo { fill: var(--c); fill-opacity: .16; transition: fill-opacity .2s; }
.kit-pareto-dot { fill: var(--c); stroke: var(--card); stroke-width: 2.5; }
.kit-pareto-point.is-base .kit-pareto-halo { fill-opacity: .08; }
.kit-pareto-point.is-base .kit-pareto-dot { fill: var(--card); stroke: var(--c); stroke-width: 2.5; }
.kit-pareto-core { fill: var(--c); }
.kit-pareto-label { paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }
.kit-pareto-name { fill: var(--ink); font-size: 14px; font-weight: 600; }
.kit-pareto-point.is-base .kit-pareto-name { font-size: 15px; }
.kit-pareto-sub { fill: var(--muted); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
a.kit-pareto-point { outline: none; }
a.kit-pareto-point:hover .kit-pareto-halo, a.kit-pareto-point:focus-visible .kit-pareto-halo { fill-opacity: .34; }
a.kit-pareto-point:focus-visible .kit-pareto-name { text-decoration: underline; }
.kit-pareto-best-a { stop-color: var(--record); stop-opacity: .16; }
.kit-pareto-best-b { stop-color: var(--record); stop-opacity: 0; }
.kit-pareto-better { fill: var(--record); font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.kit-pareto-svg.is-narrow .kit-pareto-name { font-size: 13px; }
.kit-pareto-svg.is-narrow :is(.kit-pareto-sub, .kit-pareto-tick, .kit-pareto-title, .kit-pareto-better) { font-size: 11.5px; }
.kit-pareto-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.kit-pareto-foot p { margin: 0; max-width: 92ch; }
.kit-pareto-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.kit-pareto-brand svg { width: 18px; height: 18px; }