*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

:root {
  scroll-behavior: smooth;

  --icon-padding: 0.34em;

  --slider-thumb-gradient--idle: radial-gradient(circle farthest-side at 50% 50%, rgb(86 224 172) calc(23.3% + 1px), rgb(2 165 103) 69.3%, rgb(4 81 52 / 0%) 83.2%, rgb(45 176 135) 102.7%, rgb(0 192 133 / 0%) 36%);

  /* grenny */
  --slider-thumb-gradient--idle: radial-gradient(circle farthest-side at 50% 50%, oklch(0.82 0.14 156.77) calc(23.3% + 1px), oklch(0.64 0.15 149.96) 69.3%, oklch(0.38 0.08 152.48 / 0) 83.2%, oklch(0.68 0.13 158.99) 102.7%, oklch(0.71 0.16 154.39 / 0) 36%);
}


table {
  border-collapse: collapse;
}

ul {
  list-style: none;
}

img {
  display: block;
}

body {

  min-height: 100vh;
  /* TODO: relative oklch for chrome */
  color: var(--font-color);
  accent-color: oklch(0.70 0.6 178.44);
}

main {
  flex: 1;
}

label,
input {
  cursor: pointer;
  display: flex;
}

summary {
  list-style: none;
}

button,
input,
label,
a {

  -webkit-tap-highlight-color: transparent;
  font-size: inherit;
}

[hidden] {
  display: none !important;
}




select {
  /* tip: accent color hex for svg #00c085 */
  appearance: none;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;

  /* border: none; */

  /* accent caret */
  background-image: url('data:image/svg+xml;ut8, <svg xmlns="http://www.w3.org/2000/svg"  width="1.4rem"  height="1.4rem"  viewBox="0 0 24 24"  fill="none"  stroke="%2300c085"  stroke-width="1.4"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>');

  /* grey caret */
  background-image: url('data:image/svg+xml;ut8, <svg xmlns="http://www.w3.org/2000/svg"  width="1.4rem"  height="1.4rem"  viewBox="0 0 24 24"  fill="none"  stroke="%23878686"  stroke-width="1.4"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>');
  background-repeat: no-repeat;

}

/* input[type=number]::-webkit-inner-spin-button { */
/* width: 2rem; */
/* height: 2rem; */
/* } */

a.link--hoverable:hover {
  color: oklch(from var(--font-color) calc(l - 0.08) c h);
}


@media (prefers-reduced-motion) {
  :root {
    scroll-behavior: auto;
  }
}

.text {
  & a {
    text-decoration: underline;
  }
}

.Account {
  &>div {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.4rem;
    gap: 4rem;

    &>div {
      max-width: 30rem;
    }
  }

  & span {
    display: block;
    color: var(--legend-color);
    margin-bottom: 0.22rem;
  }

  & a {
    text-decoration: underline;
  }

  & p {
    margin-bottom: 0.92rem;
  }

  & svg.Icon {
    width: 255px;
    height: 255px;
  }
}

/*---------------------------------------------------------------*/
/* @Utils@ */

.fr {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  & li:first-child a {
    padding-left: 0;
  }
}

.numeric {
  position: relative;
  top: 1px;
  font-size: 0.962em;
}

.f {
  display: flex;
}

.frw {
  display: flex;
  flex-flow: row wrap;
  align-items: center;

  & li:first-child a {
    padding-left: 0;
  }
}

.tdn a {
  text-decoration: none;
}

.jcc {
  justify-content: center;
}

.fc {
  display: flex;
  flex-flow: column nowrap;
}

.fullh {
  height: 100%;
}


.sq {
  aspect-ratio: 1/1;
}


/* full-height-children-container */
.fhcc {
  &>* {
    height: 100%;
  }
}

.fcc {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.text {
  padding: 0 var(--tile-gap);
  max-width: 90ch;
  margin: 0 auto;

  & p {
    display: block;
    margin-bottom: 0.6em;
    line-height: 1.2;
  }

  &>* {
    text-align: justify;
  }
}


.aic {
  align-items: center;
}

.no-wrap-text {
  text-wrap: nowrap;
}

.nw {
  text-wrap: nowrap;
}

.tnw {
  text-wrap: nowrap;
}

.vert {
  height: 100%;
  width: auto;
}

.horz {
  width: 100%;
  height: auto;
}

.vert-frame {
  height: 100%;
}

.target {
  text-transform: unset !important;
}

.horz-frame {
  width: 100%;
}

.df {
  display: flex;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


[popover]:popover-open {
  overlay: none !important;
}



/*---------------------------------------------------------------*/
/* @Vars@ */

:root {
  font-size: var(--font-size);


  @media (width <=870px) {
    font-size: calc(3/4 * var(--font-size));
  }

  --max-content-width: 134ch;

  --tile-gap: clamp(.8rem * var(--global-touch-factor), 2.12vw * var(--global-touch-factor), 1.32rem * var(--global-touch-factor));

  --tile-gap: clamp(.8rem, 2.12vw, 1.32rem);

  --horizontal-padding: max(calc((100vw - var(--max-content-width)) / 2), var(--tile-gap));

  --header-height: calc(1.82rem + 16px);

  @media (width > 1374px) {
    --header-height: 3.4rem;

  }

  --top-bar-height: 3.4rem;
  --top-bar-top-shift: calc(var(--tile-gap) / 2);
  --content-top-shift-desktop: calc(var(--top-bar-height) + var(--top-bar-top-shift));


  --tile-vert-padding: 1.2rem;
  --tile-horz-padding: 1.4rem;

  --tile-vert-padding: clamp(1.32rem, 1.88vw, 1.68rem);
  --tile-horz-padding: clamp(1.02rem, 1.8vw, 1.6rem);


  --tile-padding: var(--tile-vert-padding) var(--tile-horz-padding);
  --tile-height: clamp(10rem, 100vw, 12rem);
  --tile-height-portret: 12.4rem;

  --tile-border-radius: 1.76rem;

  --tile-header-margin-bottom: 0.62rem;
  --tile-header-margin-top: 0.292rem;

  --box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1),
  0 0 0 1px rgba(10, 10, 10, .02);

  --btn-vert-padding: 0.42rem;
  --btn-horz-padding: 1rem;
  --btn-padding: var(--btn-vert-padding) var(--btn-horz-padding);
  --btn-border-radius: .64rem;

  --top-bar-border-radius: 1.2rem;

  --arrow-link-hover-shift: .12em;
  --arrow-link-active-shift: .2em;

  --footer-vertical-division-spacing: 2.2rem;

  --btn-vert-padding: 0.52rem;
  --btn-horz-padding: 1rem;

  /*---------------------------------------------------------------*/
  /* @Colors@ */

  --font-accent-foreground-color: oklch(0.18 0 0);


  /*---------------------------------------------------------------*/


  --input-radio-checked-inner-color: oklch(0.82 0.14 163.8);
  --input-radio-checked-outer-color: oklch(0.58 0.13 161.9);

  /* greeny */
  --input-radio-checked-inner-color: oklch(0.82 0.14 155.8);
  --input-radio-checked-outer-color: oklch(0.58 0.13 153.9);


  /*---------------------------------------------------------------*/
  /* @Global factors@ */

  --global-padding-factor: 1;

  --global-margin-factor: 1;

  --global-touch-factor: 1;

  @media (hover: none) {
    --global-touch-factor: 1.32;
  }

  --global-border-radius-factor: 1;


  /*---------------------------------------------------------------*/
  /* @Controls (buttons, selects, inputs)@ */


  --control-padding-factor: calc(1 * var(--global-padding-factor) * var(--global-touch-factor));

  --control-vert-margin: 0.8em;

  --control-margin-top: 0.8em;


  --control-border-radius-factor: calc(1 * var(--global-border-radius-factor));

  /* --control-border-radius-factor: calc(0.64em * 1 * var(--global-border-radius-factor)); */

  /* --control-vert-padding: calc(0.528em * var(--control-touch-scale-coef)); */
  /* --control-horz-padding: calc(1.08em * var(--control-touch-scale-coef)); */

  /* --control-padding: var(--control-vert-padding) var(--control-horz-padding); */

  --control-opacity--hover: 1;
  --control-opacity--active: 0.82;
  --control-opacity--idle: 0.72;
  --control-opacity--disabled: 0.48;

  --blur: blur(6px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --theme: light;
  }
}

:root[data-theme="light"] {
  --theme: light;
}

:root[data-theme="dark"] {
  --theme: dark;
}

/* Container style quest is not baseline */

/* @container style(--theme: light) {} */

/* @container style(--theme: dark) {} */

.btn--accent {
  color: var(--font-accent-foreground-color);
  background-color: var(--accent-color);
}


:root {
  line-height: 1;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-color);
}

.Links li::marker {
  color: var(--font-color);
}



/*---------------------------------------------------------------*/
/* @a@ */

a {}


/*---------------------------------------------------------------*/
/* @button@ */

.bmt {
  margin-top: calc(0.8 * var(--tile-gap));
}

.btn,
button {

  --padding-factor-self: 1;
  --border-factor-self: 1;

  /*---------------------------------------------------------------*/


  --padding-factor: calc(var(--padding-factor-self) * var(--control-padding-factor));

  --border-radius-factor: calc(var(--border-factor-self) * var(--control-border-radius-factor));

  /*---------------------------------------------------------------*/


  --vert-padding: calc(0.528em * var(--padding-factor));

  --horz-padding: calc(1.08em * var(--padding-factor));

  --border-radius: calc(0.64em * var(--border-radius-factor));

  /*---------------------------------------------------------------*/


  display: inline-flex;
  align-items: center;
  justify-content: center;

  /*---------------------------------------------------------------*/


  padding: var(--vert-padding) var(--horz-padding);

  border-radius: var(--border-radius);

  /*---------------------------------------------------------------*/


  font-size: 1rem;
  font-family: inherit;
  color: var(--font-color);

  /*---------------------------------------------------------------*/


  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  background-color: transparent;

  &>* {
    pointer-events: none;
  }

  /*---------------------------------------------------------------*/


  &:active:not([disabled="true"], .static) {
    transform: translateY(1px);

    @media (hover: none) {

      transform: translateY(2px);
    }
  }

  /*---------------------------------------------------------------*/


  &:disabled {
    opacity: 0.48;
    cursor: not-allowed;
  }

}


.secondary {
  background-color: var(--secondary-color);
  color: var(--font-color);

  &:hover {
    background-color: var(--secondary-color--hover);
  }

  &:active {
    background-color: var(--secondary-color--active);
  }

  &:focus-visible {
    outline-color: var(--font-color);
    box-shadow: 0 0 0 1px var(--accent-color);
  }
}

.accent {
  background-color: var(--accent-color);
  background: var(--accent-color);
  color: var(--font-accent-foreground-color);

  &:hover {
    background-color: oklch(from var(--accent-color) calc(l - 0.068) calc(c + 0.006) h);
  }

  &:active {
    background-color: oklch(from var(--accent-color) calc(l - 0.102) calc(c + 0.006) h);
  }

  &:focus-visible {
    box-shadow: 0 0 0 1px var(--bg-color);
    outline-color: var(--font-color);
  }
}


button,
summary,
select,
input[type="number"],
a {
  &:focus-visible {
    position: relative;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: 2px;

    box-shadow: 0 0 0 1px var(--accent-color);
    outline: solid 1px var(--font-color);
    z-index: 11;

  }
}

/* input[type="range"]:focus { */
/* &:focus { */
/* position: relative; */
/* z-index: 11; */
/* } */
/* } */


/* !!! */
/* :root:has(select:focus-visible, input[type=number]:focus-visible) body::after { */
/* content: ""; */
/* position: fixed; */
/* display: block; */
/* top: 0; */
/* left: 0; */
/* z-index: 10; */
/* width: 100vw; */
/* height: 100vh; */
/* background-color: oklch(0 0.006 153 / 0.36); */
/* } */


:has(select:focus-visible, input[type=number]:focus-visible, input[type=range]:focus) :where(.h, p, a, span:not(.sr-only), label, button, legend) {
  z-index: 11;
  position: relative;
}


/*---------------------------------------------------------------*/
/* @FORM@ */

select,
select~*,
input,
input~* {

  /* TODO: Is self factor is uselles and dangerous; */

  --padding-factor-self: 1;
  --border-factor-self: 1;

  /*---------------------------------------------------------------*/


  --padding-factor: calc(var(--padding-factor-self) * var(--control-padding-factor));

  --border-radius-factor: calc(var(--border-factor-self) * var(--control-border-radius-factor));

  /*---------------------------------------------------------------*/


  --vert-padding: calc(0.328em * var(--padding-factor));

  --horz-padding: calc(0.52em * var(--padding-factor));

  --border-radius: calc(0.44em * var(--border-radius-factor));
}


label:has(select) {
  pointer-events: none;
}

select {

  padding: var(--vert-padding) var(--horz-padding);

  border-radius: var(--border-radius);

  /*---------------------------------------------------------------*/


  min-height: 2.16rem;

  font-family: inherit;
  color: inherit;
  font-size: inherit;
  background-position: center right calc(var(--horz-padding) - var(--icon-padding));

  background-color: var(--control-body-bg-color--idle);

  outline-width: 1px;
  outline-style: solid;

  outline-color: var(--control-edge-color--idle);

  &:hover {
    background-color: var(--control-body-bg-color--hover);
    outline-color: var(--control-edge-color--hover);
  }

  pointer-events: auto;

}


/*---------------------------------------------------------------*/

input[type="radio"] {
  border-radius: 50%;
  appearance: none;
  width: 0.8rem;
  height: 0.8rem;

  outline-style: solid;
  outline-width: 0.1rem;

  &:checked {
    background: var(--control-thumb-bg--gradient);

    outline-offset: 0.116rem;
    outline-color: var(--accent-color-light);
  }

  &:not(:checked) {
    background-color: var(--control-body-bg-color--idle);

    outline-offset: 0;
    outline-color: var(--control-edge-color--idle);

    &:hover {
      background-color: var(--control-body-bg-color--hover);
      outline-color: var(--control-edge-color--hover);
    }

    &:active {
      background-color: var(--control-body-bg-color--active);
      outline-color: var(--control-edge-color--active);

      transform: scale(0.92);
    }
  }

}


.lstn {
  list-style-type: none;
}

.iconic {
  /* !!! */
  padding: 0.428rem calc(0.76 * var(--horz-padding));
  height: 100%;
  display: flex;
  align-items: center;
}

.with-icon {
  display: inline-grid;
  align-items: center;

  &>:not(svg) {
    grid-area: text;
  }

  & svg.Icon {
    grid-area: icon;
  }
}

.with-icon--above {
  grid-template-areas: "icon"
    "text";
  justify-items: center;
  align-content: center;

  & svg.Icon {
    margin: .092em .36em;
  }
}

.with-icon--right,
.with-icon--left {

  & svg.Icon {
    margin: 0 .36em;
  }
}

.with-icon--right {
  grid-template-areas: "text icon";
}

.with-icon--left {
  grid-template-areas: "icon text";
}


.arrow-link {
  --size: 1.4rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;

  & svg.Icon {
    position: relative;
    width: var(--size);
    height: var(--size);
  }

}



.link--anchor {
  & svg.Icon {
    rotate: 90deg;
  }

  &:hover svg.Icon {
    top: var(--arrow-link-hover-shift);
    left: var(--arrow-link-hover-shift);
  }

  &:active svg.Icon {
    top: var(--arrow-link-active-shift);
    left: var(--arrow-link-active-shift);
  }
}



.link--ext {
  &:hover svg.Icon {
    top: calc(-1 * var(--arrow-link-hover-shift));
    left: var(--arrow-link-hover-shift);
  }

  &:active svg.Icon {
    top: calc(-1 * var(--arrow-link-active-shift));
    left: var(--arrow-link-active-shift);
  }
}


/*---------------------------------------------------------------*/
/* @Layout@ */

section {
  padding: 0 var(--horizontal-padding);
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

section:first-child {
  padding-top: clamp(1.66rem, 6vw, 7.2rem);

  @media (width >1374px) {
    padding-top: clamp(var(--content-top-shift-desktop) + 1.6rem, 6vw, 7.2rem);
  }

}


section:not(.Hero)>.h {
  text-align: center;
}

section {
  &>.h {
    margin-bottom: clamp(1rem, 1.8vw, 2.12rem);
    font-size: 1.36rem;
  }
}

main {
  display: flex;
  flex-flow: column nowrap;
  gap: clamp(2.1rem, 6.66vw, 4.22rem);
}


/*---------------------------------------------------------------*/

.Icon {
  --size: 1rem;


  width: var(--size);
  height: var(--size);
}

a {
  color: inherit;
}


/*---------------------------------------------------------------*/
/* @Typography@ */
p,
a,
h2 {
  font-weight: 400;
}

h4 {
  font-weight: 600;
}

h3 {
  font-weight: 500;
}

section.text>.h {
  font-weight: 500;
}

.h,
p,
span,
button,
a,
label,
legend {
  color: var(--font-color);
}



/*---------------------------------------------------------------*/
/* @Footer@ */

footer {

  margin: 4.2rem var(--horizontal-padding);
  /* padding: calc(var(--footer-vertical-division-spacing)) 0; */
  /* margin-top: 4.2rem; */
  color: #4b4b4b;
  row-gap: var(--footer-vertical-division-spacing);

  border-top: 1px solid var(--divider-color);

  & nav {
    padding: var(--footer-vertical-division-spacing) 0;
    border-top: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
  }

  & nav ul {
    font-size: .92em;
    display: flex;
    justify-content: flex-end;
    column-gap: 1.6rem;
    flex-wrap: wrap;
    /* height: 2rem; */

    & svg.Icon {
      --size: 1.26rem;
    }

    & .Entity {
      margin-right: auto;
    }

    & a,
    span {
      height: 100%;
      padding: 0.66rem 0;

      display: inline-flex;
      align-items: center;

      text-decoration: none;
      text-wrap: nowrap;
    }
  }

  @media (width <=1200px) {
    & nav ul {

      flex-direction: column-reverse;
    }
  }
}

/*---------------------------------------------------------------*/
/* @Header@ */

/* header:has([popover]:popover-open)::before { */
/* display: block; */
/* content: ""; */
/* position: fixed; */
/* bottom: 0; */
/* left: 0; */
/* backdrop-filter: blur(4px); */
/* background-color: oklch(0.40 0 0 / 0.14); */
/* width: 50%; */
/* height: var(--header-height); */
/* z-index: -1; */

/* } */

header:has([popover]:popover-open) {
  & div.NavBar {
    border-top-right-radius: 0;
  }
}

header {
  container-type: scroll-state;
  container-name: sticky-header;
  z-index: 100;
  position: sticky;
  width: 100%;

  @media (width <=722px) {
    & .Logo .Text {
      display: none;
    }
  }

  /* @media (width > 1374px) { */
  /* position: fixed; */
  /* width: calc(100% - 3 * var(--tile-gap)); */
  /* left: 50%; */
  /* transform: translateX(-50%); */

  /* a.MobileSettings { */
  /* display: none; */
  /* } */
  /* } */

  /* top: calc(var(--tile-gap) / 2); */

  --drawer-menu-width: 76vw;

  & nav[popover]:popover-open~button[popovertarget=nav_menu] svg[data-kind="menu"] {
    display: none;
  }

  & nav[popover]:not(:popover-open)~button[popovertarget=nav_menu] svg[data-kind="close"] {
    display: none;
  }

  .D & .Menu {

    & a {
      text-decoration: none;
    }

    & :where(a)[href^="tel"],
    [href^="mail"],
    [href^="https"] {
      text-decoration: underline;
    }

  }



  & nav.Menu#nav_menu[popover]:popover-open {
    position: fixed;
    background-color: transparent;
    height: calc(100vh - var(--header-height));
    text-align: right;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    text-wrap: wrap;

    inset: unset;
    right: 0;
    top: 0;

    /* TODO: paddint for touch devices */
    & a {
      padding: calc(1/2 * var(--tile-gap) * var(--global-touch-factor)) 0;
      display: flex;
    }

    /* TODO: generalize text-decoration */
    & .Menu a,
    .MobileSettings {
      text-decoration: none;
      justify-content: flex-end;
    }

    & .Drawer {
      overflow-y: auto;
      padding: 1.82rem 1.2rem 2.6rem 3rem;
      justify-content: space-between;
      flex: 1 0 auto;
      max-width: 72%;
      align-items: flex-end;
      background-color: var(--bg-color-alpha);
      backdrop-filter: blur(6px);
      box-shadow: inset -0.2em -0.2em 0.6em -0.125em rgba(10, 10, 10, .1);
    }

    & ul.Menu {
      flex-flow: column nowrap;
      margin: 2.6rem 0;

      /* & a { */
      /* padding: .32rem 0; */
      /* display: flex; */
      /* } */
    }

    & .Contacts {
      justify-content: flex-end;

      & a {
        padding: 0;
        width: 100%;
        display: block;
      }


      & div:nth-child(2) {
        /* order: -1; */
      }

      & ul {
        list-style: none;
      }

      & span.Office {
        display: block;
      }
    }

    & button.BackdropedClose {
      padding: 0;
      flex-grow: 1;
      cursor: not-allowed;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;

      background-color: oklch(0.40 0 0 / 0.14);
      backdrop-filter: blur(4px);
      border-radius: 0;

      cursor: pointer;
      word-break: break-all;

      & svg.Icon {
        transform: translateY(calc(- var(--header-height)));
        width: 1.6rem;
        height: 1.6rem;
      }

    }
  }



  /* & ::backdrop { */
  /* background-color: #0b3b2224; */
  /* bottom: var(--header-height); */
  /* backdrop-filter: blur(3px); */
  /* } */



  /* desktop */
  @media (width > 1374px) {
    & ::backdrop {
      top: var(--header-height);
      bottom: 0;
    }

    /* & .TouchCall { */
    /* display: none; */
    /* } */

    & nav.Menu#nav_menu[popover]:popover-open {
      top: var(--header-height);
      box-shadow: inset -10px 0.2em 0.6em -0.125em rgba(10, 10, 10, .1);
    }


    & nav#nav_menu[popover] {
      display: flex;
      position: unset;
      overflow: unset;
      background-color: unset;
      inset: unset;

    }

    & nav#nav_menu[popover]:not(:popover-open) {
      & button.BackdropedClose {
        display: none;
      }

      & .Contacts {
        display: none;

      }
    }


    & [popover]:not(:popover-open)~button[popovertarget=nav_menu] {
      display: none;
    }

    & a.Btn {
      display: none;
    }

  }

  /* phone */
  @media (width <=1374px) {
    order: 2;
    bottom: 0;

    /* & a[data-call]:not(.btn) { */
    /* display: none; */
    /* } */

    & nav.Menu {
      top: 0;
    }

    & div.NavBar {
      /* position: relative; */

      /* !!! */
      /* &:has(:active) { */
      /* justify-items: center; */
      /* } */

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* grid-template-rows: var(--header-height); */
      grid-template-rows: 100%;
      box-shadow: var(--bottom-bar-box-shadow);

      border-top-left-radius: 1.12rem;
      border-top-right-radius: 1.12rem;
      gap: 0;
      padding: 0;

    }

  }

  @media (width <=722px) {
    /* --header-height: 2.8rem; */
  }

  & .NavBar {

    box-shadow: var(--top-bar-shadow);
  }

  @supports (container-type: scroll-state) {
    @container sticky-header scroll-state(stuck: top) {
      /* We can not refer here to container itself, only child.
      So wrapper is required */
      /* .NavBar { */
      /* box-shadow:  0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02); */
      /* } */

    }

  }

}


.NavBar {
  height: var(--header-height);
  /* min-height: 46px; */
  padding: 0 calc(var(--tile-gap));
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 1rem;
  z-index: 100;
  background-color: var(--bottom-bar-bg-color);

  @media (width > 1374px) {
    & a {
      height: 100%;
    }

  }

  &>button,
  &>a {
    height: 100%;
    padding: 0;

    --edge-shift: 1.6rem;

    @media (width <=1374px) {

      & .Logo img {
        max-height: calc(1.02rem + 12px);
      }

      &:last-child {
        padding-right: var(--edge-shift);
      }

      &:first-child {
        padding-left: var(--edge-shift);
      }


      font-size: 0.9rem;

      &:active {
        position: relative;
        z-index: 5;
      }


      &:active:first-child::after {
        @media (width > 722px) {
          width: calc(24ch + 2.8vw);
        }
      }



      &:active::after {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        /* TODO: why -1, not positive < 5 overlaps button text*/
        z-index: -1;
        position: absolute;
        display: block;
        content: "";
        width: calc(8ch + 2.8vw);
        /* width: 4ch; */
        height: 100%;

        border-radius: 108px 58px;

        background-color: oklch(from var(--accent-color) calc(l - 0.04) c h);
      }

      &:active:first-child::after {
        left: calc(50% + 1/2 * var(--edge-shift));
      }

      &:active:last-child::after {
        left: calc(50% - 1/2 * var(--edge-shift));
      }

    }
  }

  & .Hamburger svg.Icon {
    position: relative;
    top: 2px;
  }

  .Settings {
    position: relative;
  }

  @media (width > 1374px) {
    backdrop-filter: blur(6px);
    background-color: var(--top-bar-bg-color);
    border-radius: var(--top-bar-border-radius);

    .btn.with-icon--above {
      display: none;
    }

    & a {
      text-decoration: none;
    }

    & .Settings::before {
      position: absolute;
      content: "|";
      font-size: 1.46rem;
      font-weight: 300;
      transform: translateX(-0.48rem);
    }

    & .TopBarRightLinks {

      & a {
        padding: 0 0.78rem;
      }

      & svg.Icon {
        width: 1.52rem;
        height: 1.52rem;
      }
    }
  }

  @media (width<=1374px) {
    & .TopBarRightLinks {
      display: none;
    }
  }


  & nav ul {
    /* gap: var(--tile-gap); */
    height: 100%;

    & li {
      height: 100%;
    }

    & a {
      text-transform: lowercase;
      display: inline-flex;
      align-items: center;
      padding: 0 calc(1/2 * var(--tile-gap));
    }
  }

  /* & .btn { */
  /* background-color: transparent; */
  /* font-weight: 400; */
  /* padding: .4rem; */
  /* touch-action: manipulation; */
  /* } */


}

/* :where(h1) { */
/* margin-block: 0.47em; */
/* font-size: 2em; */
/* } */

/*---------------------------------------------------------------*/
/* @Hero@ */

section.Hero {

  --coef: 0.6;

  background-image: var(--hero-gradient);
  margin: 0 var(--tile-gap);
  border-bottom-left-radius: calc(1.44 * var(--tile-border-radius));
  border-bottom-right-radius: calc(1.44 * var(--tile-border-radius));


  background-size: cover;
  background-position-y: 34%;

  @media (width <=1226px) {

    background-position-x: 42%;
  }

  color: var(--light-font-color);
  min-height: calc(86vh - var(--header-height));

  /* padding: clamp(1.12rem + var(--header-height) * var(--coef), 6vw + var(--header-height) * var(--coef), 7.2rem + var(--header-height) * var(--coef)) 1rem 1rem clamp(.4rem, 8.8vw, 4.8rem); */

  padding: clamp(1.12rem, 6vw + var(--header-height) * var(--coef), 7.2rem + var(--header-height) * var(--coef)) 1rem 1rem clamp(.4rem, 8.8vw, 4.8rem);


  @media (width <=420px) {
    background-position-x: 40.2%;
  }

  & .h,
  p,
  a {
    color: var(--hero-font-color);
  }

  & a.with-icon--right {
    & svg.Icon {
      width: 1.4rem;
      height: 1.4rem;
      margin: 0 0.064em;
      rotate: 90deg;
    }
  }


  & h1 {
    /* font-size: clamp(1.2rem, 10vw, 2.9rem); */
    font-size: clamp(1.242rem, 10.68vw, 3.18rem);
    font-weight: 400;
    line-height: 0.9em;
    margin-bottom: clamp(1.28rem, 2.6vh, 1.68rem);
  }

  & *:not(h1) {
    font-size: 1.1rem;
    line-height: 1.2em;
  }

  & h2 {
    margin-right: 51.6vw;
    line-height: clamp(1.4rem, 3vh, 1.8rem);
    margin-bottom: clamp(1.4rem, 3vh, 1.8rem);
  }

  & .ContactsLinks {
    margin-bottom: 3.46rem;

    & ul {
      margin-top: .6rem;
      column-gap: 1.2rem;

      @media (width <=420px) {
        margin-top: .82rem;
        row-gap: .8rem;
      }
    }
  }

  /*---------------------------------------------------------------*/

  @media (width <=870px) {


    padding: clamp(1.8rem, 5.2vh, 4rem) 1rem 1rem clamp(.4rem, 5.6vw, 3rem);
    min-height: calc(90vh - var(--header-height));
    border-radius: none;
    margin: 0;

    & h2 {
      margin-right: 42vw;
    }
  }

  /*---------------------------------------------------------------*/

  @media (width <=520px) {
    & h2 {
      margin-right: 22vw;
    }
  }
}

/*---------------------------------------------------------------*/
/* @ViewsList@ */

section.ViewsList {

  --btns-gap: var(--tile-gap);

  & disclosure-text {
    cursor: pointer;
  }

  & .Controls {
    margin-left: calc(var(--tile-gap) / 2);
    gap: var(--btns-gap);
    align-items: stretch;

    @media (hover: none) {
      --btns-gap: calc(1.08 * var(--tile-gap));
    }


    & arrow-slider-control {

      & button[data-prev] svg.Icon {
        rotate: 180deg;
      }

      & svg.Icon {
        color: var(--slider-icon-font-color);
      }

      & ul {
        height: 100%;
        column-gap: calc(var(--btns-gap) / 1.66);

        & li {
          height: 100%;
        }
      }

    }
  }

  @media (width <=870px) {
    & .Controls {
      margin-left: auto;
      flex-direction: row-reverse;
      flex-wrap: wrap;
    }
  }

  & arrow-slider-control[state="next"] {

    & button[data-prev] {
      cursor: not-allowed;
    }

    /* & button[data-next] { */
    /* position: relative; */
    /* box-shadow: -2px 1px 8px 0px rgba(10, 10, 10, .1); */
    /* right: 60%; */
    /* } */
  }

  & arrow-slider-control[state="prev"] {

    & button[data-next] {
      cursor: not-allowed;
    }

    /* & button[data-prev] { */
    /* position: relative; */
    /* box-shadow: -2px 1px 8px 0px rgba(10, 10, 10, .1); */
    /* left: 60%; */
    /* } */
  }


  & .Slider {
    display: flex;
    overflow-x: auto;
    column-gap: var(--tile-gap);
    padding: calc(var(--tile-gap) + 12px) calc(var(--tile-gap) / 2);
    padding-top: var(--tile-gap);
  }

  & .View {
    background-color: var(--tile-bg-color);
    padding: var(--tile-padding);
    min-width: min(36ch, 76vw);
    display: flex;
    flex-flow: column nowrap;
    border-radius: var(--tile-border-radius);

    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);

    &>span {
      font-size: 0.9rem;
    }

    & .btn {
      margin-top: var(--vert-margin);
    }


  }

  & .Stars {
    margin-top: var(--tile-header-margin-top);
    margin-bottom: var(--tile-header-margin-bottom);
    display: flex;

    & svg.Icon {

      color: var(--accent-color);
    }
  }

  & svg.Icon {
    width: 1.4rem;
    height: 1.4rem;
  }

}



/*---------------------------------------------------------------*/
/* @Logo@ */

.Logo {
  text-align: left !important;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  /* padding: 0.28rem; */
  padding-left: 0;
  text-decoration: none;

  & img {
    max-height: calc(1.46rem + 14px);
  }

  color: inherit;

  @media (width <=870px) {
    padding: 0.4rem;

  }



  .Text {
    margin-left: 0.4rem;
  }

  & .Label {
    font-size: 1.26rem;
    font-weight: 700;
    letter-spacing: 1px;
  }

  & .Tag {
    display: block;
    margin-top: .12em;
    font-size: 0.78rem;
    letter-spacing: 0.28px;
    font-weight: 300;
  }

  @media (width <=1374px) {
    & .Tag {
      font-size: 0.66rem;
    }

    & .Label {
      font-size: 1.12rem;
    }

  }
}



/*---------------------------------------------------------------*/
/* @Skills@ */

section.Skills {
  & ul {
    --font-color: black;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr));
    gap: var(--tile-gap);


    @media (width <=570px) {
      grid-template-columns: 1fr;

    }

    & li {
      background-image: var(--accent-gradient);

      display: flex;
      flex-flow: column nowrap;
      background-color: #2bad70;
      padding: var(--tile-padding);
      border-radius: var(--tile-border-radius);

      & span {
        text-transform: uppercase;
        font-size: 0.64rem;
      }

      & .h {
        margin-top: var(--tile-header-margin-top);
        margin-bottom: var(--tile-header-margin-bottom);
      }

      & p {
        margin-right: 4vw;
        margin-bottom: clamp(1.08rem, 1.2vw, 1.4rem);
      }

      & span.i {
        color: var(--i-font-color);
        position: relative;
        user-select: none;
        display: block;
        text-align: right;
        font-size: 4.8rem;
        font-weight: 700;
        margin-top: auto;
        top: .8rem;
      }
    }
  }

}


/*---------------------------------------------------------------*/
/* @Services@ */

section.Services ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
  gap: var(--tile-gap);

  & li {
    position: relative;
  }

  & li:before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: var(--tile-border-radius);
  }

  & li:nth-child(1):before {
    background: linear-gradient(158deg, var(--tile-border-gradient-color-1) 69.73%, var(--tile-border-gradient-color-2) 98.95%);
  }

  & li:nth-child(3):before {
    background: linear-gradient(313deg, var(--tile-border-gradient-color-1) 69.73%, var(--tile-border-gradient-color-2) 98.95%);
  }

  & li:nth-child(5):before {
    background: linear-gradient(165deg, var(--tile-border-gradient-color-1) 64.73%, var(--tile-border-gradient-color-2) 81.95%);
  }

  & li:first-child {
    grid-column: span 2;
  }

  @media (width <=984px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (width <=620px) {
    grid-template-columns: 1fr;

    & li:first-child {
      grid-column: span 1;
    }
  }


  & li {
    color: var(--font-color);
    display: flex;
    background-color: var(--tile-bg-color);
    flex-flow: column nowrap;
    justify-content: flex-end;
    padding: var(--tile-padding);
    border: 1px solid var(--border-color);
    border-radius: var(--tile-border-radius);

    & .h {
      margin-top: clamp(1.36rem, 2vw, 2rem);
      margin-bottom: var(--tile-header-margin-bottom);
    }

    & p {
      display: inline-block;
      max-width: 100ch;
    }

    & svg.Icon {
      margin-bottom: auto;
      width: 2.6rem;
      height: 2.6rem;
    }

  }
}


/*---------------------------------------------------------------*/
/* @Advantages@ */

section.Advantages {
  & ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.8rem;
    padding-left: var(--tile-horz-padding);
    max-width: 80ch;
  }

  & li {
    display: flex;
    align-items: flex-start;

    & p {
      position: relative;

      & strong {
        font-weight: 500;
      }

      & svg.Icon {
        position: absolute;
        left: -1.3rem;
        top: 1px;
        height: 1rem;
        width: 1rem;
      }
    }
  }
}


/*---------------------------------------------------------------*/
/* @Contacts@ */

.Contacts {
  --ul-gap: 0.32rem;

  & a {
    text-decoration: underline;
  }

  @media (width <=982px) {
    --ul-gap: 0.72rem;
  }

  @media (width <=536px) {
    flex-flow: column nowrap;
  }

  @media (width > 536px) {

    flex-flow: row wrap;
  }

  grid-area: contacts;
  display: flex;
  align-content: flex-start;

  row-gap: 1.28rem;
  column-gap: 2.6rem;

  & .Links {
    gap: 1.28rem;
    align-items: flex-start;

    @media (width <=1024px) {
      flex-wrap: wrap;

    }


    & a {
      text-decoration: none;
      text-wrap: nowrap;

      & svg.Icon {
        margin-left: 0;
        width: 1.2rem;
        height: 1.2rem;
        stroke-width: 1.8 !important;
      }
    }
  }


  /* & ul.Links { */
  /* margin-left: 1rem; */
  /* list-style: disc; */
  /* gap: var(--ul-gap); */
  /* } */

  /* & ul.AddressTime { */
  /* gap: var(--ul-gap); */
  /* } */

}


/*---------------------------------------------------------------*/
/* @BlockDescriptor@ */

.BlockDescriptor {
  display: inline-block;
  font-size: 0.54em;
  text-transform: uppercase;
  letter-spacing: 0.126em;
  margin-bottom: 0.76em;
  font-weight: 700;
}

.upper-desc {
  text-transform: uppercase;
  letter-spacing: 0.126em;
  font-weight: 700;
}


/*---------------------------------------------------------------*/
/* @Info@ */

section.Info {

  background-image: var(--info-gradient);

  display: grid;
  margin: 0 var(--horizontal-padding);
  padding: clamp(1rem, 3vw, 3rem) clamp(.6rem, 2.2vw, 2rem);
  grid-template-areas: "header map"
    "contacts map"
  ;
  background-color: var(--accent-color);
  grid-template-columns: 1fr 1.7fr;
  grid-template-rows: max-content 1fr;
  column-gap: 3.2rem;

  border-radius: calc(1.44 * var(--tile-border-radius));

  & a,
  & p {
    padding: 0.28rem 0;
  }

  & p,
  .h,
  a,
  span,
  ::marker {
    color: var(--font-accent-foreground-color);
  }

  & .Contacts {
    margin-left: 0.72rem;
    padding-left: clamp(1rem, 1.66vw, 2.6rem);
    padding-right: 1rem;
  }

  & .Map {
    grid-area: map;
    height: 66vh;
    max-height: 26rem;
    overflow: hidden;
    border-radius: var(--tile-border-radius);
    position: relative;
    font-size: .84rem;

    --map-controls-margin: 1rem;

    & img {
      width: 100%;
      height: 108%;
      object-fit: cover;
      object-position: center right;
    }

    & span {
      color: var(--font-color);
      position: absolute;
      top: var(--map-controls-margin);
      right: var(--map-controls-margin);
      font-size: inherit;

      text-shadow: var(--map-tip-text-shadow);
    }

    & .btn {
      font-size: inherit;
      background-color: var(--map-beacon-bg-color);
      color: var(--font-color);
      border-radius: .4rem;
      position: absolute;
      bottom: var(--map-controls-margin);
      left: var(--map-controls-margin);
      padding: 0.32rem .52rem;
      box-shadow: var(--box-shadow);

      &>svg.Icon {
        width: 1.2rem;
        margin-right: .28rem;
        height: 1.2rem;
        color: #ff4433;
      }
    }

    & div {
      border-radius: 2rem;
    }
  }


  & .h {
    display: inline-flex;
    flex-wrap: wrap;
    padding-left: clamp(1rem, 1.66vw, 2.6rem);
    margin-bottom: 1.6rem;
    margin-top: 1.38rem;
    text-align: left;
    grid-area: header;
  }

  @media (width > 1024px) {

    & .h {
      flex-direction: column;
    }
  }

  @media (width <=1024px) {
    margin: 0;
    grid-template-areas: "header"
      "contacts"
      "map"
    ;
    grid-template-columns: 1fr;
    row-gap: clamp(1.4rem, 2vw, 3rem);

    & .h {
      margin: 0;
      margin-top: 1rem;
      margin-bottom: -0.4rem;
    }

  }


  @media (width <=520px) {
    & .h {
      margin-top: 2.12rem;
      margin-bottom: -0.4rem;

    }
  }

  & iframe {
    border-radius: var(--tile-border-radius);
  }

}


/*---------------------------------------------------------------*/
/* @Faq@ */

section.Faq {
  & ul .h {
    display: inline;
    font-weight: 400;
  }

  & details {
    border-radius: calc(0.77 * var(--tile-border-radius));
    background-color: var(--tile-bg-color);
    box-shadow: var(--box-shadow);

    & p {
      display: block;
      padding: var(--tile-padding);
      padding-top: 0;
    }
  }

  & details[open] {
    & svg.Icon {
      rotate: -45deg;
    }
  }

  & ul {

    row-gap: var(--tile-gap);

    & summary {
      cursor: pointer;
      padding: var(--tile-padding);

      & .h {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      & svg.Icon {
        min-width: 1.1rem;
        min-height: 1.1rem;
        color: var(--accent-color);
        rotate: -135deg;
        position: relative;
        top: -0.2rem;
        margin-bottom: auto;
      }
    }
  }
}



/*---------------------------------------------------------------*/
/* @Meta@ */

.Meta {
  color: var(--font-color);

  --top-cookies-notice-shift: 0rem;

  @media (width<=666px),
  (hover: none) {
    --top-cookies-notice-shift: 0.8rem;
  }

  @media (width<=306px) {
    --top-cookies-notice-shift: 0rem;
  }



  --legend-margin-bottom: 0.58rem;

  & .h {
    color: var(--meta-h-color);
    margin-bottom: 1rem;

    @media (width > 666px) and (hover: hover) {
      /* margin-bottom: 2rem; */

    }

    grid-area: h;

    font-weight: 600;
    display: block;
  }

  & legend {
    margin-bottom: var(--legend-margin-bottom);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.76rem;

    color: var(--legend-color);
  }

  & label {
    font-size: 0.942rem;
  }

  & form {
    padding: 0 0.52rem;

    display: grid;
    /* max-width: 40rem; */

    grid-template-areas: "h"
      "fields"
      "submit"
      "cookies"
    ;

    @media (hover: none),
    (width <=666px) {
      grid-template-areas:
        "h submit"
        "cookies submit"
        "fields fields";

      @media (width <=320px) {

        grid-template-areas:
          "h submit"
          "cookies cookies"
          "fields fields";
      }
    }

    column-gap: 3.2vw;
  }

  & .Fields {
    row-gap: 1.6rem;
    grid-area: fields;
    margin-top: 1.6rem;

    & .Theme legend {
      /* because radio-input label has padding */
      margin-bottom: calc(-0.12rem + var(--legend-margin-bottom));
    }
  }

  & .Cookies {
    grid-area: cookies;
  }

  & .Submit {
    grid-area: submit;

    @media (width <=666px),
    (hover: none) {
      justify-self: end;
    }
  }

  & button {

    @media (width>666px) and (hover: hover) {
      margin-top: 1.22rem;
      margin-bottom: 0.4rem;
    }

    margin-bottom: 0.82rem;

    /* margin-top: calc(0.8 * var(--tile-gap)); */
  }

  & .SettingsNotice {
    display: block;
    font-size: .8rem;
    font-weight: 400;

    /* !!! */
    /* margin: .48rem 0; */
    /* margin-top: 0.92rem; */
    /* margin-top: 0.92rem; */
    max-width: 36ch;

    & a {
      text-decoration: underline;
    }
  }

  & .FontSize input-syncer {

    max-width: 22rem;

    @media (hover: none) {
      max-width: unset;
    }

    /* width: 100%; */
    row-gap: 1.08rem;

    & label {
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;

      & select {
        margin-top: 0.4rem;
        width: calc(8ch + 2vw);
        min-width: 8ch;
        max-width: 18ch;
      }
    }



    & label.Range {
      position: relative;

      & input {
        top: -0.18rem;
      }

      & span {
        position: absolute;
        bottom: -0.42rem;
        user-select: none;
        pointer-events: none;
      }

      & .Start {
        left: var(--horz-padding);
      }

      & .End {
        right: var(--horz-padding);
      }
    }

  }
}




/*---------------------------------------------------------------*/
/* @ThemesSwitcher@ */

.ThemesSwitcher {
  align-items: flex-start;

  & theme-switcher {
    gap: var(--tile-gap);

    & label {
      padding: 0.12rem 0;
      user-select: none;
      display: inline-flex;
      align-items: center;
    }

    & input {
      margin-left: calc(var(--tile-gap) / 2);
    }
  }


  & .FontSize {
    & select option:nth-child(even) {
      display: none;
    }
  }
}



/*---------------------------------------------------------------*/
/* @ScrollBar@ */

* ::-webkit-scrollbar {
  width: 0.36rem;
  height: 0.36rem;
}

@media (hover: none) {

  * ::-webkit-scrollbar {
    width: 0.26rem;
    height: 0.26rem;
  }

}

* ::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 5px #232323; */
  box-shadow: inset 0 0 5px oklch(0.66 0 0 / 0.66);
  border-radius: 10px;
}

* ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: 10px;
}


/* thank you very much! */
/* https: //range-input-css.netlify.app/ */

/*********** Baseline, reset styles ***********/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  height: calc(2.44rem);
  background-color: transparent;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

input[type="range"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.246rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: var(--range-input-track-bg-color--idle);
  position: absolute;
  border-radius: 0.14rem;

}

input[type=range]:hover::after {
  background-color: var(--range-input-track-bg-color--hover);
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
/* input[type="range"]::-webkit-slider-runnable-track { */
/* background-color: var(--b); */
/* -webkit-tap-highlight-color: transparent; */
/* background-color: oklch(0.27 0.002 154); */
/* background-color: transparent; */

/* position: relative; */
/* height: 2rem; */
/* border: 1px solid oklch(0.62 0.002 154); */

/* padding: 1rem 0; */

/* height: 0.38rem; */
/* border: none; */
/* } */

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 11;

  border-radius: 50%;

  height: 1.42rem;
  width: 1.42rem;

  top: -0.04rem;

  background: var(--slider-thumb-gradient--idle);
}

/*********** Firefox styles ***********/
slider track input[type="range"]::-moz-range-track {
  background-color: red;
  border-radius: 1rem;
  height: 0.5rem;

  @media (hover: none) {
    height: 0.38rem;
    border: none;
  }

  height: 0.38rem;
  border: none;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;

  /* Centers thumb on the track */
  margin-top: -0.222rem;

  background: var(--thumb-bg--checked);
  border-radius: 100%;
  height: 1rem;
  width: 1rem;

  @media (hover: none) {
    height: 1.28rem;
    width: 1.28rem;

    margin-top: -0.31552rem;
  }

  height: 1.28rem;
  width: 1.28rem;

  margin-top: -0.52rem;
}

input[type="range"]:focus::-moz-range-thumb {
  outline: 0.1rem solid var(--accent-color-light);
  outline-offset: 0.116rem;
  /* Centers thumb on the track */
  margin-top: -0.08rem;

  background: var(--thumb-bg--checked);
  border-radius: 100%;
  height: 0.8rem;
  width: 0.8rem;

  @media (hover: none) {
    height: 1.28rem;
    width: 1.28rem;

    margin-top: -0.31552rem;
  }

  height: 1.28rem;
  width: 1.28rem;

  margin-top: -0.52rem;
}


/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  border-radius: 0.5rem;
  height: 0.246rem;
  background-color: var(--range-input-track-bg-color--idle);
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  /* background: var(--accent-color); */
  border: none;
  /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
  background: var(--slider-thumb-gradient--idle);

  position: relative;

  border-radius: 50%;

  height: 1.42rem;
  width: 1.42rem;

  top: -0.04rem;
}

input[type="range"]:focus::-moz-range-thumb {
  background: var(--accent-color);
  border: none;
  outline: none;
  /*Removes extra border that FF applies*/
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  background: var(--slider-thumb-gradient--idle);

  position: relative;

  border-radius: 50%;

  height: 1.42rem;
  width: 1.42rem;

  top: -0.04rem;
}



.TouchConnectionToggler {
  position: relative;

  /* &:active { */

  /* &::after { */
  /* background-color: transparent !important; */
  /* } */

  /* & .Cap::before { */
  /* background-color: oklch(from var(--accent-color) calc(l - 0.04) c h); */
  /* ; */
  /* } */
  /* } */

  & .Cap {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    background-color: var(--bottom-bar-bg-color);
    background-color: transparent;
    top: -0.86rem;
    border-radius: 50px;
    left: calc(50% + 1.14rem);
    /* z-index: -1; */
    gap: 3px;


    /* &::before { */
    /* position: absolute; */
    /* content: ""; */
    /* width: 100%; */
    /* height: 120%; */
    /* z-index: -1; */
    /* top: -2.2%; */

    /* border-top-right-radius: 100%; */
    /* border-top-left-radius: 100%; */

    /* border-bottom-left-radius: 50%; */
    /* border-bottom-right-radius: 50%; */

    /* background-color: var(--bottom-bar-bg-color); */
    /* } */

    & .Dot {
      width: 3px;
      height: 3px;
      background-color: var(--font-color);
      border-radius: 100%;

    }

    /* & .Dot:first-child, */
    /* & .Dot:last-child { */
    /* position: relative; */
    /* top: 3px; */
    /* } */
  }
}


/*---------------------------------------------------------------*/
/* @Drawer|@Popover@ */

[popover] {
  --block-gap: 1.12rem;

  background-color: transparent;
  height: calc(100vh - var(--header-height));
  width: 100%;

  inset: unset;
  right: 0;
  top: 0;

  & .Icon {
    --size: 1.2rem;
  }

  & a,
  & p {
    padding: 0.76rem 0;
  }

  & .BlockDescriptor {
    color: var(--accent-color);
  }

  &:popover-open {
    display: flex;
  }

  & .Content {
    overflow-y: auto;

    display: grid;
    align-items: stretch;
    justify-content: end;
    width: 72vw;

    padding: 2.92rem 1.02rem;
    padding-top: 1.8rem;

    text-align: right;

    background-color: var(--bg-color-alpha);

    backdrop-filter: var(--blur);
    box-shadow: inset -0.2em -0.2em 0.6em -0.125em rgba(10, 10, 10, .1);

  }

  & button.Close {
    padding: 0;
    flex-grow: 1;
    cursor: not-allowed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    background-color: oklch(0.40 0 0 / 0.14);
    backdrop-filter: var(--blur);
    border-radius: 0;
    cursor: pointer;
    word-break: break-all;

    & svg.Icon {
      --size: 1.6rem;
    }
  }

}


/*---------------------------------------------------------------*/
/* @TouchMenu@ */


[popover]#touch_menu {

  & a {
    text-decoration: none;
  }

  & .Menu {
    flex-flow: column nowrap;
    text-transform: lowercase;
    margin-top: var(--block-gap);
    justify-content: flex-end;


    & a {
      display: block;
    }
  }

  &:popover-open {
    &~button.Hamburger svg.Icon[data-kind="menu"] {
      display: none;
    }
  }

  &:not(:popover-open) {
    &~button.Hamburger svg.Icon[data-kind="close"] {
      display: none;
    }
  }
}


/*---------------------------------------------------------------*/
/* @TouchAppeal@ */

[popover]#touch_appeal {
  & .Content {
    & a {

      text-decoration: underline;
    }

    & .BlockDescriptor {
      margin-bottom: 0;
    }

    &>ul {
      /* overflow-y: hidden; */

      /* height: 100%; */
      gap: 1.12rem;

      & li:nth-child(2) {
        margin-bottom: auto;
      }

    }
  }


  & .Connections {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.22rem;
  }

  & .Logo {
    margin: 0 auto;
  }

}





/*---------------------------------------------------------------*/
/* @HeaderBar@ */

header.Bar {
  --touch-bp-px: 1464px;
  /* --bottom-bar-height; */


  @media (width > 1464px) {
    height: 3.4rem;
    top: calc(var(--tile-gap) / 2);

    &+main {
      transform: translateY(calc(-1 * var(--top-bar-height)));
    }
  }

  @media (width <=1464px) {
    top: 0;
    bottom: 0;
    order: 2;
    height: calc(1.82rem + 16px);
  }

  position: sticky;





  & .TopBar {

    --top-shift: calc(var(--tile-gap) / 2);
    /* --content-top-shift-desktop: calc(var(--top-bar-height) + var(--top-bar-top-shift)); */

    --link-horz-padding: 0.66rem;

    @media (width <=1464px) {
      display: none;
    }



    justify-content: space-between;

    height: 100%;

    margin: 0 calc(1.502 * var(--tile-gap));

    border-radius: 1.08rem;

    background-color: var(--top-bar-bg-color);
    backdrop-filter: var(--blur);

    box-shadow: var(--top-bar-shadow);

    & a {
      padding: 0 var(--link-horz-padding);

      text-wrap: nowrap;
      text-decoration: none;

      & svg.Icon {
        --size: 1.42em;
      }
    }

    & li,
    & a {
      display: flex;
      align-items: center;
      height: 100%;
    }

    & ul {
      height: 100%;
      align-items: center;

      text-transform: lowercase;
    }

    a.Settings::before {
      content: "|";
      font-size: 1.46rem;
      font-weight: 300;
      transform: translateX(calc(-1 * var(--link-horz-padding) - 0.34rem));
    }

  }




  /*---------------------------------------------------------------*/
  /* @BottomBar@ */

  & .BottomBar {
    --bar-border-radius: 1.12rem;


    display: grid;

    @media (width > 1464px) {
      /* todo: approoach.. */
      display: none;
    }

    height: 100%;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    align-items: stretch;

    border-top-left-radius: var(--bar-border-radius);
    border-top-right-radius: var(--bar-border-radius);

    background-color: var(--bottom-bar-bg-color);

    box-shadow: var(--bottom-bar-box-shadow);

    & .Logo img {
      max-height: calc(1.02rem + 12px);
    }

    &:has(:popover-open) {
      border-top-right-radius: 0;

      &::before {

        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: oklch(0.40 0 0 / 0.14);
        backdrop-filter: blur(6px);
        width: 50%;
        height: 100%;
        z-index: -1;
      }
    }

    &>button,
    &>a {
      --edge-shift: 1.6rem;


      position: relative;
      z-index: 5;

      padding: 0;

      font-size: 0.9rem;

      &:active {
        transform: unset;
      }

      &:focus-visible {
        border-radius: var(--bar-border-radius);
        outline-offset: -4px;
        box-shadow: inset 0 0 0 1px var(--accent-color);
      }

      &:active::after {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        position: absolute;
        display: block;
        content: "";
        width: calc(8ch + 2.8vw);
        /* width: 4ch; */
        height: 100%;
        border-radius: 108px 58px;
        background-color: oklch(from var(--accent-color) calc(l - 0.04) c h);
      }
    }


    &>button:last-child {
      padding-right: var(--edge-shift);

      &:active::after {
        left: calc(50% - 1/2 * var(--edge-shift));
      }
    }

    &>a {
      display: flex;
      align-items: center;
      justify-content: center;

      padding-left: var(--edge-shift);

      text-decoration: none;

      &:active::after {
        left: calc(50% + 1/2 * var(--edge-shift));

        @media (width > 722px) {
          width: calc(24ch + 2.8vw);
        }
      }
    }

    & svg.Icon[data-kind="menu"] {
      transform: translateY(2px);
    }

  }
}


.jcfe {
  justify-content: flex-end;
}

:is(.inner-focus) a,
button {
  &:focus-visible {

    outline-offset: -4px;
    box-shadow: inset 0 0 0 1px var(--accent-color);
  }
}