/* the three page fonts, all SIL OFL 1.1 (their licence texts are in /fonts): Oxanium for headings, IBM Plex Sans for text, JetBrains Mono for code and figures */
@font-face { font-family: "Oxanium"; src: url(/fonts/oxanium.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/ibm-plex-sans.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
/*
 * polyman verify on top of Basecoat (vendor/basecoat.css: shadcn/ui components for plain HTML).
 * This file only sets the theme tokens, the page layout, and the few pieces a stock component
 * doesn't cover (the per-test squares and the step list). Light theme only.
 */
:root {
  /* system fonts only: no font files are bundled */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: "Oxanium", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  /* shadcn tokens, light; the primary is polyman's cyan */
  --background: #ffffff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --primary: #1272b8;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #5f5f69;
  --accent: #eaf8ff;
  --accent-foreground: #0f5f9c;
  --destructive: #c81e1e;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #35aeee;
  --radius: 0.75rem;
  /* polyman's own */
  --brand: #44f6f5;
  --brand-2: #35aeee;
  --brand-soft: #eaf8ff;
  --pass: #1f9fe0;
  --fail: #dc2626;
  --slow: #b45309;
  --fail-ink: #b91c1c;
  --pass-ink: #1272b8;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body { font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; }
::selection { background: #cfeefe; }
a:where(:not(.btn, .badge, .logo)) { color: var(--primary); text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: max(0.85em, 12.5px); background: var(--muted); border-radius: 6px; padding: 2px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 30; background: var(--primary); color: var(--primary-foreground); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }
@media (pointer: coarse) { .skip { min-height: 44px; display: inline-flex; align-items: center; } }
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
/* the primary button darkens on hover, so its label keeps its contrast */
.btn:not([data-variant]):hover:not(:disabled), .btn[data-variant='primary']:hover:not(:disabled) { background-color: #0f5f9c; color: var(--primary-foreground); }
.badge[data-variant='destructive'] { color: var(--fail-ink); }
.badge[data-variant='success'] { background: #cfeefe; color: #0f5f9c; border-color: transparent; }
/* a small rounded rectangle, not a pill */
.badge { border-radius: 6px; }
.badge svg { width: 12px; height: 12px; }
/* one focus ring everywhere, 5:1 against white, in place of Basecoat's half-alpha cyan (which outranks a :where()) */
a:focus-visible, .checks li:focus-visible, .btn:focus-visible, .sample:focus-visible, summary:focus-visible, pre:focus-visible, .accordion > details > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
/* (Basecoat animates every property, the ring included, and tints the border; neither, so the ring is the ring from the first frame) */
.btn, .accordion > details > summary { transition-property: color, background-color, opacity, transform; }
.btn[data-variant='outline']:focus-visible { border-color: var(--border); }
.accordion > details > summary:focus-visible { border-color: transparent; outline-offset: 4px; }
.nowrap { white-space: nowrap; }
section[aria-labelledby] h2 { scroll-margin-top: 96px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--background); border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; color: var(--foreground); text-decoration: none; }
.logo span { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--muted-foreground); font-weight: 500; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; -webkit-mask-image: linear-gradient(#000 0 30%, transparent 30% 36%, #000 36% 64%, transparent 64% 69%, #000 69%); mask-image: linear-gradient(#000 0 30%, transparent 30% 36%, #000 36% 64%, transparent 64% 69%, #000 69%); }
.logo-mark { width: 28px; height: 28px; }
.header-nav { display: flex; align-items: center; gap: 4px; }
/* the page you're on is marked, not offered as a button */
.header-nav [aria-current] { background: none; font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }

/* hero: the claim on the left, the product itself on the right */
/* (the card's column is as wide as a result's twelve squares need, with the hero's top edge level with the tabs) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; padding-block: 24px 64px; }
/* the claim stays in view beside a long result, instead of leaving an empty column */
.hero { position: relative; isolation: isolate; }
/* the logo's hexagon, repeated and faded: a lattice behind the hero's right side */
.hero::before { content: ''; position: absolute; z-index: -1; top: -48px; right: -24px; width: 620px; height: 420px; pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%2335aeee' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z'/%3E%3Cpath d='M28 63v33M1 47.5-27 63M55 47.5 83 63'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 97px;
  -webkit-mask-image: radial-gradient(closest-side at 70% 40%, #000 0%, transparent 100%); mask-image: radial-gradient(closest-side at 70% 40%, #000 0%, transparent 100%); }
.hero-copy { position: static; }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.1rem); }
.hero .badge { gap: 8px; padding-inline: 12px; height: 28px; font-size: 0.8rem; }
/* the dot is alive: a heartbeat (lub-dub) and a ring that spreads and fades; red and still when the service doesn't answer */
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 70%, transparent), 0 0 10px var(--brand); animation: beat 1.8s ease-in-out infinite; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-2); animation: ring 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
.live-dot.down { background: var(--fail); animation: none; }
.live-dot.down::after { display: none; }
@keyframes beat { 0%, 56%, 100% { transform: scale(1); } 12% { transform: scale(1.35); } 24% { transform: scale(1); } 36% { transform: scale(1.2); } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot, .live-dot::after { animation: none; } .live-dot::after { display: none; } }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin: 20px 0 0; font-size: clamp(2.1rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.grad { background: linear-gradient(90deg, #1272b8 0%, var(--brand-2) 70%, #5fd7f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { margin: 20px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* while a run is on, the big button says so instead of fading out */
#demo:not([data-variant]):disabled { opacity: 1; background-color: #0f5f9c; }
#demo[data-variant]:disabled { opacity: 0.7; }
#demo:disabled svg { animation: spin 900ms linear infinite; }
.hero-note { margin: 24px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); text-wrap: pretty; }

/* the samples: shadcn Tabs, the list full width over the card that is their panel */
.run-col { scroll-margin-top: 80px; }
.run-col .sample svg.tab-result { width: 14px; height: 14px; }
/* (a disabled tab mid-run keeps no tooltip over the card) */
.run-col .sample:disabled[data-tooltip]:before { display: none; }
.run-meta.own-line { display: block; margin-top: 2px; }
.run-col .sample .tab-result.ok { color: var(--pass); }
.run-col .sample .tab-result.bad { color: var(--fail); }
.run-col > [role=tablist] { width: 100%; }
.run-col .sample { font-family: var(--font-mono); font-size: 0.8125rem; }
/* (the one being checked stays readable while the others are locked) */
.run-col .sample[aria-selected='true']:disabled { opacity: 1; }
.sample:focus-visible { outline-offset: 2px; }
.switcher-error { margin: 0; padding: 0 8px; font-size: 0.875rem; color: var(--muted-foreground); }

/* the result: a shadcn Card, titled with the verdict, the status badge as its action */
.result { scroll-margin-top: 88px; }
/* the card's edge is a ring, so the verdict tints the ring (not when a sample's answer leads: its badge and row say it) */
.result.is-bad:not(.has-found) { --tw-ring-color: #fca5a5; }
.result.is-good { --tw-ring-color: #67e8f9; }
#run-status svg { animation: spin 900ms linear infinite; }
.result > header { row-gap: 6px; }
.result > header > .card-action { grid-row: 1; }
/* (on a phone Stop is 44px: the action keeps that height when it hides, so the head doesn't drop as the verdict lands) */
@media (max-width: 760px) { .result > header > .card-action { min-height: 44px; } }
/* the CardDescription: what the verdict means, then the run's own line in muted text */
.result > header > .run-desc { grid-column: 1 / -1; margin: 0; }
.result > header > h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; outline: none; }
.result.is-bad > header > h2 { color: var(--fail-ink); }
.result.is-good > header > h2, .result.has-found > header > h2 { color: var(--pass-ink); }
/* a sample's answer leads with shadcn's icon-and-title */
.result > header > h2 > svg { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.35em; vertical-align: -0.17em; color: var(--pass); }
.result > header > .run-desc { color: var(--foreground); line-height: 1.55; text-wrap: pretty; }
.run-meta { font-size: 0.8125rem; color: var(--muted-foreground); white-space: nowrap; }
/* the verdict arrives with one short fade, the rows top to bottom (tailwindcss-animate: animate-in fade-in slide-in-from-bottom-1) */
.result:is(.is-good, .is-bad) > header > :is(h2, .run-desc) { animation: fade-in 200ms ease-out; }
/* a little tighter than Basecoat's 24px between the card's parts, so a result and its actions share a laptop screen */
.result { gap: 20px; padding-block: 20px; }
.run-col { gap: 8px; }
/* the guidelines after the actions: the card's last row, so no rule under it */
.result > .more > details:not(:has(~ details:not([hidden]))) { border-bottom: 0; }
.sols tbody tr:not(.waiting) { animation: enter 200ms ease-out backwards; animation-delay: calc(var(--r, 0) * 40ms); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes enter { from { opacity: 0; transform: translateY(0.25rem); } }
.checks.folded li.ok { display: none; }
.checks .met-toggle { display: block; grid-column: 1 / -1; padding: 2px 0 0 28px; }
.checks .met-toggle .btn { padding-inline: 0; height: auto; min-height: 44px; }
/* CardFooter: the actions in shadcn's order, and no empty footer while a run is on */
.result > footer { flex-wrap: wrap; gap: 8px; }
.result > footer #download { margin-left: auto; margin-right: calc(var(--spacing) * -3); }
.result > footer:not(:has(> :not([hidden]))) { display: none; }
.problems { display: flex; flex-direction: column; gap: 28px; }
.problem { display: grid; gap: 16px; }
.problem-name { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* while polyman works: the progress bar and the step under way (the card's description counts the steps) */
/* the ten steps: daisyUI Steps (MIT, below) restyled with the logo's hexagon. Each step's state is its class and data-state. */
.pipeline.steps {
  --color-base-300: #e6edf3; --color-base-content: var(--muted-foreground);
  --color-primary: var(--brand-2); --color-primary-content: #fff;
  --color-error: var(--fail); --color-error-content: #fff;
  --color-neutral: #94a3b8; --color-neutral-content: #fff;
  display: grid; width: 100%;
}
/* a hexagon, point up, like the frame in the logo */
.pipeline .step > .step-icon { width: 2.1rem; height: 2.35rem; border: 0; border-radius: 0; background: var(--step-bg); clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--step-fg); }
.pipeline .step > .step-icon b { font-weight: 700; letter-spacing: 0.02em; color: #7a8a99; }
.pipeline .step-primary > .step-icon { background: linear-gradient(160deg, var(--brand-2) 0%, #1f9fe0 100%); }
.pipeline .step { min-width: 5.75rem; grid-template-rows: 38px auto; }
.pipeline .step:before { height: 3px; border: 0; border-radius: 2px; transition: background-color 0.4s, background-image 0.4s; }
.pipeline .step-primary + .step-primary:before { background: linear-gradient(90deg, #1f9fe0, var(--brand-2) 60%, var(--brand)); }
/* the line into the step under way flows towards it */
.pipeline .step[data-state=now]:before { background: repeating-linear-gradient(90deg, var(--brand-2) 0 10px, #d6eefb 10px 20px) 0 0 / 40px 100%; animation: flow 0.7s linear infinite; }
@keyframes flow { to { background-position: 20px 0; } }
.pipeline .step[data-state=now]:after { content: ''; grid-row: 1; grid-column: 1; place-self: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 65%, transparent) 0%, transparent 68%); animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.pipeline .step[data-state=failed]:after { content: ''; grid-row: 1; grid-column: 1; place-self: center; width: 3rem; height: 3rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fail) 35%, transparent) 0%, transparent 68%); }
.pipeline .step-icon svg { width: 14px; height: 14px; }
.pipeline .step[data-state=now] .step-icon svg { animation: spin 900ms linear infinite; }
.pipeline .step[data-state=done] .step-icon svg, .pipeline .step[data-state=failed] .step-icon svg { animation: pop 260ms ease-out; }
@keyframes pop { from { transform: scale(0.5); opacity: 0; } }
.step-label { display: grid; justify-items: center; gap: 1px; margin-top: 8px; padding: 2px 6px; border-radius: 6px; font-size: 0.8125rem; line-height: 1.3; color: var(--muted-foreground); text-wrap: balance; cursor: default; transition: background-color 150ms, color 200ms; }
.step-label small { font-family: var(--font-mono); font-size: 0.6875rem; font-variant-numeric: tabular-nums; min-height: 1em; }
.step[data-state=now] .step-label, .step[data-state=done] .step-label { color: var(--foreground); }
.step[data-state=failed] .step-label { color: var(--fail-ink); font-weight: 600; }
.step-label:is(:hover, :focus-visible) { background-color: var(--accent); color: var(--accent-foreground); }
.step-label[data-tooltip]:before { width: max-content; max-width: min(260px, calc(100vw - 64px)); white-space: normal; text-align: start; }
/* the three stages as brackets over their steps, with the time each took */
.pipe { display: grid; gap: 6px; }
.pipe-stages { display: grid; grid-template-columns: repeat(10, minmax(5.75rem, 1fr)); gap: 0 8px; }
.pipe-stages { margin-bottom: 8px; }
/* each stage is a hexagon-ended band over its steps: a tint while waiting, the theme's gradient once running or done */
.pipe-stages .stage { --n: 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 calc(var(--n) + 4px); border: 0; border-radius: 0; background: #edf4f9; clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% 50%, calc(100% - var(--n)) 100%, var(--n) 100%, 0 50%); transition: background 0.4s; }
.pipe-stages em { font-family: var(--font-display); font-style: normal; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; }
.pipe-stages small { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pipe-stages .stage[data-state=now], .pipe-stages .stage[data-state=done] { background: linear-gradient(100deg, #d6f1fd, #e3fbfb); }
.pipe-stages .stage[data-state=now] em, .pipe-stages .stage[data-state=done] em { color: #0f5f9c; }
.pipe-stages .stage[data-state=now] small, .pipe-stages .stage[data-state=done] small { color: #0f5f9c; }
.pipe-stages .stage[data-state=failed] { background: #fde8e8; }
.pipe-stages .stage[data-state=failed] em, .pipe-stages .stage[data-state=failed] small { color: var(--fail-ink); }
@media (min-width: 900px) { .pipeline.steps { overflow: visible; } }
@media (max-width: 899px) { .pipe { overflow-x: auto; padding-bottom: 4px; } .pipe > * { min-width: 60rem; } }
@media (prefers-reduced-motion: reduce) { .step[data-state] .step-icon svg, .pipeline .step[data-state=now]:before, .pipeline .step[data-state=now]:after { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* the solutions: a shadcn Table, flush in the card (no frame of its own), its key as the caption */
/* (nothing scrolls sideways at this width, so the squares' tooltips aren't clipped) */
.result .table-container { overflow: visible; }
.sols { table-layout: auto; }
.sols tr { border-bottom: 1px solid var(--border); }
.sols th, .sols td { padding-inline: 8px; }
.sols :is(th, td):first-child { padding-inline-start: 0; }
.sols :is(th, td):last-child { padding-inline-end: 0; text-align: start; }
.sols td { vertical-align: top; padding-block: 10px; white-space: normal; }
.sols td.sol { width: 1%; white-space: nowrap; }
.sols th { white-space: nowrap; line-height: 1.3; }
.sols td.res { width: 1%; white-space: nowrap; }
.sols :is(th, td).slow { width: 6.5rem; white-space: nowrap; text-align: start; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.sols td.slow { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.sols td.slow .t { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sols td.slow .flag { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sols td.slow[data-speed=fast] { color: #1272b8; }
.sols td.slow[data-speed=mid] { color: var(--slow); }
.sols td.slow[data-speed=slow] { color: var(--fail-ink); }
.sols tbody tr:last-child { border-bottom: 1px solid var(--border); }
/* (no hover tint on rows that aren't links: only the broken one is marked) */
@media (hover: hover) { .sols tbody tr:not([data-state=selected], .waiting):hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); } }
.sols tbody tr[data-state=selected] td:first-child { box-shadow: inset 2px 0 0 var(--fail); padding-inline-start: 10px; }
.sols tr[data-state=selected] .dots-note { color: var(--fail-ink); }
.result .badge svg { width: 12px; height: 12px; }
.sols .badge[data-variant='outline'] svg { color: var(--pass); }
/* before results: a shadcn Skeleton where each solution's tests and result will go */
.sols tr.waiting td.tests, .sols tr.waiting td.res { vertical-align: middle; }
/* (a check that ended without judging them leaves those rows plain, not still loading) */
.result:is(.is-good, .is-bad) .sols tr.waiting .skeleton { visibility: hidden; }
/* a waiting row previews its answer: the same squares, hollow until the check runs, then a ripple left to right */
.dot.wait { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.result.is-running .dot.wait { box-shadow: none; background: var(--accent); animation: wave 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes wave { 0%, 60%, 100% { background: var(--accent); transform: none; } 30% { background: color-mix(in srgb, var(--pass) 60%, #fff); transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .result.is-running .dot.wait { animation: none; background: var(--accent); } }
/* nothing runs yet: no placeholder bars on the right, only the hollow squares */

/* a solution that fails as its label says: its marks drawn in outline, so a passing result doesn't shout red */
.sols tr.expected-fail .dot.bad, .sols tr.expected-fail .dot.limit, .legend .dot.hollow { background: #fff; box-shadow: inset 0 0 0 1.5px currentColor; }
.sols tr.expected-fail .dot.bad, .legend .dot.hollow.bad { color: var(--fail); }
.sols tr.expected-fail .dot.limit, .legend .dot.hollow.limit { color: var(--slow); }
/* whether each solution kept its label: words and a mark, no pill */
.res-ok, .res-bad { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; }
.res-ok { color: var(--muted-foreground); }
.res-bad { color: var(--fail-ink); font-weight: 600; }
.res-ok svg, .res-bad svg { width: 14px; height: 14px; }
.res-ok svg { color: var(--pass); }
/* while a run is on: an empty strip where each solution's tests will go, shimmering once they run */
.skeleton { display: block; height: 18px; max-width: 280px; border-radius: 5px; background: var(--muted); }
.result.is-running .skeleton { background: linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--accent) 70%, var(--muted)) 50%, var(--muted) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sol-name { display: block; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; }
.sol-label { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--muted-foreground); }
.dots { display: flex; flex-wrap: wrap; gap: 3px; }
/* a result's squares are 24px apart centre to centre, so each is a fair target for a mouse */
.sols .dots { gap: 6px; }
.sols .dot { width: 18px; height: 18px; border-radius: 5px; }
.sols .dot svg { width: 12px; height: 12px; }
.dot { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: var(--pass); color: #fff; vertical-align: -2px; }
/* a square in a result is a control: its Basecoat tooltip says which test it is */
button.dot { padding: 0; border: 0; font: inherit; cursor: help; }
button.dot::after { content: ''; position: absolute; inset: -3px -2px; }
button.dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* (Basecoat hides a tooltip on keyboard focus; a square's shows, so the keyboard reads what the mouse does) */
.dots [data-tooltip]:focus-visible:before { display: inline-flex; visibility: visible; opacity: 1; scale: 1; --tw-translate-y: 0; translate: var(--tw-translate-x) var(--tw-translate-y); }
/* (on a narrow screen a long test detail wraps instead of running off the card) */
@media (max-width: 760px) { .dots [data-tooltip]:before { width: max-content; max-width: calc(50vw - 24px); white-space: normal; } }
/* (on a wide screen the longest test detail fits on one line, uncut) */
@media (min-width: 761px) { .dots [data-tooltip]:before { max-width: none; } }
.dot.bad { background: var(--fail); }
.dot.limit { background: var(--slow); }
.dot svg { width: 10px; height: 10px; }
.dots-note { display: block; margin-top: 6px; color: var(--muted-foreground); font-size: 0.8rem; line-height: 1.45; white-space: normal; }
/* the key, as the table's caption: one line */
.sols caption.legend { text-align: start; font-size: 0.8125rem; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 14px; white-space: nowrap; }
.legend .legend-note { color: var(--foreground); }
/* (each entry centred on the line, so a square sits level with its words) */
.legend > span { vertical-align: middle; }
@media (min-width: 761px) { .label-word { display: none; } }
/* every fifth test a little apart, so a long strip can be counted */
.dots .dot:nth-child(5n):not(:last-child) { margin-right: 4px; }
.accordion summary { gap: 8px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 32px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 6px 0; font-size: 0.875rem; }
.checks li svg { width: 16px; height: 16px; margin-top: 2px; color: var(--pass); }
.checks li.critical svg { color: var(--fail); }
.checks li.warning svg, .checks li.info svg { color: var(--muted-foreground); }
.checks small { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground); }
.problem-error { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted-foreground); max-height: 16em; overflow: auto; }
.alert[data-variant='destructive'] > section { color: var(--foreground); }
.result .alert { border: 0; border-radius: 0; padding-inline: 0; background: none; }
.alert:not([data-variant]) > svg { color: var(--pass); }
.result .alert:not([data-variant]) > h2 { color: var(--pass-ink); }
/* a contest: each problem's report under its own ruled heading */
.problem + .problem { border-top: 1px solid var(--border); padding-top: 24px; }
.problem-name { scroll-margin-top: 96px; }
.problem { scroll-margin-top: 96px; }
.refusal p { margin: 0 0 8px; }
.refusal .raw { color: var(--muted-foreground); font-size: 0.85rem; overflow-wrap: anywhere; }
.refusal ul { margin: 0 0 8px; padding-left: 18px; }

/* sections below */
.section { padding-block: 40px; }
.section-head { margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.section-head p { margin: 6px 0 0; color: var(--muted-foreground); text-wrap: pretty; }
.card-action { display: flex; align-items: center; gap: 8px; }

/* the upload: a Basecoat empty state, dashed */
.dropzone { border-width: 1px; border-color: var(--border); transition: border-color 150ms, background-color 150ms; }
.dropzone figure { color: var(--primary); }
.dropzone > section { gap: 8px; }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.flash { animation: flash 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes flash { from { border-color: var(--brand); background: var(--brand-soft); } }
/* Basecoat's Empty holds its text to 24rem, for a small empty state; this one spans the page, so its lines may run to 42rem */
.dropzone > header, .dropzone > section { max-width: 42rem; }
.dropzone p { margin: 0; color: var(--muted-foreground); text-wrap: pretty; }
.dropzone-hint { font-size: 0.85rem; }
/* three parts, each with its Lucide icon */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.flow li { position: relative; }
.flow-icon { width: 24px; height: 24px; margin-bottom: 12px; color: var(--primary); }
.flow h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.flow p { margin: 8px 0 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
/* the GitLab records, as links to the pages themselves */
.gitlab { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; padding-top: 56px; }
.gitlab h2 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; outline: none; scroll-margin-top: 96px; }
.gitlab-copy p { margin: 12px 0 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
/* the GitLab records: Basecoat items, one per page, ruled apart */
.records { gap: 0; }
.records > hr { border-color: var(--border); margin: 0; }
.records .item { color: var(--foreground); text-decoration: none; }
.records .item:focus-visible { outline-offset: -2px; }
/* (the whole sentence shows: Basecoat clips an item's text at two lines) */
.records .item p { display: block; -webkit-line-clamp: unset; text-wrap: pretty; }
.records .item h3 { font-size: 0.9375rem; font-weight: 600; }
.records .item > figure svg { width: 20px; height: 20px; color: var(--primary); }
.records .item > aside svg { width: 16px; height: 16px; color: var(--muted-foreground); }
.dropzone-hint code { white-space: nowrap; }
.privacy { display: block; text-align: center; margin: 4px 0 0 !important; font-size: 0.875rem; color: var(--muted-foreground); }
.privacy svg { display: inline; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.refusal .prep a { display: inline-block; padding-block: 13px; }
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 28px 40px; font-size: 0.875rem; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* the docs page */
.docs-layout { max-width: 1180px; margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.toc p { margin: 0 0 8px; font-weight: 600; }
.toc a:not(.btn) { color: var(--muted-foreground); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.toc a:not(.btn):hover { color: var(--foreground); background: var(--muted); }
.docs { max-width: 740px; display: flex; flex-direction: column; gap: 56px; }
.docs section { scroll-margin-top: 88px; }
.docs h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); }
.docs h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.docs p, .docs li { line-height: 1.7; color: #3f3f46; text-wrap: pretty; }
.docs .lede { font-size: 1.125rem; color: var(--muted-foreground); }
.docs ol, .docs ul { padding-left: 22px; display: grid; gap: 6px; list-style: revert; }
.docs pre { margin: 12px 0 16px; background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; }
.docs pre code { background: none; padding: 0; font-size: 1em; }
.docs .table-container { margin: 12px 0 4px; }
.docs .table { border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.docs .table th, .docs .table td { padding: 10px 14px; white-space: normal; }
.docs .table th { background: var(--muted); font-size: 0.8rem; color: var(--muted-foreground); }

/* the run as it happens: a log in Basecoat's code style, a muted band flush in the card (shadcn ScrollArea: fixed height, newest at the foot) */
/* (flush in the card under a hairline: whole lines only, the oldest fading out at the top) */
.run-log { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); height: calc(6 * 1.6em + 10px); overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 10px, #000 calc(10px + 1.6em)); }
.run-log::-webkit-scrollbar { display: none; }
.run-log[hidden] { display: none; }
.log-tick { color: var(--muted-foreground); font-weight: 400; font-variant-numeric: tabular-nums; }
.log-line { display: grid; grid-template-columns: 6ch minmax(0, 1fr); column-gap: 1.5ch; }
.log-t { color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.run-log .log-line:last-child { font-weight: 600; }
@media (max-width: 760px) { .run-log { height: calc(3 * 1.6em + 10px); } }
/* what the run did, counted from its report: the numbers in the foreground, the words muted */
.run-facts { color: var(--muted-foreground); font-size: 0.8125rem; }
.run-facts .fact { white-space: nowrap; }
.run-facts .fact + .fact::before { content: '·'; margin-inline: 0.3em; color: var(--muted-foreground); }
.result > header > .run-desc > .run-facts { font-size: 0.75rem; }
/* (on a phone the facts wrap: gaps part them, so no dot starts or ends a line) */
@media (max-width: 760px) { .run-facts { column-gap: 14px; } .run-facts .fact + .fact::before { content: none; } }
.run-facts b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.result > header > .run-desc > .run-facts { display: flex; flex-wrap: wrap; margin-top: 4px; }
.result > header > .run-desc > .run-facts[hidden] { display: none; }
.verdict .run-facts { display: flex; flex-wrap: wrap; margin: 6px 0 0; }
/* "How it was checked": the ten steps, each passed or failed and how long it took */
/* the GitLab records' own figures, read from what they publish */
.records .item .item-stat { display: block; margin-top: 4px; min-height: calc(2 * 1.45em); font-size: 0.8125rem; line-height: 1.45; color: var(--foreground); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.records .item .item-stat.loading::before { content: ''; display: block; width: 60%; height: 0.8em; margin-top: 0.35em; border-radius: 4px; background: var(--muted); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.records .item .item-stat[hidden] { display: none; }
.gitlab-copy .before-after { color: var(--foreground); }
/* (the pipeline's line is short: one line held on a wide screen) */
@media (min-width: 961px) { .records .item .item-stat[data-stat=pipelines] { min-height: 1.45em; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px 40px; }
  .hero-copy { padding-top: 0; position: static; }
  .gitlab { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .container { padding-inline: 16px; }
  /* on a phone each page links to the other one, and Source keeps only its icon */
  .header-nav [aria-current] { display: none; }
  .header-nav .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero { padding-block: 32px; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .btn { width: 100%; height: 44px; }
  .header-nav .btn { height: 44px; min-width: 44px; }
  .footer-links a { display: inline-block; padding-block: 10px; }
  .result .btn, .dropzone .btn { height: 44px; }
  /* the hero's run button is the phone's primary; the card's steps back to outline */
  #start { background: var(--background); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
  .toc a:not(.btn) { min-width: 44px; text-align: center; }
  .logo { padding-block: 8px; }
  .footer-links a { padding-block: 12px; }
  .toc a:not(.btn) { padding-block: 12px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* on a phone the tabs stay one row, scrolling sideways, and fade at the edge while there is more */
  .run-col > [role=tablist] { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .run-col > [role=tablist].more-right { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .run-col .sample { flex: none; }
  /* (a finger's worth of tab: 44px tall) */
  .run-col > [role=tablist] { height: auto; }
  .run-col .sample { height: 44px; }
  /* each solution stacks: name and result on top, then its tests across the full width */
  .sols thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sols tbody { display: block; }
  .sols tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .sols td { display: block; }
  .sols td.sol { grid-column: 1; grid-row: 1; width: auto; padding-bottom: 8px; white-space: normal; }
  .sols td.res { grid-column: 2; grid-row: 1; width: auto; padding-bottom: 8px; }
  .sols td.tests { grid-column: 1 / -1; grid-row: 2; padding: 0 0 4px; }
  .sols td.slow { grid-column: 1 / -1; grid-row: 3; width: auto; padding: 0 0 12px; text-align: start; }
  .sols td.slow:not(:empty) { display: flex; align-items: baseline; gap: 8px; }
  .sols td.slow:not(:empty)::before { content: 'Slowest'; font-weight: 400; color: var(--muted-foreground); }
  .sols td.slow .t, .sols td.slow .flag { display: inline; }
  .sols tbody tr[data-state=selected] td.slow { padding-inline-start: 10px; }
  .sols tr.waiting td.slow { display: none; }
  .sols tbody tr[data-state=selected] td.tests { padding-inline-start: 10px; }
  .sols tbody tr[data-state=selected] td:first-child { box-shadow: none; padding-inline-start: 10px; }
  .sols tbody tr[data-state=selected] { box-shadow: inset 2px 0 0 var(--fail); }
  .sols caption.legend { line-height: 1.9; }
  .gitlab { padding-top: 40px; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .toc p { width: 100%; }
  .result > header > h2 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* the result card has the run button beside the claim on a wide screen; the hero's copy of it is for phones,
   and the upload is a quiet link there, so the card's button is the one filled action on screen */
@media (min-width: 961px) {
  #demo { display: none; }
  #own { background: none; border-color: transparent; box-shadow: none; padding-inline: 0; height: auto; color: var(--primary); }
  #own:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* no dragging on a touch screen */
@media (hover: none) {
  .drop-hint { display: none; }
}
/* the docs' tag letters and guideline severities, as words, not pills */
.tag { font-family: var(--font-mono); font-weight: 650; font-size: 0.85rem; }
.tag-pass { color: var(--pass-ink); }
.tag-fail { color: var(--fail-ink); }
.tag-slow { color: var(--slow); }
.sev { font-weight: 500; }
.sev-must-fix { color: var(--fail-ink); }
.sev-recommended, .sev-nice-to-have { color: var(--muted-foreground); }

/* a finger needs bigger squares: on touch screens they grow to a tappable size */
@media (pointer: coarse) {
  .sols button.dot { width: 20px; height: 20px; border-radius: 5px; }
  .sols button.dot svg { width: 14px; height: 14px; }
  .sols .dots { gap: 4px; }
  .sols .dots .dot:nth-child(5n):not(:last-child) { margin-right: 4px; }
  .sols button.dot::after { inset: -1px; }
}

/* the tab just pressed keeps its tooltip quiet until the pointer leaves it */
.run-col .sample.quiet[data-tooltip]::before { display: none; }
@media (prefers-reduced-motion: reduce) { .records .item .item-stat.loading::before { animation: none; } }

/* a short laptop screen (about 730 px of page): the rows sit closer, so the card's actions stay on the first screen */
@media (min-width: 961px) and (max-height: 760px) {
  .sols td { padding-block: 6px; }
  .result { gap: 16px; }
}

.sols td.tests { width: 22rem; }
.run-log { margin: 12px 0 0; padding: 10px 14px 12px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--muted) 55%, #fff); height: auto; max-height: 21rem; overflow-y: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: thin; }
.run-log::before { content: 'Run log'; display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
@media (max-width: 760px) { .run-log { height: auto; max-height: 11rem; } }

/* the buttons: the main action in the brand cyans, Stop in its own red, the rest quiet outlines */
.btn:not([data-variant]) { background: linear-gradient(135deg, #1272b8 0%, #1f9fe0 55%, var(--brand-2) 100%); border: 0; font-weight: 600; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px rgba(31, 159, 224, 0.75); transition: transform 150ms, box-shadow 150ms, filter 150ms; }
.btn:not([data-variant]):hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 22px -8px rgba(31, 159, 224, 0.85); }
.btn:not([data-variant]):active { transform: none; }
.btn[data-variant=outline] { font-weight: 500; border-color: #cfe3ee; }
.btn[data-variant=outline]:hover { border-color: var(--brand-2); background: var(--accent); color: var(--accent-foreground); }
.btn.stop { color: var(--fail-ink); border-color: color-mix(in srgb, var(--fail) 40%, #fff); background: #fff6f6; font-weight: 600; }
.btn.stop:hover { background: #fee2e2; border-color: var(--fail); color: var(--fail-ink); }
.btn.stop svg { color: var(--fail); }
.btn kbd { margin-inline-start: 6px; padding: 1px 6px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 4px; background: transparent; box-shadow: none; font: 600 0.6875rem var(--font-mono); color: inherit; opacity: 0.75; }

/* less air: the card's rows sit closer */
.problem { gap: 10px; }
.sols td { padding-block: 7px; }
.checks li { padding: 3px 0; }
.result .legend { line-height: 1.6; }
.hero { padding-block: 16px 36px; }

/* a row that has not been judged yet: its time is a dash, its result says what the check is doing, a hexagon whose edge is chased by a light */
.wait-time { font-family: var(--font-mono); font-size: 0.8125rem; color: #b6c3cf; }
.wait-res { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted-foreground); }
.wait-res .j { display: none; }
.wait-res .hexspin { width: 18px; height: 18px; fill: none; stroke: #cfe3ee; stroke-width: 2; stroke-linejoin: round; }
.result.is-running .wait-res .hexspin { stroke: var(--brand-2); stroke-dasharray: 28 72; animation: chase 1.1s linear infinite; }
.result.is-running .sols.is-running .wait-res .q { display: none; }
.result.is-running .sols.is-running .wait-res .j { display: inline; color: var(--primary); font-weight: 500; }
.result.is-running .sols.is-running .wait-time { color: var(--brand-2); animation: blink 1s steps(2, jump-none) infinite; }
@keyframes chase { to { stroke-dashoffset: -100; } }
@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .result.is-running .wait-res .hexspin, .wait-time { animation: none; } }

/* the GitLab section: the theme's gradient on the name, the same hexagon lattice behind it */
.gitlab { position: relative; isolation: isolate; }
.gitlab::before { content: ''; position: absolute; z-index: -1; top: -16px; left: -24px; width: 560px; height: 360px; pointer-events: none; opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%2335aeee' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z'/%3E%3Cpath d='M28 63v33M1 47.5-27 63M55 47.5 83 63'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 97px;
  -webkit-mask-image: radial-gradient(closest-side at 30% 40%, #000 0%, transparent 100%); mask-image: radial-gradient(closest-side at 30% 40%, #000 0%, transparent 100%); }
.gitlab h2 .gl { background: linear-gradient(100deg, #1272b8 0%, var(--brand-2) 65%, #5fd7f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gitlab h2::after { content: ''; display: block; width: 72px; height: 4px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, #1272b8, var(--brand-2) 60%, var(--brand)); }

/* polyman's hexagon: buttons and tabs have the pointed ends of the logo's frame. The element is cut to the shape (its fill is its own
   background); a ring, where it has one, is a pseudo-element cut to the shape's outline (an even-odd polygon: outer hexagon, then inner). */
.btn, .run-col .sample, .badge {
  --n: 12px; --b: 1.5px; --ring: transparent;
  position: relative; isolation: isolate; border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% 50%, calc(100% - var(--n)) 100%, var(--n) 100%, 0 50%);
  padding-inline: calc(var(--n) + 6px);
}
.btn[data-size=sm] { --n: 9px; padding-inline: calc(var(--n) + 5px); }
.btn[data-size=lg] { --n: 15px; }
.btn::after, .run-col .sample::after, .badge::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 1; pointer-events: none; background: var(--ring);
  clip-path: polygon(evenodd,
    var(--n) 0, calc(100% - var(--n)) 0, 100% 50%, calc(100% - var(--n)) 100%, var(--n) 100%, 0 50%, var(--n) 0,
    calc(var(--n) + var(--b) * 0.7) var(--b), calc(100% - var(--n) - var(--b) * 0.7) var(--b), calc(100% - var(--b) * 1.5) 50%, calc(100% - var(--n) - var(--b) * 0.7) calc(100% - var(--b)), calc(var(--n) + var(--b) * 0.7) calc(100% - var(--b)), calc(var(--b) * 1.5) 50%, calc(var(--n) + var(--b) * 0.7) var(--b));
}
/* the outlined ones: a white face and a thin ring */
.btn[data-variant=outline] { background: #fff; --ring: #bcd6e6; }
.btn[data-variant=outline]:hover { background: var(--accent); --ring: var(--brand-2); }
.btn.stop { background: #fff6f6; --ring: color-mix(in srgb, var(--fail) 55%, #fff); }
.btn.stop:hover { background: #fee2e2; --ring: var(--fail); }
.btn:focus-visible, .run-col .sample:focus-visible { outline: none; --b: 2.5px; --ring: var(--primary); }
.btn:not([data-variant])::after, .btn[data-variant=ghost]::after, .btn[data-variant=secondary]::after { display: none; }
.btn:not([data-variant]):focus-visible::after { display: block; }
.btn[data-variant=ghost]:hover { background: var(--accent); }

/* the samples: a row of hexagons, the chosen one ringed in the brand gradient */
.run-col > [role=tablist] { height: auto; padding: 0; gap: 6px; background: transparent; border-radius: 0; }
.run-col .sample { height: 44px; flex: 1; background: #edf4f9; color: var(--muted-foreground); }
.run-col .sample:hover:not(:disabled) { background: #e0f0fb; color: var(--foreground); }
.run-col .sample[aria-selected='true'] { background: #fff; color: var(--foreground); --ring: linear-gradient(100deg, var(--brand-2), var(--brand)); --b: 2px; }
.run-col .sample[aria-selected='true']:focus-visible { --ring: var(--primary); }
.run-col .sample::before { display: none !important; }

/* the contest guidelines as a row of chips: the title, with its detail on hover; one that is not met shows its detail beside it */
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks li { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 0.8125rem; line-height: 1.4; }
.checks li svg { width: 14px; height: 14px; margin-top: 0; flex: none; }
.checks li > span { display: inline; }
.checks li.ok small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checks li:not(.ok, .met-toggle) { border-color: color-mix(in srgb, var(--fail) 35%, #fff); background: #fff6f6; }
.checks li:not(.ok, .met-toggle) small { display: inline; margin: 0 0 0 6px; font-size: 0.75rem; }
.checks li[data-tooltip]:before { width: max-content; max-width: 280px; white-space: normal; text-align: start; }
.checks li.met-toggle { border: 0; background: none; padding: 0; grid-column: auto; }
.checks li.met-toggle .btn { min-height: 0; padding-block: 2px; }
/* the key to the squares sits in the actions row beside the buttons */
#run-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-inline: auto 8px; font-size: 0.8125rem; color: var(--muted-foreground); }
#run-legend[hidden] { display: none; }

/* the section icons in the bright theme blue, not the dark text blue */
.records .item > figure, .flow-icon, .dropzone figure { color: var(--pass); }

/* badges: a hexagon pill, the same pointed ends; the outlined ones keep a thin ring */
.badge { --n: 9px; --b: 1.5px; padding-inline: calc(var(--n) + 5px); }
.badge[data-variant=outline] { background: #fff; --ring: #bcd6e6; }
.badge[data-variant=destructive] { background: #fdecec; --ring: color-mix(in srgb, var(--fail) 40%, #fff); }
.hero .badge { --n: 12px; padding-inline: calc(var(--n) + 8px); }
/* "Check your own problem" is a plain link, not a shape */
#own, #own:hover { clip-path: none; background: none; padding-inline: 0; --ring: transparent; }
#own::after { display: none; }
/* the run log is as tall as the table beside it, scrolls inside, and keeps its title in view */
.run-log { padding-top: 0; padding-bottom: 8px; max-height: 9.5rem; }
.run-log::before { position: sticky; top: 0; z-index: 1; margin: 0 -14px 6px; padding: 10px 14px 6px; background: color-mix(in srgb, var(--muted) 55%, #fff); }
.accordion > details > summary { padding-block: 10px; }


/* the log at the card's bottom right, beside the guidelines; below the guidelines on a narrow screen */
.result.single > .run-log { order: 2; margin: 4px 24px 0; max-height: 9.5rem; height: auto; min-height: 0; }
.result.single > .more { order: 1; }
@media (min-width: 1100px) {
  .result.single { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; column-gap: 28px; align-items: start; }
  .result.single > header, .result.single > section, .result.single > footer { grid-column: 1 / -1; }
  .result.single > .more { grid-column: 1; grid-row: 4; }
  .result.single > .run-log { grid-column: 2; grid-row: 4; margin: 0 24px 0 0; }
}

/* the hero: the badge across the top, the headline and the intro side by side, centred on each other */
@media (min-width: 961px) {
  .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .hero-copy > .badge { grid-column: 1 / -1; justify-self: start; }
  .hero-copy > h1 { grid-column: 1; grid-row: 2 / span 3; align-self: center; margin-top: 0; }
  .hero-copy > .hero-lede { grid-column: 2; grid-row: 2; margin-top: 16px; }
  .hero-copy > .hero-actions { grid-column: 2; grid-row: 3; margin-top: 20px; }
  .hero-copy > .hero-note { grid-column: 2; grid-row: 4; margin-top: 16px; }
}

/* the lattice behind a section reaches past the screen edge on a phone: it is clipped, not scrolled to */
.hero, .gitlab { overflow-x: clip; }
@media (max-width: 760px) { .sols td.tests { width: auto; } }

.run-log { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.45; color: var(--foreground); white-space: normal; overflow-wrap: anywhere; }
.run-log:focus-visible { outline-offset: -2px; }

/* the run log as a timeline: a rail down the left with a hexagon for each event, the newest one lit, the time in blue */
.run-log { background: #fff; border-color: #cfe3ee; border-radius: 10px; padding-inline: 14px 10px; scrollbar-width: thin; scrollbar-color: var(--brand-2) transparent; }
.run-log::-webkit-scrollbar { display: block; width: 6px; }
.run-log::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand), var(--brand-2)); border-radius: 3px; }
.run-log::before { background: #fff; margin: 0 -10px 4px -14px; padding: 10px 14px 8px 32px; border-bottom: 1px solid #e3eef5; color: var(--primary); letter-spacing: 0.14em; background-image: radial-gradient(circle, var(--brand-2) 0 3px, transparent 3.5px); background-size: 8px 8px; background-repeat: no-repeat; background-position: 14px 50%; }
.log-line { position: relative; grid-template-columns: 5.5ch minmax(0, 1fr); column-gap: 12px; padding: 2px 0 2px 18px; }
.log-line::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: #bfe3f7; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.log-line::after { content: ''; position: absolute; left: 4px; top: calc(0.55em + 9px); bottom: -0.55em; width: 1px; background: #d6e8f2; }
.log-line:last-child::after { display: none; }
.log-t { text-align: left; color: var(--accent-foreground); font-weight: 500; }
.run-log .log-line:last-child { font-weight: 600; }
.run-log .log-line:last-child::before { background: var(--brand-2); box-shadow: 0 0 0 3px rgba(53, 174, 238, 0.2); }

/* the result card's edge: chamfered corners like the logo's frame, a gradient ring (red when the answer is bad, the same cut as the buttons).
   The fill and the ring are pseudo-elements cut to the shape, so nothing inside the card (tooltips) is clipped. */
.result { --cut: 22px; --rw: 2px; position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; --ring: linear-gradient(120deg, var(--brand-2), var(--brand) 45%, var(--brand-2)); filter: drop-shadow(0 14px 24px rgba(31, 100, 150, 0.12)); }
.result::before, .result::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.result::before { background: #fff; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.result::after { background: var(--ring);
  clip-path: polygon(evenodd,
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--rw) * 0.5) var(--rw), calc(100% - var(--cut) - var(--rw) * 0.5) var(--rw), calc(100% - var(--rw)) calc(var(--cut) + var(--rw) * 0.5), calc(100% - var(--rw)) calc(100% - var(--cut) - var(--rw) * 0.5), calc(100% - var(--cut) - var(--rw) * 0.5) calc(100% - var(--rw)), calc(var(--cut) + var(--rw) * 0.5) calc(100% - var(--rw)), var(--rw) calc(100% - var(--cut) - var(--rw) * 0.5), var(--rw) calc(var(--cut) + var(--rw) * 0.5), calc(var(--cut) + var(--rw) * 0.5) var(--rw)); }
.result.is-bad:not(.has-found) { --ring: linear-gradient(120deg, #f87171, #fca5a5 50%, #f87171); }
@media (max-width: 760px) { .result { --cut: 14px; } }

/* daisyUI 5.7.50 Steps, MIT License, https://daisyui.com (base rules only, taken out of its cascade layer) */
.steps{counter-reset:step;grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}
.steps .step{text-align:center;--step-bg:var(--color-base-300);--step-fg:var(--color-base-content);grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid;&:before{width:100%;height:.5rem;color:var(--step-bg);background-color:var(--step-bg);content:"";border:1px solid;grid-row-start:1;grid-column-start:1;margin-inline-start:-100%;top:0}&>.step-icon,&:not(:has(.step-icon)):after{--tw-content:counter(step);content:var(--tw-content);counter-increment:step;z-index:1;color:var(--step-fg);background-color:var(--step-bg);border:1px solid var(--step-bg);border-radius:3.40282e38px;grid-row-start:1;grid-column-start:1;place-self:center;place-items:center;width:2rem;height:2rem;display:grid;position:relative}&:first-child:before{--tw-content:none;content:var(--tw-content)}&[data-content]:after{--tw-content:attr(data-content);content:var(--tw-content)}}
.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after,.steps .step-neutral>.step-icon{--step-bg:var(--color-neutral);--step-fg:var(--color-neutral-content)}
.steps .step-primary+.step-primary:before,.steps .step-primary:after,.steps .step-primary>.step-icon{--step-bg:var(--color-primary);--step-fg:var(--color-primary-content)}
.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after,.steps .step-secondary>.step-icon{--step-bg:var(--color-secondary);--step-fg:var(--color-secondary-content)}
.steps .step-accent+.step-accent:before,.steps .step-accent:after,.steps .step-accent>.step-icon{--step-bg:var(--color-accent);--step-fg:var(--color-accent-content)}
.steps .step-info+.step-info:before,.steps .step-info:after,.steps .step-info>.step-icon{--step-bg:var(--color-info);--step-fg:var(--color-info-content)}
.steps .step-success+.step-success:before,.steps .step-success:after,.steps .step-success>.step-icon{--step-bg:var(--color-success);--step-fg:var(--color-success-content)}
.steps .step-warning+.step-warning:before,.steps .step-warning:after,.steps .step-warning>.step-icon{--step-bg:var(--color-warning);--step-fg:var(--color-warning-content)}
.steps .step-error+.step-error:before,.steps .step-error:after,.steps .step-error>.step-icon{--step-bg:var(--color-error);--step-fg:var(--color-error-content)}
.steps-horizontal{grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}
.steps-horizontal .step{text-align:center;grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid;&:before{width:100%;height:.5rem;margin-inline-start:-100%;translate:0}[dir=rtl] &:before{translate:0}}
.steps-vertical{grid-auto-rows:1fr;grid-auto-flow:row}
.steps-vertical .step{grid-template-rows:auto;grid-template-columns:40px 1fr;justify-items:start;gap:.5rem;min-height:4rem;display:grid;&:before{width:.5rem;height:100%;margin-inline-start:50%;translate:-50% -50%}[dir=rtl] &:before{translate:50% -50%}}