/* =============================================================================
   AI Place Hub - téma
   Portovaná z pôvodného index.html (Tailwind CDN) do statického CSS.
   Dôvod: CDN Tailwind kompiluje v prehliadači pri každom načítaní stránky,
   čo je na produkcii najpomalšia časť renderu. Tokeny aj vizuál sú rovnaké.
   ========================================================================== */

:root {
  color-scheme: light dark;
  scrollbar-gutter: stable;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --color-page:   light-dark(oklch(0.985 0.006 95),  oklch(0.17 0.014 265));
  --color-panel:  light-dark(oklch(0.955 0.009 95),  oklch(0.215 0.018 265));
  --color-ink:    light-dark(oklch(0.24 0.022 265),  oklch(0.95 0.008 95));
  --color-muted:  light-dark(oklch(0.505 0.018 265), oklch(0.71 0.014 95));
  --color-line:   light-dark(oklch(0.895 0.01 95),   oklch(0.29 0.018 265));
  --color-accent: light-dark(oklch(0.5 0.15 268),    oklch(0.76 0.13 265));
  --color-signal: light-dark(oklch(0.6 0.13 62),     oklch(0.79 0.12 72));
  --color-danger: light-dark(oklch(0.52 0.18 25),    oklch(0.75 0.15 25));

  /* Šírky. Na širokej obrazovke sa obsah roztiahne, ale meraný text
     zostáva v rozumnom riadku - o to sa stará .measure a .prose. */
  --wrap: 78rem;
  --wrap-wide: 104rem;
  --gutter: clamp(16px, 3vw, 40px);
  --radius: 12px;
}

/* Manuálne prepnutie témy prebíja systémové nastavenie */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

::selection { background: color-mix(in oklab, var(--color-signal) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-page);
  padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- typografia */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
@supports (text-box: trim-both cap alphabetic) {
  .display-trim { text-box: trim-both cap alphabetic; }
}
.h-hero { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1; }
.h-section { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.h-page { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--color-muted); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.lead { font-size: 17px; color: var(--color-muted); max-width: 58ch; }
.measure { max-width: 62ch; }
.accent { color: var(--color-accent); }
.signal { color: var(--color-signal); }

/* --------------------------------------------------------------- rozloženie */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Odsadenie sekcií rastie s obrazovkou, ale nie donekonečna. Na notebooku
   bolo pôvodných 4rem hore aj dole zbytočne veľa prázdna. */
.section { padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--color-line); }
.section:first-child { border-top: 0; }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row-between { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.spacer { flex: 1; }

.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } }

.with-aside { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
/* Bez min-width: 0 roztiahne široká tabuľka celý stĺpec mriežky a stránka
   dostane vodorovný posuvník namiesto toho, aby skrolovala len tabuľka. */
.with-aside > *, .split > * { min-inline-size: 0; }
@media (min-width: 900px)  { .with-aside { grid-template-columns: minmax(0,1fr) 19rem; gap: clamp(2rem, 3vw, 3rem); align-items: start; } }
@media (min-width: 1600px) { .with-aside { grid-template-columns: minmax(0,1fr) 22rem; } }

/* ------------------------------------------------------------------ hlavička */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in oklab, var(--color-page) 80%, transparent);
  backdrop-filter: blur(10px);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 14px;
}
.brand {
  font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--color-accent); }

.nav { display: none; gap: 4px; font-size: 15px; }
@media (min-width: 1040px) { .nav { display: flex; flex-wrap: nowrap; align-items: center; } }
.nav a, .nav .nav-more {
  color: var(--color-muted); text-decoration: none; padding: 7px 11px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav a:hover, .nav .nav-more:hover { color: var(--color-ink); background: var(--color-panel); text-decoration: none; }
.nav a[aria-current="true"] {
  color: var(--color-ink); background: var(--color-panel);
  border-color: color-mix(in oklab, var(--color-accent) 35%, var(--color-line));
}
.nav .nav-more svg { inline-size: 14px; block-size: 14px; opacity: .7; }
.nav a.cta { color: var(--color-accent); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.avatar-link { display: flex; border-radius: 999px; }
.avatar-link:hover .avatar { border-color: color-mix(in oklab, var(--color-accent) 55%, var(--color-line)); }
/* Musí prebiť .btn, ktoré je v súbore nižšie a nastavuje inline-flex.
   Bez toho pretekali tlačidlá cez okraj na mobile. */
.header-actions .desk-only { display: none; }
@media (min-width: 1040px) { .header-actions .desk-only { display: inline-flex; } }

/* Rozbalené sekcie v lište. Popover, takže bez jediného riadku JS. */
#more.menu-card {
  position: fixed; inset: auto; margin: 0; border: 1px solid var(--color-line);
  border-radius: 14px; background: var(--color-panel); color: var(--color-ink);
  padding: 8px; inline-size: min(24rem, calc(100vw - 32px));
  box-shadow: 0 26px 60px -30px rgb(0 0 0 / .55);
  inset-block-start: 68px; inset-inline-end: max(16px, calc((100vw - 74rem) / 2));
  opacity: 0; translate: 0 -6px;
  transition: opacity .16s ease, translate .16s ease, overlay .16s allow-discrete, display .16s allow-discrete;
}
#more:popover-open { opacity: 1; translate: 0 0; }
@starting-style { #more:popover-open { opacity: 0; translate: 0 -6px; } }
#more .inner { display: flex; flex-direction: column; gap: 1px; }
#more a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--color-ink); }
#more a:hover { background: color-mix(in oklab, var(--color-accent) 10%, transparent); text-decoration: none; }
#more .t { display: block; font-size: 15px; font-weight: 500; }
#more .d { display: block; font-size: 13px; color: var(--color-muted); margin-top: 2px; line-height: 1.4; }

.icon-btn {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border: 1px solid var(--color-line); border-radius: 8px;
  background: transparent; color: var(--color-muted); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.icon-btn:hover { color: var(--color-ink); border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-line)); }
.icon-btn svg { inline-size: 20px; block-size: 20px; }
@media (min-width: 1040px) { .icon-btn.menu-only { display: none; } }

.avatar { inline-size: 32px; block-size: 32px; border-radius: 999px; object-fit: cover; border: 1px solid var(--color-line); }
.avatar-lg { inline-size: 72px; block-size: 72px; border-radius: 999px; object-fit: cover; border: 1px solid var(--color-line); }
.avatar-fallback {
  display: grid; place-items: center; background: var(--color-panel);
  color: var(--color-muted); font-weight: 600; text-transform: uppercase;
}

/* Mobilné menu ako popover - žiadny JS na otvorenie */
#menu {
  inset: auto 0 0 0; margin: 0; border: 0; border-top: 1px solid var(--color-line);
  background: var(--color-page); color: var(--color-ink); inline-size: 100%;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  border-start-start-radius: 16px; border-start-end-radius: 16px;
  translate: 0 100%;
  transition: translate .26s ease, overlay .26s allow-discrete, display .26s allow-discrete;
}
#menu:popover-open { translate: 0 0; }
@starting-style { #menu:popover-open { translate: 0 100%; } }
#menu::backdrop { background: color-mix(in oklab, var(--color-ink) 45%, transparent); backdrop-filter: blur(2px); }
#menu .inner { max-width: 28rem; margin-inline: auto; display: flex; flex-direction: column; gap: 2px; }
#menu .grab { inline-size: 40px; block-size: 4px; border-radius: 999px; background: var(--color-line); margin: 0 auto 12px; }
#menu a {
  border-radius: 10px; padding: 13px 12px; font-size: 17px;
  color: var(--color-ink); text-decoration: none;
}
#menu a:hover { background: var(--color-panel); text-decoration: none; }
#menu a.primary { margin-top: 8px; background: var(--color-accent); color: var(--color-page); text-align: center; font-weight: 500; }
#menu .group-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted); margin: 14px 12px 6px;
}
#menu .inner { max-block-size: 78vh; overflow-y: auto; }

/* --------------------------------------------------------------- ozdoby hero */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; z-index: 60; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-signal));
}
@supports (animation-timeline: scroll()) {
  .progress { scale: 0 1; animation: grow linear both; animation-timeline: scroll(root block); }
  @keyframes grow { to { scale: 1 1; } }
}
@supports not (animation-timeline: scroll()) { .progress { display: none; } }

/* overflow: clip drží presahujúcu auroru vnútri, ale na rozdiel od hidden
   nevytvára skrolovací kontext, takže sticky hlavička funguje ďalej. */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.25rem); }


.aurora {
  position: absolute; inset-inline: -20%; top: -6rem; height: 30rem; z-index: -2;
  /* Prečnieva zámerne, ale nesmie rozšíriť stránku - preto obal so skrytým
     pretečením. Samotné inset-inline: -20% inak vyrobí vodorovný posuvník. */
  opacity: .7; pointer-events: none; filter: blur(6px);
  background:
    radial-gradient(38rem 26rem at var(--mx, 24%) var(--my, 18%), color-mix(in oklab, var(--color-accent) 26%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at calc(100% - var(--mx, 24%)) 72%, color-mix(in oklab, var(--color-signal) 20%, transparent), transparent 72%);
}
.dotfield {
  position: absolute; inset-inline: 0; top: -4rem; height: 26rem; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--color-ink) 26%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(72% 62% at 28% 28%, #000, transparent 76%);
}

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.haloborder {
  background:
    linear-gradient(var(--color-panel), var(--color-panel)) padding-box,
    conic-gradient(from var(--angle),
      color-mix(in oklab, var(--color-accent) 70%, transparent),
      color-mix(in oklab, var(--color-signal) 70%, transparent),
      color-mix(in oklab, var(--color-accent) 70%, transparent)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 28px;
}
@media (min-width: 640px) { .haloborder { padding: 48px; } }
@media (prefers-reduced-motion: no-preference) {
  .haloborder { animation: spin 9s linear infinite; }
  @keyframes spin { to { --angle: 360deg; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 3% cover 18%; }
    @keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ------------------------------------------------------------------- tlačidlá */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--color-line); border-radius: 8px;
  padding: 11px 18px; min-height: 42px;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--color-ink); background: transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}
.btn:hover { background: var(--color-panel); text-decoration: none; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-page); }
.btn-primary:hover { background: var(--color-accent); filter: brightness(1.1); }
.btn-sm { padding: 8px 13px; min-height: 36px; font-size: 14px; }
.btn-danger { color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger) 40%, var(--color-line)); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn svg { inline-size: 16px; block-size: 16px; }

.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* Prepínač lajk/uloženie - stav nesie aria-pressed, nie trieda */
.btn-toggle[aria-pressed="true"] {
  color: var(--color-accent);
  border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-line));
  background: color-mix(in oklab, var(--color-accent) 10%, transparent);
}

.chip {
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 14.5px; min-height: 40px;
  background: transparent; color: var(--color-muted);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover { color: var(--color-ink); border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line)); text-decoration: none; }
.chip[aria-pressed="true"], .chip.is-active {
  color: var(--color-page); background: var(--color-accent); border-color: var(--color-accent);
}
.chip-sm { padding: 5px 11px; min-height: 30px; font-size: 13px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------- odznaky */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--color-line); border-radius: 6px;
  padding: 3px 8px; font-family: var(--font-mono); font-size: 12px;
  color: var(--color-muted); text-decoration: none; white-space: nowrap;
}
.badge:hover { text-decoration: none; color: var(--color-ink); }
.badge-universal { color: var(--color-signal); border-color: color-mix(in oklab, var(--color-signal) 45%, var(--color-line)); }
.badge-platform { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line)); }
.badge-type { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.badge-trending { color: var(--color-signal); border-color: color-mix(in oklab, var(--color-signal) 45%, var(--color-line)); }
.badge-status { color: var(--color-muted); }
.badge-status[data-status="draft"] { color: var(--color-signal); }
.badge-status[data-status="archived"] { opacity: .7; }

/* ----------------------------------------------------------------------- karty */
.grid { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; list-style: none; margin: 0; padding: 0; }
/* auto-fit s minimálnou šírkou karty: počet stĺpcov si mriežka určí sama
   podľa toho, koľko miesta naozaj má. Na 1920px tak pribudne stĺpec bez
   ďalšieho breakpointu, na 1280px ostane rozumný počet. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* V bočnom stĺpci je miesta menej, tam sa karty nesmú lámať na pásiky. */
.with-aside .grid-3, .with-aside .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card {
  position: relative; background: var(--color-page); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card h3 { position: relative; font-size: 17px; line-height: 1.35; }
.card h3 a { color: var(--color-ink); }
.card h3 a:hover { color: var(--color-accent); text-decoration: none; }
.card p { position: relative; color: var(--color-muted); font-size: 15px; }
.card-foot {
  position: relative; margin-top: auto; padding-top: 6px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-muted);
}
.card-foot .stat { display: inline-flex; align-items: center; gap: 5px; }
.card-foot svg { inline-size: 13px; block-size: 13px; }

/* Kurzorové svetlo, len tam kde kurzor existuje */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .spot::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity .22s ease;
    background: radial-gradient(14rem 14rem at var(--cx, 50%) var(--cy, 50%), color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 70%);
  }
  .spot:hover::before { opacity: 1; }
}

.panel {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-panel); padding: 20px;
}
.panel-plain { background: transparent; }

/* ----------------------------------------------------------------- kód a prompt */
.codeblock { border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.codeblock-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--color-line); background: var(--color-panel);
  padding: 11px 16px; font-size: 15px; font-weight: 500;
}
.codeblock pre {
  margin: 0; overflow-x: auto; background: var(--color-panel);
  padding: 20px 16px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
@media (min-width: 640px) { .codeblock pre { padding: 20px; font-size: 14px; } }
.codeblock code { font: inherit; }

/* Premenná v prompte - vizuálne odlíšená, aby bolo vidieť čo treba doplniť */
.var {
  background: color-mix(in oklab, var(--color-signal) 22%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--color-signal) 55%, transparent);
  border-radius: 4px; padding: 1px 3px; font-weight: 500;
}

.copied { opacity: 0; transition: opacity .2s ease; font-family: var(--font-mono); font-size: 12px; color: var(--color-signal); }
.copied.on { opacity: 1; }

/* Anotovaný prompt na úvodnej stránke */
.seg {
  anchor-name: var(--anchor);
  border: 0; padding: 1px 3px; margin: 0 -3px; cursor: pointer;
  font: inherit; color: inherit; text-align: left; border-radius: 4px;
  background: color-mix(in oklab, var(--color-accent) 12%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--color-accent) 45%, transparent);
  transition: background .16s ease;
}
.seg:hover, .seg:focus-visible { background: color-mix(in oklab, var(--color-accent) 26%, transparent); }

.note {
  position: fixed; margin: 0; inset: auto; border: 1px solid var(--color-line);
  background: var(--color-page); color: var(--color-ink);
  border-radius: 10px; padding: 12px 14px; max-inline-size: min(34ch, calc(100vw - 32px));
  font-size: 14.5px; line-height: 1.55;
  box-shadow: 0 14px 34px color-mix(in oklab, var(--color-ink) 20%, transparent);
  opacity: 0; translate: 0 6px; transition: opacity .18s ease, translate .18s ease;
}
.note:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .note:popover-open { opacity: 0; translate: 0 6px; } }
@supports (anchor-name: --x) {
  @media (min-width: 640px) {
    .note {
      position: absolute; position-anchor: var(--anchor);
      inset-block-start: anchor(bottom); inset-inline-start: anchor(left);
      margin-block-start: 8px; position-try-fallbacks: flip-block, flip-inline;
    }
  }
}
@media (max-width: 639px) {
  .note { inset-block-end: calc(16px + env(safe-area-inset-bottom)); inset-inline: 16px; max-inline-size: none; }
}

/* Porovnanie vágne / konkrétne */
.compare { --pos: 50%; position: relative; min-height: 14rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-panel); touch-action: pan-y; }
.compare .pane { padding: 32px 20px; }
@media (min-width: 640px) { .compare .pane { padding: 48px 40px; } }
.compare .top { position: absolute; inset: 0; background: var(--color-panel); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare .handle { position: absolute; inset-block: 0; inset-inline-start: var(--pos); inline-size: 2px; background: var(--color-signal); translate: -1px 0; }
.compare input[type="range"] {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  appearance: none; background: transparent; cursor: ew-resize; margin: 0;
}
.compare input[type="range"]::-webkit-slider-thumb {
  appearance: none; inline-size: 40px; block-size: 40px; border-radius: 999px;
  background: var(--color-signal); border: 3px solid var(--color-page);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--color-ink) 25%, transparent);
}
.compare input[type="range"]::-moz-range-thumb {
  inline-size: 40px; block-size: 40px; border-radius: 999px;
  background: var(--color-signal); border: 3px solid var(--color-page);
}

/* Živá ukážka odpovede */
.demo { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-panel); overflow: hidden; box-shadow: 0 20px 60px -30px rgba(0,0,0,.45); }
.demo .bar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-line); padding: 12px 16px; }
.demo .dot { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--color-line); }
.demo .body { padding: 20px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; }
.caret::after {
  content: ""; display: inline-block; inline-size: 8px; block-size: 1.05em;
  translate: 0 .18em; background: var(--color-signal);
}
@media (prefers-reduced-motion: no-preference) {
  .caret::after { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

/* ------------------------------------------------------------------ formuláre */
.field { display: block; margin-bottom: 18px; }
.field > .label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.field > .hint { display: block; font-size: 13.5px; color: var(--color-muted); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], select, textarea {
  inline-size: 100%; font-family: inherit; font-size: 15px; color: var(--color-ink);
  background: var(--color-page); border: 1px solid var(--color-line);
  border-radius: 8px; padding: 11px 13px; min-height: 44px;
  transition: border-color .16s ease;
}
textarea { min-height: 140px; line-height: 1.6; resize: vertical; }
textarea.mono { font-family: var(--font-mono); font-size: 13.5px; }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: none; }
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--color-muted) 75%, transparent); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.checkbox input { inline-size: 18px; block-size: 18px; min-height: 0; margin-top: 3px; accent-color: var(--color-accent); }

fieldset { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 18px; margin: 0 0 18px; }
legend { padding: 0 8px; font-size: 15px; font-weight: 500; }

.form-grid { display: grid; gap: 0 20px; }
@media (min-width: 700px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.searchbar { position: relative; display: flex; gap: 10px; }
.searchbar input[type="search"] { min-height: 50px; font-size: 16px; padding-left: 44px; }
.searchbar .glass { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: var(--color-muted); pointer-events: none; }
.searchbar .glass svg { inline-size: 18px; block-size: 18px; display: block; }

/* Našepkávač. Vkladá ho JS hneď za input, preto je poziciovaný absolútne. */
.suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 12px;
  padding: 6px; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .45); overflow: hidden; }
.suggest[hidden] { display: none; }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  text-decoration: none; color: var(--color-ink); font-size: 15px; }
.suggest a:hover, .suggest a:focus-visible { background: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.suggest a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alert { border: 1px solid var(--color-line); border-radius: 8px; padding: 12px 15px; font-size: 15px; margin-bottom: 18px; }
.alert-error { color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger) 40%, var(--color-line)); background: color-mix(in oklab, var(--color-danger) 7%, transparent); }
.alert-ok { color: var(--color-signal); border-color: color-mix(in oklab, var(--color-signal) 40%, var(--color-line)); background: color-mix(in oklab, var(--color-signal) 7%, transparent); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* -------------------------------------------------------------------- tabuľky */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius); }
table { inline-size: 100%; border-collapse: collapse; font-size: 15px; min-inline-size: 34rem; }
thead { background: var(--color-panel); }
th { text-align: left; font-weight: 600; padding: 12px 16px; white-space: nowrap; }
td { padding: 12px 16px; color: var(--color-muted); vertical-align: top; }
td.strong { color: var(--color-ink); }
tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-line); }

/* --------------------------------------------------------------- rozbaľovanie */
details { border-bottom: 1px solid var(--color-line); }
details summary { display: flex; align-items: center; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-weight: 500; }
details summary::-webkit-details-marker { display: none; }
details summary .num {
  display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px;
  border: 1px solid var(--color-line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 14px; color: var(--color-muted);
}
details summary .txt { flex: 1; }
details .chev { flex: none; inline-size: 16px; block-size: 16px; color: var(--color-muted); transition: rotate .22s ease; }
details[open] .chev { rotate: 180deg; }
details .body { padding: 0 8px 20px 48px; font-size: 15px; color: var(--color-muted); }

/* ------------------------------------------------------------- obsah článku */
.prose { font-size: 16.5px; line-height: 1.72; max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.45em; margin-top: 2em; letter-spacing: -0.015em; }
.prose h3 { font-size: 1.15em; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose blockquote {
  margin-inline: 0; padding: 2px 0 2px 18px;
  border-left: 2px solid color-mix(in oklab, var(--color-accent) 55%, var(--color-line));
  color: var(--color-muted);
}
.prose code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: 4px; padding: 1px 5px;
}
.prose pre {
  background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 16px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin-block: 2em; }
.prose table { min-inline-size: 0; }
.prose img { border-radius: var(--radius); border: 1px solid var(--color-line); }

/* --------------------------------------------------------------- omrvinky */
.crumbs { font-size: 13.5px; color: var(--color-muted); margin-bottom: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--color-muted); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs .sep { opacity: .5; }

/* ------------------------------------------------------------ stránkovanie */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 2.5rem; }
.pager a, .pager span {
  min-inline-size: 40px; min-block-size: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line); border-radius: 8px;
  font-family: var(--font-mono); font-size: 14px; color: var(--color-muted); text-decoration: none;
}
.pager a:hover { color: var(--color-ink); border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line)); text-decoration: none; }
.pager [aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-page); }
.pager .gap { border: 0; min-inline-size: 20px; }

/* --------------------------------------------------------------- prázdny stav */
.empty {
  border: 1px dashed var(--color-line); border-radius: var(--radius);
  padding: 48px 24px; text-align: center; color: var(--color-muted);
}
.empty h3 { font-size: 17px; color: var(--color-ink); margin-bottom: 6px; }
.empty .btn { margin-top: 18px; }

/* ------------------------------------------------------------------ filtre */
.filters { display: flex; flex-direction: column; gap: 18px; }
.filters .group { display: flex; flex-direction: column; gap: 9px; }
.filters .group > .label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.filters .options { display: flex; flex-wrap: wrap; gap: 7px; }
@media (min-width: 960px) {
  .filters-aside { position: sticky; top: 84px; }
}

.toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--color-line);
}
.toolbar .count { font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); }
.sortbar { display: flex; flex-wrap: wrap; gap: 6px; }
.sortbar a { font-size: 14px; color: var(--color-muted); padding: 5px 10px; border-radius: 6px; }
.sortbar a:hover { color: var(--color-ink); background: var(--color-panel); text-decoration: none; }
.sortbar a[aria-current="true"] { color: var(--color-ink); background: var(--color-panel); }

/* ------------------------------------------------------------------ štatistiky */
.stats { display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); }
.stats .stat { display: inline-flex; align-items: center; gap: 6px; }
.stats svg { inline-size: 14px; block-size: 14px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.statgrid .cell { background: var(--color-page); padding: 16px; }
.statgrid .num { font-family: var(--font-mono); font-size: 22px; color: var(--color-ink); }
.statgrid .cap { font-size: 13px; color: var(--color-muted); margin-top: 2px; }

/* --------------------------------------------------------------------- zdieľanie */
.share { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------- pätička */
.site-footer { border-top: 1px solid var(--color-line); margin-top: 4rem; }
.site-footer .inner {
  padding-block: 32px calc(32px + env(safe-area-inset-bottom));
  font-size: 15px; color: var(--color-muted);
  display: grid; gap: 24px;
}
@media (min-width: 760px) { .site-footer .inner { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-ink); text-decoration: none; }
.site-footer .colophon { border-top: 1px solid var(--color-line); padding-block: 18px; font-size: 13.5px; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------------------------------------------------------------------- admin */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line); }
.admin-nav a { font-size: 14.5px; color: var(--color-muted); padding: 7px 12px; border-radius: 7px; }
.admin-nav a:hover, .admin-nav a[aria-current="true"] { color: var(--color-ink); background: var(--color-panel); text-decoration: none; }

/* ---------------------------------------------------------------------- tlač */
@media print {
  .site-header, .site-footer, .progress, .aurora, .dotfield, .share, .btn-group, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .codeblock pre { white-space: pre-wrap; }
}

/* =============================================================================
   Sekcie pridané k pôvodnej téme.
   Držia sa tých istých tokenov ako zvyšok, aby stránky vyzerali ako jeden web.
   ============================================================================= */

/* ------------------------------------------------------------- karty doplnky */
.card-note {
  margin-top: 8px; padding-left: 10px; font-size: 14px; color: var(--color-muted);
  border-left: 2px solid color-mix(in oklab, var(--color-accent) 45%, var(--color-line));
}
.tested {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; color: var(--color-muted);
}
.tested svg { inline-size: 14px; block-size: 14px; color: var(--color-accent); flex-shrink: 0; }
.tested-lg { margin-top: 14px; font-size: 14px; }
.badge-broken {
  color: var(--color-danger);
  border-color: color-mix(in oklab, var(--color-danger) 40%, var(--color-line));
  background: color-mix(in oklab, var(--color-danger) 8%, transparent);
}
.badge-broken svg { inline-size: 12px; block-size: 12px; }

/* --------------------------------------------------------------- pôvod forku */
.fork-note {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 14px; color: var(--color-muted);
}
.fork-note svg { inline-size: 15px; block-size: 15px; }

/* ------------------------------------------------ hlásenie "už nefunguje" */
.broken-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 14px 16px;
  border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-panel);
}
.broken-bar p { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.broken-bar svg { inline-size: 15px; block-size: 15px; flex-shrink: 0; }
.broken-bar.is-flagged {
  border-color: color-mix(in oklab, var(--color-danger) 40%, var(--color-line));
  background: color-mix(in oklab, var(--color-danger) 6%, transparent);
}
.broken-bar.is-flagged p { color: var(--color-danger); }

/* ------------------------------------------------------------------ nástroje */
.tool-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--color-line); border-radius: 14px;
  background: var(--color-panel);
}
.tool-head p { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

/* -------------------------------------------------------- pred a po vedľa seba */
.ba { display: grid; gap: 16px; }
@media (min-width: 720px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba-side { margin: 0; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; }
.ba-side figcaption {
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--color-line); background: var(--color-panel);
}
.ba-side pre { margin: 0; padding: 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }
.ba-bad figcaption { color: var(--color-danger); }
.ba-bad { border-color: color-mix(in oklab, var(--color-danger) 30%, var(--color-line)); }
.ba-good figcaption { color: var(--color-accent); }
.ba-good { border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-line)); }

/* -------------------------------------------------------------------- kroky */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 2rem 3.25rem; border-left: 1px solid var(--color-line); margin-left: 1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -1rem; top: -2px;
  inline-size: 2rem; block-size: 2rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-page); border: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 13px; color: var(--color-accent);
}
.steps > li h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 .5rem; }
.steps .codeblock { margin-top: 1rem; }

/* ------------------------------------------------------- editor krokov vo formulári */
.step-editor { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
.step-row {
  display: grid; grid-template-columns: 2rem 1fr; gap: 14px;
  padding: 16px; border: 1px solid var(--color-line); border-radius: 12px;
}
.step-num {
  inline-size: 2rem; block-size: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--color-panel); font-family: var(--font-mono); font-size: 13px; color: var(--color-muted);
}
.step-row .field:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ výber typu obsahu */
.type-picker { display: grid; gap: 10px; }
@media (min-width: 640px) { .type-picker { grid-template-columns: 1fr 1fr; } }
.type-option {
  display: block; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 12px;
  text-decoration: none; color: var(--color-ink); transition: border-color .16s ease, background .16s ease;
}
.type-option:hover { text-decoration: none; border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line)); }
.type-option.is-active {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 9%, transparent);
}
.type-option .t { display: block; font-weight: 500; }
.type-option .d { display: block; margin-top: 4px; font-size: 13px; color: var(--color-muted); line-height: 1.45; }

/* ---------------------------------------------------------------- kolekcie */
.collect-card { inline-size: min(20rem, calc(100vw - 32px)); }
.collect-row { margin: 0; }
.collect-row .btn-toggle {
  display: flex; align-items: center; gap: 9px; inline-size: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--color-ink); font: inherit; cursor: pointer;
}
.collect-row .btn-toggle:hover { background: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.collect-row .btn-toggle[aria-pressed="true"] { color: var(--color-accent); }
.collect-card .new-collection {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px;
  border-top: 1px solid var(--color-line); color: var(--color-muted); text-decoration: none; font-size: 14px;
}
.collect-card .new-collection:hover { color: var(--color-ink); text-decoration: none; }

/* -------------------------------------------------------------- tabuľka modelov */
.models-table table { font-size: 14px; }
.models-table td.stale { color: var(--color-danger); }
.models-table th { white-space: nowrap; }

/* ---------------------------------------------------------------- pásy a výzvy */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border: 1px solid var(--color-line); border-radius: 16px;
  background: var(--color-panel);
}
.cta-band h2 { margin: 0; }
.callout {
  padding: 14px 16px; border-radius: 12px; font-size: 15px;
  border: 1px solid color-mix(in oklab, var(--color-accent) 35%, var(--color-line));
  background: color-mix(in oklab, var(--color-accent) 7%, transparent);
}
.callout svg { inline-size: 15px; block-size: 15px; vertical-align: -2px; }

/* ------------------------------------------------------------ moderačná fronta */
.queue-item {
  padding: 18px; border: 1px solid var(--color-line); border-radius: 14px; margin-bottom: 14px;
}
.queue-item h3 { font-family: var(--font-display); font-size: 1.15rem; }
.queue-item h3 a { color: var(--color-ink); }

/* ---------------------------------------------------------- rozvrhnutie sekcií */
.section-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .section-grid { grid-template-columns: repeat(4, 1fr); } }
.section-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border: 1px solid var(--color-line); border-radius: 14px; text-decoration: none; color: var(--color-ink);
  transition: border-color .16s ease, translate .16s ease;
}
.section-tile:hover {
  text-decoration: none; translate: 0 -2px;
  border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line));
}
.section-tile .ico { color: var(--color-accent); }
.section-tile .ico svg { inline-size: 20px; block-size: 20px; }
.section-tile .t { font-family: var(--font-display); font-size: 1.05rem; }
.section-tile .d { font-size: 13.5px; color: var(--color-muted); line-height: 1.45; }
.section-tile .n { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }

.form-grid-3 { display: grid; gap: 16px; }
@media (min-width: 720px) { .form-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------- inštrukcie a cheatsheety */
.badge-role {
  color: var(--color-signal);
  border-color: color-mix(in oklab, var(--color-signal) 40%, var(--color-line));
}
.sheet-table td code { font-size: 13.5px; white-space: nowrap; }
.sheet-table td:first-child { width: 1%; }

.sheet-editor { border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.sheet-head, .sheet-row { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; }
.sheet-head {
  background: var(--color-panel); border-bottom: 1px solid var(--color-line);
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted);
}
.sheet-head span { padding: 10px 12px; }
.sheet-row + .sheet-row { border-top: 1px solid var(--color-line); }
.sheet-row input {
  min-height: 44px; border: 0; border-radius: 0; background: transparent;
  border-left: 1px solid var(--color-line);
}
.sheet-row input:first-child { border-left: 0; }
.sheet-row input:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (max-width: 720px) {
  .sheet-head { display: none; }
  .sheet-row { grid-template-columns: 1fr; }
  .sheet-row input { border-left: 0; border-top: 1px solid var(--color-line); }
  .sheet-row input:first-child { border-top: 0; }
}

/* ------------------------------------------------------ generátor a robots */
.builder .robots-group, .robots-group {
  border: 1px solid var(--color-line); border-radius: 12px; padding: 18px; margin-bottom: 16px;
}
.robots-group legend { padding: 0 8px; font-size: 14px; font-weight: 500; }
.robots-picker .checkbox { align-items: flex-start; margin-bottom: 10px; }
.robots-picker .checkbox .mono { display: block; }

/* Bunky štatistík, ktoré sú odkazom, musia vyzerať klikateľne. */
.statgrid a.cell { display: block; text-decoration: none; color: inherit; transition: background .16s ease; }
.statgrid a.cell:hover { background: color-mix(in oklab, var(--color-accent) 8%, var(--color-page)); text-decoration: none; }
.statgrid a.cell:hover .cap { color: var(--color-accent); }