@charset "UTF-8";
/* 0_reset.scss */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-start: 0;
  margin-block-end: 0;
  font-weight: unset;
  line-height: 1;
}

ul,
ol,
nav,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  background: none;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

.hide {
  display: none;
}

button,
a {
  color: white;
  text-decoration: none;
}

li {
  list-style: none;
}

/* 1_colors.scss */
/* 1_media.scss */
/* 2_grid.scss */
:root {
  --vw: 1vw;
  --px: calc(var(--full-width) / 1680);
  --column-count: 12;
  --gutter: calc(var(--px) * 14);
  --margin: calc(var(--px) * 105);
  --max-width: 1680px;
  --full-width: calc(min(var(--max-width), 100 * var(--vw)));
  --column-width: calc((var(--full-width) - 2 * var(--margin) - (var(--column-count) - 1) * var(--gutter)) / var(--column-count));
  --component-gap: calc(var(--px) * 32);
}
@media (max-width: 666px) {
  :root {
    --px: calc(var(--full-width) / 320);
    --column-count: 1;
    --gutter: 0;
    --margin: calc(var(--px) * 24);
  }
}

@media (max-width: 666px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 667px) {
  .mobile-only {
    display: none !important;
  }
}

div.help-grid {
  z-index: 999999;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(var(--full-width) - var(--margin) * 2);
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) var(--column-width), rgba(255, 0, 0, 0) var(--column-width), rgba(255, 0, 0, 0) calc(var(--column-width) + var(--gutter)));
}

div.help-component {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100 * var(--vw));
  height: 100%;
  pointer-events: none;
  translate: -50% 0;
  background: rgba(255, 0, 0, 0.1);
  pointer-events: none;
}

/* 3_times.scss */
/* 4_font-face.scss */
@font-face {
  font-family: "pragmatica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/styles/designprosmotr-2025-1/fonts/pragmatica_book.woff2") format("woff2"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_book.woff") format("woff"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_book.ttf") format("truetype");
}
@font-face {
  font-family: "pragmatica";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/styles/designprosmotr-2025-1/fonts/pragmatica_medium.woff2") format("woff2"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_medium.woff") format("woff"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_medium.ttf") format("truetype");
}
@font-face {
  font-family: "pragmatica";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/styles/designprosmotr-2025-1/fonts/pragmatica_bold.woff2") format("woff2"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_bold.woff") format("woff"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_bold.ttf") format("truetype");
}
@font-face {
  font-family: "pragmatica_extended";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/styles/designprosmotr-2025-1/fonts/pragmatica_extended-medium.woff2") format("woff2"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_extended-medium.woff") format("woff"), url("/styles/designprosmotr-2025-1/fonts/pragmatica_extended-medium.ttf") format("truetype");
}
/* 5_fonts.scss */
body {
  font-family: "pragmatica";
}

p,
a,
label {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  p,
  a,
  label {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}

h2 {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(118 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  h2 {
    font-size: calc(35 * var(--px));
  }
}
h2 {
  text-transform: uppercase;
  text-align: center;
}

h3 {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  h3 {
    font-size: calc(24 * var(--px));
  }
}
h3 {
  text-transform: uppercase;
  text-align: center;
}

/* animations.scss */
@keyframes glitch-animation {
  0% {
    translate: 0 0;
  }
  20% {
    translate: calc(5 * var(--px)) calc(2 * var(--px));
  }
  40% {
    translate: calc(5 * var(--px)) calc(-2 * var(--px));
  }
  60% {
    translate: calc(-5 * var(--px)) calc(2 * var(--px));
  }
  80% {
    translate: calc(-5 * var(--px)) calc(-2 * var(--px));
  }
  100% {
    translate: 0 0;
  }
}
/* button.scss */
button {
  border: none;
}

a.button,
button.generic-button,
p.button {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  a.button,
  button.generic-button,
  p.button {
    font-size: calc(9 * var(--px));
  }
}
a.button,
button.generic-button,
p.button {
  display: block;
  background: #000000;
  color: white;
  padding: calc(16 * var(--px)) calc(56 * var(--px));
  border-radius: calc(131 * var(--px));
  text-transform: uppercase;
}
@media (max-width: 666px) {
  a.button,
  button.generic-button,
  p.button {
    padding: calc(10 * var(--px));
    border-radius: calc(56 * var(--px));
  }
}

a:hover,
a:hover *,
button:hover,
button:hover * {
  text-decoration: none !important;
}

/* city-toggles.scss */
ul.city-toggles {
  display: flex;
}
ul.city-toggles > li > button {
  height: calc(60 * var(--px));
  border-radius: calc(20 * var(--px));
  padding-inline: calc(32 * var(--px));
  color: #ffffff;
  transition: filter 0.3s ease-in-out;
}
ul.city-toggles > li > button:not(.current) {
  filter: saturate(0) contrast(0.2) brightness(1.6);
}
ul.city-toggles > li > button > span {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  ul.city-toggles > li > button > span {
    font-size: calc(24 * var(--px));
  }
}
ul.city-toggles > li > button > span {
  line-height: calc(60 * var(--px));
}
@media (max-width: 666px) {
  ul.city-toggles > li > button > span {
    line-height: calc(34 * var(--px));
  }
}
ul.city-toggles > li > button[data-id=msc] {
  background: linear-gradient(70deg, #FF497F 0%, #FC307D 34.13%, #D13EEA 100%);
}
ul.city-toggles > li > button[data-id=spb] {
  background: linear-gradient(-44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
ul.city-toggles > li > button[data-id=all] {
  background: linear-gradient(244deg, #B300FF 0%, #D883FF 100%);
}
@media (max-width: 666px) {
  ul.city-toggles > li > button {
    height: calc(22 * var(--px));
    padding-inline: calc(12 * var(--px));
    border-radius: calc(8 * var(--px));
  }
  ul.city-toggles > li > button > span {
    font-size: calc(18 * var(--px));
    line-height: calc(18 * var(--px));
  }
}
ul.city-toggles > li > button:not(.current):hover {
  color: #ececec;
}

/* cursor.scss */
*, :root {
  cursor: none !important;
}

div.cursor {
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
  width: calc(70 * var(--px));
  height: calc(80 * var(--px));
  background-image: url("/styles/designprosmotr-2026-2/images/cursor.png");
  background-size: cover;
}
@media (pointer: coarse) {
  div.cursor {
    display: none;
  }
}

/* form.scss */
form.ajax-form:not(.error):not(.success) div.sent {
  display: none;
}
form.ajax-form.error div.success {
  display: none;
}
form.ajax-form.success div.error {
  display: none;
}
form.ajax-form > div.form {
  position: relative;
}
form.ajax-form div.sent {
  margin-top: calc(8 * var(--px));
  width: fit-content;
}
form.ajax-form div.sent > div.result {
  position: relative;
  padding: 0 3em 2em 3em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  form.ajax-form div.sent {
    margin-bottom: calc(16 * var(--px));
  }
}
form.ajax-form ul.fields {
  margin-top: 0;
}
form.ajax-form ul.fields:hover .glitch-element {
  background-position: 100% 0;
}
form.ajax-form:not(.success) ul.fields:has(:not(button):focus) .glitch-element {
  background-image: linear-gradient(44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
form.ajax-form li.invalid > label {
  color: #ff2264;
}
form.ajax-form li.invalid > label > p {
  color: #ff2264;
}
form.ajax-form li.invalid > label::before {
  border-color: #ff2264 !important;
  outline-color: #ff2264 !important;
}
form.ajax-form li > label > p {
  transition: color 0.3s ease-in-out;
}
form.ajax-form li:has(> input[type=checkbox]) > label > p,
form.ajax-form label:has(> input[type=radio]) > label > p,
form.ajax-form fieldset > label > p {
  flex: 1;
}
form.ajax-form li:has(> input[type=checkbox]) > label > p,
form.ajax-form li:has(> input[type=checkbox]) > label > p > a,
form.ajax-form label:has(> input[type=radio]) > label > p,
form.ajax-form label:has(> input[type=radio]) > label > p > a,
form.ajax-form fieldset > label > p,
form.ajax-form fieldset > label > p > a {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(12 * var(--px));
  line-height: calc(12 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  form.ajax-form li:has(> input[type=checkbox]) > label > p,
  form.ajax-form li:has(> input[type=checkbox]) > label > p > a,
  form.ajax-form label:has(> input[type=radio]) > label > p,
  form.ajax-form label:has(> input[type=radio]) > label > p > a,
  form.ajax-form fieldset > label > p,
  form.ajax-form fieldset > label > p > a {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
form.ajax-form li:has(> input[type=checkbox]) > label,
form.ajax-form label:has(> input[type=radio]) > label,
form.ajax-form fieldset > label {
  position: static !important;
  margin: 0 !important;
  color: #000000;
  display: flex;
  align-items: center;
}
form.ajax-form li:has(> input[type=checkbox]) > label > a,
form.ajax-form label:has(> input[type=radio]) > label > a,
form.ajax-form fieldset > label > a {
  margin-left: 0.5ch;
}
form.ajax-form li:has(> input[type=checkbox]) > label > a,
form.ajax-form label:has(> input[type=radio]) > label > a,
form.ajax-form fieldset > label > a {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  form.ajax-form li:has(> input[type=checkbox]) > label > a,
  form.ajax-form label:has(> input[type=radio]) > label > a,
  form.ajax-form fieldset > label > a {
    font-size: calc(9 * var(--px));
  }
}
form.ajax-form li:has(> input[type=checkbox]) > label::before,
form.ajax-form label:has(> input[type=radio]) > label::before,
form.ajax-form fieldset > label::before {
  display: inline-block;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  margin-right: calc(20 * var(--px));
  border-radius: 100%;
  border: 1px solid #000000;
  content: "";
  transition: border 0.1s ease-in-out, background-color 0.1s ease-in-out, outline 0.1s ease-in-out;
}
@media (max-width: 666px) {
  form.ajax-form li:has(> input[type=checkbox]) > label::before,
  form.ajax-form label:has(> input[type=radio]) > label::before,
  form.ajax-form fieldset > label::before {
    margin-right: calc(8 * var(--px));
    width: calc(10 * var(--px));
    height: calc(10 * var(--px));
  }
}
form.ajax-form li:has(> input[type=checkbox]) > input,
form.ajax-form label:has(> input[type=radio]) > input,
form.ajax-form fieldset > input {
  display: none;
}
form.ajax-form li:has(> input[type=checkbox]) > label:has(input:checked)::before,
form.ajax-form li:has(> input[type=checkbox]) > input:checked + label::before,
form.ajax-form label:has(> input[type=radio]) > label:has(input:checked)::before,
form.ajax-form label:has(> input[type=radio]) > input:checked + label::before,
form.ajax-form fieldset > label:has(input:checked)::before,
form.ajax-form fieldset > input:checked + label::before {
  background: #000000;
  border: 1px solid #ffffff;
  outline: 1px solid #000000;
}
form.ajax-form a {
  text-decoration: underline;
  color: currentColor;
}

/* glass.scss */
/* glitch.scss */
.glitch-element {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  .glitch-element {
    font-size: calc(9 * var(--px));
  }
}
.glitch-element {
  display: block;
  position: relative;
  color: #000000;
  border-radius: calc(40 * var(--px));
  padding: 0 calc(60 * var(--px));
  line-height: calc(72 * var(--px));
  font-size: calc(18 * var(--px));
  text-align: center;
  text-transform: uppercase;
  background-image: linear-gradient(0.03turn, #FF497F 0%, #FF497F 50%, #FC307D 65%, #D13EEA 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-position 0.3s ease-in-out, filter 0.3s ease-in-out;
}
@media (max-width: 666px) {
  .glitch-element {
    font-size: calc(9 * var(--px));
    border-radius: calc(30 * var(--px));
  }
}
.glitch-element > span {
  display: block;
  position: relative;
  z-index: 1;
}
@media (max-width: 666px) {
  .glitch-element {
    padding: 0 calc(10 * var(--px));
    line-height: calc(30 * var(--px));
  }
}
.glitch-element:has([data-state=focus]), .glitch-element:hover {
  background-image: linear-gradient(44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
.glitch-element:has([data-state=success]) {
  background: #000000;
}
.glitch-element:has([data-state=error]) {
  background: #666666;
}
.glitch-element:has([data-state=invalid]) {
  background: #ff2264;
}

/* input.scss */
:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 0.25em;
}

.text-input {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  .text-input {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
.text-input {
  position: relative;
}
.text-input > label {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  .text-input > label {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
.text-input > label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  color: #000000;
  transition: top 0.3s ease-in-out, font-size 0.3s ease-in-out, color 0.3s ease-in-out;
}
.text-input > input {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  .text-input > input {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
.text-input > input {
  border: none;
  border-bottom: 1px solid #000000;
  padding: calc(0.75 * var(--px));
  color: #000000;
  width: calc(200 * var(--px));
  font-size: 0.8em;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.text-input > input:focus-visible {
  outline: none !important;
  border-bottom: 2px solid #000000;
  margin-bottom: -1px;
}
@media (max-width: 666px) {
  .text-input > input {
    width: 100%;
  }
}
.text-input:has(input:focus) > label, .text-input.not-empty > label {
  top: -1.5em;
  font-size: 0.75em;
  color: #000000;
}

input {
  border-radius: 0;
}

/* loader.scss */
@keyframes loader-offset {
  from {
    stroke-dashoffset: 882.6;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes loader-dash {
  from {
    stroke-dasharray: 0 882.6;
  }
  30%, 70% {
    stroke-dasharray: 160 722.6;
  }
  to {
    stroke-dasharray: 0 882.6;
  }
}
div.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 999999;
  transition: opacity 1s ease;
}
div.loader > svg {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
div.loader > svg .loader-path {
  animation: loader-offset 5s linear infinite, loader-dash 7s linear infinite, loader-color 3s linear infinite;
}
div.loader.finishing {
  opacity: 0;
}

/* share.scss */
menu.share {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  menu.share {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
menu.share {
  display: flex;
  flex-wrap: wrap;
  gap: calc(60 * var(--px));
}
@media (max-width: 666px) {
  menu.share {
    gap: calc(12 * var(--px));
    justify-content: space-between;
  }
}
menu.share svg {
  display: none;
}
menu.share > li > button {
  padding: 0;
}
menu.share > li > button > span {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  menu.share > li > button > span {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
menu.share > li > button > span {
  display: block;
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--px));
  color: #000000;
}

/* &.scss */
html {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
@media (max-width: 666px) {
  html:has(input[name=burger]:checked) {
    overflow-y: hidden;
  }
}

/* body/&.index.scss */
/* body/&.scss */
html > body {
  max-width: var(--max-width);
  margin: auto;
  background: #ececec;
  color: #000000;
  overflow-y: clip;
}
html > body > main > *,
html > body > header,
html > body > footer {
  padding: 0 var(--margin);
}
html > body > header,
html > body > main > * {
  padding-bottom: var(--component-gap);
}
@media (max-width: 1439px) {
  html > body {
    overflow-x: clip;
    overscroll-behavior-x: none;
  }
  html > body > main {
    overflow-x: clip;
    overscroll-behavior-x: none;
  }
}
html > body.ticket-143 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/143.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
html > body.ticket-144 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/144.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
html > body.ticket-145 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/145.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
html > body.ticket-146 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/146.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
html > body.ticket-147 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/147.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
html > body.ticket-148 {
  background-image: url("/content/designprosmotr-2026-2/background/desk/148.webp");
  background-size: calc(3420 * var(--px)) calc(12037 * var(--px));
  background-position: calc(-780 * var(--px)) calc(-400 * var(--px));
}
@media (max-width: 666px) {
  html > body.ticket-143 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/143.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-600 * var(--px)) calc(-250 * var(--px));
  }
  html > body.ticket-144 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/144.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-600 * var(--px)) calc(-250 * var(--px));
  }
  html > body.ticket-145 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/145.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-400 * var(--px)) calc(-250 * var(--px));
  }
  html > body.ticket-146 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/146.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-400 * var(--px)) calc(-250 * var(--px));
  }
  html > body.ticket-147 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/147.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-400 * var(--px)) calc(-250 * var(--px));
  }
  html > body.ticket-148 {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/148.webp");
    background-size: calc(1200 * var(--px)) calc(4630 * var(--px));
    background-position: calc(-400 * var(--px)) calc(-250 * var(--px));
  }
}

/* body/div.lines.scss */
/* body/footer/!div.files.scss */
html > body > footer div.files {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: calc(3 * var(--column-width) + 2 * var(--gutter));
  gap: calc(8 * var(--px));
}
html > body > footer div.files > p {
  line-height: 0.9 !important;
}
html > body > footer div.files > p > a {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(12 * var(--px));
  line-height: calc(12 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer div.files > p > a {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > footer div.files > p > a {
  text-decoration-line: underline;
  text-decoration-color: #9c9c9d;
  color: #5a5a5a;
}
@media (max-width: 666px) {
  html > body > footer div.files {
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
    margin-top: calc(24 * var(--px));
    align-items: start;
    gap: calc(6 * var(--px));
  }
  html > body > footer div.files > p > a {
    font-size: calc(6 * var(--px));
  }
}

/* body/footer/&.intensive.scss */
html > body > footer.intensive {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: calc(64 * var(--px));
}
html > body > footer.intensive > a {
  display: block;
  width: calc(384 * var(--px));
  height: calc(104 * var(--px));
}
html > body > footer.intensive > a > svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 666px) {
  html > body > footer.intensive > a {
    width: calc(118 * var(--px));
    height: calc(32 * var(--px));
  }
}
html > body > footer.intensive > button {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > footer.intensive > button {
    font-size: calc(24 * var(--px));
  }
}
html > body > footer.intensive > button {
  color: #000000;
  background: #9c9c9d;
  border-radius: calc(131 * var(--px));
  padding: calc(10 * var(--px)) calc(20 * var(--px)) calc(5 * var(--px));
}
@media (max-width: 666px) {
  html > body > footer.intensive > button {
    padding: calc(8 * var(--px)) calc(12 * var(--px)) calc(5 * var(--px));
  }
}

/* body/footer/&.scss */
html > body > footer {
  padding-top: calc(100 * var(--px));
  position: relative;
  display: grid;
  grid-template-columns: calc(5 * var(--column-width) + 4 * var(--gutter)) calc(6 * var(--column-width) + 5 * var(--gutter));
  gap: calc(64 * var(--px)) calc(var(--gutter) * 2 + var(--column-width));
}
@media (max-width: 666px) {
  html > body > footer {
    padding-top: calc(8 * var(--px));
    grid-template-columns: 1fr calc(74 * var(--px));
    gap: calc(20 * var(--px)) 0;
  }
  html > body > footer > div.form,
  html > body > footer > div.share {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

/* body/footer/div.creator.scss */
html > body > footer > div.creator {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 666px) {
  html > body > footer > div.creator {
    flex-direction: column;
  }
}
html > body > footer > div.creator > a {
  position: relative;
  display: block;
  width: calc(128 * var(--px));
  height: calc(128 * var(--px));
  padding: calc(16 * var(--px)) calc(24 * var(--px));
  background-color: #000000;
  transition: background-color 0.3s ease-in-out, height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
  text-decoration: none;
}
html > body > footer > div.creator > a > svg {
  width: 100%;
}
html > body > footer > div.creator > a > svg > path {
  fill: #ffffff;
  transition: fill 0.3s ease-in-out;
}
html > body > footer > div.creator > a > span {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer > div.creator > a > span {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > footer > div.creator > a > span {
  display: block;
  margin-top: calc(4 * var(--px));
  text-align: center;
  text-transform: lowercase;
  line-height: 1.1;
  color: #000000;
  transition: color 0.3s ease-in-out, margin 0.3s ease-in-out;
}
html > body > footer > div.creator > a:hover {
  background-color: #ccff00;
  height: calc(160 * var(--px));
  margin-top: calc(-32 * var(--px));
}
html > body > footer > div.creator > a:hover > span {
  color: #000000;
  margin-top: calc(16 * var(--px));
}
html > body > footer > div.creator > a:hover > svg > path {
  fill: #000000;
}
@media (max-width: 666px) {
  html > body > footer > div.creator > a:hover {
    height: calc(100 * var(--px));
    margin-top: calc(-26 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > footer > div.creator > a {
    width: calc(74 * var(--px));
    height: calc(74 * var(--px));
    padding: calc(12 * var(--px));
  }
}

/* body/footer/div.form.scss */
html > body > footer > div.form > form {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
}
html > body > footer > div.form > form h2 {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer > div.form > form h2 {
    font-size: calc(18 * var(--px));
  }
}
html > body > footer > div.form > form h2 {
  text-align: left;
  text-transform: none;
}
html > body > footer > div.form > form > a.glitch-element {
  width: 70%;
}
html > body > footer > div.form > form > a.glitch-element:not(:hover) {
  filter: saturate(0) brightness(1.1);
}
@media (max-width: 666px) {
  html > body > footer > div.form > form > a.glitch-element {
    width: 100%;
  }
}
html > body > footer > div.form > form.on > ul.fields > li.text-input.not-empty.invalid:has(input:not(:focus)) > input,
html > body > footer > div.form > form.on > ul.fields > li.text-input.not-empty.invalid:has(input:not(:focus)) > label {
  color: #ff2264;
}
html > body > footer > div.form > form.on > ul.fields > li.text-input.not-empty.invalid:has(input:not(:focus)) > input {
  border-bottom-color: #ff2264;
}
html > body > footer > div.form > form > ul.fields {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--px));
}
html > body > footer > div.form > form > ul.fields > li {
  text-transform: none;
}
html > body > footer > div.form > form > ul.fields > li > label {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer > div.form > form > ul.fields > li > label {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > footer > div.form > form > ul.fields > li:has(input:focus) > label, html > body > footer > div.form > form > ul.fields > li.not-empty > label {
  font-size: 0.75em;
}
html > body > footer > div.form > form > ul.fields > li.desktop-only > button {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  translate: 0 calc(-4 * var(--px));
  padding: 0;
  background: linear-gradient(70deg, #FF497F 0%, #FC307D 34.13%, #D13EEA 100%);
  mask-image: url("/styles/designprosmotr-2026-2/images/arrow-bottom-left.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
html > body > footer > div.form > form > ul.fields > li.desktop-only > button:hover {
  background: linear-gradient(44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
html > body > footer > div.form > form > ul.fields > li.desktop-only > button:active {
  background: #000000;
}
html > body > footer > div.form > form > ul.fields > li.desktop-only > a {
  display: flex;
  gap: calc(12 * var(--px));
  line-height: calc(18.25 * var(--px));
}
html > body > footer > div.form > form > ul.fields > li.desktop-only > a > svg {
  width: calc(30.83 * var(--px));
  height: calc(18.25 * var(--px));
}
html > body > footer > div.form > form > ul.fields > li:has([type=checkbox]) {
  width: 100%;
}
@media (max-width: 666px) {
  html > body > footer > div.form > form > ul.fields {
    flex-direction: column;
    gap: calc(10 * var(--px));
  }
  html > body > footer > div.form > form > ul.fields button {
    width: 100%;
  }
}
@media (max-width: 666px) {
  html > body > footer > div.form > form {
    gap: calc(16 * var(--px));
  }
}
@media (min-width: 667px) {
  html > body > footer > div.form > form.sent:not(.invalid) ul.fields {
    display: none !important;
  }
}
@media (max-width: 666px) {
  html > body > footer > div.form h2 {
    font-size: calc(9 * var(--px));
    line-height: calc(11.6 * var(--px));
  }
}

/* body/footer/div.share.scss */
html > body > footer > div.share > h2 {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > footer > div.share > h2 {
    font-size: calc(24 * var(--px));
  }
}
html > body > footer > div.share > h2 {
  margin-bottom: calc(40 * var(--px));
  text-align: left;
}
@media (max-width: 666px) {
  html > body > footer > div.share > h2 {
    margin-bottom: calc(10 * var(--px));
  }
}
html > body > footer > div.share > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer > div.share > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > footer > div.share > p {
  margin-bottom: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > footer > div.share > p {
    margin-bottom: calc(12 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > footer > div.share {
    margin-top: calc(20 * var(--px));
    margin-bottom: calc(40 * var(--px));
  }
  html > body > footer > div.share > menu > li > button > span {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}

/* body/header/&.finished.scss */
html > body > header.finished > div::after {
  content: none !important;
}

/* body/header/&.scss */
html > body > header {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: var(--full-width);
  margin-bottom: 0;
  z-index: 10000;
}
@media (max-width: 667px) {
  html > body > header {
    position: fixed;
  }
  html > body > header:has(input[name=burger]:checked) > div {
    translate: 0 0;
  }
}
html > body > header:not(:has(> div)) > a {
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
}
@media (max-width: 667px) {
  html > body > header:not(:has(> div)) > a {
    width: calc(24 * var(--px));
    height: calc(24 * var(--px));
  }
}

/* body/header/a.scss */
html > body > header > a {
  position: absolute;
  display: block;
  width: calc(32 * var(--px)) !important;
  height: calc(32 * var(--px)) !important;
  top: calc(40 * var(--px));
  left: calc(40 * var(--px));
  background: url("/styles/images/designprosmotr-2026-2/favicon_black.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 667px) {
  html > body > header > a {
    width: calc(24 * var(--px));
    height: calc(24 * var(--px));
    top: calc(26 * var(--px));
    left: calc(24 * var(--px));
  }
}

/* body/header/label.scss */
html > body > header > label {
  position: absolute;
  background-image: url("/styles/images/burger.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
@media (min-width: 667px) {
  html > body > header > label {
    display: none;
  }
}
@media (max-width: 667px) {
  html > body > header > label {
    left: var(--margin) !important;
  }
}
html > body > header > label > input {
  display: none;
}
html > body > header > label:has(input:checked) {
  background-image: url("/styles/images/designprosmotr-2026-2/close_fancy.svg");
  filter: brightness(0);
}
@media (min-width: 667px) {
  html > body > header > label {
    top: calc(32 * var(--px));
    left: calc(32 * var(--px));
    width: calc(36 * var(--px));
    height: calc(36 * var(--px));
  }
}
@media (max-width: 667px) {
  html > body > header > label {
    top: calc(40 * var(--px));
    left: calc(24 * var(--px));
    width: calc(18 * var(--px));
    height: calc(18 * var(--px));
  }
  html > body > header > label:has(input:checked) {
    width: calc(32 * var(--px));
    height: calc(32 * var(--px));
  }
}
html > body > header > label::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 48px;
  height: 48px;
  translate: -50% -50%;
  content: "";
}

/* body/main/&.scss */
html > body > main > section {
  scroll-margin-top: calc(200 * var(--px));
}
html > body > main > section:has(+ section.footer-intensive) {
  padding-bottom: 0;
  margin-bottom: 0;
}
/* body/main/h2.subtitle.scss */
html > body > main > h2.subtitle {
  margin-top: calc(100 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > h2.subtitle {
    font-family: "pragmatica_extended";
    font-weight: 500;
    font-size: calc(79 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > h2.subtitle {
    font-size: calc(35 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > h2.subtitle {
    margin-top: calc(40 * var(--px));
  }
}

/* body/footer/div.contacts/&.scss */
html > body > footer > div.contacts > a {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > footer > div.contacts > a {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > footer > div.contacts > a {
  display: block;
  color: #000000;
  text-decoration: none;
}
@media (max-width: 666px) {
  html > body > footer > div.contacts > a {
    font-size: calc(12 * var(--px));
  }
}

/* body/header/div/&.scss */
html > body > header > div > a {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > header > div > a {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > header > div > a {
  display: block;
  border-radius: calc(64 * var(--px));
  padding: calc(14 * var(--px)) 0;
  background: #000000;
  color: #ffffff;
  writing-mode: sideways-lr;
  text-transform: uppercase;
  font-size: calc(16 * var(--px));
  font-weight: 500;
  width: calc(30 * var(--px));
  line-height: calc(31 * var(--px));
}
@media (max-width: 667px) {
  html > body > header > div > a {
    display: none;
  }
}
html > body > header > div > a:hover {
  color: #c23fff;
}
@media (min-width: 667px) {
  html > body > header > div {
    position: absolute;
    top: calc(40 * var(--px));
    right: calc(40 * var(--px));
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html > body > header > div > *:not(:last-child) {
    position: relative;
  }
  html > body > header > div > *:not(:last-child)::after {
    position: relative;
    left: calc(50% - 1 * var(--px));
    display: block;
    background: #000000;
    width: 2px;
    height: 36vh;
    margin-bottom: calc(16 * var(--px));
    content: "";
  }
  html > body > header > div::after {
    position: relative;
    display: block;
    background: #000000;
    width: 2px;
    height: calc(1200 * var(--px));
    margin-block: calc(16 * var(--px));
    content: "";
  }
}
@media (max-width: 667px) {
  html > body > header > div {
    position: absolute;
    top: -1px;
    left: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: calc(100svw + 2px);
    height: 125svh;
    padding-bottom: 30svh;
    background: #ececec;
    translate: 0 -100%;
  }
}

/* body/header/div/ul.anchors.scss */
html > body > header > div > ul.anchors {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--px));
  align-items: center;
  margin-block: 5%;
}
@media (max-width: 666px) {
  html > body > header > div > ul.anchors {
    margin-block: 10%;
  }
}
html > body > header > div > ul.anchors > li > a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  font-size: calc(16 * var(--px));
  font-weight: 500;
  text-transform: uppercase;
  color: #000000;
}
@media (min-width: 667px) {
  html > body > header > div > ul.anchors {
    display: none;
  }
}
@media (min-width: 667px) {
  html > body > header > div > ul.anchors {
    gap: calc(80 * var(--px));
  }
  html > body > header > div > ul.anchors > li > a {
    font-size: calc(32 * var(--px));
  }
}

/* body/header/div/ul.social.scss */
html > body > header > div > ul.social {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--px));
}
html > body > header > div > ul.social > li {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
}
@media (max-width: 666px) {
  html > body > header > div > ul.social > li {
    width: calc(40 * var(--px));
    height: calc(40 * var(--px));
  }
}
html > body > header > div > ul.social > li > a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
html > body > header > div > ul.social > li > a > svg {
  width: 100%;
  height: 100%;
}
html > body > header > div > ul.social > li > a > svg > defs > linearGradient > stop {
  transition: stop-color 0.3s ease-in-out;
}
html > body > header > div > ul.social > li > a > svg > path {
  transform-origin: center;
  scale: 0.95;
}
html > body > header > div > ul.social > li.vk, html > body > header > div > ul.social > li.telegram, html > body > header > div > ul.social > li.instagram {
  padding: 2px;
}
html > body > header > div > ul.social > li:not(:hover) > a > svg > defs > linearGradient > stop {
  stop-color: #000000;
}
html > body > header > div > ul.social > li:not(.instagram) {
  position: relative;
}
html > body > header > div > ul.social > li:not(.instagram)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  width: 80%;
  height: 50%;
  border-radius: 100%;
  transition: background-color 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
  content: "";
}
html > body > header > div > ul.social > li:not(.instagram):hover::after {
  background-color: white;
}
@media (max-width: 667px) {
  html > body > header > div > ul.social {
    position: static;
    flex-direction: row;
    gap: calc(28 * var(--px));
  }
}

/* body/header/nav/&.scss */
html > body > header > nav {
  position: absolute;
  top: calc(40 * var(--px));
  left: calc(40 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  gap: calc(12 * var(--px));
}
@media (max-width: 667px) {
  html > body > header > nav {
    display: none;
  }
}

/* body/header/nav/a.scss */
html > body > header > nav > a {
  display: block;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  background: url("/styles/images/designprosmotr-2026-2/favicon_black.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 667px) {
  html > body > header > nav > a {
    display: none;
  }
}

/* body/header/nav/ul.scss */
html > body > header > nav > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html > body > header > nav > ul > li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html > body > header > nav > ul > li > a {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > header > nav > ul > li > a {
    font-size: calc(9 * var(--px));
  }
}
html > body > header > nav > ul > li > a {
  display: block;
  color: #000000;
  border-radius: calc(64 * var(--px));
  padding: calc(14 * var(--px)) 0;
  writing-mode: sideways-lr;
  text-transform: uppercase;
  transition: color 0.3s ease-in-out;
}
html > body > header > nav > ul > li > a:hover {
  color: #c23fff;
}
html > body > header > nav > ul > li:not(:last-child)::after, html > body > header > nav > ul > li:first-child::before {
  position: relative;
  display: block;
  translate: calc(-2 * var(--px)) 0;
  background: #000000;
  width: 2px;
  height: calc(16 * var(--px));
  content: "";
}
html > body > header > nav > ul::after {
  position: relative;
  display: block;
  background: #000000;
  width: 2px;
  height: 100vh;
  content: "";
}

/* body/main/blockquote/&.scss */
html > body > main > blockquote {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > blockquote {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > blockquote {
  color: #000000;
  text-align: center;
  padding-block: calc(50 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > blockquote {
    margin-inline: calc(24 * var(--px));
    padding-inline: 0;
    text-align: left;
    padding-block: calc(33 * var(--px));
  }
}

/* body/main/form.subscribe/&.scss */
html > body > main > form.subscribe {
  display: grid;
  gap: var(--gutter);
  margin-top: calc(-20 * var(--px));
  margin-bottom: calc(100 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > form.subscribe {
    grid-template-columns: 1fr;
    margin-bottom: calc(28 * var(--px));
    margin-top: calc(-30 * var(--px));
  }
}
html > body > main > form.subscribe h2 {
  filter: none;
}

/* body/main/section.buy-form-button/&.onlive.scss */
html > body > main > section.buy-form-button.onlive > div:nth-child(1) {
  justify-content: unset !important;
}
html > body > main > section.buy-form-button.onlive > div:nth-child(1)::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/content/designprosmotr-2025-1/ticket/onlive.svg");
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: 150% 50%;
  content: "";
}
html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main {
  align-items: start;
  margin-left: calc(20 * var(--px));
  padding-top: calc(40 * var(--px));
  padding-bottom: calc(20 * var(--px));
  height: 100%;
}
html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main > .description {
  text-align: left;
}
html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main > .address {
  margin-top: auto;
}
@media (min-width: 667px) {
  html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main > .title {
    margin-top: calc(50 * var(--px));
    font-size: calc(80 * var(--px));
  }
  html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main > .description {
    text-align: left;
    font-size: calc(24 * var(--px));
    line-height: 1;
  }
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main {
    margin-left: calc(9 * var(--px));
    padding-top: calc(20 * var(--px));
    padding-bottom: calc(10 * var(--px));
    gap: calc(4 * var(--px));
  }
  html > body > main > section.buy-form-button.onlive > div:nth-child(1) > p.main > .title {
    margin-top: calc(15 * var(--px));
  }
}
html > body > main > section.buy-form-button.onlive .copyright {
  display: none !important;
}

/* body/main/section.buy-form-button/&.scss */
html > body > main > section.buy-form-button {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}
html > body > main > section.buy-form-button > div {
  border-radius: calc(14 * var(--px));
  color: #ffffff;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div {
    border-radius: calc(8 * var(--px));
  }
}
@media (min-width: 667px) {
  html > body > main > section.buy-form-button {
    margin-top: calc(120 * var(--px));
    margin-bottom: calc(150 * var(--px));
    height: calc(362 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button {
    flex-direction: column;
  }
}
html > body > main > section.buy-form-button.spb > div:nth-child(1) {
  background: linear-gradient(-44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
html > body > main > section.buy-form-button.msc > div:nth-child(1) {
  background: linear-gradient(70deg, #FF497F 0%, #FC307D 34.13%, #D13EEA 100%);
}

/* body/main/section.buy-form-button/div:nth-child(1).scss */
html > body > main > section.buy-form-button > div:nth-child(1) {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
@media (min-width: 667px) {
  html > body > main > section.buy-form-button > div:nth-child(1) {
    width: calc(851 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) {
    height: calc(168 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.type {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.type {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.type {
  position: absolute;
  top: calc(20 * var(--px));
  left: calc(20 * var(--px));
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.type {
    top: calc(10 * var(--px));
    left: calc(10 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.city {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(16 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.city {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.city {
  position: absolute;
  padding: calc(3 * var(--px)) calc(6 * var(--px)) calc(1 * var(--px));
  background: #dcddde;
  border-radius: calc(100 * var(--px));
  text-transform: uppercase;
  top: calc(20 * var(--px));
  right: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.city {
    top: calc(10 * var(--px));
    right: calc(10 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--px));
  height: 100%;
  padding: calc(20 * var(--px));
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.date {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.date {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.date {
  font-weight: 500;
  text-transform: uppercase;
  margin-top: auto;
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.title {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.title {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.title {
  text-align: center;
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.description {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.description {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.description {
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}
html > body > main > section.buy-form-button > div:nth-child(1) > p.main > span.address {
  margin-top: auto;
}
html > body > main > section.buy-form-button > div:nth-child(1) > span.copyright {
  display: block;
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  position: absolute;
  bottom: calc(20 * var(--px));
  left: calc(20 * var(--px));
  background-size: contain;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(1) > span.copyright {
    width: calc(17 * var(--px));
    height: calc(17 * var(--px));
    bottom: calc(9 * var(--px));
    left: calc(9 * var(--px));
  }
}

/* body/main/section.buy-form-button/div:nth-child(2).scss */
html > body > main > section.buy-form-button > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  color: #000000;
  border-left: dashed 2px #000000;
}
@media (min-width: 667px) {
  html > body > main > section.buy-form-button > div:nth-child(2) {
    width: calc(371 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) {
    border-left: none;
    border-top: dashed 2px #000000;
    height: calc(129 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(2) > a {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) > a {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(2) > a {
  padding: calc(15 * var(--px)) calc(56 * var(--px));
  border-radius: calc(28 * var(--px));
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) > a {
    padding: calc(12 * var(--px)) calc(36 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(2) > ul {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) > ul {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(2) > ul {
  margin-top: calc(24 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--px));
}
html > body > main > section.buy-form-button > div:nth-child(2) > ul > li {
  text-align: center;
}
html > body > main > section.buy-form-button > div:nth-child(2) > ul > li:not(.current) {
  color: #9c9c9d;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) > ul {
    margin-top: calc(12 * var(--px));
  }
}
html > body > main > section.buy-form-button > div:nth-child(2) > p.footnote {
  position: absolute;
  bottom: calc(20 * var(--px));
  color: #9c9c9d;
}
html > body > main > section.buy-form-button > div:nth-child(2) > p.footnote {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(12 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.buy-form-button > div:nth-child(2) > p.footnote {
    font-size: calc(6 * var(--px));
  }
}

/* body/main/section.footer-intensive/&.scss */
html > body > main > section.footer-intensive {
  position: relative;
  padding: 0;
}
html > body > main > section.footer-intensive > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
html > body > main > section.footer-intensive picture,
html > body > main > section.footer-intensive picture * {
  display: block;
  width: 100%;
  height: 100%;
}
html > body > main > section.footer-intensive > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* body/main/section.header-intensive/&.scss */
html > body > main > section.header-intensive {
  position: relative;
}

/* body/main/section.header-intensive/div.date.scss */
html > body > main > section.header-intensive > div.date {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.date {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.header-intensive > div.date {
  position: absolute;
  top: calc(52 * var(--px));
  right: calc(105 * var(--px));
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.date {
    top: calc(24 * var(--px));
    right: calc(24 * var(--px));
  }
}

/* body/main/section.header-intensive/div.main.scss */
html > body > main > section.header-intensive > div.main {
  padding-top: calc(460 * var(--px));
  max-width: calc(1050 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
}
html > body > main > section.header-intensive > div.main > h1 {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
  max-width: calc(600 * var(--px));
  text-transform: uppercase;
}
html > body > main > section.header-intensive > div.main > h1 > span.type {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main > h1 > span.type {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main > h1 > span.type[data-onlive=yes] {
  margin-top: calc(24 * var(--px));
}
html > body > main > section.header-intensive > div.main > h1 > span.title {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(79 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main > h1 > span.title {
    font-size: calc(35 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main > h1 > span.title {
    font-size: calc(30 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main > p.text {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main > p.text {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main > p.text {
  text-transform: uppercase;
  max-width: calc(450 * var(--px));
}
html > body > main > section.header-intensive > div.main > p.sub-text {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main > p.sub-text {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main > p.sub-text {
  margin-top: calc(12 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main {
    padding-top: calc(490 * var(--px));
    gap: calc(6 * var(--px));
  }
  html > body > main > section.header-intensive > div.main > h1 {
    gap: calc(6 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main[data-ticket="145"], html > body > main > section.header-intensive > div.main[data-ticket="146"] {
  max-width: calc(800 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main[data-ticket="145"], html > body > main > section.header-intensive > div.main[data-ticket="146"] {
    padding-top: calc(530 * var(--px));
  }
}
html > body > main > section.header-intensive > div.main[data-ticket="147"], html > body > main > section.header-intensive > div.main[data-ticket="148"] {
  max-width: calc(950 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.main[data-ticket="147"], html > body > main > section.header-intensive > div.main[data-ticket="148"] {
    padding-top: calc(550 * var(--px));
  }
}

/* body/main/section.location/&.scss */
html > body > main > section.location {
  margin-top: calc(160 * var(--px));
}
html > body > main > section.location > div.title {
  position: relative;
  z-index: 1;
  color: #000000;
}
html > body > main > section.location > div.title > h2 {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(79 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.location > div.title > h2 {
    font-size: calc(35 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.location > div.title > h2 {
    font-family: "pragmatica";
    font-weight: 500;
    font-size: calc(52 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.location > div.title > h2 {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.location > div.title > ul.city-toggles {
  position: absolute;
  left: 50%;
  translate: -50% calc(40 * var(--px));
  display: flex;
}
@media (max-width: 666px) {
  html > body > main > section.location > div.title {
    color: #000000;
  }
}
@media (max-width: 666px) {
  html > body > main > section.location {
    margin-top: calc(40 * var(--px));
  }
}

/* body/main/section.location/div#location-map.scss */
html > body > main > section.location > div#location-map {
  height: calc(680 * var(--px));
  width: 100vw;
  margin-left: calc(-0.5 * (100vw - 100%));
  margin-top: calc(-130 * var(--px));
}
html > body > main > section.location > div#location-map .ymaps-2-1-79-ground-pane {
  filter: grayscale(1);
}
html > body > main > section.location > div#location-map div.map-pin {
  height: 100%;
}
html > body > main > section.location > div#location-map img.map-marker {
  width: 100%;
  height: 100%;
}
@media (max-width: 666px) {
  html > body > main > section.location > div#location-map {
    height: calc(300 * var(--px));
    margin-left: calc(-1 * var(--margin));
    margin-top: calc(16 * var(--px));
  }
}

/* body/main/section.map-intensive/&.scss */
html > body > main > section.map-intensive {
  margin-top: calc(160 * var(--px));
}
html > body > main > section.map-intensive > div.title > h2 {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.map-intensive > div.title > h2 {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.map-intensive > div.title {
  position: relative;
  z-index: 1;
}
@media (max-width: 666px) {
  html > body > main > section.map-intensive {
    margin-top: calc(80 * var(--px));
  }
}

/* body/main/section.map-intensive/div.map.scss */
html > body > main > section.map-intensive > div.map {
  height: calc(680 * var(--px));
  width: 100vw;
  margin-left: calc(-0.5 * (100vw - 100%));
  margin-top: calc(-110 * var(--px));
}
html > body > main > section.map-intensive > div.map .ymaps-2-1-79-ground-pane {
  filter: grayscale(1);
}
html > body > main > section.map-intensive > div.map div.map-pin {
  height: 100%;
}
html > body > main > section.map-intensive > div.map img.map-marker {
  width: 100%;
  height: 100%;
}
@media (max-width: 666px) {
  html > body > main > section.map-intensive > div.map {
    margin-top: calc(-48 * var(--px));
    height: calc(200 * var(--px));
  }
}

/* body/main/section.numbers/&.scss */
html > body > main > section.numbers {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: calc(80 * var(--px));
  justify-content: center;
  padding: 0 calc(200 * var(--px));
}
html > body > main > section.numbers > li > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--px));
}
html > body > main > section.numbers > li > p > span.digit {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(210 * var(--px));
  line-height: calc(168 * var(--px));
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > section.numbers > li > p > span.digit {
    font-size: calc(71 * var(--px));
    line-height: 0.9;
  }
}
html > body > main > section.numbers > li > p > span.legend {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.numbers > li > p > span.legend {
    font-size: calc(24 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.numbers > li > p {
    gap: calc(6 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.numbers {
    margin-top: calc(40 * var(--px));
    padding: 0;
    gap: calc(36 * var(--px)) calc(48 * var(--px));
  }
}
html > body > main > section.numbers::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(1959 * var(--px));
  height: calc(1023 * var(--px));
  top: calc(-230 * var(--px));
  left: calc(-120 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/numbers.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 666px) {
  html > body > main > section.numbers::before {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/numbers.webp");
    width: calc(639 * var(--px));
    height: calc(607 * var(--px));
    top: calc(-128 * var(--px));
    left: calc(-120 * var(--px));
  }
}

/* body/main/section.partners/&.scss */
html > body > main > section.partners {
  margin-top: calc(100 * var(--px));
}
html > body > main > section.partners > div.content {
  margin-top: calc(60 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--px));
}
html > body > main > section.partners > div.content > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(60 * var(--px));
}
html > body > main > section.partners > div.content > ul > li {
  transition: scale 0.3s ease-in-out;
}
html > body > main > section.partners > div.content > ul > li > a {
  display: block;
}
html > body > main > section.partners > div.content > ul > li:hover {
  scale: 1.2;
}
html > body > main > section.partners > div.content > ul:nth-child(1) > li > a > img {
  height: calc(126 * var(--px));
}
html > body > main > section.partners > div.content > ul:nth-child(2) > li > a > img {
  height: calc(63 * var(--px));
}
html > body > main > section.partners > div.content > ul:nth-child(3) > li > a > img {
  height: calc(63 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.partners > div.content > ul {
    gap: calc(20 * var(--px));
  }
  html > body > main > section.partners > div.content > ul:nth-child(1) > li > a > img {
    height: calc(43 * var(--px));
  }
  html > body > main > section.partners > div.content > ul:nth-child(2) > li > a > img {
    height: calc(22 * var(--px));
  }
  html > body > main > section.partners > div.content > ul:nth-child(3) > li > a > img {
    height: calc(25 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.partners > div.content {
    margin-top: calc(20 * var(--px));
    gap: calc(20 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.partners {
    margin-top: calc(50 * var(--px));
  }
  html > body > main > section.partners > h2 {
    margin-left: calc(-6 * var(--px));
  }
}

/* body/main/section.quote/&.scss */
html > body > main > section.quote {
  position: relative;
  height: calc(1020 * var(--px));
  margin-top: calc(180 * var(--px));
}
html > body > main > section.quote > p {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.quote > p {
    font-size: calc(24 * var(--px));
    line-height: 0.9;
  }
}
html > body > main > section.quote > p {
  position: relative;
  z-index: 20;
  text-align: center;
  width: 100%;
}
@media (max-width: 666px) {
  html > body > main > section.quote > p {
    padding-top: calc(0 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.quote {
    height: calc(600 * var(--px));
    margin-top: calc(0 * var(--px));
  }
}
html > body > main > section.quote::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(2020 * var(--px));
  height: calc(1920 * var(--px));
  top: calc(-380 * var(--px));
  left: calc(-140 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/quote.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 666px) {
  html > body > main > section.quote::before {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/quote.webp");
    width: calc(581 * var(--px));
    height: calc(934 * var(--px));
    top: calc(-112 * var(--px));
    left: calc(-120 * var(--px));
  }
}

/* body/main/section.reviews/&.scss */
html > body > main > section.reviews {
  position: relative;
  height: calc(1600 * var(--px));
  margin-top: calc(80 * var(--px));
  padding-top: calc(60 * var(--px));
}
html > body > main > section.reviews > h2 {
  margin-bottom: calc(50 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.reviews {
    margin-top: calc(20 * var(--px));
    height: calc(800 * var(--px));
    padding-top: calc(40 * var(--px));
    padding-inline: calc(24 * var(--px));
    padding-bottom: calc(1 * var(--px));
  }
  html > body > main > section.reviews > h2 {
    margin-bottom: calc(20 * var(--px));
  }
  html > body > main > section.reviews:not(:has(input:checked)) blockquote:not(:first-child):not(:nth-child(2)) {
    display: none;
  }
  html > body > main > section.reviews:not(:has(input:checked)) img.photo3,
  html > body > main > section.reviews:not(:has(input:checked)) img.photo1 {
    display: none;
  }
  html > body > main > section.reviews:has(input:checked) {
    height: calc(1450 * var(--px));
  }
}
html > body > main > section.reviews::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(2638 * var(--px));
  height: calc(2688 * var(--px));
  top: calc(-800 * var(--px));
  left: calc(-220 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/reviews.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 666px) {
  html > body > main > section.reviews::before {
    width: calc(774 * var(--px));
    height: calc(1143 * var(--px));
    top: calc(-100 * var(--px));
    left: calc(-180 * var(--px));
    background-image: url("/content/designprosmotr-2026-2/background/mobile/reviews.webp");
  }
}

/* body/main/section.reviews/aside.scss */
html > body > main > section.reviews > aside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (max-width: 666px) {
  html > body > main > section.reviews > aside {
    height: 150%;
    overflow: hidden;
  }
}
html > body > main > section.reviews > aside > img {
  position: absolute;
  max-width: unset;
}
html > body > main > section.reviews > aside > img.icon {
  top: calc(206 * var(--px));
  left: calc(105 * var(--px));
  width: calc(75 * var(--px));
  height: calc(56 * var(--px));
  z-index: 1;
}
html > body > main > section.reviews > aside > img.photo1 {
  top: calc(200 * var(--px));
  left: calc(761 * var(--px));
  width: calc(955 * var(--px));
  height: calc(470 * var(--px));
  z-index: 1;
}
html > body > main > section.reviews > aside > img.photo2 {
  top: calc(511 * var(--px));
  left: calc(-127 * var(--px));
  width: calc(857 * var(--px));
  height: calc(620 * var(--px));
  z-index: 3;
}
html > body > main > section.reviews > aside > img.photo3 {
  top: calc(980 * var(--px));
  left: calc(761 * var(--px));
  width: calc(972 * var(--px));
  height: calc(624 * var(--px));
  z-index: 4;
}
@media (max-width: 666px) {
  html > body > main > section.reviews > aside > img.icon {
    top: calc(95 * var(--px));
    left: calc(23 * var(--px));
    width: calc(45 * var(--px));
    height: calc(22 * var(--px));
    z-index: 1;
  }
  html > body > main > section.reviews > aside > img.photo1 {
    top: calc(713 * var(--px));
    left: calc(24 * var(--px));
    width: calc(346 * var(--px));
    height: calc(228 * var(--px));
    z-index: 1;
  }
  html > body > main > section.reviews > aside > img.photo2 {
    top: calc(239 * var(--px));
    left: calc(-67 * var(--px));
    width: calc(363 * var(--px));
    height: calc(271 * var(--px));
    z-index: 3;
  }
  html > body > main > section.reviews > aside > img.photo3 {
    top: calc(1120 * var(--px));
    left: calc(-47 * var(--px));
    width: calc(410 * var(--px));
    height: calc(320 * var(--px));
    z-index: 4;
  }
}

/* body/main/section.reviews/div.scss */
html > body > main > section.reviews > div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
html > body > main > section.reviews > div > blockquote {
  position: absolute;
  margin: 0;
  width: calc(728 * var(--px));
}
html > body > main > section.reviews > div > blockquote:nth-child(1) {
  top: calc(300 * var(--px));
  left: calc(105 * var(--px));
  width: calc(613 * var(--px));
  height: calc(336 * var(--px));
}
html > body > main > section.reviews > div > blockquote:nth-child(2) {
  top: calc(700 * var(--px));
  left: calc(761 * var(--px));
  width: calc(813 * var(--px));
  height: calc(231 * var(--px));
}
html > body > main > section.reviews > div > blockquote:nth-child(3) {
  top: calc(1162 * var(--px));
  left: calc(105 * var(--px));
  width: calc(618 * var(--px));
  height: calc(252 * var(--px));
}
html > body > main > section.reviews > div > blockquote > cite {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.reviews > div > blockquote > cite {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.reviews > div > blockquote > cite {
  display: block;
}
html > body > main > section.reviews > div > blockquote > cite,
html > body > main > section.reviews > div > blockquote > cite > span {
  margin-bottom: calc(16 * var(--px));
  font-style: normal !important;
  text-transform: uppercase;
}
html > body > main > section.reviews > div > blockquote > cite > a {
  color: currentColor;
}
html > body > main > section.reviews > div > blockquote > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.reviews > div > blockquote > p {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.reviews > div > blockquote > p {
  margin: 0 !important;
}
@media (max-width: 666px) {
  html > body > main > section.reviews > div > blockquote {
    left: calc(24 * var(--px)) !important;
    width: calc(272 * var(--px)) !important;
    height: calc(174 * var(--px)) !important;
  }
  html > body > main > section.reviews > div > blockquote:nth-child(1) {
    top: calc(142 * var(--px)) !important;
  }
  html > body > main > section.reviews > div > blockquote:nth-child(2) {
    top: calc(535 * var(--px)) !important;
  }
  html > body > main > section.reviews > div > blockquote:nth-child(3) {
    top: calc(963 * var(--px)) !important;
  }
}

/* body/main/section.reviews/label.scss */
@media (min-width: 667px) {
  html > body > main > section.reviews > label {
    display: none !important;
  }
}
html > body > main > section.reviews > label:has(input:checked) {
  display: none;
}
html > body > main > section.reviews > label > input {
  display: none;
}
html > body > main > section.reviews > label {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: calc(20 * var(--px));
  left: 50%;
  translate: -50%;
}
html > body > main > section.reviews > label > p {
  background: #9c9c9d;
  padding: calc(10 * var(--px)) calc(24 * var(--px));
  border-radius: calc(8 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.reviews > label > p {
    font-size: calc(18 * var(--px));
    white-space: nowrap;
    color: #ffffff;
    font-weight: 500;
  }
}

/* body/main/section.speakers/&.scss */
html > body > main > section.speakers {
  margin-top: calc(80 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--px));
  position: relative;
}
html > body > main > section.speakers > p.info {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > p.info {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > section.speakers > p.info {
  color: #9c9c9d;
}
html > body > main > section.speakers > button {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > button {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.speakers > button {
  background: #9c9c9d;
  color: #ffffff;
  width: calc(120 * var(--px));
  border-radius: calc(8 * var(--px));
  font-size: calc(18 * var(--px));
  line-height: calc(22 * var(--px));
  text-align: center;
  white-space: nowrap;
}
html > body > main > section.speakers > button.hidden {
  display: none;
}
@media (max-width: 666px) {
  html > body > main > section.speakers {
    gap: calc(20 * var(--px));
    margin-top: calc(120 * var(--px));
  }
}
html > body > main > section.speakers::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(1155 * var(--px));
  height: calc(1164 * var(--px));
  bottom: calc(-350 * var(--px));
  right: calc(-120 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/speakers.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 666px) {
  html > body > main > section.speakers::before {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/speakers.webp");
    width: calc(451 * var(--px));
    height: calc(453 * var(--px));
    top: calc(350 * var(--px));
    right: calc(-120 * var(--px));
  }
}

/* body/main/section.speakers/ul.city-toggles.scss */
/* body/main/section.speakers/ul.speakers.scss */
html > body > main > section.speakers > ul.speakers {
  display: grid;
  grid-template-columns: calc(357 * var(--px)) calc(357 * var(--px)) calc(357 * var(--px)) calc(357 * var(--px));
  gap: calc(60 * var(--px)) calc(14 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers {
    grid-template-columns: calc(132 * var(--px)) calc(132 * var(--px));
    gap: calc(8 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure {
    gap: calc(6 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > h3 {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption > h3 {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > h3 {
  text-transform: none;
  text-align: left;
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.name {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.name {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.name {
    font-family: "pragmatica";
    font-weight: 400;
    font-size: calc(18 * var(--px));
    line-height: calc(18 * var(--px));
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.name {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.job {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.job {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.job {
  color: #9c9c9d;
}
html > body > main > section.speakers > ul.speakers > li > figure > figcaption > p.job > a {
  color: #9c9c9d;
  text-decoration: underline;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li > figure > figcaption {
    gap: calc(6 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li div.photo {
  position: relative;
}
html > body > main > section.speakers > ul.speakers > li div.photo::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(20 * var(--px));
  backdrop-filter: blur(calc(44 * var(--px)));
  background-size: contain;
  mask-size: contain;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li div.photo::before {
    border-radius: calc(4 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li div.photo > img {
  display: block;
  aspect-ratio: 1;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers > li div.photo > img {
    border-radius: calc(4 * var(--px));
  }
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+1) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/1-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/1.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+2) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/2-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/2.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+3) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/3-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/3.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+4) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/4-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/4.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+5) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/5-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/5.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+6) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/6-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/6.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+7) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/7-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/7.svg");
}
html > body > main > section.speakers > ul.speakers > li:nth-child(8n+8) div.photo::before {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/8-opacity.svg");
  mask-image: url("/styles/images/designprosmotr-2025-1/speakers/8.svg");
}
html > body > main > section.speakers > ul.speakers > li.more {
  background-image: url("/styles/images/designprosmotr-2026-2/speakers/more.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  aspect-ratio: 1;
}
html > body > main > section.speakers > ul.speakers > li.more > p {
  margin-top: 65%;
  width: 50%;
  text-align: center;
}
@media (max-width: 666px) {
  html > body > main > section.speakers > ul.speakers:not(.all) > li:nth-child(n+5) {
    display: none;
  }
}

/* body/main/section.text-with-image/&.left.scss */
html > body > main > section.text-with-image.left > article > img.large {
  top: calc(-111 * var(--px));
  left: calc(706 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image.left > article > img.large {
    translate: calc(var(--offset) * var(--px));
  }
}
html > body > main > section.text-with-image.left > article > div {
  padding-inline: calc(105 * var(--px)) calc(29 * var(--px));
}

/* body/main/section.text-with-image/&.right.scss */
html > body > main > section.text-with-image.right > article {
  justify-content: end;
}
html > body > main > section.text-with-image.right > article > img.large {
  top: calc(-111 * var(--px));
  left: calc(-80 * var(--px));
}
html > body > main > section.text-with-image.right > article > div {
  padding-inline: calc(29 * var(--px)) calc(105 * var(--px));
}
html > body > main > section.text-with-image.right > article[data-img=icon] {
  padding-inline: 0;
  width: calc(678 * var(--px));
  align-self: end;
}

/* body/main/section.text-with-image/&.scss */
html > body > main > section.text-with-image {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  margin: 0;
}
html > body > main > section.text-with-image h3 {
  text-align: left;
}

/* body/main/section.text-with-image/article.scss */
html > body > main > section.text-with-image > article {
  display: flex;
  position: relative;
}
html > body > main > section.text-with-image > article[data-img=img] {
  height: calc(675 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article[data-img=img] {
    height: unset;
    flex-direction: column;
  }
  html > body > main > section.text-with-image > article[data-img=img] > div {
    padding-top: calc(15 * var(--px));
  }
}
html > body > main > section.text-with-image > article[data-img=icon] {
  height: calc(49 * var(--px));
  padding-inline: var(--margin);
  align-items: center;
}
@media (min-width: 667px) {
  html > body > main > section.text-with-image > article[data-img=icon] {
    margin-top: calc(-50 * var(--px));
    translate: 0 calc(-100 * var(--px));
  }
}
html > body > main > section.text-with-image > article[data-img=icon] > div {
  padding-inline: 0;
  text-transform: uppercase;
}
html > body > main > section.text-with-image > article[data-img=icon] > div {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article[data-img=icon] > div {
    font-size: calc(9 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article[data-img=icon] > div {
    padding-inline: calc(8 * var(--px)) 0 !important;
  }
}
html > body > main > section.text-with-image > article[data-img=icon] > img.icon {
  margin-right: calc(20 * var(--px));
  height: calc(43 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article[data-img=icon] > img.icon {
    height: calc(18 * var(--px));
    margin-right: calc(8 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article[data-img=icon] {
    height: calc(30 * var(--px));
  }
}
html > body > main > section.text-with-image > article:not([data-img]) {
  height: calc(197 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article:not([data-img]) {
    height: calc(56 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article {
    grid-template-columns: 1fr;
  }
}
html > body > main > section.text-with-image > article > div {
  width: calc(704 * var(--px));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(20 * var(--px));
}
html > body > main > section.text-with-image > article > div > h3 {
  text-align: left;
}
html > body > main > section.text-with-image > article > div > time {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article > div > time {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.text-with-image > article > div > time {
  color: #000000;
}
html > body > main > section.text-with-image > article > div > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article > div > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article > div {
    gap: calc(6 * var(--px));
    width: 100%;
    padding-inline: var(--margin) !important;
  }
}
html > body > main > section.text-with-image > article > img.large {
  display: block;
  position: absolute;
  top: calc(-111 * var(--px));
  left: calc(706 * var(--px));
  width: calc(1054 * var(--px));
  height: calc(896 * var(--px));
  object-fit: cover;
}
@media (max-width: 666px) {
  html > body > main > section.text-with-image > article > img.large {
    position: static;
    width: calc(450 * var(--px));
    height: calc(383 * var(--px));
  }
}

/* body/main/section.tickets/&.scss */
html > body > main > section.tickets {
  position: relative;
  margin-top: calc(120 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.tickets {
    margin-top: calc(60 * var(--px));
  }
}
html > body > main > section.tickets > div.title > p {
  margin-top: calc(40 * var(--px));
  text-align: center;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > div.title > p {
    margin-top: calc(20 * var(--px));
  }
}
html > body > main > section.tickets::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(2131 * var(--px));
  height: calc(2073 * var(--px));
  top: calc(150 * var(--px));
  left: calc(-120 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/tickets.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 1023px) {
  html > body > main > section.tickets::before {
    content: none;
  }
}

/* body/main/section.timer/&.scss */
html > body > main > section.timer > h2 {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.timer > h2 {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > section.timer > h2 {
  text-transform: none !important;
  text-align: start;
  position: relative;
  z-index: 1002;
  overflow: hidden;
}
html > body > main > section.timer {
  position: relative;
  height: calc(460 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timer {
    height: calc(160 * var(--px));
  }
}
html > body > main > section.timer::before {
  display: block;
  width: 100%;
  height: 110%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ececec;
  content: "";
  pointer-events: none;
  border-radius: calc(60 * var(--px)) calc(60 * var(--px)) 0 0;
  transform: skewY(5deg) translateY(calc(-80 * var(--px)));
  z-index: 10;
}
@media (max-width: 666px) {
  html > body > main > section.timer::before {
    transform: skewY(5deg) translateY(calc(-40 * var(--px)));
    border-radius: calc(20 * var(--px)) calc(20 * var(--px)) 0 0;
  }
}

/* body/main/section.timetable/&.scss */
html > body > main > section.timetable {
  margin-top: calc(10 * var(--px));
  position: relative;
  scroll-margin-top: calc(-700 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timetable {
    margin-top: calc(70 * var(--px));
  }
}
html > body > main > section.timetable > h2 {
  margin-top: calc(50 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timetable > h2 {
    margin-top: calc(20 * var(--px));
  }
  html > body > main > section.timetable > h2 {
    font-family: "pragmatica_extended";
    font-weight: 500;
    font-size: calc(79 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.timetable > h2 {
    font-size: calc(35 * var(--px));
  }
}
html > body > main > section.timetable::before {
  position: absolute;
  display: block;
  z-index: -1;
  width: calc(1931 * var(--px));
  height: calc(1567 * var(--px));
  top: calc(100 * var(--px));
  left: calc(-120 * var(--px));
  background-image: url("/content/designprosmotr-2026-2/background/desk/timetable.webp");
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 666px) {
  html > body > main > section.timetable::before {
    background-image: url("/content/designprosmotr-2026-2/background/mobile/timetable.webp");
    width: calc(728 * var(--px));
    height: calc(874 * var(--px));
    top: calc(-50 * var(--px));
    left: calc(-300 * var(--px));
  }
}

/* body/main/section.timetable/div.program.scss */
html > body > main > section.timetable > div.program {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program {
    grid-template-columns: 1fr;
    gap: calc(48 * var(--px));
  }
}
html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(118 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
    font-size: calc(35 * var(--px));
  }
}
html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
  font-size: calc(79 * var(--px));
  text-align: start;
  margin-bottom: calc(40 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
    margin-bottom: calc(20 * var(--px));
  }
  html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
    font-family: "pragmatica";
    font-weight: 500;
    font-size: calc(52 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > h3 {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--px));
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li {
  display: grid;
  grid-template-columns: calc(248 * var(--px)) 1fr;
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li p,
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li span {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > ul > li p,
  html > body > main > section.timetable > div.program > div.day-wrapper > ul > li span {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li blockquote {
  margin: 0;
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  margin-top: calc(20 * var(--px));
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > span,
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > a {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > span,
  html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > a {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > span.title,
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > a.title {
  color: #9c9c9d;
}
html > body > main > section.timetable > div.program > div.day-wrapper > ul > li cite > a {
  color: #9c9c9d;
  text-decoration: underline;
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > ul > li {
    grid-template-columns: calc(110 * var(--px)) 1fr;
  }
}
@media (max-width: 666px) {
  html > body > main > section.timetable > div.program > div.day-wrapper > ul {
    gap: calc(20 * var(--px));
  }
}
html > body > main > section.timetable > div.program:not(.current) {
  display: none;
}

/* body/main/section.timetable/ul.city-toggles.scss */
html > body > main > section.timetable > ul.city-toggles {
  justify-content: center;
  margin-block: calc(40 * var(--px)) calc(60 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timetable > ul.city-toggles {
    margin-block: calc(20 * var(--px));
  }
}

/* body/main/form.subscribe/div.form/&.scss */
html > body > main > form.subscribe > div.form {
  display: grid;
  grid-template-columns: calc(7 * var(--column-width) + 6 * var(--gutter)) calc(4 * var(--column-width) + 3 * var(--gutter));
  gap: calc((var(--column-width)) + var(--gutter) * 2);
  margin-top: calc(50 * var(--px));
  align-items: start;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form {
    margin-top: calc(20 * var(--px));
    grid-template-columns: 1fr;
    gap: calc(24 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > hgroup > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > hgroup > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > hgroup > p {
  margin-top: calc(20 * var(--px));
  margin-bottom: 0;
  color: #5a5a5a;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > hgroup > p {
    margin-top: calc(12 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > hgroup > h2 {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(39 * var(--px));
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > hgroup > h2 {
    font-size: calc(18 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > hgroup > h2 {
  text-transform: none;
  text-align: start;
}
html > body > main > form.subscribe > div.form > div > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > div > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > div > p {
  color: #dcddde;
  margin-bottom: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > div > p {
    font-family: "pragmatica";
    font-weight: 400;
    font-size: calc(18 * var(--px));
    line-height: calc(18 * var(--px));
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > form.subscribe > div.form > div > p {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > form.subscribe > div.form > ul.fields {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: calc(16 * var(--px));
  margin-top: 0;
}
html > body > main > form.subscribe > div.form > ul.fields > li > input {
  width: 100%;
}
html > body > main > form.subscribe > div.form > ul.fields > li > button {
  width: 100%;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.form > ul.fields {
    gap: calc(10 * var(--px));
  }
}

/* body/main/form.subscribe/div.preorder/&.scss */
html > body > main > form.subscribe > div.preorder {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder {
    gap: calc(10 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > p {
  position: relative;
  margin-bottom: calc(8 * var(--px));
  max-width: calc(5 * var(--column-width) + 4 * var(--gutter));
  z-index: 1;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > p {
    max-width: 90%;
    font-size: calc(12 * var(--px));
    line-height: calc(14 * var(--px));
  }
}

/* body/main/form.subscribe/div.preorder/div.counter.scss */
html > body > main > form.subscribe > div.preorder > div.counter {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(210 * var(--px));
  line-height: calc(168 * var(--px));
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter {
    font-size: calc(71 * var(--px));
    line-height: 0.9;
  }
}
html > body > main > form.subscribe > div.preorder > div.counter {
  display: flex;
  gap: calc(8 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter {
    gap: calc(4 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > div.counter > p {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(210 * var(--px));
  line-height: calc(168 * var(--px));
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p {
    font-size: calc(71 * var(--px));
    line-height: 0.9;
  }
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p {
    font-family: "pragmatica_extended";
    font-weight: 500;
    font-size: calc(79 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p {
    font-size: calc(35 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > div.counter > p {
  display: flex;
  flex-direction: column;
}
html > body > main > form.subscribe > div.preorder > div.counter > p span.number {
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html > body > main > form.subscribe > div.preorder > div.counter > p.slash {
  font-size: 0.9em;
  line-height: 0.7;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p.slash {
    translate: 0 calc(0 * var(--px));
    font-size: calc(35 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > div.counter > p.limit > span.tip {
  background: #000000;
  color: #ececec;
}
html > body > main > form.subscribe > div.preorder > div.counter > p.limit > span.number {
  margin-left: -0.2ch;
}
html > body > main > form.subscribe > div.preorder > div.counter > p.count > span.tip {
  background: #000000;
  color: #ececec;
}
html > body > main > form.subscribe > div.preorder > div.counter > p > span.tip {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p > span.tip {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > form.subscribe > div.preorder > div.counter > p > span.tip {
  width: fit-content;
  line-height: calc(26 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > form.subscribe > div.preorder > div.counter > p > span.tip {
    padding: 0 calc(4 * var(--px));
    line-height: calc(15 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="preorder"]/&.scss */
html > body > main > section.cover[data-mode=preorder] {
  position: relative;
  padding: 0;
  height: calc(780 * var(--px));
  pointer-events: none;
  background: #ececec;
}
html > body > main > section.cover[data-mode=preorder] + * {
  position: relative;
  z-index: 1;
}
html > body > main > section.cover[data-mode=preorder]::after {
  position: absolute;
  top: calc(650 * var(--px));
  left: 0;
  display: block;
  width: 100%;
  height: calc(500 * var(--px));
  background: #000000;
  z-index: 0;
  transform: skewY(5deg);
  border-radius: calc(40 * var(--px));
  content: "";
}
@media (max-width: 1023px) {
  html > body > main > section.cover[data-mode=preorder] {
    height: calc(740 * var(--px));
  }
  html > body > main > section.cover[data-mode=preorder]::after {
    top: calc(650 * var(--px));
    border-radius: calc(18 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=preorder] {
    height: calc(430 * var(--px));
  }
  html > body > main > section.cover[data-mode=preorder]::after {
    top: calc(380 * var(--px));
    border-radius: calc(18 * var(--px));
  }
}
html > body > main > section.cover[data-mode=preorder] img {
  max-width: unset;
}

/* body/main/section.cover/&[data-mode="sale"]/&.scss */
html > body > main > section.cover[data-mode=sale] {
  position: relative;
  padding: 0;
  height: calc(980 * var(--px));
  pointer-events: none;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] {
    height: calc(614 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="sale"]/article.scss */
html > body > main > section.cover[data-mode=sale] > article {
  position: absolute;
  top: calc(664 * var(--px));
  left: calc(904 * var(--px));
  width: calc(539 * var(--px));
  height: calc(200 * var(--px));
  pointer-events: all;
}
html > body > main > section.cover[data-mode=sale] > article > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > article > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > section.cover[data-mode=sale] > article > p {
  margin-bottom: calc(20 * var(--px));
}
html > body > main > section.cover[data-mode=sale] > article > a {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > article > a {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.cover[data-mode=sale] > article > a {
  display: block;
  margin-top: calc(20 * var(--px));
  padding: 0;
  border-radius: calc(14 * var(--px));
  line-height: calc(28 * var(--px));
  text-align: center;
  background: #000000;
  color: #ffffff;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > article {
    top: calc(490 * var(--px));
    left: calc(24 * var(--px));
    width: calc(272 * var(--px));
    height: calc(165 * var(--px));
    padding: calc(0 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="timer"]/&.scss */
html > body > main > section.cover[data-mode=timer] {
  position: relative;
  padding: 0;
  height: calc(710 * var(--px));
  pointer-events: none;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] {
    height: calc(430 * var(--px));
  }
}
html > body > main > section.cover[data-mode=timer] img {
  max-width: none;
}

/* body/main/section.cover/&[data-mode="timer"]/article.scss */
html > body > main > section.cover[data-mode=timer] > article {
  position: absolute;
  top: calc(664 * var(--px));
  left: calc(904 * var(--px));
  width: calc(539 * var(--px));
  height: calc(200 * var(--px));
  pointer-events: all;
}
html > body > main > section.cover[data-mode=timer] > article > p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > article > p {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > section.cover[data-mode=timer] > article > p {
  margin-bottom: calc(20 * var(--px));
}
html > body > main > section.cover[data-mode=timer] > article > a {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > article > a {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.cover[data-mode=timer] > article > a {
  display: block;
  margin-top: calc(20 * var(--px));
  padding: 0;
  border-radius: calc(14 * var(--px));
  line-height: calc(28 * var(--px));
  text-align: center;
  background: #000000;
  color: #ffffff;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > article {
    top: calc(490 * var(--px));
    left: calc(24 * var(--px));
    width: calc(272 * var(--px));
    height: calc(165 * var(--px));
    padding: calc(0 * var(--px));
  }
}

/* body/main/section.cover/div.background/&.scss */
html > body > main > section.cover > div.background {
  height: 120%;
}
html > body > main > section.cover > div.background > span {
  display: block;
  width: 100%;
}

/* body/main/section.cover/div.background/span.dates.scss */
html > body > main > section.cover > div.background > span.dates > p {
  position: absolute;
  font-family: "pragmatica";
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: white;
  pointer-events: all;
  z-index: 100;
}
html > body > main > section.cover > div.background > span.dates > p.spb {
  left: calc(1414 * var(--px));
  top: calc(40 * var(--px));
}
html > body > main > section.cover > div.background > span.dates > p.msk {
  left: calc(1192 * var(--px));
  top: calc(40 * var(--px));
}
html > body > main > section.cover > div.background > span.dates > p,
html > body > main > section.cover > div.background > span.dates > p > a {
  transition: translate 0.3s ease-in-out;
  color: #000000;
  font-weight: 500;
}
html > body > main > section.cover > div.background > span.dates > p:hover,
html > body > main > section.cover > div.background > span.dates > p > a:hover {
  translate: -2em 0;
}
@media (max-width: 666px) {
  html > body > main > section.cover > div.background > span.dates > p,
  html > body > main > section.cover > div.background > span.dates > p > a {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.cover > div.background > span.dates > p.spb {
    left: calc(215 * var(--px));
    top: calc(40 * var(--px));
  }
  html > body > main > section.cover > div.background > span.dates > p.msk {
    left: calc(94 * var(--px));
    top: calc(40 * var(--px));
  }
}

/* body/main/section.header-intensive/div.images/&.scss */
html > body > main > section.header-intensive > div.images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: calc(1000 * var(--px));
  pointer-events: none;
  z-index: -1;
}
html > body > main > section.header-intensive > div.images > img {
  position: absolute;
  max-width: unset;
}
html > body > main > section.header-intensive > div.images > img.logo {
  left: calc(105 * var(--px));
  top: calc(45 * var(--px));
  width: calc(566 * var(--px));
  height: calc(353 * var(--px));
  z-index: 10;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images > img.logo {
    left: calc(24 * var(--px));
    top: calc(50 * var(--px));
    width: calc(287 * var(--px));
    height: calc(75 * var(--px));
    z-index: 10;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='143'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="143"] > img {
  left: calc(90 * var(--px));
  top: calc(25 * var(--px));
  width: calc(1561 * var(--px));
  height: calc(828 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="143"] > img {
    left: calc(-25 * var(--px));
    top: calc(77 * var(--px));
    width: calc(431 * var(--px));
    height: calc(396 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='144'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="144"] > img {
  left: calc(90 * var(--px));
  top: calc(25 * var(--px));
  width: calc(1561 * var(--px));
  height: calc(828 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="144"] > img {
    left: calc(-25 * var(--px));
    top: calc(77 * var(--px));
    width: calc(431 * var(--px));
    height: calc(396 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='145'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="145"] > img {
  left: calc(90 * var(--px));
  top: calc(25 * var(--px));
  width: calc(1630 * var(--px));
  height: calc(811 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="145"] > img {
    left: calc(7 * var(--px));
    top: calc(77 * var(--px));
    width: calc(401 * var(--px));
    height: calc(477 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='146'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="146"] > img {
  left: calc(90 * var(--px));
  top: calc(25 * var(--px));
  width: calc(1630 * var(--px));
  height: calc(811 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="146"] > img {
    left: calc(7 * var(--px));
    top: calc(77 * var(--px));
    width: calc(401 * var(--px));
    height: calc(477 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='147'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="147"] > img {
  left: calc(90 * var(--px));
  top: calc(-160 * var(--px));
  width: calc(1726 * var(--px));
  height: calc(1106 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="147"] > img {
    left: calc(-27 * var(--px));
    top: calc(77 * var(--px));
    width: calc(466 * var(--px));
    height: calc(472 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.images/&[data-ticket='148'].scss */
html > body > main > section.header-intensive > div.images[data-ticket="148"] > img {
  left: calc(90 * var(--px));
  top: calc(-160 * var(--px));
  width: calc(1726 * var(--px));
  height: calc(1106 * var(--px));
  z-index: 2;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.images[data-ticket="148"] > img {
    left: calc(-27 * var(--px));
    top: calc(77 * var(--px));
    width: calc(466 * var(--px));
    height: calc(472 * var(--px));
    z-index: 5;
  }
}

/* body/main/section.header-intensive/div.video/&.scss */
html > body > main > section.header-intensive > div.video {
  position: relative;
  height: calc(1100 * var(--px));
  margin: calc(75 * var(--px)) auto 0;
}
html > body > main > section.header-intensive > div.video > img {
  position: absolute;
  max-width: unset;
  width: calc(1767 * var(--px));
  left: calc(-150 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > img {
    width: calc(397 * var(--px));
    height: calc(246 * var(--px));
    top: calc(-20 * var(--px));
    left: calc(-50 * var(--px));
  }
}
html > body > main > section.header-intensive > div.video:has(.playing) {
  height: calc(800 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video:has(.playing) {
    height: calc(153 * var(--px));
  }
}
html > body > main > section.header-intensive > div.video:has(.playing) > button.play,
html > body > main > section.header-intensive > div.video:has(.playing) > img {
  visibility: hidden;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video {
    width: calc(272 * var(--px));
    height: calc(153 * var(--px));
    margin-top: calc(40 * var(--px));
  }
}

/* body/main/section.header-intensive/div.video/button.play.scss */
html > body > main > section.header-intensive > div.video > button.play {
  position: absolute;
  top: calc(540 * var(--px));
  left: calc(727 * var(--px));
  width: calc(70 * var(--px));
  height: calc(70 * var(--px));
  border-radius: calc(35 * var(--px));
  padding: 0;
  background-color: #ffe100;
  background-image: url("/styles/images/designprosmotr-2026-2/play.svg");
  background-position: 55% center;
  background-repeat: no-repeat;
  background-size: calc(28 * var(--px)) calc(28.33 * var(--px));
  pointer-events: all;
  overflow: hidden;
  transition: width 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
html > body > main > section.header-intensive > div.video > button.play > span {
  display: block;
  font-family: "pragmatica";
  font-size: calc(52 * var(--px));
  font-weight: 500;
  line-height: calc(75 * var(--px));
  translate: calc(-200 * var(--px)) 0;
  color: #000000;
  transition: visibility 0.3s ease-in-out, translate 0.3s ease-in-out;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > button.play > span {
    font-size: calc(30 * var(--px));
    translate: calc(-114 * var(--px)) 0;
    line-height: calc(48 * var(--px));
  }
}
html > body > main > section.header-intensive > div.video > button.play:not(:hover) > span {
  visibility: hidden;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > button.play {
    top: calc(66 * var(--px));
    left: calc(125 * var(--px));
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    background-size: calc(8 * var(--px)) calc(8 * var(--px));
  }
}

/* body/main/section.header-intensive/div.video/div.video-wrapper.scss */
html > body > main > section.header-intensive > div.video > div.video-wrapper > video {
  width: 100%;
  height: 100%;
  border-radius: calc(40 * var(--px));
  pointer-events: all;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > div.video-wrapper > video {
    border-radius: calc(8 * var(--px));
  }
}
html > body > main > section.header-intensive > div.video > div.video-wrapper > button.close {
  position: absolute;
  top: calc(20 * var(--px));
  right: calc(20 * var(--px));
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  pointer-events: all;
  background-image: url("/styles/images/designprosmotr-2025-1/close_fancy.svg");
  background-size: contain;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
html > body > main > section.header-intensive > div.video > div.video-wrapper > button.close:hover {
  filter: brightness(1.2);
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > div.video-wrapper > button.close {
    top: calc(16 * var(--px));
    right: calc(10 * var(--px));
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
  }
}
html > body > main > section.header-intensive > div.video > div.video-wrapper:not(.playing) > video,
html > body > main > section.header-intensive > div.video > div.video-wrapper:not(.playing) > button.close {
  visibility: hidden;
  opacity: 0;
}
@media (max-width: 666px) {
  html > body > main > section.header-intensive > div.video > div.video-wrapper {
    width: calc(272 * var(--px));
    height: calc(153 * var(--px));
    top: calc(160 * var(--px));
    left: 0;
  }
}

/* body/main/section.quote/aside/&.desktop-only.scss */
html > body > main > section.quote > aside.desktop-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
html > body > main > section.quote > aside.desktop-only > img {
  position: absolute;
}
html > body > main > section.quote > aside.desktop-only > img.photo1 {
  top: calc(232 * var(--px));
  left: calc(105 * var(--px));
  width: calc(850 * var(--px));
  height: calc(589 * var(--px));
  z-index: 1;
}
html > body > main > section.quote > aside.desktop-only > img.photo2 {
  top: calc(494 * var(--px));
  left: calc(770 * var(--px));
  width: calc(434 * var(--px));
  height: calc(434 * var(--px));
  z-index: 5;
}
html > body > main > section.quote > aside.desktop-only > img.photo3 {
  top: calc(382 * var(--px));
  left: calc(1094 * var(--px));
  width: calc(481 * var(--px));
  height: calc(372 * var(--px));
  z-index: 3;
}
html > body > main > section.quote > aside.desktop-only > img.symbols {
  top: calc(264 * var(--px));
  left: calc(1095 * var(--px));
  width: calc(144 * var(--px));
  height: calc(44 * var(--px));
  z-index: 7;
}
html > body > main > section.quote > aside.desktop-only > img.globe {
  top: calc(850 * var(--px));
  left: calc(615 * var(--px));
  width: calc(73 * var(--px));
  height: calc(39 * var(--px));
  z-index: 8;
}
html > body > main > section.quote > aside.desktop-only > img.japanese {
  top: calc(794 * var(--px));
  left: calc(1345 * var(--px));
  width: calc(73 * var(--px));
  height: calc(30 * var(--px));
  z-index: 10;
}
html > body > main > section.quote > aside.desktop-only > img.purple {
  top: calc(498 * var(--px));
  left: calc(-28 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 10;
}
html > body > main > section.quote > aside.desktop-only > img.blue {
  top: calc(265 * var(--px));
  left: calc(1382 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 8;
}
html > body > main > section.quote > aside.desktop-only > img.glass {
  top: calc(437 * var(--px));
  left: calc(1465 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 11;
}
html > body > main > section.quote > aside.desktop-only > img.pixels3 {
  top: calc(0 * var(--px));
  left: calc(857 * var(--px));
  width: calc(824 * var(--px));
  height: calc(494 * var(--px));
  z-index: 1;
}
@media (max-width: 666px) {
  html > body > main > section.quote > aside.desktop-only > img.photo1 {
    top: calc(143 * var(--px));
    left: calc(-18 * var(--px));
    width: calc(144 * var(--px));
    height: calc(106 * var(--px));
    z-index: 1;
  }
  html > body > main > section.quote > aside.desktop-only > img.photo2 {
    top: calc(215 * var(--px));
    left: calc(30 * var(--px));
    width: calc(207 * var(--px));
    height: calc(137 * var(--px));
    z-index: 10;
  }
  html > body > main > section.quote > aside.desktop-only > img.photo3 {
    top: calc(296 * var(--px));
    left: calc(88 * var(--px));
    width: calc(198 * var(--px));
    height: calc(131 * var(--px));
    z-index: 11;
  }
  html > body > main > section.quote > aside.desktop-only > img.symbols {
    top: calc(188 * var(--px));
    left: calc(185 * var(--px));
    width: calc(131 * var(--px));
    height: calc(131 * var(--px));
    z-index: 11;
  }
  html > body > main > section.quote > aside.desktop-only > img.dp {
    top: calc(146 * var(--px));
    left: calc(253 * var(--px));
    width: calc(131 * var(--px));
    height: calc(131 * var(--px));
    z-index: 12;
  }
  html > body > main > section.quote > aside.desktop-only > img.mind {
    top: calc(204 * var(--px));
    left: calc(38 * var(--px));
    width: calc(25 * var(--px));
    height: calc(38 * var(--px));
    z-index: 10;
  }
  html > body > main > section.quote > aside.desktop-only > img.hash {
    top: calc(360 * var(--px));
    left: calc(54 * var(--px));
    width: calc(28 * var(--px));
    height: calc(32 * var(--px));
    z-index: 15;
  }
  html > body > main > section.quote > aside.desktop-only > img.pixels1 {
    top: calc(300 * var(--px));
    left: calc(4 * var(--px));
    width: calc(105 * var(--px));
    height: calc(83 * var(--px));
    z-index: 11;
  }
  html > body > main > section.quote > aside.desktop-only > img.pixels2 {
    top: calc(166 * var(--px));
    left: calc(16 * var(--px));
    width: calc(170 * var(--px));
    height: calc(113 * var(--px));
    z-index: 9;
  }
  html > body > main > section.quote > aside.desktop-only > img.pixels3 {
    top: calc(71 * var(--px));
    left: calc(73 * var(--px));
    width: calc(238 * var(--px));
    height: calc(143 * var(--px));
    z-index: 8;
  }
}

/* body/main/section.quote/aside/&.mobile-only.scss */
html > body > main > section.quote > aside.mobile-only {
  position: absolute;
  top: calc(-30 * var(--px));
  left: 0;
  width: 100%;
  height: 100%;
}
html > body > main > section.quote > aside.mobile-only > img {
  position: absolute;
}
html > body > main > section.quote > aside.mobile-only > img.photo1 {
  top: calc(165 * var(--px));
  left: calc(-62 * var(--px));
  width: calc(252 * var(--px));
  height: calc(174 * var(--px));
  z-index: 1;
}
html > body > main > section.quote > aside.mobile-only > img.photo2 {
  top: calc(290 * var(--px));
  left: calc(101 * var(--px));
  width: calc(137 * var(--px));
  height: calc(137 * var(--px));
  z-index: 5;
}
html > body > main > section.quote > aside.mobile-only > img.photo3 {
  top: calc(414 * var(--px));
  left: calc(166 * var(--px));
  width: calc(168 * var(--px));
  height: calc(131 * var(--px));
  z-index: 3;
}
html > body > main > section.quote > aside.mobile-only > img.symbols {
  top: calc(167 * var(--px));
  left: calc(204 * var(--px));
  width: calc(86 * var(--px));
  height: calc(27 * var(--px));
  z-index: 7;
}
html > body > main > section.quote > aside.mobile-only > img.globe {
  top: calc(355 * var(--px));
  left: calc(48 * var(--px));
  width: calc(46 * var(--px));
  height: calc(24 * var(--px));
  z-index: 8;
}
html > body > main > section.quote > aside.mobile-only > img.japanese {
  top: calc(553 * var(--px));
  left: calc(250 * var(--px));
  width: calc(43 * var(--px));
  height: calc(18 * var(--px));
  z-index: 10;
}
html > body > main > section.quote > aside.mobile-only > img.purple {
  top: calc(395 * var(--px));
  left: calc(-38 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 10;
}
html > body > main > section.quote > aside.mobile-only > img.blue {
  top: calc(229 * var(--px));
  left: calc(208 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 8;
}
html > body > main > section.quote > aside.mobile-only > img.glass {
  top: calc(267 * var(--px));
  left: calc(245 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 11;
}

/* body/main/section.speakers/&.intensive/&.scss */
html > body > main > section.speakers.intensive {
  margin-top: calc(181 * var(--px));
}
html > body > main > section.speakers.intensive > h2 {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(79 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive > h2 {
    font-size: calc(35 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive > h2 {
    font-family: "pragmatica";
    font-weight: 500;
    font-size: calc(52 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.speakers.intensive > h2 {
    font-size: calc(24 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive {
    margin-top: calc(40 * var(--px));
  }
}

/* body/main/section.speakers/&.intensive/ul.speakers.scss */
html > body > main > section.speakers.intensive > ul.speakers {
  grid-template-columns: repeat(auto-fit, calc(357 * var(--px)));
  justify-content: center;
  width: 100%;
}
html > body > main > section.speakers.intensive > ul.speakers > li {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
}
html > body > main > section.speakers.intensive > ul.speakers > li img {
  width: 100%;
}
html > body > main > section.speakers.intensive > ul.speakers > li h3 {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(26 * var(--px));
  line-height: calc(26 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive > ul.speakers > li h3 {
    font-size: calc(12 * var(--px));
    line-height: calc(12 * var(--px));
  }
}
html > body > main > section.speakers.intensive > ul.speakers > li h3 {
  text-align: left;
  text-transform: unset;
}
html > body > main > section.speakers.intensive > ul.speakers > li p {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive > ul.speakers > li p {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.speakers.intensive > ul.speakers > li p {
  color: #000000;
}
html > body > main > section.speakers.intensive > ul.speakers > li a {
  color: #000000;
  text-decoration: underline;
}
@media (max-width: 666px) {
  html > body > main > section.speakers.intensive > ul.speakers {
    grid-template-columns: repeat(auto-fit, calc(133 * var(--px)));
    gap: calc(6 * var(--px));
  }
  html > body > main > section.speakers.intensive > ul.speakers > li {
    gap: calc(6 * var(--px));
  }
}

/* body/main/section.tickets/ul/&.scss */
html > body > main > section.tickets > ul {
  display: flex;
  flex-direction: column;
  margin-top: calc(72 * var(--px));
  gap: calc(72 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul {
    margin-top: calc(40 * var(--px));
    gap: calc(40 * var(--px));
  }
}

/* body/main/section.timetable/aside/&.desktop-only.scss */
html > body > main > section.timetable > aside.desktop-only {
  height: calc(950 * var(--px));
  width: calc(1813 * var(--px));
  position: relative;
  left: calc(-128 * var(--px));
  top: calc(0 * var(--px));
}
html > body > main > section.timetable > aside.desktop-only > img {
  position: absolute;
}
html > body > main > section.timetable > aside.desktop-only > img.photo1 {
  top: calc(263 * var(--px));
  left: calc(229 * var(--px));
  width: calc(604 * var(--px));
  height: calc(442 * var(--px));
  z-index: 2;
}
html > body > main > section.timetable > aside.desktop-only > img.photo2 {
  top: calc(408 * var(--px));
  left: calc(643 * var(--px));
  width: calc(486 * var(--px));
  height: calc(456 * var(--px));
  z-index: 3;
}
html > body > main > section.timetable > aside.desktop-only > img.photo3 {
  top: calc(621 * var(--px));
  left: calc(1020 * var(--px));
  width: calc(515 * var(--px));
  height: calc(336 * var(--px));
  z-index: 4;
}
html > body > main > section.timetable > aside.desktop-only > img.ctrlalt {
  top: calc(166 * var(--px));
  left: calc(1163 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 5;
}
html > body > main > section.timetable > aside.desktop-only > img.glass {
  top: calc(265 * var(--px));
  left: calc(1288 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 6;
}
html > body > main > section.timetable > aside.desktop-only > img.pink {
  top: calc(490 * var(--px));
  left: calc(70 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 6;
}
html > body > main > section.timetable > aside.desktop-only > img.dots {
  top: calc(933 * var(--px));
  left: calc(105 * var(--px));
  width: calc(134 * var(--px));
  height: calc(21 * var(--px));
  z-index: 7;
}
html > body > main > section.timetable > aside.desktop-only > img.dp {
  top: calc(32 * var(--px));
  left: calc(1438 * var(--px));
  width: calc(137 * var(--px));
  height: calc(31 * var(--px));
  z-index: 7;
}
html > body > main > section.timetable > aside.desktop-only > img.symbols {
  top: calc(314 * var(--px));
  left: calc(951 * var(--px));
  width: calc(144 * var(--px));
  height: calc(44 * var(--px));
  z-index: 7;
}
html > body > main > section.timetable > aside.desktop-only > img.lift {
  top: calc(761 * var(--px));
  left: calc(560 * var(--px));
  width: calc(44 * var(--px));
  height: calc(56 * var(--px));
  z-index: 7;
}
html > body > main > section.timetable > aside.desktop-only > img.shapes {
  top: calc(294 * var(--px));
  left: calc(74 * var(--px));
  width: calc(53 * var(--px));
  height: calc(52 * var(--px));
  z-index: 7;
}

/* body/main/section.timetable/aside/&.mobile-only.scss */
html > body > main > section.timetable > aside.mobile-only {
  height: calc(442 * var(--px));
  width: calc(320 * var(--px));
  position: relative;
  left: calc(-128 * var(--px));
  top: calc(0 * var(--px));
}
html > body > main > section.timetable > aside.mobile-only > img {
  position: absolute;
  max-width: unset;
}
html > body > main > section.timetable > aside.mobile-only > img.photo1 {
  top: calc(-25 * var(--px));
  left: calc(-12 * var(--px));
  width: calc(564 * var(--px));
  height: calc(420 * var(--px));
  z-index: 2;
}

/* body/main/section.cover/&[data-mode="preorder"]/div.background/button.play.scss */
html > body > main > section.cover[data-mode=preorder] > div.background > button.play {
  position: absolute;
  top: calc(522 * var(--px));
  left: calc(843 * var(--px));
  width: calc(72 * var(--px));
  height: calc(72 * var(--px));
  border-radius: calc(40 * var(--px));
  padding: 0;
  pointer-events: all;
  overflow: hidden;
  transition: width 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=preorder] > div.background > button.play::before {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  z-index: 1;
  filter: blur(2px);
}
html > body > main > section.cover[data-mode=preorder] > div.background > button.play::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  background-image: url("/styles/images/designprosmotr-2026-2/play.svg");
  background-position: 59% center;
  background-repeat: no-repeat;
  background-size: calc(28 * var(--px)) calc(28 * var(--px));
  z-index: 2;
  transition: translate 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=preorder] > div.background > button.play > span {
  position: relative;
  display: block;
  font-family: "pragmatica";
  font-size: calc(35 * var(--px));
  font-weight: 500;
  line-height: calc(76 * var(--px));
  translate: calc(-200 * var(--px)) 0;
  transition: visibility 0.3s ease-in-out, translate 0.3s ease-in-out;
  color: #000000;
  z-index: 10;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play > span {
    font-size: calc(28 * var(--px));
    translate: calc(-114 * var(--px));
    line-height: calc(27 * var(--px));
  }
}
html > body > main > section.cover[data-mode=preorder] > div.background > button.play:not(:hover) > span {
  visibility: hidden;
}
@media (pointer: fine) {
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play:hover {
    width: calc(150 * var(--px));
    background-position: 200% center;
  }
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play:hover::after {
    translate: 100% 0;
  }
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play:hover > span {
    translate: 0 0;
  }
}
@media (pointer: fine) and (max-width: 666px) {
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play:hover {
    width: calc(114 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play {
    top: calc(321 * var(--px));
    left: calc(199 * var(--px));
    width: calc(30 * var(--px));
    height: calc(30 * var(--px));
  }
  html > body > main > section.cover[data-mode=preorder] > div.background > button.play::after {
    background-position: 55% center;
    background-size: calc(12 * var(--px)) calc(12 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="preorder"]/div.background/span.desktop-only.scss */
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img {
  position: absolute;
  user-select: none;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.logo {
  left: calc(124 * var(--px));
  top: calc(52 * var(--px));
  width: calc(568 * var(--px));
  height: calc(354 * var(--px));
  z-index: 10;
}
@media (max-width: 1023px) {
  html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.logo {
    top: calc(50 * var(--px));
    left: calc(180 * var(--px));
    width: calc(707 * var(--px));
    height: calc(442 * var(--px));
  }
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.photo1 {
  left: calc(84 * var(--px));
  top: calc(234 * var(--px));
  width: calc(795 * var(--px));
  height: calc(582 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.photo2 {
  left: calc(780 * var(--px));
  top: calc(110 * var(--px));
  width: calc(794 * var(--px));
  height: calc(518 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.symbols {
  left: calc(-30 * var(--px));
  top: calc(490 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.long-text {
  left: calc(-130 * var(--px));
  top: calc(560 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 2;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.glass {
  left: calc(1460 * var(--px));
  top: calc(450 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.gradient1 {
  left: calc(-68 * var(--px));
  top: calc(-82 * var(--px));
  width: calc(962 * var(--px));
  height: calc(717 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.desktop-only > img.gradient2 {
  left: calc(1200 * var(--px));
  top: calc(87 * var(--px));
  width: calc(686 * var(--px));
  height: calc(584 * var(--px));
  z-index: 1;
}

/* body/main/section.cover/&[data-mode="preorder"]/div.background/span.mobile-only.scss */
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img {
  position: absolute;
  user-select: none;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.logo {
  left: calc(18 * var(--px));
  top: calc(80 * var(--px));
  width: calc(290 * var(--px));
  height: calc(181 * var(--px));
  z-index: 10;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.photo1 {
  left: calc(-56 * var(--px));
  top: calc(225 * var(--px));
  width: calc(328 * var(--px));
  height: calc(240 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.photo2 {
  left: calc(180 * var(--px));
  top: calc(128 * var(--px));
  width: calc(368 * var(--px));
  height: calc(240 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.symbols {
  left: calc(-100 * var(--px));
  top: calc(314 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.long-text {
  left: calc(-132 * var(--px));
  top: calc(259 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.glass {
  left: calc(241 * var(--px));
  top: calc(273 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.gradient1 {
  left: calc(-180 * var(--px));
  top: calc(-127 * var(--px));
  width: calc(660 * var(--px));
  height: calc(462 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=preorder] > div.background > span.mobile-only > img.gradient2 {
  display: none;
}

/* body/main/section.cover/&[data-mode="sale"]/div.background/&.scss */
html > body > main > section.cover[data-mode=sale] > div.background > div.video-wrapper {
  position: relative;
  top: calc(110 * var(--px));
  left: calc(656 * var(--px));
  width: calc(920 * var(--px));
  height: calc(518 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > div.background > div.video-wrapper {
    top: calc(200 * var(--px));
    left: 0;
    width: 100vw;
    height: calc(202.5 * var(--px));
  }
  html > body > main > section.cover[data-mode=sale] > div.background > div.video-wrapper > button.close {
    top: calc(30 * var(--px));
    right: calc(20 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="sale"]/div.background/button.play.scss */
html > body > main > section.cover[data-mode=sale] > div.background > button.play {
  position: absolute;
  top: calc(522 * var(--px));
  left: calc(843 * var(--px));
  width: calc(72 * var(--px));
  height: calc(72 * var(--px));
  border-radius: calc(40 * var(--px));
  padding: 0;
  pointer-events: all;
  overflow: hidden;
  transition: width 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=sale] > div.background > button.play::before {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  z-index: 1;
  filter: blur(2px);
}
html > body > main > section.cover[data-mode=sale] > div.background > button.play::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  background-image: url("/styles/images/designprosmotr-2026-2/play.svg");
  background-position: 59% center;
  background-repeat: no-repeat;
  background-size: calc(28 * var(--px)) calc(28 * var(--px));
  z-index: 2;
  transition: translate 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=sale] > div.background > button.play > span {
  position: relative;
  display: block;
  font-family: "pragmatica";
  font-size: calc(35 * var(--px));
  font-weight: 500;
  line-height: calc(76 * var(--px));
  translate: calc(-200 * var(--px)) 0;
  transition: visibility 0.3s ease-in-out, translate 0.3s ease-in-out;
  color: #000000;
  z-index: 10;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > div.background > button.play > span {
    font-size: calc(28 * var(--px));
    translate: calc(-114 * var(--px));
    line-height: calc(27 * var(--px));
  }
}
html > body > main > section.cover[data-mode=sale] > div.background > button.play:not(:hover) > span {
  visibility: hidden;
}
@media (pointer: fine) {
  html > body > main > section.cover[data-mode=sale] > div.background > button.play:hover {
    width: calc(150 * var(--px));
    background-position: 200% center;
  }
  html > body > main > section.cover[data-mode=sale] > div.background > button.play:hover::after {
    translate: 100% 0;
  }
  html > body > main > section.cover[data-mode=sale] > div.background > button.play:hover > span {
    translate: 0 0;
  }
}
@media (pointer: fine) and (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > div.background > button.play:hover {
    width: calc(114 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=sale] > div.background > button.play {
    top: calc(413 * var(--px));
    left: calc(199 * var(--px));
    width: calc(30 * var(--px));
    height: calc(30 * var(--px));
  }
  html > body > main > section.cover[data-mode=sale] > div.background > button.play::after {
    background-position: 55% center;
    background-size: calc(12 * var(--px)) calc(12 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="sale"]/div.background/span.desktop-only.scss */
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img {
  position: absolute;
  user-select: none;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.logo {
  left: calc(124 * var(--px));
  top: calc(52 * var(--px));
  width: calc(568 * var(--px));
  height: calc(354 * var(--px));
  z-index: 10;
}
@media (max-width: 1023px) {
  html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.logo {
    top: calc(50 * var(--px));
    left: calc(180 * var(--px));
    width: calc(707 * var(--px));
    height: calc(442 * var(--px));
  }
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.photo1 {
  left: calc(84 * var(--px));
  top: calc(234 * var(--px));
  width: calc(795 * var(--px));
  height: calc(582 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.photo2 {
  left: calc(780 * var(--px));
  top: calc(110 * var(--px));
  width: calc(794 * var(--px));
  height: calc(518 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.symbols {
  left: calc(-30 * var(--px));
  top: calc(490 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.long-text {
  left: calc(-130 * var(--px));
  top: calc(560 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.glass {
  left: calc(1460 * var(--px));
  top: calc(450 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.gradient1 {
  left: calc(-68 * var(--px));
  top: calc(-82 * var(--px));
  width: calc(962 * var(--px));
  height: calc(717 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.desktop-only > img.gradient2 {
  left: calc(1095 * var(--px));
  top: calc(17 * var(--px));
  width: calc(686 * var(--px));
  height: calc(584 * var(--px));
  z-index: 1;
}

/* body/main/section.cover/&[data-mode="sale"]/div.background/span.mobile-only.scss */
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img {
  position: absolute;
  user-select: none;
  max-width: unset;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.logo {
  left: calc(18 * var(--px));
  top: calc(80 * var(--px));
  width: calc(290 * var(--px));
  height: calc(181 * var(--px));
  z-index: 10;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.photo1 {
  left: calc(-56 * var(--px));
  top: calc(225 * var(--px));
  width: calc(328 * var(--px));
  height: calc(240 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.photo2 {
  left: calc(180 * var(--px));
  top: calc(128 * var(--px));
  width: calc(368 * var(--px));
  height: calc(240 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.symbols {
  left: calc(-100 * var(--px));
  top: calc(314 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.long-text {
  left: calc(-132 * var(--px));
  top: calc(259 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.glass {
  left: calc(241 * var(--px));
  top: calc(273 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.gradient1 {
  left: calc(-170 * var(--px));
  top: calc(-120 * var(--px));
  width: calc(660 * var(--px));
  height: calc(462 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=sale] > div.background > span.mobile-only > img.gradient2 {
  display: none;
}

/* body/main/section.cover/&[data-mode="timer"]/div.background/&.scss */
html > body > main > section.cover[data-mode=timer] > div.background > div.video-wrapper {
  position: relative;
  top: calc(110 * var(--px));
  left: calc(656 * var(--px));
  width: calc(920 * var(--px));
  height: calc(518 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > div.background > div.video-wrapper {
    top: calc(200 * var(--px));
    left: 0;
    width: 100vw;
    height: calc(202.5 * var(--px));
  }
  html > body > main > section.cover[data-mode=timer] > div.background > div.video-wrapper > button.close {
    top: calc(30 * var(--px));
    right: calc(20 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="timer"]/div.background/button.play.scss */
html > body > main > section.cover[data-mode=timer] > div.background > button.play {
  position: absolute;
  top: calc(522 * var(--px));
  left: calc(843 * var(--px));
  width: calc(72 * var(--px));
  height: calc(72 * var(--px));
  border-radius: calc(40 * var(--px));
  padding: 0;
  pointer-events: all;
  overflow: hidden;
  transition: width 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=timer] > div.background > button.play::before {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  z-index: 1;
  filter: blur(2px);
}
html > body > main > section.cover[data-mode=timer] > div.background > button.play::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffe100;
  content: "";
  background-image: url("/styles/images/designprosmotr-2026-2/play.svg");
  background-position: 59% center;
  background-repeat: no-repeat;
  background-size: calc(28 * var(--px)) calc(28 * var(--px));
  z-index: 2;
  transition: translate 0.3s ease-in-out;
}
html > body > main > section.cover[data-mode=timer] > div.background > button.play > span {
  position: relative;
  display: block;
  font-family: "pragmatica";
  font-size: calc(35 * var(--px));
  font-weight: 500;
  line-height: calc(76 * var(--px));
  translate: calc(-200 * var(--px)) 0;
  transition: visibility 0.3s ease-in-out, translate 0.3s ease-in-out;
  color: #000000;
  z-index: 10;
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > div.background > button.play > span {
    font-size: calc(28 * var(--px));
    translate: calc(-114 * var(--px));
    line-height: calc(27 * var(--px));
  }
}
html > body > main > section.cover[data-mode=timer] > div.background > button.play:not(:hover) > span {
  visibility: hidden;
}
@media (pointer: fine) {
  html > body > main > section.cover[data-mode=timer] > div.background > button.play:hover {
    width: calc(150 * var(--px));
    background-position: 200% center;
  }
  html > body > main > section.cover[data-mode=timer] > div.background > button.play:hover::after {
    translate: 100% 0;
  }
  html > body > main > section.cover[data-mode=timer] > div.background > button.play:hover > span {
    translate: 0 0;
  }
}
@media (pointer: fine) and (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > div.background > button.play:hover {
    width: calc(114 * var(--px));
  }
}
@media (max-width: 666px) {
  html > body > main > section.cover[data-mode=timer] > div.background > button.play {
    top: calc(413 * var(--px));
    left: calc(199 * var(--px));
    width: calc(30 * var(--px));
    height: calc(30 * var(--px));
  }
  html > body > main > section.cover[data-mode=timer] > div.background > button.play::after {
    background-position: 55% center;
    background-size: calc(12 * var(--px)) calc(12 * var(--px));
  }
}

/* body/main/section.cover/&[data-mode="timer"]/div.background/span.desktop-only.scss */
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img {
  position: absolute;
  user-select: none;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.logo {
  left: calc(124 * var(--px));
  top: calc(30 * var(--px));
  width: calc(568 * var(--px));
  height: calc(354 * var(--px));
  z-index: 10;
}
@media (max-width: 1023px) {
  html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.logo {
    top: calc(50 * var(--px));
    left: calc(180 * var(--px));
    width: calc(707 * var(--px));
    height: calc(442 * var(--px));
  }
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.photo1 {
  left: calc(84 * var(--px));
  top: calc(234 * var(--px));
  width: calc(795 * var(--px));
  height: calc(582 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.photo2 {
  left: calc(780 * var(--px));
  top: calc(140 * var(--px));
  width: calc(794 * var(--px));
  height: calc(518 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.symbols {
  left: calc(-30 * var(--px));
  top: calc(490 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.long-text {
  left: calc(-130 * var(--px));
  top: calc(560 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.glass {
  left: calc(1460 * var(--px));
  top: calc(450 * var(--px));
  width: calc(412 * var(--px));
  height: calc(412 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.gradient1 {
  left: calc(-68 * var(--px));
  top: calc(-82 * var(--px));
  width: calc(962 * var(--px));
  height: calc(717 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.gradient2 {
  left: calc(1095 * var(--px));
  top: calc(17 * var(--px));
  width: calc(686 * var(--px));
  height: calc(584 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.desktop-only > img.gradient {
  left: calc(-150 * var(--px));
  top: calc(-150 * var(--px));
  width: calc(2000 * var(--px));
  height: calc(1207 * var(--px));
}

/* body/main/section.cover/&[data-mode="timer"]/div.background/span.mobile-only.scss */
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only {
  position: relative;
  z-index: 0;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img {
  position: absolute;
  user-select: none;
  max-width: unset;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.logo {
  left: calc(18 * var(--px));
  top: calc(80 * var(--px));
  width: calc(290 * var(--px));
  height: calc(181 * var(--px));
  z-index: 10;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.photo1 {
  left: calc(-56 * var(--px));
  top: calc(225 * var(--px));
  width: calc(328 * var(--px));
  height: calc(240 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.photo2 {
  left: calc(180 * var(--px));
  top: calc(128 * var(--px));
  width: calc(368 * var(--px));
  height: calc(240 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.symbols {
  left: calc(-100 * var(--px));
  top: calc(314 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 4;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.long-text {
  left: calc(-132 * var(--px));
  top: calc(259 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 5;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.glass {
  left: calc(241 * var(--px));
  top: calc(273 * var(--px));
  width: calc(170 * var(--px));
  height: calc(170 * var(--px));
  z-index: 6;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.gradient1 {
  left: calc(-170 * var(--px));
  top: calc(-120 * var(--px));
  width: calc(660 * var(--px));
  height: calc(462 * var(--px));
  z-index: 1;
}
html > body > main > section.cover[data-mode=timer] > div.background > span.mobile-only > img.gradient2 {
  display: none;
}

/* body/main/section.cover/div.background/div.video-wrapper/&.scss */
html > body > main > section.cover > div.background > div.video-wrapper {
  position: absolute;
  top: calc(100 * var(--px));
  right: calc(106 * var(--px));
  width: calc(1000 * var(--px));
  height: calc(563 * var(--px));
  z-index: 15;
}
html > body > main > section.cover > div.background > div.video-wrapper > video {
  width: 100%;
  height: 100%;
  border-radius: calc(40 * var(--px));
  pointer-events: all;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media (max-width: 666px) {
  html > body > main > section.cover > div.background > div.video-wrapper > video {
    border-radius: 0;
  }
}
html > body > main > section.cover > div.background > div.video-wrapper > button.close {
  position: absolute;
  top: calc(48 * var(--px));
  right: calc(48 * var(--px));
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  pointer-events: all;
  background-image: url("/styles/images/designprosmotr-2026-2/close_fancy.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
@media (max-width: 666px) {
  html > body > main > section.cover > div.background > div.video-wrapper > button.close {
    top: calc(16 * var(--px));
    right: calc(10 * var(--px));
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
  }
}
html > body > main > section.cover > div.background > div.video-wrapper:not(.playing) > video,
html > body > main > section.cover > div.background > div.video-wrapper:not(.playing) > button.close {
  visibility: hidden;
  opacity: 0;
}
@media (max-width: 666px) {
  html > body > main > section.cover > div.background > div.video-wrapper {
    width: 100svw;
    height: calc(192 * var(--px));
    top: calc(160 * var(--px));
    left: 0;
  }
}

/* body/main/section.tickets/ul/li/&.scss */
html > body > main > section.tickets > ul > li > div.title {
  margin-bottom: calc(40 * var(--px));
}
html > body > main > section.tickets > ul > li > div.title > h3 {
  margin-bottom: 0.5em;
}
html > body > main > section.tickets > ul > li > div.title > p {
  text-align: center;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > div.title {
    margin-bottom: calc(20 * var(--px));
  }
}
html > body > main > section.tickets > ul > li p.button {
  color: #ffffff !important;
  background: transparent !important;
  border: 2px solid #ffffff !important;
}
html > body > main > section.tickets > ul > li p.button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}
html > body > main > section.tickets > ul > li a.button {
  color: #000000 !important;
  background: transparent !important;
  border: 2px solid #000000 !important;
}

/* body/main/section.tickets/ul/li/&[data-type='forum'].scss */
html > body > main > section.tickets > ul > li[data-type=forum] > ul {
  display: flex;
  gap: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li[data-type=forum] > ul {
    flex-direction: column;
  }
}
html > body > main > section.tickets > ul > li[data-type=forum] > ul > li.sold > div:first-child {
  border-bottom: none;
}
html > body > main > section.tickets > ul > li[data-type=forum] > ul > li > div:nth-child(2) {
  border-top: dashed 2px #000000 !important;
  background: #ffffff;
}

/* body/main/section.tickets/ul/li/&[data-type='intensive'].scss */
html > body > main > section.tickets > ul > li[data-type=intensive] > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--px));
}
html > body > main > section.tickets > ul > li[data-type=intensive] > ul:not(:has(> :nth-child(2))) {
  margin-inline: auto;
  grid-template-columns: 1fr;
}
@media (min-width: 667px) {
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul:not(:has(> :nth-child(2))) {
    width: 75%;
  }
}
@media (min-width: 667px) {
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li {
    display: grid;
    grid-template-columns: 436fr 240fr;
    grid-template-rows: calc(254 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a {
    gap: calc(1 * var(--px));
    justify-content: center;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.city {
    position: absolute;
    top: calc(10 * var(--px));
    left: 50%;
    translate: -50% 0;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.type {
    position: absolute;
    top: calc(12 * var(--px));
    left: calc(14 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.time {
    margin-bottom: calc(10 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > h4 {
    margin-top: 0;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(2) {
    border: none;
    border-left: dashed 2px #000000 !important;
    justify-content: center;
    background: #ffffff;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(2) a.button {
    margin-top: calc(36 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(2) div.price {
    flex: unset;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li.sold > div:first-child {
    border-right: none !important;
  }
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul {
    display: flex;
    flex-direction: column;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.type {
    position: absolute;
    top: calc(10 * var(--px));
    left: calc(10 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.time {
    margin-top: 1em;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li > div:nth-child(1) > a > p.description {
    margin-bottom: 3em;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li a.button {
    margin-top: calc(12 * var(--px)) !important;
  }
  html > body > main > section.tickets > ul > li[data-type=intensive] > ul > li div.price > ul {
    margin-top: calc(12 * var(--px));
    margin-bottom: calc(18 * var(--px));
  }
}

/* body/main/section.tickets/ul/li/&[data-type='onlive'].scss */
html > body > main > section.tickets > ul > li[data-type=onlive] > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--px));
}
html > body > main > section.tickets > ul > li[data-type=onlive] > ul:not(:has(> :nth-child(2))) {
  margin-inline: auto;
  grid-template-columns: 1fr;
}
@media (min-width: 667px) {
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul:not(:has(> :nth-child(2))) {
    width: 75%;
  }
}
html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) {
  position: relative;
}
html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1)::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/content/designprosmotr-2026-2/ticket/onlive.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  content: "";
}
@media (min-width: 667px) {
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li {
    display: grid;
    grid-template-columns: 436fr 240fr;
    grid-template-rows: calc(254 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) {
    border-right: none !important;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a {
    gap: calc(14 * var(--px));
    justify-content: center;
    align-items: start;
    padding: calc(10 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.city {
    position: absolute;
    top: calc(10 * var(--px));
    right: calc(10 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.type {
    position: absolute;
    top: calc(12 * var(--px));
    left: calc(14 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.description {
    margin-top: -0.5em !important;
    margin-bottom: 2em !important;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.time {
    margin-top: calc(10 * var(--px));
    margin-bottom: calc(10 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.footnote {
    text-align: left;
    color: #ffffff;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > h4 {
    margin-top: 0;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(2) {
    border: none;
    border-left: dashed 2px #000000 !important;
    justify-content: center;
    background: #ffffff;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(2) a.button {
    margin-top: calc(36 * var(--px));
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(2) div.price {
    flex: unset;
  }
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul {
    display: flex;
    flex-direction: column;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a {
    align-items: start;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > h4 {
    margin-top: 0.5em;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.description {
    margin-bottom: 3.5em;
  }
  html > body > main > section.tickets > ul > li[data-type=onlive] > ul > li > div:nth-child(1) > a > p.city {
    position: absolute;
    top: calc(10 * var(--px));
    right: calc(10 * var(--px));
  }
}

/* body/main/section.timer/div.times/div.time/&.scss */
html > body > main > section.timer > div.times > div.time {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1002;
  margin-top: calc(20 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time {
    margin-top: calc(10 * var(--px));
  }
}

/* body/main/section.timer/div.times/div.time/div.time-cell/&.scss */
html > body > main > section.timer > div.times > div.time > div.time-cell {
  display: flex;
  --font-size: min(13.4vw, 225px);
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell {
    --font-size: 13vw;
  }
}

/* body/main/section.timer/div.times/div.time/div.time-cell/div.counter.scss */
html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.value {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(210 * var(--px));
  line-height: calc(168 * var(--px));
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.value {
    font-size: calc(71 * var(--px));
    line-height: 0.9;
  }
}
html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.value {
  font-size: var(--font-size) !important;
  line-height: 1 !important;
}
html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.label {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.label {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.label {
  color: #9c9c9d;
  text-align: center;
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.label {
    font-family: "pragmatica";
    font-weight: 500;
    font-size: calc(18 * var(--px));
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 666px) and (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell > div.counter div.label {
    font-size: calc(9 * var(--px));
  }
}

/* body/main/section.timer/div.times/div.time/div.time-cell/div.delimiter.scss */
html > body > main > section.timer > div.times > div.time > div.time-cell > div.delimiter {
  font-family: "pragmatica_extended";
  font-weight: 500;
  font-size: calc(210 * var(--px));
  line-height: calc(168 * var(--px));
  letter-spacing: -0.04em;
}
@media (max-width: 666px) {
  html > body > main > section.timer > div.times > div.time > div.time-cell > div.delimiter {
    font-size: calc(71 * var(--px));
    line-height: 0.9;
  }
}
html > body > main > section.timer > div.times > div.time > div.time-cell > div.delimiter {
  font-size: var(--font-size) !important;
  line-height: 1 !important;
}

/* body/main/section.tickets/ul/li/ul/li/&.scss */
@media (min-width: 667px) {
  html > body > main > section.tickets > ul > li > ul > li.forum--stretched {
    width: calc(370 * var(--px));
    margin-top: calc(-20 * var(--px));
  }
  html > body > main > section.tickets > ul > li > ul > li.forum--stretched > div > a {
    padding: calc(20 * var(--px)) calc(32 * var(--px)) calc(48 * var(--px)) calc(32 * var(--px)) !important;
  }
  html > body > main > section.tickets > ul > li > ul > li.forum--stretched > div > a h4 {
    margin-top: calc(36 * var(--px));
  }
  html > body > main > section.tickets > ul > li > ul > li.forum--stretched > div > a p.time {
    margin-bottom: calc(36 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li:not(.forum--stretched) {
  flex: 1;
}
html > body > main > section.tickets > ul > li > ul > li[data-city=msc][data-days-count="1"] > div:nth-child(1) {
  background: #ff2264;
}
html > body > main > section.tickets > ul > li > ul > li[data-city=msc][data-days-count="2"] > div:nth-child(1) {
  background: linear-gradient(70deg, #FF497F 0%, #FC307D 34.13%, #D13EEA 100%);
}
html > body > main > section.tickets > ul > li > ul > li[data-city=spb][data-days-count="1"] > div:nth-child(1) {
  background: #02c3fe;
}
html > body > main > section.tickets > ul > li > ul > li[data-city=spb][data-days-count="2"] > div:nth-child(1) {
  background: linear-gradient(-44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
html > body > main > section.tickets > ul > li > ul > li[data-city=spb][data-intensive] > div:nth-child(1), html > body > main > section.tickets > ul > li > ul > li[data-city=spb][data-onlive] > div:nth-child(1) {
  background: linear-gradient(44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%);
}
html > body > main > section.tickets > ul > li > ul > li[data-city=all] > div:nth-child(1) {
  background: #c23fff;
}
html > body > main > section.tickets > ul > li > ul > li:has(a:hover) .hover-hide {
  display: none;
}
html > body > main > section.tickets > ul > li > ul > li:not(:has(a:hover)) .hover-show {
  display: none;
}
html > body > main > section.tickets > ul > li > ul > li[data-city=spb] a.button:hover {
  background: linear-gradient(44deg, #3CD0FF 0%, #02C3FE 17.79%, #8A68FE 83.17%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
html > body > main > section.tickets > ul > li > ul > li[data-city=msc] a.button:hover {
  background: linear-gradient(70deg, #FF497F 0%, #FC307D 34.13%, #D13EEA 100%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* body/main/section.tickets/ul/li/ul/li/&.sold.scss */
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2), html > body > main > section.tickets > ul > li > ul > li.sold.forum > div:nth-child(1), html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):not(:hover), html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):not(:hover) {
  background: #ececec !important;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2) h4, html > body > main > section.tickets > ul > li > ul > li.sold.forum > div:nth-child(1) h4, html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):not(:hover) h4, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):not(:hover) h4 {
  color: #000000;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2) p.time, html > body > main > section.tickets > ul > li > ul > li.sold.forum > div:nth-child(1) p.time, html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):not(:hover) p.time, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):not(:hover) p.time {
  color: #5a5a5a;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2) p.description, html > body > main > section.tickets > ul > li > ul > li.sold.forum > div:nth-child(1) p.description, html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):not(:hover) p.description, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):not(:hover) p.description {
  color: #5a5a5a;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2) p.footnote, html > body > main > section.tickets > ul > li > ul > li.sold.forum > div:nth-child(1) p.footnote, html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):not(:hover) p.footnote, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):not(:hover) p.footnote {
  color: #5a5a5a;
}
html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):hover p.footnote, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):hover p.footnote {
  color: #ffffff;
}
html > body > main > section.tickets > ul > li > ul > li.sold.intensive > div:nth-child(1):hover span[data-city] path, html > body > main > section.tickets > ul > li > ul > li.sold.onlive > div:nth-child(1):hover span[data-city] path {
  fill: #ffffff;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(1) {
  border: 1px solid #5a5a5a;
}
html > body > main > section.tickets > ul > li > ul > li.sold > div:nth-child(2) {
  border: 1px solid #5a5a5a;
  border-color: #5a5a5a !important;
}
html > body > main > section.tickets > ul > li > ul > li.sold div.price {
  display: flex;
  align-items: center;
  padding-block: calc(45 * var(--px));
}
html > body > main > section.tickets > ul > li > ul > li.sold div.price > p.sold {
  margin: 0;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li.sold div.price {
    padding-block: calc(25 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li.sold p.footnote {
  color: #666666;
}
html > body > main > section.tickets > ul > li > ul > li.sold span[data-city] path {
  fill: #5a5a5a;
}

/* body/main/section.tickets/ul/li/ul/li/div/&.scss */
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) > a, html > body > main > section.tickets > ul > li > ul > li > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: calc(16 * var(--px));
  padding: calc(20 * var(--px)) calc(24 * var(--px)) calc(24 * var(--px)) calc(24 * var(--px));
  position: relative;
}
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) > a {
  color: #ffffff;
}
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(2) {
  color: #000000;
}
html > body > main > section.tickets > ul > li > ul > li > div {
  border-radius: calc(16 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div {
    border-radius: calc(8 * var(--px)) !important;
  }
  html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) > a, html > body > main > section.tickets > ul > li > ul > li > div:nth-child(2) {
    border-radius: calc(8 * var(--px)) !important;
    padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px)) !important;
  }
  html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) {
    border-bottom: none !important;
  }
  html > body > main > section.tickets > ul > li > ul > li > div:nth-child(2) {
    border-top: dashed 2px #000000 !important;
    background: #ffffff;
  }
}
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) > a {
  height: 100%;
}
html > body > main > section.tickets > ul > li > ul > li > div p.city {
  display: flex;
  gap: calc(15 * var(--px));
  margin-bottom: 1em;
}
html > body > main > section.tickets > ul > li > ul > li > div p.city > span {
  display: block;
  width: calc(28 * var(--px));
  height: calc(15 * var(--px));
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.city > span {
    width: calc(16 * var(--px));
    height: calc(12 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.city > span > svg {
  width: 100%;
  height: 100%;
}
html > body > main > section.tickets > ul > li > ul > li > div p.type {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: calc(18 * var(--px));
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.type {
    font-size: calc(9 * var(--px));
    line-height: calc(9 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.type {
  text-transform: uppercase;
  font-weight: 500;
}
html > body > main > section.tickets > ul > li > ul > li > div h4 {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(52 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div h4 {
    font-size: calc(24 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div h4 {
  margin-top: calc(28 * var(--px));
  margin-bottom: calc(8 * var(--px));
  text-align: center;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div h4 {
    margin-top: 0;
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.time {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.time {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.time {
  margin-top: calc(5 * var(--px));
  margin-bottom: calc(28 * var(--px));
  text-transform: uppercase;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.time {
    margin-bottom: calc(8 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.description {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.description {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.description {
  text-transform: uppercase;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  height: 2em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.description {
    margin-top: 0;
    margin-bottom: 2em;
  }
}
html > body > main > section.tickets > ul > li > ul > li > div div.price {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div div.price {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div div.price {
  text-transform: uppercase;
  flex: 1;
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > ul {
  margin-top: calc(20 * var(--px));
  margin-bottom: calc(28 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--px));
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > ul > li {
  display: flex;
  gap: calc(4 * var(--px));
  justify-content: center;
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > ul > li > span {
  display: flex;
  gap: calc(4 * var(--px));
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > ul > li > span:first-child::after {
  content: "—";
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > ul > li:not(.current) > span {
  color: #9c9c9d !important;
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > p.sold {
  font-family: "pragmatica";
  font-weight: 500;
  font-size: calc(18 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div div.price > p.sold {
    font-size: calc(9 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div div.price > p.sold {
  margin-top: calc(24 * var(--px));
  text-align: center;
  color: #666666;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div div.price > p.sold {
    padding-inline: 25%;
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.footnote {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(12 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div p.footnote {
    font-size: calc(6 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div p.footnote {
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) p.footnote {
  font-family: "pragmatica";
  font-weight: 400;
  font-size: calc(12 * var(--px));
  line-height: 0.9;
  letter-spacing: -0.02em;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div:nth-child(1) p.footnote {
    font-size: calc(6 * var(--px));
  }
}
html > body > main > section.tickets > ul > li > ul > li > div:nth-child(2) p.footnote {
  color: #5a5a5a;
}
@media (max-width: 666px) {
  html > body > main > section.tickets > ul > li > ul > li > div a.button,
  html > body > main > section.tickets > ul > li > ul > li > div p.button {
    padding-inline: calc(24 * var(--px));
  }
}