@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}

/* Dark only, like the brand: the wordmark's letters are light silver. #171c1d is the intro's last frame. */
:root {
  color-scheme: dark;
  --bg: #171c1d;
  --surface: #1f2527;
  --line: #2c3437;
  --fg: #dfeaf2;
  --dim: #93a0a6;
  --accent: #00bfff;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Hero: the viewer's intro, full-bleed ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  /* The intro takes what the screen has left, so the whole page fits one screen on a desktop. */
  height: max(190px, min(calc(100svh - 545px), 56.25vw));
  container-type: size;
}
@media (max-width: 700px) {
  .hero { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
.intro {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* The video draws its own logo; the page's logo only shows when the video doesn't play.
   Sized to sit on the intro's last frame (ink ≈ 39% of the video's width). */
.logo {
  position: absolute; left: 50%; top: 50%;
  width: calc(0.556 * min(100cqw, 177.78cqh));
  transform: translate(-50%, -50%);
  opacity: 0;
  line-height: 0;
}
.logo img { width: 100%; height: auto; }
.tagline {
  position: absolute; left: 0; right: 0;
  top: calc(50% + 0.165 * min(177.78cqh, 100cqw) * 0.5625);
  padding: 0 16px;
  text-align: center;
  color: var(--dim);
  font-size: clamp(13px, calc(0.019 * min(100cqw, 177.78cqh)), 24px);
  letter-spacing: .005em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hero.done .tagline, .hero.still .tagline { opacity: 1; transform: none; }

.hero.still { background: var(--bg); }
.hero.still .intro { display: none; }
.hero.still .logo { opacity: 1; }
/* No intro video: the logo and tagline sit in the page's flow, close to the features below. */
.hero.still { height: auto; min-height: 0; padding: clamp(28px, 6vh, 64px) 16px 0; container-type: normal; }
.hero.still .logo { position: static; transform: none; width: min(560px, 72vw); margin: 0 auto; }
.hero.still .tagline { position: static; margin-top: calc(-0.07 * min(560px, 72vw)); font-size: clamp(14px, 1.6vw, 20px); }

@media (prefers-reduced-motion: reduce) {
  .hero { background: var(--bg); }
  .intro { display: none; }
  .logo { opacity: 1; }
  .tagline { opacity: 1; transform: none; transition: none; }
}

.icon-btn {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, background .2s;
}
.icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.icon-btn[hidden] { display: none; }
.icon-btn svg { width: 22px; height: 22px; }
.sound .on, .sound[aria-pressed="true"] .off { display: none; }
.sound[aria-pressed="true"] .on { display: block; }

/* ---------- Three points ---------- */
main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 28px 0 0;
  text-align: center;
}
@media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); padding-top: 36px; } }
.point svg { width: 26px; height: 26px; color: var(--accent); }
.point h2 { margin-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.point p { margin-top: 4px; color: var(--dim); }

/* ---------- Download ---------- */
.download { padding: 18px 0 0; text-align: center; }
.community { padding: 14px 24px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; }
.community h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.community p { color: var(--dim, #8a9099); font-size: 14px; }
.community .platforms { margin-top: 0; }
.download h2 { font-size: clamp(22px, 3vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.status { margin-top: 6px; color: var(--dim); min-height: 1.55em; }
.platforms {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 12px;
}
.platform {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 160px; justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.platform svg { width: 20px; height: 20px; }
.platform .ver { font-weight: 400; color: var(--dim); font-size: 14px; }
.platform .ver:empty { display: none; }
.platform[aria-disabled="true"] { color: var(--dim); opacity: .55; cursor: default; }
.platform:not([aria-disabled="true"]):hover { border-color: var(--accent); }
.platform.mine:not([aria-disabled="true"]) { background: var(--accent); border-color: var(--accent); color: #031016; }
.platform.mine:not([aria-disabled="true"]) .ver { color: #031016; opacity: .7; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}
.footer .mark { display: none; }
.footer .privacy { color: var(--fg); margin-bottom: 2px; }
.tagline .heart { width: 1em; height: 1em; vertical-align: -.12em; fill: #00bfff; }

.beta { display: inline-block; margin-left: .5em; padding: .1em .6em; border: 1px solid #00bfff; border-radius: 999px;
        color: #00bfff; font-size: .62em; letter-spacing: .12em; text-transform: uppercase; vertical-align: .25em; }
.notice { max-width: 760px; margin: 0 auto; padding: 14px 24px 10px; text-align: center; }
.notice h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; }
.notice p { color: var(--dim, #8a9099); margin-top: 4px; line-height: 1.45; font-size: 13px; }
.notice strong { color: var(--fg, #e8eaed); font-weight: 600; }

/* ---------- Release notes ---------- */
.releases { max-width: 720px; padding-bottom: 32px; }
.releases .back { display: block; width: 160px; margin: 28px auto 0; }
.releases .back img { width: 100%; height: auto; display: block; }
.releases h1 { margin-top: 8px; text-align: center; font-size: clamp(22px, 3vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.releases .status { text-align: center; }
.releases .status[hidden] { display: none; }
.latest { margin-top: 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.latest h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.latest .date { color: var(--dim); font-size: 14px; }
.latest h3 { margin: 18px 0 4px; font-size: 15px; font-weight: 600; color: var(--accent); }
.latest ul { margin: 0; padding-left: 20px; }
.latest li { margin-top: 6px; }
#earlier { margin-top: 28px; }
#earlier[hidden] { display: none; }
#earlier h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.history { list-style: none; margin: 8px 0 0; padding: 0; }
.history li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.history .ver, .history .date { color: var(--dim); font-size: 14px; }
@media (max-width: 560px) {
  .history li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .history .headline { grid-column: 1 / -1; grid-row: 2; }
}
.footer .links { margin-bottom: 4px; }
.footer .links a { color: var(--fg); }