/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka, Photoshop (body 36 a 81): Photoshop přes celou obrazovku,
   nakreslený v HTML jako Lightroom. Plocha programu je kontejner (cqw, cqh).
   Dokument s plakátem stojí uprostřed mezi kartou kroku a dokem a je co
   největší. Vrstvy, panel Properties, čára plakátu přes fotku (stejná jako
   v Lightroomu) a rámeček transformace jedou podle --zh-ps-uprava. Na telefonu mobilní Photoshop: plovoucí nástroje
   vlevo, pás náhledů vrstev vpravo, dokument mezi nimi. */
/* neutrální šedé nejtmavšího vzhledu Photoshopu, žádná bílá */
/* Zlatá hodinka 129: úprava a čára se počítají jen na prvcích, které se
   podle nich hýbou (--zh-postup-cile), a nedědí se. Stav vrstvy se dědí jako
   číslo: dokud se nezmění, prvky ve vrstvě se při rolování nepřepočítají. */
@property --zh-ps-uprava {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --zh-ps-cara {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --ps-je {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --ps-nove {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* .zh-scena z komponenty má min-height 100vh a načítá se později, proto dvojitá třída */
/* Zlatá hodinka 173: hladký roh, násobek --roh-hladky drží zh-plast. */
/* Zlatá hodinka 252: delší scéna, úprava se dá na rolování víc času */
.zh-scena.zh-ps {
  min-height: 320vh;
}
.zh-ps {
  /* Zlatá hodinka 101: čára Před a Po jede v postupu 0,21 až 0,485 (úprava
     0,2 až 0,7), pak naskočí rámeček. Meze čte i plášť pro zvuk čáry. */
  --zh-cara-od: 0.21;
  --zh-cara-do: 0.485;
  --zh-cara-konec: ramecek;
  /* Zlatá hodinka 129: prvky, kterým motor scén zapisuje postup přímo */
  --zh-postup-cile: '.zh-psc__dokument, .zh-psc__transform, .zh-psc__stranka, .zh-psc__vrstva';
  --ps-f: clamp(10.5px, 0.86vw, 14px);
  --ps-menu: clamp(24px, 3vh, 32px);
  --ps-volby: clamp(30px, 3.8vh, 42px);
  --ps-nastroje: clamp(34px, 2.6vw, 46px);
  --ps-nastroj: clamp(22px, 3.3vh, 32px);
  --ps-dok: clamp(180px, 19vw, 330px);
  --ps-karty: clamp(22px, 2.8vh, 28px);
  --ps-pravitko: 16px;
  --ps-stav: clamp(20px, 2.4vh, 26px);
  --ps-hlava: clamp(22px, 2.8vh, 30px);
  --ps-radek: clamp(24px, 3.4vh, 34px);
  --ps-pole: clamp(19px, 2.5vh, 26px);
  --ps-vlastnosti: clamp(180px, 28vh, 280px);
}
/* Úpravu a čáru si počítá každý prvek, který se podle nich hýbe, sám na sobě
   z postupu, který mu zapíše motor scén (Zlatá hodinka 129). Zlatá hodinka
   100: úprava začne po dojetí na sekci (prvních 10 procent scrollu nic),
   skončí v 65 procentech a hotový plakát pak zůstane vidět. */
.zh-psc__dokument,
.zh-psc__transform,
.zh-psc__stranka,
.zh-psc__vrstva {
  --zh-ps-uprava: clamp(0, (var(--zh-postup, 0) - 0.1) / 0.55, 1);
  --zh-ps-cara: clamp(0, (var(--zh-postup, 0) - var(--zh-cara-od)) / (var(--zh-cara-do) - var(--zh-cara-od)), 1);
}
.zh-ps__pozadi {
  overflow: hidden;
  background: #1b1b1b;
}
/* ─────────────────────────────  okno programu  ───────────────────── */
.zh-psc {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  grid-template-columns: var(--ps-nastroje) minmax(0, 1fr) var(--ps-dok);
  grid-template-rows: var(--ps-menu) var(--ps-volby) minmax(0, 1fr);
  grid-template-areas: "menu menu menu" "volby volby volby" "nastroje plocha dok";
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--ps-f);
  line-height: 1.25;
  color: #b4b4b4;
  user-select: none;
}
/* program se na krajích noří do tmy webu, dokument zůstane čistý */
.zh-psc::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(130% 115% at 50% 46%, transparent 56%, rgba(8, 4, 16, 0.64) 100%);
}
.zh-psc .zh-ui-ikona {
  color: #9a9a9a;
}
.zh-psc__mezera {
  flex: 1;
}
.zh-psm__lista {
  display: none;
}
.zh-psc__predel {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: 8px 2px;
  background: #3a3a3a;
}
.zh-psc__vyber {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: calc(var(--ps-pole) - 3px);
  padding: 0 6px 0 8px;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px #3a3a3a;
  color: #b4b4b4;
  white-space: nowrap;
}
.zh-psc__vyber--siroky {
  flex: 1 1 auto;
  justify-content: space-between;
  min-width: 0;
}
.zh-psc__zaskrt {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px #555555;
}
.zh-psc__zaskrt--ano {
  background: #1473e6;
  box-shadow: none;
}
.zh-psc__zaskrt--ano::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 3px;
  height: 6px;
  border: solid #dde8f7;
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
}
/* nabídky a ovládání okna */
.zh-psc__menu {
  grid-area: menu;
  display: flex;
  align-items: stretch;
  padding-left: clamp(10px, 1vw, 16px);
  background: #1b1b1b;
  color: #c4c4c4;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc .zh-psc__logo {
  display: block;
  flex: none;
  align-self: center;
  width: calc(var(--ps-menu) - 8px);
  height: calc(var(--ps-menu) - 8px);
  max-width: none;
  margin-right: clamp(10px, 1vw, 16px);
}
.zh-psc__menu nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.15vw, 20px);
}
/* Zlatá hodinka 143: ovládání okna je společné z jádra (.zh-okno), tady jen výška lišty */
.zh-psc__menu .zh-okno {
  --zh-okno-v: var(--ps-menu);
}
/* volby nástroje Move */
.zh-psc__volby {
  grid-area: volby;
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 12px);
  /* vpravo 10 px jako obsah doku pod ním, Share tak končí zarovnaný s panely */
  padding: 0 10px 0 clamp(10px, 1vw, 16px);
  background: #262626;
  border-top: 1px solid #101010;
  border-bottom: 1px solid #101010;
  color: #b4b4b4;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc__nastroj-volba {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #343434;
}
.zh-psc__pracovni {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.zh-psc__sdilet {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: calc(var(--ps-volby) - 12px);
  padding: 0 15px;
  border-radius: 999px;
  background: #1473e6;
  font-weight: 600;
  color: #e9f1fc;
}
/* ─────────────────────────────  nástroje  ────────────────────────── */
.zh-psc__nastroje {
  grid-area: nastroje;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 0;
  background: #262626;
  border-right: 1px solid #101010;
  overflow: hidden;
}
/* úchyt panelu */
.zh-psc__nastroje::before {
  content: '';
  flex: none;
  width: 55%;
  height: 2px;
  margin-bottom: 6px;
  background: repeating-linear-gradient(90deg, #4a4a4a 0 2px, transparent 2px 4px);
}
.zh-psc__nastroj {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ps-nastroje) - 8px);
  height: var(--ps-nastroj);
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
}
/* trojúhelníček v rohu: pod nástrojem jsou schované další */
.zh-psc__nastroj::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  border: 2px solid transparent;
  border-right-color: #666666;
  border-bottom-color: #666666;
}
/* Zlatá hodinka 143: Frame, Zoom a úprava panelu žádné schované nástroje nemají */
.zh-psc__nastroj--sam::after {
  display: none;
}
/* předěl mezi skupinami nástrojů */
.zh-psc__nastroje-cara {
  flex: none;
  width: 58%;
  height: 1px;
  margin: 3px 0;
  background: #3a3a3a;
}
/* nástroj Gradient: Lucide takovou ikonu nemá, čtvereček s přechodem jako v originálu */
.zh-psc__ikona-prechod {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.4px #9a9a9a;
  background: linear-gradient(90deg, #9a9a9a 10%, transparent 90%);
}
.zh-psc__nastroj--ted {
  background: #424242;
}
.zh-psc .zh-psc__nastroj--ted .zh-ui-ikona {
  color: #dcdcdc;
}
.zh-psc__barvy {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 8px;
}
.zh-psc__barvy i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #0d0d0d, 0 0 0 2px #5a5a5a;
}
.zh-psc__barvy i:first-child {
  left: 0;
  top: 0;
  z-index: 1;
  background: #f39a4c;
}
.zh-psc__barvy i:last-child {
  right: 0;
  bottom: 0;
  background: #0c0a10;
}
/* ─────────────────────────────  plocha dokumentu  ────────────────── */
.zh-psc__plocha {
  grid-area: plocha;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #171717;
}
.zh-psc__karty {
  display: flex;
  flex: none;
  height: var(--ps-karty);
  background: #1b1b1b;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc__karta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border-right: 1px solid #101010;
  color: #7b7b7b;
}
.zh-psc__karta--ted {
  background: #262626;
  color: #dcdcdc;
}
.zh-psc__pravitka {
  position: relative;
  flex: 1 1 auto;
}
.zh-psc__pravitko-h,
.zh-psc__pravitko-v {
  position: absolute;
  background-color: #202020;
  background-repeat: no-repeat;
}
.zh-psc__pravitko-h {
  left: 0;
  right: 0;
  top: 0;
  height: var(--ps-pravitko);
  border-bottom: 1px solid #101010;
  background-image: repeating-linear-gradient(90deg, #505050 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, #3a3a3a 0 1px, transparent 1px 12px);
  background-size: 100% 9px, 100% 4px;
  background-position: var(--ps-pravitko) 100%, var(--ps-pravitko) 100%;
}
.zh-psc__pravitko-v {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ps-pravitko);
  border-right: 1px solid #101010;
  background-image: repeating-linear-gradient(180deg, #505050 0 1px, transparent 1px 60px), repeating-linear-gradient(180deg, #3a3a3a 0 1px, transparent 1px 12px);
  background-size: 9px 100%, 4px 100%;
  background-position: 100% var(--ps-pravitko), 100% var(--ps-pravitko);
}
.zh-psc__stav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  height: var(--ps-stav);
  padding: 0 10px;
  background: #1b1b1b;
  border-top: 1px solid #101010;
  font-size: 0.92em;
  color: #7b7b7b;
  white-space: nowrap;
  overflow: hidden;
}
/* Dokument stojí uprostřed volného místa mezi kartou kroku a dokem
   (Zlatá hodinka 100, stejně jako fotka v Lightroomu), co největší, a pod
   ním zbude místo na lištu úloh. Počítá se z plochy kontejneru, ne z okna,
   takže ho neposune posuvník stránky. Plakát přejede fotku z Lightroomu
   stejnou čárou jako v Lightroomu (.zh-delic v plášti). */
.zh-psc__dokument {
  --ps-okraj: clamp(14px, 2.4vh, 30px);
  --ps-mezera: clamp(18px, 2vw, 32px);
  --ps-ukoly: 44px;
  --ps-nahore: calc(var(--ps-menu) + var(--ps-volby) + var(--ps-karty) + var(--ps-pravitko));
  --ps-plocha-v: calc(100cqh - var(--ps-nahore) - var(--ps-stav));
  --ps-karta: calc(var(--zh-karta-okraj) + var(--zh-karta-sirka));
  --ps-h: min(calc(var(--ps-plocha-v) - 2 * var(--ps-okraj) - var(--ps-ukoly)), calc((100cqw - var(--ps-dok) - var(--ps-karta) - 2 * var(--ps-mezera)) * 4 / 3));
  --zh-delic: calc(1 - var(--zh-ps-cara));
  position: absolute;
  z-index: 1;
  left: calc((var(--ps-karta) + 100cqw - var(--ps-dok)) / 2);
  top: calc(var(--ps-nahore) + (var(--ps-plocha-v) - var(--ps-ukoly)) / 2);
  width: calc(var(--ps-h) * 0.75);
  height: var(--ps-h);
  translate: -50% -50%;
  background: #0b080f;
  /* stín drží dosah pod mezerou k liště úloh pod dokumentem (Zlatá hodinka 22) */
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.75), 0 0 0 1px #0b0b0b;
}
.zh-psc .zh-psc__obraz {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* rámeček transformace kolem nápisu, když vrstva s písmem přibude; drží
   skoro do konce úpravy, ať je výběr vidět */
.zh-psc__transform {
  position: absolute;
  left: 14%;
  top: 7%;
  width: 72%;
  height: 16%;
  box-shadow: 0 0 0 1px rgba(214, 214, 214, 0.85);
  opacity: calc(clamp(0, (var(--zh-ps-uprava) - 0.7) * 40, 1) * clamp(0, (0.98 - var(--zh-ps-uprava)) * 40, 1));
  transition: opacity 0.3s ease;
}
/* rozměry nápisu pod rohem rámečku, jako když se v programu táhne za úchyt */
.zh-psc__rozmer {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 10px;
  padding: 4px 8px 5px;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: rgba(38, 38, 38, 0.9399999999999999);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.75), 0 0 0 1px #141414;
  font-size: 0.86em;
  font-weight: 400;
  line-height: 1.3;
  color: #dcdcdc;
  white-space: nowrap;
}
.zh-psc__transform i {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  background: #d6d6d6;
  box-shadow: 0 0 0 1px #151515;
}
.zh-psc__transform i:nth-child(1) {
  left: 0;
  top: 0;
}
.zh-psc__transform i:nth-child(2) {
  left: 50%;
  top: 0;
}
.zh-psc__transform i:nth-child(3) {
  left: 100%;
  top: 0;
}
.zh-psc__transform i:nth-child(4) {
  left: 100%;
  top: 50%;
}
.zh-psc__transform i:nth-child(5) {
  left: 100%;
  top: 100%;
}
.zh-psc__transform i:nth-child(6) {
  left: 50%;
  top: 100%;
}
.zh-psc__transform i:nth-child(7) {
  left: 0;
  top: 100%;
}
.zh-psc__transform i:nth-child(8) {
  left: 0;
  top: 50%;
}
/* plovoucí lišta úloh pod dokumentem */
.zh-psc__ukoly {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border-radius: calc(10px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #2c2c2c;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #3a3a3a;
  color: #dcdcdc;
  white-space: nowrap;
}
.zh-psc__ukoly span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ─────────────────────────────  dok vpravo  ──────────────────────── */
.zh-psc__dok {
  grid-area: dok;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
  background: #1b1b1b;
  border-left: 1px solid #101010;
}
.zh-psc__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #262626;
}
.zh-psc__panel--vlastnosti {
  flex: none;
  height: var(--ps-vlastnosti);
}
.zh-psc__panel--vrstvy {
  flex: 1 1 auto;
}
.zh-psc__zalozky {
  display: flex;
  flex: none;
  align-items: stretch;
  height: var(--ps-hlava);
  background: #1f1f1f;
  border-bottom: 1px solid #101010;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc__zalozky > * {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #7b7b7b;
}
.zh-psc__zalozky b {
  font-weight: 600;
  background: #262626;
  color: #dcdcdc;
}
/* Zlatá hodinka 143: nabídka panelu vpravo v hlavičce jako v originálu */
.zh-psc__zalozky .zh-psc__panel-menu {
  margin-left: auto;
  padding: 0 8px;
}
/* Properties: stránka vybrané vrstvy */
.zh-psc__vlastnosti {
  position: relative;
  flex: 1 1 auto;
}
.zh-psc__stranka {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  overflow: hidden;
  opacity: calc(clamp(0, (var(--zh-ps-uprava) - var(--od)) * 1000, 1) * clamp(0, (var(--do) - var(--zh-ps-uprava)) * 1000, 1));
  transition: opacity 0.3s ease;
}
.zh-psc__druh {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: var(--ps-pole);
  font-weight: 600;
  color: #dcdcdc;
}
.zh-psc__skupina {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-weight: 600;
  color: #b4b4b4;
}
.zh-psc__skupina::before {
  content: '';
  border: 4px solid transparent;
  border-top: 5px solid #8a8a8a;
  border-bottom: 0;
}
.zh-psc__pole {
  display: grid;
  flex: none;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: var(--ps-pole);
  color: #7b7b7b;
}
.zh-psc__pole i {
  display: flex;
  align-items: center;
  height: calc(var(--ps-pole) - 3px);
  padding: 0 6px;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px #3a3a3a;
  font-style: normal;
  color: #dcdcdc;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc__pole .zh-psc__vzorek {
  justify-self: start;
  width: 34px;
  padding: 0;
  background: #f39a4c;
}
.zh-psc__pole--volby {
  display: flex;
  gap: 8px;
}
.zh-psc__tlacitko {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: calc(var(--ps-pole) + 1px);
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #3b3b3b;
  color: #dcdcdc;
}
.zh-psc__prechod {
  display: block;
  flex: none;
  height: calc(var(--ps-pole) - 2px);
  margin: 2px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #160a26, #7b2e5a 45%, #f39a4c 78%, #ffe2b4);
  box-shadow: 0 0 0 1px #0d0d0d;
}
.zh-psc__krivky {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  background: #1d1d1d;
  box-shadow: 0 0 0 1px #0d0d0d;
}
.zh-psc__krivky path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.zh-psc .zh-psc__krivky-hist {
  fill: #353535;
}
.zh-psc__krivky-mriz {
  stroke: #333333;
  stroke-width: 1;
}
.zh-psc__krivky-primka {
  stroke: #4c4c4c;
  stroke-width: 1;
}
.zh-psc__krivky-cara {
  stroke: #d2d2d2;
  stroke-width: 1.6;
}
/* Layers: vrstva přibude, když na ni práce dojde, nejnovější je vybraná */
/* Zlatá hodinka 128: ovládání Layers lícuje s poli Properties nad ním (stejné odsazení
   jako .zh-psc__stranka); řádky vrstev jdou přes celou šířku panelu (data-pas). */
.zh-psc__filtr {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: calc(var(--ps-pole) + 6px);
  padding: 0 10px;
  color: #7b7b7b;
  white-space: nowrap;
  overflow: hidden;
}
.zh-psc__vrstvy {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #101010;
  overflow: hidden;
}
.zh-psc__vrstva {
  --ps-je: clamp(0, (var(--zh-ps-uprava) - var(--od)) * 40, 1);
  --ps-nove: calc(var(--ps-je) * clamp(0, (var(--do) - var(--zh-ps-uprava)) * 1000, 1));
  display: flex;
  align-items: center;
  gap: 7px;
  height: calc(var(--ps-radek) * var(--ps-je));
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 #1f1f1f;
  background: rgba(100, 100, 100, calc(var(--ps-nove) * 0.45));
  color: rgb(calc(180 + 45 * var(--ps-nove)) calc(180 + 45 * var(--ps-nove)) calc(180 + 45 * var(--ps-nove)));
  transition: height 0.3s ease, background-color 0.3s ease;
}
.zh-psc__vrstva--efekty,
.zh-psc__vrstva--efekt {
  height: calc(var(--ps-radek) * 0.7 * var(--ps-je));
  font-size: 0.92em;
  color: #7b7b7b;
}
.zh-psc__vrstva--efekty .zh-psc__nazev {
  padding-left: calc(var(--ps-radek) * 0.9);
}
.zh-psc__vrstva--efekt .zh-psc__nazev {
  padding-left: calc(var(--ps-radek) * 1.5);
}
.zh-psc__nahled {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc((var(--ps-radek) - 8px) * 0.75);
  height: calc(var(--ps-radek) - 8px);
  overflow: hidden;
  background: #0f0f0f;
  box-shadow: 0 0 0 1px #3a3a3a;
}
.zh-psc .zh-psc__nahled img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.zh-psc__nahled--text,
.zh-psc__nahled--uprava {
  width: calc(var(--ps-radek) - 8px);
  background: #3c3c3c;
}
.zh-psc__nahled--mapa {
  background: linear-gradient(90deg, #160a26, #7b2e5a 45%, #f39a4c 78%, #ffe2b4);
}
.zh-psc__nahled--maska {
  background: #d4d4d4;
}
.zh-psc__nahled--pozadi {
  background: #0b080f;
}
.zh-psc__nazev {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zh-psc__fx {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #b4b4b4;
}
/* ikony vpravo končí před tlačítkem zvuku (18 + 48 px od kraje) */
.zh-psc__pata {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 0.9vw, 14px);
  height: calc(var(--ps-hlava) + 2px);
  padding: 0 76px 0 10px;
  border-top: 1px solid #101010;
}
/* ─────────────────────────────  tisk  ────────────────────────────── */
/* Zlatá hodinka 182: rozhraní tisku pro přechod do tiskárny (zh-plast.js,
   přechod tisk): nabídka File, okno Photoshop Print Settings s náhledem,
   na telefonu nabídka sdílení a list Print Options jako v iPhonu. Všechno
   je skryté a průhledné, přechod to ukáže a rozpohybuje. Plakát v náhledu
   je kopie ve vrstvě přechodu, náhled mu jen drží místo. */
.zh-ptisk {
  position: absolute;
  inset: 0;
  z-index: 3;
  visibility: hidden;
  pointer-events: none;
}
.zh-ptisk__tel {
  display: none;
}
.zh-ptisk__zavoj {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 16, 0.5);
  opacity: 0;
}
.zh-ptisk__nabidka,
.zh-ptisk__okno,
.zh-ptisk__list {
  position: absolute;
  opacity: 0;
}
/* nabídka File visí pod svým názvem v liště nabídek */
.zh-ptisk__nabidka--pc {
  left: calc(2 * clamp(10px, 1vw, 16px) + var(--ps-menu) - 14px);
  top: var(--ps-menu);
  display: flex;
  flex-direction: column;
  min-width: clamp(250px, 21vw, 330px);
  padding: 5px 0;
  border-radius: calc(6px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #2b2b2b;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px #3c3c3c;
  color: #dcdcdc;
  white-space: nowrap;
}
.zh-ptisk__polozka {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: calc(var(--ps-f) * 2);
  padding: 0 14px 0 28px;
}
.zh-ptisk__klavesa {
  font-style: normal;
  color: #7b7b7b;
}
.zh-ptisk__cara {
  flex: none;
  height: 1px;
  margin: 4px 0;
  background: #3c3c3c;
}
/* položka pod kurzorem: přechod pruh posouvá za kurzorem */
.zh-ptisk__zvyrazneni {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  height: calc(var(--ps-f) * 2);
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #1473e6;
  opacity: 0;
}
/* okno tisku uprostřed programu: náhled vlevo, nastavení vpravo */
.zh-ptisk__okno {
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: min(880px, 74cqw);
  height: min(580px, 80cqh);
  translate: -50% -50%;
  overflow: hidden;
  /* Zlatá hodinka 207: okno ořezává obsah, proto obyčejný oblouk
     (hladký roh by prohlížeč kreslil maskou) */
  border-radius: 8px;
  background: #262626;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px #3c3c3c;
  color: #b4b4b4;
}
.zh-ptisk__titulek {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--ps-menu) + 6px);
  padding: 0 12px 0 16px;
  background: #1f1f1f;
  border-bottom: 1px solid #101010;
  color: #dcdcdc;
}
.zh-ptisk__telo {
  display: grid;
  flex: 1;
  grid-template-columns: 44% minmax(0, 1fr);
  min-height: 0;
}
.zh-ptisk__vlevo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border-right: 1px solid #101010;
}
.zh-ptisk__nahled {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #171717;
  box-shadow: inset 0 0 0 1px #101010;
}
.zh-ptisk__volby {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.zh-ptisk__volby > span,
.zh-ptisk__volba {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.zh-ptisk__nastaveni {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.zh-ptisk__sekce {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid #101010;
}
.zh-ptisk__hlava {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #dcdcdc;
}
.zh-ptisk__hlava + .zh-ptisk__radek {
  margin-top: 4px;
}
.zh-ptisk__radek {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ps-radek);
}
.zh-ptisk__radek > span:first-child {
  flex: none;
  width: 30%;
  text-align: right;
}
.zh-ptisk__pole {
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 44px;
  height: calc(var(--ps-pole) - 3px);
  padding: 0 8px;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px #3a3a3a;
  color: #dcdcdc;
}
.zh-ptisk__rozvrh {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ps-pole) + 6px);
  height: calc(var(--ps-pole) + 6px);
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
}
.zh-ptisk__rozvrh--ano {
  background: #3a3a3a;
}
.zh-ptisk__pata {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: calc(var(--ps-radek) + 22px);
  padding: 0 16px;
  border-top: 1px solid #101010;
}
.zh-ptisk__tl {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: calc(var(--ps-pole) + 6px);
  padding: 0 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px #5a5a5a;
  font-weight: 600;
  color: #dcdcdc;
}
.zh-ptisk__tl--hlavni {
  background: #1473e6;
  box-shadow: none;
  color: #e9f1fc;
}
/* ─────────────────────────────  telefon  ─────────────────────────── */
/* Mobilní Photoshop: horní lišta, plovoucí kapsle nástrojů vlevo, pás
   náhledů vrstev vpravo a dokument mezi nimi, všechno nad kartou kroku. */
@media (max-width: 767px) {
  /* Zlatá hodinka 154 a 252: delší scéna, úprava jede s rolováním pomaleji */
  .zh-scena.zh-ps {
    min-height: 440vh;
  }
  .zh-ps__pozadi {
    background: #121212;
  }
  .zh-psc {
    --ps-f: 13px;
    --psm-lista: 50px;
    /* šířka dokumentu: kapsle a pás mají 10 + 44 px, mezera k dokumentu 8 px */
    --psm-w: calc(100cqw - 124px);
    /* střed dokumentu: pod lištou, nad lištou úloh (48 px) a panelem kroku
       (Zlatá hodinka 117: jeho skutečná výška --zh-karta-v z jádra) */
    --psm-stred: calc(var(--psm-lista) + (100cqh - var(--psm-lista) - var(--zh-karta-v, 176px) - 48px) / 2);
    display: block;
  }
  /* panel kroku je neprůhledný a patří k programu, ztmavení dole netřeba */
  .zh-psc::after {
    display: none;
  }
  .zh-psc__menu,
  .zh-psc__volby,
  .zh-psc__plocha,
  .zh-psc__panel--vlastnosti,
  .zh-psc__zalozky,
  .zh-psc__filtr,
  .zh-psc__pata,
  .zh-psc__jen-pc,
  .zh-psc__vrstva--efekty,
  .zh-psc__vrstva--efekt,
  .zh-psc__nazev,
  .zh-psc__fx,
  .zh-psc__nahled--maska {
    display: none;
  }
  /* oko a zámek u vrstev: ikony mají display s !important z pláště */
  .zh-psc__vrstva > .zh-ui-ikona {
    display: none !important;
  }
  .zh-psc .zh-ui-ikona {
    color: #cfcfcf;
  }
  /* vpravo nahoře je tlačítko zvuku, ikony lišty končí před ním */
  .zh-psm__lista {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--psm-lista);
    padding: 0 70px 0 14px;
    background: #1a1a1a;
    font-size: 14px;
    color: #d4d4d4;
    white-space: nowrap;
  }
  .zh-psm__nazev {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zh-psm__nazev b {
    font-weight: 600;
  }
  .zh-psc__nastroje {
    position: absolute;
    left: 10px;
    top: var(--psm-stred);
    width: 44px;
    gap: 2px;
    padding: 6px 0;
    translate: 0 -50%;
    border: 0;
    border-radius: 22px;
    background: #2a2a2a;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.8);
  }
  .zh-psc__nastroje::before,
  .zh-psc__nastroj::after {
    display: none;
  }
  .zh-psc__nastroj {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .zh-psc__nastroj--ted {
    background: #1473e6;
  }
  .zh-psc .zh-psc__nastroj--ted .zh-ui-ikona {
    color: #e9f1fc;
  }
  .zh-psc__dokument {
    left: 50%;
    top: var(--psm-stred);
    width: var(--psm-w);
    height: calc(var(--psm-w) * 4 / 3);
  }
  .zh-psc__ukoly {
    gap: 12px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .zh-psc__dok {
    position: absolute;
    right: 10px;
    top: var(--psm-stred);
    width: 44px;
    padding: 5px 0;
    translate: 0 -50%;
    border: 0;
    border-radius: calc(12px * var(--roh-hladky, 1));
    corner-shape: squircle;
    background: #2a2a2a;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.8);
  }
  .zh-psc__panel--vrstvy {
    background: none;
  }
  .zh-psc__vrstvy {
    margin: 0;
    border: 0;
  }
  .zh-psc__vrstva {
    justify-content: center;
    height: calc(42px * var(--ps-je));
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .zh-psc__nahled,
  .zh-psc__nahled--text,
  .zh-psc__nahled--uprava {
    width: 30px;
    height: 36px;
    border-radius: calc(4px * var(--roh-hladky, 1));
    corner-shape: squircle;
    box-shadow: 0 0 0 1px #3c3c3c, 0 0 0 2.5px rgba(49, 132, 240, var(--ps-nove));
  }
  /* Zlatá hodinka 182: tisk z mobilního Photoshopu. Sdílení otevře nabídku
     pod ikonou, Print vysune list Print Options jako v iPhonu. */
  .zh-ptisk__pc {
    display: none;
  }
  .zh-ptisk__tel {
    display: flex;
    flex-direction: column;
  }
  .zh-ptisk__nabidka--tel,
  .zh-ptisk__list {
    font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
    font-size: 16px;
    color: #dcdcdc;
  }
  .zh-ptisk .zh-ui-ikona {
    color: #dcdcdc;
  }
  .zh-ptisk__nabidka--tel {
    top: calc(var(--psm-lista) - 4px);
    right: 62px;
    width: min(250px, calc(100cqw - 32px));
    overflow: hidden;
    border-radius: 13px;
    background: #2c2c2e;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.9);
    transform-origin: 100% 0;
  }
  .zh-ptisk__nabidka--tel .zh-ptisk__polozka {
    flex: none;
    gap: 16px;
    height: 46px;
    padding: 0 16px;
  }
  .zh-ptisk__nabidka--tel .zh-ptisk__polozka + .zh-ptisk__polozka {
    border-top: 1px solid #3d3d40;
  }
  .zh-ptisk__list {
    left: 0;
    right: 0;
    bottom: 0;
    height: min(74cqh, 620px);
    padding-bottom: 22px;
    border-radius: 14px 14px 0 0;
    background: #1c1c1e;
    box-shadow: 0 -20px 50px -16px rgba(0, 0, 0, 0.9);
  }
  .zh-ptisk__hlavicka {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    color: #0a84ff;
  }
  .zh-ptisk__hlavicka b {
    font-weight: 600;
    color: #dcdcdc;
  }
  .zh-ptisk__ios-tisk {
    font-weight: 600;
  }
  .zh-ptisk__skupina {
    display: flex;
    flex: none;
    flex-direction: column;
    margin: 0 16px;
    overflow: hidden;
    border-radius: 10px;
    background: #2c2c2e;
  }
  .zh-ptisk__ios-radek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 46px;
    padding: 0 14px;
  }
  .zh-ptisk__ios-radek + .zh-ptisk__ios-radek {
    border-top: 1px solid #3d3d40;
  }
  .zh-ptisk__hodnota {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8e8e93;
  }
  .zh-ptisk .zh-ptisk__hodnota .zh-ui-ikona {
    color: #8e8e93;
  }
  .zh-ptisk__krokovac {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: #3a3a3c;
  }
  .zh-ptisk__krokovac i {
    width: 1px;
    height: 18px;
    background: #545458;
  }
  .zh-ptisk__list .zh-ptisk__nahled {
    margin: 14px 16px 0;
    background: #141416;
    box-shadow: none;
  }
}