@font-face {
  font-family: "Noto Sans SC";
  src: url("./assets/fonts/noto-sans-sc-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("./assets/fonts/noto-sans-sc-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("./assets/fonts/manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Oooh Baby";
  src: url("./assets/fonts/oooh-baby.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  color: #17212b;
  background: #fcfcfd;
  font-family: Manrope, "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { height: 100vh; height: 100dvh; }
/* Full-bleed canvas; capped content sizing prevents oversized type on large displays. */
.page {
  position: relative;
  width: 100%;
  height: 100%;
  --unit: min(.82vw, 1.457vh, 15px);
  --unit: min(.82vw, 1.457dvh, 15px);
  isolation: isolate;
  overflow: hidden;
  background: #fcfcfd;
}
.svg-definitions { position: absolute; overflow: hidden; }
.atmosphere, .hero-illustration, .bottom-waves {
  position: absolute;
  z-index: -1;
  display: block;
  pointer-events: none;
}
.atmosphere { inset: 0; width: 100%; height: 100%; }
.hero-illustration { left: 46%; top: 13%; width: 50%; height: 49%; }
.bottom-waves { left: 0; bottom: 0; width: 100%; height: 21%; }
button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible { outline: 2px solid #607d70; outline-offset: 5px; }
p, h1, h2 { margin: 0; }
.header {
  position: absolute;
  top: 4.5%;
  left: 6.3397%;
  right: 6.3995%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: calc(.8971 * var(--unit)); }
.brand img { display: block; width: calc(2.7 * var(--unit)); height: calc(2.7 * var(--unit)); }
.brand span { font-size: calc(1.6746 * var(--unit)); line-height: 1; font-weight: 650; letter-spacing: calc(-.07 * var(--unit)); }
.version { color: #717b89; font-size: calc(1.0167 * var(--unit)); letter-spacing: calc(.07 * var(--unit)); line-height: 1.6; }
.hero { position: absolute; top: 31.5%; left: 13%; }
.eyebrow { font-size: calc(.8134 * var(--unit)); font-weight: 500; line-height: 1.5; letter-spacing: calc(.3828 * var(--unit)); color: #687384; }
h1 { margin-top: calc(1.85 * var(--unit)); font-weight: 400; font-size: calc(3.11 * var(--unit)); letter-spacing: calc(-.0646 * var(--unit)); line-height: 1.35; }
.download {
  margin-top: calc(1.9 * var(--unit));
  width: calc(18.7799 * var(--unit));
  height: calc(3.3493 * var(--unit));
  border: calc(.06 * var(--unit)) solid #182127;
  border-radius: calc(10 * var(--unit));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.1364 * var(--unit));
  padding-left: calc(.7177 * var(--unit));
  background: radial-gradient(ellipse at 47% 4%, #303a41 0, #242d34 48%, #1d252b 100%);
  color: #f5f7f8;
  box-shadow: 0 calc(.4187 * var(--unit)) calc(1.0167 * var(--unit)) #222d3410, inset 0 calc(.0598 * var(--unit)) calc(.1794 * var(--unit)) #ffffff12;
  font-size: calc(.9868 * var(--unit));
  font-weight: 450;
  white-space: nowrap;
}
.windows { width: calc(1.4354 * var(--unit)); height: calc(1.555 * var(--unit)); flex: none; filter: drop-shadow(0 0 calc(.18 * var(--unit)) #ffffff22); }
.arrow { width: calc(1.1364 * var(--unit)); height: calc(1.1364 * var(--unit)); margin-left: calc(.1196 * var(--unit)); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.handwriting {
  position: absolute;
  left: 80.5%;
  top: 31.5%;
  color: #87909d;
  font-family: "Oooh Baby", cursive;
  font-size: calc(2.3923 * var(--unit));
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: calc(.0359 * var(--unit));
  transform: rotate(-12deg);
  text-align: right;
}
.handwriting span { display: block; margin-top: calc(.2392 * var(--unit)); padding-right: calc(.5383 * var(--unit)); }
.features {
  position: absolute;
  top: 72%;
  left: 13%;
  width: 71%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature { position: relative; text-align: center; }
.feature + .feature::before {
  content: "";
  position: absolute;
  top: calc(.5981 * var(--unit));
  left: 0;
  height: calc(5 * var(--unit));
  width: calc(.0598 * var(--unit));
  background: #e1e5e8;
}
.feature-icon {
  display: block;
  margin: 0 auto calc(1.35 * var(--unit));
  width: calc(2.05 * var(--unit));
  height: calc(2.05 * var(--unit));
  fill: none;
  stroke: #15202b;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 calc(.12 * var(--unit)) calc(.12 * var(--unit)) #25344116);
}
.feature h2 { font-size: calc(1.1962 * var(--unit)); font-weight: 600; line-height: 1.5; letter-spacing: calc(.0239 * var(--unit)); white-space: nowrap; }
.feature p { margin-top: calc(.5 * var(--unit)); font-size: calc(1.0766 * var(--unit)); line-height: 1.6; font-weight: 400; letter-spacing: calc(.0239 * var(--unit)); color: #687484; white-space: nowrap; }
.footer {
  position: absolute;
  left: 6.3397%;
  right: 6.3397%;
  bottom: 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { font-size: calc(1.0766 * var(--unit)); font-weight: 700; letter-spacing: calc(-.0419 * var(--unit)); }
.footer-right { display: flex; align-items: center; }
.footer-nav { display: flex; align-items: center; gap: calc(2.0335 * var(--unit)); }
.footer-nav button { font-size: calc(.8373 * var(--unit)); color: #75808e; letter-spacing: calc(.0598 * var(--unit)); white-space: nowrap; }
.footer-divider { width: calc(1.4952 * var(--unit)); height: calc(.0598 * var(--unit)); margin-left: calc(3.8876 * var(--unit)); margin-right: calc(3.7679 * var(--unit)); background: #8c97a7; }
.footer-tagline { font-size: calc(.7775 * var(--unit)); letter-spacing: calc(.1435 * var(--unit)); color: #75808e; white-space: nowrap; }