@charset "UTF-8";
#mds-root {
  --mds-bg: #0a0c0f;
  --mds-bg-soft: #10141a;
  --mds-text: #eef1f4;
  --mds-dim: #8b95a1;
  --mds-line: rgba(255,255,255,.10);
  --mds-accent: #57c8ff;
  --mds-warm: #ffb35c;
  --mds-ai: #7ee0c3;
  --mds-p1-acc: 48, 110, 157;
  --mds-p1-lit: 127, 165, 194;
  --mds-p2-acc: 87, 200, 255;
  --mds-p2-lit: 144, 219, 255;
  --mds-p3-acc: 146, 124, 228;
  --mds-p3-lit: 183, 169, 237;
  --mds-p4-acc: 126, 224, 195;
  --mds-p4-lit: 170, 235, 215;
  --mds-p5-acc: 48, 110, 157;
  --mds-p5-lit: 127, 165, 194;
  --mds-acc: var(--mds-p2-acc);
  --mds-acc-lit: var(--mds-p2-lit);
  --mds-grid: 64px;
  --mds-pat: 190, 200, 210;
  --gf-a: 48, 110, 157;
  --gf-b: 40, 92, 134;
  --gf-c: 70, 136, 182;
  --gf-lit: 127, 165, 194;
  --gf-glow: 2.05;
  --mds-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mds-font-display: "Inter Tight", "Segoe UI Semibold", system-ui, sans-serif;
  --mds-ease: cubic-bezier(.22, .8, .24, 1);
  --mds-dur-ui-fast: .16s;
  --mds-dur-ui: .22s;
  --mds-dur-ui-slow: .32s;
  --mds-dur-fast: .35s;
  --mds-dur-base: .7s;
  --mds-dur-slow: 1.4s;
  
  --mds-dur-frame: 340ms;
  --mds-space-1: 4px;
  --mds-space-2: 8px;
  --mds-space-3: 12px;
  --mds-space-4: 16px;
  --mds-space-5: 24px;
  --mds-space-6: 32px;
  --mds-space-7: 48px;
  --mds-space-8: 64px;
  --mds-r-tight: 12px;
  --mds-r-card: 16px;
  --mds-r-panel: 20px;
  --mds-r-pill: 999px;
  --mds-fs-display: clamp(40px, 5.2vw, 76px);
  --mds-fs-part: clamp(46px, 8.4vw, 132px);
  --mds-fs-h2: clamp(28px, 3.1vw, 46px);
  --mds-fs-h3: clamp(20px, 2vw, 26px);
  --mds-fs-lead: 16px;
  --mds-fs-body: 15px;
  --mds-fs-small: 13px;
  --mds-fs-cap: 12.5px;
  --mds-fs-eyebrow: 13px;
  --mds-ls-eyebrow: .22em;
  --mds-fs-label: 11px;
  --mds-ls-label: .16em;
  --mds-fs-tag: 10.5px;
  --mds-ls-tag: .16em;
  --mds-fs-num: 12px;
  --mds-ls-num: .1em;
  --mds-content-x: clamp(32px, 6.5vw, 130px);
}

#mds-root [data-mds-part="1"] {
  --mds-acc: var(--mds-p1-acc);
  --mds-acc-lit: var(--mds-p1-lit);
}

#mds-root [data-mds-part="2"] {
  --mds-acc: var(--mds-p2-acc);
  --mds-acc-lit: var(--mds-p2-lit);
}

#mds-root [data-mds-part="3"] {
  --mds-acc: var(--mds-p3-acc);
  --mds-acc-lit: var(--mds-p3-lit);
}

#mds-root [data-mds-part="4"] {
  --mds-acc: var(--mds-p4-acc);
  --mds-acc-lit: var(--mds-p4-lit);
}

#mds-root [data-mds-part="5"],
#mds-root [data-mds-part="6"],
#mds-root [data-mds-part="7"],
#mds-root [data-mds-part="8"],
#mds-root [data-mds-part="9"] {
  --mds-acc: var(--mds-p5-acc);
  --mds-acc-lit: var(--mds-p5-lit);
}

#mds-root .mds-curtain,
#mds-root .mds-spy {
  --mds-acc: var(--gf-a);
  --mds-acc-lit: var(--gf-lit);
}

#mds-root {
  isolation: isolate;
  box-sizing: border-box;
  overflow-x: clip;
  margin: 0;
  padding: 0;
  font: 400 16px/1.55 var(--mds-font);
  color: var(--mds-text);
  background: var(--mds-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#mds-root *, #mds-root *::before, #mds-root *::after {
  box-sizing: border-box;
}
#mds-root ::selection {
  background: var(--mds-accent);
  color: #04121c;
}

body:has(#mds-root) {
  margin: 0;
  background: #0a0c0f;
}

html.mds-scroll-clean {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.mds-scroll-clean::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#mds-root .mds-scene {
  position: relative;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  #mds-root *, #mds-root *::before, #mds-root *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
#mds-root .mds-stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-3);
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--mds-line);
  border-radius: var(--mds-r-card);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--mds-acc), 0.07), transparent 68%), rgba(255, 255, 255, 0.025);
}

#mds-root .mds-stage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
}

#mds-root .mds-stage__kind {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-stage__view {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--mds-r-tight);
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.75) 100%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.75) 100%);
}

#mds-root .mds-steps {
  position: relative;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  min-height: 220px;
}

#mds-root .mds-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-step__title {
  margin: 0 0 14px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-step__text {
  margin: 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mds-dim);
}

#mds-root .mds-money {
  margin: 0 0 26px;
  padding-left: 16px;
  border-left: 2px solid rgba(var(--mds-acc), 0.5);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(238, 241, 244, 0.82);
  max-width: 48ch;
}



#mds-root .mds-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  border-radius: var(--mds-r-tight);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
  background-repeat: no-repeat;
  background-color: var(--mds-bg);
  opacity: 0;
  transition: opacity var(--mds-dur-ui) var(--mds-ease);
  pointer-events: none;
  will-change: transform, background-position;
}

#mds-root .is-lens > .mds-lens {
  opacity: 1;
}

#mds-root .mds-card {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-3);
  padding: var(--mds-space-5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mds-r-card);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color var(--mds-dur-ui) var(--mds-ease), background var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-card.is-active {
  border-color: rgba(var(--mds-acc), 0.3);
  background: rgba(var(--mds-acc), 0.07);
}

#mds-root .mds-card__num {
  font-size: var(--mds-fs-num);
  letter-spacing: var(--mds-ls-num);
  color: rgb(var(--mds-acc));
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

#mds-root .mds-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mds-dim);
}

#mds-root .mds-badge-ai {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(var(--mds-acc), 0.45);
  border-radius: var(--mds-r-pill);
  font-size: var(--mds-fs-tag);
  font-weight: 600;
  letter-spacing: var(--mds-ls-tag);
  color: rgb(var(--mds-acc));
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .is-ai .mds-badge-ai {
  opacity: 1;
  transform: none;
}

#mds-root .mds-views {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-views__i {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.42;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-views__i:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#mds-root .mds-views__i.is-active {
  opacity: 1;
}

#mds-root .mds-views--static .mds-views__i {
  opacity: 1;
  transition: none;
}

#mds-root .mds-views__n {
  grid-row: 1/span 2;
  font-size: var(--mds-fs-num);
  color: rgb(var(--mds-acc));
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-views__name {
  font-size: 15.5px;
  font-weight: 550;
}

#mds-root .mds-views__note {
  grid-column: 2;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mds-dim);
}

#mds-root .mds-specs {
  margin: 0;
}

#mds-root .mds-specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
}

#mds-root .mds-specs dt {
  color: rgba(139, 149, 161, 0.8);
  letter-spacing: 0.04em;
}

#mds-root .mds-specs dd {
  margin: 0;
  text-align: right;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
}

@property --mds-rail-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
#mds-root .mds-rail {
  display: flex;
  gap: var(--mds-space-3);
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-rail__i {
  position: relative;
  flex: 1;
  padding-top: 10px;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: rgba(139, 149, 161, 0.7);
  transition: color var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-rail__i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--mds-acc));
  transform: scaleX(var(--mds-rail-p, 0));
  transform-origin: left center;
  transition: --mds-rail-p 0.22s linear;
}

#mds-root .mds-rail__i.is-active {
  color: var(--mds-text);
}

@media (max-width: 1199px) {
  #mds-root .mds-steps {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  #mds-root .mds-step {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #mds-root .mds-step__title {
    font-size: clamp(26px, 7vw, 34px);
  }
  #mds-root .mds-rail {
    display: none;
  }
}
#mds-root .mds-hero {
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#mds-root .mds-hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #05070a;
}

#mds-root .mds-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(150px);
}

#mds-root .mds-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #05070a 0, #05070a 150px, rgba(5, 7, 10, 0.7) 225px, rgba(5, 7, 10, 0.4) 31%, rgba(5, 7, 10, 0.13) 45%, rgba(5, 7, 10, 0) 57%);
}

#mds-root .mds-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

#mds-root .mds-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-inline: var(--mds-content-x);
}

/* Логотип поставщика в углу первого экрана. Стоит статично и не участвует
   в появлении текста: страница часто открывается из поиска сама по себе,
   и человек должен сразу видеть, чей это аппарат и куда вернуться.
   Рисуется маской — цвет задаётся фоном и не спорит с тёмным кадром. */
#mds-root .mds-hero__home {
  position: absolute;
  top: clamp(20px, 3.4vh, 38px);
  left: var(--mds-content-x);
  z-index: 3;
  width: clamp(104px, 9vw, 136px);
  height: clamp(15px, 1.3vw, 20px);
}
/* Маска на знаке, а не на ссылке: иначе она обрезала бы подсказку. */
#mds-root .mds-hero__home-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: #eef1f4;
  -webkit-mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
  mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
  opacity: .82;
  transition: opacity 240ms ease;
}
#mds-root .mds-hero__home:hover .mds-hero__home-mark {
  opacity: 1;
}
/* Подсказка та же, что на панели, только раскрывается вниз — логотип
   стоит у верхнего края, сверху ей места нет. */
#mds-root .mds-hero__tip {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(14, 20, 28, 0.95);
  border: 1px solid rgba(238, 243, 248, 0.12);
  color: #eef3f8;
  font: 500 12px/1.25 var(--mds-font, inherit);
  font-style: normal;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 150ms ease, transform 150ms ease;
}
#mds-root .mds-hero__home:hover .mds-hero__tip,
#mds-root .mds-hero__home:focus-visible .mds-hero__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 50ms;
}

#mds-root.mds-js .mds-hero__content,
#mds-root.mds-js .mds-hero__scrollhint {
  opacity: 0;
}

#mds-root .mds-hero__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mds-dim);
}

#mds-root .mds-hero__title {
  margin: 0 0 14px;
  font-family: var(--mds-font-display);
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

#mds-root .mds-hero__title-accent {
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-hero__formula {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.4;
  color: var(--mds-text);
  font-weight: 500;
}

#mds-root .mds-hero__panel {
  margin-top: 24px;
  max-width: 480px;
  padding: 18px 20px;
  border: 1px solid var(--mds-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(8px);
}

#mds-root .mds-hero__panel-row {
  display: flex;
  align-items: stretch;
}

#mds-root .mds-hero__panel-row .mds-cell:first-child {
  padding-right: 20px;
}

#mds-root .mds-hero__panel-row .mds-cell + .mds-cell {
  padding-left: 20px;
  border-left: 1px solid var(--mds-line);
}

#mds-root .mds-hero__panel-supply {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mds-line);
}

#mds-root .mds-cell {
  flex: 1;
  min-width: 0;
}

#mds-root .mds-cell__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mds-dim);
}

#mds-root .mds-cell__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: rgb(var(--mds-acc-lit));
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mds-root .mds-cell__icon .mds-cell__dim {
  stroke-width: 1.4;
  opacity: 0.75;
}

#mds-root .mds-cell__icon .mds-cell__dash {
  stroke-dasharray: 3 2.6;
  opacity: 0.8;
}

#mds-root .mds-cell__value {
  display: block;
  margin-top: 7px;
  font-family: var(--mds-font-display);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--mds-text);
  white-space: nowrap;
}

#mds-root .mds-cell__note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mds-dim);
}

#mds-root .mds-supply-static {
  display: none;
  margin-top: 7px;
  font-family: var(--mds-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--mds-text);
}

#mds-root[data-price=hidden] .mds-supply-static {
  display: block;
}

#mds-root[data-price=hidden] .mds-supply {
  display: none;
}

#mds-root .mds-hero__price {
  display: none;
  margin: 22px 0 0;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

#mds-root[data-price=shown] .mds-hero__price,
#mds-root[data-price=promo] .mds-hero__price {
  display: flex;
}

#mds-root .mds-supply {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid var(--mds-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

#mds-root .mds-supply__opt {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--mds-dim);
  font: 500 13.5px/1 var(--mds-font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--mds-dur-fast) var(--mds-ease), background var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-supply__opt:hover {
  color: var(--mds-text);
}

#mds-root .mds-supply__opt.is-active {
  color: #0b0e12;
  background: var(--mds-text);
}

#mds-root .mds-hero__price-value {
  font-family: var(--mds-font-display);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 650;
  letter-spacing: -0.01em;
}

#mds-root .mds-hero__price-old {
  display: none;
  font-size: 19px;
  color: var(--mds-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--mds-acc-lit), 0.7);
}

#mds-root[data-price=promo] .mds-hero__price-old {
  display: inline;
}

#mds-root .mds-hero__price-badge {
  display: none;
  width: 100%;
  order: -1;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--mds-acc-lit));
}

#mds-root[data-price=promo] .mds-hero__price-badge {
  display: block;
}

#mds-root .mds-hero__cta {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

#mds-root .mds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: 500 15px/1 var(--mds-font);
  letter-spacing: 0.02em;
  transition: transform var(--mds-dur-fast) var(--mds-ease), box-shadow var(--mds-dur-fast) var(--mds-ease), background var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-btn--primary {
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--mds-text);
  color: #0b0e12;
}

#mds-root .mds-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(var(--mds-acc), 0.22);
}

#mds-root .mds-hero__scrollhint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

#mds-root .mds-hero__scrollhint-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--mds-dim));
  overflow: hidden;
  position: relative;
}

#mds-root .mds-hero__scrollhint-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: rgb(var(--mds-acc-lit));
  animation: mds-hint-drop 2.2s var(--mds-ease) infinite;
}

@keyframes mds-hint-drop {
  0% {
    top: -50%;
  }
  70% {
    top: 110%;
  }
  100% {
    top: 110%;
  }
}
#mds-root .mds-hero__scrollhint-label {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mds-dim);
}

@media (max-width: 1199px) {
  #mds-root .mds-hero {
    align-items: flex-end;
    min-height: 600px;
  }
  #mds-root .mds-hero__video {
    transform: none;
  }
  #mds-root .mds-hero__scrim {
    background: linear-gradient(to top, rgba(5, 7, 10, 0.92) 40%, rgba(5, 7, 10, 0.15) 78%);
  }
  #mds-root .mds-hero__content {
    padding-block: 0 92px;
    max-width: none;
    background: linear-gradient(to top, rgba(7, 9, 11, 0.94) 55%, transparent);
    padding-top: 84px;
    width: 100%;
  }
  #mds-root .mds-hero__price {
    margin-top: 18px;
  }
  #mds-root .mds-hero__title {
    font-size: clamp(36px, 10vw, 44px);
  }
  #mds-root .mds-hero__formula {
    font-size: 17px;
  }
  #mds-root .mds-hero__panel {
    max-width: none;
    margin-top: 18px;
    padding: 16px 18px;
  }
  #mds-root .mds-hero__panel-supply {
    margin-top: 14px;
    padding-top: 14px;
  }
  #mds-root .mds-cell__value {
    font-size: 19px;
  }
  #mds-root[data-price=shown] .mds-supply,
  #mds-root[data-price=promo] .mds-supply {
    display: flex;
    width: 100%;
  }
  #mds-root .mds-supply__opt {
    flex: 1;
    padding-inline: 10px;
  }
  #mds-root .mds-hero__cta {
    gap: 18px;
  }
  #mds-root .mds-btn--primary {
    width: 100%;
  }
  #mds-root .mds-hero__scrollhint {
    display: none;
  }
}
@media (max-width: 559px) {
  #mds-root .mds-cell__more {
    display: none;
  }
  #mds-root .mds-cell__icon {
    width: 15px;
    height: 15px;
  }
  #mds-root .mds-cell__label {
    letter-spacing: 0.1em;
    gap: 6px;
  }
}
@property --mds-mode-p {
  syntax: "<number>";
  
  inherits: true;
  initial-value: 0;
}
#mds-root .mds-modes {
  --mds-p: .5;
  height: 235vh;
  background: var(--mds-bg);
}

#mds-root .mds-modes__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(340px, 40%) 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  overflow: hidden;
}


#mds-root .mds-glowfield {
  position: relative;
  background: var(--mds-bg);
  
}

#mds-root .mds-glowfield__lamp {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: hidden;
  pointer-events: none;
}


#mds-root .mds-gf-glow {
  position: absolute;
  inset: 0;
  
  filter: blur(15px) saturate(1.08);
  will-change: filter;
}


#mds-root .mds-gf-glow i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1;
  will-change: transform;
}

#mds-root .mds-gf-l1 {
  width: 82%;
  transform: translate3d(calc(var(--l1x, 20) * 1% / 0.82 - 50%), calc(var(--l1y, 14) * 1svh - 50%), 0) scale(var(--l1s, 1));
  background: radial-gradient(closest-side, rgba(var(--gf-a), calc(0.2 * var(--gf-glow, 1))), transparent 72%);
}

#mds-root .mds-gf-l2 {
  width: 80%;
  transform: translate3d(calc(var(--l2x, 82) * 1% / 0.8 - 50%), calc(var(--l2y, 84) * 1svh - 50%), 0) scale(var(--l2s, 1));
  background: radial-gradient(closest-side, rgba(var(--gf-b), calc(0.17 * var(--gf-glow, 1))), transparent 72%);
}

#mds-root .mds-gf-l3 {
  width: 60%;
  transform: translate3d(calc(var(--l3x, 6) * 1% / 0.6 - 50%), calc(var(--l3y, 66) * 1svh - 50%), 0) scale(var(--l3s, 1));
  background: radial-gradient(closest-side, rgba(var(--gf-c), calc(0.13 * var(--gf-glow, 1))), transparent 70%);
}


#mds-root .mds-gf-l4 {
  width: 30%;
  transform: translate3d(calc(var(--l4x, 50) * 1% / 0.3 - 50%), calc(var(--l4y, 50) * 1svh - 50%), 0);
  opacity: var(--l4o, 0);
  transition: opacity 0.5s ease;
  background: radial-gradient(closest-side, rgba(var(--gf-a), calc(0.09 * var(--gf-glow, 1))), transparent 70%);
}

@media (hover: none) {
  #mds-root .mds-gf-l4 {
    display: none;
  }
}

#mds-root .mds-gf-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01) 46%, rgba(255, 255, 255, 0.022));
}


#mds-root .mds-gf-pats {
  position: absolute;
  inset: 0;
  z-index: 2;
  --pa: 1;
}

#mds-root .mds-gf-pats b {
  position: absolute;
  inset: -6%;
  display: block;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 46%, #000 34%, rgba(0, 0, 0, 0.5) 72%, transparent 99%);
  mask-image: radial-gradient(78% 68% at 50% 46%, #000 34%, rgba(0, 0, 0, 0.5) 72%, transparent 99%);
}


#mds-root .mds-gf-p1 {
  opacity: var(--gfw1, 1);
  background: radial-gradient(circle, rgba(var(--mds-pat), calc(0.16 * var(--pa, 1))) 1.2px, transparent 1.7px);
  background-size: var(--mds-grid) var(--mds-grid);
  background-position: calc(var(--mds-grid) / 2) calc(var(--mds-grid) / 2);
}


#mds-root .mds-gf-p2 {
  opacity: var(--gfw2, 0);
  background: repeating-radial-gradient(circle at var(--gfnx, 50%) var(--gfny, 46%), transparent 0 calc(var(--mds-grid) * 3 - 1px), rgba(var(--mds-pat), calc(0.085 * var(--pa, 1))) calc(var(--mds-grid) * 3 - 1px) calc(var(--mds-grid) * 3));
}


#mds-root .mds-gf-p3 {
  opacity: var(--gfw3, 0);
  background: repeating-linear-gradient(90deg, rgba(var(--mds-pat), calc(0.075 * var(--pa, 1))) 0 1px, transparent 1px var(--mds-grid)), repeating-linear-gradient(90deg, rgba(var(--mds-pat), calc(0.115 * var(--pa, 1))) 0 1px, transparent 1px calc(var(--mds-grid) * 4));
}


#mds-root .mds-gf-p4 {
  opacity: var(--gfw4, 0);
  background: repeating-linear-gradient(180deg, rgba(var(--mds-pat), calc(0.075 * var(--pa, 1))) 0 1px, transparent 1px var(--mds-grid)), repeating-linear-gradient(180deg, rgba(var(--mds-pat), calc(0.115 * var(--pa, 1))) 0 1px, transparent 1px calc(var(--mds-grid) * 4));
}


#mds-root .mds-gf-p5 {
  opacity: var(--gfw5, 0);
  background: radial-gradient(circle, rgba(var(--mds-pat), calc(0.16 * var(--pa, 1))) 1.2px, transparent 1.7px);
  background-size: var(--mds-grid) var(--mds-grid);
  background-position: calc(var(--mds-grid) / 2) calc(var(--mds-grid) / 2);
}


#mds-root .mds-gf-tint {
  --mds-pat: var(--gf-a);
  --pa: 1.2;
  -webkit-mask-image: radial-gradient(42% 42% at calc(var(--l1x, 20) * 1%) calc(var(--l1y, 14) * 1%), #000 8%, transparent 74%), radial-gradient(41% 41% at calc(var(--l2x, 82) * 1%) calc(var(--l2y, 84) * 1%), #000 8%, transparent 74%), radial-gradient(31% 31% at calc(var(--l3x, 6) * 1%) calc(var(--l3y, 66) * 1%), #000 8%, transparent 74%), radial-gradient(16% 16% at calc(var(--l4x, 50) * 1%) calc(var(--l4y, 50) * 1%), rgba(0, 0, 0, calc(0.75 * var(--l4o, 0))) 6%, transparent 76%);
  mask-image: radial-gradient(42% 42% at calc(var(--l1x, 20) * 1%) calc(var(--l1y, 14) * 1%), #000 8%, transparent 74%), radial-gradient(41% 41% at calc(var(--l2x, 82) * 1%) calc(var(--l2y, 84) * 1%), #000 8%, transparent 74%), radial-gradient(31% 31% at calc(var(--l3x, 6) * 1%) calc(var(--l3y, 66) * 1%), #000 8%, transparent 74%), radial-gradient(16% 16% at calc(var(--l4x, 50) * 1%) calc(var(--l4y, 50) * 1%), rgba(0, 0, 0, calc(0.75 * var(--l4o, 0))) 6%, transparent 76%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}


#mds-root .mds-glowfield .mds-modes,
#mds-root .mds-glowfield .mds-fov {
  position: relative;
  z-index: 1;
  background: transparent;
}


#mds-root .mds-glowfield .mds-speed {
  position: relative;
  background: transparent;
}


#mds-root .mds-glowfield .mds-ceph,
#mds-root .mds-glowfield .mds-dose,
#mds-root .mds-glowfield .mds-room,
#mds-root .mds-glowfield .mds-ease,
#mds-root .mds-glowfield .mds-own,
#mds-root .mds-glowfield .mds-pay,
#mds-root .mds-glowfield .mds-demo,
#mds-root .mds-glowfield .mds-final {
  position: relative;
  z-index: 1;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  
  #mds-root .mds-gf-l4 {
    display: none;
  }
}
#mds-root .mds-eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  
  color: rgb(var(--gf-lit, 144, 219, 255));
}

#mds-root .mds-modes__title {
  margin: 0 0 18px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

#mds-root .mds-modes__title {
  max-width: 20ch;
  margin-bottom: 34px;
}

#mds-root .mds-modes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-3);
}

#mds-root .mds-mode {
  --mds-mode-p: 0;
  overflow: hidden;
  border-radius: var(--mds-r-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mds-dur-ui) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease), --mds-mode-p 0.22s linear;
}

#mds-root .mds-mode__link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#mds-root .mds-mode.is-active {
  background: rgba(var(--mds-acc), 0.07);
  border-color: rgba(var(--mds-acc), 0.3);
}

#mds-root .mds-mode:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
}

#mds-root .mds-mode__link:focus-visible {
  outline: 2px solid rgb(var(--mds-acc));
  outline-offset: -2px;
  border-radius: var(--mds-r-card);
}

#mds-root .mds-mode__link::before,
#mds-root .mds-mode__link::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(var(--mds-mode-p));
  transform-origin: left center;
  opacity: 0;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-mode__link::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--mds-acc), 0.13), rgba(var(--mds-acc), 0.03));
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%);
}

#mds-root .mds-mode__link::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgb(var(--mds-acc));
  box-shadow: 0 0 14px rgba(var(--mds-acc), 0.5);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}

#mds-root .mds-mode.is-active .mds-mode__link::before,
#mds-root .mds-mode.is-active .mds-mode__link::after {
  opacity: 1;
}

#mds-root .mds-mode__link > * {
  position: relative;
  z-index: 1;
}

#mds-root .mds-mode.is-brimming .mds-mode__link::after {
  box-shadow: 0 0 22px rgba(var(--mds-acc), 0.85);
}

#mds-root .mds-mode.is-brimming {
  border-color: rgba(var(--mds-acc), 0.45);
}

#mds-root .mds-mode:not(.is-active) .mds-mode__icon {
  stroke: rgba(var(--mds-acc), 0.5);
}

#mds-root .mds-mode:not(.is-active) .mds-mode__name {
  color: rgba(238, 241, 244, 0.68);
}

#mds-root .mds-mode:not(.is-active) .mds-mode__note {
  color: rgba(139, 149, 161, 0.68);
}

#mds-root .mds-mode:not(.is-active) .mds-mode__tag {
  opacity: 0.6;
}

#mds-root .mds-mode__name,
#mds-root .mds-mode__note {
  transition: color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-mode__icon {
  width: 50px;
  height: 50px;
  flex: none;
  fill: none;
  stroke: rgb(var(--mds-acc));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-mode__icon-dim {
  opacity: 0.55;
}

#mds-root .mds-mode__icon-dot {
  stroke-width: 2.6;
}

#mds-root .mds-mode__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#mds-root .mds-mode__name {
  font-size: 18px;
  font-weight: 550;
  color: var(--mds-text);
}

#mds-root .mds-mode__note {
  font-size: 13.5px;
  color: var(--mds-dim);
}

#mds-root .mds-mode__tag {
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: var(--mds-dim);
  border: 1px solid var(--mds-line);
  border-radius: var(--mds-r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

#mds-root .mds-mode__tag--opt {
  color: rgb(var(--mds-acc-lit));
  border-color: rgba(var(--mds-acc), 0.35);
}

#mds-root .mds-shot {
  --mds-shot-pad: clamp(10px, 1.1vw, 16px);
  position: relative;
  margin: 0;
  padding: var(--mds-shot-pad);
  border: 1px solid var(--mds-line);
  border-radius: var(--mds-r-card);
  background: radial-gradient(62% 58% at 50% 50%, rgba(var(--mds-acc), 0.1), rgba(var(--mds-acc), 0.03) 55%, transparent 74%), rgba(255, 255, 255, 0.022);
}

#mds-root .mds-mode.is-active .mds-shot {
  border-color: rgba(var(--mds-acc), 0.3);
}

#mds-root .mds-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

#mds-root .mds-shot--cbct {
  display: grid;
  grid-template-columns: 1fr 0.4fr;
  align-items: stretch;
  gap: var(--mds-shot-pad);
}

#mds-root .mds-shot__slices {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mds-shot-pad);
}

#mds-root .mds-shot__slices img {
  border-radius: 4px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.5s var(--mds-ease), transform 0.5s var(--mds-ease);
}

#mds-root .mds-mode.is-active .mds-shot__slices img {
  opacity: 1;
  transform: none;
}

#mds-root .mds-mode.is-active .mds-shot__slices img:nth-child(1) {
  transition-delay: 0.1s;
}

#mds-root .mds-mode.is-active .mds-shot__slices img:nth-child(2) {
  transition-delay: 0.18s;
}

#mds-root .mds-mode.is-active .mds-shot__slices img:nth-child(3) {
  transition-delay: 0.26s;
}

@media (min-width: 1200px) {
  #mds-root .mds-shot {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 45%;
    right: var(--mds-content-x);
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translateY(calc(-50% + (var(--mds-p) - 0.5) * -24px));
    transition: opacity 0.5s var(--mds-ease), filter 0.5s var(--mds-ease);
  }
  #mds-root .mds-mode.is-active .mds-shot {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
  #mds-root .mds-shot img {
    max-height: 76svh;
    width: 100%;
    object-fit: contain;
  }
  #mds-root .mds-shot {
    background-position: 50% calc(50% + (var(--mds-p) - 0.5) * 34px), 0 0;
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-modes {
    height: auto;
  }
  #mds-root .mds-modes__inner {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 90px;
    gap: 36px;
  }
  
  #mds-root .mds-shot {
    padding: 20px;
  }
  #mds-root .mds-shot--ceph img {
    max-width: 300px;
    margin-inline: auto;
  }
  #mds-root .mds-shot--cbct {
    grid-template-columns: 1fr;
  }
  #mds-root .mds-shot__slices {
    flex-direction: row;
  }
  #mds-root .mds-shot__slices img {
    flex: 1 1 0;
    min-width: 0;
  }
  #mds-root .mds-mode__link::before,
  #mds-root .mds-mode__link::after {
    display: none;
  }
}
#mds-root .mds-fov {
  height: 480vh;
  background: var(--mds-bg);
}

#mds-root .mds-fov__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  overflow: hidden;
}

#mds-root .mds-fov__stage {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  max-height: min(72svh, 620px);
}


#mds-root .mds-fov__stage {
  transition: border-color var(--mds-dur-slow) var(--mds-ease),
              background-color var(--mds-dur-slow) var(--mds-ease);
}


#mds-root .mds-fov:not(.is-framed) .mds-fov__stage {
  border-color: transparent;
  background: none;
}

#mds-root .mds-fov:not(.is-framed) .mds-fov__stage .mds-stage__view {
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
}

#mds-root .mds-fov__view {
  
  
  --cyl-w: 1;
  --cyl-h: 1;
  
  --fov-bottom: 84%;
}


#mds-root .mds-fov__anat {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 900/700;
  
  --fov-cx: 50%;
  --fov-cy: 50%;
  
  --fov-w: 42.6%;
  --fov-h: 42.6%;
}


#mds-root .mds-fov__skull {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity var(--mds-dur-slow) var(--mds-ease), transform var(--mds-dur-slow) var(--mds-ease);
}

#mds-root .mds-fov__skull.is-on {
  opacity: 1;
  transform: none;
}


#mds-root .mds-fov__glows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#mds-root .mds-glow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) scale(0.82);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--mds-acc-lit), 0.85), rgba(var(--mds-acc), 0.34) 55%, rgba(var(--mds-acc), 0) 100%);
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0;
  transition: opacity 0.55s var(--mds-ease), transform 0.55s var(--mds-ease);
}

#mds-root .mds-fov__glows.is-on .mds-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}



#mds-root .mds-glow--sinus-l {
  --x: 42%;
  --y: 58%;
  --w: 9%;
  --h: 10%;
}

#mds-root .mds-glow--sinus-r {
  --x: 58%;
  --y: 58%;
  --w: 9%;
  --h: 10%;
}

#mds-root .mds-glow--tmj-l {
  --x: 34%;
  --y: 52%;
  --w: 5%;
  --h: 7%;
}

#mds-root .mds-glow--tmj-r {
  --x: 66%;
  --y: 52%;
  --w: 5%;
  --h: 7%;
}

#mds-root .mds-glow--arch {
  --x: 50%;
  --y: 72%;
  --w: 18%;
  --h: 7%;
  border-radius: 46%;
}

#mds-root .mds-fov__glows.is-on .mds-glow--sinus-r {
  transition-delay: 0.08s;
}

#mds-root .mds-fov__glows.is-on .mds-glow--tmj-l {
  transition-delay: 0.16s;
}

#mds-root .mds-fov__glows.is-on .mds-glow--tmj-r {
  transition-delay: 0.24s;
}

#mds-root .mds-fov__glows.is-on .mds-glow--arch {
  transition-delay: 0.32s;
}



#mds-root .mds-fov__frame,
#mds-root .mds-fov__market {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--fov-w) * var(--cyl-w));
  height: calc(var(--fov-h) * var(--cyl-h));
  bottom: calc(100% - var(--fov-bottom));
  transition: width var(--mds-dur-frame) var(--mds-ease), height var(--mds-dur-frame) var(--mds-ease), bottom var(--mds-dur-frame) var(--mds-ease), opacity var(--mds-dur-base) var(--mds-ease);
  pointer-events: none;
}

#mds-root .mds-fov__frame {
  border: 2px solid rgb(var(--mds-acc));
  border-radius: 2px;
  background: rgba(var(--mds-acc), 0.05);
  
  box-shadow: 0 0 26px rgba(var(--mds-acc), 0.16) inset, 0 0 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
}

#mds-root .mds-fov__frame.is-on {
  opacity: 1;
}


#mds-root .mds-fov__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 9px;
  border-radius: var(--mds-r-pill);
  background: rgb(var(--mds-acc));
  color: #06131c;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#mds-root .mds-fov__tag--mkt {
  top: auto;
  bottom: 6px;
  left: auto;
  right: 6px;
  background: rgba(10, 12, 15, 0.82);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

#mds-root .mds-fov__market {
  --cyl-w: 0.889;
  --cyl-h: 0.857;
  --fov-bottom: 84%;
  border: 1.5px dashed rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  opacity: 0;
}

#mds-root .mds-fov__market.is-on {
  opacity: 1;
}

#mds-root .mds-fov__zones {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#mds-root .mds-fov__zones li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(var(--tx, -50%), -50%);
  padding: 5px 10px;
  border: 1px solid rgba(var(--mds-acc), 0.3);
  border-radius: var(--mds-r-pill);
  background: rgba(10, 12, 15, 0.72);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(238, 241, 244, 0.9);
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-fov__zones.is-on li {
  opacity: 1;
}

#mds-root .mds-fov__zones.is-on li:nth-child(2) {
  transition-delay: 0.1s;
}

#mds-root .mds-fov__zones.is-on li:nth-child(3) {
  transition-delay: 0.2s;
}

#mds-root .mds-fov__split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.98fr 1fr;
  align-items: start; 
  align-content: center; 
  justify-items: center;
  gap: 18px;
  padding: 10px;
  background: var(--mds-bg);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease), visibility var(--mds-dur-base);
}

#mds-root .mds-fov__split.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-fov__half {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  max-height: 100%;
}

#mds-root .mds-fov__half img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 10px;
  background: #05070a;
}

#mds-root .mds-fov__half .mds-ph--frame {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 10px;
}

#mds-root .mds-fov__half figcaption {
  font-size: var(--mds-fs-cap);
  letter-spacing: 0.04em;
  color: var(--mds-dim);
  text-align: center;
}

@media (max-width: 1199px) {
  #mds-root .mds-fov {
    height: auto;
  }
  #mds-root .mds-fov__inner {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 80px 90px;
    gap: 26px;
    overflow: visible;
  }
  #mds-root .mds-fov__stage {
    position: sticky;
    top: 12px;
    z-index: 2;
    order: -1;
    height: auto;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 46svh;
    background-color: var(--mds-bg);
  }
  #mds-root .mds-fov__side .mds-steps {
    gap: clamp(170px, 32vh, 300px);
  }

  /* На узком экране медиа закрепляется у верхнего края и висит там,
     пока читатель идёт по шагам. Появление головы привязано к прогрессу
     блока, и до неё доходило слишком поздно — сверху висел пустой
     тёмный прямоугольник. Здесь голова стоит с самого начала, а рамка
     поля, зоны и подписи проявляются по ходу, как и было. */
  #mds-root .mds-fov__skull {
    opacity: 1;
    transform: none;
  }
  #mds-root .mds-fov__zones li {
    font-size: 10.5px;
    padding: 4px 8px;
  }
}
#mds-root .mds-speed {
  height: 200vh;
  background: transparent;
}

#mds-root .mds-speed__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  overflow: hidden;
}

#mds-root .mds-speed__title {
  margin: 0 0 16px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-speed__lead {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mds-dim);
}


#mds-root .mds-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-scale__i {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-1);
  padding: var(--mds-space-4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mds-r-card);
  background: rgba(255, 255, 255, 0.022);
}


#mds-root .mds-scale__i--fast {
  --c: 109, 219, 168;
}

#mds-root .mds-scale__i--mid {
  --c: 88, 217, 210;
}

#mds-root .mds-scale__i--max {
  --c: 87, 200, 255;
}

#mds-root .mds-scale__i {
  border-color: rgba(var(--c), 0.34);
  background: linear-gradient(180deg, rgba(var(--c), 0.09), rgba(var(--c), 0.03));
}

#mds-root .mds-scale__v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c));
}

#mds-root .mds-scale__n {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
}


#mds-root .mds-speed__timer {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  pointer-events: none;
}

#mds-root .mds-speed__timer-v {
  font-family: var(--mds-font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(var(--mds-acc), 0.35);
}

#mds-root .mds-speed__timer-u {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mds-dim);
}


#mds-root .mds-speed__stage {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  max-height: min(74svh, 660px);
}


#mds-root .mds-speed__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--mds-dur-slow) var(--mds-ease);
}

#mds-root .mds-speed__canvas.is-on {
  opacity: 1;
}

@media (max-width: 1199px) {
  #mds-root .mds-speed {
    height: auto;
  }
  
  #mds-root .mds-scale {
    grid-template-columns: 1fr;
    gap: var(--mds-space-2);
  }
  #mds-root .mds-scale__i {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
  }
  #mds-root .mds-scale__v {
    min-width: 48px;
  }
  #mds-root .mds-speed__timer {
    right: 12px;
    bottom: 10px;
  }
  #mds-root .mds-speed__timer-v {
    font-size: 38px;
  }
  #mds-root .mds-speed__inner {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 80px;
    gap: 30px;
  }
  #mds-root .mds-speed__stage {
    height: auto;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 52svh;
    order: -1;
  }
}
#mds-root .mds-six {
  
  /* Высота сцены общая для всех шести режимов. Уменьшена с 72svh/740px:
     кадр отчёта был выше остальных и распирал сцену, из-за него правая
     колонка вставала выше, чем нужно. Низ отчёта обрезан, высота убрана
     следом — на мобильном значение не работает, там карточки идут лентой
     с aspect-ratio. */
  --six-h: min(68svh, 672px);
  height: 560vh;
  
}

#mds-root .mds-six__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.5vw, 64px);
  padding-inline: var(--mds-content-x);
  overflow: hidden;
}

#mds-root .mds-six__side {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-5);
}

#mds-root .mds-six__title {
  margin: 0 0 var(--mds-space-3);
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-six__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mds-dim);
}


#mds-root .mds-six__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--mds-line);
}

#mds-root .mds-six__navbtn {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--mds-dim);
  padding: var(--mds-space-2) 0 var(--mds-space-2) var(--mds-space-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  cursor: pointer;
  display: grid;
  gap: 2px;
  transition: color var(--mds-dur-ui) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-six__navbtn:hover {
  color: var(--mds-text);
}

#mds-root .mds-six__navbtn:focus-visible {
  outline: 2px solid rgb(var(--mds-acc));
  outline-offset: 3px;
  border-radius: 4px;
  color: var(--mds-text);
}

#mds-root .mds-six__navbtn.is-on {
  color: var(--mds-text);
  border-left-color: rgb(var(--mds-acc));
}

#mds-root .mds-six__navname {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#mds-root .mds-six__navnote {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
  opacity: 0.75;
}

#mds-root .mds-six__navbtn.is-on .mds-six__navnote {
  opacity: 1;
}


#mds-root .mds-six__stage {
  min-width: 0;
  max-width: 980px;
  margin-inline: auto;
  width: 100%;
}

#mds-root .mds-six__viewport {
  position: relative;
  height: var(--six-h);
  overflow: hidden;
}

#mds-root .mds-six__track {
  --y: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate3d(0, calc(var(--y) * -1), 0);
  transition: transform var(--mds-dur-base) var(--mds-ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #mds-root .mds-six__track {
    transition: none;
  }
}

#mds-root .mds-six__track .mds-card {
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--six-h) - 8px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--mds-space-4);
  opacity: 0.2;
  transition: opacity var(--mds-dur-fast) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease), background var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-six__track .mds-card.is-active {
  opacity: 1;
  
  border-color: rgba(var(--mds-acc), 0.3);
  background: rgba(var(--mds-acc), 0.07);
}


#mds-root .mds-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mds-space-4);
  padding-bottom: var(--mds-space-3);
  border-bottom: 1px solid var(--mds-line);
}

#mds-root .mds-card__mode {
  font-size: var(--mds-fs-label);
  font-weight: 600;
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: rgb(var(--mds-acc));
}

#mds-root .mds-card__app {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mds-dim);
  opacity: 0.6;
}


#mds-root .mds-view {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: var(--mds-space-3);
  border-radius: var(--mds-r-tight);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.28);
  
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.75) 100%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, rgba(0, 0, 0, 0.75) 100%);
}

#mds-root .mds-card.is-active .mds-view {
  cursor: crosshair;
}

#mds-root .mds-view__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

#mds-root .mds-card__cap {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--mds-space-3);
  row-gap: var(--mds-space-1);
  align-items: baseline;
  align-content: start;
  min-height: 70px;
}

#mds-root .mds-card__cap .mds-card__num {
  grid-row: 1/span 2;
}

@media (max-width: 1199px) {
  #mds-root .mds-six {
    height: auto;
  }
  #mds-root .mds-six__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: 80px;
  }
  #mds-root .mds-six__nav {
    display: none;
  }
  #mds-root .mds-six__side {
    margin-bottom: var(--mds-space-6);
  }
  
  #mds-root .mds-six__viewport {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--mds-content-x) * -1);
    padding-inline: var(--mds-content-x);
  }
  #mds-root .mds-six__viewport::-webkit-scrollbar {
    display: none;
  }
  #mds-root .mds-six__track {
    flex-direction: row;
    gap: var(--mds-space-3);
    transform: none;
  }
  #mds-root .mds-six__track .mds-card {
    width: min(88vw, 520px);
    height: auto;
    padding: var(--mds-space-4);
    opacity: 1;
    scroll-snap-align: center;
  }
  #mds-root .mds-view {
    padding: var(--mds-space-2);
    aspect-ratio: 16/10;
  }
  #mds-root .mds-card__cap {
    min-height: 0;
  }
  #mds-root .mds-lens {
    display: none;
  }
}
#mds-root .mds-ai {
  height: 460vh;
  
}

#mds-root .mds-ai__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  overflow: hidden;
}

#mds-root .mds-eyebrow--ai {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-ai__side {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-5);
}

#mds-root .mds-ai__title {
  margin: 0 0 16px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-ai__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mds-dim);
}


#mds-root .mds-ailist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--mds-line);
}

#mds-root .mds-ailist__i {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--mds-dim);
  padding: var(--mds-space-2) 0 var(--mds-space-2) var(--mds-space-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  cursor: pointer;
  display: grid;
  gap: 2px;
  transition: color var(--mds-dur-ui) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-ailist__i:hover {
  color: var(--mds-text);
}

#mds-root .mds-ailist__i.is-on {
  color: var(--mds-text);
  border-left-color: rgb(var(--mds-acc));
}

#mds-root .mds-ailist__i:focus-visible {
  outline: 2px solid rgb(var(--mds-acc));
  outline-offset: 3px;
  border-radius: 4px;
  color: var(--mds-text);
}

#mds-root .mds-ailist__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#mds-root .mds-ailist__note {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
  opacity: 0.8;
}

#mds-root .mds-ailist__i.is-on .mds-ailist__note {
  opacity: 1;
}


#mds-root .mds-ai__stage {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-3);
  min-width: 0;
  max-width: 980px;
  margin-inline: auto;
  width: 100%;
}

#mds-root .mds-ai__viewport {
  --ai-h: min(58svh, 600px);
  position: relative;
  height: var(--ai-h);
  overflow: hidden;
  border-radius: var(--mds-r-card);
}

#mds-root .mds-ai__track {
  --y: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate3d(0, calc(var(--y) * -1), 0);
  transition: transform var(--mds-dur-base) var(--mds-ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #mds-root .mds-ai__track {
    transition: none;
  }
}
#mds-root .mds-ai__track .mds-card {
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--ai-h) - 8px);
  padding: var(--mds-space-5);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--mds-space-3);
  opacity: 0.25;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-ai__track .mds-card.is-active {
  opacity: 1;
  border-color: var(--mds-line);
  background: rgba(255, 255, 255, 0.022);
}


#mds-root .mds-card__mode--ai {
  color: rgb(var(--mds-acc));
}


#mds-root .mds-card--ai .mds-view {
  background-color: rgba(0, 0, 0, 0.28);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(var(--mds-acc), 0.06), transparent 62%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px);
}


#mds-root .mds-aistrip {
  display: flex;
  gap: var(--mds-space-3);
  margin: var(--mds-space-3) 0 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-aistrip li {
  flex: 1 1 0;
  min-width: 0;
}

#mds-root .mds-aithumb {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mds-r-tight);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  filter: grayscale(0.35);
  transition: opacity var(--mds-dur-base) var(--mds-ease), border-color var(--mds-dur-base) var(--mds-ease), filter var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-aithumb img {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: cover;
  object-position: center;
}

#mds-root .mds-aithumb:hover {
  opacity: 0.85;
  filter: none;
  border-color: rgba(255, 255, 255, 0.34);
}

#mds-root .mds-aithumb.is-on {
  opacity: 1;
  filter: none;
  border-color: rgb(var(--mds-acc));
}

#mds-root .mds-aithumb:focus-visible {
  outline: 2px solid rgb(var(--mds-acc));
  outline-offset: 3px;
}

@media (max-width: 1199px) {
  #mds-root .mds-ai {
    height: auto;
  }
  #mds-root .mds-ai__inner {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 80px;
    gap: var(--mds-space-6);
    overflow: visible;
  }
  #mds-root .mds-ai__stage {
    max-width: none;
    order: -1;
    margin-bottom: var(--mds-space-6);
  }
  #mds-root .mds-ailist__i {
    padding: var(--mds-space-4) 0;
  }
  
  #mds-root .mds-ai__viewport {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--mds-content-x) * -1);
    padding-inline: var(--mds-content-x);
  }
  #mds-root .mds-ai__viewport::-webkit-scrollbar {
    display: none;
  }
  #mds-root .mds-ai__track {
    flex-direction: row;
    gap: var(--mds-space-3);
    transform: none;
  }
  #mds-root .mds-ai__track .mds-card {
    width: min(88vw, 520px);
    height: auto;
    padding: var(--mds-space-4);
    opacity: 1;
    scroll-snap-align: center;
  }
  #mds-root .mds-card--ai .mds-view {
    aspect-ratio: 16/10;
    padding: var(--mds-space-2);
  }
  
  #mds-root .mds-aistrip {
    display: none;
  }
  #mds-root .mds-lens {
    display: none;
  }
}

#mds-root .mds-clean {
  height: 210vh;
  
}

#mds-root .mds-clean__inner {
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding: clamp(64px, 6vw, 96px) var(--mds-content-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 2.6vw, 40px);
  overflow: hidden;
}


#mds-root .mds-clean__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 3vw, 56px);
}

#mds-root .mds-clean__headline {
  min-width: 0;
}

#mds-root .mds-clean__title {
  margin: 0 0 var(--mds-space-3);
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-clean__lead {
  margin: 0 0 var(--mds-space-1);
  padding-left: var(--mds-space-4);
  border-left: 2px solid rgba(var(--mds-acc), 0.5);
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--mds-dim);
}

#mds-root .mds-clean__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mds-space-4);
  align-items: stretch;
}

#mds-root .mds-clean__grid .mds-card {
  
  padding: var(--mds-space-4);
  display: grid;
  
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--mds-space-3);
}

#mds-root .mds-card__mode--clean {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-card__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mds-dim);
}


#mds-root .mds-view--reveal {
  display: grid;
  place-items: center;
  padding: var(--mds-space-1);
}

#mds-root .mds-view--reveal picture {
  display: block;
  min-width: 0;
  max-width: 100%;
}

#mds-root .mds-view--reveal .mds-view__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}


#mds-root .mds-lens--reveal {
  border-color: rgba(var(--mds-acc), 0.55);
}


#mds-root .mds-clean__head,
#mds-root .mds-clean__grid {
  opacity: calc(1 - var(--out, 0));
  transform: translateY(calc(var(--out, 0) * -18px));
}

@media (max-width: 1199px) {
  #mds-root .mds-clean__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--mds-space-4);
  }
  #mds-root .mds-clean__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  #mds-root .mds-clean__grid .mds-card {
    padding: var(--mds-space-4);
  }
  #mds-root .mds-card__note {
    min-height: 0;
  }
  #mds-root .mds-lens {
    display: none;
  }
  
  #mds-root .mds-view--reveal {
    cursor: pointer;
  }
  #mds-root .mds-card--clean.is-raw .mds-card__mode::after {
    content: " — без обработки";
    color: var(--mds-dim);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }
  #mds-root .mds-card--clean .mds-card__note::after {
    content: " Нажмите на снимок — покажем его без обработки.";
    color: var(--mds-text);
  }
}
#mds-root .mds-viewer {
  height: auto;
  
}

#mds-root .mds-viewer__inner {
  padding: clamp(56px, 5vw, 84px) var(--mds-content-x);
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-5);
}


#mds-root .mds-viewer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(24px, 3vw, 56px);
}

#mds-root .mds-viewer__headline {
  min-width: 0;
}

#mds-root .mds-viewer__title {
  margin: 0 0 var(--mds-space-3);
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-viewer__lead {
  margin: 0 0 var(--mds-space-1);
  padding-left: var(--mds-space-4);
  border-left: 2px solid rgba(var(--mds-acc), 0.5);
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--mds-dim);
}


#mds-root .mds-viewer__frame {
  position: relative;
  min-height: 0;
}

#mds-root .mds-viewer__mount {
  height: min(66svh, 680px);
  border-radius: var(--mds-r-tight);
  overflow: hidden;
  background: #05070a;
}

#mds-root .mds-viewer__gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--mds-space-3);
  padding: var(--mds-space-5);
  border-radius: var(--mds-r-tight);
  background: rgba(5, 7, 10, 0.55);
  backdrop-filter: blur(2px);
  text-align: center;
  transition: opacity var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-viewer__stage.is-live .mds-viewer__gate {
  opacity: 0;
  pointer-events: none;
}

#mds-root .mds-viewer__gatestate {
  margin: 0;
  font-size: 13px;
  color: var(--mds-dim);
}

#mds-root .mds-viewer__stage.is-ready .mds-viewer__gatestate {
  display: none;
}

#mds-root .mds-viewer__gatebtn {
  appearance: none;
  padding: 12px var(--mds-space-5);
  border: 1px solid rgba(var(--mds-acc), 0.45);
  border-radius: var(--mds-r-tight);
  background: rgba(var(--mds-acc), 0.12);
  color: var(--mds-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mds-dur-ui) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-viewer__gatebtn:hover:not(:disabled) {
  background: rgba(var(--mds-acc), 0.2);
  border-color: rgba(var(--mds-acc), 0.7);
}

#mds-root .mds-viewer__gatebtn:disabled {
  opacity: 0.5;
  cursor: default;
}

#mds-root .mds-viewer__gatebtn:focus-visible {
  outline: 2px solid rgb(var(--mds-acc));
  outline-offset: 3px;
}


#mds-root .mds-viewer__exit {
  position: absolute;
  right: var(--mds-space-3);
  top: var(--mds-space-3);
  z-index: 3;
  appearance: none;
  padding: 6px 12px;
  border: 1px solid var(--mds-line);
  border-radius: var(--mds-r-tight);
  background: rgba(5, 7, 10, 0.75);
  color: var(--mds-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#mds-root .mds-viewer__exit:hover {
  color: var(--mds-text);
  border-color: rgba(255, 255, 255, 0.28);
}

#mds-root .mds-viewer__offline {
  margin: 0;
  padding: var(--mds-space-5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mds-dim);
  text-align: center;
}

@media (max-width: 1199px) {
  #mds-root .mds-viewer__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--mds-space-4);
  }
  #mds-root .mds-viewer__inner {
    padding-block: 64px;
  }
}
#mds-root .mds-modes__inner {
  opacity: calc(1 - var(--out, 0));
}

#mds-root .mds-fov__inner {
  opacity: var(--in, 1);
  transform: translateY(calc((1 - var(--in, 1)) * 16px));
}

#mds-root .mds-ceph__inner {
  opacity: calc(var(--in, 1) * (1 - var(--out, 0)));
  transform: translateY(calc((1 - var(--in, 1)) * 16px + var(--out, 0) * -18px));
}

#mds-root .mds-dose__inner {
  opacity: var(--in, 1);
  transform: translateY(calc((1 - var(--in, 1)) * 16px));
}

#mds-root .mds-ease__inner {
  opacity: calc(1 - var(--out, 0));
  transform: translateY(calc(var(--out, 0) * -18px));
}

#mds-root .mds-own__inner {
  opacity: var(--in, 1);
  transform: translateY(calc((1 - var(--in, 1)) * 16px));
}

#mds-root .mds-demo__inner {
  opacity: calc(1 - var(--out, 0));
  transform: translateY(calc(var(--out, 0) * -18px));
}

#mds-root .mds-room__inner {
  opacity: var(--in, 1);
  transform: translateY(calc((1 - var(--in, 1)) * 16px));
}

#mds-root .mds-curtain {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-content: center;
  justify-items: start;
  padding-inline: var(--mds-content-x);
  pointer-events: none;
  visibility: var(--curtain-vis, hidden);
}

#mds-root .mds-curtain__text {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--mds-space-3);
  justify-items: start;
  opacity: var(--t-op, 0);
  transform: translateY(calc((1 - var(--t-op, 0)) * 22px));
  will-change: opacity, transform;
}

#mds-root .mds-curtain__tag {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  
  color: rgb(var(--gf-lit, 127, 165, 194));
}

#mds-root .mds-curtain__name {
  margin: 0;
  font-family: var(--mds-font-display);
  font-size: clamp(46px, 8.4vw, 132px);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.03em;
  
  text-wrap: balance;
}

#mds-root .mds-curtain__note {
  
  margin: var(--mds-space-4) 0 0;
  padding-left: var(--mds-space-4);
  border-left: 2px solid rgba(var(--gf-a, 48, 110, 157), 0.5);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mds-dim);
}

@media (prefers-reduced-motion: reduce) {
  #mds-root .mds-curtain {
    display: none;
  }
}
#mds-root .mds-pano {
  height: 600vh;
  
}

#mds-root .mds-pano__inner {
  --pano-h: 55svh;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-rows: repeat(4, auto);
  align-content: center;
  row-gap: 0;
  padding-block: clamp(16px, 3vh, 32px) clamp(44px, 6vh, 62px);
  overflow: hidden;
}

#mds-root .mds-pano__story,
#mds-root .mds-pano .mds-rail {
  padding-inline: var(--mds-content-x);
}

#mds-root .mds-pano__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mds-space-2);
}

#mds-root .mds-pano__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--mds-space-3);
  margin: 0;
  transition: color var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-pano.is-ai .mds-pano__eyebrow {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-pano__meta {
  position: absolute;
  z-index: 3;
  right: clamp(14px, 2.5%, 34px);
  top: clamp(12px, 6%, 34px);
  padding: 3px 9px;
  border-radius: var(--mds-r-pill);
  background: rgba(6, 8, 11, 0.62);
  backdrop-filter: blur(4px);
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  color: rgba(238, 241, 244, 0.8);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-pano__meta.is-on {
  opacity: 1;
}

#mds-root .mds-pano__frame {
  display: grid;
  place-items: center;
  min-height: 0;
}

#mds-root .mds-pano__shot {
  position: relative;
  width: min(100%, var(--pano-h) * 1584 / 740);
  aspect-ratio: 1584/740;
  overflow: hidden;
  border-radius: var(--mds-r-card);
  background: #000;
  box-shadow: 0 0 0 1px var(--mds-line), 0 30px 80px -40px rgba(var(--mds-acc), 0.35);
}

#mds-root .mds-pano__zoom {
  position: absolute;
  inset: 0;
  transform: scale(var(--pz, 1));
  transform-origin: var(--px, 50%) var(--py, 50%);
  transition: transform var(--mds-dur-slow) var(--mds-ease);
}

#mds-root .mds-pano__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 100%) - 4%), transparent var(--reveal, 100%));
  mask-image: linear-gradient(90deg, #000 calc(var(--reveal, 100%) - 4%), transparent var(--reveal, 100%));
}

#mds-root .mds-pano__scan {
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: var(--reveal, 100%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgb(var(--mds-acc)) 12%, #fff 50%, rgb(var(--mds-acc)) 88%, transparent);
  box-shadow: 0 0 18px 3px rgba(var(--mds-acc), 0.55);
  opacity: 0;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-pano.is-scanning .mds-pano__scan {
  opacity: 1;
}

#mds-root .mds-pano__frame,
#mds-root .mds-pano__story,
#mds-root .mds-pano .mds-rail {
  
  opacity: calc(var(--in, 1) * (1 - var(--out, 0)));
  transform: translateY(calc((1 - var(--in, 1)) * 16px + var(--out, 0) * -18px));
}

#mds-root .mds-pano__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(6, 8, 11, 0.93);
  transition: transform var(--mds-dur-frame) var(--mds-ease);
  pointer-events: none;
}

#mds-root .mds-pano__shade--l {
  left: 0;
  transform-origin: left center;
  transform: scaleX(var(--sl, 0));
}

#mds-root .mds-pano__shade--r {
  right: 0;
  transform-origin: right center;
  transform: scaleX(var(--sr, 0));
}

#mds-root .mds-pano__shade--c {
  left: 0;
  transform-origin: center;
  transform: scaleX(var(--sc, 0));
}

#mds-root .mds-pano__glows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#mds-root .mds-pano__zone {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-pano__zone.is-on {
  opacity: 1;
}

#mds-root .mds-pano__zone.is-current .mds-pano__zone-tag {
  opacity: 1;
}

#mds-root .mds-pano__zone .mds-glow {
  opacity: 1;
  mix-blend-mode: normal;
  background: radial-gradient(closest-side, rgba(var(--mds-acc-lit), 0.62), rgba(var(--mds-acc), 0.34) 52%, rgba(var(--mds-acc), 0) 100%);
  filter: blur(3px);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
}

#mds-root .mds-pano__trace {
  position: absolute;
  inset: 0;
  background: rgba(var(--mds-acc), 0.46);
  -webkit-mask-image: url("/upload/page-assets/pano-ai/trace-nerve.png?v=1");
  mask-image: url("/upload/page-assets/pano-ai/trace-nerve.png?v=1");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 0 12px rgba(var(--mds-acc-lit), 0.45));
}

#mds-root .mds-pano__zone-tag {
  opacity: 0;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border: 1px solid rgba(var(--mds-acc), 0.3);
  border-radius: var(--mds-r-pill);
  background: rgba(10, 12, 15, 0.72);
  backdrop-filter: blur(4px);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(238, 241, 244, 0.92);
}

#mds-root .mds-pano__spots {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#mds-root .mds-pano__spot {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: hue-rotate(214deg) saturate(1.25) drop-shadow(0 0 10px rgba(var(--mds-acc-lit), 0.5));
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-pano__spot.is-on {
  opacity: 1;
}

#mds-root .mds-pano__spot--t16 {
  background-image: url("/upload/page-assets/pano-ai/find-16.png?v=3");
}

#mds-root .mds-pano__spot--t27 {
  background-image: url("/upload/page-assets/pano-ai/find-27.png?v=3");
}

#mds-root .mds-pano__spot--t28 {
  background-image: url("/upload/page-assets/pano-ai/find-28.png?v=3");
}

#mds-root .mds-pano__spot--t38 {
  background-image: url("/upload/page-assets/pano-ai/find-38.png?v=3");
}

#mds-root .mds-pano__pins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#mds-root .mds-pano__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 5px;
  border-radius: var(--mds-r-pill);
  border: 1px solid var(--pin, var(--mds-accent));
  background: rgba(10, 12, 15, 0.82);
  white-space: nowrap;
  font-size: 11.5px;
  color: rgba(238, 241, 244, 0.92);
  transform: translate(var(--tx, -50%), -50%) scale(0.9);
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-pano__pin.is-on {
  opacity: 1;
  transform: translate(var(--tx, -50%), -50%) scale(1);
}

#mds-root .mds-pano__pin b {
  padding: 1px 6px;
  border-radius: var(--mds-r-pill);
  background: var(--pin, var(--mds-accent));
  color: #05121a;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-pano__pin--urgent {
  --pin: rgb(var(--mds-acc-lit));
}

#mds-root .mds-pano__pin--advised {
  --pin: rgba(var(--mds-acc), .65);
}

#mds-root .mds-pano__pin--watch {
  --pin: rgba(var(--mds-acc), .35);
}

#mds-root .mds-pano__timer {
  position: absolute;
  left: clamp(14px, 2.5%, 34px);
  top: clamp(12px, 6%, 34px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
  pointer-events: none;
}

#mds-root .mds-pano.is-scanning .mds-pano__timer {
  opacity: 1;
}

#mds-root .mds-pano__timer-v {
  font-family: var(--mds-font-display);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

#mds-root .mds-pano__timer-u {
  margin-top: 4px;
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-pano__deck {
  display: grid;
  margin-top: clamp(14px, 2vh, 22px);
  min-height: 56px;
}

#mds-root .mds-pano__deck > * {
  grid-area: 1/1;
}

#mds-root .mds-fdi-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(148px, 13vw, 184px);
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
  max-width: calc(var(--pano-h) * 1584 / 740 + var(--mds-content-x) * 2);
  margin-inline: auto;
  padding-inline: var(--mds-content-x);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease), visibility var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-fdi-row.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-fdi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#mds-root .mds-fdi__row {
  display: flex;
  gap: 3px;
}

#mds-root .mds-fdi__gap {
  width: 14px;
  flex: none;
}

#mds-root .mds-fdi__t {
  position: relative;
  flex: 1;
  padding: 4px 0 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(139, 149, 161, 0.8);
  font-variant-numeric: tabular-nums;
  transition: background var(--mds-dur-fast) var(--mds-ease), border-color var(--mds-dur-fast) var(--mds-ease), color var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-fdi.is-marked .mds-fdi__t[data-state] {
  color: #05121a;
  font-weight: 650;
  cursor: default;
}

#mds-root .mds-fdi.is-marked .mds-fdi__t[data-state=urgent] {
  background: rgb(var(--mds-acc-lit));
  border-color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-fdi.is-marked .mds-fdi__t[data-state=advised] {
  background: rgba(var(--mds-acc), 0.65);
  border-color: rgba(var(--mds-acc), 0.65);
}

#mds-root .mds-fdi.is-marked .mds-fdi__t[data-state=watch] {
  background: rgba(var(--mds-acc), 0.35);
  border-color: rgba(var(--mds-acc), 0.35);
}

#mds-root .mds-layers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 54px);
  margin: 0;
  padding-inline: var(--mds-content-x);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease), visibility var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-layers.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-layers__i {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mds-dim);
  transition: color var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-layers__i span {
  position: relative;
  flex: none;
  width: 30px;
  height: 16px;
  border-radius: var(--mds-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background var(--mds-dur-ui) var(--mds-ease), border-color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-layers__i span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: transform var(--mds-dur-ui) var(--mds-ease), background var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-layers__i.is-on {
  color: var(--mds-text);
}

#mds-root .mds-layers__i.is-on span {
  background: rgba(var(--mds-acc), 0.25);
  border-color: rgba(var(--mds-acc), 0.6);
}

#mds-root .mds-layers__i.is-on span::after {
  transform: translateX(14px);
  background: rgb(var(--mds-acc));
}

#mds-root .mds-fdi__pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 8px;
  width: max-content;
  border-radius: var(--mds-r-tight);
  border: 1px solid rgba(var(--mds-acc), 0.35);
  background: rgba(10, 12, 15, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px -18px #000;
  transform: translate(-50%, 6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--mds-dur-fast) var(--mds-ease), transform var(--mds-dur-fast) var(--mds-ease), visibility var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-fdi.is-marked .mds-fdi__t:hover .mds-fdi__pop,
#mds-root .mds-fdi.is-marked .mds-fdi__t:focus-visible .mds-fdi__pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

#mds-root .mds-fdi__pop img {
  grid-row: 1/3;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

#mds-root .mds-fdi__pop b {
  align-self: end;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--mds-text);
  white-space: nowrap;
}

#mds-root .mds-fdi__pop i {
  align-self: start;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(238, 241, 244, 0.7);
  white-space: nowrap;
}

#mds-root .mds-fdi__health {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

#mds-root .mds-fdi__health-v {
  min-width: 2ch;
  text-align: right;
  font-family: var(--mds-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 650;
  line-height: 1;
  color: rgb(var(--mds-acc-lit));
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-fdi__health-l {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--mds-dim);
}

#mds-root .mds-pano__story {
  margin-top: clamp(24px, 4vh, 46px);
}

#mds-root .mds-pano__steps {
  position: relative;
  min-height: clamp(104px, 13.5vh, 136px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-pano__step {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 4vw, 64px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-pano__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-pano__title {
  margin: 0;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-pano__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mds-dim);
}

@media (min-width: 1200px) and (max-height: 860px) {
  #mds-root .mds-pano__inner {
    --pano-h: 48svh;
    gap: clamp(8px, 1.4vh, 16px);
  }
}
@media (min-width: 1200px) and (max-height: 730px) {
  #mds-root .mds-pano__inner {
    --pano-h: 40svh;
  }
  #mds-root .mds-pano__title {
    font-size: clamp(24px, 2.4vw, 32px);
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-pano {
    height: auto;
  }
  #mds-root .mds-pano__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: 70px 80px;
    overflow: visible;
  }
  #mds-root .mds-pano__meta {
    display: none;
  }
  #mds-root .mds-pano__frame {
    position: sticky;
    top: 40px;
    z-index: 2;
    padding-block: 4px 16px;
    background: var(--mds-bg-soft);
  }
  #mds-root .mds-pano__shot {
    width: 100%;
    border-radius: var(--mds-r-tight);
  }
  #mds-root .mds-pano__zone-tag {
    padding: 3px 8px;
    font-size: 0;
    letter-spacing: 0;
  }
  #mds-root .mds-pano__zone-tag::after {
    content: attr(data-short);
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  #mds-root .mds-fdi {
    display: none;
  }
  #mds-root .mds-fdi-row {
    justify-content: center;
    grid-template-columns: auto;
  }
  #mds-root .mds-fdi__health {
    border-left: 0;
    padding-left: 0;
  }
  #mds-root .mds-pano__timer {
    top: 10px;
    left: 12px;
  }
  #mds-root .mds-pano__timer-v {
    font-size: clamp(28px, 9vw, 44px);
  }
  #mds-root .mds-pano__pin {
    padding: 3px;
  }
  #mds-root .mds-pano__pin span {
    display: none;
  }
  #mds-root .mds-pano__pin b {
    font-size: 10.5px;
  }
  #mds-root .mds-pano__story {
    min-height: 0;
    margin-top: 26px;
  }
  #mds-root .mds-pano__steps {
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 26vh, 250px);
  }
  #mds-root .mds-pano__step {
    position: static;
    inset: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #mds-root .mds-pano__title {
    font-size: clamp(25px, 7vw, 34px);
  }
}
#mds-root .mds-ceph {
  height: 480vh;
  background: var(--mds-bg);
}

#mds-root .mds-ceph__inner {
  --ceph-h: 58svh;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(280px, 27%) minmax(0, 1fr) minmax(224px, 21%);
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding-inline: var(--mds-content-x);
  padding-block: clamp(16px, 3vh, 30px) clamp(56px, 8vh, 86px);
  overflow: hidden;
}

#mds-root .mds-ceph__side {
  grid-area: 1/1;
}

#mds-root .mds-ceph__frame {
  grid-area: 1/2;
}

#mds-root .mds-ceph__panel {
  grid-area: 1/3;
}

#mds-root .mds-ceph__head {
  display: flex;
  align-items: center;
  gap: var(--mds-space-3);
  margin-bottom: 20px;
}

#mds-root .mds-ceph__eyebrow {
  margin: 0;
  transition: color var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-ceph.is-ai .mds-ceph__eyebrow {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-ceph__steps {
  position: relative;
  min-height: clamp(200px, 26vh, 260px);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

#mds-root .mds-ceph__step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-ceph__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-ceph__title {
  margin: 0 0 14px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-ceph__lead {
  margin: 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mds-dim);
}

#mds-root .mds-ceph__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#mds-root .mds-ceph__shot {
  position: relative;
  width: min(100%, var(--ceph-h) * 7 / 6);
  aspect-ratio: 7/6;
  overflow: hidden;
  border-radius: var(--mds-r-card);
  background: #05070a;
  box-shadow: 0 0 0 1px var(--mds-line), 0 34px 90px -46px rgba(var(--mds-acc), 0.4);
}

#mds-root .mds-ceph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-ceph__img--xray {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--wipe, 106%) - 6%), transparent var(--wipe, 106%));
  mask-image: linear-gradient(180deg, #000 calc(var(--wipe, 106%) - 6%), transparent var(--wipe, 106%));
}

#mds-root .mds-ceph__img--trace {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--wipe2, 0%) - 6%), transparent var(--wipe2, 0%));
  mask-image: linear-gradient(180deg, #000 calc(var(--wipe2, 0%) - 6%), transparent var(--wipe2, 0%));
}

#mds-root .mds-ceph.is-xray .mds-ceph__img--face {
  opacity: 0;
}

#mds-root .mds-ceph__wave {
  position: absolute;
  left: -2%;
  right: -2%;
  top: var(--wave, 100%);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--mds-acc)) 14%, #fff 50%, rgb(var(--mds-acc)) 86%, transparent);
  box-shadow: 0 0 22px 4px rgba(var(--mds-acc), 0.5);
  opacity: 0;
  transition: opacity var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-ceph.is-passing .mds-ceph__wave {
  opacity: 1;
}

#mds-root .mds-ceph__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

#mds-root .mds-ceph__panel-title {
  margin: 0;
  font-size: var(--mds-fs-tag);
  letter-spacing: var(--mds-ls-tag);
  text-transform: uppercase;
  color: rgb(var(--mds-acc));
}

#mds-root .mds-ceph__opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid rgba(var(--mds-acc), 0.28);
  border-radius: var(--mds-r-tight);
  background: rgba(var(--mds-acc), 0.05);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: nowrap;
  color: rgba(238, 241, 244, 0.8);
}

#mds-root .mds-ceph__opt-tag {
  flex: none;
  font-size: var(--mds-fs-tag);
  letter-spacing: var(--mds-ls-tag);
  text-transform: uppercase;
  color: rgb(var(--mds-acc));
}

@media (min-width: 1200px) and (max-height: 860px) {
  #mds-root .mds-ceph__inner {
    --ceph-h: 52svh;
  }
  #mds-root .mds-ceph__steps {
    min-height: clamp(180px, 24vh, 220px);
  }
}
@media (min-width: 1200px) and (max-height: 730px) {
  #mds-root .mds-ceph__inner {
    --ceph-h: 46svh;
  }
  #mds-root .mds-ceph__title {
    font-size: clamp(23px, 2.3vw, 30px);
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-ceph {
    height: auto;
  }
  #mds-root .mds-ceph__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: 70px 80px;
    overflow: visible;
  }
  #mds-root .mds-ceph__side,
  #mds-root .mds-ceph__frame,
  #mds-root .mds-ceph__panel {
    grid-area: auto;
  }
  #mds-root .mds-ceph__frame {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: 10px 14px;
    background: var(--mds-bg);
  }
  #mds-root .mds-ceph__shot {
    width: min(100%, 60.6666666667svh);
  }
  #mds-root .mds-ceph__eyebrow {
    margin-bottom: 12px;
  }
  #mds-root .mds-ceph__steps {
    min-height: 0;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 26vh, 250px);
  }
  #mds-root .mds-ceph__step {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #mds-root .mds-ceph__title {
    font-size: clamp(25px, 7vw, 34px);
  }
  #mds-root .mds-ceph__panel {
    margin-top: 34px;
  }
}
#mds-root .mds-dose {
  height: 320vh;
  background: var(--mds-bg-soft);
}

#mds-root .mds-dose__inner {
  --dose-h: 56svh;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(280px, 28%) minmax(0, 1fr) minmax(210px, 20%);
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  padding-inline: var(--mds-content-x);
  padding-block: clamp(16px, 3vh, 30px) clamp(56px, 8vh, 86px);
  overflow: hidden;
}

#mds-root .mds-dose__side {
  grid-area: 1/1;
}

#mds-root .mds-dose__frame {
  grid-area: 1/2;
}

#mds-root .mds-dose__panel {
  grid-area: 1/3;
}

#mds-root .mds-dose__head {
  display: flex;
  align-items: center;
  gap: var(--mds-space-3);
  margin-bottom: 20px;
}

#mds-root .mds-dose__eyebrow {
  margin: 0;
  transition: color var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-dose.is-ai .mds-dose__eyebrow {
  color: rgb(var(--mds-acc));
}

#mds-root .mds-dose__steps {
  position: relative;
  min-height: clamp(210px, 27vh, 270px);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

#mds-root .mds-dose__step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-dose__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#mds-root .mds-dose__title {
  margin: 0 0 14px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-dose__lead {
  margin: 0;
  font-size: var(--mds-fs-lead);
  line-height: 1.55;
  color: var(--mds-dim);
}

#mds-root .mds-dose__frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
  min-width: 0;
}

#mds-root .mds-dose__frame::before {
  content: "";
  position: absolute;
  inset: 10% 0 0;
  background: radial-gradient(46% 42% at 50% 56%, rgba(var(--mds-acc), 0.16), transparent 70%);
  pointer-events: none;
}

#mds-root .mds-dose__shot {
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(var(--dose-h) * 1.55, 88svh);
  margin-bottom: -6%;
  object-fit: contain;
}

#mds-root .mds-dose__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#mds-root .mds-dose__panel-title {
  margin: 0;
  font-size: var(--mds-fs-tag);
  letter-spacing: var(--mds-ls-tag);
  text-transform: uppercase;
  color: rgb(var(--mds-acc));
}

#mds-root .mds-dose__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#mds-root .mds-dose__from {
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--mds-dim);
}

#mds-root .mds-dose__num {
  font-family: var(--mds-font-display);
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(var(--mds-acc), 0.25);
}

#mds-root .mds-dose__unit {
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.1em;
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-dose__modes {
  opacity: 0.22;
  transform: translateY(8px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-dose.is-modes .mds-dose__modes {
  opacity: 1;
  transform: none;
}

#mds-root .mds-dose__modes .mds-views__name {
  font-size: 13.5px;
}

#mds-root .mds-dose__specs {
  margin-top: 2px;
}

@media (min-width: 1200px) and (max-height: 860px) {
  #mds-root .mds-dose__inner {
    --dose-h: 50svh;
  }
  #mds-root .mds-dose__steps {
    min-height: clamp(190px, 25vh, 230px);
  }
}
@media (min-width: 1200px) and (max-height: 730px) {
  #mds-root .mds-dose__inner {
    --dose-h: 45svh;
  }
  #mds-root .mds-dose__title {
    font-size: clamp(23px, 2.3vw, 30px);
  }
  #mds-root .mds-dose__num {
    font-size: clamp(34px, 3.6vw, 48px);
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-dose {
    height: auto;
  }
  #mds-root .mds-dose__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: 70px 80px;
    overflow: visible;
  }
  #mds-root .mds-dose__side,
  #mds-root .mds-dose__frame,
  #mds-root .mds-dose__panel {
    grid-area: auto;
  }
  #mds-root .mds-dose__frame {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    padding-block: 10px 14px;
    background: var(--mds-bg-soft);
  }
  #mds-root .mds-dose__shot {
    height: 46svh;
    margin-bottom: 0;
  }
  #mds-root .mds-dose__steps {
    min-height: 0;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 26vh, 250px);
  }
  #mds-root .mds-dose__step {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #mds-root .mds-dose__title {
    font-size: clamp(25px, 7vw, 34px);
  }
  #mds-root .mds-dose__panel {
    margin-top: 34px;
  }
  #mds-root .mds-dose__modes {
    opacity: 1;
    transform: none;
  }
}
#mds-root .mds-room {
  height: 360vh;
  background: var(--mds-bg);
}

#mds-root .mds-room__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  padding-bottom: clamp(40px, 6vh, 64px);
  overflow: hidden;
}

#mds-root .mds-room__stage {
  width: 100%;
  aspect-ratio: 16/11;
  max-height: min(72svh, 620px);
}

#mds-root .mds-room__view {
  padding: clamp(10px, 2%, 22px);
}

#mds-root .mds-room__seq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-room__seq.is-on {
  opacity: 1;
}

#mds-root .mds-room__seq.is-off {
  opacity: 0;
}




#mds-root .mds-room__draw2 {
  position: absolute;
  inset: clamp(10px, 2%, 22px);
  
  display: grid;
  grid-template: 100%/100%;
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-room__draw2.is-on {
  opacity: 1;
}

#mds-root .mds-room__draw2 > * {
  grid-area: 1/1;
  min-width: 0;
  min-height: 0;
}

#mds-root .mds-room__pic {
  width: 100%;
  height: 100%;
  background: rgba(var(--mds-acc-lit), 0.9);
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#mds-root .mds-room__dim {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}

#mds-root .mds-room__area {
  fill: rgba(var(--mds-acc), 0.07);
  stroke: rgba(var(--mds-acc), 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
}

#mds-root .mds-room__d path {
  stroke: rgb(var(--mds-acc-lit));
  stroke-width: 1.6;
}

#mds-root .mds-room__d--soft path {
  stroke: rgba(var(--mds-acc), 0.5);
  stroke-dasharray: 6 5;
}

#mds-root .mds-room__floor {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.4;
}

#mds-root .mds-room__t {
  fill: var(--mds-text);
  stroke: none;
  font-family: var(--mds-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-room__t--soft {
  fill: var(--mds-dim);
  font-weight: 500;
  font-size: 13px;
}

#mds-root .mds-room__dim--plan .mds-room__d path,
#mds-root .mds-room__dim--side .mds-room__d path {
  stroke-width: 4.8;
}

#mds-root .mds-room__dim--plan .mds-room__t,
#mds-root .mds-room__dim--side .mds-room__t {
  font-size: 46px;
}

#mds-root .mds-room__dim--plan .mds-room__t--soft,
#mds-root .mds-room__dim--side .mds-room__t--soft {
  font-size: 40px;
}

#mds-root .mds-room__dim--plan .mds-room__area,
#mds-root .mds-room__dim--side .mds-room__area {
  stroke-width: 4.2;
  stroke-dasharray: 22 16;
}

#mds-root .mds-room__dim--side .mds-room__floor {
  stroke-width: 4.2;
}

#mds-root .mds-room__dim--plan .mds-room__area {
  fill: rgba(var(--mds-acc), 0.09);
  stroke: rgba(var(--mds-acc-lit), 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 8 6;
}

#mds-root .mds-room__draw {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mds-root .mds-room__draw [data-mds-room-layer] {
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-room__draw [data-mds-room-layer].is-on {
  opacity: 1;
}

#mds-root .mds-room__draw [data-mds-room-layer] path,
#mds-root .mds-room__draw [data-mds-room-layer] rect,
#mds-root .mds-room__draw [data-mds-room-layer] circle,
#mds-root .mds-room__draw [data-mds-room-layer] ellipse {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 1.1s var(--mds-ease);
}

#mds-root .mds-room__draw [data-mds-room-layer].is-on path,
#mds-root .mds-room__draw [data-mds-room-layer].is-on rect,
#mds-root .mds-room__draw [data-mds-room-layer].is-on circle,
#mds-root .mds-room__draw [data-mds-room-layer].is-on ellipse {
  stroke-dashoffset: 0;
}

#mds-root .mds-room__win,
#mds-root .mds-room__floor {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.6;
}

#mds-root .mds-room__floor {
  fill: rgba(var(--mds-acc), 0.07);
  stroke: rgba(var(--mds-acc), 0.45);
}

#mds-root .mds-room__dim {
  stroke: rgb(var(--mds-acc-lit));
  stroke-width: 1.4;
}

#mds-root .mds-room__draw text {
  stroke-dasharray: none;
}

@media (max-width: 1199px) {
  #mds-root .mds-room {
    height: auto;
  }
  #mds-root .mds-room__inner {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 80px 90px;
    gap: 26px;
    overflow: visible;
  }
  #mds-root .mds-room__stage {
    position: sticky;
    top: 12px;
    z-index: 2;
    order: -1;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 46svh;
    background-color: var(--mds-bg);
  }
  #mds-root .mds-room__side .mds-steps {
    gap: clamp(170px, 32vh, 300px);
  }
}
#mds-root .mds-ease {
  height: 320vh;
  background: var(--mds-bg-soft);
}

#mds-root .mds-ease__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 30%);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  padding-bottom: clamp(40px, 6vh, 64px);
  overflow: hidden;
}

#mds-root .mds-ease__stage {
  display: flex;
  flex-direction: column;
  gap: var(--mds-space-3);
  min-width: 0;
}

#mds-root .mds-ease__media {
  position: relative;
  width: 100%;
  height: min(76svh, 720px);
  overflow: hidden;
}

#mds-root .mds-ease__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(1.015);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease), visibility 0s linear var(--mds-dur-base);
}

#mds-root .mds-ease__slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

#mds-root .mds-ease__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#mds-root .mds-ease__slide--fade .mds-ease__shot {
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
}

#mds-root .mds-ease__seq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.4vw, 20px);
  opacity: 0;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-ease__seq.is-on {
  opacity: 1;
}

#mds-root .mds-hot {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#mds-root .mds-hot__i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(0, -50%);
  opacity: 0.28;
  transition: opacity var(--mds-dur-base) var(--mds-ease);
}

#mds-root .mds-hot__i--left {
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}

#mds-root .mds-hot__i.is-on {
  opacity: 1;
}

#mds-root .mds-hot__dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--mds-acc));
  box-shadow: 0 0 0 4px rgba(var(--mds-acc), 0.16);
}

#mds-root .mds-hot__label {
  padding: 4px 10px;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(var(--mds-acc), 0.3);
  border-radius: var(--mds-r-pill);
  background: rgba(10, 12, 15, 0.82);
  white-space: nowrap;
  font-size: 11.5px;
  color: rgba(238, 241, 244, 0.92);
}

#mds-root .mds-ease__side {
  min-width: 0;
}

#mds-root .mds-ease__side .mds-eyebrow {
  margin: 0 0 14px;
}

#mds-root .mds-ease .mds-steps {
  min-height: clamp(360px, 46vh, 410px);
  margin: 0 0 22px;
}

#mds-root .mds-ease .mds-step__title {
  margin: 0 0 12px;
}

#mds-root .mds-ease .mds-step__text {
  max-width: 40ch;
}

#mds-root .mds-ease__facts {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-ease__facts li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mds-dim);
}

#mds-root .mds-ease__facts li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#mds-root .mds-ease__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--mds-acc), 0.8);
}

#mds-root .mds-ease .mds-money {
  margin: 0;
}

@media (min-width: 1200px) and (max-height: 860px) {
  #mds-root .mds-ease__media {
    height: 66svh;
  }
  #mds-root .mds-ease__facts li {
    padding-block: 6px;
    font-size: 13px;
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-ease {
    height: auto;
  }
  #mds-root .mds-ease__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-block: 80px 90px;
    overflow: visible;
  }
  #mds-root .mds-ease__stage {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    padding-block: 10px 14px;
    background-color: var(--mds-bg-soft);
  }
  #mds-root .mds-ease__media {
    height: 42svh;
  }
  #mds-root .mds-ease__side {
    margin-top: 30px;
  }
  #mds-root .mds-ease .mds-steps {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 26vh, 250px);
    margin-bottom: 30px;
  }
  #mds-root .mds-ease .mds-step {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #mds-root .mds-hot__label {
    font-size: 10px;
    padding: 3px 7px;
  }
}
#mds-root .mds-own {
  height: 440vh;
}

#mds-root .mds-own__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(320px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
  padding-bottom: clamp(40px, 6vh, 64px);
  overflow: hidden;
}

#mds-root .mds-own__side {
  min-width: 0;
}

#mds-root .mds-own__side .mds-eyebrow {
  margin: 0 0 14px;
}

#mds-root .mds-own .mds-steps {
  min-height: clamp(150px, 19vh, 200px);
  margin: 0 0 26px;
}

#mds-root .mds-own .mds-step__title {
  margin: 0 0 12px;
}

#mds-root .mds-own .mds-step__text {
  max-width: 38ch;
}

#mds-root .mds-own__stage {
  min-width: 0;
}

#mds-root .mds-own__media {
  position: relative;
  width: 100%;
  height: min(72svh, 660px);
}

#mds-root .mds-own__panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease), visibility 0s linear var(--mds-dur-base);
}

#mds-root .mds-own__panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

#mds-root .mds-own__kit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 0.8vh, 10px) clamp(16px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-own__i {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(7px, 1.1vh, 11px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--mds-fs-body);
  line-height: 1.35;
  color: rgba(139, 149, 161, 0.6);
  transition: color var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-own__i.is-on {
  color: var(--mds-text);
}

#mds-root .mds-own__mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: border-color var(--mds-dur-fast) var(--mds-ease), background var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-own__i.is-on .mds-own__mark {
  border-color: rgb(var(--mds-acc-lit));
  background: rgba(var(--mds-acc), 0.18);
}

#mds-root .mds-own__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid rgb(var(--mds-acc));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-own__i.is-on .mds-own__mark::after {
  transform: rotate(45deg) scale(1);
}

#mds-root .mds-own__way {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-own__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--mds-acc), 0.22);
  border-radius: var(--mds-r-card);
  background: rgba(var(--mds-acc), 0.04);
}

#mds-root .mds-own__cardn {
  font-size: var(--mds-fs-num);
  letter-spacing: var(--mds-ls-num);
  color: rgb(var(--mds-acc-lit));
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-own__cardname {
  font-size: 14px;
  line-height: 1.3;
  color: var(--mds-text);
}

#mds-root .mds-own__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(139, 149, 161, 0.85);
}

#mds-root .mds-own__card--paid {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}

#mds-root .mds-own__coin {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


#mds-root .mds-own__terms {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-own__term {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#mds-root .mds-own__num {
  font-family: var(--mds-font-display);
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(var(--mds-acc), 0.25);
}

#mds-root .mds-own__unit {
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.1em;
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-own__cap {
  font-size: var(--mds-fs-body);
  line-height: 1.5;
  color: var(--mds-dim);
}

#mds-root .mds-own__care {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52ch;
}

#mds-root .mds-own__care li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mds-dim);
}

#mds-root .mds-own__care li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#mds-root .mds-own__care li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--mds-acc), 0.8);
}

#mds-root .mds-own__note {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mds-dim);
}

@media (min-width: 1200px) and (max-height: 860px) {
  #mds-root .mds-own__media {
    height: 64svh;
  }
  #mds-root .mds-own__i {
    padding-block: 6px;
    font-size: 13.5px;
  }
  #mds-root .mds-own__care li {
    padding-block: 8px;
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-own {
    height: auto;
  }
  #mds-root .mds-own__inner {
    position: static;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-block: 80px 90px;
    overflow: visible;
  }
  #mds-root .mds-own__stage {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    padding-block: 10px 14px;
    background-color: var(--mds-bg);
  }
  #mds-root .mds-own__media {
    height: 46svh;
  }
  #mds-root .mds-own__kit {
    gap: 0 14px;
  }
  #mds-root .mds-own__i {
    gap: 8px;
    font-size: 11.5px;
    padding-block: 5px;
  }
  #mds-root .mds-own__mark {
    width: 14px;
    height: 14px;
  }
  #mds-root .mds-own__mark::after {
    left: 4px;
    top: 3px;
    width: 4px;
    height: 7px;
  }
  #mds-root .mds-own__note {
    font-size: 12.5px;
  }
  #mds-root .mds-own__panel {
    gap: 10px;
  }
  #mds-root .mds-own__way {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #mds-root .mds-own__card {
    padding: 7px 10px;
    gap: 4px;
  }
  #mds-root .mds-own__cardname {
    font-size: 12.5px;
  }
  #mds-root .mds-own__tag {
    font-size: 10px;
    gap: 4px;
  }
  #mds-root .mds-own__coin {
    width: 13px;
    height: 13px;
  }
  #mds-root .mds-own__side {
    margin-top: 30px;
  }
  #mds-root .mds-own .mds-steps {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 26vh, 250px);
    margin-bottom: 30px;
  }
  #mds-root .mds-own .mds-step {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
#mds-root .mds-pay {
  padding-block: clamp(80px, 12vh, 150px);
}

#mds-root .mds-pay__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--mds-content-x);
}

#mds-root .mds-pay__side {
  min-width: 0;
}

#mds-root .mds-pay__side .mds-eyebrow {
  margin: 0 0 14px;
}

#mds-root .mds-pay__title {
  margin: 0 0 14px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-pay__lead {
  margin: 0 0 clamp(20px, 3vh, 34px);
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mds-dim);
}

#mds-root .mds-pay__note {
  margin: 0;
  max-width: 56ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(139, 149, 161, 0.85);
}

#mds-root[data-price=hidden] .mds-pay__side .mds-calc {
  display: none;
}

#mds-root:not([data-price=hidden]) .mds-pay__side .mds-terms {
  display: none;
}

#mds-root .mds-calc {
  display: grid;
  gap: clamp(14px, 2.2vh, 22px);
  max-width: 640px;
}

#mds-root .mds-calc__base {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#mds-root .mds-calc__base-l {
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: var(--mds-dim);
}

#mds-root .mds-calc__base-v {
  font-family: var(--mds-font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-calc__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

#mds-root .mds-calc__field {
  display: grid;
  gap: 8px;
}

#mds-root .mds-calc__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mds-dim);
}

#mds-root .mds-calc__label b {
  color: var(--mds-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-calc input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--mds-r-pill);
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  cursor: pointer;
}

#mds-root .mds-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--mds-acc-lit));
  box-shadow: 0 0 14px rgba(var(--mds-acc), 0.55);
  cursor: pointer;
}

#mds-root .mds-calc input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgb(var(--mds-acc-lit));
  box-shadow: 0 0 14px rgba(var(--mds-acc), 0.55);
  cursor: pointer;
}

#mds-root .mds-calc__out {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
  margin: 0;
  padding: clamp(12px, 1.8vh, 18px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

#mds-root .mds-calc__out li {
  display: grid;
  align-content: start;
  gap: 5px;
}

#mds-root .mds-calc__out b {
  font-family: var(--mds-font-display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-dim);
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-calc__out li:first-child b {
  font-size: clamp(26px, 2.6vw, 38px);
  color: var(--mds-text);
  text-shadow: 0 0 40px rgba(var(--mds-acc), 0.25);
}

#mds-root .mds-calc__out span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
}

#mds-root .mds-calc__cta {
  justify-self: start;
  padding: 13px 28px;
}

#mds-root .mds-terms {
  display: grid;
  gap: clamp(16px, 2.4vh, 26px);
  max-width: 640px;
}

#mds-root .mds-terms__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-terms__list li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(12px, 2vh, 20px) clamp(10px, 1.2vw, 16px);
  border: 1px solid rgba(var(--mds-acc), 0.22);
  border-radius: var(--mds-r-card);
  background: rgba(var(--mds-acc), 0.04);
}

#mds-root .mds-terms__list b {
  font-family: var(--mds-font-display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-terms__list span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
}

#mds-root .mds-terms__cta {
  justify-self: start;
  padding: 13px 28px;
}

#mds-root .mds-pay__shot {
  min-width: 0;
  height: min(72svh, 660px);
  
  margin-left: clamp(-46px, -2.2vw, -14px);
  margin-right: clamp(14px, 2.2vw, 46px);
}

#mds-root .mds-pay__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 1199px) {
  #mds-root .mds-pay__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  #mds-root .mds-pay__shot {
    height: 42svh;
    margin: 0;
  }
  #mds-root .mds-calc__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #mds-root .mds-calc__out {
    grid-template-columns: 1fr 1fr;
  }
  #mds-root .mds-calc__out li:first-child {
    grid-column: 1/-1;
  }
  #mds-root .mds-calc__cta,
  #mds-root .mds-terms__cta {
    justify-self: stretch;
    text-align: center;
  }
  #mds-root .mds-terms__list {
    grid-template-columns: 1fr 1fr;
  }
}
#mds-root .mds-demo {
  height: 200vh;
}

#mds-root .mds-demo__inner {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(24px, 4vh, 48px);
  padding-inline: var(--mds-content-x);
  padding-block: clamp(60px, 9vh, 120px);
}

#mds-root .mds-demo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: end;
  gap: clamp(20px, 3vw, 60px);
}

#mds-root .mds-demo__title-box .mds-eyebrow {
  margin: 0 0 14px;
}

#mds-root .mds-demo__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-demo__logo {
  display: inline-block;
  height: 0.62em;
  aspect-ratio: 288.1/41.4;
  transform: translateY(0.06em);
  background: rgb(var(--mds-acc-lit));
  -webkit-mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
  mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
}

#mds-root .mds-demo__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mds-dim);
}

#mds-root .mds-nums {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#mds-root .mds-num {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(12px, 2vh, 20px) clamp(10px, 1.2vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--mds-r-card);
  background: rgba(255, 255, 255, 0.02);
}

#mds-root .mds-num b {
  font-family: var(--mds-font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-num span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
}

#mds-root .mds-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 40px);
}

#mds-root .mds-way {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid rgba(var(--mds-acc), 0.22);
  border-radius: var(--mds-r-card);
  background: rgba(var(--mds-acc), 0.04);
}

#mds-root .mds-way__ph {
  overflow: hidden;
  border-radius: var(--mds-r-tight);
  aspect-ratio: 4/3;
}

#mds-root .mds-way__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#mds-root .mds-way__ph--cut {
  background: rgba(255, 255, 255, 0.03);
}

#mds-root .mds-way__ph--cut img {
  object-fit: contain;
  object-position: center bottom;
}

#mds-root .mds-way__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#mds-root .mds-way__title {
  margin: 0;
  font-size: var(--mds-fs-h3);
  font-weight: 600;
  line-height: 1.2;
}

#mds-root .mds-way__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mds-dim);
}

#mds-root .mds-btn--ghost {
  justify-self: start;
  padding: 11px 22px;
  border-radius: var(--mds-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--mds-text);
}

#mds-root .mds-btn--ghost:hover {
  border-color: rgb(var(--mds-acc-lit));
  background: rgba(var(--mds-acc), 0.08);
}

@media (max-width: 1199px) {
  #mds-root .mds-demo {
    height: auto;
  }
  #mds-root .mds-demo__inner {
    position: static;
    min-height: 0;
    padding-block: 80px 90px;
  }
  #mds-root .mds-demo__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  #mds-root .mds-nums {
    grid-template-columns: 1fr 1fr;
  }
  #mds-root .mds-ways {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #mds-root .mds-way {
    grid-template-columns: 1fr;
  }
  #mds-root .mds-way__ph {
    aspect-ratio: 16/10;
  }
  #mds-root .mds-btn--ghost {
    justify-self: stretch;
    text-align: center;
  }
}
#mds-root .mds-final {
  background: var(--mds-bg-soft);
  padding-block: clamp(80px, 12vh, 140px) clamp(120px, 18vh, 200px);
}

#mds-root .mds-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 34%);
  align-items: start;
  gap: clamp(28px, 4vw, 80px);
  padding-inline: var(--mds-content-x);
}

#mds-root .mds-final__title {
  margin: 0 0 24px;
  font-family: var(--mds-font-display);
  font-size: var(--mds-fs-h2);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#mds-root .mds-final__faq-title {
  margin: 34px 0 14px;
}

#mds-root .mds-folds {
  display: grid;
}

#mds-root .mds-fold {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#mds-root .mds-fold:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#mds-root .mds-fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  color: var(--mds-text);
  transition: color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-fold__head::-webkit-details-marker {
  display: none;
}

#mds-root .mds-fold__head:hover {
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-fold__head span {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

#mds-root .mds-fold__head span::before,
#mds-root .mds-fold__head span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgb(var(--mds-acc));
  transition: transform var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-fold__head span::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

#mds-root .mds-fold__head span::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

#mds-root .mds-fold[open] .mds-fold__head span::after {
  transform: translate(-50%, -50%) scaleY(0);
}

#mds-root .mds-fold__body {
  padding: 0 0 18px;
  max-width: 76ch;
}

#mds-root .mds-fold__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mds-dim);
}

#mds-root .mds-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px clamp(20px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}


#mds-root .mds-specs--panel {
  grid-template-columns: 1fr;
}

#mds-root .mds-spec {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#mds-root .mds-spec:last-child {
  border-bottom: none;
}

#mds-root .mds-spec--wide {
  grid-column: 1/-1;
}

#mds-root .mds-spec__i {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: rgb(var(--mds-acc-lit));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mds-root .mds-spec__k {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mds-dim);
}

#mds-root .mds-spec__v {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mds-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1199px) {
  #mds-root .mds-specs {
    grid-template-columns: 1fr;
  }
}
#mds-root .mds-final__kp {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

#mds-root .mds-final__side {
  position: sticky;
  top: clamp(20px, 6vh, 60px);
  display: grid;
  gap: 18px;
}

#mds-root .mds-form {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(var(--mds-acc), 0.22);
  border-radius: var(--mds-r-panel);
  background: rgba(var(--mds-acc), 0.04);
}

#mds-root .mds-contacts {
  display: grid;
  gap: 6px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mds-r-panel);
  background: rgba(255, 255, 255, 0.02);
}

/* Выходы на сайт под контактами. Страница часто открывается из поиска
   сама по себе: досмотрев до конца, человек упирался в форму, и уйти
   в каталог ему было некуда. На узком экране это единственный выход,
   кроме логотипа в первом кадре. */
#mds-root .mds-exits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#mds-root .mds-exits__link {
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--mds-r-panel, 12px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--mds-dim);
  font-size: 13.5px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
#mds-root .mds-exits__link:hover {
  color: var(--mds-text);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

#mds-root .mds-contacts__title {
  margin: 0 0 4px;
  font-size: var(--mds-fs-tag);
  letter-spacing: var(--mds-ls-tag);
  text-transform: uppercase;
  color: var(--mds-dim);
}

#mds-root .mds-contacts__link {
  font-size: 18px;
  color: var(--mds-text);
  text-decoration: none;
  transition: color var(--mds-dur-ui) var(--mds-ease);
}

#mds-root .mds-contacts__link:hover {
  color: rgb(var(--mds-acc-lit));
}

#mds-root .mds-contacts__note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(139, 149, 161, 0.7);
}

@media (max-width: 1199px) {
  #mds-root .mds-final__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  #mds-root .mds-final__side {
    position: static;
  }
  #mds-root .mds-final__kp .mds-btn--ghost {
    width: 100%;
    text-align: center;
  }
}

#mds-root .mds-spy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 46px;
  padding-inline: var(--mds-content-x);
  background: linear-gradient(to top, rgba(7, 9, 11, 0.82) 30%, transparent);
  pointer-events: none;
}

#mds-root .mds-spy__current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 150px;
}

#mds-root .mds-spy__num {
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  color: rgb(var(--mds-acc));
  font-variant-numeric: tabular-nums;
}

#mds-root .mds-spy__name {
  font-size: var(--mds-fs-label);
  letter-spacing: var(--mds-ls-label);
  text-transform: uppercase;
  color: var(--mds-dim);
  transition: color var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-spy__dots {
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

#mds-root .mds-spy__dot {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

#mds-root .mds-spy__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 149, 161, 0.45);
  transition: all var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-spy__dot:hover::before {
  background: var(--mds-text);
  transform: scale(1.25);
}

#mds-root .mds-spy__dot.is-active::before {
  width: 20px;
  border-radius: var(--mds-r-pill);
  background: linear-gradient(90deg, rgb(var(--mds-acc)), rgb(var(--mds-acc-lit)));
  box-shadow: 0 0 10px rgba(var(--mds-acc), 0.65);
}

#mds-root .mds-spy__dot::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mds-text);
  background: rgba(14, 17, 21, 0.9);
  border: 1px solid var(--mds-line);
  padding: 6px 10px;
  border-radius: var(--mds-r-tight);
  opacity: 0;
  pointer-events: none;
  transition: all var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-spy__dot:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#mds-root .mds-spy__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}

#mds-root .mds-spy__bar {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  
  background: linear-gradient(90deg, rgb(var(--mds-acc)) 0%, rgb(var(--mds-acc-lit)) 32%, rgb(var(--mds-acc)) 66%, rgb(var(--mds-acc-lit)) 100%);
  background-size: 280% 100%;
  animation: mds-neon-flow 7s linear infinite;
  box-shadow: 0 0 12px rgba(var(--mds-acc), 0.55), 0 0 26px rgba(var(--mds-acc-lit), 0.25);
}

@keyframes mds-neon-flow {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 280% 0;
  }
}
@media (max-width: 1199px) {
  #mds-root .mds-spy {
    height: auto;
    padding: 0;
    background: none;
  }
  #mds-root .mds-spy__current,
  #mds-root .mds-spy__dots {
    display: none;
  }
  #mds-root .mds-spy__track {
    height: 3px;
  }
}


#mds-root .mds-fov__side .mds-steps {
  min-height: clamp(120px, 17vh, 168px);
  margin-bottom: 18px;
}


#mds-root .mds-fovline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  min-height: 28px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--mds-dur-base) var(--mds-ease), transform var(--mds-dur-base) var(--mds-ease);
  pointer-events: none;
}

#mds-root .mds-fovline.is-on {
  opacity: 1;
  transform: none;
}

#mds-root .mds-fovline li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--mds-r-pill);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(139, 149, 161, 0.85);
  transition: color var(--mds-dur-fast) var(--mds-ease), border-color var(--mds-dur-fast) var(--mds-ease), background var(--mds-dur-fast) var(--mds-ease);
}

#mds-root .mds-fovline li.is-active {
  border-color: rgb(var(--mds-acc));
  background: rgba(var(--mds-acc), 0.07);
  color: var(--mds-text);
}



@media (min-width: 1200px) {

  
  html.mds-slides,
  html.mds-slides body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.mds-slides #mds-root {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--mds-bg);
  }

  
  html.mds-slides #mds-root .mds-glowfield {
    position: absolute;
    inset: 0;
  }

  html.mds-slides #mds-root .mds-glowfield__lamp {
    position: absolute;
    inset: 0;
    height: 100%;
    margin-bottom: 0;
  }

  
  html.mds-slides #mds-root .mds-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 340ms var(--mds-ease, ease),
                visibility 0s linear 340ms;
  }

  html.mds-slides #mds-root .mds-scene.is-live {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 460ms var(--mds-ease, ease),
                visibility 0s linear 0s;
  }

  
  html.mds-slides #mds-root .mds-scene {
    height: 100%;
    
    overflow-y: auto;
    overflow-x: hidden;
  }

  html.mds-slides #mds-root .mds-modes__inner,
  html.mds-slides #mds-root .mds-fov__inner,
  html.mds-slides #mds-root .mds-speed__inner,
  html.mds-slides #mds-root .mds-six__inner,
  html.mds-slides #mds-root .mds-ai__inner,
  html.mds-slides #mds-root .mds-pano__inner,
  html.mds-slides #mds-root .mds-ceph__inner,
  html.mds-slides #mds-root .mds-dose__inner,
  html.mds-slides #mds-root .mds-room__inner,
  html.mds-slides #mds-root .mds-ease__inner,
  html.mds-slides #mds-root .mds-own__inner,
  html.mds-slides #mds-root .mds-demo__inner {
    position: relative;
    top: auto;
    height: 100%;
  }

  
  html.mds-slides #mds-root .mds-clean__inner {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
  }

  
  html.mds-slides #mds-root .mds-modes__inner,
  html.mds-slides #mds-root .mds-fov__inner,
  html.mds-slides #mds-root .mds-ceph__inner,
  html.mds-slides #mds-root .mds-dose__inner,
  html.mds-slides #mds-root .mds-ease__inner,
  html.mds-slides #mds-root .mds-own__inner,
  html.mds-slides #mds-root .mds-demo__inner,
  html.mds-slides #mds-root .mds-room__inner,
  html.mds-slides #mds-root .mds-clean__head,
  html.mds-slides #mds-root .mds-clean__grid {
    transform: none;
  }

  
  html.mds-slides #mds-root .mds-scene {
    scrollbar-width: none;
  }
  html.mds-slides #mds-root .mds-scene::-webkit-scrollbar {
    display: none;
  }

  
  
  html.mds-slides #mds-root .mds-viewer {
    display: block;
  }

  
  html.mds-slides #mds-root .mds-pay,
  html.mds-slides #mds-root .mds-final {
    display: grid;
    align-content: safe center;
  }
  
  html.mds-slides #mds-root .mds-pay,
  html.mds-slides #mds-root .mds-final {
    padding-top: clamp(28px, 4vh, 56px);
    padding-bottom: calc(var(--mds-nav-h, 74px) + 24px);
  }
  html.mds-slides #mds-root .mds-viewer__inner {
    padding-bottom: calc(var(--mds-nav-h, 74px) + 24px);
  }
  
  html.mds-slides #mds-root .mds-viewer__inner {
    padding-block: clamp(24px, 4vh, 48px);
  }
  html.mds-slides #mds-root .mds-final__inner {
    padding-block: 0;
  }

  
  html.mds-slides #mds-root .mds-spy__bar {
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  
  html.mds-slides #mds-root .mds-spy__num {
    min-width: 3.4em;
  }
}



@media (min-width: 1200px) {

  
  html.mds-slides #mds-root {
    --mds-nav-h: 74px;
  }

  
  html.mds-slides #mds-root .mds-spy.mds-booknav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    width: 100%;
    max-width: none;
    height: var(--mds-nav-h);         
    padding: 10px clamp(18px, 3vw, 44px) 12px;
    background: linear-gradient(180deg,
      rgba(6, 10, 16, 0) 0%,
      rgba(6, 10, 16, 0.60) 34%,
      rgba(6, 10, 16, 0.86) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 600ms ease, transform 600ms ease;
  }
  html.mds-slides #mds-root .mds-spy.mds-booknav.is-shown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;             
  }

  
  #mds-root .mds-booknav__now {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  /* Логотип поставщика: он же выход на сайт — страница приходит из поиска
     сама по себе, и без этой ссылки уйти в каталог человеку неоткуда.
     Рисуется маской, как в блоке «Компания», поэтому цвет задаётся фоном
     и не спорит с тёмной панелью. */
  /* Маска висит на внутреннем знаке, а не на самой ссылке: маска обрезает
     всё содержимое элемента, и подсказка внутри неё оказывалась невидимой. */
  #mds-root .mds-booknav__home {
    display: block;
    width: 108px;
    height: 16px;
  }
  #mds-root .mds-booknav__home-mark {
    display: block;
    width: 100%;
    height: 100%;
    background: #eef1f4;
    -webkit-mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
    mask: url("/upload/page-assets/fordent.svg") left center/contain no-repeat;
    opacity: .72;
    transition: opacity 220ms ease;
  }
  #mds-root .mds-booknav__home:hover .mds-booknav__home-mark {
    opacity: 1;
  }
  #mds-root .mds-booknav__brand {
    font: 600 10.5px/1 var(--mds-font-display, var(--mds-font, inherit));
    letter-spacing: 0.15em;
    color: #eef1f4;                       
    white-space: nowrap;
  }
  #mds-root .mds-booknav__brand-accent {
    font-weight: inherit;
    /* Цвет берётся у световой среды: она перекрашивается на каждой части,
       и надпись идёт за ней — синяя на аппарате, голубая на КЛКТ,
       фиолетовая на панораме. Подмешиваем белого, иначе тёмные части
       читаются на тёмной панели плохо. Запасное значение — для браузеров
       без color-mix. */
    color: rgb(var(--mds-p1-lit));
    color: color-mix(in srgb, rgb(var(--gf-a, var(--mds-p1-lit))) 62%, #eef1f4);
    transition: color 900ms ease;        
  }

  
  #mds-root .mds-booknav__track {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 1.6vw, 26px);    
    flex: 1 1 auto;
    min-width: 0;
  }

  #mds-root .mds-booknav__part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    flex-basis: 0;
  }

  
  #mds-root .mds-booknav__ptitle {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    height: 13px;                     
    text-align: left;
    cursor: pointer;
    font: 600 11px/13px var(--mds-font, inherit);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238, 243, 248, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 250ms ease, text-shadow 250ms ease;
  }
  #mds-root .mds-booknav__ptitle:hover { color: rgba(238, 243, 248, 0.9); }
  #mds-root .mds-booknav__ptitle.is-active {
    color: rgb(var(--gf-lit));
    text-shadow: 0 0 14px rgba(var(--gf-lit), 0.5);
  }

  #mds-root .mds-booknav__ticks {
    display: flex;
    gap: 5px;
    height: 18px;                     
  }

  
  #mds-root .mds-booknav__tick {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 0;
    min-width: 14px;
    background: none;
    cursor: pointer;
    position: relative;
  }
  #mds-root .mds-booknav__tick::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 6.5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(238, 243, 248, 0.16);
    transition: background 250ms ease, box-shadow 250ms ease;
  }
  #mds-root .mds-booknav__tick::after {
    content: '';
    position: absolute;
    left: 0;
    top: 6.5px;
    height: 5px;
    border-radius: 3px;
    width: calc(var(--tk, 0) * 100%);
    background: rgba(var(--gf-lit), 0.75);
    transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1), background 250ms ease;
    pointer-events: none;
  }
  #mds-root .mds-booknav__tick:hover::before {
    background: rgba(238, 243, 248, 0.32);
  }
  #mds-root .mds-booknav__tick.is-active::before {
    box-shadow: 0 0 10px rgba(var(--gf-lit), 0.35);
  }
  #mds-root .mds-booknav__tick.is-active::after {
    background: rgb(var(--gf-lit));
    box-shadow: 0 0 8px rgba(var(--gf-lit), 0.6);
  }

  
  #mds-root .mds-booknav__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 3px);
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(14, 20, 28, 0.95);
    border: 1px solid rgba(238, 243, 248, 0.12);
    color: #eef3f8;
    font: 500 12px/1.25 var(--mds-font, inherit);
    font-style: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 6;
  }
  #mds-root .mds-booknav__tick[data-side="r"] .mds-booknav__tip {
    left: auto;
    right: -4px;
    transform: translate(0, 3px);
  }
  #mds-root .mds-booknav__tick[data-side="l"] .mds-booknav__tip {
    left: -4px;
    transform: translate(0, 3px);
  }
  #mds-root .mds-booknav__tick:hover .mds-booknav__tip,
  #mds-root .mds-booknav__tick:focus-visible .mds-booknav__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 50ms;
  }
  #mds-root .mds-booknav__tick[data-side="r"]:hover .mds-booknav__tip,
  #mds-root .mds-booknav__tick[data-side="l"]:hover .mds-booknav__tip,
  #mds-root .mds-booknav__tick[data-side="r"]:focus-visible .mds-booknav__tip,
  #mds-root .mds-booknav__tick[data-side="l"]:focus-visible .mds-booknav__tip {
    transform: translate(0, 0);
  }

  
  /* Выход в раздел каталога. Красный — единственный такой на панели:
     это не шаг книги, а уход со страницы, и путать его с листанием
     не нужно. Стоит правее стрелки «в начало» — последним в ряду. */
  #mds-root .mds-booknav__back {
    position: relative;
    flex: 0 0 auto;
    /* «в начало» и «выйти» — пара, между ними отступ меньше, чем до
       кнопки заявки: gap панели гасим отрицательным полем */
    margin-left: calc(8px - clamp(16px, 2vw, 32px));
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(232, 53, 46, 0.42);
    background: rgba(232, 53, 46, 0.10);
    color: rgba(255, 138, 132, 0.92);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
  }
  #mds-root .mds-booknav__back:hover {
    color: #fff;
    border-color: rgba(232, 53, 46, 0.85);
    background: rgba(232, 53, 46, 0.34);
  }

  /* Подсказки логотипа и выхода — те же, что у засечек. Логотип стоит
     слева, поэтому его подсказка прижимается левым краем, а выход
     крайний справа — правым, иначе они вылезли бы за экран. */
  #mds-root .mds-booknav__home,
  #mds-root .mds-booknav__back {
    position: relative;
  }
  #mds-root .mds-booknav__home .mds-booknav__tip {
    left: 0;
    transform: translate(0, 3px);
  }
  #mds-root .mds-booknav__back .mds-booknav__tip {
    left: auto;
    right: 0;
    transform: translate(0, 3px);
  }
  #mds-root .mds-booknav__home:hover .mds-booknav__tip,
  #mds-root .mds-booknav__home:focus-visible .mds-booknav__tip,
  #mds-root .mds-booknav__back:hover .mds-booknav__tip,
  #mds-root .mds-booknav__back:focus-visible .mds-booknav__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition-delay: 50ms;
  }

  #mds-root .mds-booknav__top {
    appearance: none;
    border: 1px solid rgba(238, 243, 248, 0.22);
    margin: 0;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: none;
    color: rgba(238, 243, 248, 0.75);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 200ms ease, border-color 200ms ease, box-shadow 240ms ease;
  }
  #mds-root .mds-booknav__top:hover {
    color: rgb(var(--gf-lit));
    border-color: rgba(var(--gf-lit), 0.6);
    box-shadow: 0 0 14px -4px rgba(var(--gf-lit), 0.5);
  }
  #mds-root .mds-booknav__top svg { display: block; }

  
  #mds-root .mds-booknav__cta {
    appearance: none;
    border: 0;
    margin: 0;
    flex: 0 0 auto;
    padding: 0 22px;
    height: 38px;
    border-radius: 999px;
    background: rgb(var(--gf-lit));
    color: #071019;
    font: 600 13px/38px var(--mds-font, inherit);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 240ms ease, box-shadow 240ms ease, background 400ms ease;
  }
  #mds-root .mds-booknav__cta:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 24px -6px rgba(var(--gf-lit), 0.6);
  }
  
  #mds-root .mds-booknav__cta.is-here {
    box-shadow: 0 0 0 2px rgba(var(--gf-lit), 0.4), 0 6px 24px -6px rgba(var(--gf-lit), 0.6);
  }
}




@media (max-width: 1199px) {

  
  
  #mds-root .mds-fov:not(.is-framed) .mds-fov__stage,
  #mds-root .mds-fov__stage {
    background: #10141a;
    border-radius: 0;          
  }

  
  #mds-root .mds-fov__stage,
  #mds-root .mds-pano__frame,
  #mds-root .mds-ceph__frame,
  #mds-root .mds-dose__frame,
  #mds-root .mds-ease__stage,
  #mds-root .mds-room__stage {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);      
    height: 33svh;
    max-height: 33svh;
    min-height: 33svh;
    border-radius: 0;
    aspect-ratio: auto;                    
  }
  
  #mds-root .mds-fov__stage img,
  #mds-root .mds-ceph__frame img,
  #mds-root .mds-dose__frame img,
  #mds-root .mds-pano__frame img {
    max-height: 33svh;
  }

  
  #mds-root .mds-fov__inner,
  #mds-root .mds-pano__inner,
  #mds-root .mds-ceph__inner,
  #mds-root .mds-dose__inner,
  #mds-root .mds-ease__inner,
  #mds-root .mds-room__inner {
    --mds-mob-rhythm: 28px;
  }

  
  #mds-root .mds-pano__inner > * + *,
  #mds-root .mds-ceph__inner > * + *,
  #mds-root .mds-dose__inner > * + * {
    margin-top: var(--mds-mob-rhythm);
  }

  
  #mds-root .mds-fov__inner,
  #mds-root .mds-pano__inner,
  #mds-root .mds-ceph__inner,
  #mds-root .mds-dose__inner,
  #mds-root .mds-ease__inner,
  #mds-root .mds-room__inner {
    row-gap: var(--mds-mob-rhythm);
  }

  
  #mds-root .mds-ease__side {
    margin-top: 0;
  }

  
  #mds-root .mds-dose__frame {
    position: static;
    
    width: auto;
    margin-inline: 0;      
    
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  
  #mds-root .mds-fov__stage,
  #mds-root .mds-pano__frame,
  #mds-root .mds-room__stage {
    top: 0;
  }

  
  #mds-root .mds-fov__split {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #10141a;
    border-radius: 0;
  }

  
  #mds-root .mds-ceph__frame,
  #mds-root .mds-dose__frame,
  #mds-root .mds-ease__stage {
    max-height: 33svh;
  }
  #mds-root .mds-ceph__frame img,
  #mds-root .mds-dose__frame img {
    max-height: 33svh;
    object-fit: contain;
  }
  #mds-root .mds-ease__stage canvas {
    max-height: 33svh;
  }
}




@media (max-width: 1199px) {

  
  #mds-root .mds-ai__stage {
    order: 0;
    margin-top: var(--mds-space-6);
    margin-bottom: 0;
  }

  
  #mds-root .mds-ai.is-mobile-cards .mds-ailist {
    display: none;
  }

  
  #mds-root .mds-ai.is-mobile-cards .mds-ai__side {
    margin-bottom: var(--mds-space-6);
  }
}




@media (max-width: 1199px) {

  
  #mds-root .mds-own.is-mobile-flow .mds-own__stage {
    display: none;
  }

  
  #mds-root .mds-own.is-mobile-flow .mds-rail {
    display: none;
  }

  
  #mds-root .mds-own.is-mobile-flow .mds-own__panel {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: var(--mds-space-5);
    align-content: start;
  }

  
  #mds-root .mds-own.is-mobile-flow .mds-step {
    opacity: 1;
    padding-bottom: var(--mds-space-6);
  }
}


@media (min-width: 1200px) {

  html.mds-slides.mds-embed,
  html.mds-slides.mds-embed body {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  html.mds-slides.mds-embed #mds-root {
    position: relative;
    inset: auto;
    height: 100vh;
    height: 100dvh;
    transform: translateZ(0);
  }

}