/* Sofatap — Mint Calm (暮色薄荷). Colour tokens follow the product's receiver design. */
:root {
  --canvas: #11191B;
  --surface: #1E2A2C;
  --surface-deep: #172123;
  --border: #334346;
  --mint: #98E9C4;
  --mint-soft: #2A4A40;
  --text: #F0F5F3;
  --muted: #A8BAB7;
  --on-mint: #11191B;
  --on-mint-muted: #22403A;
  --focus: #98E9C4;

  /* Latin fonts first, so curly quotes and apostrophes never borrow full-width CJK glyphs. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    system-ui, sans-serif;
  --radius-lg: 1.5rem;
  --radius: 1rem;
  --page: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
html:lang(zh-CN) {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Zen Hei", system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Zen Hei", system-ui, sans-serif;
}
html:lang(zh-CN) body { line-height: 1.75; }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: var(--mint); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem; top: 0.75rem;
  z-index: 20;
  transform: translateY(calc(-100% - 1rem));
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--on-mint);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(17 25 27 / 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgb(51 67 70 / 0.6);
}
.site-header__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-inline-end: auto;
}
.brand__mark { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; }
/* The wordmark is a fixed-outline SVG (src/assets/sofatap-wordmark.svg); never re-typeset it. */
.brand__wordmark { width: auto; height: 1.42rem; margin-top: 0.12rem; }
.brand__nick {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  padding-inline-start: 0.6rem;
  border-inline-start: 1px solid var(--border);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a, .lang-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-nav a:hover, .lang-menu__toggle:hover { background: var(--surface); }

/* Language menu: a disclosure with real links, so it works without script. */
.lang-menu { position: relative; }
.lang-menu__toggle { border: 1px solid var(--border); cursor: pointer; list-style: none; user-select: none; }
.lang-menu__toggle::-webkit-details-marker { display: none; }
.lang-menu__toggle svg { width: 1.1rem; height: 1.1rem; color: var(--mint); flex: none; }
.lang-menu[open] .lang-menu__chevron { transform: rotate(180deg); }
.lang-menu__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  width: max-content;
  min-width: 13rem;
  max-width: min(18rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 0.5);
}
.lang-menu__list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.6rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
}
.lang-menu__list a:hover { background: var(--surface-deep); }
.lang-menu__list a[aria-current="page"] { color: var(--mint); font-weight: 650; }
.lang-menu__list a[aria-current="page"]::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--mint);
}

@media (max-width: 44rem) {
  /* Not sticky on small screens, but still positioned: its z-index keeps the open language
     menu above the hero (the header's backdrop filter makes it its own stacking context). */
  .site-header { position: relative; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { justify-content: space-between; column-gap: 0; }
  .site-nav a { padding: 0 0.6rem; }
}
@media (max-width: 24rem) {
  .brand__nick { display: none; }
  .site-nav a { padding: 0 0.4rem; font-size: 0.9rem; }
  .lang-menu__toggle { padding: 0 0.6rem; }
}

/* Shared type */
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--mint);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html:lang(zh-CN) .eyebrow { letter-spacing: 0.12em; text-transform: none; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; }
h1, .section-title { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }

.section-title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.section-lead {
  margin: 0 0 1.5rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* Buttons and the iPhone entry */
.button, .get-app__link, .get-app__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem clamp(1rem, 4vw, 1.4rem);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}
.button svg, .get-app__link svg, .get-app__pending svg { width: 1.2rem; height: 1.2rem; flex: none; }
.button--ghost { border: 1px solid var(--border); color: var(--text); background: transparent; }
.button--ghost:hover { border-color: var(--mint); background: var(--surface); }
.get-app, .get-android { max-width: 100%; }
.get-android[hidden] { display: none; }
.get-app__link { background: var(--mint); color: var(--on-mint); }
.get-app__link:hover { background: #B3F0D3; }
.get-app__pending {
  margin: 0;
  background: var(--surface);
  border: 1px dashed var(--muted);
  color: var(--text);
}
.get-app__pending svg { color: var(--mint); }
.get-app__link span, .get-app__pending span { overflow-wrap: anywhere; }
.get-app__meta, .get-desktop__meta { margin-block: 0.5rem 0; margin-inline: 0.25rem 0; color: var(--muted); font-size: 0.875rem; }
/* The desktop button: one icon on the inline-start side, the computer's once src/platform.js knows it. */
.get-desktop { max-width: 100%; }
.get-desktop__link span { overflow-wrap: anywhere; }
.get-desktop__link .os-icon { display: none; }
.get-desktop__link[data-os="unknown"] .os-icon[data-os="unknown"],
.get-desktop__link[data-os="windows"] .os-icon[data-os="windows"],
.get-desktop__link[data-os="mac"] .os-icon[data-os="mac"],
.get-desktop__link[data-os="linux"] .os-icon[data-os="linux"] { display: block; }

/* Hero */
.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.75rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
}
.hero__text { min-width: 0; }
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}
.hero h1 em { font-style: normal; color: var(--mint); }
html:lang(zh-CN) .hero h1 { letter-spacing: 0; }
.lead { margin: 0 0 2rem; font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--muted); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1rem; }
.hero__note { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.9rem; }
figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }

/* The hero pairs the copy with the living-room line art; the film and the live demo follow. */
.hero__text { max-width: 46rem; }
/* .hero__art.art-frame outranks the generic .art-frame rules further down. */
.hero__art.art-frame { justify-self: center; width: 100%; max-width: 28rem; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .hero__art.art-frame { justify-self: end; max-width: 34rem; }
}

/* Sections */
.section { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--surface { background: var(--surface-deep); border-block: 1px solid rgb(51 67 70 / 0.5); }
.section__inner { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Line art. Each picture is drawn on a dark ground that matches the page canvas; "lighten" lets
   the section colour (and the gesture section's dots) show through that ground, so no picture
   sits in a visible box. Text and art trade sides from section to section. */
.art-frame { min-width: 0; width: 100%; max-width: 34rem; justify-self: center; }
.art { width: 100%; height: auto; aspect-ratio: 3 / 2; mix-blend-mode: lighten; }
.art-split { display: grid; gap: clamp(1rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(1.25rem, 4vw, 2.5rem); }
.art-split > * { min-width: 0; }
.art-split .section-lead { margin-bottom: 0; }
@media (min-width: 52rem) {
  .art-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .art-split > .art-frame { justify-self: end; }
  .art-split--start > .art-frame { order: -1; justify-self: start; }
}
.setup__aside { display: grid; gap: clamp(1rem, 3vw, 1.75rem); min-width: 0; }

/* Ambient dots behind the gesture section. Static pattern until the script takes over. */
.dot-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  background-image: radial-gradient(circle, rgb(152 233 196 / 0.18) 1px, transparent 1.6px);
  background-size: 28px 28px;
}
.dot-field.is-live { background: none; }

/* Phone → TV simulation */
.how__intro { max-width: 46rem; }
.demo {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: rgb(17 25 27 / 0.78);
  border: 1px solid var(--border);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
}
.demo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.demo__title { margin: 0; min-width: 0; font-weight: 650; font-size: 1.05rem; line-height: 1.45; overflow-wrap: anywhere; }
.demo__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: var(--on-mint);
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  cursor: pointer;
}
.demo__play { max-width: 100%; }
.demo__play:hover { background: #B3F0D3; }
.demo__play svg { width: 1.1rem; height: 1.1rem; flex: none; }
.demo__stop-icon, .demo__play.is-running .demo__play-icon { display: none; }
.demo__play.is-running .demo__stop-icon { display: block; }

.demo__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 4vw, 2.75rem);
  align-items: center;
}
@media (max-width: 40rem) {
  .demo__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* The TV, showing the computer's screen */
.tv-set { width: 100%; min-width: 0; }
.tv {
  padding: clamp(0.35rem, 1.1vw, 0.65rem);
  border-radius: clamp(0.6rem, 1.6vw, 1.1rem);
  background: linear-gradient(170deg, #2A3739, #131B1D);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(240 245 243 / 0.07);
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(0.25rem, 0.8vw, 0.5rem);
  background: #0B1213;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #172325, #0D1516);
  color: var(--text);
  line-height: 1.25;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.5cqw 2.4cqw;
  font-size: 11px;
  font-size: max(10px, 2.4cqw);
  font-weight: 650;
  border-bottom: 1px solid rgb(51 67 70 / 0.7);
}
.app__bar svg { width: 3cqw; height: 3cqw; min-width: 12px; min-height: 12px; color: var(--mint); }
/* The film app's search box: a computer text field the phone can type into. */
.search { margin-inline-start: auto; display: flex; align-items: center; gap: 1cqw; min-width: 0; flex: 0 1 46cqw; }
.search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  flex: 1;
  min-width: 0;
  height: 4.6cqw;
  padding: 0 1.3cqw;
  border-radius: 999px;
  background: #0B1213;
  border: 1px solid #334346;
  outline: 0.35cqw solid transparent;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.app__bar .search__icon { width: 2.4cqw; height: 2.4cqw; min-width: 10px; min-height: 10px; color: var(--muted); flex: none; }
.search__text { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.search__placeholder { color: #7D8F92; overflow: hidden; text-overflow: ellipsis; }
.search__caret { display: none; width: 0.25cqw; min-width: 1px; height: 2.8cqw; background: var(--mint); flex: none; }
.search.has-text .search__placeholder { display: none; }
.search.is-focused .search__field { border-color: var(--mint); }
.search.is-focused .search__caret { display: block; }
.search.is-focused.has-blink .search__caret { visibility: hidden; }
.search__clear, .search__go { display: grid; place-items: center; flex: none; outline: 0.35cqw solid transparent; }
.search__clear { width: 4cqw; height: 4cqw; border-radius: 50%; color: var(--muted); visibility: hidden; }
.app__bar .search__clear svg { width: 2.4cqw; height: 2.4cqw; min-width: 10px; min-height: 10px; color: currentColor; }
.search.has-text .search__clear { visibility: visible; }
.search__go { height: 4.6cqw; padding: 0 1.8cqw; border-radius: 999px; background: #233335; color: var(--text); white-space: nowrap; }
.search__field.is-hover, .search__clear.is-hover, .search__go.is-hover { outline-color: rgb(240 245 243 / 0.5); }
.search__go.is-hover { background: var(--mint); color: var(--on-mint); }
.tile[hidden] { display: none; }
.app__view { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 2.2cqw 2.4cqw; }
.app__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2cqw;
}
.tile {
  position: relative;
  border-radius: 1.2cqw;
  outline: 0.45cqw solid transparent;
  outline-offset: 0.35cqw;
  transition: outline-color 0.12s ease, transform 0.15s ease;
}
.poster { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.2cqw; }
.poster svg { width: 100%; height: 100%; }
.poster--1 { background: linear-gradient(180deg, #0A1828, #143A40); }
.poster--2 { background: linear-gradient(180deg, #F08A5D, #8E4A7C 70%); }
.poster--3 { background: linear-gradient(180deg, #13234A, #1F3766); }
.poster--4 { background: linear-gradient(180deg, #F7C99B, #F2B07E); }
.poster--5 { background: linear-gradient(180deg, #0E1726, #253A55); }
.poster--6 { background: linear-gradient(180deg, #123524, #1E5A3B); }
.poster--7 { background: linear-gradient(180deg, #3A0F1C, #6E1E2B); }
.poster--8 { background: linear-gradient(180deg, #BDEFE3, #6CC2BC); }
.poster--9 { background: linear-gradient(180deg, #2A1F52, #5B3F8C); }
.tile__title {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 3cqw 1.3cqw 0.9cqw;
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.78));
  color: #fff;
  font-size: 9px;
  font-size: max(8px, 2cqw);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile.is-hover { outline-color: rgb(240 245 243 / 0.5); }
.tile.is-selected { outline-color: var(--mint); }
.tile.is-held { transform: scale(1.04); }
.tile__badges { position: absolute; top: 1cqw; inset-inline-end: 1cqw; display: flex; gap: 0.7cqw; }
.badge { display: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--mint) center / 62% no-repeat; }
.badge--list { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 3.5h9v13l-4.5-3.2-4.5 3.2z' fill='%2311191B'/%3E%3C/svg%3E"); }
.badge--seen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8' fill='none' stroke='%2311191B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-listed .badge--list, .is-seen .badge--seen { display: block; }

.menu {
  position: absolute;
  z-index: 5;
  min-width: 31cqw;
  padding: 0.8cqw;
  border-radius: 1.4cqw;
  background: rgb(30 42 44 / 0.97);
  border: 1px solid #40565A;
  box-shadow: 0 2cqw 5cqw rgb(0 0 0 / 0.55);
  transform-origin: 0 0;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.25cqw 1.8cqw;
  border-radius: 1cqw;
  font-size: 11px;
  font-size: max(10px, 2.4cqw);
  white-space: nowrap;
}
.menu__item svg { width: 2.6cqw; height: 2.6cqw; min-width: 11px; min-height: 11px; flex: none; color: var(--mint); }
.menu__item.is-hover { background: var(--mint); color: var(--on-mint); }
.menu__item.is-hover svg { color: var(--on-mint); }
.menu[hidden], .player[hidden] { display: none; }

.player { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #000; }
.player__art { position: absolute; inset: 0; transform-origin: 50% 45%; }
.player__art .poster { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.player__top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 2cqw 2.4cqw;
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
}
.player__back {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.7cqw 1.6cqw;
  border-radius: 999px;
  background: rgb(17 25 27 / 0.75);
  color: var(--text);
  font-size: max(9px, 2.2cqw);
  outline: 0.4cqw solid transparent;
}
.player__back svg { width: 2.4cqw; height: 2.4cqw; min-width: 10px; min-height: 10px; }
.player__back.is-hover { outline-color: var(--mint); }
.player__toggle {
  position: absolute;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: rgb(17 25 27 / 0.6);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
.player__toggle svg { width: 5cqw; height: 5cqw; }
.player__toggle.is-hover, .is-paused .player__toggle { opacity: 1; }
.player__resume, .is-paused .player__pause { display: none; }
.is-paused .player__resume { display: block; }
.player__foot { position: absolute; inset-inline: 0; bottom: 0; padding: 3cqw 2.6cqw 2.6cqw; background: linear-gradient(transparent, rgb(0 0 0 / 0.75)); }
.player__title { margin: 0 0 1.2cqw; color: #fff; font-size: max(11px, 3.2cqw); font-weight: 700; }
.player__bar { height: 0.8cqw; min-height: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
.player__bar span { display: block; width: 6%; height: 100%; background: var(--mint); }

.cursor {
  position: absolute;
  z-index: 10;
  left: 20%;
  top: 80%;
  width: 4cqw;
  min-width: 15px;
  height: auto;
  pointer-events: none;
  transform: translate(-21%, -10%);
  filter: drop-shadow(0 0.3cqw 0.5cqw rgb(0 0 0 / 0.5));
}
.is-dragging .cursor { transform: translate(-21%, -10%) scale(0.88); }
.tv__ring {
  position: absolute;
  z-index: 9;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  border: 0.5cqw solid var(--mint);
  opacity: 0;
  pointer-events: none;
}
.tv__ring--right { border-color: #BCEBFF; box-shadow: 0 0 0 0.6cqw rgb(188 235 255 / 0.25); }

.tv-set__base { position: relative; display: flex; justify-content: center; height: clamp(2.4rem, 5vw, 3.2rem); }
.tv-set__stand { width: 22%; height: 0.55rem; border-radius: 0 0 0.6rem 0.6rem; background: #273436; }
.pc {
  position: absolute;
  inset-inline-end: 3%;
  top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
}
.pc svg { width: clamp(2.6rem, 6vw, 3.6rem); height: auto; }

/* The phone; the touch area lines up with the rounded surface in the screenshot. */
.demo__phone { width: clamp(9.5rem, 20vw, 15rem); }
.phone__frame {
  padding: 0.45rem;
  border-radius: clamp(1.7rem, 4vw, 2.5rem);
  background: linear-gradient(160deg, #2C3A3C, #141C1E);
  box-shadow: 0 2rem 4rem rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(240 245 243 / 0.08);
}
.phone__screen { position: relative; }
.phone__screen img { width: 100%; border-radius: clamp(1.4rem, 3.4vw, 2.1rem); }
.pad {
  position: absolute;
  left: 3.06%;
  right: 3.06%;
  top: 8.24%;
  bottom: 5.1%;
  border-radius: 10% / 4.8%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.js .pad { cursor: crosshair; }
.pad:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pad__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pad__finger {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  border: 2px solid rgb(240 245 243 / 0.7);
  background: radial-gradient(circle, rgb(240 245 243 / 0.45), rgb(240 245 243 / 0.1) 65%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.pad__finger.is-shown { opacity: 0.5; }
.pad__finger.is-touching { opacity: 1; border-color: var(--mint); background: radial-gradient(circle, rgb(163 255 209 / 0.6), rgb(163 255 209 / 0.15) 65%, transparent 72%); }

/* Text on the phone, laid out like the app (RemoteView): the keyboard button and microphone
   sit at the bottom of the touch surface; the draft composer opens below the surface, and the
   phone keyboard below that. Positions are fractions of the screenshot (720 × 1566). */
.phone__screen { container-type: inline-size; }
.demo__phone { direction: ltr; }
.phone__ui { position: absolute; inset: 0; display: none; border-radius: clamp(1.4rem, 3.4vw, 2.1rem); background: linear-gradient(transparent 8.24%, #090C0F 8.24%); }
.is-composing .phone__ui { display: block; }
.phone__surface {
  position: absolute;
  left: 3.06%;
  right: 3.06%;
  top: 8.24%;
  bottom: 29%;
  border-radius: 10cqw;
  border: 1px solid rgb(152 233 196 / 0.16);
  background:
    radial-gradient(circle, rgb(152 233 196 / 0.32) 0.28cqw, transparent 0.4cqw) 0 0 / 3.5cqw 3.5cqw,
    linear-gradient(160deg, #10181A, #080C0F);
}
.is-keyboard .phone__surface { bottom: 55%; }
.phone__screen .phone__logo { position: absolute; left: 5%; top: 2.4cqw; width: 13cqw; height: 13cqw; border-radius: 3.4cqw; }
.phone__qr { position: absolute; right: 7%; top: 5.6cqw; width: 6.4cqw; height: 6.4cqw; color: var(--mint); opacity: 0.75; }
.is-composing .pad { bottom: 29%; }
.is-keyboard .pad { bottom: 55%; }
.phone__bar { position: absolute; left: 3.06%; right: 3.06%; bottom: 6.55%; height: 0; z-index: 2; }
.is-composing .phone__bar { bottom: 30.45%; }
.is-keyboard .phone__bar { bottom: 56.45%; }
.phone__key, .phone__mic {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phone__key { left: 11.55%; width: max(32px, 13cqw); height: max(32px, 13cqw); background: none; color: rgb(152 233 196 / 0.65); }
.phone__key svg { width: 6.6cqw; height: auto; }
.phone__key[aria-pressed="true"] { color: var(--mint); }
.phone__mic { left: 50%; width: max(32px, 16.3cqw); height: max(32px, 16.3cqw); background: var(--mint); color: #0B1213; box-shadow: 0 0 0 1.5cqw rgb(152 233 196 / 0.07), 0 0 0 1.75cqw rgb(152 233 196 / 0.18); }
.phone__mic svg { width: 7cqw; height: 7cqw; }
.phone__stop-icon, .is-listening .phone__mic-icon { display: none; }
.is-listening .phone__stop-icon { display: block; width: 5.2cqw; height: 5.2cqw; }
.is-listening .phone__mic { background: #FCA378; }
/* On the resting screen the screenshot already shows both controls; the buttons sit on top of them. */
.demo:not(.is-composing) .phone__key svg, .demo:not(.is-composing) .phone__mic svg { visibility: hidden; }
.demo:not(.is-composing) .phone__key, .demo:not(.is-composing) .phone__mic { background: none; box-shadow: none; }
.phone__key:focus-visible, .phone__mic:focus-visible, .composer button:focus-visible, .composer__draft:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.phone__key.is-pressed, .phone__mic.is-pressed { filter: brightness(1.35); }
.demo:not(.is-composing) .phone__key.is-pressed, .demo:not(.is-composing) .phone__mic.is-pressed { background: rgb(152 233 196 / 0.25); }

.composer { position: absolute; left: 4.5%; right: 4.5%; top: 72.5%; bottom: 5.1%; display: flex; flex-direction: column; gap: 2cqw; }
.composer[hidden] { display: none; }
.is-keyboard .composer { top: 46.5%; bottom: 31.6%; }
.composer__box { position: relative; flex: 1; min-height: max(28px, 8cqw); border-radius: 4.6cqw; background: #182224; }
.composer__draft {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: max(5px, 2.6cqw) max(7px, 3.4cqw);
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--text);
  font: 500 max(12.5px, 5.4cqw)/1.3 var(--font);
  resize: none;
  overflow: hidden;
}
.composer__draft::placeholder { color: #7D8F92; }
.composer__listening { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.6cqw; display: none; color: #FCA378; font-size: max(12.5px, 5.4cqw); line-height: 1.3; pointer-events: none; }
.is-listening .composer__box.is-empty .composer__listening { display: block; }
.composer__row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.composer__close { display: grid; place-items: center; width: max(28px, 10cqw); height: max(28px, 10cqw); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.composer__close svg { width: 5.4cqw; height: 5.4cqw; }
.composer__send {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  height: max(28px, 10cqw);
  min-width: max(56px, 20cqw);
  justify-content: center;
  padding: 0 4cqw;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: #0B1213;
  font: 650 max(12px, 4.4cqw)/1 var(--font);
  cursor: pointer;
}
.composer__send svg { width: max(11px, 4cqw); height: max(11px, 4cqw); }
.composer__send:disabled { opacity: 0.45; cursor: default; }
.composer__check, .is-sent .composer__arrow { display: none; }
.is-sent .composer__check { display: block; }
.is-sent .composer__send:disabled { opacity: 1; }
.composer__send.is-pressed { filter: brightness(1.15); transform: scale(0.96); }

.keys { position: absolute; left: 0; right: 0; top: 69.5%; bottom: 0; display: none; flex-direction: column; justify-content: flex-start; gap: 2.4cqw; padding: 2.6cqw 1cqw 0; border-radius: 0 0 clamp(1.4rem, 3.4vw, 2.1rem) clamp(1.4rem, 3.4vw, 2.1rem); background: #1A2123; }
.is-keyboard .keys { display: flex; }
.keys__row { display: flex; justify-content: center; gap: 1.5cqw; }
.keys__row i { width: 8.4cqw; height: 10.4cqw; border-radius: 1.4cqw; background: #3A4648; box-shadow: 0 0.3cqw 0 rgb(0 0 0 / 0.35); }
.keys__row .keys__wide { width: 12cqw; background: #2A3436; }
.keys__row .keys__space { width: 46cqw; }
.keys__row i.is-pressed { background: var(--mint); }

.demo__help { display: grid; gap: 0.4rem; margin-top: 1.25rem; }
.demo__hint { margin: 0; font-weight: 500; }
.demo__keys { margin: 0; color: var(--muted); font-size: 0.9rem; }
.demo__status {
  margin: 0.35rem 0 0;
  min-height: 2.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.95rem;
}
.no-js .demo__hint, .no-js .demo__keys, .no-js .demo__status { display: none; }
.demo figcaption { margin-top: 1rem; }
@media (max-width: 40rem) {
  .demo__phone { width: min(12.5rem, 62%); }
}

/* Gestures */
.gestures {
  margin: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.gesture {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.gesture__icon { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; color: var(--mint); }
.gesture dt { font-weight: 650; line-height: 1.35; }
.gesture dd { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.gesture { transition: border-color 0.2s ease, background-color 0.2s ease; }
.gesture.is-active { border-color: var(--mint); background: var(--mint-soft); }
.gesture.is-active dd { color: var(--text); }

/* Voice and text steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  counter-increment: step;
}
.step::after {
  content: counter(step);
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
}
.step__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--mint);
  color: var(--on-mint);
}
.step__icon svg { width: 1.6rem; height: 1.6rem; }
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { margin: 0; color: var(--muted); }

.callout {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem;
  border-inline-start: 3px solid var(--mint);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  max-width: 48rem;
}
.callout--quiet { border-inline-start-color: var(--muted); color: var(--muted); }

/* Setup */
.setup { list-style: none; margin: 0; padding: 0; counter-reset: setup; }
.setup li {
  position: relative;
  padding-block: 0 1.5rem;
  padding-inline: 3.5rem 0;
  counter-increment: setup;
}
.setup li::before {
  content: counter(setup);
  position: absolute;
  inset-inline-start: 0;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--mint);
  color: var(--mint);
  font-family: var(--font-display);
  font-weight: 700;
}
.setup li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 2.4rem;
  bottom: 0.2rem;
  border-inline-start: 1px dashed var(--border);
}
.setup h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.setup p { margin: 0; color: var(--muted); }

.privacy {
  padding: clamp(1rem, 4vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.privacy h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.privacy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.privacy li { position: relative; padding-inline-start: 1.75rem; overflow-wrap: anywhere; }
.privacy li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  top: 0.55em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}

/* Downloads */
.platforms {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 64rem) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.platform {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.platform__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.35rem; }
.platform h3 { font-size: 1.4rem; }
.tag {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.tag--status { border-style: dashed; border-color: var(--muted); color: var(--text); }
.platform--iphone[data-state="available"] .tag--status { border-style: solid; border-color: var(--mint); color: var(--mint); }
.platform__req { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.platform__note { margin: 1rem 0 0; color: var(--muted); font-size: 0.92rem; }
.platform__links { margin: auto 0 0; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.92rem; }
.platform__links a { display: inline-block; padding: 0.3rem 0; }
.pkgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.pkg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--mint);
  color: var(--on-mint);
  text-decoration: none;
}
.pkg:hover { background: #B3F0D3; }
.pkg svg { grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; }
.pkg__label { font-weight: 700; line-height: 1.3; }
.pkg__meta { font-size: 0.8rem; line-height: 1.3; color: var(--on-mint-muted); }
/* With src/platform.js: this computer's card first, everything else under "Other downloads". */
.platform--current { border-color: var(--mint); }
.downloads-other { margin-top: 1rem; }
.downloads-other > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.downloads-other > summary::-webkit-details-marker { display: none; }
.downloads-other > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid var(--mint);
  border-block-end: 2px solid var(--mint);
  transform: rotate(-45deg);
}
[dir="rtl"] .downloads-other > summary::before { transform: rotate(45deg); }
.downloads-other[open] > summary::before { transform: rotate(45deg); }
[dir="rtl"] .downloads-other[open] > summary::before { transform: rotate(-45deg); }
.downloads-other > summary:hover { color: var(--mint); }
.downloads-other__list { margin-top: 0.75rem; }

/* FAQ */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  overflow-wrap: anywhere; /* long words wrap instead of widening the page at large text sizes */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--mint);
  font-size: 1.4rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0.25rem 1.25rem; color: var(--muted); max-width: 44rem; }

/* Open source */
.open-source__inner {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-items: start;
}
.open-source__inner > * { min-width: 0; }
.open-source img { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }
.open-source p { margin: 0; color: var(--muted); max-width: 38rem; }
.open-source .section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.5rem; }
@media (min-width: 48rem) { .open-source__inner { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 2.5rem 0 3rem; color: var(--muted); font-size: 0.9rem; }
.site-footer__inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1rem; }
.site-footer__brand { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 700; }
.site-footer__brand img { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }
.site-footer__brand .site-footer__wordmark { width: auto; height: 1.1rem; border-radius: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { display: inline-block; padding: 0.35rem 0; }
.site-footer__legal { margin: 0; font-size: 0.8rem; max-width: 48rem; }

/* Privacy and support pages: the product documents, republished unchanged */
.legal-page__inner { max-width: 52rem; }
.legal-tabs ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.legal-tabs a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.legal-tabs a:hover { border-color: var(--mint); background: var(--surface); }
.legal-tabs a[aria-current="page"] { background: var(--mint); border-color: var(--mint); color: var(--on-mint); font-weight: 650; }
.legal-page .callout { margin: 0 0 2rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.legal h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 2.5rem 0 0.75rem; }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 1rem; }
.legal strong { color: var(--text); }
.legal ul, .legal ol { margin: 0 0 1rem; padding-inline-start: 1.5rem; display: grid; gap: 0.5rem; }
.legal a { overflow-wrap: anywhere; }
.legal code {
  padding: 0.05rem 0.35rem;
  border-radius: 0.35rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.legal__table { max-width: 100%; overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal th, .legal td { padding: 0.65rem 0.8rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--muted); }
.legal th { color: var(--text); background: var(--surface); font-weight: 650; }
.legal tr:last-child td { border-bottom: 0; }
.legal td:first-child { color: var(--text); min-width: 8rem; }
.legal td:nth-child(2) { min-width: 9rem; }
.legal td:nth-child(3) { min-width: 16rem; }
.legal .num { text-align: end; font-variant-numeric: tabular-nums; }
.legal__source { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
.legal__source a { overflow-wrap: anywhere; }

/* The film, straight after the hero, with no box: no border, ring, shadow or card. Its own dark
   edges are the page colour, so the picture meets the page directly. Once src/film-player.js takes
   over, the outer 2.5 % (sides) and 3 % (top and bottom) feather into the page; the corner
   wordmark and the UI start further in, and captions are drawn in their own layer so they never
   fade. Without the script the native player and its captions stay as they are. */
.section.video { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.film { max-width: 64rem; margin: 0 auto; }
.film__stage { position: relative; }
.video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--canvas); }
.film.is-ready .video__player {
  cursor: pointer;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.film__captions {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 88%;
  margin: 0;
  padding: 0.12em 0.55em;
  border-radius: 4px;
  font-size: clamp(14px, 1.55vw, 22px);
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  color: var(--text);
  background: rgb(17 25 27 / 0.82);
  pointer-events: none;
}
.film__captions[hidden], .film__controls[hidden] { display: none; }
.film__controls { display: flex; justify-content: flex-end; gap: 0.25rem; margin-top: 0.25rem; }
.film__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.film__btn[data-action="play"] { color: var(--mint); }
.film__btn:hover { color: var(--mint); background: rgb(152 233 196 / 0.08); }
.film__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film__i-play path { fill: currentColor; }
.film__btn[data-state="play"] .film__i-pause, .film__btn[data-state="pause"] .film__i-play,
.film__btn[data-state="on"] .film__i-off, .film__btn[data-state="off"] .film__i-on,
.film__btn:not([data-state]) .film__i-pause, .film__btn:not([data-state]) .film__i-off { display: none; }
/* Native captions (no script): readable on phones, about 22 px on desktop. With the player
   running, the HTML layer is the only visible caption, even if a browser shows the track itself. */
.video__player::cue { font-size: clamp(14px, 1.55vw, 22px); line-height: 1.4; color: var(--text); background: rgb(17 25 27 / 0.82); }
.film.is-ready .video__player::cue { visibility: hidden; }
.video__downloads { display: grid; gap: 1rem; margin-top: 1.5rem; justify-items: start; }
/* Scripts other than Latin: fonts, line height, no letter-spacing that would break joined scripts. */
html:lang(ja) { --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "IPAPGothic", system-ui, sans-serif; --font-display: var(--font); }
html:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", "WenQuanYi Zen Hei", system-ui, sans-serif; --font-display: var(--font); }
html:lang(ar) { --font: "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, "DejaVu Sans", system-ui, sans-serif; --font-display: var(--font); }
html:lang(hi) { --font: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", "FreeSans", system-ui, sans-serif; --font-display: var(--font); }
html:lang(ja) body, html:lang(ko) body, html:lang(hi) body { line-height: 1.75; }
html:lang(ar) body { line-height: 1.8; }
html:lang(ja) .eyebrow, html:lang(ko) .eyebrow, html:lang(ar) .eyebrow, html:lang(hi) .eyebrow { letter-spacing: 0.02em; text-transform: none; }
html:lang(ar) .eyebrow, html:lang(hi) .eyebrow,
html:lang(ar) h1, html:lang(ar) .section-title, html:lang(hi) h1, html:lang(hi) .section-title { letter-spacing: normal; }
html:lang(ja) .hero h1, html:lang(ko) .hero h1 { letter-spacing: 0; }
html:lang(ja) h1, html:lang(ja) .section-title { word-break: auto-phrase; }
[dir="rtl"] .faq summary::after { margin-inline-start: 0; }

/* Motion: one-time and gentle, only when the visitor hasn't asked for less. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero__text > * { animation: rise 0.7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__text > :nth-child(2) { animation-delay: 0.06s; }
  .hero__text > :nth-child(3) { animation-delay: 0.12s; }
  .hero__text > :nth-child(4) { animation-delay: 0.18s; }
  .hero__text > :nth-child(5) { animation-delay: 0.24s; }
  .hero__art { animation: settle 1s cubic-bezier(.2, .7, .2, 1) 0.1s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .get-app__pending, .pkg, .platform, .step, .gesture, .privacy { border: 1px solid CanvasText; }
}