/* WEBLOOK1 — design systém GridGarden „Smrekovec a zem" (zdroj: memory/studio-ux-webdesign1-ANALYZA-2026-09-26.md §b).
 * Jediný zdroj tokenov celého webu (domov, téma, stránky). Nové farby/veľkosti sa pridávajú SEM, nie do komponentov.
 * Kontrast (WCAG 2.x) overený skriptom v rešerši: ink 14,39 · body 8,77 · muted 5,40 na paper; biela na leaf 5,48;
 * larch-ink 5,83 na paper; paper na soil 15,80 (DARKGREEN2). ⛔ --line ani --patina nie sú hranica ovládacieho prvku, ⛔ --sun na svetlom.
 * Písmo (FONTSYS1, owner 6. 10. 2026 — variant 1 z _mockup-hero-pisma-v2.html, „Apple typografia" ZAP):
 *  SYSTÉMOVÉ písmo zariadenia, ako apple.com — web nesťahuje ŽIADNY súbor písma (0 kB, žiadny preload, žiadna výmena = žiadny posun).
 *  Mac / iPhone / iPad = SF Pro (Display pre nadpisy, Text pre text) · Windows 11 = Segoe UI Variable · Windows 10 = Segoe UI ·
 *  Android / ChromeOS = Roboto · Linux = podľa distribúcie (Ubuntu, Cantarell, DejaVu Sans…). Všetky majú diakritiku 10 jazykov webu.
 *  ⛔ Nepridávať @font-face s url() ani preload písma (test:lang FONTSYS1 = FAIL). Čísla/ceny = text písmo + tabular-nums, mono len kód.
 *  Sadzba (mockup v2 1:1): nadpisy 600, prestrkanie −0,02 em, riadkovanie 1,07 (display) / 1,1 (nadpisy), text 17 px / 1,47 / −0,022 em,
 *  podnadpis (lead) 21 px / 1,38 sivý, nadtitulok bez mono a bez verzálok.
 * ⛔ max-width nadpisov a textu NIE v `ch` (WEBCLS1) — em/px. --mw-* nižšie sú šírky zmerané pôvodne na Bricolage (FONTFIX1);
 *  ostávajú ako em/px hranice zalomenia (rozloženie sa nemení). */
:root {
  /* ── farby */
  /* KONCEPTA-DS (8. 10. 2026, koncept A schválený ownerom): farby z _KONCEPTA/…/assets/a-design-system.css.
   * Kontrast (WCAG 2.x, prepočítané): ink 13,8 · body 7,3 · muted 4,9 na paper; biela na leaf 5,6; on-dark 10,7 a on-dark-muted 8,0 na soil;
   * larch-ink 6,0 na paper; soil na sun 7,5. --line-strong 3,1 = hranica ovládacieho prvku (≥ 3). ⛔ --sun na svetlom (len plocha s --soil textom). */
  --paper: #F7F3E8;
  --surface: #FFFDF6;
  --ink: #102A22;
  --body: #3D554B;
  --muted: #567060;
  --line: #CCD5C9;
  --line-strong: #798F7D;
  --leaf: #08765B;
  --leaf-deep: #065B44;
  --leaf-mist: #DCEBDD;  /* A --mint */
  --mint-2: #BCD9C4;     /* A --mint2: hover karty, čiara krokov */
  --card-tint: #EEF2E8;  /* A pozadie produktovej karty menu */
  --larch: #B96335;      /* A --wood */
  --larch-ink: #96451F;
  --larch-mist: #F3E2D3;
  --soil: #073F32;   /* A --deep „tmavý smaragd" (predtým DARKGREEN2 Ihličie #0A1B12) */
  --soil-2: #0B4A3B; /* bublina AI chatu: soil L+6 % */
  /* rgb trojice pre priehľadnosti (rgb(var(--x-rgb) / .9)) */
  --paper-rgb: 247 243 232;
  --surface-rgb: 255 253 246;
  --ink-rgb: 16 42 34;
  --on-dark-rgb: 247 243 232;
  --soil-rgb: 7 63 50;
  --scrim-rgb: 4 14 8; /* clona hero (home.css), soil L−5,5 % v tom istom odtieni */
  --patina: #8C8F87;
  --sun: #F4C94F;      /* A --yellow: akcent, tlačidlo --sun (text --soil 7,9) */
  --on-dark: #F7F3E8;
  --on-dark-muted: #C5D9CA;
  /* WEBSTYLE2: farby, ktoré boli natvrdo v komponentoch (STYLEAUDIT1 nález 19, 14) */
  --mint: #9FD8BD;     /* ikony na tmavom (11,1 na soil) */
  --mist: #E8EEE1;     /* pozadie náhľadov (okno Studia, contain obrázky) — A */
  --paper-2: #EDF3E7;  /* lišta okna Studia — A */
  --wood-dark: #7A4B22; /* kolíky izometrického záhona (iso-bed) */
  --star: #C2840F;     /* hviezdičky hodnotenia na svetlom (--sun na svetlom ⛔) */
  --shadow-rgb: 8 56 43; /* tiene v odtieni smaragdu (A) */
  /* zrno tmavých plôch (DARKGREEN2, variant B): SVG šum inline = 0 požiadaviek, vrstva background → CLS 0, LCP bez zmeny */
  --grain-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.320 0 0 0 -0.128'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;

  /* ── písmo (FONTSYS1: systémové, viď hlavičku) */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; /* len kód — ceny/čísla NIE (tabular-nums) */
  --fs-caption: 13px;                                   /* 13 */
  --fs-small: clamp(14px, 13.62px + .095vw, 15px);   /* 14/15 */
  --fs-body: 17px;                                      /* FONTSYS1: 17 (Apple) */
  --fs-lead: 21px;                                      /* FONTSYS1: 21 (Apple podnadpis) */
  /* KONCEPTA-DS: veľkosti nadpisov A (h3 24/36 · h2 obsahu 36/66 · h1 podstránky 46/88); --fs-display (hero domova) mení KONCEPTA-DOMOV */
  --fs-h3: clamp(24px, 2.4vw, 36px);
  --fs-h2: clamp(36px, 4.8vw, 66px);
  --fs-h1: clamp(46px, 6.6vw, 88px);
  --fs-display: clamp(44px, 24.69px + 4.952vw, 96px);   /* 44/96 */
  /* KONCEPTA-DS (owner 8. 10., koncept A): sadzba A — nadpisy 650, tesné riadkovanie a prestrkanie, text 17 px / 1,48 / −0,018 em
   * (predtým FONTSYS1 „Apple" 600 / 1,07 / −0,02 em). Písmo ostáva systémové (FONTSYS1). */
  --lh-display: .96;
  --lh-head: 1;
  --lh-body: 1.48;
  --lh-lead: 1.38;
  --track-display: -.055em;
  --track-head: -.045em;
  --track-body: -.018em;
  --track-lead: -.012em;
  --w-display: 650;
  --w-head: 650;
  --sub: #6C6C71; /* sivý podnadpis: Apple #6E6E73 má na paper 4,496 (pod AA 4,5) → o odtieň tmavší, 4,63 */
  /* FONTFIX1 — šírky nadpisov v Bricolage NIE v `ch` (mení sa s načítaním písma = posun). Hodnota = presne to isté, čo dávalo
   * N·ch Bricolage pri danej váhe a veľkosti (opsz = veľkosť → nelineárne), zmerané v Chrome po 0,25 px a zložené z úsečiek
   * cez min() (odchýlka ≤ 0,1 px). Názov = kde · váha · N ch. em sa ráta na prvku, kde sa premenná použije. */
  --mw-claim: min(calc(7.7489em + 26.09px), calc(7.6147em + 32.77px), calc(7.4833em + 40.03px), calc(7.3499em + 48.14px), calc(7.215em + 57.1px), calc(7.0841em + 66.53px), calc(6.9506em + 76.88px), calc(6.8125em + 88.38px), calc(6.6763em + 100.49px), calc(6.5915em + 108.53px)); /* 780 · 13ch · 44–96 px */
  --mw-claim-long: min(calc(9.1129em + 22.61px), calc(8.9683em + 28.86px), calc(8.8243em + 35.85px), calc(8.6794em + 43.63px), calc(8.5351em + 52.15px), calc(8.3909em + 61.42px), calc(8.2463em + 71.46px), calc(8.1017em + 82.27px)); /* 780 · 15ch · 38–80 */
  --mw-claim-xlong: min(calc(10.456em + 20.69px), calc(10.301em + 26.74px), calc(10.1446em + 33.62px), calc(9.9892em + 41.23px), calc(9.8331em + 49.66px), calc(9.6764em + 58.91px), calc(9.537em + 67.83px)); /* 780 · 17ch · 34–68 */
  --mw-end: min(calc(7.15em + 24.21px), calc(7.0182em + 30.8px), calc(6.8882em + 38.08px), calc(6.7596em + 46.02px), calc(6.6274em + 54.98px), calc(6.4948em + 64.76px), calc(6.3632em + 75.25px), calc(6.2335em + 86.37px), calc(6.1219em + 96.59px)); /* 780 · 12ch · 44–96 */
  --mw-disp-20: min(calc(11.9444em + 39.13px), calc(11.7791em + 47.15px), calc(11.6138em + 55.91px), calc(11.4484em + 65.42px), calc(11.2849em + 75.56px), calc(11.1182em + 86.64px), calc(10.9533em + 98.35px), calc(10.7898em + 110.7px), calc(10.6231em + 124.03px), calc(10.4582em + 137.96px), calc(10.2929em + 152.68px), calc(10.1672em + 164.43px)); /* 780 · 20ch · 44–96 */
  --mw-h1-20: min(calc(12.1604em + 29.26px), calc(11.9973em + 36.19px), calc(11.8347em + 43.84px), calc(11.6724em + 52.19px), calc(11.5084em + 61.38px), calc(11.3453em + 71.25px), calc(11.1836em + 81.76px), calc(11.0552em + 90.68px)); /* 760 · 20ch · 38–72 */
  --mw-h1-18: min(calc(10.9402em + 26.49px), calc(10.786em + 33.09px), calc(10.6306em + 40.47px), calc(10.4764em + 48.53px), calc(10.3206em + 57.4px), calc(10.1668em + 66.9px), calc(10.011em + 77.26px), calc(9.924em + 83.46px)); /* 760 · 18ch · 38–72 */
  --mw-h2-20: min(calc(12.424em + 18.17px), calc(12.2589em + 23.91px), calc(12.0931em + 30.46px), calc(11.9456em + 36.99px)); /* 700 · 20ch · 30–48 */
  --measure: 45.29em;

  /* ── mriežka a rytmus (12 / 8 / 4 stĺpcov) */
  --cols: 4;
  --gutter: 16px;
  --page-pad: clamp(16px, 4vw, 40px); /* A .wrap: 16 px telefón, 40 px desktop */
  --content: 1360px;                  /* A .wrap max 1360 px */
  --section: clamp(64px, 8vw, 128px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── tvar */
  --r-tag: 6px;
  --r-ctl: 12px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-xl: 46px;   /* A veľké plochy: pätička, tmavé pásy, hero (telefón 26–28 px) */
  --sh-1: 0 1px 2px rgb(var(--shadow-rgb) / .06);
  --sh-2: 0 8px 24px -8px rgb(var(--shadow-rgb) / .18);
  --sh-3: 0 20px 48px -12px rgb(var(--shadow-rgb) / .28);
  --sh-a: 0 28px 80px rgb(var(--shadow-rgb) / .16); /* A --shadow: menu, plávajúce prvky */
  --sh-btn: 0 8px 24px rgb(8 118 91 / .17);          /* A tieň zeleného tlačidla (leaf) */

  /* ── pohyb */
  --t-fast: 120ms;
  --t-state: 200ms;
  --t-enter: 320ms;
  --t-reveal: 560ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1); /* podpis: 1 prekmit = „zacvaknutie" dielu */

  /* ── chrome */
  --hdr-bar-h: 66px; /* A: telefón 66, desktop 74 — výška lišty hlavičky */
  --sb-h: 0px; /* PRIVFLIP1: pruh predajcu nad lištou (lib/seller-banner.ts), bez pruhu 0 */
  --hdr-h: calc(var(--hdr-bar-h) + var(--sb-h)); /* celá pevná hlavička = lišta + pruh; od nej sa odsadzuje obsah */
  --fcta-h: 0px;
}
@media (min-width: 700px) { :root { --cols: 8; --gutter: 20px; } }
@media (min-width: 1100px) { :root { --cols: 12; --gutter: 24px; --hdr-bar-h: 74px; } }
/* PRIVFLIP1: výška pruhu predajcu, keď je zapnutý (telefón 2 riadky). Zapína ju inline štýl pruhu `:root{--sb-h:var(--sb-h-on)}`
 *  (lib/seller-banner.ts) — nie :has(), lebo kritické CSS (beasties) ho na podstránkach zahodilo a pruh mal výšku 0. */
:root { --sb-h-on: 48px; }
@media (min-width: 700px) { :root { --sb-h-on: 34px; } }

/* zrno vypnuté pri požiadavke na menej efektov / vyšší kontrast: ostane čistá --soil */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  :root { --grain-layer: linear-gradient(transparent, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-state: 0ms; --t-enter: 150ms; --t-reveal: 150ms; --ease-snap: linear; }
}

/* Veľkosti sú v px (nie rem): Dawn téma má html { font-size: 62,5 % }, domov 100 % — px dáva rovnaký výsledok na oboch. */
/* ── základ dokumentu (platí pre domov aj tému) */
.gg-ds *, .gg-ds *::before, .gg-ds *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hdr-h) + 16px); scroll-padding-bottom: 96px; -webkit-text-size-adjust: 100%; }
body.gg-ds {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gg-ds :where(h1, h2, h3, h4) { color: var(--ink); font-family: var(--font-display); font-weight: var(--w-head); line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.gg-ds :where(p) { text-wrap: pretty; }
.gg-ds :where(a) { color: var(--leaf-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.gg-ds :where(a:hover) { text-decoration-thickness: 2px; }
/* KONCEPTA-DS: fokus hrubší ako A (3 px), ale na svetlom tmavozelený — žltý A na papieri má 1,4 : 1 (pod 3 : 1); žltý len na tmavom */
.gg-ds :where(:focus-visible) { outline: 3px solid var(--leaf-deep); outline-offset: 3px; border-radius: 6px; }
.gg-ds .on-dark :where(:focus-visible), .gg-ds.on-dark :where(:focus-visible) { outline-color: var(--sun); }
.gg-ds ::selection { background: var(--leaf-mist); color: var(--ink); }
.gg-ds .mono, .gg-ds .num { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.gg-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── tlačidlá (jeden komponent pre celý web) — KONCEPTA-DS: pilulka A (.btn): 50 px, tučné, zelený tieň, pri hoveri hore o 2 px */
.gg-btn {
  --b-bg: var(--leaf); --b-fg: #fff; --b-bd: var(--leaf); --b-sh: var(--sh-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--b-bg); color: var(--b-fg) !important; border: 1px solid var(--b-bd); box-shadow: var(--b-sh);
  font: 700 16px/1.1 var(--font); letter-spacing: -.018em; text-decoration: none !important;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-state) var(--ease-out), transform var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
.gg-btn:hover { --b-bg: var(--soil); --b-bd: var(--soil); transform: translateY(-2px); }
.gg-btn:active { transform: translateY(0) scale(.99); }
/* HOVERTRAS1: tlačidlo sa pri hoveri dvíha o 2 px → bez mostíka by ho myš pri spodnom okraji pustila a znova chytila (trasenie).
 * Neviditeľný pás pod tlačidlom drží hover. Kotví sa na tlačidlo cez jeho transform (žiadne position: relative → nemení layout ani
 * absolútne tlačidlá). .hdoor__go vynechané: nedvíha sa a jeho ::after robí klik cez celú kartu (short.css). */
.gg-btn:not(.hdoor__go):hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }
@media (max-width: 559px) { .gg-btn { white-space: normal; text-align: center; padding-block: 8px; } }
.gg-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.gg-btn--ghost { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-strong); --b-sh: none; }
.gg-btn--ghost:hover { --b-bg: var(--ink); --b-fg: var(--paper); --b-bd: var(--ink); }
.gg-btn--sun { --b-bg: var(--sun); --b-fg: var(--soil); --b-bd: var(--sun); --b-sh: none; } /* A .btn.yellow */
.gg-btn--sun:hover { --b-bg: #fff; --b-bd: #fff; --b-fg: var(--soil); }
.gg-btn--light { --b-bg: #fff; --b-fg: var(--soil); --b-bd: #fff; --b-sh: none; }
.gg-btn--light:hover { --b-bg: #fff; --b-bd: #fff; }
.gg-btn--glass { --b-bg: rgb(255 255 255 / .12); --b-fg: #fff; --b-bd: rgb(255 255 255 / .55); --b-sh: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gg-btn--glass:hover { --b-bg: rgb(255 255 255 / .22); --b-bd: #fff; }
/* WEBSTYLE2 (nález 12): JEDNO pravidlo pre tlačidlo na tmavom — primárne je svetlé (papier), zelené na Ihličí nie;
 * sekundárne ostáva glass/odkaz. Platí pre každú plochu .on-dark (domov #ako, profíci, Pre firmy, AI karta). */
.on-dark .gg-btn:not(.gg-btn--glass):not(.gg-btn--sun) { --b-bg: var(--paper); --b-fg: var(--ink); --b-bd: var(--paper); --b-sh: none; }
.on-dark .gg-btn:not(.gg-btn--glass):not(.gg-btn--sun):hover { --b-bg: #fff; --b-bd: #fff; }
/* TMAVYTEXT1 (owner 12. 10.: „na každom tmavom pozadí biely text“): tmavé karty bez triedy .on-dark (konfigurátor domova,
 * tmavé balíčky a AI karty) — obrysové tlačidlo = svetlý text + svetlý obrys, odkaz svetlý, fokus žltý. Jeden zoznam tu;
 * nová tmavá karta = pridať sem (alebo dať .on-dark). :where = nízka špecifickosť, vlastné pravidlo komponentu má prednosť. */
:where(.ka-panel, .ka-plan--plus, .ka-plan--dark, .ka-ai-mode--dark, .ka-ai-door--dark, .ka-wallet, .gg-plate--dark) .gg-btn--ghost { --b-bg: transparent; --b-fg: var(--on-dark); --b-bd: rgb(var(--on-dark-rgb) / .6); }
:where(.ka-panel, .ka-plan--plus, .ka-plan--dark, .ka-ai-mode--dark, .ka-ai-door--dark, .ka-wallet, .gg-plate--dark) .gg-btn--ghost:hover { --b-bg: var(--paper); --b-fg: var(--ink); --b-bd: var(--paper); }
:where(.ka-panel, .ka-plan--plus, .ka-plan--dark, .ka-ai-mode--dark, .ka-ai-door--dark, .ka-wallet, .gg-plate--dark) a:not(.gg-btn) { color: var(--on-dark); }
.gg-ds :where(.ka-panel, .ka-plan--plus, .ka-plan--dark, .ka-ai-mode--dark, .ka-ai-door--dark, .ka-wallet, .gg-plate--dark) :where(:focus-visible) { outline-color: var(--sun); }
.gg-link { font-weight: 500; color: var(--leaf-deep); text-decoration: none; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
.gg-link:hover { text-decoration: underline; }
.gg-link .arr { transition: transform var(--t-fast) var(--ease-out); }
.gg-link:hover .arr { transform: translateX(3px); }

/* ── čipy a štítky */
.gg-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: 500 12px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.gg-chip--free { background: var(--leaf-mist); color: var(--leaf-deep); border-color: transparent; }
.gg-chip--plus { background: var(--larch-mist); color: var(--larch-ink); border-color: transparent; }
.gg-chip--soon { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }
.gg-chip--dark { background: rgb(var(--ink-rgb) / .78); color: #fff; border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gg-price { font-family: var(--font); font-variant-numeric: tabular-nums; background: var(--larch-mist); color: var(--larch-ink); border-radius: var(--r-tag); padding: 2px 8px; font-weight: 600; }

/* ── nadpisy sekcií */
/* KONCEPTA-DS: nadtitulok A (.eyebrow) — 13 px tučný, zelený, čiarka 22 px pred ním, bez verzálok (FONTSYS1) */
.gg-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 750 13px/1.2 var(--font); letter-spacing: .03em; text-transform: none; color: var(--leaf-deep); }
.gg-eyebrow::before { content: ''; flex: none; width: 22px; height: 2px; background: currentColor; }
.on-dark .gg-eyebrow { color: var(--sun); }

/* ── WEBSCALE1 (owner 12. 10. 2026: „na veľkom monitore je to dosť malé“) — automatická mierka pre veľké obrazovky.
 * Celý web je v px (Dawn má html 62,5 % → rem nejde), preto mierka = `zoom` na <html>: na 2560 vyzerá web ako na 1600 „zväčšený“
 * (písmo, lišta, tlačidlá, šírka obsahu --content rastú spolu), nie ako úzky ostrov. Pod 1760 px šírky sa NEMENÍ NIČ
 * (mobil, tablet, notebook, 1440 aj 1680 px ostávajú pixel po pixeli ako predtým).
 * z = min(šírka / 1600, výška / 780) zaokrúhlené nadol na stupne 0,1 (od 1,8 po 0,2) → 1920×~950 = 1,2 · 2560×~1310 = 1,6 ·
 * 3440×~1310 (ultrawide) = 1,6 (strop podľa výšky, aby sa obsah zmestil na výšku) · 4K s DPR 1 = 2,4 · 4K s DPR 2 = ako 1920.
 * Zoom prehliadača (Ctrl +/−) zmenšuje CSS šírku okna → mierka sa sama zníži; nič sa neblokuje (zväčšenie, výber písma, čítačky).
 * `zoom` násobí AJ jednotky okna (vw/vh/svh/dvh) → pravidlá, kde výška/šírka závisí od okna bez stropu v px, sú nižšie prepočítané
 * cez / var(--gg-z) (:root = vyššia špecificita než originál; platí len pri zapnutej mierke). JS, ktoré číta getBoundingClientRect
 * a píše px do štýlu, delí mierkou (fx.js, gg3d scene.mjs). ⛔ Nové pravidlo s 100vh/100svh/100vw bez stropu → doplniť sem. */
:root { --gg-z: 1; }
@media screen and (min-width: 1760px) and (min-height: 858px) { :root { --gg-z: 1.1; } }
@media screen and (min-width: 1920px) and (min-height: 936px) { :root { --gg-z: 1.2; } }
@media screen and (min-width: 2080px) and (min-height: 1014px) { :root { --gg-z: 1.3; } }
@media screen and (min-width: 2240px) and (min-height: 1092px) { :root { --gg-z: 1.4; } }
@media screen and (min-width: 2400px) and (min-height: 1170px) { :root { --gg-z: 1.5; } }
@media screen and (min-width: 2560px) and (min-height: 1248px) { :root { --gg-z: 1.6; } }
@media screen and (min-width: 2880px) and (min-height: 1404px) { :root { --gg-z: 1.8; } }
@media screen and (min-width: 3200px) and (min-height: 1560px) { :root { --gg-z: 2; } }
@media screen and (min-width: 3520px) and (min-height: 1716px) { :root { --gg-z: 2.2; } }
@media screen and (min-width: 3840px) and (min-height: 1872px) { :root { --gg-z: 2.4; } }
@media screen and (min-width: 1760px) and (min-height: 858px) {
  html { zoom: var(--gg-z); }
  :root .gg-mega { max-height: calc(100dvh / var(--gg-z) - var(--hdr-h)); }
  :root .art__toc { max-height: calc(100vh / var(--gg-z) - var(--hdr-h) - 48px); }
  :root .st[data-demo] { height: clamp(440px, calc(100vh / var(--gg-z) - 380px), 600px); }
  :root .ai[data-demo] { min-height: clamp(420px, calc(100vh / var(--gg-z) - 380px), 560px); }
  :root .ka .ka-hero { min-height: calc(100svh / var(--gg-z) - 30px); }
  :root .ka-hero__grid { min-height: calc(100svh / var(--gg-z) - var(--hdr-h) - 30px); }
  :root .hero:not(.ka-hero) { min-height: max(520px, min(100svh / var(--gg-z), 56.25vw / var(--gg-z))); }
  :root .hero__chips { left: max(var(--page-pad), calc((100vw / var(--gg-z) - var(--content)) / 2)); }
  :root .gi-404 { min-height: min(100svh / var(--gg-z), 880px); }
  :root .gg-cc { max-height: calc(100vh / var(--gg-z) - 32px); }
  :root #gg-cc.gg-cc { max-height: calc(100svh / var(--gg-z) - var(--hdr-h) - 32px); }
  :root .gg-refg__lightbox img { max-width: calc(92vw / var(--gg-z)); max-height: calc(80vh / var(--gg-z)); }
  :root .gg-lb__stage { max-width: min(1100px, 94vw / var(--gg-z)); max-height: calc(88vh / var(--gg-z)); }
  :root .gg-lb__img { max-height: calc(80vh / var(--gg-z)); }
  :root .ka-dialog { max-height: calc(90vh / var(--gg-z)); }
  :root .ka-dialog img { max-height: calc(78vh / var(--gg-z)); }
  :root .ka-dlg { max-height: calc(90dvh / var(--gg-z)); }
  :root .shop__body { min-height: calc(70svh / var(--gg-z)); }
  :root body.gg-theme main { min-height: calc(50vh / var(--gg-z)); }
}