.js .h-vstup { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--k, 0) * 110ms); }
.js .h-vstup.je-videt { opacity: 1; transform: none; }

.h-dlazdice { background: var(--ht-white); border: 1px solid var(--ht-line); border-radius: 20px; box-shadow: var(--ht-sh-card); min-width: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; }
@media (hover: hover) { .h-dlazdice:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(11, 45, 59, 0.05), 0 26px 50px -26px rgba(11, 45, 59, 0.4); } }

.h-pocet { font-variant-numeric: tabular-nums; }

.h-mini { padding: 1em 1.1em; display: grid; gap: 0.6em; font-size: 0.92em; text-align: left; min-height: 7.4em; align-content: center; color: var(--ht-navy); }
.h-tok { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; font-size: 0.78em; font-weight: 600; }
.h-tok span { padding: 0.42em 0.55em; border-radius: 0.55em; background: var(--ht-mist); border: 1px solid var(--ht-line); white-space: nowrap; }
.h-tok i { font-style: normal; color: #9fb3ba; }
.h-tok .slabe { background: #fff4ea; border-color: var(--ht-spark); color: #8a4f12; }
.h-mini__pozn { margin: 0; font-size: 0.74em; font-weight: 600; color: #a35f1d; }
.h-mini__meta { display: flex; justify-content: space-between; gap: 0.8em; font-size: 0.72em; color: var(--ht-slate); }
.h-mini__meta b { color: var(--ht-laguna-ink); font-weight: 600; }
.h-mini__titul { margin: 0; font-family: var(--ht-f-head); font-weight: 700; font-size: 0.98em; line-height: 1.25; }
.h-mini__stav { display: grid; }
.h-mini__stav > * { grid-area: 1 / 1; }
.h-mini__akce { display: flex; gap: 0.4em; font-size: 0.74em; font-weight: 600; }
.h-mini__akce span { padding: 0.45em 0.85em; border-radius: 999px; border: 1px solid var(--ht-line); background: var(--ht-white); }
.h-mini__akce span:first-child { background: var(--ht-navy); border-color: var(--ht-navy); color: var(--ht-white); }
.h-mini__ok { margin: 0; align-self: center; font-size: 0.76em; font-weight: 600; color: #217a52; opacity: 0; }
.h-mini__radek { display: flex; align-items: end; justify-content: space-between; gap: 0.8em; }
.h-mini__cislo { margin: 0; font-family: var(--ht-f-head); font-weight: 800; font-size: 1.9em; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.h-mini__cislo i { font-style: normal; font-weight: 500; color: #9fb3ba; margin: 0 0.15em; }
.h-mini__cislo b { color: var(--ht-laguna); }
.h-mini__cara { flex: none; width: 6.5em; height: auto; overflow: visible; }
.h-mini__cara path { fill: none; stroke: var(--ht-laguna); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.h-mini__tag { margin: 0; font-size: 0.66em; color: var(--ht-slate); }

.h-fronta { text-align: left; width: min(100%, 30em); align-content: start; } 
.h-fronta .ht-item { max-height: 14em; overflow: hidden; transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.6s ease 0.15s, padding 0.6s ease 0.15s, margin 0.6s ease 0.15s, border-width 0.6s ease 0.15s; }
.h-fronta .ht-item.je-schvaleno { opacity: 0.4; } 
.h-fronta .ht-item.je-schvaleno .ht-item__actions :first-child { background: #217a52; border-color: #217a52; }
.h-fronta .ht-item__actions :first-child { transition: transform 0.18s ease, background 0.25s ease, border-color 0.25s ease; }
.h-fronta .ht-item.stiska .ht-item__actions :first-child { transform: scale(0.92); background: #217a52; border-color: #217a52; }
.h-fronta .ht-queue__count span { transition: transform 0.3s ease; }
.h-fronta .ht-queue__count span.skok { transform: scale(1.3); }
.h-fronta__hotovo { margin: 0; font-size: 14px; font-weight: 600; color: #217a52; opacity: 0; transition: opacity 0.4s ease; }   
.h-fronta.vse .h-fronta__hotovo { opacity: 1; }

.h-aplikace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; text-align: left; }
.h-aplikace .h-dlazdice { padding: 18px 20px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; align-items: center; align-content: center; }
.h-aplikace .chip { grid-row: span 2; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; color: var(--ht-laguna-ink); background: rgba(var(--ht-laguna-rgb), 0.12); }
.h-aplikace .i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.h-aplikace h3 { margin: 0; font-family: var(--ht-f-head); font-weight: 700; font-size: 1.05em; letter-spacing: -0.01em; }
.h-aplikace p { margin: 0; font-size: 0.86em; color: var(--m-tlumeny); line-height: 1.4; }

.h-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; text-align: left; }
.h-versus > div { border-radius: 20px; padding: 1.2em 1.4em; display: grid; gap: 0.75em; align-content: start; }
.h-versus__a { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #b8cad1; }
.h-versus__b { background: var(--ht-white); color: var(--ht-navy); }
.h-versus h3 { margin: 0; font-family: var(--ht-f-head); font-size: 1.1em; }
.h-versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; }
.h-versus li { display: grid; grid-template-columns: 1.3em minmax(0, 1fr); gap: 0.5em; line-height: 1.4; }
.h-versus__a li::before { content: "✕"; color: #7f97a1; }
.h-versus__b li::before { content: "✓"; color: var(--ht-laguna); font-weight: 700; }

.h-fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; text-align: left; }
.h-fakta .h-dlazdice { padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.h-fakta b { font-family: var(--ht-f-head); font-size: 1.12em; letter-spacing: -0.01em; }
.h-fakta span { color: var(--m-tlumeny); font-size: 0.92em; line-height: 1.45; }

.h-hosting { font-style: italic; color: var(--m-tlumeny); font-size: 0.98em; line-height: 1.5; max-width: 62ch; margin: 18px auto 0; text-wrap: pretty; }
.m-na-tme .h-hosting { color: var(--m-tlumeny-tma); }
.m-na-tme .h-fakta .h-dlazdice { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.m-na-tme .h-fakta b { color: var(--ht-white); }
.m-na-tme .h-fakta span { color: var(--m-tlumeny-tma); }

@media (prefers-reduced-motion: no-preference) {
  .h-tok .slabe { animation: h-pulz 2.6s ease-in-out infinite; }
  .h-mini__akce { animation: h-akce 6s ease-in-out infinite; }
  .h-mini__akce span:first-child { animation: h-stisk 6s ease-in-out infinite; }
  .h-mini__ok { animation: h-ok 6s ease-in-out infinite; }
  
  @keyframes h-pulz { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 181, 126, 0); } 50% { box-shadow: 0 0 0 0.35em rgba(244, 181, 126, 0.35); } }
  @keyframes h-akce { 0%, 48% { opacity: 1; } 54%, 92% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes h-stisk { 0%, 40% { transform: none; } 44% { transform: scale(0.9); } 48%, 100% { transform: none; } }
  @keyframes h-ok { 0%, 50% { opacity: 0; } 56%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes h-cara { 0% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .js .h-vstup { opacity: 1; transform: none; transition: none; } }
.staticky .h-vstup { opacity: 1 !important; transform: none !important; transition: none !important; }

.staticky .h-tok .slabe, .staticky .h-mini__akce, .staticky .h-mini__akce span, .staticky .h-mini__ok, .staticky .h-mini__cara path { animation: none !important; }
@media print { .h-tok .slabe, .h-mini__akce, .h-mini__akce span, .h-mini__ok, .h-mini__cara path { animation: none !important; } }

.h-app { --cyklus: 9s; position: relative; border-radius: 16px; overflow: hidden; background: var(--ht-white); color: var(--ht-navy); text-align: left; font-size: 17px;
  box-shadow: 0 2px 4px rgba(11, 45, 59, 0.06), 0 30px 60px -30px rgba(11, 45, 59, 0.5); }
.h-app__lista { display: flex; align-items: center; gap: 0.4em; padding: 0.55em 0.8em; background: #f2f6f6; border-bottom: 1px solid var(--ht-line); }
.h-app__lista i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #cfd9dc; }
.h-app__lista b { margin-left: 0.5em; font-family: var(--ht-f-head); font-size: 0.85em; }
.h-app__telo { display: grid; grid-template-columns: 36% minmax(0, 1fr); height: 11.6em; }
.h-app__menu { position: relative; display: grid; grid-auto-rows: 2em; gap: 0.3em; align-content: start; padding: 0.7em 0.5em; background: var(--ht-navy); }
.h-app__menu span { display: flex; align-items: center; padding: 0 0.65em; border-radius: 0.5em; font-size: 0.8em; font-weight: 600; color: #a3b8c0; white-space: nowrap; overflow: hidden; }
.h-app__menu span:first-child { background: rgba(255, 255, 255, 0.14); color: var(--ht-white); }
.h-app__kurzor { position: absolute; left: 76%; top: 1.45em; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--ht-white); box-shadow: 0 0 0 0.2em rgba(var(--ht-laguna-rgb), 0.55); opacity: 0.9; }
.h-app__obsah { position: relative; overflow: hidden; }
.h-app__pohled { position: absolute; inset: 0.8em 0.9em; display: grid; gap: 0.42em; align-content: start; opacity: 0; }
.h-app__pohled:first-child { opacity: 1; }
.h-app__nadpis { margin: 0 0 0.15em; font-family: var(--ht-f-head); font-weight: 700; font-size: 0.95em; }
.h-app__radek { display: flex; align-items: center; gap: 0.5em; padding: 0.42em 0.55em; border-radius: 0.55em; background: var(--ht-mist); font-size: 0.74em; min-width: 0; }
.h-app__radek span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.h-app__radek small { color: var(--ht-slate); white-space: nowrap; }
.h-app__radek .av { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(var(--ht-laguna-rgb), 0.15); color: var(--ht-laguna-ink); font-style: normal; font-size: 0.85em; font-weight: 700; }
.h-app__radek .ok { flex: none; width: 1.1em; height: 1.1em; border-radius: 0.3em; border: 2px solid #b9c7cc; }
.h-app__radek .ok.je { background: var(--ht-laguna); border-color: var(--ht-laguna); }
.h-app__radek.hotovo span { text-decoration: line-through; color: var(--ht-slate); }
.h-app__lista-pruh { flex: 1; height: 0.45em; border-radius: 999px; background: #dfe8ea; overflow: hidden; }
.h-app__lista-pruh b { display: block; height: 100%; border-radius: inherit; background: var(--ht-laguna); }
.st { flex: none; padding: 0.2em 0.55em; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 0.92em; white-space: nowrap; }
.st--modra { background: rgba(var(--ht-laguna-rgb), 0.14); color: var(--ht-laguna-ink); }
.st--oranz { background: #fff1e2; color: #8a4f12; }
.st--zel { background: #e3f4ea; color: #1d6b46; }

@media (prefers-reduced-motion: no-preference) {
  .js .h-app__pohled { animation: h-pohled var(--cyklus) infinite; }
  .js .h-app__pohled:nth-child(1) { animation-delay: var(--posun, 0s); }
  .js .h-app__pohled:nth-child(2) { animation-delay: calc(var(--posun, 0s) - 6s); }
  .js .h-app__pohled:nth-child(3) { animation-delay: calc(var(--posun, 0s) - 3s); }
  .js .h-app__menu span { animation: h-volba var(--cyklus) infinite; }
  .js .h-app__menu span:nth-child(1) { animation-delay: var(--posun, 0s); }
  .js .h-app__menu span:nth-child(2) { animation-delay: calc(var(--posun, 0s) - 6s); }
  .js .h-app__menu span:nth-child(3) { animation-delay: calc(var(--posun, 0s) - 3s); }
  .js .h-app__kurzor { animation: h-kurzor var(--cyklus) infinite, h-klik var(--cyklus) infinite; animation-delay: var(--posun, 0s); }
  @keyframes h-pohled { 0%, 30% { opacity: 1; transform: none; } 34%, 96% { opacity: 0; transform: translateY(0.4em); } 100% { opacity: 1; transform: none; } }
  @keyframes h-volba { 0%, 30% { background: rgba(255, 255, 255, 0.14); color: #fff; } 34%, 96% { background: transparent; color: #a3b8c0; } 100% { background: rgba(255, 255, 255, 0.14); color: #fff; } }
  @keyframes h-kurzor { 0%, 26% { transform: translateY(0); } 30%, 59% { transform: translateY(2.3em); } 63%, 92% { transform: translateY(4.6em); } 96%, 100% { transform: translateY(0); } }
  @keyframes h-klik { 0%, 29%, 33%, 62%, 66%, 95%, 99%, 100% { box-shadow: 0 0 0 0.2em rgba(var(--ht-laguna-rgb), 0.55); } 31%, 64%, 97% { box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.35); } }
}
.staticky .h-app__pohled, .staticky .h-app__menu span, .staticky .h-app__kurzor { animation: none !important; }
@media print { .h-app__pohled, .h-app__menu span, .h-app__kurzor { animation: none !important; } }

.systemy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; }
.system { display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; min-width: 0; }
.system .h-app { width: 100%; }
.system__hodiny { margin: 10px 0 0; font-family: var(--ht-f-head); font-weight: 800; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; color: var(--ht-navy); }
.system__hodiny small { font-size: 0.42em; font-weight: 700; letter-spacing: -0.02em; color: var(--ht-laguna); margin-left: 0.06em; }
.system__hodiny i { font-style: normal; font-size: 0.55em; font-weight: 600; color: var(--ht-laguna); margin-right: 0.1em; vertical-align: 0.12em; }
.system__co { margin: 0; font-size: 18px; font-weight: 700; color: var(--ht-navy); }
.system__rozsah { margin: -2px 0 0; font-size: 15px; color: var(--m-tlumeny); }

.ukazky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 40px; align-items: center; text-align: left; }
.ukazky__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ukazky__polozka { position: relative; display: grid; gap: 4px; padding-left: 20px; opacity: 0.72; }
.ukazky__polozka:first-child { opacity: 1; }
.ukazky__polozka::before, .ukazky__polozka::after { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.ukazky__polozka::after { background: var(--ht-glow); transform-origin: top; transform: scaleY(0); }
.ukazky__polozka b { font-family: var(--ht-f-head); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ht-white); }
.ukazky__polozka span { font-size: 15px; line-height: 1.45; color: var(--m-tlumeny-tma); }
.ukazky__pozn { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--m-tlumeny-tma); }
.ukazky__pozn .ht-josef { white-space: normal; max-width: 100%; }
.prohlidka { position: relative; min-width: 0; }
.prohlidka::before { content: ""; position: absolute; inset: -14% -10%; background: radial-gradient(closest-side, rgba(var(--ht-laguna-rgb), 0.35), transparent); pointer-events: none; }
.prohlidka > * { position: relative; }
.prohlidka__okno { border-radius: 14px; overflow: hidden; background: var(--ht-white); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.prohlidka__lista { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: #eef2f3; }
.prohlidka__lista i { width: 10px; height: 10px; border-radius: 50%; background: #cfd9dc; }
.prohlidka__lista span { margin-left: 10px; font-size: 13px; color: var(--ht-slate); }
.prohlidka__plocha { position: relative; aspect-ratio: 1280 / 736; overflow: hidden; background: #f3f6f7; container-type: inline-size; }
.ukazka { position: absolute; inset: 0; margin: 0; opacity: 0; }
.ukazka:first-child { opacity: 1; }
.ukazka img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.ukazka img:first-child { opacity: 1; }
.ukazka__kurzor { position: absolute; left: var(--x0); top: var(--y0); width: 3cqi; height: 3cqi; margin: -0.2cqi 0 0 -0.25cqi; opacity: 0; transform-origin: 0.25cqi 0.2cqi;
  fill: #0b2d3b; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.ukazka__klik { position: absolute; left: var(--x1); top: var(--y1); width: 5.4cqi; height: 5.4cqi; margin: -2.7cqi 0 0 -2.7cqi; border-radius: 50%;
  border: 3px solid rgba(var(--ht-laguna-rgb), 0.95); background: rgba(var(--ht-laguna-rgb), 0.18); opacity: 0; }
.ukazka__klik--2 { left: var(--x2); top: var(--y2); }
.ukazka figcaption { display: none; }
@media (prefers-reduced-motion: no-preference) {
  
  .ukazka:nth-child(2), .ukazky__polozka:nth-child(2) { --d: 10s; }
  .ukazka:nth-child(3), .ukazky__polozka:nth-child(3) { --d: 20s; }
  .js :is(.je-aktivni, .je-videt) .ukazka { animation: u-ukazka 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka img:nth-child(2) { animation: u-1h 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka img:nth-child(3) { animation: u-2 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka img:nth-child(4) { animation: u-2h 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka img:nth-child(5) { animation: u-3 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka__kurzor { animation: u-kurzor 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka__klik { animation: u-klik1 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazka__klik--2 { animation-name: u-klik2; }
  .js :is(.je-aktivni, .je-videt) .ukazky__polozka { animation: u-polozka 30s linear var(--d, 0s) infinite; }
  .js :is(.je-aktivni, .je-videt) .ukazky__polozka::after { animation: u-prubeh 30s linear var(--d, 0s) infinite; }
  @keyframes u-ukazka { 0% { opacity: 0; } 1.667%, 35% { opacity: 1; } 36.667%, 100% { opacity: 0; } }
  @keyframes u-1h { 0%, 6.8% { opacity: 0; } 7.333%, 100% { opacity: 1; } }
  @keyframes u-2 { 0%, 8.5% { opacity: 0; } 9.333%, 100% { opacity: 1; } }
  @keyframes u-2h { 0%, 14.833% { opacity: 0; } 15.333%, 100% { opacity: 1; } }
  @keyframes u-3 { 0%, 16.833% { opacity: 0; } 17.833%, 100% { opacity: 1; } }
  @keyframes u-kurzor {
    0% { left: var(--x0); top: var(--y0); opacity: 0; transform: none; }
    2% { opacity: 0; }
    3.333% { left: var(--x0); top: var(--y0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    7.333% { left: var(--x1); top: var(--y1); transform: none; }
    7.9% { transform: none; }
    8.2% { transform: scale(0.8); }
    8.9% { transform: none; }
    11.333% { left: var(--x1); top: var(--y1); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    15.333% { left: var(--x2); top: var(--y2); transform: none; }
    16.2% { transform: none; }
    16.5% { transform: scale(0.8); }
    17.2% { transform: none; }
    19% { left: var(--x2); top: var(--y2); animation-timing-function: ease-in-out; }
    22%, 100% { left: calc(var(--x2) + 3%); top: calc(var(--y2) + 5%); opacity: 1; transform: none; }
  }
  @keyframes u-klik1 { 0%, 8.1% { opacity: 0; transform: scale(0.3); } 8.4% { opacity: 1; transform: scale(0.5); } 10.6%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-klik2 { 0%, 16.4% { opacity: 0; transform: scale(0.3); } 16.7% { opacity: 1; transform: scale(0.5); } 18.9%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-polozka { 0% { opacity: 0.72; } 1.667%, 33.333% { opacity: 1; } 35%, 100% { opacity: 0.72; } }
  @keyframes u-prubeh { 0% { transform: scaleY(0); opacity: 1; } 33.333% { transform: scaleY(1); opacity: 1; } 35%, 100% { transform: scaleY(1); opacity: 0; } }
}
.staticky .prohlidka__plocha { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.staticky .ukazka, .staticky .ukazky__polozka { position: relative; opacity: 1 !important; animation: none !important; }
.staticky .ukazka img { position: relative; height: auto; aspect-ratio: 1280 / 736; border-radius: 6px; animation: none !important; }
.staticky .ukazka img ~ img, .staticky .ukazka__kurzor, .staticky .ukazka__klik { display: none; }
.staticky .ukazka figcaption { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ht-navy); }
@media print, (prefers-reduced-motion: reduce) {
  .prohlidka__plocha { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .ukazka, .ukazky__polozka { position: relative; opacity: 1 !important; animation: none !important; }
  .ukazka img { position: relative; height: auto; aspect-ratio: 1280 / 736; border-radius: 6px; animation: none !important; }
  .ukazka img ~ img, .ukazka__kurzor, .ukazka__klik { display: none; }
  .ukazka figcaption { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ht-navy); }
}

@media (prefers-reduced-motion: no-preference) {
  .ukazka:nth-child(4), .ukazky__polozka:nth-child(4) { --d: 30s; }
  .ukazka:nth-child(5), .ukazky__polozka:nth-child(5) { --d: 40s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka { animation-name: u-ukazka-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka img:nth-child(2), .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka img:nth-child(2) { animation-name: u-1h-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka img:nth-child(3), .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka img:nth-child(3) { animation-name: u-2-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka img:nth-child(4), .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka img:nth-child(4) { animation-name: u-2h-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka img:nth-child(5), .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka img:nth-child(5) { animation-name: u-3-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka__kurzor, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka__kurzor { animation-name: u-kurzor-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka__klik, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka__klik { animation-name: u-klik1-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazka__klik--2, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazka__klik--2 { animation-name: u-klik2-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazky__polozka, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazky__polozka { animation-name: u-polozka-n2; animation-duration: 20s; }
  .js .ukazky--n2:is(.je-aktivni, .je-videt) .ukazky__polozka::after, .js :is(.je-aktivni, .je-videt) .ukazky--n2 .ukazky__polozka::after { animation-name: u-prubeh-n2; animation-duration: 20s; }
  @keyframes u-ukazka-n2 { 0% { opacity: 0; } 2.501%, 52.5% { opacity: 1; } 55.001%, 100% { opacity: 0; } }
  @keyframes u-1h-n2 { 0%, 10.2% { opacity: 0; } 11%, 100% { opacity: 1; } }
  @keyframes u-2-n2 { 0%, 12.75% { opacity: 0; } 14%, 100% { opacity: 1; } }
  @keyframes u-2h-n2 { 0%, 22.25% { opacity: 0; } 23%, 100% { opacity: 1; } }
  @keyframes u-3-n2 { 0%, 25.249% { opacity: 0; } 26.749%, 100% { opacity: 1; } }
  @keyframes u-kurzor-n2 {
    0% { left: var(--x0); top: var(--y0); opacity: 0; transform: none; }
    3% { opacity: 0; }
    5% { left: var(--x0); top: var(--y0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    11% { left: var(--x1); top: var(--y1); transform: none; }
    11.85% { transform: none; }
    12.3% { transform: scale(0.8); }
    13.35% { transform: none; }
    17% { left: var(--x1); top: var(--y1); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    23% { left: var(--x2); top: var(--y2); transform: none; }
    24.3% { transform: none; }
    24.75% { transform: scale(0.8); }
    25.8% { transform: none; }
    28.5% { left: var(--x2); top: var(--y2); animation-timing-function: ease-in-out; }
    33%, 100% { left: calc(var(--x2) + 3%); top: calc(var(--y2) + 5%); opacity: 1; transform: none; }
  }
  @keyframes u-klik1-n2 { 0%, 12.15% { opacity: 0; transform: scale(0.3); } 12.6% { opacity: 1; transform: scale(0.5); } 15.9%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-klik2-n2 { 0%, 24.6% { opacity: 0; transform: scale(0.3); } 25.05% { opacity: 1; transform: scale(0.5); } 28.35%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-polozka-n2 { 0% { opacity: 0.72; } 2.501%, 49.999% { opacity: 1; } 52.5%, 100% { opacity: 0.72; } }
  @keyframes u-prubeh-n2 { 0% { transform: scaleY(0); opacity: 1; } 49.999% { transform: scaleY(1); opacity: 1; } 52.5%, 100% { transform: scaleY(1); opacity: 0; } }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka { animation-name: u-ukazka-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka img:nth-child(2), .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka img:nth-child(2) { animation-name: u-1h-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka img:nth-child(3), .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka img:nth-child(3) { animation-name: u-2-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka img:nth-child(4), .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka img:nth-child(4) { animation-name: u-2h-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka img:nth-child(5), .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka img:nth-child(5) { animation-name: u-3-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka__kurzor, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka__kurzor { animation-name: u-kurzor-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka__klik, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka__klik { animation-name: u-klik1-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazka__klik--2, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazka__klik--2 { animation-name: u-klik2-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazky__polozka, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazky__polozka { animation-name: u-polozka-n4; animation-duration: 40s; }
  .js .ukazky--n4:is(.je-aktivni, .je-videt) .ukazky__polozka::after, .js :is(.je-aktivni, .je-videt) .ukazky--n4 .ukazky__polozka::after { animation-name: u-prubeh-n4; animation-duration: 40s; }
  @keyframes u-ukazka-n4 { 0% { opacity: 0; } 1.25%, 26.25% { opacity: 1; } 27.5%, 100% { opacity: 0; } }
  @keyframes u-1h-n4 { 0%, 5.1% { opacity: 0; } 5.5%, 100% { opacity: 1; } }
  @keyframes u-2-n4 { 0%, 6.375% { opacity: 0; } 7%, 100% { opacity: 1; } }
  @keyframes u-2h-n4 { 0%, 11.125% { opacity: 0; } 11.5%, 100% { opacity: 1; } }
  @keyframes u-3-n4 { 0%, 12.625% { opacity: 0; } 13.375%, 100% { opacity: 1; } }
  @keyframes u-kurzor-n4 {
    0% { left: var(--x0); top: var(--y0); opacity: 0; transform: none; }
    1.5% { opacity: 0; }
    2.5% { left: var(--x0); top: var(--y0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    5.5% { left: var(--x1); top: var(--y1); transform: none; }
    5.925% { transform: none; }
    6.15% { transform: scale(0.8); }
    6.675% { transform: none; }
    8.5% { left: var(--x1); top: var(--y1); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    11.5% { left: var(--x2); top: var(--y2); transform: none; }
    12.15% { transform: none; }
    12.375% { transform: scale(0.8); }
    12.9% { transform: none; }
    14.25% { left: var(--x2); top: var(--y2); animation-timing-function: ease-in-out; }
    16.5%, 100% { left: calc(var(--x2) + 3%); top: calc(var(--y2) + 5%); opacity: 1; transform: none; }
  }
  @keyframes u-klik1-n4 { 0%, 6.075% { opacity: 0; transform: scale(0.3); } 6.3% { opacity: 1; transform: scale(0.5); } 7.95%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-klik2-n4 { 0%, 12.3% { opacity: 0; transform: scale(0.3); } 12.525% { opacity: 1; transform: scale(0.5); } 14.175%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-polozka-n4 { 0% { opacity: 0.72; } 1.25%, 25% { opacity: 1; } 26.25%, 100% { opacity: 0.72; } }
  @keyframes u-prubeh-n4 { 0% { transform: scaleY(0); opacity: 1; } 25% { transform: scaleY(1); opacity: 1; } 26.25%, 100% { transform: scaleY(1); opacity: 0; } }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka { animation-name: u-ukazka-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka img:nth-child(2), .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka img:nth-child(2) { animation-name: u-1h-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka img:nth-child(3), .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka img:nth-child(3) { animation-name: u-2-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka img:nth-child(4), .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka img:nth-child(4) { animation-name: u-2h-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka img:nth-child(5), .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka img:nth-child(5) { animation-name: u-3-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka__kurzor, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka__kurzor { animation-name: u-kurzor-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka__klik, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka__klik { animation-name: u-klik1-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazka__klik--2, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazka__klik--2 { animation-name: u-klik2-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazky__polozka, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazky__polozka { animation-name: u-polozka-n5; animation-duration: 50s; }
  .js .ukazky--n5:is(.je-aktivni, .je-videt) .ukazky__polozka::after, .js :is(.je-aktivni, .je-videt) .ukazky--n5 .ukazky__polozka::after { animation-name: u-prubeh-n5; animation-duration: 50s; }
  @keyframes u-ukazka-n5 { 0% { opacity: 0; } 1%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
  @keyframes u-1h-n5 { 0%, 4.08% { opacity: 0; } 4.4%, 100% { opacity: 1; } }
  @keyframes u-2-n5 { 0%, 5.1% { opacity: 0; } 5.6%, 100% { opacity: 1; } }
  @keyframes u-2h-n5 { 0%, 8.9% { opacity: 0; } 9.2%, 100% { opacity: 1; } }
  @keyframes u-3-n5 { 0%, 10.1% { opacity: 0; } 10.7%, 100% { opacity: 1; } }
  @keyframes u-kurzor-n5 {
    0% { left: var(--x0); top: var(--y0); opacity: 0; transform: none; }
    1.2% { opacity: 0; }
    2% { left: var(--x0); top: var(--y0); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    4.4% { left: var(--x1); top: var(--y1); transform: none; }
    4.74% { transform: none; }
    4.92% { transform: scale(0.8); }
    5.34% { transform: none; }
    6.8% { left: var(--x1); top: var(--y1); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    9.2% { left: var(--x2); top: var(--y2); transform: none; }
    9.72% { transform: none; }
    9.9% { transform: scale(0.8); }
    10.32% { transform: none; }
    11.4% { left: var(--x2); top: var(--y2); animation-timing-function: ease-in-out; }
    13.2%, 100% { left: calc(var(--x2) + 3%); top: calc(var(--y2) + 5%); opacity: 1; transform: none; }
  }
  @keyframes u-klik1-n5 { 0%, 4.86% { opacity: 0; transform: scale(0.3); } 5.04% { opacity: 1; transform: scale(0.5); } 6.36%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-klik2-n5 { 0%, 9.84% { opacity: 0; transform: scale(0.3); } 10.02% { opacity: 1; transform: scale(0.5); } 11.34%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes u-polozka-n5 { 0% { opacity: 0.72; } 1%, 20% { opacity: 1; } 21%, 100% { opacity: 0.72; } }
  @keyframes u-prubeh-n5 { 0% { transform: scaleY(0); opacity: 1; } 20% { transform: scaleY(1); opacity: 1; } 21%, 100% { transform: scaleY(1); opacity: 0; } }
}