:root{
  /* Dizajn systém (PLAN-DIZAJN, sekcia 2). Hodnoty sa menia len tu; ostatné súbory používajú premenné. */

  /* plochy: pozadie, karta, zvýšená plocha, tmavý rám. Hĺbka bez tieňov, len svetlejšia plocha. */
  --bg:#0a0a0a;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --surface-3:#2a2a2a;
  --card:var(--surface);

  /* text: hlavný, druhotný (malý text, kontrast 9,7:1 na pozadí), štítky 12 px a viac (5,7:1). #7a7a7a a tmavšie nikdy na texte. */
  --fg:#f5f5f5;
  --text:var(--fg);
  --text-2:#b5b5b5;
  --text-3:#8a8a8a;
  --mute:var(--text-2);

  /* čiary a rámy (len obrys, nie text) */
  --axis:#2e2e2e;
  --line:var(--axis);
  --outline:#3d3d3d;
  --field:#7a7a7a;
  --focus:#f5f5f5;

  /* jediný akcent: farba kurzora Kód z enginu; tlačidlo Navrhnúť web, fokus a stav "spustené" */
  --accent:#b48cff;
  --accent-hi:#cdb0ff;
  --accent-lo:#9a6df0;
  --accent-ink:#0a0a0a;

  /* písmo */
  --f-sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* škála písma: štítok 12, malý 15, základ 17, lead 22, H3 32, H2 48; H1 si berie clamp podľa stránky */
  --fs-xs:12px;
  --fs-sm:15px;
  --fs-md:17px;
  --fs-lg:22px;
  --fs-xl:32px;
  --fs-2xl:48px;

  /* rohy: vstupy a čipy 8, karty a panely 20, tlačidlá a pilulky 999. Rámy telefónov sú zariadenie, mimo škály. */
  --r-1:8px;
  --r-2:20px;
  --r-pill:999px;

  /* medzery, 8-bodová škála */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:32px;
  --sp-6:48px;
  --sp-7:72px;
  --sp-8:120px;
  --gut:22px;
  --scene-gap:96px;
  --bar-h:60px;
  --safe:env(safe-area-inset-bottom,0px);

  /* pohyb: hover 150, otvorenie 300, scény a pruhy 600 ms; dva easingy */
  --dur-1:150ms;
  --dur-2:300ms;
  --dur-3:600ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.25,1);
}
@media (min-width:700px){:root{--gut:40px;--scene-gap:112px}}
@media (min-width:900px){:root{--gut:48px;--bar-h:0px;--scene-gap:160px}}
/* Prechod medzi stránkami (View Transitions API, medzidokumentový). Bez podpory prehliadač navigáciu urobí obyčajne.
   Starý obraz rýchlo (120 ms) zbledne, nový sa prelína a vsunie o pár pixelov (normálne miešanie, bez plus-lighter, ktoré pri nerovnakých časoch prežiari): spolu 200 ms, smer podľa poradia stránok (html[data-vt], nastaví ho inline skript v hlavičke). */
@view-transition{navigation:auto}
::view-transition{background:var(--bg)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.2s;animation-timing-function:var(--ease);animation-fill-mode:both}
::view-transition-group(root){animation-duration:.2s}
::view-transition-old(root){animation-name:vt-out;animation-duration:.12s;animation-timing-function:linear}
::view-transition-new(root){animation-name:vt-in}
:root[data-vt="back"]::view-transition-old(root){animation-name:vt-out-b}
:root[data-vt="back"]::view-transition-new(root){animation-name:vt-in-b}
@keyframes vt-out{to{opacity:0;transform:translateX(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateX(18px)}}
@keyframes vt-out-b{to{opacity:0;transform:translateX(10px)}}
@keyframes vt-in-b{from{opacity:0;transform:translateX(-18px)}}
::view-transition-group(post-title){animation-duration:.5s;animation-timing-function:var(--ease-io)}
/* lišta a hlavička stoja, pri prechode sa nemenia ani nemigajú */
.bar{view-transition-name:bar}
.top{view-transition-name:top}
::view-transition-group(bar),::view-transition-group(top){animation:none}
::view-transition-old(bar),::view-transition-old(top){display:none}
::view-transition-new(bar),::view-transition-new(top){animation:none;mix-blend-mode:normal}
/* znížený pohyb: bez prechodu, obyčajná navigácia */
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}