@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/golos-400.ttf") format("truetype");
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/golos-500.ttf") format("truetype");
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/golos-700.ttf") format("truetype");
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/golos-800.ttf") format("truetype");
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/golos-900.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plex-400.ttf") format("truetype");
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/unbounded-700.ttf") format("truetype");
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #e7e2dc;
  --text: #1b1c1c;
  --meta: #1b1c1c;
  --footer-strong: #1b1c1c;
  --footer-muted: #1b1c1c;
  --window: #f0f0f0;
  --line: #1b1c1c;
  --divider: #1b1c1c;
  --lime: #42e022;
  --highlight: #42e022;
  --highlight-text: #1b1c1c;
  --highlight-line: #1b1c1c;
  --handle: #f0f0f0;
  --handle-line: #1b1c1c;
  --status-line: #1b1c1c;
  --status-text: #1b1c1c;
  --work: #f0f0f0;
  --work-text: #1b1c1c;
  --work-line: #1b1c1c;
  --remind-bar: #42e022;
  --remind-bar-text: #1b1c1c;
  --contact: #f24b27;
  --contact-title: #1b1c1c;
  --contact-body: #f0f0f0;
  --contact-line: #1b1c1c;
  --button: #f0f0f0;
  --button-text: #1b1c1c;
  --button-line: #1b1c1c;
  --button-hover: #e2e2e2;
  --progress-line: #1b1c1c;
  --shadow: 8px 8px 0 rgba(27, 28, 28, 0.13);
  --shadow-sm: 4px 4px 0 rgba(27, 28, 28, 0.13);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #1c201e;
  --text: #f1f1ed;
  --meta: #bfc2be;
  --footer-strong: #f1f1ed;
  --footer-muted: #bfc2be;
  --window: #3d403e;
  --line: #9ba09c;
  --divider: #bfc2be;
  --lime: #aeec43;
  --highlight: #aeec43;
  --highlight-text: #1c201e;
  --highlight-line: #171a18;
  --handle: #f1f1ed;
  --handle-line: #171a18;
  --status-line: #9ba09c;
  --status-text: #bfc2be;
  --work: #9789e8;
  --work-text: #f1f1ed;
  --work-line: #9ba09c;
  --remind-bar: #3d403e;
  --remind-bar-text: #f1f1ed;
  --contact: #aeec43;
  --contact-title: #171a18;
  --contact-body: #171a18;
  --contact-line: #171a18;
  --button: #f1f1ed;
  --button-text: #171a18;
  --button-line: #171a18;
  --button-hover: #ffffff;
  --progress-line: #b3bab4;
  --shadow: 8px 8px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page);
  color: var(--text);
  font-family: "Golos Text", sans-serif;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: none;
}

.for-dark {
  display: none;
}

:root[data-theme="dark"] .for-light {
  display: none;
}

:root[data-theme="dark"] .for-dark {
  display: block;
}

.rise {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}

.fade {
  opacity: 0;
  animation: fade 0.55s ease both;
  animation-delay: var(--d, 0s);
}

.draw {
  transform: scaleX(0);
  animation: draw 0.65s cubic-bezier(0.4, 0, 0.15, 1) both;
  animation-delay: var(--d, 0s);
}

.pop {
  opacity: 0;
  animation: pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}

.open {
  opacity: 0;
  animation: open-window 0.52s cubic-bezier(0.16, 1.25, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  62% {
    opacity: 1;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes open-window {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.desktop {
  width: 100%;
  height: max(100dvh, 800px);
  min-height: 800px;
}

.scale {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 800px;
}

.frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 800px;
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--page);
}

.header {
  height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand {
  width: 46px;
  height: 46px;
  justify-self: start;
}

.brand img,
.logo-slot img {
  width: 45.52px;
  height: 45.52px;
}

.kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--meta);
  white-space: nowrap;
}

.themes {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
  cursor: pointer;
}

.theme-btn[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--page);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.status {
  width: 154px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--status-line);
  color: var(--status-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  position: absolute;
  left: 0;
  top: -49px;
}

.status span {
  white-space: nowrap;
}

.status img {
  width: 8px;
  height: 8px;
}

.rule {
  height: 1px;
  background: var(--divider);
  transform-origin: center;
}

.stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  container-type: size;
  overflow: hidden;
}

.stage-board {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1328px;
  height: 546px;
  transform: translate(-50%, calc(-50% - 26px)) scale(min(calc(150cqw / 1328px), calc(104cqh / 620px)));
  transform-origin: center center;
}

.footer {
  height: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.footer-row {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.footer-row p {
  margin: 0;
}

.footer-row p:first-child {
  color: var(--footer-strong);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--footer-muted);
}

.footer-legal p {
  margin: 0;
}

.footer-legal a,
.m-privacy {
  color: inherit;
  text-underline-offset: 2px;
}

.hero {
  position: absolute;
  left: 254px;
  top: 26px;
  width: 821px;
  height: 197px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
}

.hero-top {
  position: relative;
  z-index: 6;
  height: 97px;
  margin-bottom: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.hero-po,
.highlight > span:first-child,
.hero-bottom {
  margin: 0;
  font-weight: 900;
  white-space: nowrap;
}

.hero-po,
.highlight > span:first-child {
  font-size: 91px;
  line-height: 97px;
  letter-spacing: -2.73px;
}

.hero-bottom {
  position: relative;
  z-index: 2;
  width: 794px;
  font-size: 99px;
  line-height: 105px;
  letter-spacing: -2.97px;
  text-align: center;
}

.highlight {
  position: relative;
  width: 250px;
  height: 97px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: var(--highlight);
  border: 1px solid var(--highlight-line);
  color: var(--highlight-text);
}

.handles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--handle);
  border: 1px solid var(--handle-line);
}

.handles span:nth-child(1) { left: -4px; top: -4px; }
.handles span:nth-child(2) { left: 121px; top: -4px; }
.handles span:nth-child(3) { left: 246px; top: -4px; }
.handles span:nth-child(4) { left: -4px; top: 45px; }
.handles span:nth-child(5) { left: 246px; top: 45px; }
.handles span:nth-child(6) { left: -4px; top: 93px; }
.handles span:nth-child(7) { left: 121px; top: 93px; }
.handles span:nth-child(8) { left: 246px; top: 93px; }

.underline {
  position: absolute;
  left: 165px;
  top: 181px;
  width: 572px;
  height: 19px;
  z-index: 2;
  transform-origin: left center;
}

.underline img {
  width: 622px;
  height: 20px;
}

.cursor {
  position: absolute;
  left: 578px;
  top: 68px;
  width: 33px;
  height: 45px;
  z-index: 7;
  transform-origin: 8% 4%;
}

.cursor img {
  width: 33px;
  height: 45px;
}

.launch {
  position: absolute;
  left: 233px;
  top: 184px;
  width: 300px;
  height: 186px;
  z-index: 4;
}

.launch .win {
  position: absolute;
  width: 284px;
  height: 168px;
}

.launch .win-back { left: 0; top: 0; z-index: 1; }
.launch .win-mid { left: 9px; top: 10px; z-index: 2; }
.launch .win-front { left: 16px; top: 18px; z-index: 3; }

.work {
  position: absolute;
  left: 484px;
  top: 218px;
  width: 375px;
  height: 283px;
  z-index: 2;
  overflow: visible;
}

.work .win-bar {
  position: relative;
  z-index: 2;
}

.photo {
  position: absolute;
  left: -39px;
  top: -99px;
  width: 450px;
  height: 450px;
  z-index: 2;
  pointer-events: none;
}

.photo img {
  width: 450px;
  height: 450px;
  object-fit: cover;
}

.remind {
  position: absolute;
  left: 835px;
  top: 269px;
  width: 249px;
  height: 116px;
  z-index: 6;
}

.site {
  position: absolute;
  left: 314px;
  top: 395px;
  width: 212px;
  height: 102px;
  z-index: 7;
}

.contact {
  position: absolute;
  left: 722px;
  top: 369px;
  width: 333px;
  height: 184px;
  z-index: 8;
}

.note {
  position: absolute;
  left: 353px;
  top: 475px;
  width: 239px;
  height: 85px;
  z-index: 9;
  pointer-events: none;
}

.note .for-light,
.note .for-dark {
  display: block;
}

.note .for-dark {
  visibility: hidden;
}

:root[data-theme="dark"] .note .for-light {
  display: block;
  visibility: hidden;
}

:root[data-theme="dark"] .note .for-dark {
  visibility: visible;
}

.note-circle {
  position: absolute;
  left: 0;
  top: 39px;
  width: 162px;
  height: 51px;
}

.note-label {
  position: absolute;
  left: 42px;
  top: 53px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.note-arrow {
  position: absolute;
  left: 163px;
  top: 3px;
  width: 75px;
  height: 74px;
}

.note-arrow.for-dark {
  top: -6px; 
}

.win {
  display: flex;
  flex-direction: column;
  background: var(--window);
  border: 1.25px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--text);
  transform-origin: center center;
}

.win-bar {
  height: 25px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--window);
}

.win-bar p {
  margin: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}

.controls {
  width: 45px;
  height: 12px;
  flex: none;
}

.win-body {
  padding: 16px;
}

.launch-body,
.contact-body,
.site-body {
  display: flex;
  flex-direction: column;
}

.launch-body {
  gap: 10px;
}

.launch-lead,
.launch-rest,
.m-launch-title {
  margin: 0;
  font-weight: 800;
}

.launch-lead {
  font-size: 22px;
  line-height: 26px;
}

.launch-rest {
  font-size: 22px;
  line-height: 22px;
}

.tag {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.work,
.work .win-bar {
  background: var(--work);
  color: var(--work-text);
  border-color: var(--work-line);
}

.work .win-bar {
  border-bottom-color: var(--work-line);
}

.remind .win-bar {
  background: var(--remind-bar);
  color: var(--remind-bar-text);
}

.remind-copy {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 16px;
}

.contact.win,
.contact .win-bar {
  background: var(--contact);
  border-color: var(--contact-line);
}

.contact .win-bar {
  color: var(--contact-title);
  border-bottom-color: var(--contact-line);
}

.contact-body {
  gap: 10px;
  color: var(--contact-body);
}

.contact-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}

.contact-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.site-copy {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.site-body {
  gap: 12px;
}

.progress {
  width: 180px;
  height: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid var(--progress-line);
}

.progress i {
  width: 6px;
  height: 6px;
  background: var(--lime);
}

.mail {
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 18px;
  background: var(--button);
  color: var(--button-text);
  border: 1px solid var(--button-line);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
}

.mail img {
  width: 20px;
  height: 20px;
  flex: none;
}

.mail:hover {
  background: var(--button-hover);
}

.mail:focus-visible {
  outline: 2px solid var(--button-text);
  outline-offset: 3px;
}

.mail:active {
  transform: translate(1px, 1px);
}

.mobile {
  display: none;
}

@media (max-width: 859px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
    width: 100%;
    padding: 0 20px;
    container-type: inline-size;
  }

  .m-scale {
    position: relative;
    height: calc(100cqi * 797 / 282);
    overflow: visible;
  }

  .m-frame {
    position: absolute;
    top: 0;
    left: calc(-54px * (100cqi / 282px));
    width: 390px;
    height: 797px;
    background: var(--page);
    color: var(--text);
    transform: scale(calc(100cqi / 282px));
    transform-origin: top left;
  }

  .m-header {
    position: absolute;
    left: 54px;
    top: 16px;
    width: 282px;
    height: 72px;
  }

  .m-header-top {
    position: relative;
    height: 36px;
  }

  .m-themes {
    position: absolute;
    right: 0;
    top: 2px;
    gap: 20px;
  }

  .m-logo {
    position: absolute;
    left: 0.7px;
    top: 3.24px;
    width: 26.55px;
    height: 29.16px;
  }

  .m-logo img {
    width: 26.55px;
    height: 29.16px;
  }

  .m-status {
    position: absolute;
    left: 192.23px;
    top: 3.24px;
    width: 90.72px;
    height: 29.16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.5px;
    border: 0.81px solid var(--status-line);
    color: var(--status-text);
    font-size: 9.72px;
    font-weight: 500;
    line-height: 14.58px;
  }

  .m-status img {
    width: 4.86px;
    height: 4.86px;
  }

  .m-kicker {
    position: absolute;
    left: 0;
    top: 46px;
    margin: 0;
    width: 264px;
    font-size: 9.72px;
    font-weight: 400;
    line-height: 14.58px;
    color: var(--meta);
  }

  .m-rule {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.81px;
    background: var(--divider);
    transform-origin: center;
  }

  .m-main {
    position: absolute;
    left: 63px;
    top: 106px;
    width: 264px;
    height: 521px;
  }

  .m-hero {
    position: absolute;
    left: 20px;
    top: -2px;
    width: 224px;
    height: 98px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .m-hero-top {
    position: relative;
    z-index: 6;
    height: 43px;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.1px;
  }

  .m-po,
  .m-highlight > span:first-child,
  .m-bottom {
    margin: 0;
    font-weight: 900;
    white-space: nowrap;
  }

  .m-po,
  .m-highlight > span:first-child {
    font-size: 39px;
    line-height: 43px;
    letter-spacing: -1.17px;
  }

  .m-bottom {
    position: relative;
    z-index: 2;
    width: 224px;
    font-size: 33px;
    line-height: 35px;
    letter-spacing: -0.99px;
    text-align: center;
  }

  .m-highlight {
    position: relative;
    width: 110px;
    height: 43px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--highlight);
    border: 0.81px solid var(--highlight-line);
    color: var(--highlight-text);
  }

  .m-handles span {
    position: absolute;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    background: var(--handle);
    border: 0.81px solid var(--handle-line);
  }

  .m-handles span:nth-child(1) { left: -3px; top: -3px; }
  .m-handles span:nth-child(2) { left: 52px; top: -3px; }
  .m-handles span:nth-child(3) { left: 107px; top: -3px; }
  .m-handles span:nth-child(4) { left: -3px; top: 19px; }
  .m-handles span:nth-child(5) { left: 107px; top: 19px; }
  .m-handles span:nth-child(6) { left: -3px; top: 40px; }
  .m-handles span:nth-child(7) { left: 52px; top: 40px; }
  .m-handles span:nth-child(8) { left: 107px; top: 40px; }

  .m-line {
    position: absolute;
    left: 9px;
    top: 75px;
    width: 205px;
    height: 7px;
    z-index: 2;
    transform-origin: left center;
  }

  .m-line img {
    width: 205px;
    height: 8px;
  }

  .m-cursor {
    position: absolute;
    left: 194px;
    top: 34px;
    width: 16px;
    height: 22px;
    z-index: 9;
    transform-origin: 8% 4%;
  }

  .m-cursor img {
    width: 16px;
    height: 22px;
  }

  .m-scene {
    position: absolute;
    left: 20px;
    top: 83px;
    width: 224px;
    height: 227px;
  }

  .m-win {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--window);
    border: 1px solid var(--line);
    color: var(--text);
    box-shadow: 4.05px 4.05px 0 rgba(27, 28, 28, 0.13);
    transform-origin: center center;
  }

  :root[data-theme="dark"] .m-win {
    box-shadow: 4.05px 4.05px 0 rgba(0, 0, 0, 0.4);
  }

  .m-mini {
    box-shadow: 3.27px 3.27px 0 rgba(27, 28, 28, 0.13);
  }

  :root[data-theme="dark"] .m-mini {
    box-shadow: 3.27px 3.27px 0 rgba(0, 0, 0, 0.4);
  }

  .m-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex: none;
    border-bottom: 1px solid var(--line);
    background: inherit;
  }

  .m-bar p {
    margin: 0;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
  }

  .m-ico {
    width: 53.46px;
    height: 14.58px;
    flex: none;
  }

  .m-ico-sm {
    width: 26.17px;
    height: 7.14px;
    flex: none;
  }

  .m-work {
    left: 5px;
    top: 0;
    z-index: 3;
    width: 213px;
    height: 176px;
    background: var(--work);
    border-color: var(--work-line);
    color: var(--work-text);
    overflow: visible;
  }

  .m-bar-work {
    position: relative;
    z-index: 2;
    height: 29.16px;
    padding: 0 16px;
    border-bottom-color: var(--work-line);
    color: var(--work-text);
    background: var(--work);
  }

  .m-bar-work p {
    font-size: 9.72px;
    line-height: 14.58px;
  }

  .m-photo {
    position: absolute;
    left: -22px;
    top: -46px;
    z-index: 2;
    width: 258px;
    height: 258px;
    pointer-events: none;
  }

  .m-photo img {
    width: 258px;
    height: 258px;
    object-fit: cover;
  }

  .m-stack {
    position: absolute;
    left: -13px;
    top: 111px;
    z-index: 3;
    width: 146.55px;
    height: 112.6px;
  }

  .m-stack .m-win {
    width: 136.08px;
    height: 102.14px;
  }

  .m-back { left: 0; top: 0; z-index: 1; }
  .m-mid { left: 5.23px; top: 5.23px; z-index: 2; }
  .m-front { left: 10.47px; top: 10.47px; z-index: 3; }

  .m-bar-mini,
  .m-bar-remind,
  .m-bar-site {
    height: 15.7px;
    padding: 0 8px;
  }

  .m-bar-remind {
    height: 15.62px;
  }

  .m-bar-mini p,
  .m-bar-remind p,
  .m-bar-site p {
    font-size: 6.54px;
    line-height: 9.16px;
  }

  .m-mini-body {
    padding: 16px 16px 0;
  }

  .m-launch-lead,
  .m-launch-rest,
  .m-tag {
    margin: 0;
  }

  .m-launch-lead,
  .m-launch-rest {
    font-weight: 800;
    font-size: 11.12px;
    line-height: 12px;
  }

  .m-launch-rest {
    margin-top: 4px;
  }

  .m-tag {
    margin-top: 3.4px;
    font-size: 7.2px;
    font-weight: 500;
    line-height: 11px;
  }

  .m-remind {
    left: 109px;
    top: 158px;
    z-index: 6;
    width: 128px;
    height: 60px;
  }

  .m-bar-remind {
    background: var(--remind-bar);
    color: var(--remind-bar-text);
    border-bottom-color: var(--line);
  }

  .m-remind-body {
    padding: 8px 10px 0;
  }

  .m-remind-body p {
    margin: 0;
    font-size: 8px;
    font-weight: 700;
    line-height: 10px;
  }

  .m-contact {
    left: 10px;
    top: 296px;
    z-index: 7;
    width: 219px;
    height: 181px;
    background: var(--contact);
    border-color: var(--contact-line);
  }

  .m-bar-contact {
    height: 29.16px;
    padding: 0 16px;
    background: var(--contact);
    color: var(--contact-title);
    border-bottom-color: var(--contact-line);
  }

  .m-bar-contact p {
    font-size: 9.72px;
    line-height: 14.58px;
  }

  .m-contact-body {
    display: flex;
    flex-direction: column;
    padding: 16px;
    color: var(--contact-body);
  }

  .m-contact-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 21px;
  }

  .m-contact-text {
    margin: 15.9px 0 0;
    font-size: 12.96px;
    font-weight: 500;
    line-height: 19.44px;
  }

  .m-frame .m-mail {
    height: 33px;
    margin-top: 12px;
    padding: 0 10px;
    border-width: 0.81px;
    font-size: 13px;
    line-height: 16px;
  }

  .m-frame .m-mail img {
    width: 19.44px;
    height: 19.44px;
  }

  .m-site {
    left: 124px;
    top: 460px;
    z-index: 8;
    width: 132px;
    height: 61px;
  }

  .m-bar-site {
    height: 15.84px;
  }

  .m-site-body {
    padding: 16px 8px 0;
  }

  .m-site-body p {
    margin: 0;
    font-size: 7.92px;
    font-weight: 500;
    line-height: 10.56px;
  }

  .m-progress {
    width: 116px;
    margin-top: 3.2px;
    height: 5.28px;
    display: flex;
    align-items: center;
    gap: 3.96px;
    padding: 0 1.98px;
    border: 0.66px solid var(--progress-line);
  }

  .m-progress i {
    width: 2.64px;
    height: 2.64px;
    background: var(--lime);
  }

  .m-footer {
    position: absolute;
    left: 54px;
    top: 621px;
    width: 282px;
  }

  .m-footer .m-status {
    position: relative;
    left: auto;
    top: auto;
    width: 91px;
    height: 30px;
    margin-bottom: 12px;
    font-size: 10px;
  }

  .m-privacy {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 16px;
  }

  .m-footer .m-rule {
    position: relative;
  }

  .m-footer p {
    margin: 10.53px 0 0;
    font-size: 9.72px;
    font-weight: 400;
    line-height: 14.58px;
  }

  .m-footer .m-copy {
    margin-top: 9.72px;
    color: var(--footer-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .fade,
  .draw,
  .pop,
  .open {
    animation: none;
    opacity: 1;
    transform: none;
  }
}