:root {
  --u-modra: #1d50bf;
  --u-modra-1: #eef2fb;
  --u-modra-8: #163c91;
  --u-text: #1d1f26;
  --u-text-2: #5b6576;
  --u-linka: #e3e7ee;
  --u-plocha: #f6f6fa;
  --u-zelena: #1f9d55;
  --u-zelena-1: #e3f6ea;
  --u-r: 12px;
  --u-t: .6s;
  --u-stin: 0 24px 60px rgba(10, 26, 77, .18);
  --u-stin-maly: 0 8px 24px rgba(10, 26, 77, .12);
  --o-modra: #1d50bf;
  --o-navy: #0b1a33;
  --o-akcent: #97b5f7;
  --o-na-akcentu: #0b1a33;
  --a-bok: #1e2a3a;
  --a-plocha: #f0f2f5;
  --a-akcent: #3b82f6;
  --a-text: #1a2233;
  --a-text-2: #5a6474;
  --a-linka: #e2e8f0;
  --a-zelena: #34c759;
}
[data-meritko] { position: relative; overflow: hidden; }
[data-meritko] > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--m, .3)); }
.prohlizec { background: #fff; border-radius: var(--u-r); overflow: hidden; border: 1px solid var(--u-linka); }
.prohlizec-lista { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--u-plocha); border-bottom: 1px solid var(--u-linka); }
.prohlizec-lista i { width: 8px; height: 8px; border-radius: 50%; background: #d3d9e2; flex: none; }
.prohlizec-lista span { margin-left: 10px; flex: 1; max-width: 260px; height: 20px; border-radius: 6px; background: #fff; color: var(--u-text-2); font-size: 11px; line-height: 20px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.prohlizec-lista span svg.i { width: 11px; height: 11px; stroke-width: 2.2; }
.tel { position: relative; width: 100%; container-type: inline-size; border-radius: 15% / 7.3%; background: #0e1424; box-shadow: var(--u-stin); }
.tel-obr { margin: 2.6cqw; aspect-ratio: 300 / 620; border-radius: 12.5cqw; background: #fff; }
.tel-obr::after { content: ""; position: absolute; z-index: 6; left: 50%; top: 1.4%; width: 30%; height: 3.1%; translate: -50% 0; border-radius: 99px; background: #0e1424; }

.kus { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transition: transform var(--u-t) var(--ease), opacity var(--u-t) var(--ease); }
.adm { background: #fff; border-radius: 10px; border: 1px solid var(--a-linka); box-shadow: var(--u-stin); display: flex; flex-direction: column; overflow: hidden; color: var(--a-text); font-size: 13px; line-height: 1.4; }
.adm-lista { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--a-linka); font-size: 12px; font-weight: 600; color: var(--a-text-2); white-space: nowrap; }
.adm-lista img { height: 18px; width: auto; margin-right: 6px; }
.adm-lista svg.i { width: 12px; height: 12px; }
.adm-lista span:last-of-type { color: var(--a-text); }
.adm-ulozeno { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: #15803d; background: #e7f8ec; padding: 3px 8px; border-radius: 99px; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.adm-ulozeno svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.adm-telo { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.adm-pole { display: grid; gap: 4px; }
.adm-pole small, .adm-kanaly > small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2); }
.adm-psani { display: block; min-height: 38px; padding: 9px 11px; border: 1px solid var(--a-linka); border-radius: 6px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
.adm-psani::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--a-akcent); animation: kurzor 1s steps(1) infinite; }
@keyframes kurzor { 50% { opacity: 0; } }
.adm-kanaly { display: grid; gap: 6px; }
.adm-kanal { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--a-plocha); font-weight: 600; font-size: 12.5px; transition: background .3s calc(var(--d) * .1s); }
.adm-kanal svg.i { width: 16px; height: 16px; color: var(--a-text-2); }
.adm-kanal span:not(.fb-mini) { flex: 1; }
.prepinac { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #cfd5de; transition: background .3s calc(var(--d) * .12s); }
.prepinac::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s calc(var(--d) * .12s); }
.fb-mini { width: 16px; height: 16px; border-radius: 50%; background: #1877f2; color: #fff; font: 700 11px/16px sans-serif; text-align: center; flex: none; display: inline-block; }
.adm-pata { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--a-linka); }
.adm-tl-propsat { position: relative; display: inline-grid; padding: 7px 16px; border-radius: 99px; background: var(--a-akcent); color: #fff; font-weight: 700; font-size: 12px; transition: background .3s, transform .15s; }
.adm-tl-propsat em, .ap-tl em { grid-area: 1 / 1; font-style: normal; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: opacity .3s; }
.adm-tl-propsat .hotovo, .ap-tl .hotovo { opacity: 0; }
.hotovo svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.nb-snimek { width: 2079px; }
.nb-snimek img { display: block; width: 2079px; max-width: none; height: auto; }
.ap { position: relative; width: 300px; height: 620px; overflow: hidden; background: #f4f6fb; color: #121a2c; font: 500 13px/1.35 system-ui, sans-serif; display: flex; flex-direction: column; }
.ap svg.i { width: 18px; height: 18px; }
.ap-stav { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font-size: 12px; font-weight: 700; }
.ap-stav-i { display: flex; gap: 3px; align-items: flex-end; }
.ap-stav-i i { width: 4px; background: #121a2c; border-radius: 1px; }
.ap-stav-i i:nth-child(1) { height: 5px; } .ap-stav-i i:nth-child(2) { height: 8px; } .ap-stav-i i:nth-child(3) { height: 11px; }
.ap-hlava { display: flex; align-items: center; gap: 10px; padding: 10px 18px 6px; }
.ap-hlava img { width: 32px; height: auto; }
.ap-hlava small { display: block; font-size: 11px; color: #6b7487; }
.ap-hlava b { font-size: 17px; letter-spacing: -.01em; }
.ap-zvon { margin-left: auto; position: relative; width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.ap-zvon em { position: absolute; right: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--o-akcent); color: var(--o-na-akcentu); font: 700 9px/14px sans-serif; text-align: center; font-style: normal; }
.ap-pozdrav { margin: 8px 14px 12px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, var(--o-modra), #1b5fc2); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.ap-pozdrav b { display: block; font-size: 18px; }
.ap-pozdrav small { opacity: .85; font-size: 11.5px; }
.ap-pocasi { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-weight: 700; }
.ap-akce { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 14px; margin-bottom: 14px; }
.ap-akce span { display: grid; justify-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; }
.ap-ik { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; }
.ap-ik svg.i { width: 22px; height: 22px; }
.ap-ik-a { color: #c2410c; } .ap-ik-b { color: var(--o-modra); } .ap-ik-c { color: #15803d; } .ap-ik-d { color: #7c3aed; }
.ap-nadpis { display: flex; justify-content: space-between; align-items: baseline; padding: 0 18px 8px; }
.ap-nadpis b { font-size: 15px; }
.ap-nadpis small { color: var(--o-modra); font-weight: 700; }
.ap-feed { display: grid; gap: 8px; padding: 0 14px; }
.ap-zprava { display: flex; gap: 10px; padding: 8px; border-radius: 16px; background: #fff; }
.ap-foto { width: 58px; height: 58px; border-radius: 12px; background: center / cover; flex: none; }
.ap-zprava b { display: block; font-size: 12.5px; line-height: 1.3; }
.ap-zprava small { color: #6b7487; font-size: 10.5px; }
.ap-stitek { display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-bottom: 2px; }
.s-a { background: #fde8e8; color: #b91c1c; } .s-b { background: #e0ecff; color: var(--o-modra); } .s-c { background: #f1e8ff; color: #6d28d9; }
.ap-tab { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 10px 20px; background: #fff; border-top: 1px solid #e8ebf2; }
.ap-tab span { display: grid; justify-items: center; gap: 2px; color: #8a93a6; }
.ap-tab small { font-size: 10px; font-weight: 600; }
.ap-tab .akt { color: var(--o-modra); }
.ap-push { position: absolute; z-index: 5; left: 10px; right: 10px; top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px rgba(10, 20, 50, .25); transform: translateY(-140%); transition: transform .6s var(--ease); }
.ap-push img { width: 24px; height: auto; flex: none; margin-top: 2px; }
.ap-push small { display: block; font-size: 10px; color: #6b7487; }
.ap-push b { display: block; font-size: 12.5px; }
.ap-push span { display: block; font-size: 11px; color: #3b4357; }
.ap-zpet { display: flex; align-items: center; gap: 8px; padding: 10px 18px 12px; }
.ap-zpet svg.i { rotate: 180deg; width: 16px; height: 16px; }
.ap-zpet b { font-size: 18px; letter-spacing: -.01em; }
.ap-chipy { display: flex; gap: 6px; padding: 0 14px 12px; overflow: hidden; }
.ap-chipy span { white-space: nowrap; padding: 6px 11px; border-radius: 99px; background: #fff; font-size: 11px; font-weight: 600; color: #3b4357; }
.ap-chipy .akt { background: var(--o-modra); color: #fff; }
.ap-tl { position: relative; display: grid; margin: 12px 14px 0; padding: 13px; border-radius: 14px; background: var(--o-modra); color: #fff; font-weight: 700; text-align: center; transition: background .3s; }
.ap-input { margin: 0 14px; padding: 12px; border-radius: 12px; background: #fff; color: #3b4357; font-size: 12px; }
.pdf { flex: none; width: 34px; height: 40px; border-radius: 5px; background: #fde8e8; color: #b91c1c; font: 700 9px/40px sans-serif; text-align: center; }
.ap-dok { display: flex; gap: 10px; align-items: center; margin: 0 14px 8px; padding: 10px; border-radius: 14px; background: #fff; }
.ap-dok b { display: block; font-size: 12px; line-height: 1.3; }
.ap-dok small { color: #6b7487; font-size: 10.5px; }

.kanal { display: flex; flex-direction: column; }
.kanal-stitek { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 11px 4px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--u-linka); font-size: 12px; font-weight: 700; color: var(--u-text-2); transition: background .4s, color .4s, border-color .4s; }
.kanal-stitek svg.i { width: 14px; height: 14px; }

.k-app .tel { width: 190px; flex: none; }
.mini-web { background: #fff; border-radius: var(--u-r); border: 1px solid var(--u-linka); box-shadow: var(--u-stin-maly); overflow: hidden; font: 500 11px/1.35 system-ui, sans-serif; }
.mw-hlava { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: var(--o-navy); color: #fff; font-size: 12px; }
.mw-hlava img { width: 16px; height: auto; }
.mw-hlava span { width: 34px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.mw-hlava b { margin-right: auto; }
.mw-h { padding: 10px 12px 4px; font-weight: 800; font-size: 14px; }
.mw-polozka { display: flex; gap: 10px; padding: 7px 12px; align-items: center; }
.mw-polozka > span { width: 54px; height: 38px; flex: none; background: center / cover; border-radius: 4px; }
.mw-polozka b { display: block; font-size: 12px; }
.mw-polozka small { color: #6b7487; }
.mw-polozka em { font-style: normal; font-size: 9px; font-weight: 700; color: var(--o-na-akcentu); background: var(--o-akcent); padding: 1px 6px; border-radius: 3px; margin-right: 6px; }
.mw-nova { max-height: 60px; padding-top: 7px; padding-bottom: 7px; overflow: hidden; background: #fff8e6; }
.posta { background: #fff; border-radius: var(--u-r); border: 1px solid var(--u-linka); box-shadow: var(--u-stin-maly); overflow: hidden; }
.posta-radek { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--u-linka); font-size: 12px; line-height: 1.3; }
.posta-radek:last-child { border-bottom: 0; }
.posta-radek div { flex: 1; min-width: 0; }
.posta-radek b { display: block; }
.posta-radek span:not(.posta-av) { display: block; color: var(--u-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posta-radek small { color: var(--u-text-2); }
.posta-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--u-modra); color: #fff; font-weight: 700; flex: none; }
.posta-av svg.i { width: 16px; height: 16px; }
.fb { background: #fff; border-radius: var(--u-r); border: 1px solid var(--u-linka); box-shadow: var(--u-stin-maly); padding: 12px; font-size: 12px; line-height: 1.4; overflow: hidden; }
.fb-hlava { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fb-hlava img { width: 24px; height: auto; }
.fb-hlava b { display: block; font-size: 12.5px; }
.fb-hlava small { color: var(--u-text-2); font-size: 11px; }
.fb p { margin-bottom: 8px; }
.sms { background: #fff; border-radius: 18px; border: 1px solid var(--u-linka); box-shadow: var(--u-stin-maly); padding: 12px 14px; }
.sms small { display: block; font-size: 10.5px; font-weight: 700; color: var(--u-text-2); letter-spacing: .03em; margin-bottom: 6px; }
.sms p { margin: 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #e9ecf2; font-size: 12px; line-height: 1.4; }

.ap-karta-velka { margin: 0 14px 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--o-modra), #1b5fc2); color: #fff; }
.ap-karta-velka b { display: block; font-size: 15px; }
.ap-karta-velka small { opacity: .85; }
.ap-dny { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 14px 12px; }
.ap-dny span { display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; background: #fff; font-size: 11px; color: #6b7487; }
.ap-dny b { font-size: 16px; color: #121a2c; }
.ap-dny .akt { background: var(--o-modra); color: #fff; }
.ap-dny .akt b { color: #fff; }
.ap-sloty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px; }
.ap-sloty span { padding: 11px 0; text-align: center; border-radius: 10px; background: #fff; font-weight: 700; font-size: 12px; transition: background .4s, color .4s; }
.ap-sloty .o { background: #e6e9ef; color: #8a93a6; }
.ap-sloty .cil { background: var(--u-zelena-1); color: var(--u-zelena); }

.qr { display: block; background: #fff; border-radius: 4px; transition: box-shadow .4s; }
.qr rect { fill: #121a2c; }
.ap-banka { background: #0f1b33; }
.ap-kamera { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #3c4a66, #0f1b33 70%); color: #fff; }
.ap-kamera .qr { width: 150px; padding: 8px; transform: rotate(-6deg) scale(.9); opacity: .9; }
.ap-kamera span { position: absolute; bottom: 120px; font-weight: 700; font-size: 13px; }
.ap-kamera::before { content: ""; position: absolute; width: 190px; height: 190px; left: 55px; top: 190px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 22px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.ap-skener { position: absolute; left: 70px; right: 70px; top: 200px; height: 3px; background: #7cf0a8; box-shadow: 0 0 12px #7cf0a8; opacity: 0; }
.ap-platba { position: absolute; inset: 0; background: #f4f6fb; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .6s var(--ease); }
.ap-castka { margin: 4px 14px 14px; padding: 18px; border-radius: 18px; background: #fff; font-size: 34px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.ap-platba dl { margin: 0 14px; padding: 6px 14px; border-radius: 16px; background: #fff; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; font-size: 12px; }
.ap-platba dt { color: #6b7487; padding: 9px 0; border-bottom: 1px solid #eef0f5; }
.ap-platba dd { margin: 0; padding: 9px 0; text-align: right; font-weight: 700; border-bottom: 1px solid #eef0f5; }
.ap-platba dt:nth-last-of-type(1), .ap-platba dd:last-child { border-bottom: 0; }
.ap-tl-banka { margin-top: auto; margin-bottom: 30px; background: #121a2c; }
.vejir { position: relative; height: 560px; }
.vejir .tel { position: absolute; width: 200px; top: 50%; left: 50%; }
.vejir .v-1 { translate: -138% -46%; rotate: -9deg; }
.vejir .v-2 { translate: -50% -50%; z-index: 2; width: 245px; }
.vejir .v-3 { translate: 38% -46%; rotate: 9deg; }
.vejir.vidno .v-1 { animation: vejir-l 1s var(--ease) both; }
.vejir.vidno .v-3 { animation: vejir-p 1s var(--ease) both; }
@keyframes vejir-l { from { translate: -50% -48%; rotate: 0deg; } }
@keyframes vejir-p { from { translate: -50% -48%; rotate: 0deg; } }
.vejir .v-2 .ap-push { animation: push 8s var(--ease) 1.5s infinite; }
.pl-app { left: 0; bottom: 30px; animation: vznas 6s ease-in-out infinite; }
.ap-mesic { margin: 0 14px 12px; padding: 12px; border-radius: 16px; background: #fff; }
.ap-mesic > b { display: block; margin-bottom: 8px; }
.ap-mesic-dny { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 11px; font-weight: 600; }
.ap-mesic-dny span { padding: 4px 0; border-radius: 8px; }
.ap-mesic-dny span:nth-child(-n+7) { color: #8a93a6; font-size: 10px; }
.ap-mesic-dny .dnes { background: var(--o-modra); color: #fff; }
.ap-mesic-dny .t { background: #e0ecff; color: var(--o-modra); }
.ap-akce-pol { display: flex; gap: 10px; align-items: center; margin: 0 14px 8px; padding: 10px; border-radius: 14px; background: #fff; }
.ap-datum { width: 44px; height: 44px; border-radius: 12px; background: #fde8e8; color: #b91c1c; display: grid; place-content: center; text-align: center; font-size: 9px; font-weight: 700; line-height: 1.1; flex: none; }
.ap-datum b { font-size: 17px; }
.ap-akce-pol b { display: block; font-size: 12.5px; }
.ap-akce-pol small { color: #6b7487; font-size: 11px; }
.plovak { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: #fff; color: var(--u-text); border-radius: 14px; box-shadow: var(--u-stin-maly); font-size: 12px; line-height: 1.35; white-space: nowrap; }
.plovak b { display: block; font-size: 13px; }
.plovak small { color: var(--u-text-2); font-size: 12px; }
.pl-ik { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.pl-ik svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
.pl-ik.mod { background: var(--u-modra-1); color: var(--u-modra); }
@keyframes vznas { 50% { translate: 0 -10px; } }
@keyframes push { 0% { transform: translateY(-140%); } 8%, 60% { transform: none; } 68%, 100% { transform: translateY(-140%); } }
.jeviste { position: relative; width: 100%; height: calc(var(--jh) * var(--s, 1)); }
.jeviste-plocha { position: absolute; top: 0; left: 50%; width: var(--jw); height: var(--jh); transform-origin: 0 0; transform: translateX(calc(var(--jw) * var(--s, 1) / -2)) scale(var(--s, 1)); }
.ilu .jeviste-plocha { overflow: hidden; border-radius: 22px; box-shadow: 0 1px 0 var(--u-linka), 0 18px 40px rgba(16, 38, 95, .1); }
.ilu-pozadi, .lampa { position: absolute; inset: 0; width: 100%; height: 100%; }
.dotyk { position: absolute; z-index: 9; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); background: rgba(29, 80, 191, .3); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; }
.ap-ok { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px; background: #fff; text-align: center; transform: translateY(100%); }
.ap-ok .ap-ok-ik { width: 92px; height: 92px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--u-zelena); color: #fff; box-shadow: 0 0 0 12px var(--u-zelena-1); }
.ap-ok-ik svg.i { width: 46px; height: 46px; stroke-width: 2.6; }
.ap-ok b { font-size: 21px; letter-spacing: -.01em; }
.ap-ok span:not(.ap-ok-ik) { font-size: 13.5px; font-weight: 600; color: #3b4357; }
.ap-ok small { margin-top: 8px; font-size: 12px; color: #6b7487; }
.notebook { container-type: inline-size; }
.nb-vika { position: relative; padding: 2.6cqw 2.6cqw 3.6cqw; border-radius: 3cqw 3cqw 0 0; background: #1b2233; box-shadow: var(--u-stin); }
.nb-vika::before { content: ""; position: absolute; left: 50%; top: .9cqw; width: 1cqw; height: 1cqw; translate: -50% 0; border-radius: 50%; background: #39435a; }
.nb-obr { aspect-ratio: 16 / 10; border-radius: .5cqw; background: #fff; }
.nb-spodek { position: relative; height: 3.4cqw; margin: 0 -7cqw; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#e6e9ef, #a7b0bf); box-shadow: 0 16px 28px rgba(8, 20, 60, .3); }
.nb-spodek::before { content: ""; position: absolute; left: 50%; top: 0; width: 16cqw; height: 1.3cqw; translate: -50% 0; border-radius: 0 0 1.2cqw 1.2cqw; background: #8f98a9; }
.totem { container-type: inline-size; }
.p-totem { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 3; }
.totem-telo { position: relative; padding: 7cqw 7cqw 0; border-radius: 9cqw 9cqw 2cqw 2cqw; background: linear-gradient(90deg, #252e43, #354259 46%, #252e43); box-shadow: var(--u-stin); }
.totem-obr { aspect-ratio: 9 / 16; border-radius: 1.6cqw; background: #fff; }
.totem-pata { height: 92cqw; display: grid; place-items: center; }
.totem-pata img { width: 50cqw; height: auto; opacity: .8; }
.totem-podstava { height: 5cqw; margin: 0 -7cqw 0 -4cqw; border-radius: 2cqw 2cqw 1cqw 1cqw; background: linear-gradient(#30384c, #141925); }
.tt { position: relative; width: 540px; height: 960px; overflow: hidden; background: #eef1f6; color: #1b1f2a; font: 500 18px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tt svg.i { width: 24px; height: 24px; }
.tt-hlava { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; height: 110px; padding: 0 28px; background: var(--o-navy); color: #fff; }
.tt-hlava img { width: 52px; height: auto; }
.tt-jmeno b { display: block; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.tt-jmeno small { font-size: 16px; opacity: .8; }
.tt-cas { margin-left: auto; text-align: right; }
.tt-cas b { display: block; font-size: 30px; line-height: 1.1; }
.tt-cas small { font-size: 15px; opacity: .8; }
.tt-domu, .tt-kal { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; padding: 24px; }
.tt-dl { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 16px; }
.tt-dl span { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; background: var(--o-modra); color: #fff; font-size: 22px; font-weight: 700; border-bottom: 6px solid var(--o-akcent); }
.tt-dl svg.i { width: 52px; height: 52px; }
.tt-panel { margin-top: 20px; padding: 18px 22px; background: #fff; }
.tt-h { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.tt-panel ul { list-style: none; }
.tt-panel li { margin-top: 10px; padding: 6px 0 6px 14px; border-left: 4px solid var(--o-akcent); font-size: 17px; font-weight: 600; line-height: 1.3; }
.tt-panel small { display: block; font-size: 14px; color: #5b6170; }
.tt-kal { padding-top: 0; background: #eef1f6; transform: translateX(100%); }
.tt-zpet { display: flex; align-items: center; gap: 10px; height: 76px; margin: 0 -24px 20px; padding: 0 24px; background: #fff; border-bottom: 1px solid #dfe3ea; font-weight: 700; }
.tt-zpet svg.i { rotate: 180deg; color: var(--o-modra); }
.tt-zpet span { padding-right: 18px; border-right: 1px solid #dfe3ea; color: var(--o-modra); font-size: 20px; }
.tt-zpet b { margin-left: 8px; font-size: 24px; }
.tt-mesic { padding: 16px 20px; background: #fff; }
.tt-mesic > b { display: block; margin-bottom: 8px; font-size: 22px; }
.tt-dny { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 17px; font-weight: 600; }
.tt-dny span { padding: 6px 0; }
.tt-dny span:nth-child(-n+7) { font-size: 14px; color: #6b7487; }
.tt-dny .dnes { background: var(--o-navy); color: #fff; }
.tt-dny .t { background: #dde8fb; color: var(--o-modra); }
.tt-akce { display: grid; gap: 12px; margin-top: 18px; }
.tt-akce > div { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; }
.tt-dat { width: 64px; height: 64px; flex: none; display: grid; place-content: center; text-align: center; background: var(--o-akcent); color: var(--o-na-akcentu); font-size: 13px; font-weight: 700; line-height: 1.05; }
.tt-dat b { font-size: 26px; }
.tt-akce b { display: block; font-size: 19px; }
.tt-akce small { font-size: 15px; color: #5b6170; }
.tt-detail { position: absolute; z-index: 4; left: 24px; right: 24px; bottom: 24px; display: grid; justify-items: start; gap: 6px; padding: 26px; background: #fff; border-top: 6px solid var(--o-akcent); box-shadow: 0 -10px 40px rgba(12, 24, 56, .25); transform: translateY(130%); }
.tt-dat-velke { margin-bottom: 6px; }
.tt-detail > b { font-size: 28px; letter-spacing: -.01em; }
.tt-detail > small { font-size: 17px; color: #5b6170; }
.tt-qr { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 12px; padding-top: 16px; border-top: 1px solid #e3e6ec; font-size: 17px; font-weight: 600; line-height: 1.35; }
.tt-qr .qr { width: 150px; flex: none; }
.tt-prst { position: absolute; z-index: 6; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 4px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); opacity: 0; }
.u-tel .ap-nova { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; overflow: hidden; }
.hraje .u-tel .ap-push { animation: h-push var(--cyklus) infinite; }
.hraje .u-tel .ap-nova { animation: h-nova var(--cyklus) infinite; }
@keyframes h-push { 0%, 30% { transform: translateY(-140%); } 34%, 62% { transform: none; } 67%, 100% { transform: translateY(-140%); } }
@keyframes h-nova { 0%, 38% { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; } 44%, 94% { max-height: 90px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; opacity: 1; } 100% { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; } }
.p-adm { z-index: 2; }
.adm-psani { clip-path: inset(0 100% 0 0); }
.k-app .tel { width: 140px; flex: none; }
.k-app .ap-nova { max-height: 90px; overflow: hidden; background: #fff6d6; box-shadow: inset 0 0 0 2px #f5c542; }
.k-mail .posta-radek { border-bottom: 0; }
.k-sms .sms { padding: 10px; }
.k-sms .sms p { font-size: 11.5px; }
.k-fb .fb { padding: 10px 12px; }
.k-fb .fb-hlava { margin: 0; }
.k-fb .fb-hlava small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.kanal { display: flex; flex-direction: column; }
.k-app .ap-push { display: none; }
.p-zamek { z-index: 5; color: #fff; translate: 0 -105%; }
.p-tapeta { position: absolute; inset: 0; background: center / cover; filter: brightness(.5); }
.p-cas { position: relative; padding-top: 74px; text-align: center; }
.p-cas b { display: block; font-size: 66px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.p-cas small { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; opacity: .85; }
.p-notif { position: relative; display: flex; gap: 10px; margin: 44px 12px 0; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / .93); color: #121a2c; }
.p-notif img { align-self: flex-start; width: 28px; height: auto; flex: none; }
.p-notif small { display: block; color: #6b7487; font-size: 11px; }
.p-notif b { display: block; font-size: 14px; }
.p-notif span { display: block; color: #3b4357; font-size: 12.5px; }
.hraje .p-adm .adm-psani { animation: p-psani var(--cyklus) infinite; }
.hraje .p-adm .adm-ulozeno { animation: p-ulozeno var(--cyklus) infinite; }
.hraje .p-adm .adm-kanal { animation: p-kanal var(--cyklus) calc(var(--d) * .08s) infinite backwards; }
.hraje .p-adm .prepinac { animation: p-prep var(--cyklus) calc(var(--d) * .08s) infinite backwards; }
.hraje .p-adm .prepinac::after { animation: p-prep-k var(--cyklus) calc(var(--d) * .08s) infinite backwards; }
.hraje .p-adm .adm-tl-propsat { animation: p-propsat var(--cyklus) infinite; }
.hraje .p-adm .adm-tl-propsat em:first-child { animation: p-ven var(--cyklus) infinite; }
.hraje .p-adm .adm-tl-propsat .hotovo { animation: p-dovnitr var(--cyklus) infinite; }
.hraje .kanal > :last-child, .hraje .kanal-stitek { animation: p-zap var(--cyklus) calc(var(--d) * .12s) infinite backwards; }
.hraje .p-zamek { animation: p-zamek var(--cyklus) infinite; }
.hraje .p-notif { animation: p-notif var(--cyklus) infinite; }
.hraje .p-dotyk { animation: p-dotyk var(--cyklus) infinite; }
.hraje .k-app .ap-nova { animation: p-app-nova var(--cyklus) infinite; }
.js .kanal > :last-child, .js .kanal-stitek { opacity: 0; }
.kanal-stitek { background: var(--u-modra); color: #fff; border-color: var(--u-modra); }
@keyframes p-psani { 0%, 3% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(34, end); } 20%, 95% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes p-ulozeno { 0%, 21% { opacity: 0; transform: translateY(-4px); } 24%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes p-kanal { 0%, 24% { background: var(--a-plocha); } 26%, 95% { background: var(--u-modra-1); } 100% { background: var(--a-plocha); } }
@keyframes p-prep { 0%, 24% { background: #cfd5de; } 26%, 95% { background: var(--a-akcent); } 100% { background: #cfd5de; } }
@keyframes p-prep-k { 0%, 24% { transform: none; } 26%, 95% { transform: translateX(12px); } 100% { transform: none; } }
@keyframes p-propsat { 0%, 31% { background: var(--a-akcent); transform: none; } 32.5% { transform: scale(.93); } 34%, 95% { background: var(--a-zelena); transform: none; } 100% { background: var(--a-akcent); } }
@keyframes p-ven { 0%, 32.5% { opacity: 1; } 34%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes p-dovnitr { 0%, 32.5% { opacity: 0; } 34%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes p-zap { 0%, 35% { opacity: 0; transform: translateY(8px); } 39%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes p-notif { 0%, 43% { opacity: 0; transform: translateY(-24px); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes p-dotyk { 0%, 54% { opacity: 0; transform: translate(70px, 112px) scale(.4); } 55% { opacity: 1; transform: translate(70px, 112px) scale(.7); } 59%, 100% { opacity: 0; transform: translate(70px, 112px) scale(1.5); } }
@keyframes p-zamek { 0%, 56% { translate: 0 0; } 61%, 99% { translate: 0 -105%; } 100% { translate: 0 0; } }
@keyframes p-app-nova {
  0%, 62% { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; background: #ffe08a; }
  67% { max-height: 90px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; opacity: 1; background: #ffe08a; }
  78%, 95% { max-height: 90px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; opacity: 1; background: #fff6d6; }
  100% { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; background: #fff6d6; }
}

.kanaly { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kanaly .mw-polozka > div, .kanaly .posta-radek div { min-width: 0; }
.kanaly .mw-polozka b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruka { position: absolute; width: 200px; height: 340px; }
.ruka > div[data-sablona] { position: absolute; inset: 0; z-index: 1; }
.ruka > div[data-sablona="t-ruka-pred"] { z-index: 3; }
.ruka-zad, .ruka-pred { position: absolute; inset: 0; width: 200px; height: 340px; overflow: visible; }
.ruka > .tel { position: absolute; left: 25px; top: 0; width: 150px; z-index: 2; box-shadow: 0 22px 40px rgba(0, 0, 0, .28); }
.r-ruka { left: 352px; top: 96px; }
.ap-rez .ap-stav { height: 36px; }
.ap-rez .ap-zpet { height: 46px; padding-top: 6px; padding-bottom: 6px; }
.ap-rez .ap-karta-velka { height: 64px; }
.ap-rez .ap-dny span { height: 58px; align-content: center; }
.ap-rez .ap-sloty span { height: 40px; padding: 0; line-height: 40px; }
.r-tl { height: 46px; margin-top: 16px; padding: 0; line-height: 46px; }
.r-dvere { position: absolute; top: 287px; width: 91px; height: 150px; border: 6px solid #4f5d71; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(93, 107, 126, .55) 4px 5px), repeating-linear-gradient(-45deg, transparent 0 4px, rgba(93, 107, 126, .55) 4px 5px); }
.r-dvere::after { content: ""; position: absolute; top: 46px; width: 8px; height: 22px; border-radius: 3px; background: #2d3748; }
.r-dvere-l { left: 33px; transform-origin: 0 50%; }
.r-dvere-l::after { right: 2px; }
.r-dvere-p { left: 123px; transform-origin: 100% 50%; }
.r-dvere-p::after { left: 2px; }
.hraje .r-ruka .dotyk { animation: r-dotyk var(--cyklus) infinite; }
.hraje .r-ruka .ap-sloty .cil { animation: r-slot var(--cyklus) infinite; }
.hraje .r-ruka .r-tl { animation: r-tl var(--cyklus) infinite; }
.hraje .r-ruka .ap-ok { animation: r-ok var(--cyklus) infinite; }
.hraje .r-dvere-l { animation: r-dvere-l var(--cyklus) infinite; }
.hraje .r-dvere-p { animation: r-dvere-p var(--cyklus) infinite; }
@keyframes r-dotyk {
  0%, 20% { opacity: 0; transform: translate(144px, 121px) scale(.4); }
  21% { opacity: 1; transform: translate(144px, 121px) scale(.7); }
  25% { opacity: 0; transform: translate(144px, 121px) scale(1.5); }
  26%, 32% { opacity: 0; transform: translate(100px, 171px) scale(.4); }
  33% { opacity: 1; transform: translate(100px, 171px) scale(.7); }
  37%, 100% { opacity: 0; transform: translate(100px, 171px) scale(1.5); }
}
@keyframes r-slot { 0%, 21% { background: var(--u-zelena-1); color: var(--u-zelena); } 22.5%, 95% { background: var(--o-modra); color: #fff; } 100% { background: var(--u-zelena-1); color: var(--u-zelena); } }
@keyframes r-tl { 0%, 32% { transform: none; filter: none; } 33% { transform: scale(.96); filter: brightness(1.2); } 35%, 100% { transform: none; filter: none; } }
@keyframes r-ok { 0%, 36% { transform: translateY(100%); } 40%, 93% { transform: none; } 97%, 100% { transform: translateY(100%); } }
@keyframes r-dvere-l { 0%, 45% { transform: perspective(700px) rotateY(0); } 54%, 90% { transform: perspective(700px) rotateY(-68deg); } 96%, 100% { transform: perspective(700px) rotateY(0); } }
@keyframes r-dvere-p { 0%, 45% { transform: perspective(700px) rotateY(0); } 54%, 90% { transform: perspective(700px) rotateY(68deg); } 96%, 100% { transform: perspective(700px) rotateY(0); } }
.z-ruka { left: 340px; top: 92px; transform: translateY(330px); }
.ap-zav { background: #0d1530; }
.zv-kamera { position: absolute; inset: 0; }
.zv-kamera svg { width: 100%; height: 100%; display: block; }
.zv-ramecek { position: absolute; left: 50px; top: 120px; width: 200px; height: 300px; border: 3px solid rgba(255, 255, 255, .85); border-radius: 18px; clip-path: polygon(0 0, 28% 0, 28% 5%, 5% 5%, 5% 28%, 0 28%, 0 72%, 5% 72%, 5% 95%, 28% 95%, 28% 100%, 72% 100%, 72% 95%, 95% 95%, 95% 72%, 100% 72%, 100% 28%, 95% 28%, 95% 5%, 72% 5%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.zv-spoust { position: absolute; left: 118px; top: 506px; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .35); }
.zv-form { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #f4f6fb; transform: translateX(100%); }
.zv-form .ap-stav { height: 36px; }
.zv-form .ap-zpet { height: 46px; padding-top: 6px; padding-bottom: 6px; }
.zv-foto { height: 170px; margin: 0 14px 12px; border-radius: 16px; overflow: hidden; }
.zv-foto svg { width: 100%; height: 100%; display: block; }
.zv-form .ap-chipy { height: 42px; }
.zv-form .ap-input { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font-weight: 600; }
.zv-form .ap-input svg.i { width: 16px; height: 16px; color: var(--o-modra); }
.z-tl { height: 46px; margin-top: 16px; padding: 0; line-height: 46px; }
.zv-blesk { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; }
.hraje .lampa-svetlo { animation: z-svetlo var(--cyklus) infinite; }
.hraje .lampa-zarovka { animation: z-zarovka var(--cyklus) infinite; }
.hraje .z-ruka { animation: z-ruka var(--cyklus) infinite; }
.hraje .z-ruka .dotyk { animation: z-dotyk var(--cyklus) infinite; }
.hraje .zv-blesk { animation: z-blesk var(--cyklus) infinite; }
.hraje .zv-form { animation: z-form var(--cyklus) infinite; }
.hraje .z-ruka .ap-ok { animation: z-ok var(--cyklus) infinite; }
.hraje .z-tl { animation: z-tl var(--cyklus) infinite; }
@keyframes z-svetlo { 0%, 5% { opacity: 1; } 6% { opacity: .25; } 7% { opacity: .9; } 8.5% { opacity: .15; } 10%, 66% { opacity: 0; } 67.5% { opacity: .7; } 68.5% { opacity: .15; } 70.5%, 100% { opacity: 1; } }
@keyframes z-zarovka { 0%, 8.5% { fill: #fff2c2; } 10%, 66% { fill: #4a5470; } 70.5%, 100% { fill: #fff2c2; } }
@keyframes z-ruka { 0%, 11% { transform: translateY(330px); } 19%, 88% { transform: none; } 95%, 100% { transform: translateY(330px); } }
@keyframes z-dotyk {
  0%, 26% { opacity: 0; transform: translate(100px, 259px) scale(.4); }
  27% { opacity: 1; transform: translate(100px, 259px) scale(.7); }
  31% { opacity: 0; transform: translate(100px, 259px) scale(1.5); }
  32%, 42% { opacity: 0; transform: translate(100px, 186px) scale(.4); }
  43% { opacity: 1; transform: translate(100px, 186px) scale(.7); }
  47%, 100% { opacity: 0; transform: translate(100px, 186px) scale(1.5); }
}
@keyframes z-blesk { 0%, 27% { opacity: 0; } 28% { opacity: .95; } 32%, 100% { opacity: 0; } }
@keyframes z-form { 0%, 31% { transform: translateX(100%); } 35%, 95% { transform: none; } 100% { transform: translateX(100%); } }
@keyframes z-ok { 0%, 45% { transform: translateY(100%); } 49%, 95% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes z-tl { 0%, 42% { transform: none; filter: none; } 43% { transform: scale(.96); filter: brightness(1.2); } 45%, 100% { transform: none; filter: none; } }
.kp { position: relative; width: 270px; height: 480px; overflow: hidden; background: #eef1f6; color: #1b1f2a; font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.kp-hlava { display: flex; align-items: center; gap: 9px; height: 56px; padding: 0 14px; background: var(--o-navy); color: #fff; }
.kp-hlava img { width: 24px; height: auto; }
.kp-hlava b { display: block; font-size: 15px; line-height: 1.1; }
.kp-hlava small { font-size: 10px; opacity: .8; }
.kp-telo { padding: 16px; }
.kp-nadpis { display: block; height: 30px; margin-bottom: 10px; font-size: 20px; letter-spacing: -.01em; }
.kp-pole { display: block; height: 20px; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: #5b6170; text-transform: uppercase; letter-spacing: .04em; }
.kp-pocet { display: grid; grid-template-columns: 52px 1fr 52px; height: 52px; margin-bottom: 12px; background: #fff; }
.kp-pocet > span { display: grid; place-items: center; background: var(--o-modra); color: #fff; font-size: 26px; font-weight: 700; }
.kp-pocet > b { display: grid; place-items: center; font-size: 24px; }
.kp-pocet em { grid-area: 1 / 1; font-style: normal; }
.kp-pocet em + em { opacity: 0; }
.kp-psc { display: flex; align-items: center; height: 48px; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 2px #dfe3ea; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.kp-psc span { white-space: nowrap; clip-path: inset(0 100% 0 0); }
.kp-sazba { height: 18px; margin: 10px 0 12px; font-size: 13px; font-weight: 600; color: #5b6170; }
.kp-tl { display: grid; place-items: center; height: 52px; background: var(--o-modra); color: #fff; font-size: 16px; font-weight: 700; }
.kp-qr { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: #fff; text-align: center; opacity: 0; transform: translateY(16px); }
.kp-qr b { font-size: 19px; }
.kp-qr .qr { width: 170px; }
.kp-qr span { font-size: 14px; font-weight: 700; }
.kp-qr small { color: #5b6170; }
.pes { position: absolute; left: 66px; top: 236px; width: 130px; height: 139px; }
.pes-ocas { transform-box: view-box; transform-origin: 26px 124px; }
.pes-usmev { opacity: 0; }
.p-ruka { left: 366px; top: 84px; transform: translateY(340px); }
.ap-banka .ap-kamera .qr { transform: rotate(-4deg) scale(.95); }
.ap-banka .ap-platba { transform: translateY(100%); }
.ap-banka .ap-tl-banka { height: 46px; margin-top: 24px; margin-bottom: 0; padding: 0; line-height: 46px; }
.ap-banka .ap-stav { height: 36px; }
.ap-banka .ap-zpet { height: 46px; padding-top: 6px; padding-bottom: 6px; }
.hraje .p-dotyk { animation: k-dotyk var(--cyklus) infinite; }
.hraje .kp-pocet em:first-child { animation: k-nula var(--cyklus) infinite; }
.hraje .kp-pocet em + em { animation: k-jedna var(--cyklus) infinite; }
.hraje .kp-plus { animation: k-plus var(--cyklus) infinite; }
.hraje .kp-psc { animation: k-pole var(--cyklus) infinite; }
.hraje .kp-psc span { animation: k-psc var(--cyklus) infinite; }
.hraje .kp-tl { animation: k-tl var(--cyklus) infinite; }
.hraje .kp-qr { animation: k-qr var(--cyklus) infinite; }
.hraje .p-ruka { animation: k-telefon var(--cyklus) infinite; }
.hraje .p-ruka .ap-skener { animation: k-skener var(--cyklus) infinite; }
.hraje .p-ruka .ap-platba { animation: k-platba var(--cyklus) infinite; }
.hraje .p-ruka .dotyk { animation: k-dotyk-tel var(--cyklus) infinite; }
.hraje .p-ruka .ap-tl-banka { animation: k-zaplatit var(--cyklus) infinite; }
.hraje .p-ruka .ap-ok { animation: k-ok var(--cyklus) infinite; }
.hraje .pes-usmev { animation: k-usmev var(--cyklus) infinite; }
.hraje .pes-pusa { animation: k-pusa var(--cyklus) infinite; }
.hraje .pes-ocas { animation: k-ocas var(--cyklus) infinite; }
@keyframes k-dotyk {
  0%, 12% { opacity: 0; transform: translate(302px, 101px) scale(.4); }
  12.5% { opacity: 1; transform: translate(302px, 101px) scale(.7); }
  15.5% { opacity: 0; transform: translate(302px, 101px) scale(1.5); }
  16%, 20% { opacity: 0; transform: translate(264px, 135px) scale(.4); }
  20.5% { opacity: 1; transform: translate(264px, 135px) scale(.7); }
  23.5% { opacity: 0; transform: translate(264px, 135px) scale(1.5); }
  24%, 30% { opacity: 0; transform: translate(264px, 171px) scale(.4); }
  30.5% { opacity: 1; transform: translate(264px, 171px) scale(.7); }
  33.5%, 100% { opacity: 0; transform: translate(264px, 171px) scale(1.5); }
}
@keyframes k-nula { 0%, 12.5% { opacity: 1; } 13%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes k-jedna { 0%, 12.5% { opacity: 0; } 13%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-plus { 0%, 12% { filter: none; } 12.5%, 14% { filter: brightness(1.35); } 15%, 100% { filter: none; } }
@keyframes k-pole { 0%, 20% { box-shadow: inset 0 0 0 2px #dfe3ea; } 20.5%, 29% { box-shadow: inset 0 0 0 3px var(--o-modra); } 30%, 100% { box-shadow: inset 0 0 0 2px #dfe3ea; } }
@keyframes k-psc { 0%, 21.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(6, end); } 27.5%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes k-tl { 0%, 30% { filter: none; transform: none; } 30.5% { filter: brightness(1.2); transform: scale(.97); } 32%, 100% { filter: none; transform: none; } }
@keyframes k-qr { 0%, 32% { opacity: 0; transform: translateY(16px); } 35%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes k-telefon { 0%, 38% { transform: translateY(340px); } 46%, 93% { transform: none; } 99%, 100% { transform: translateY(340px); } }
@keyframes k-skener { 0%, 46% { opacity: 0; transform: none; } 48% { opacity: 1; transform: none; } 53% { opacity: 1; transform: translateY(180px); } 57% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: none; } }
@keyframes k-platba { 0%, 57% { transform: translateY(100%); } 61%, 97% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes k-dotyk-tel { 0%, 68% { opacity: 0; transform: translate(100px, 166px) scale(.4); } 69% { opacity: 1; transform: translate(100px, 166px) scale(.7); } 73%, 100% { opacity: 0; transform: translate(100px, 166px) scale(1.5); } }
@keyframes k-zaplatit { 0%, 68% { transform: none; filter: none; } 69% { transform: scale(.96); filter: brightness(1.3); } 71%, 100% { transform: none; filter: none; } }
@keyframes k-ok { 0%, 70% { transform: translateY(100%); } 74%, 97% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes k-usmev { 0%, 75% { opacity: 0; } 77%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-pusa { 0%, 75% { opacity: 1; } 77%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes k-ocas { 0%, 76% { transform: none; } 78% { transform: rotate(16deg); } 80% { transform: rotate(-8deg); } 82% { transform: rotate(16deg); } 84% { transform: rotate(-8deg); } 86% { transform: rotate(16deg); } 88%, 100% { transform: none; } }
.ukazovak { position: absolute; z-index: 6; left: 0; top: 0; width: 130px; height: 679px; transform-origin: 46px 9px; transform: translate(440px, 460px) rotate(-18deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .22)); }
.ukazovak svg { display: block; width: 130px; height: 679px; }
.p-uk { transform: translate(240px, 460px) rotate(-8deg); }
.hraje .r-uk { animation: r-uk var(--cyklus) infinite; }
.hraje .z-uk { animation: z-uk var(--cyklus) infinite; }
.hraje .p-uk { animation: p-uk var(--cyklus) infinite; }
@keyframes r-uk {
  0%, 10% { transform: translate(456px, 460px) rotate(-18deg); }
  19% { transform: translate(450px, 208px) rotate(-18deg); }
  21% { transform: translate(450px, 212px) rotate(-18deg); }
  24% { transform: translate(450px, 208px) rotate(-18deg); }
  31% { transform: translate(406px, 258px) rotate(-18deg); }
  33% { transform: translate(406px, 262px) rotate(-18deg); }
  36% { transform: translate(406px, 258px) rotate(-18deg); }
  45%, 100% { transform: translate(436px, 460px) rotate(-18deg); }
}
@keyframes z-uk {
  0%, 18% { transform: translate(416px, 460px) rotate(-18deg); }
  25% { transform: translate(394px, 342px) rotate(-18deg); }
  27% { transform: translate(394px, 346px) rotate(-18deg); }
  30% { transform: translate(394px, 342px) rotate(-18deg); }
  41% { transform: translate(394px, 269px) rotate(-18deg); }
  43% { transform: translate(394px, 273px) rotate(-18deg); }
  46% { transform: translate(394px, 269px) rotate(-18deg); }
  54%, 100% { transform: translate(416px, 460px) rotate(-18deg); }
}
@keyframes p-uk {
  0%, 5% { transform: translate(226px, 460px) rotate(-8deg); }
  11% { transform: translate(256px, 92px) rotate(-8deg); }
  12.5% { transform: translate(256px, 96px) rotate(-8deg); }
  14% { transform: translate(256px, 92px) rotate(-8deg); }
  19% { transform: translate(218px, 126px) rotate(-8deg); }
  20.5% { transform: translate(218px, 130px) rotate(-8deg); }
  22% { transform: translate(218px, 126px) rotate(-8deg); }
  29% { transform: translate(218px, 162px) rotate(-8deg); }
  30.5% { transform: translate(218px, 166px) rotate(-8deg); }
  32% { transform: translate(218px, 162px) rotate(-8deg); }
  39% { transform: translate(218px, 460px) rotate(-8deg); }
  40%, 60% { transform: translate(446px, 460px) rotate(-18deg); }
  67% { transform: translate(420px, 241px) rotate(-18deg); }
  69% { transform: translate(420px, 245px) rotate(-18deg); }
  72% { transform: translate(420px, 241px) rotate(-18deg); }
  80%, 100% { transform: translate(436px, 460px) rotate(-18deg); }
}
.kursor-sipka { position: absolute; z-index: 8; left: 0; top: 0; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.dl-scena .kursor-sipka { opacity: 0; }
.bh-kurzor, .as-kurzor { opacity: 0; }
@keyframes bh-lesk { to { background-position: -200% 0; } }
.bh-okno { position: absolute; z-index: 0; left: 32px; top: 42px; width: 200px; height: 212px; overflow: hidden; }
.bh-venku { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-auto { position: absolute; z-index: 2; left: 4px; top: 130px; width: 140px; height: 68px; }
.bh-popelnice { position: absolute; z-index: 1; left: 154px; top: 118px; width: 22px; height: 30px; transform-origin: 50% 100%; }
.bh-popelar { position: absolute; z-index: 1; left: 180px; top: 108px; width: 16px; height: 40px; opacity: 0; }
.bh-nb { position: absolute; left: 250px; top: 112px; width: 290px; height: 204px; padding: 10px; border-radius: 12px 12px 0 0; background: #1d2333; box-shadow: 0 18px 30px -12px rgba(16, 38, 95, .35); }
.bh-obr { height: 100%; overflow: hidden; border-radius: 3px; background: #fff; color: var(--u-text); font: 500 10px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bh-lista { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; background: var(--u-plocha); border-bottom: 1px solid var(--u-linka); }
.bh-lista i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #d3d9e2; }
.bh-lista span { display: flex; align-items: center; gap: 4px; margin-left: 6px; height: 12px; padding: 0 7px; border-radius: 4px; background: #fff; color: var(--u-text-2); font-size: 7.5px; }
.bh-lista svg.i { width: 7px; height: 7px; }
.bh-hlava { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; background: var(--o-navy); color: #fff; font-size: 9.5px; }
.bh-hlava img { width: 10px; height: auto; }
.bh-hlava span { width: 24px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .35); }
.bh-hlava span:first-of-type { margin-left: auto; }
.bh-telo { padding: 8px 10px; }
.bh-pole { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 3px 0 8px; border: 2px solid var(--u-modra); border-radius: 8px; background: #fff; box-shadow: 0 0 0 3px rgb(29 80 191 / .1); font-size: 11px; font-weight: 600; }
.bh-pole > svg.i { width: 12px; height: 12px; flex: none; color: var(--u-modra); stroke-width: 2.2; }
.bh-dotaz { white-space: nowrap; }
.bh-tl { margin-left: auto; padding: 4px 9px; border-radius: 6px; background: var(--o-modra); color: #fff; font-size: 9.5px; font-weight: 700; }
.bh-odpoved { margin-top: 8px; padding: 7px 10px; border: 1px solid #d7e2f8; border-radius: 10px; background: linear-gradient(135deg, #f4f7ff, #e9effc); }
.bh-odp-hlava { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bh-ai, .as-ai { display: grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 5px; background: linear-gradient(135deg, var(--u-modra), #5b86ea); color: #fff; }
.bh-ai svg.i { width: 10px; height: 10px; }
.bh-odp-hlava small { color: var(--u-modra); font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bh-odp-telo { display: grid; }
.bh-odp-telo > * { grid-area: 1 / 1; }
.bh-kostra { display: grid; align-content: start; gap: 6px; padding-top: 4px; opacity: 0; }
.bh-kostra i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #d8e2f5 0%, #f3f6fd 50%, #d8e2f5 100%) 0 0 / 200% 100%; animation: bh-lesk 1.2s linear infinite; }
.bh-kostra i:nth-child(2) { width: 62%; }
.bh-text { font-size: 11px; line-height: 1.38; }
.bh-text b { color: var(--u-modra-8); }
.bh-zdroje { display: flex; gap: 5px; margin-top: 6px; }
.bh-zdroje span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border: 1px solid #d7e2f8; border-radius: 99px; background: #fff; color: var(--u-modra-8); font-size: 8.5px; font-weight: 600; }
.bh-zdroje svg.i { width: 9px; height: 9px; }
.hraje .bh-pole { animation: bh-pole var(--cyklus) infinite; }
.hraje .bh-dotaz { animation: bh-psani var(--cyklus) infinite; }
.hraje .bh-kurzor { animation: bh-kurzor var(--cyklus) infinite; }
.hraje .bh-tl { animation: bh-tl var(--cyklus) infinite; }
.hraje .bh-odpoved { animation: bh-odpoved var(--cyklus) infinite; }
.hraje .bh-kostra { animation: bh-kostra var(--cyklus) infinite; }
.hraje .bh-text { animation: bh-text var(--cyklus) infinite; }
.hraje .bh-zdroje span { animation: bh-zdroj var(--cyklus) infinite; }
.hraje .bh-zdroje span + span { animation-name: bh-zdroj2; }
.hraje .bh-auto { animation: bh-auto var(--cyklus) infinite; }
.hraje .bh-majak { animation: bh-majak .7s steps(1) infinite; }
.hraje .bh-popelnice { animation: bh-popelnice var(--cyklus) infinite; }
.hraje .bh-popelar { animation: bh-popelar var(--cyklus) infinite; }
@keyframes bh-pole { 0%, 3% { border-color: #cfd8e6; box-shadow: none; } 5%, 96% { border-color: var(--u-modra); box-shadow: 0 0 0 3px rgb(29 80 191 / .1); } 100% { border-color: #cfd8e6; box-shadow: none; } }
@keyframes bh-psani { 0%, 5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(24, end); } 20%, 96% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes bh-kurzor { 0%, 12% { opacity: 0; transform: translate(430px, 290px); } 15% { opacity: 1; transform: translate(430px, 290px); } 22%, 26% { opacity: 1; transform: translate(492px, 184px); } 30%, 100% { opacity: 0; transform: translate(492px, 184px); } }
@keyframes bh-tl { 0%, 23% { transform: none; filter: none; } 24% { transform: scale(.92); filter: brightness(1.15); } 25.5%, 100% { transform: none; filter: none; } }
@keyframes bh-odpoved { 0%, 25% { opacity: 0; transform: translateY(8px); } 28%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes bh-kostra { 0%, 37% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes bh-text { 0%, 38% { opacity: 0; } 41%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bh-zdroj { 0%, 42% { opacity: 0; transform: scale(.85); } 45%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bh-zdroj2 { 0%, 44% { opacity: 0; transform: scale(.85); } 47%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bh-auto { 0%, 47% { transform: translateX(220px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 58%, 84% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .9, .4); } 95%, 100% { transform: translateX(-170px); } }
@keyframes bh-majak { 50% { fill: #fde68a; } }
@keyframes bh-popelar { 0%, 58% { opacity: 0; transform: translateX(-20px); } 61%, 67% { opacity: 1; transform: none; } 70%, 79% { opacity: 1; transform: translateX(-8px); } 82% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes bh-popelnice { 0%, 67% { transform: none; } 70% { transform: translate(-8px, 0); } 72.5% { transform: translate(-16px, -12px) rotate(-50deg); } 74.5%, 76.5% { transform: translate(-20px, -12px) rotate(-105deg); } 79% { transform: translate(-8px, 0); } 82%, 100% { transform: none; } }
.as-nb { position: absolute; z-index: 2; left: 250px; top: 112px; width: 290px; height: 204px; padding: 10px; border-radius: 12px 12px 0 0; background: #1d2333; box-shadow: 0 18px 30px -12px rgba(16, 38, 95, .35); transform-origin: 50% 100%; }
.as-nb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#d5dae3, #b8c0cc); opacity: 0; }
.as-obr { display: flex; height: 100%; overflow: hidden; border-radius: 3px; background: var(--a-plocha); color: var(--a-text); font: 500 8px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.as-obr svg.i { width: 10px; height: 10px; }
.as-bok { width: 26px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; background: var(--a-bok); color: #c8d3e0; }
.as-bok img { width: 20px; height: auto; margin-bottom: 5px; }
.as-bok span { display: grid; place-items: center; width: 19px; height: 17px; border-radius: 4px; }
.as-bok .akt { background: rgb(255 255 255 / .12); color: #fff; }
.as-hlavni { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-lista { display: flex; align-items: center; height: 20px; flex: none; padding: 0 5px 0 8px; background: #fff; border-bottom: 1px solid var(--a-linka); color: var(--a-text-2); font-weight: 700; }
.as-tl-ai { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; background: linear-gradient(135deg, var(--u-modra), #5b86ea); color: #fff; font-size: 7.5px; }
.as-obr .as-tl-ai svg.i { width: 8px; height: 8px; }
.as-plocha { flex: 1; min-height: 0; display: flex; }
.as-seznam { flex: 1; min-width: 0; padding: 6px; }
.as-sez-hlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.as-sez-hlava b { font-size: 10px; }
.as-sez-hlava span { padding: 1px 6px; border-radius: 99px; background: var(--a-akcent); color: #fff; font-size: 7px; font-weight: 700; }
.as-radek { display: grid; gap: 3px; margin-bottom: 4px; padding: 5px 6px; overflow: hidden; border: 1px solid var(--a-linka); border-radius: 5px; background: #fff; }
.as-stary i { display: block; width: 86%; height: 5px; border-radius: 3px; background: #d9dee6; }
.as-stary i:nth-child(2) { width: 46%; height: 4px; background: #e8ebf0; }
.as-stary .as-pruh-zel { width: 30%; height: 4px; justify-self: end; margin-top: -7px; background: #cdeed7; }
.as-novy { max-height: 40px; border-color: #f3d27a; background: #fff6d6; }
.as-novy b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8.5px; }
.as-novy small { display: flex; align-items: center; justify-content: space-between; color: var(--a-text-2); font-size: 7px; }
.as-zverej { padding: 1px 5px; border-radius: 99px; background: #e7f8ec; color: #15803d; font-size: 6.5px; font-style: normal; font-weight: 700; }
.as-panel { width: 128px; flex: none; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-left: 1px solid var(--a-linka); }
.as-panel-hlava { display: flex; align-items: center; gap: 4px; height: 20px; flex: none; padding: 0 6px; border-bottom: 1px solid var(--a-linka); white-space: nowrap; }
.as-ai { display: grid; place-items: center; flex: none; width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, var(--u-modra), #5b86ea); color: #fff; }
.as-obr .as-ai svg.i { width: 8px; height: 8px; }
.as-obr .as-panel-hlava > svg.i { margin-left: auto; width: 8px; height: 8px; color: var(--a-text-2); }
.as-zpravy { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2px 6px 5px; overflow: hidden; }
.as-z { flex: none; width: max-content; max-width: 100px; max-height: 50px; margin-top: 4px; padding: 3px 6px; overflow: hidden; border-radius: 8px; font-size: 7.5px; line-height: 1.3; }
.as-ja { align-self: flex-end; border-bottom-right-radius: 3px; background: var(--u-modra); color: #fff; }
.as-on { align-self: flex-start; border-bottom-left-radius: 3px; background: #eef1f6; }
.as-t1 { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; }
.as-tecky i { display: inline-block; width: 3.5px; height: 3.5px; margin: 0 1px; border-radius: 50%; background: #8a94a6; }
.as-z4 .as-tecky, .as-hotovo { display: inline-block; max-width: 0; overflow: hidden; vertical-align: middle; white-space: nowrap; }
.as-z4 .as-tecky { margin-left: 3px; line-height: 0; }
.as-hotovo { max-width: 14px; }
.as-obr .as-hotovo svg.i { width: 9px; height: 9px; margin-left: 3px; vertical-align: -1.5px; color: var(--u-zelena); stroke-width: 3; }
.as-vstup { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; height: 22px; flex: none; margin: 0 5px 5px; padding: 0 3px 0 7px; border: 1px solid var(--a-linka); border-radius: 99px; color: var(--a-text-2); font-size: 8px; white-space: nowrap; }
.as-misto, .as-psani { grid-area: 1 / 1; min-width: 0; overflow: hidden; }
.as-psani { direction: rtl; text-align: left; color: var(--a-text); }
.as-pis { display: inline-block; width: 0; overflow: hidden; direction: ltr; vertical-align: middle; }
.as-odeslat { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--u-modra); color: #fff; }
.as-obr .as-odeslat svg.i { width: 9px; height: 9px; stroke-width: 2.4; }
.as-letenka { position: absolute; z-index: 3; left: 34px; top: 322px; width: 126px; height: 36px; transform: rotate(-4deg); filter: drop-shadow(0 2px 2px rgba(80, 50, 20, .25)); }
.as-letenka svg { display: block; width: 100%; height: 100%; }
.as-ruka { position: absolute; z-index: 4; left: 78px; top: 318px; width: 144px; height: 272px; transform: translate(30px, 150px); }
.hraje .as-kurzor { animation: as-kurzor var(--cyklus) infinite; }
.hraje .as-tl-ai { animation: as-tl var(--cyklus) infinite; }
.hraje .as-panel { animation: as-panel var(--cyklus) infinite; }
.hraje .as-misto { animation: as-misto var(--cyklus) infinite; }
.hraje .as-pis1 { animation: as-pis1 var(--cyklus) infinite; }
.hraje .as-pis2 { animation: as-pis2 var(--cyklus) infinite; }
.hraje .as-odeslat { animation: as-odeslat var(--cyklus) infinite; }
.hraje .as-z1 { animation: as-z1 var(--cyklus) infinite; }
.hraje .as-t1 { animation: as-t1 var(--cyklus) infinite; }
.hraje .as-z2 { animation: as-z2 var(--cyklus) infinite; }
.hraje .as-z3 { animation: as-z3 var(--cyklus) infinite; }
.hraje .as-z4 { animation: as-z4 var(--cyklus) infinite; }
.hraje .as-z4 .as-tecky { animation: as-pisu var(--cyklus) infinite; }
.hraje .as-hotovo { animation: as-hotovo var(--cyklus) infinite; }
.hraje .as-tecky i { animation: as-tecka 1s infinite; }
.hraje .as-tecky i:nth-child(2) { animation-delay: .15s; }
.hraje .as-tecky i:nth-child(3) { animation-delay: .3s; }
.hraje .as-novy { animation: as-novy var(--cyklus) infinite; }
.hraje .as-novy .as-zverej { animation: as-zverej var(--cyklus) infinite; }
.hraje .as-nb { animation: as-viko var(--cyklus) infinite; }
.hraje .as-nb::after { animation: as-viko-zada var(--cyklus) infinite; }
.hraje .as-ruka { animation: as-ruka var(--cyklus) infinite; }
.hraje .as-letenka { animation: as-letenka var(--cyklus) infinite; }
.hraje .as-para { animation: as-para 2.4s ease-in-out infinite; }
@keyframes as-kurzor { 0%, 2% { opacity: 0; transform: translate(420px, 260px); } 3.5% { opacity: 1; transform: translate(420px, 260px); } 6.5%, 9% { opacity: 1; transform: translate(489px, 129px); } 11%, 100% { opacity: 0; transform: translate(489px, 129px); } }
@keyframes as-tl { 0%, 7.5% { transform: none; filter: none; } 8.2% { transform: scale(.92); filter: brightness(1.2); } 9%, 100% { transform: none; filter: none; } }
@keyframes as-panel { 0%, 8.5% { width: 0; border-left-width: 0; } 11.5%, 93% { width: 128px; border-left-width: 1px; } 93.5%, 100% { width: 0; border-left-width: 0; } }
@keyframes as-misto { 0%, 12.5% { opacity: 1; } 13%, 26% { opacity: 0; } 26.5%, 34.5% { opacity: 1; } 35%, 43% { opacity: 0; } 43.5%, 100% { opacity: 1; } }
@keyframes as-pis1 { 0%, 13% { width: 0; animation-timing-function: steps(41, end); } 25%, 26% { width: 162px; } 26.5%, 100% { width: 0; } }
@keyframes as-pis2 { 0%, 35% { width: 0; animation-timing-function: steps(17, end); } 41.5%, 43% { width: 77px; } 43.5%, 100% { width: 0; } }
@keyframes as-odeslat { 0%, 25.5%, 27%, 42.5%, 44%, 100% { transform: none; filter: none; } 26%, 43% { transform: scale(.85); filter: brightness(1.25); } }
@keyframes as-z1 { 0%, 26% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } 27.5%, 93% { max-height: 50px; margin-top: 4px; padding-block: 3px; opacity: 1; } 93.5%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } }
@keyframes as-t1 { 0%, 28.5% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } 29.5%, 31.5% { max-height: 50px; margin-top: 4px; padding-block: 3px; opacity: 1; } 32.5%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } }
@keyframes as-z2 { 0%, 32% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } 33.5%, 93% { max-height: 50px; margin-top: 4px; padding-block: 3px; opacity: 1; } 93.5%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } }
@keyframes as-z3 { 0%, 43% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } 44.5%, 93% { max-height: 50px; margin-top: 4px; padding-block: 3px; opacity: 1; } 93.5%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } }
@keyframes as-z4 { 0%, 46% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } 47.5%, 93% { max-height: 50px; margin-top: 4px; padding-block: 3px; opacity: 1; } 93.5%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; } }
@keyframes as-pisu { 0%, 62% { max-width: 20px; } 62.5%, 100% { max-width: 0; } }
@keyframes as-hotovo { 0%, 62.5% { max-width: 0; } 63%, 100% { max-width: 14px; } }
@keyframes as-tecka { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-1.5px); } }
@keyframes as-novy { 0%, 62.5% { max-height: 0; margin-bottom: 0; padding-block: 0; border-width: 0; opacity: 0; } 64.5%, 93% { max-height: 40px; margin-bottom: 4px; padding-block: 5px; border-width: 1px; opacity: 1; } 93.5%, 100% { max-height: 0; margin-bottom: 0; padding-block: 0; border-width: 0; opacity: 0; } }
@keyframes as-zverej { 0%, 65% { opacity: 0; transform: scale(.7); } 66.5% { opacity: 1; transform: scale(1.2); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes as-viko { 0%, 72% { transform: none; } 77%, 95% { transform: scaleY(.05); } 99%, 100% { transform: none; } }
@keyframes as-viko-zada { 0%, 74% { opacity: 0; } 76%, 95.5% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes as-ruka { 0%, 78% { transform: translate(30px, 150px); } 82%, 84% { transform: none; } 90%, 100% { transform: translate(30px, 150px); } }
@keyframes as-letenka { 0%, 84% { opacity: 1; transform: rotate(-4deg); } 90% { opacity: 1; transform: translate(30px, 150px) rotate(-4deg); } 90.5%, 95% { opacity: 0; transform: rotate(-4deg); } 98%, 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes as-para { 0%, 100% { opacity: .2; transform: none; } 50% { opacity: .9; transform: translateY(-3px); } }
.ak { width: 840px; height: 525px; display: flex; background: var(--a-plocha); color: var(--a-text); font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ak svg.i { width: 15px; height: 15px; }
.ak-bok { width: 168px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; background: var(--a-bok); color: #c8d3e0; font-size: 12.5px; }
.ak-bok img { width: 92px; height: auto; margin: 0 0 18px 8px; }
.ak-bok span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.ak-bok .akt { background: rgb(255 255 255 / .1); color: #fff; }
.ak-hlavni { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ak-lista { display: flex; flex: none; align-items: center; gap: 6px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--a-linka); background: #fff; color: var(--a-text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ak-lista svg.i { width: 12px; height: 12px; }
.ak-lista b { color: var(--a-text); font-weight: 600; }
.ak-ulozeno { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 10px; border-radius: 99px; background: #e7f8ec; color: #15803d; font-size: 12px; font-style: normal; }
.ak-propsat { display: inline-grid; margin-left: 10px; padding: 8px 16px; border-radius: 99px; background: var(--a-zelena); color: #fff; font-weight: 700; }
.ak-propsat em { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-style: normal; }
.ak-propsat em:first-child { opacity: 0; }
.ak-telo { flex: 1; min-height: 0; padding: 16px 18px; }
.ak-editor { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; background: #fff; }
.ak-nazev { font-size: 20px; font-weight: 700; line-height: 26px; letter-spacing: -.01em; }
.ak-chipy { display: flex; gap: 6px; height: 24px; margin-bottom: 4px; }
.ak-chipy span { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 99px; background: var(--a-plocha); color: var(--a-text-2); font-size: 11.5px; font-weight: 600; }
.ak-chipy svg.i { width: 13px; height: 13px; }
.ak-blok { position: relative; border: 1.5px dashed #cdd5e1; border-radius: 10px; background: #fff; }
.ak-stitek { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 6px; background: #eef1f6; color: var(--a-text-2); font-size: 10.5px; font-weight: 700; }
.ak-stitek svg.i { width: 12px; height: 12px; }
.ak-text { padding: 10px 12px; }
.ak-text p { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.ak-slot { position: relative; flex: none; }
.ak-slot-dok { height: 52px; }
.ak-slot > * { position: absolute; inset: 0; }
.ak-radek { height: 150px; }
.ak-radek > .ak-text { right: auto; width: calc(50% - 6px); overflow: hidden; }
.ak-radek > .ak-misto, .ak-radek > .ak-foto { left: auto; width: calc(50% - 6px); }
.ak-misto { border: 2px dashed var(--a-akcent); border-radius: 10px; background: #eef4ff; opacity: 0; }
.ak-foto { overflow: hidden; }
.ak-foto .ak-stitek { position: absolute; left: 10px; top: 10px; background: rgb(255 255 255 / .94); }
.ak-obr { position: absolute; inset: 4px; border-radius: 7px; background: center 60% / cover; }
.ak-pruh { position: absolute; left: 24px; right: 24px; top: 50%; height: 6px; margin-top: -3px; overflow: hidden; border-radius: 3px; background: #dfe5ee; opacity: 0; }
.ak-pruh i { display: block; width: 100%; height: 100%; background: var(--a-akcent); }
.ak-dok { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.ak-dok .ak-pruh { left: auto; right: 16px; width: 160px; }
.ak-pdf { display: grid; place-items: center; flex: none; width: 26px; height: 32px; border-radius: 4px; background: #e5484d; color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; }
.ak-dok-txt { display: grid; line-height: 1.3; }
.ak-dok-txt small { color: var(--a-text-2); font-size: 11px; }
.ak-tah { position: absolute; z-index: 8; left: 0; top: 0; opacity: 0; }
.ak-tah .kursor-sipka { max-width: none; opacity: 1; }
.ak-soubor { position: absolute; left: 10px; top: 14px; width: 112px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: var(--u-stin); color: var(--a-text); font-size: 10.5px; line-height: 1.3; rotate: 3deg; transform-origin: 0 0; }
.ak-soubor > span { display: block; height: 64px; border-radius: 6px; background: center / cover; }
.ak-soubor-dok { top: -40px; }
.ak-soubor-dok > .ak-pdf { display: grid; width: 36px; height: 44px; margin: 2px auto; border-radius: 5px; background: #e5484d; font-size: 10px; }
.ak-soubor b { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hraje .ak-tah-foto { animation: ak-tah-foto var(--cyklus) infinite; }
.hraje .ak-tah-foto .ak-soubor { animation: ak-soubor-foto var(--cyklus) infinite; }
.hraje .ak-radek .ak-misto { animation: ak-misto-foto var(--cyklus) infinite; }
.hraje .ak-radek > .ak-text { animation: ak-text var(--cyklus) infinite; }
.hraje .ak-foto { animation: ak-foto var(--cyklus) infinite; }
.hraje .ak-foto .ak-pruh { animation: ak-pruh-foto var(--cyklus) infinite; }
.hraje .ak-foto .ak-pruh i { animation: ak-pruh-foto-i var(--cyklus) infinite; }
.hraje .ak-obr { animation: ak-obr var(--cyklus) infinite; }
.hraje .ak-tah-dok { animation: ak-tah-dok var(--cyklus) infinite; }
.hraje .ak-tah-dok .ak-soubor { animation: ak-soubor-dok var(--cyklus) infinite; }
.hraje .ak-slot-dok .ak-misto { animation: ak-misto-dok var(--cyklus) infinite; }
.hraje .ak-dok { animation: ak-dok var(--cyklus) infinite; }
.hraje .ak-dok .ak-pruh { animation: ak-pruh-dok var(--cyklus) infinite; }
.hraje .ak-dok .ak-pruh i { animation: ak-pruh-dok-i var(--cyklus) infinite; }
.hraje .ak-ulozeno { animation: ak-ulozeno var(--cyklus) infinite; }
.hraje .ak-propsat { animation: ak-propsat var(--cyklus) infinite; }
.hraje .ak-propsat em:first-child { animation: ak-ven var(--cyklus) infinite; }
.hraje .ak-propsat .hotovo { animation: ak-dovnitr var(--cyklus) infinite; }
@keyframes ak-tah-foto {
  0%, 5% { opacity: 0; transform: translate(860px, 540px); }
  7% { opacity: 1; transform: translate(860px, 540px); }
  20%, 23% { opacity: 1; transform: translate(630px, 212px); }
  25% { opacity: 1; transform: translate(630px, 212px); }
  33%, 100% { opacity: 0; transform: translate(860px, 520px); }
}
@keyframes ak-soubor-foto { 0%, 22.5% { opacity: 1; transform: none; } 24.5%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes ak-text { 0%, 14% { width: 100%; } 18.5%, 96% { width: calc(50% - 6px); } 100% { width: 100%; } }
@keyframes ak-misto-foto { 0%, 15.5% { opacity: 0; transform: scale(.97); } 18.5%, 23% { opacity: 1; transform: none; } 24.5%, 100% { opacity: 0; transform: none; } }
@keyframes ak-foto { 0%, 23.5% { opacity: 0; } 24%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ak-pruh-foto { 0%, 24% { opacity: 0; } 24.5%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes ak-pruh-foto-i { 0%, 24.5% { width: 0; } 31%, 100% { width: 100%; } }
@keyframes ak-obr { 0%, 31% { opacity: 0; transform: scale(1.06); } 34%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ak-tah-dok {
  0%, 36% { opacity: 0; transform: translate(860px, 540px); }
  38% { opacity: 1; transform: translate(860px, 540px); }
  49%, 52% { opacity: 1; transform: translate(470px, 340px); }
  62%, 64% { opacity: 1; transform: translate(752px, 24px); }
  65% { opacity: 1; transform: translate(752px, 24px) scale(.85); }
  66%, 70% { opacity: 1; transform: translate(752px, 24px); }
  78%, 100% { opacity: 0; transform: translate(860px, 120px); }
}
@keyframes ak-soubor-dok { 0%, 51.5% { opacity: 1; transform: none; } 53.5%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes ak-misto-dok { 0%, 45% { opacity: 0; transform: scale(.97); } 47.5%, 52% { opacity: 1; transform: none; } 53.5%, 100% { opacity: 0; transform: none; } }
@keyframes ak-dok { 0%, 52.5% { opacity: 0; } 53%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ak-pruh-dok { 0%, 53% { opacity: 0; } 53.5%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes ak-pruh-dok-i { 0%, 53.5% { width: 0; } 58%, 100% { width: 100%; } }
@keyframes ak-ulozeno { 0%, 59% { opacity: 0; transform: translateY(-4px); } 61%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ak-propsat { 0%, 64.5% { background: var(--a-akcent); transform: none; } 65% { transform: scale(.93); } 66%, 96% { background: var(--a-zelena); transform: none; } 100% { background: var(--a-akcent); } }
@keyframes ak-ven { 0%, 65% { opacity: 1; } 66%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ak-dovnitr { 0%, 65% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
.scena-ram .kursor-sipka { opacity: 0; }
.ao-adm { position: absolute; left: 24px; top: 28px; width: 760px; height: 470px; border-radius: 10px 0 0 0; font: 500 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ao-adm svg.i { width: 13px; height: 13px; stroke-width: 2; }
.ao-hore { display: flex; align-items: center; gap: 16px; height: 38px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--a-linka); color: var(--a-text-2); font-size: 10.5px; }
.ao-hore img { width: auto; height: 22px; margin-right: auto; }
.ao-hore span { display: inline-flex; align-items: center; gap: 5px; }
.ao-hore b { color: var(--a-text); font-weight: 700; }
.ao-plocha { display: flex; flex: 1; min-height: 0; background: var(--a-plocha); }
.ao-bok { width: 148px; flex: none; display: flex; flex-direction: column; gap: 1px; padding: 10px 7px; background: var(--a-bok); color: #c8d3e0; font-size: 10.5px; }
.ao-bok span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.ao-bok svg.i { width: 12px; height: 12px; opacity: .85; }
.ao-bok .akt { background: rgb(255 255 255 / .1); color: #fff; }
.ao-karta { width: 572px; flex: none; margin: 10px; display: flex; flex-direction: column; border: 1px solid var(--a-linka); border-radius: 8px; background: #fff; overflow: hidden; }
.ao-hlava { display: flex; align-items: center; gap: 10px; height: 46px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--a-linka); }
.ao-hlava b { color: var(--a-text); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ao-hlava .adm-ulozeno { margin-left: auto; opacity: 1; transform: none; font-size: 10px; }
.ao-zpet { padding: 4px 10px; border-radius: 99px; background: var(--a-bok); color: #fff; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.ao-sloupce { display: grid; grid-template-columns: 300px 112px 160px; flex: 1; min-height: 0; }
.ao-sloupce small { display: block; color: #3a4250; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ao-form { padding: 12px 14px; }
.ao-input { display: flex; align-items: center; height: 28px; margin: 4px 0 10px; padding: 0 9px; border: 1px solid var(--a-linka); border-radius: 5px; color: var(--a-text); font-size: 11.5px; }
.ao-zona { position: relative; height: 230px; margin-top: 4px; border: 1.5px dashed #d5dbe5; border-radius: 6px; transition: none; }
.ao-napoveda { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--a-text-2); font-size: 11px; opacity: 0; }
.ao-blok { position: absolute; left: 7px; right: 7px; border: 1px solid var(--a-linka); border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }
.ao-text { top: 7px; height: 100px; padding: 8px 10px; overflow: hidden; }
.ao-text p { margin-top: 6px; color: var(--a-text); font-size: 11.5px; line-height: 1.55; }
.ao-foto { top: 115px; height: 96px; overflow: hidden; }
.ao-foto .ao-stitek { position: absolute; left: 8px; top: 8px; background: rgb(255 255 255 / .94); }
.ao-stitek { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px; border-radius: 5px; background: #eef1f6; color: var(--a-text-2); font-size: 9.5px; font-weight: 700; }
.ao-stitek svg.i { width: 11px; height: 11px; }
.ao-obr { position: absolute; inset: 3px; border-radius: 4px; background: center / cover; }
.ao-pruh { position: absolute; left: 24px; right: 24px; top: 50%; height: 6px; margin-top: -3px; overflow: hidden; border-radius: 3px; background: #dfe5ee; opacity: 0; }
.ao-pruh i { display: block; width: 100%; height: 100%; background: var(--a-akcent); }
.ao-paleta { display: flex; flex-direction: column; gap: 1px; padding: 12px 8px; border-left: 1px solid var(--a-linka); }
.ao-paleta small { margin: 0 0 6px 4px; }
.ao-paleta span { display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 6px; border-radius: 5px; color: var(--a-text); font-size: 10.5px; white-space: nowrap; }
.ao-paleta svg.i { width: 12px; height: 12px; color: var(--a-text-2); }
.ao-paleta i { height: 1px; margin: 5px 0; background: var(--a-linka); }
.ao-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-left: 1px solid var(--a-linka); background: #f7f8fa; }
.ao-stav { display: flex; align-items: flex-start; gap: 6px; height: 36px; }
.ao-stav b { display: block; color: var(--a-text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ao-stav div small { color: var(--a-text-2); font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ao-stav-ik { display: grid; margin-left: auto; }
.ao-stav-ik em { grid-area: 1 / 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; }
.ao-stav-ik svg.i { width: 11px; height: 11px; stroke-width: 2.4; }
.ao-rozprac { background: #f59e0b; opacity: 0; }
.ao-zverej { background: var(--a-zelena); }
.ao-propsat, .ao-tl { display: grid; place-items: center; height: 28px; border: 1px solid #dfe3ea; border-radius: 99px; background: #fff; color: var(--a-text); font-size: 10.5px; font-weight: 700; }
.ao-propsat { border-color: transparent; background: var(--a-zelena); color: #fff; }
.ao-propsat em { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.ao-propsat em:first-child { opacity: 0; }
.ao-propsat svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.ao-panel > small { margin-top: 6px; }
.ao-titulni { height: 76px; border-radius: 5px; background: center / cover; }
.ao-tah { position: absolute; z-index: 8; left: 0; top: 0; opacity: 0; }
.ao-tah .kursor-sipka { max-width: none; opacity: 1; }
.ao-duch { position: absolute; left: 12px; top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--a-akcent); border-radius: 6px; background: #fff; box-shadow: var(--u-stin-maly); color: var(--a-text); font: 600 11px/1 system-ui, sans-serif; white-space: nowrap; opacity: 0; rotate: -3deg; }
.ao-duch svg.i { width: 12px; height: 12px; stroke-width: 2; }
.ao-soubor { position: absolute; left: 10px; top: 14px; width: 116px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: var(--u-stin); color: var(--a-text); font-size: 10.5px; line-height: 1.3; rotate: 3deg; transform-origin: 0 0; opacity: 0; }
.ao-soubor span { display: block; height: 70px; border-radius: 6px; background: center / cover; }
.ao-soubor b { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hraje .ao-tah { animation: ao-tah var(--cyklus) infinite; }
.hraje .ao-duch { animation: ao-duch var(--cyklus) infinite; }
.hraje .ao-soubor { animation: ao-soubor var(--cyklus) infinite; }
.hraje .ao-zona { animation: ao-zona var(--cyklus) infinite; }
.hraje .ao-napoveda { animation: ao-napoveda var(--cyklus) infinite; }
.hraje .ao-text { animation: ao-text var(--cyklus) infinite; }
.hraje .ao-text p { animation: ao-psani var(--cyklus) infinite; }
.hraje .ao-foto { animation: ao-foto var(--cyklus) infinite; }
.hraje .ao-pruh { animation: ao-pruh var(--cyklus) infinite; }
.hraje .ao-pruh i { animation: ao-pruh-i var(--cyklus) infinite; }
.hraje .ao-obr { animation: ao-obr var(--cyklus) infinite; }
.hraje .ao-ulozeno { animation: ao-ulozeno var(--cyklus) infinite; }
.hraje .ao-propsat { animation: ao-propsat var(--cyklus) infinite; }
.hraje .ao-propsat em:first-child, .hraje .ao-rozprac { animation: ao-ven var(--cyklus) infinite; }
.hraje .ao-propsat .hotovo, .hraje .ao-zverej { animation: ao-dovnitr var(--cyklus) infinite; }
@keyframes ao-tah {
  0%, 5% { opacity: 0; transform: translate(700px, 440px); }
  7% { opacity: 1; transform: translate(700px, 440px); }
  15% { transform: translate(510px, 160px); }
  16% { transform: translate(510px, 160px) scale(.85); }
  17% { transform: translate(510px, 160px); }
  25% { transform: translate(300px, 250px); }
  26% { transform: translate(300px, 250px) scale(.85); }
  27%, 31% { transform: translate(300px, 250px); }
  37%, 41% { transform: translate(790px, 470px); }
  52% { transform: translate(300px, 350px); }
  53% { transform: translate(300px, 350px) scale(.85); }
  54%, 58% { transform: translate(300px, 350px); }
  67% { transform: translate(668px, 188px); }
  68% { transform: translate(668px, 188px) scale(.85); }
  69%, 75% { opacity: 1; transform: translate(668px, 188px); }
  82%, 100% { opacity: 0; transform: translate(720px, 300px); }
}
@keyframes ao-duch { 0%, 15.9% { opacity: 0; } 16.5%, 25.5% { opacity: 1; } 26.5%, 100% { opacity: 0; } }
@keyframes ao-soubor { 0%, 38% { opacity: 0; transform: none; } 39%, 52.5% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes ao-zona {
  0%, 19%, 27%, 45%, 55%, 100% { border-color: #d5dbe5; background: transparent; }
  21%, 25.5%, 47%, 53% { border-color: var(--a-akcent); background: #eef4ff; }
}
@keyframes ao-napoveda { 0%, 25.5% { opacity: 1; } 26.5%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ao-text { 0%, 25.5% { opacity: 0; transform: scale(.96); } 27%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ao-psani { 0%, 27% { clip-path: inset(0 0 100% 0); animation-timing-function: steps(4, end); } 38%, 100% { clip-path: inset(0); } }
@keyframes ao-foto { 0%, 53.5% { opacity: 0; } 54.5%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ao-pruh { 0%, 54.5% { opacity: 0; } 55%, 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes ao-pruh-i { 0%, 55% { width: 0; } 61%, 100% { width: 100%; } }
@keyframes ao-obr { 0%, 61% { opacity: 0; transform: scale(1.06); } 64%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ao-ulozeno { 0%, 39% { opacity: 0; transform: translateY(-4px); } 41%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ao-propsat { 0%, 67.6% { border-color: #dfe3ea; background: #fff; color: var(--a-text); transform: none; } 68.2% { transform: scale(.93); } 69%, 96% { border-color: transparent; background: var(--a-zelena); color: #fff; transform: none; } 100% { border-color: #dfe3ea; background: #fff; color: var(--a-text); } }
@keyframes ao-ven { 0%, 68.2% { opacity: 1; } 69%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ao-dovnitr { 0%, 68.2% { opacity: 0; } 69%, 96% { opacity: 1; } 100% { opacity: 0; } }
.kq .jeviste-plocha { overflow: hidden; }
.kq-stin { position: absolute; left: 40px; top: 398px; width: 230px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgb(11 26 51 / .3), transparent); }
.kq-totem { position: absolute; left: 64px; top: 14px; width: 180px; }
.kq-totem .totem-telo { box-shadow: 0 18px 40px -16px rgb(11 26 51 / .45); }
.kq-totem .totem-pata { height: 56cqw; }
.kq-ruka { z-index: 3; left: 296px; top: 160px; scale: .58; transform-origin: 0 0; transform: translateY(480px); }
.kq-ap { background: #0f1b33; }
.kq-udalost { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #f4f6fb; transform: translateY(100%); }
.kq-udalost .ap-stav { height: 36px; }
.kq-udalost .ap-zpet { height: 46px; padding-top: 6px; padding-bottom: 6px; }
.kq-karta { display: flex; align-items: center; gap: 12px; height: 76px; margin: 4px 14px 12px; padding: 0 14px; border-radius: 16px; background: #fff; }
.kq-karta b { display: block; font-size: 16px; }
.kq-karta small { color: #6b7487; font-size: 12px; }
.kq-udalost dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 0 14px; padding: 6px 14px; border-radius: 16px; background: #fff; font-size: 12px; }
.kq-udalost dt { padding: 9px 0; border-bottom: 1px solid #eef0f5; color: #6b7487; }
.kq-udalost dd { margin: 0; padding: 9px 0; border-bottom: 1px solid #eef0f5; font-weight: 700; text-align: right; }
.kq-udalost dt:nth-last-of-type(1), .kq-udalost dd:last-child { border-bottom: 0; }
.kq-tl { height: 46px; margin-top: 20px; padding: 0; line-height: 46px; }
.kq.hraje .tt-prst { animation: kq-prst var(--cyklus) infinite; }
.kq.hraje .tt-dl-kal { animation: kq-stisk var(--cyklus) infinite; }
.kq.hraje .tt-kal { animation: kq-kal var(--cyklus) infinite; }
.kq.hraje .tt-akce-cil { animation: kq-cil var(--cyklus) infinite; }
.kq.hraje .tt-detail { animation: kq-detail var(--cyklus) infinite; }
.hraje .kq-ruka { animation: kq-ruka var(--cyklus) infinite; }
.hraje .kq-ruka .ap-skener { animation: kq-skener var(--cyklus) infinite; }
.hraje .kq-udalost { animation: kq-udalost var(--cyklus) infinite; }
.hraje .kq-ruka .dotyk { animation: kq-dotyk var(--cyklus) infinite; }
.hraje .kq-tl { animation: kq-tl var(--cyklus) infinite; }
.hraje .kq-ruka .ap-ok { animation: kq-ok var(--cyklus) infinite; }
@keyframes kq-prst {
  0%, 5% { opacity: 0; transform: translate(397px, 375px) scale(1.3); }
  7% { opacity: 1; transform: translate(397px, 375px) scale(1); }
  8.5% { opacity: 1; transform: translate(397px, 375px) scale(.8); }
  10.5% { opacity: 0; transform: translate(397px, 375px) scale(1.2); }
  11%, 17% { opacity: 0; transform: translate(270px, 822px) scale(1.3); }
  19% { opacity: 1; transform: translate(270px, 822px) scale(1); }
  20.5% { opacity: 1; transform: translate(270px, 822px) scale(.8); }
  22.5% { opacity: 0; transform: translate(270px, 822px) scale(1.2); }
  23%, 82% { opacity: 0; transform: translate(80px, 148px) scale(1.3); }
  84% { opacity: 1; transform: translate(80px, 148px) scale(1); }
  85.5% { opacity: 1; transform: translate(80px, 148px) scale(.8); }
  87.5%, 100% { opacity: 0; transform: translate(80px, 148px) scale(1.2); }
}
@keyframes kq-stisk { 0%, 8% { filter: none; } 8.5%, 10% { filter: brightness(1.3); } 11%, 100% { filter: none; } }
@keyframes kq-kal { 0%, 9.5% { transform: translateX(100%); } 13%, 87% { transform: none; } 91%, 100% { transform: translateX(100%); } }
@keyframes kq-cil { 0%, 20% { background: #fff; } 21.5%, 87% { background: #fff4cc; } 91%, 100% { background: #fff; } }
@keyframes kq-detail { 0%, 21.5% { transform: translateY(130%); } 26%, 85% { transform: none; } 88.5%, 100% { transform: translateY(130%); } }
@keyframes kq-ruka { 0%, 27% { transform: translateY(480px); } 34%, 76% { transform: none; } 83%, 100% { transform: translateY(480px); } }
@keyframes kq-skener { 0%, 36% { opacity: 0; transform: none; } 37% { opacity: 1; transform: none; } 41% { opacity: 1; transform: translateY(180px); } 44% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: none; } }
@keyframes kq-udalost { 0%, 45% { transform: translateY(100%); } 49%, 90% { transform: none; } 91%, 100% { transform: translateY(100%); } }
@keyframes kq-dotyk { 0%, 56% { opacity: 0; transform: translate(100px, 162px) scale(.4); } 57% { opacity: 1; transform: translate(100px, 162px) scale(.7); } 61%, 100% { opacity: 0; transform: translate(100px, 162px) scale(1.5); } }
@keyframes kq-tl { 0%, 56.5% { transform: none; filter: none; } 57.5% { transform: scale(.96); filter: brightness(1.2); } 59%, 100% { transform: none; filter: none; } }
@keyframes kq-ok { 0%, 59% { transform: translateY(100%); } 63%, 90% { transform: none; } 91%, 100% { transform: translateY(100%); } }
