/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka, Lightroom (body 35 a 81): Lightroom Classic, modul Develop,
   přes celou obrazovku, nakreslený v HTML. Rozměry tečou s oknem (clamp),
   plocha programu je kontejner (cqw, cqh), takže fotka sedí přesně na plátně
   i vedle posuvníku okna. Posuvníky a histogram jedou podle --zh-lr-uprava.
   Zlatá hodinka 100: nahoře nabídky s logem, levý panel sbalený pod kartou
   kroku, fotka uprostřed mezi kartou a pravým panelem.
   Na telefonu je to mobilní Lightroom: fotka a panel Light. */
/* neutrální šedé Lightroomu Classic, žádná bílá */
/* Zlatá hodinka 129: úprava se počítá jen na prvcích, které se podle ní
   hýbou (--zh-postup-cile), a nedědí se. Hodnoty svitku a posuvníků se dědí
   jako čísla: dokud se nezmění, prvky pod nimi se při rolování nepřepočítají. */
@property --zh-lr-uprava {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --lr-b {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --lr-c {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --lrm-dal {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --lr-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --lr-zive {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --lr-svit {
  syntax: '<number>';
  inherits: true;
  initial-value: 170;
}
/* .zh-scena z komponenty má min-height 100vh a načítá se později, proto dvojitá třída.
   Zlatá hodinka 252: delší scéna, úprava se dá na rolování víc času. */
.zh-scena.zh-lr {
  min-height: 320vh;
}
.zh-lr {
  /* Zlatá hodinka 100: úprava začne po dojetí na sekci (prvních 10 procent
     scrollu nic), skončí v 65 procentech a hotová fotka pak zůstane vidět.
     Zlatá hodinka 101: meze čte i plášť (zvuk čáry) a 004-lightroom.js. */
  --zh-cara-od: 0.1;
  --zh-cara-do: 0.65;
  /* Zlatá hodinka 129: prvky, kterým motor scén zapisuje postup přímo */
  --zh-postup-cile: '.zh-lrc__snimek, .zh-lrc__stitek, .zh-lrc__hist--raw, .zh-lrc__hist--lr, .zh-lrc__svitek, .zh-lrc__jezdec';
  --lr-f: clamp(10.5px, 0.86vw, 14px);
  --lr-menu: clamp(24px, 3vh, 32px);
  --lr-lista: clamp(32px, 4.4vh, 50px);
  --lr-levy: 10px;
  --lr-pravy: clamp(220px, 19vw, 330px);
  --lr-film: clamp(72px, 11vh, 124px);
  --lr-nastroje: clamp(26px, 3.2vh, 34px);
  --lr-hlava: clamp(21px, 2.7vh, 29px);
  --lr-radek: clamp(17px, 2.3vh, 25px);
}
/* Zlatá hodinka 129: úpravu si počítá každý prvek, který se podle ní hýbe,
   sám na sobě z postupu, který mu zapíše motor scén. */
.zh-lrc__snimek,
.zh-lrc__stitek,
.zh-lrc__hist--raw,
.zh-lrc__hist--lr,
.zh-lrc__svitek,
.zh-lrc__jezdec {
  --zh-lr-uprava: clamp(0, (var(--zh-postup, 0) - var(--zh-cara-od)) / (var(--zh-cara-do) - var(--zh-cara-od)), 1);
}
.zh-lr__pozadi {
  overflow: hidden;
  background: #161616;
}
/* ─────────────────────────────  okno programu  ───────────────────── */
.zh-lrc {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  grid-template-columns: var(--lr-levy) minmax(0, 1fr) var(--lr-pravy);
  grid-template-rows: var(--lr-menu) var(--lr-lista) minmax(0, 1fr) var(--lr-film);
  grid-template-areas: "menu menu menu" "lista lista lista" "levy platno pravy" "film film film";
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--lr-f);
  line-height: 1.25;
  color: #ababab;
  user-select: none;
}
/* program se na krajích noří do tmy webu, střed s fotkou zůstane čistý */
.zh-lrc::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-lrc .zh-ui-ikona {
  color: #8f8f8f;
}
.zh-lrc__mezera {
  flex: 1;
}
.zh-lrm__lista,
.zh-lrm__nastroje,
.zh-lrc__jen-mobil {
  display: none;
}
/* nabídky a ovládání okna, logo programu vlevo jako ve Windows */
.zh-lrc__menu {
  grid-area: menu;
  display: flex;
  align-items: stretch;
  padding-left: clamp(8px, 0.8vw, 14px);
  background: #202020;
  border-bottom: 1px solid #0a0a0a;
  color: #bdbdbd;
  white-space: nowrap;
  overflow: hidden;
}
.zh-lrc .zh-lrc__logo {
  display: block;
  flex: none;
  align-self: center;
  width: calc(var(--lr-menu) - 8px);
  height: calc(var(--lr-menu) - 8px);
  max-width: none;
  margin-right: clamp(10px, 1vw, 16px);
}
.zh-lrc__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-lrc__menu .zh-okno {
  --zh-okno-v: var(--lr-menu);
}
/* horní panel: jmenovka vlevo, moduly vpravo */
.zh-lrc__lista {
  grid-area: lista;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(12px, 1.5vw, 26px);
  background: linear-gradient(#1c1c1c, #131313);
  border-bottom: 1px solid #0a0a0a;
}
.zh-lrc__jmenovka {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--lr-f) * 1.75);
  color: #8c8c8c;
  white-space: nowrap;
}
.zh-lrc__jmenovka small {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 0.45em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5f5f5f;
}
.zh-lrc__moduly {
  display: flex;
  align-items: center;
  font-size: calc(var(--lr-f) * 1.2);
  color: #5e5e5e;
  white-space: nowrap;
}
.zh-lrc__moduly > * + *::before {
  content: '|';
  margin: 0 clamp(6px, 0.75vw, 14px);
  color: #3b3b3b;
}
.zh-lrc__moduly b {
  font-weight: 400;
  color: #d4d4d4;
}
/* ─────────────────────────────  panely  ──────────────────────────── */
/* sbalený levý panel: proužek s trojúhelníkem, jako když ho fotograf schová */
.zh-lrc__skryty {
  grid-area: levy;
  position: relative;
  background: #1f1f1f;
  border-right: 1px solid #111111;
}
.zh-lrc__skryty::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 4px solid transparent;
  border-left: 5px solid #626262;
  border-right: 0;
}
.zh-lrc__pravy {
  grid-area: pravy;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #292929;
  border-left: 1px solid #111111;
}
.zh-lrc__panel {
  flex: none;
  border-bottom: 1px solid #1d1d1d;
}
.zh-lrc__hlava {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--lr-hlava);
  padding: 0 10px;
  background: linear-gradient(#333333, #303030);
  border-bottom: 1px solid #1d1d1d;
  color: #c3c3c3;
  white-space: nowrap;
}
.zh-lrc__hlava > span:first-child {
  flex: 1;
}
/* rozbalovací trojúhelník vpravo v hlavičce panelu */
.zh-lrc__pravy .zh-lrc__hlava::after {
  content: '';
  flex: none;
  border: 4px solid transparent;
  border-top: 5px solid #858585;
  border-bottom: 0;
}
.zh-lrc__zavrene .zh-lrc__hlava::after {
  border: 4px solid transparent;
  border-right: 5px solid #858585;
  border-left: 0;
}
.zh-lrc__tlacitka {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding: 8px 10px;
  background: #222222;
  border-top: 1px solid #111111;
}
.zh-lrc__tlacitka span {
  flex: 1;
  padding: 3px 0 4px;
  border-radius: 3px;
  background: linear-gradient(#474747, #393939);
  box-shadow: inset 0 0 0 1px #1a1a1a;
  text-align: center;
  color: #c9c9c9;
}
/* ─────────────────────────────  plátno a fotka  ──────────────────── */
.zh-lrc__platno {
  grid-area: platno;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  background: #1c1c1c;
}
.zh-lrc__nastroje {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--lr-nastroje);
  padding: 0 12px;
  background: #242424;
  border-top: 1px solid #111111;
  color: #767676;
  white-space: nowrap;
  overflow: hidden;
}
.zh-lrc__zaskrt {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}
/* Fotka leží uprostřed volného místa mezi kartou kroku a pravým panelem
   (Zlatá hodinka 100, stejně jako dokument Photoshopu), co největší.
   Počítá se z plochy kontejneru, ne z okna, takže ji neposune posuvník
   stránky. Čára Před a Po je společná s Photoshopem (.zh-delic v plášti). */
.zh-lrc__snimek {
  --lr-okraj: clamp(12px, 2.6vh, 30px);
  --lr-mezera: clamp(18px, 2vw, 32px);
  --lr-karta: calc(var(--zh-karta-okraj) + var(--zh-karta-sirka));
  --lr-nahore: calc(var(--lr-menu) + var(--lr-lista));
  --lr-plocha-v: calc(100cqh - var(--lr-nahore) - var(--lr-film) - var(--lr-nastroje));
  --lr-h: min(calc(var(--lr-plocha-v) - 2 * var(--lr-okraj)), calc((100cqw - var(--lr-pravy) - var(--lr-karta) - 2 * var(--lr-mezera)) * 4 / 3));
  --zh-delic: calc(1 - var(--zh-lr-uprava));
  position: absolute;
  z-index: 1;
  left: calc((var(--lr-karta) + 100cqw - var(--lr-pravy)) / 2);
  top: calc(var(--lr-nahore) + var(--lr-plocha-v) / 2);
  width: calc(var(--lr-h) * 0.75);
  height: var(--lr-h);
  translate: -50% -50%;
  /* stín drží dosah pod mezerou k liště pod plátnem (Zlatá hodinka 22) */
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px #0c0c0c;
}
.zh-lrc .zh-lrc__vrstva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.zh-lrc__stitek {
  position: absolute;
  top: 10px;
  padding: 2px 8px 3px;
  border-radius: 2px;
  background: rgba(24, 24, 24, 0.72);
  font-size: calc(var(--lr-f) * 1.05);
  color: #c8c8c8;
}
.zh-lrc__stitek--pred {
  left: 10px;
  opacity: clamp(0, (1 - var(--zh-lr-uprava)) * 6, 1);
}
.zh-lrc__stitek--po {
  right: 10px;
  opacity: clamp(0, var(--zh-lr-uprava) * 6, 1);
}
/* ─────────────────────────────  pravý panel  ─────────────────────── */
.zh-lrc__histogram {
  position: relative;
  height: clamp(48px, 8.5vh, 118px);
  margin: 8px 10px 0;
  background-color: #1a1a1a;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #262626 calc(25% - 1px) 25%);
  box-shadow: inset 0 0 0 1px #121212;
}
.zh-lrc__histogram svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zh-lrc__hist path {
  mix-blend-mode: screen;
}
.zh-lrc__hist-r {
  fill: rgba(226, 64, 64, 0.82);
}
.zh-lrc__hist-g {
  fill: rgba(64, 200, 84, 0.78);
}
.zh-lrc__hist-b {
  fill: rgba(72, 112, 238, 0.85);
}
.zh-lrc__hist--raw {
  opacity: calc(1 - var(--zh-lr-uprava));
}
.zh-lrc__hist--lr {
  opacity: var(--zh-lr-uprava);
}
.zh-lrc__exif {
  display: flex;
  justify-content: space-between;
  padding: 5px 12px 7px;
  font-size: 0.92em;
  color: #767676;
}
.zh-lrc__nastroje-prave {
  display: flex;
  justify-content: space-around;
  padding: 6px 22px 7px;
  background: #242424;
  border-top: 1px solid #1d1d1d;
  border-bottom: 1px solid #1d1d1d;
}
/* Svitek pravého panelu: jak práce postupuje, panel se posune na skupinu
   Tone a pak na Presence, takže posuvník, se kterým se právě hýbe, je vždycky
   nad kartou kroku, i na nízké obrazovce. */
.zh-lrc__svitek {
  --lr-b: clamp(0, (var(--zh-lr-uprava) - 0.12) * 1000, 1);
  --lr-c: clamp(0, (var(--zh-lr-uprava) - 0.595) * 1000, 1);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.zh-lrc__svitek-obsah {
  translate: 0 calc(-1 * (var(--lr-b) * (var(--lr-hlava) + 10px + 5 * var(--lr-radek)) + var(--lr-c) * (5px + 7 * var(--lr-radek))));
  transition: translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.zh-lrc__svitek::after {
  content: '';
  position: absolute;
  top: calc(3px + (var(--lr-b) + var(--lr-c)) * 22%);
  right: 2px;
  width: 4px;
  height: 52%;
  border-radius: 2px;
  background: #454545;
  transition: top 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.zh-lrc__basic {
  padding-bottom: 6px;
}
.zh-lrc__volba,
.zh-lrc__skupina {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--lr-radek);
  padding: 0 12px;
  white-space: nowrap;
  color: #767676;
}
.zh-lrc__volba b {
  font-weight: 400;
  color: #d4d4d4;
}
.zh-lrc__volba:first-of-type {
  margin-top: 4px;
}
.zh-lrc__skupina {
  justify-content: space-between;
  margin-top: 5px;
  color: #bdbdbd;
}
.zh-lrc__skupina b {
  margin-right: auto;
  font-weight: 400;
  color: #d4d4d4;
}
.zh-lrc__skupina i {
  font-style: normal;
  color: #767676;
}
/* Posuvník: poloha jede v CSS, číslo píše 004-lightroom.js. Dokud se
   posuvník hýbe, popis, jezdec i číslo se rozsvítí jako pod myší. */
.zh-lrc__jezdec {
  --lr-t: clamp(0, (var(--zh-lr-uprava) - var(--a)) / (var(--b) - var(--a)), 1);
  --lr-zive: min(clamp(0, var(--lr-t) * 25, 1), clamp(0, (1 - var(--lr-t)) * 25, 1));
  --lr-svit: calc(170 + 58 * var(--lr-zive));
  display: grid;
  grid-template-columns: 31% minmax(0, 1fr) 3.4em;
  align-items: center;
  gap: 9px;
  height: var(--lr-radek);
  padding: 0 12px;
  color: rgb(var(--lr-svit) var(--lr-svit) var(--lr-svit));
}
.zh-lrc__popis {
  text-align: right;
  white-space: nowrap;
}
.zh-lrc__draha {
  position: relative;
  height: 2px;
  background: #121212;
  box-shadow: 0 1px 0 #3a3a3a;
}
.zh-lrc__draha--teplota {
  background: linear-gradient(90deg, #3b6fd0, #b8b8b8 50%, #d6b23a);
}
.zh-lrc__draha--odstin {
  background: linear-gradient(90deg, #3aa84a, #b8b8b8 50%, #c04ab8);
}
.zh-lrc__draha--barva {
  background: linear-gradient(90deg, #6a6a6a, #b0506e 35%, #c29a3c 55%, #4f9a5e 75%, #4a78c0);
}
.zh-lrc__draha i {
  position: absolute;
  top: 50%;
  left: calc((var(--z) + (var(--k) - var(--z)) * var(--lr-t)) * 100%);
  width: 9px;
  height: 11px;
  translate: -50% -28%;
  background: rgb(calc(var(--lr-svit) + 18) calc(var(--lr-svit) + 18) calc(var(--lr-svit) + 18));
  clip-path: polygon(50% 0, 100% 48%, 100% 100%, 0 100%, 0 48%);
}
.zh-lrc__hodnota {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zh-lrc__zavrene {
  flex: none;
}
/* ─────────────────────────────  filmový pás  ─────────────────────── */
.zh-lrc__film {
  grid-area: film;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #191919;
  border-top: 1px solid #0b0b0b;
}
.zh-lrc__film-lista {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(20px, 2.6vh, 28px);
  padding: 0 10px;
  background: #1e1e1e;
  border-bottom: 1px solid #101010;
  color: #767676;
  white-space: nowrap;
  overflow: hidden;
}
.zh-lrc__film-okno {
  display: grid;
  place-items: center;
  width: 16px;
  height: 13px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #4d4d4d;
  font-size: 0.8em;
}
.zh-lrc__film-cesta b,
.zh-lrc__film-filtr b {
  font-weight: 400;
  color: #d4d4d4;
}
.zh-lrc__film-cesta span {
  margin-left: 0.6em;
}
.zh-lrc__film-pas {
  display: flex;
  flex: 1;
  gap: 3px;
  min-height: 0;
  padding: 4px 10px 6px;
  overflow: hidden;
}
.zh-lrc__film-bunka {
  flex: none;
  height: 100%;
  aspect-ratio: 6 / 5;
  padding: 5px;
  border-radius: 2px;
  background: #2e2e2e;
}
.zh-lrc__film-bunka--vybrana {
  background: #565656;
  box-shadow: inset 0 0 0 1px #6a6a6a;
}
.zh-lrc .zh-lrc__film-bunka img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
/* ─────────────────────────────  telefon  ─────────────────────────── */
/* Mobilní Lightroom: horní lišta, fotka, řada nástrojů a panel Light
   se šesti posuvníky, všechno nad panelem kroku. Zlatá hodinka 117: fotka
   se zmenší o skutečnou výšku panelu (--zh-karta-v z jádra).
   Zlatá hodinka 154: fotka je široká skoro jako telefon a výšku jí dá
   místo nad panelem kroku; panel Light ukazuje tři posuvníky a dál roluje
   sám. Lišta, mezery fotky, nástroje a panel Light mají dohromady 214 px,
   mezera nad panelem kroku 12 px. Scéna je delší, úprava jede pomaleji. */
@media (max-width: 767px) {
  .zh-scena.zh-lr {
    min-height: 440vh;
  }
  .zh-lr {
    --lr-f: 13px;
    --lr-radek: 23px;
    --lrm-foto: max(180px, min(calc(100svh - var(--zh-karta-v, 176px) - 226px), calc((100vw - 24px) * 4 / 3)));
  }
  .zh-lr__pozadi {
    background: #0c0c0c;
  }
  .zh-lrc {
    display: flex;
    flex-direction: column;
    container-type: normal;
  }
  /* panel kroku je neprůhledný a patří k programu, ztmavení dole netřeba */
  .zh-lrc::after {
    display: none;
  }
  .zh-lrc__menu,
  .zh-lrc__lista,
  .zh-lrc__skryty,
  .zh-lrc__platno,
  .zh-lrc__film,
  .zh-lrc__stitek,
  .zh-lrc__panel--histogram,
  .zh-lrc__nastroje-prave,
  .zh-lrc__basic > .zh-lrc__hlava,
  .zh-lrc__volba,
  .zh-lrc__skupina--wb,
  .zh-lrc__skupina--presence,
  .zh-lrc__jezdec:not(.zh-lrc__jezdec--svetlo),
  .zh-lrc__zavrene,
  .zh-lrc__pravy > .zh-lrc__tlacitka,
  .zh-lrc__jen-pc {
    display: none;
  }
  .zh-lrc__jen-mobil {
    display: inline;
  }
  .zh-lrc .zh-ui-ikona {
    color: #cfcfcf;
  }
  /* vpravo nahoře je tlačítko zvuku, ikony lišty končí před ním */
  .zh-lrm__lista {
    display: flex;
    flex: none;
    align-items: center;
    gap: 18px;
    height: 50px;
    padding: 0 70px 0 16px;
  }
  .zh-lrm__mezera {
    flex: 1;
  }
  .zh-lrc__snimek {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    align-self: center;
    width: calc(var(--lrm-foto) * 0.75);
    height: var(--lrm-foto);
    margin: 2px 0 12px;
    translate: none;
    box-shadow: none;
  }
  .zh-lrm__nastroje {
    display: flex;
    flex: none;
    justify-content: space-around;
    padding: 8px 6px 6px;
    border-top: 1px solid #222222;
  }
  .zh-lrm__nastroj {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
  }
  .zh-lrm__nastroj small {
    font-size: 10px;
    color: #8a8a8a;
  }
  .zh-lrc .zh-lrm__nastroj--ted .zh-ui-ikona,
  .zh-lrm__nastroj--ted small {
    color: #3f96f5;
  }
  .zh-lrc__pravy {
    flex: none;
    background: none;
    border: 0;
  }
  .zh-lrc__basic {
    border: 0;
  }
  .zh-lrc__svitek-obsah {
    translate: none;
  }
  .zh-lrc__svitek::after {
    display: none;
  }
  /* Zlatá hodinka 154: okno panelu je hlavička a tři posuvníky. Když přijde
     řada na Shadows, posuvníky vyjedou pod hlavičku jako při rolování
     a ukážou se Shadows, Whites a Blacks. */
  .zh-lrc__svitek {
    --lrm-dal: clamp(0, (var(--zh-lr-uprava) - 0.385) * 1000, 1);
    flex: none;
    height: calc(29px + 3 * var(--lr-radek));
  }
  .zh-lrc__skupina--tone {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    height: 29px;
    margin: 0;
    padding: 2px 18px 4px;
    font-size: 14px;
    color: #d0d0d0;
    background: #0c0c0c;
  }
  .zh-lrc__jezdec--svetlo {
    translate: 0 calc(-3 * var(--lr-radek) * var(--lrm-dal));
    transition: translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .zh-lrc__skupina--tone i {
    padding: 2px 10px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px #3c3c3c;
    font-size: 12px;
  }
  .zh-lrc__jezdec {
    grid-template-columns: 78px minmax(0, 1fr) 44px;
    gap: 12px;
    padding: 0 18px;
  }
  .zh-lrc__popis {
    text-align: left;
  }
  .zh-lrc__draha {
    height: 2px;
    background: #4a4a4a;
    box-shadow: none;
  }
  .zh-lrc__draha i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    translate: -50% -50%;
    clip-path: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
}