:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #101615; color: #e8eeeb; font-family: Arial, Helvetica, sans-serif; }
.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #101615 url("/design/assets/background.png") center / cover no-repeat;
}
@supports (min-height: 100dvh) { .stage { min-height: 100dvh; } }
.handwriting-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(100dvh * 1672 / 941));
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.handwriting-formulas { clip-path: inset(0 72% 0 0); }
.handwriting-formulas.echo { opacity: .55; }
.handwriting-vectors {
  width: max(88%, calc(100dvh * 1672 / 941 * .88));
  left: calc(50% - 20px);
  transform: translate(-50%, -50%) scaleY(.966);
  clip-path: inset(0 21% 0 45%);
  opacity: .8;
}
.header, .hero, .footer { position: relative; z-index: 1; }
.header { height: 66px; border-bottom: 1px solid rgba(112, 147, 137, .18); }
.content-line { width: min(780px, calc(100% - 48px)); height: 100%; margin: 0 auto; padding-left: 47px; }
.header .content-line, .footer .content-line { display: flex; align-items: center; }
.nav-mark { position: relative; width: 125px; height: 34px; overflow: hidden; }
.nav-mark img { position: absolute; left: -14px; top: -17px; width: 150px; height: auto; filter: url(#black-to-alpha); }
.hero { position: absolute; top: 42%; left: 50%; width: min(780px, calc(100% - 48px)); transform: translateX(-50%); }
.hero-mark { position: relative; width: 520px; max-width: 100%; aspect-ratio: 520 / 143; margin-top: 19px; overflow: hidden; }
.hero-mark img { position: absolute; left: 0; top: -35%; width: 100%; height: auto; filter: url(#black-to-alpha); }
.tagline { margin: 14px 0 0 47px; font-size: 20px; font-weight: 400; letter-spacing: .7px; line-height: 1.35; color: #bfceca; white-space: nowrap; }
.footer { position: absolute; right: 0; bottom: 0; left: 0; height: 50px; border-top: 1px solid rgba(112, 147, 137, .18); }
.footer .content-line { font-size: 11px; color: #849a93; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 568px) {
  .content-line { padding-left: calc(9vw - 4px); }
  .hero { top: 38%; }
  .tagline { margin-left: calc(9vw - 4px); font-size: clamp(13px, calc(3.85vw - 1.85px), 20px); white-space: normal; }
}