:root {
  --black: #080808;
  --ink: #f1f0ea;
  --muted: #b3b1aa;
  --dim: #93918a;
  --line: #2b2b29;
  --warm: #e8b36a;
}

[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 40; padding: 12px 18px; background: var(--ink); color: var(--black); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.knowledge-page { width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 64px; overflow: visible; min-height: 70vh; }
.knowledge-page h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.16; letter-spacing: -.025em; margin: 24px 0; overflow-wrap: anywhere; }
.knowledge-page h1 .ph { font-size: .75em; color: var(--warm); margin-right: 12px; }
.knowledge-page h2 { font-size: 23px; line-height: 1.3; margin: 0 0 16px; }
.knowledge-page h3 { font-size: 18px; line-height: 1.4; margin: 20px 0 10px; }
.knowledge-page p, .knowledge-page li, .knowledge-page dd { font-size: 17px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.knowledge-page a:hover { color: var(--warm); }
.knowledge-page :focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.knowledge-page .article-intro { font-size: 20px; max-width: 760px; color: var(--ink); }
.knowledge-article { max-width: 800px; margin: 0 auto; }
.knowledge-article section { margin: 36px 0; }
.knowledge-article li { padding-left: 6px; margin-bottom: 14px; }
.knowledge-article ol { padding-left: 24px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 24px; }
.breadcrumbs a .ph { font-size: 12px; margin-left: 8px; }
.breadcrumbs span { color: var(--ink); }
.search-label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 16px 0; margin: 24px 0; border-bottom: 1px solid var(--line); }
.search-label .ph { font-size: 23px; color: var(--warm); }
.search-label span { grid-column: 2; font-size: 14px; color: var(--muted); }
.search-label input { grid-column: 2; min-width: 0; width: 100%; background: #151513; border: 1px solid #55544d; border-radius: 6px; padding: 12px; color: var(--ink); font: inherit; font-size: 17px; }
.article-list { padding: 0; margin: 24px 0 40px; list-style: none; }
.article-list li { border-bottom: 1px solid var(--line); margin: 0; }
.article-list a { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; }
.article-list a > div { flex: 1; min-width: 0; }
.article-list h2 { font-size: 21px; color: var(--ink); margin: 0 0 8px; }
.article-list p { font-size: 16px; margin: 0; max-width: 780px; }
.article-list .ph { font-size: 23px; flex: none; margin-top: 3px; color: var(--warm); }
.platform-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0 16px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.table-scroll td { color: var(--muted); }
kbd { font-family: ui-monospace, monospace; color: var(--ink); white-space: nowrap; font-size: 14px; }
.control-reference { margin: 0; }
.control-reference > div { border-bottom: 1px solid var(--line); padding: 18px 0; }
.control-reference dt { font-weight: 600; display: flex; gap: 12px; align-items: center; }
.control-reference dt .ph { font-size: 22px; color: var(--warm); }
.control-reference dd { margin: 12px 0 0 34px; }
.article-picture, .world-reference img { width: 100%; height: auto; display: block; margin: 24px 0; }
.world-reference details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.world-reference summary { cursor: pointer; font-size: 20px; line-height: 1.5; }
.world-reference summary .ph { color: var(--warm); font-size: 23px; margin: 0 12px; vertical-align: middle; }
.related-topics a, .comparison-sources a { color: var(--warm); text-decoration: underline; text-underline-offset: 4px; }
.download-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); margin-top: 40px; }
.download-cta h2, .download-cta.compact > div > p:first-child { font-size: 24px; color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.download-cta p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }
.download-cta > a, .app-store-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--black); background: var(--warm); border-radius: 6px; padding: 12px 18px; text-align: center; }
.download-cta > a:hover, .app-store-link:hover { color: var(--black); background: var(--ink); }
.download-cta > a { flex-shrink: 0; max-width: 360px; }
.hero-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid #66645e;
  border-radius: 8px;
  background: #101010;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hero-download:hover { border-color: var(--ink); background: #1b1b1b; }
.hero-copy .hero-download { margin-top: 28px; }
.hero-music-credit { display: none; }
.hero-download img { width: 24px; height: 24px; flex-shrink: 0; filter: invert(1); mix-blend-mode: screen; }
.hero-download:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.listing-pending { border-left: 2px solid var(--warm); padding: 12px 20px; margin: 28px 0; }
.app-store-badge { display: inline-block; padding: 12px; margin: 16px 0; }
.app-store-badge img { display: block; height: 40px; width: auto; }
.legacy-help-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; padding: 16px 0; border-top: 1px solid var(--line); }
.audience-resources { width: min(1280px, calc(100% - 88px)); margin: 48px auto; }
.audience-resources > h2 { max-width: 850px; font-size: clamp(30px, 3vw, 42px); line-height: 1.18; letter-spacing: -.035em; font-weight: 500; }
.audience-resources-intro { max-width: 820px; margin: 16px 0 26px; }
.audience-resources-intro a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.audience-resources > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.audience-resources h3 { font-size: 19px; line-height: 1.4; margin-bottom: 10px; }
.audience-resources h3 .ph { color: var(--warm); margin-right: 10px; }
.audience-resources h3 a { color: var(--ink); font-size: inherit; }
.audience-resources h3 a:hover { color: var(--warm); }
.audience-resources p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.audience-resources a { color: var(--warm); font-size: 15px; }
.audience-resources-more { display: flex; flex-wrap: wrap; gap: 16px 26px; margin: 26px 0 0; }
.audience-resources-more a { color: var(--ink); border-bottom: 1px solid #77736b; }
.audience-resources-more a:hover { color: var(--warm); border-color: var(--warm); }
.audience-resources-more i { margin-left: 4px; }
.home-privacy-note { width: min(1280px, calc(100% - 88px)); margin: -42px auto 54px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.home-privacy-note i { color: var(--warm); margin-right: 8px; font-size: 17px; vertical-align: -1px; }
.workflow-compare { width: min(1280px, calc(100% - 88px)); margin: 0 auto 60px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow-compare p { max-width: 850px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.workflow-compare a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.workflow-compare a:hover { color: var(--warm); }
main > .download-cta { width: min(1280px, calc(100% - 88px)); margin: 32px auto 54px; }
@media (max-width: 700px) {
  .knowledge-page { width: calc(100% - 32px); padding-top: 20px; }
  .knowledge-page h1 { margin-top: 16px; }
  .knowledge-page p, .knowledge-page li, .knowledge-page dd { font-size: 16px; }
  .platform-locations, .audience-resources > div { grid-template-columns: 1fr; gap: 8px; }
  .download-cta { flex-direction: column; align-items: flex-start; }
  .download-cta > a { max-width: 100%; flex-shrink: 1; }
  .audience-resources, main > .download-cta, .workflow-compare { width: calc(100% - 32px); margin: 36px auto; }
  .home-privacy-note { width: calc(100% - 32px); margin: -16px auto 38px; }
  .article-list a { gap: 12px; }
  .article-list h2 { font-size: 19px; }
  .knowledge-page .article-intro { font-size: 18px; }
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--black);
  color: var(--ink);
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
main { min-height: 100vh; overflow: hidden; }

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(1520px, 100%);
  height: 84px;
  margin: 0 auto;
  padding: 0 clamp(22px, 4vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-toggle { display: none; }
.wordmark {
  position: relative;
  width: 200px;
  height: 34px;
  display: block;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.wordmark img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.wordmark-live {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.brand-meter {
  width: 70px;
  height: 13px;
  margin-left: -5px;
  display: grid;
  grid-template-columns: repeat(16, minmax(1px, 1fr));
  gap: 2px;
  flex: none;
}
.brand-meter-segment {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(242, 188, 115, .14);
}
.brand-meter-segment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(242, 188, 115);
  opacity: calc(.78 + var(--fill, 0) * .18);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

header nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
header nav a {
  color: var(--muted);
  font-size: 13px;
  transition: color 160ms ease;
}
header nav a:hover,
header nav a[aria-current="page"] { color: var(--ink); }
header nav .nav-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: #1b1712;
  color: var(--ink);
  border: 1px solid #806449;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
header nav .nav-download:hover { border-color: var(--warm); background: #292016; color: var(--ink); }
header nav .nav-download i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--warm); font-size: 18px; }
.language-picker { position: relative; color: var(--dim); font-size: 11px; }
.language-picker label { display: flex; align-items: center; gap: 9px; }
.language-toggle,
.language-menu { display: none; }
.language-picker select {
  max-width: 154px;
  border: 0;
  border-bottom: 1px solid #474640;
  border-radius: 0;
  padding: 4px 18px 4px 2px;
  background: var(--black);
  color: var(--muted);
  font: inherit;
}
.language-picker select:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
.language-suggestion {
  width: min(620px, calc(100% - 44px));
  margin: 20px auto 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  background: #0e0e0d;
}
.language-suggestion[hidden] { display: none; }
.language-suggestion p { margin: 0; color: var(--muted); font-size: 13px; }
.language-suggestion > div { display: flex; align-items: center; gap: 15px; }
.language-suggestion button { border: 0; padding: 5px; background: transparent; color: var(--muted); cursor: pointer; }

.section-label {
  margin: 0 0 24px;
  color: var(--warm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.text-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #66645e;
  color: var(--ink);
  font-size: 14px;
  transition: color 160ms ease, border-color 160ms ease;
}
.text-link:hover { color: var(--warm); border-color: var(--warm); }
.text-link i { font-size: 17px; }

.hero {
  position: relative;
  isolation: isolate;
  width: min(1600px, calc(100% - clamp(28px, 4vw, 64px)));
  min-height: min(clamp(580px, 52vw, 820px), max(500px, calc(100svh - 132px)));
  margin: 24px auto 0;
  padding: clamp(40px, 5vw, 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #101619;
}
.hero-video,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-video {
  z-index: -3;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #101619;
}
.hero-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 7, 8, .8) 0%, rgba(4, 7, 8, .5) 34%, rgba(4, 7, 8, .08) 66%, transparent 100%),
    linear-gradient(0deg, rgba(3, 5, 6, .75) 0%, transparent 25%);
  transition: opacity 300ms ease;
}
.hero.is-playing-with-sound .hero-scrim { opacity: .18; }
.hero-copy {
  width: min(500px, 50%);
  padding-bottom: 60px;
  transition: opacity 300ms ease;
}
.hero.is-playing-with-sound .hero-copy {
  opacity: 0;
  pointer-events: none;
}
.hero h1,
.section-heading h2,
.visual-intro h2,
.gif-section h2,
.manifesto-section h2,
.support-cta h2,
.privacy-section h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.06em;
}
.hero h1 {
  max-width: 650px;
  font-size: clamp(62px, 7.4vw, 116px);
  line-height: .92;
}
.hero-category {
  max-width: 480px;
  margin: 26px 0 0;
  color: var(--ink);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.hero-platforms { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.hero-platforms i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--warm); font-size: 27px; }
.hero-platforms span { display: block; }
.hero-intro {
  max-width: 540px;
  margin: 38px 0 36px;
  color: #c2c1bb;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -.02em;
}
.hero-media-bar {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 38px);
  left: clamp(20px, 3vw, 42px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.hero-media-bar p { margin: 0; display: grid; gap: 3px; }
.hero-media-bar strong { font-size: 13px; font-weight: 600; }
.hero-media-bar p span { color: rgba(241, 240, 234, .62); font-size: 12px; }
.hero-media-controls { display: flex; align-items: center; gap: 8px; }
.media-control {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 8, 9, .68);
  color: var(--ink);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.media-control:hover,
.media-control:focus-visible {
  border-color: rgba(232, 179, 106, .72);
  background: rgba(14, 14, 12, .84);
  color: var(--warm);
}
.media-control:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
.media-control:disabled { cursor: progress; }
.media-control-sound.is-loading i { animation: hero-loading-spin 900ms linear infinite; }
@keyframes hero-loading-spin { to { transform: rotate(360deg); } }
.media-control-sound {
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
}
.media-control-icon {
  width: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
}

.feature-section,
.visual-section,
.platform-section,
.direction-section,
.gif-section,
.audience-section,
.manifesto-section,
.support-cta,
.privacy-section {
  width: min(1384px, calc(100% - clamp(44px, 8vw, 136px)));
  margin: 0 auto;
  padding: clamp(52px, 5.5vw, 78px) 0;
  border-top: 1px solid var(--line);
}
.feature-section { padding-bottom: clamp(52px, 5.5vw, 78px); }
.feature-section,
.platform-section,
.direction-section {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr);
  gap: clamp(55px, 10vw, 150px);
}
.feature-section,
.direction-section {
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
  gap: clamp(48px, 6vw, 84px);
}
.feature-section .capability-list {
  display: flex;
  flex-direction: column;
}
.feature-section .capability { flex: 1; }
.section-heading h2,
.visual-intro h2,
.gif-section h2,
.manifesto-section h2,
.support-cta h2,
.privacy-section h2 {
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1.02;
}

.capability-list { border-top: 1px solid var(--line); }
.capability {
  padding: 28px 0 32px;
  display: grid;
  grid-template-columns: 38px 36px minmax(130px, .55fr) minmax(250px, 1fr);
  align-items: start;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}
.capability > span { color: var(--dim); font-size: 11px; padding-top: 5px; }
.capability > i { font-size: 25px; color: var(--warm); }
.capability h3 { margin: 2px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.capability p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.product-shot {
  margin: 0;
}
.supporting-shot {
  width: 100%;
  max-width: none;
  margin-top: clamp(30px, 3.5vw, 48px);
}
.product-shot picture,
.product-shot img {
  width: 100%;
  display: block;
}
.product-shot img { height: auto; }
.product-shot picture {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #050505;
}
.product-shot figcaption,
.gif-demo figcaption {
  max-width: 720px;
  margin-top: 14px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.55;
}

.visual-section {
  display: block;
  padding-top: clamp(60px, 6vw, 86px);
  padding-bottom: clamp(60px, 6vw, 86px);
}
#features,
#visuals,
#platforms { scroll-margin-top: 30px; }
.visual-intro {
  margin-bottom: clamp(28px, 3vw, 42px);
  padding-right: clamp(0px, 9vw, 124px);
}
.visual-intro h2 { max-width: 1100px; }
.visual-intro > p:last-child {
  max-width: 690px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.visual-atlas { min-width: 0; }
.visual-list {
  --visible-worlds: 3;
  --visual-gap: 28px;
  --visual-peek: 64px;
  margin: 0;
  padding: 8px 0 16px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--visible-worlds) * var(--visual-gap) - var(--visual-peek)) / var(--visible-worlds));
  gap: var(--visual-gap);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--warm) transparent;
}
.visual-list:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }
.visual-list li { min-width: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); scroll-snap-align: start; }
.visual-preview { display: block; margin-bottom: 18px; cursor: zoom-in; }
.visual-preview:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.visual-preview picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: #050505; }
.visual-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual-caption { display: flex; align-items: flex-start; gap: 10px; }
.visual-caption > i { flex-shrink: 0; color: var(--warm); font-size: 23px; line-height: 1.3; }
.visual-caption h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.visual-description { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.visual-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; }
.visual-gallery-position { color: var(--muted); font-size: 14px; line-height: 1.5; }
.visual-gallery-buttons { display: flex; gap: 10px; }
.visual-gallery-buttons[hidden] { display: none; }
.visual-gallery-buttons button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--black); color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
.visual-gallery-buttons button:hover:not(:disabled) { color: var(--warm); border-color: var(--warm); }
.visual-gallery-buttons button:disabled { opacity: .35; cursor: default; }
.visual-gallery-buttons button:focus-visible, .visual-dialog-close:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.visual-gallery-all { margin-left: auto; color: var(--ink); font-size: 14px; line-height: 1.5; border-bottom: 1px solid #77736b; }
.visual-gallery-all:hover { color: var(--warm); border-color: var(--warm); }
.visual-gallery-all i { margin-left: 5px; font-size: 15px; }
.visual-gallery-all:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.visual-dialog { width: min(1100px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); background: var(--black); color: var(--ink); overflow-y: auto; }
.visual-dialog::backdrop { background: rgba(0, 0, 0, .85); }
body:has(.visual-dialog[open]) { overflow: hidden; }
.visual-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 12px auto; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 24px; cursor: pointer; }
.visual-dialog-image { display: block; width: 100%; max-height: 65dvh; aspect-ratio: 16 / 9; object-fit: contain; background: #050505; }
.visual-dialog h2 { margin: 20px 0 0; font-size: 24px; font-weight: 500; line-height: 1.3; }
.visual-dialog-description { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 56px); }
.platform-grid-three { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 42px); }
.platform-grid article { padding-top: 4px; }
.platform-grid > article > i { display: block; margin-bottom: 18px; color: var(--warm); font-size: 30px; }
.platform-grid h3 { margin: 0 0 10px; font-size: 25px; font-weight: 500; letter-spacing: -.035em; }
.platform-grid p,
.platform-note {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.platform-note a { color: #c8c6bf; border-bottom: 1px solid #5b5b57; }
.platform-note a:hover { color: var(--warm); border-color: var(--warm); }
.platform-guidance { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.platform-guidance p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.platform-guidance strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.platform-guidance a, .home-help-strip a, .home-privacy-note a { color: var(--ink); border-bottom: 1px solid #77736b; }
.platform-guidance a:hover, .home-help-strip a:hover, .home-privacy-note a:hover { color: var(--warm); border-color: var(--warm); }
.home-help-strip { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.home-help-strip > i { color: var(--warm); font-size: 20px; flex: none; }
.home-help-strip p { margin: 0; }
.localized-home > .home-help-strip { width: min(1384px, calc(100% - clamp(44px, 8vw, 136px))); margin: 0 auto; padding: 20px 0; border-top: 1px solid var(--line); }

.direction-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--line); }
.direction-list article {
  padding: 22px 0 24px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 12px;
  align-content: start;
  border-bottom: 1px solid var(--line);
}
.direction-list span { color: var(--dim); font-size: 11px; padding-top: 5px; }
.direction-list h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.direction-list p { grid-column: 2; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.gif-section {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  align-items: center;
  gap: clamp(48px, 6vw, 84px);
}
.gif-demo { margin: 0; }
.gif-demo video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #050505;
}
.gif-section > div:last-child > p:not(.section-label),
.manifesto-section > p:last-child,
.support-cta > p:not(.section-label),
.privacy-section > p:not(.section-label) {
  max-width: 690px;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
.gif-section > div:last-child .text-link { margin-top: 24px; }

.manifesto-section {
  padding-right: clamp(0px, 9vw, 124px);
}
.manifesto-section h2 {
  max-width: 1100px;
}
.manifesto-section > p:last-child {
  margin-top: 34px;
}

.audience-section {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr);
  gap: clamp(55px, 10vw, 150px);
}
.audience-grid { border-top: 1px solid var(--line); }
.audience-grid article {
  padding: 28px 0 30px;
  display: grid;
  grid-template-columns: 42px minmax(170px, .7fr) 1fr;
  gap: 22px;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.audience-grid i { color: var(--warm); font-size: 25px; }
.audience-grid h3 { margin: 2px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.audience-grid p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.support-cta { text-align: center; }
.support-cta h2 { max-width: 900px; margin: 0 auto; }
.support-cta > p:not(.section-label) { margin: 34px auto 30px; }
.support-cta .text-link { margin: 0 auto; }

.privacy-section { text-align: center; }
.privacy-section .section-label { text-align: center; }
.privacy-section h2 { max-width: 880px; margin: 0 auto; }
.privacy-section > p:not(.section-label) { margin: 34px auto 30px; }
.privacy-section .text-link { margin: 0 auto; }

footer {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 32px clamp(22px, 4vw, 68px) 42px;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 750px) minmax(100px, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}
.film-credit {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 22px clamp(22px, 4vw, 68px);
  color: var(--dim);
  font-size: 11px;
  line-height: 1.6;
}
.film-credit a { text-decoration: underline; text-underline-offset: 3px; }
.film-credit a:hover { color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
footer nav a:hover { color: var(--ink); }
footer > span:last-child { text-align: right; }

.legal-page {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) 24px 120px;
}
.legal-title { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.legal-title h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(46px, 7vw, 76px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 500;
}
.legal-title p { margin: 18px 0 0; color: var(--dim); font-size: 14px; }
.legal-summary { margin: 40px 0 68px; padding: 0 0 40px; border-bottom: 1px solid var(--line); }
.legal-summary p {
  margin: 0;
  color: #d6d5cf;
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1.48;
  letter-spacing: -.025em;
}
.legal-page section { margin-top: 50px; scroll-margin-top: 24px; }
.legal-page h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; font-weight: 600; }
.legal-page h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; font-weight: 600; }
.legal-page section > p,
.legal-page li,
.permission-list p { color: var(--muted); font-size: 16px; line-height: 1.72; }
.legal-page section > p { margin: 0 0 16px; }
.legal-page ul { margin: 14px 0 20px; padding-left: 22px; }
.legal-page li { padding-left: 5px; }
.legal-page li + li { margin-top: 7px; }
.permission-list { margin: 22px 0 30px; border-top: 1px solid var(--line); }
.permission-list > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.permission-list p { margin: 0; }
.legal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  border-bottom: 1px solid #5b5b57;
  color: var(--ink);
  font-size: 15px;
  transition: color 150ms ease, border-color 150ms ease;
}
.legal-link:hover { color: var(--warm); border-color: var(--warm); }
.legal-link i { font-size: 17px; }

.not-found {
  width: min(900px, calc(100% - 44px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.not-found h1 {
  max-width: 760px;
  margin: 0 0 38px;
  font-size: clamp(52px, 9vw, 112px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.06em;
}
.not-found-secondary { margin-top: 18px; color: var(--muted); }

/* Support */
.support-page { overflow: visible; }
.support-hero {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(82px, 11vw, 154px) 0 clamp(66px, 9vw, 120px);
}
.support-hero h1 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(60px, 9vw, 126px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.065em;
}
.support-hero > p:not(.section-label):not(.support-version) {
  max-width: 680px;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.55;
  letter-spacing: -.02em;
}
.support-hero .support-version {
  margin: 16px 0 0;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .02em;
}
.support-index {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.support-index a {
  min-height: 118px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 160ms ease;
}
.support-index a:hover { background: #11110f; }
.support-index i { color: var(--warm); font-size: 25px; }
.support-index span { display: grid; gap: 7px; }
.support-index strong { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.support-index small { color: var(--dim); font-size: 12px; line-height: 1.4; }

.support-layout {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(90px, 12vw, 170px) auto 140px;
  display: grid;
  grid-template-columns: 200px minmax(0, 820px);
  justify-content: space-between;
  gap: clamp(60px, 10vw, 150px);
}
.support-toc {
  position: sticky;
  top: 36px;
  align-self: start;
  display: grid;
  gap: 13px;
}
.support-toc p {
  margin: 0 0 8px;
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.support-toc a { color: var(--muted); font-size: 13px; }
.support-toc a:hover { color: var(--warm); }
.support-content > section {
  padding: 0 0 clamp(80px, 10vw, 126px);
  scroll-margin-top: 30px;
}
.support-content > section + section {
  padding-top: clamp(80px, 10vw, 126px);
  border-top: 1px solid var(--line);
}
.support-kicker {
  margin: 0 0 18px;
  color: var(--warm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.support-content h2 {
  max-width: 760px;
  margin: 0 0 36px;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
}
.support-content h3 {
  margin: 34px 0 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.support-content p,
.support-content li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}
.support-content p { margin: 0 0 18px; }
.support-content p strong { color: #d7d5cf; font-weight: 500; }
.support-content ol:not(.steps),
.support-content ul { margin: 18px 0 26px; padding-left: 24px; }
.support-content li + li { margin-top: 9px; }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li {
  padding: 25px 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.steps li > span { color: var(--warm); font-size: 12px; padding-top: 7px; }
.steps h3 { margin: 0 0 7px; color: var(--ink); }
.steps p { margin: 0; }
.support-note {
  margin: 34px 0 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  border: 1px solid var(--line);
  background: #0e0e0d;
}
.support-note i { color: var(--warm); font-size: 23px; }
.support-note strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 15px; font-weight: 500; }
.support-note p { margin: 0; color: #b9b7b1; font-size: 14px; }
.support-cards {
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.support-cards.three { grid-template-columns: repeat(3, 1fr); }
.support-cards.two { grid-template-columns: repeat(2, 1fr); }
.support-cards article { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.support-cards h3 { margin: 0 0 12px; font-size: 19px; }
.support-cards p { margin: 0; font-size: 14px; }
.troubleshooting-list { border-top: 1px solid var(--line); }
.troubleshooting-list details { border-bottom: 1px solid var(--line); }
.troubleshooting-list summary {
  padding: 22px 42px 22px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.troubleshooting-list summary::-webkit-details-marker { display: none; }
.troubleshooting-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 20px;
  color: var(--warm);
  font-size: 23px;
  font-weight: 300;
}
.troubleshooting-list details[open] summary::after { content: "−"; }
.troubleshooting-list details > div { padding: 0 42px 22px 0; }
.troubleshooting-list details p { margin: 0; }
.platform-table-wrap {
  width: 100%;
  margin: 28px 0 38px;
  overflow-x: auto;
  border: 1px solid var(--line);
}
.support-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.support-table th,
.support-table td {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}
.support-table tr > :last-child { border-right: 0; }
.support-table tbody tr:last-child > * { border-bottom: 0; }
.support-table thead th {
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #0e0e0d;
}
.support-table tbody th { color: var(--ink); font-weight: 500; }
.support-table.compact th,
.support-table.compact td { padding: 14px 18px; }
.support-definitions { margin: 28px 0 38px; border-top: 1px solid var(--line); }
.support-definitions > div {
  padding: 20px 0;
  display: grid;
  grid-template-columns: minmax(150px, .34fr) 1fr;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.support-definitions dt { color: var(--ink); font-size: 16px; font-weight: 500; }
.support-definitions dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.support-disclosure { margin: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.support-disclosure > summary { padding: 21px 0; cursor: pointer; color: var(--ink); font-size: 17px; font-weight: 500; }
.support-disclosure > div { padding: 0 0 20px; }
.support-disclosure .platform-table-wrap { margin-top: 4px; }
kbd {
  padding: 3px 7px;
  border: 1px solid #343431;
  border-bottom-color: #4c4a45;
  border-radius: 4px;
  background: #11110f;
  color: var(--ink);
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.support-pending { display: flex; align-items: center; gap: 9px; color: var(--dim) !important; font-size: 14px !important; }
.support-pending i { color: var(--warm); }
.support-contact { padding-bottom: 0 !important; }
.support-contact .text-link { margin-top: 10px; }

/* Localized static routes */
.localized-hero h1 { max-width: 840px; font-size: clamp(50px, 7vw, 94px); }
.localized-story { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr); gap: clamp(52px, 9vw, 130px); }
.localized-story > h2 { grid-column: 1; }
.localized-story .localized-prose { grid-column: 2; grid-row: 1 / span 3; }
.localized-prose > p,
.localized-prose > ul { color: var(--muted); font-size: 16px; line-height: 1.7; }
.localized-prose > p { margin: 0 0 24px; }
.localized-prose > h3 { margin: 34px 0 14px; color: var(--warm); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.localized-prose > ul { margin: 0 0 32px; padding-left: 22px; }
.localized-prose li + li { margin-top: 8px; }
.localized-visuals { grid-template-columns: minmax(260px, .56fr) minmax(0, 1.44fr); }
.locale-support-layout { grid-template-columns: minmax(0, 900px); justify-content: center; }
.localized-legal { min-height: 72vh; }

@media (max-width: 1180px) {
  .js .header-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .js .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    justify-self: start;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 23px;
  }
  .js .menu-toggle:focus-visible,
  .js .language-toggle:focus-visible {
    outline: 2px solid var(--warm);
    outline-offset: 2px;
  }
  .js .header-inner > .wordmark,
  .js .header-inner > .wordmark-live {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .js header .language-picker {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0;
    grid-column: 3;
    grid-row: 1;
    display: grid;
    place-items: center;
    justify-self: end;
    color: var(--ink);
    font-size: 21px;
  }
  .js header .language-picker > label { display: none; }
  .js .language-toggle {
    width: 100%;
    height: 100%;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 21px;
  }
  .js .language-menu {
    position: fixed;
    top: 84px;
    right: clamp(22px, 4vw, 68px);
    z-index: 3;
    width: min(300px, calc(100% - 44px));
    max-height: min(620px, calc(100svh - 106px));
    padding: 8px;
    display: grid;
    overflow-y: auto;
    border: 1px solid #3a3935;
    background: rgba(12, 12, 11, .99);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }
  .js .language-menu a {
    min-height: 44px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
  }
  .js .language-menu a:last-child { border-bottom: 0; }
  .js .language-menu a:hover,
  .js .language-menu a:focus-visible,
  .js .language-menu a[aria-current="true"] {
    color: var(--ink);
    background: #171714;
  }
  .js .language-menu a:focus-visible { outline: 1px solid var(--warm); outline-offset: -1px; }
  .js .language-menu a i { color: var(--warm); font-size: 17px; }
  .js .language-picker.is-open .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .js header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    max-height: calc(100svh - 84px);
    padding: 12px clamp(22px, 4vw, 68px) 20px;
    display: grid;
    gap: 0;
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 8, 8, .98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }
  .js header nav a {
    width: 100%;
    padding: 15px 0;
    display: block;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 17px;
  }
  .js header nav a:last-child { border-bottom: 0; }
  .js header nav a.nav-download { width: fit-content; margin-top: 12px; padding: 10px 13px; display: inline-flex; border: 1px solid #806449; color: var(--ink); font-size: 14px; }
  .js header.is-menu-open nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (max-width: 980px) {
  .hero {
    min-height: 620px;
    align-items: center;
  }
  .hero-copy { width: min(540px, 70%); padding-bottom: 72px; }
  .feature-section,
  .visual-section,
  .platform-section,
  .direction-section,
  .gif-section,
  .audience-section { grid-template-columns: 1fr; gap: 62px; }
  .visual-intro { padding-right: 0; }
  .visual-list { --visible-worlds: 2; --visual-gap: 24px; --visual-peek: 48px; }
  .platform-grid-three { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .support-layout { grid-template-columns: minmax(0, 1fr); }
  .support-content,
  .support-content > section { min-width: 0; }
  .platform-table-wrap { max-width: 100%; }
  .support-toc { display: none; }
  .support-cards.three { grid-template-columns: 1fr; }
  .support-cards.two { grid-template-columns: 1fr; }
  .support-definitions > div { grid-template-columns: 1fr; gap: 8px; }
  .gif-section > div:last-child { order: -1; }
  .supporting-shot {
    display: block;
    margin-top: 34px;
  }
  .supporting-shot picture { aspect-ratio: 16 / 9; }
  .supporting-shot img {
    height: 100%;
    object-fit: cover;
  }
  .localized-story { grid-template-columns: 1fr; }
  .localized-story .localized-prose { grid-column: 1; grid-row: auto; }
  .localized-visuals { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .header-inner {
    height: 72px;
    padding-inline: 14px;
  }
  .wordmark-live { flex: none; }
  .wordmark { width: 124px; height: 21px; }
  .brand-meter {
    width: 34px;
    height: 11px;
    margin-left: -3px;
    grid-template-columns: repeat(8, minmax(1px, 1fr));
    gap: 1px;
  }
  .brand-meter-segment:nth-child(n+9) { display: none; }
  .js .language-menu {
    top: 72px;
    right: 14px;
    width: min(300px, calc(100% - 28px));
    max-height: calc(100svh - 86px);
  }
  .js header nav {
    max-height: calc(100svh - 72px);
    padding-inline: 18px;
  }
  .hero {
    width: calc(100% - 28px);
    min-height: 0;
    margin-top: 14px;
    padding: calc((100vw - 28px) * 9 / 16 + 32px) 24px 32px;
    align-items: center;
  }
  .hero-video, .hero-scrim { height: auto; aspect-ratio: 16 / 9; }
  .hero-scrim { background: linear-gradient(0deg, rgba(3, 5, 6, .65), transparent 45%); }
  .hero-copy { width: 100%; padding-bottom: 0; }
  .hero.is-playing-with-sound .hero-copy { opacity: 1; pointer-events: auto; }
  .hero h1 { font-size: clamp(55px, 17vw, 82px); }
  .hero-category { margin-top: 22px; font-size: 17px; }
  .hero-platforms { font-size: 14px; }
  .hero-music-credit { display: block; width: fit-content; margin-top: 20px; color: var(--muted); font-size: 12px; }
  .hero-intro { margin: 24px 0 28px; font-size: 17px; }
  .hero-media-bar {
    top: calc((100vw - 28px) * 9 / 16 - 62px);
    bottom: auto;
    left: 14px;
    right: 14px;
    gap: 8px;
  }
  .hero-media-bar p { display: none; }
  .hero-media-controls { margin-left: auto; }
  .capability {
    grid-template-columns: 30px 30px 1fr;
    gap: 16px;
  }
  .capability p { grid-column: 3; }
  .visual-atlas { min-width: 0; }
  .visual-intro { margin-bottom: 24px; }
  .visual-list { --visible-worlds: 1; --visual-gap: 18px; --visual-peek: 36px; }
  .visual-caption h3 { font-size: 21px; }
  .visual-gallery-controls { gap: 12px; flex-wrap: wrap; }
  .visual-gallery-all { margin-left: 0; }
  .visual-dialog { padding: 16px; }
  .platform-grid, .platform-grid-three, .platform-guidance { grid-template-columns: 1fr; gap: 28px; }
  .platform-guidance { margin-top: 28px; }
  .direction-list { grid-template-columns: 1fr; }
  .home-help-strip { align-items: flex-start; }
  .audience-grid article { grid-template-columns: 34px 1fr; }
  .audience-grid p { grid-column: 2; }
  .support-index { grid-template-columns: 1fr; }
  .support-index a { min-height: auto; }
  .support-cards { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; gap: 18px; }
  footer nav { flex-wrap: wrap; gap: 14px 20px; }
  footer > span:last-child { grid-column: auto; text-align: left; }
  .localized-hero h1 {
    font-size: clamp(38px, 10vw, 46px);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark, .wordmark-live, .hero-copy, .text-link, .hero-download, header nav, header nav a, .language-menu, .legal-link, .media-control { transition: none; }
}

/* Public credits are kept on their dedicated page. */
.public-credits { margin: 0; overflow-wrap: anywhere; }
.public-credits p { max-width: 76ch; color: var(--muted); line-height: 1.6; }
.public-credits a { text-decoration: underline; text-underline-offset: 3px; }
#credits, #setup-title { scroll-margin-top: 110px; }

/* One content width and section rhythm; the hero retains its wider frame. */
.feature-section, .visual-section, .platform-section, .direction-section,
.gif-section, .audience-resources, main > .download-cta, .home-privacy-note {
  width: min(1384px, calc(100% - clamp(44px, 8vw, 136px)));
}
.audience-resources {
  margin: 0 auto;
  padding: clamp(52px, 5.5vw, 78px) 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
  gap: clamp(48px, 6vw, 84px);
}
.audience-resources > .section-heading, .audience-resources > .capability-list { display: block; }
.audience-resources .section-heading h2 { font-size: clamp(44px, 5vw, 70px); line-height: 1.02; }
.audience-resources .section-heading p { max-width: 52ch; }
.audience-resources .capability h3 { margin: 2px 0 0; font-size: 20px; line-height: 1.3; }
.audience-resources .capability h3 a { color: var(--ink); font-size: inherit; }
.audience-resources .capability h3 .ph { margin-left: 6px; margin-right: 0; font-size: 16px; }
.audience-resources .capability p { margin: 0; font-size: 15px; line-height: 1.65; }
@media (max-width: 980px) {
  .audience-resources { grid-template-columns: 1fr; gap: 62px; }
}

.collection-learn-more { font-weight: 400; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The home download action mirrors the hero with an inverted palette. */
.download-cta > .download-action-apple { gap: 12px; min-height: 44px; padding: 11px 16px; border: 1px solid #fff; border-radius: 8px; background: #fff; color: #101010; font-size: 14px; font-weight: 500; line-height: 1.5; }
.download-cta > .download-action-apple:hover { background: #eee; color: #101010; }
.download-action-apple img { width: 24px; height: 24px; flex-shrink: 0; }
.download-action-apple:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }

/* A quiet visualizer halo keeps the download label crisp. */
.download-action-apple, .hero-download { position: relative; isolation: isolate; }
.download-action-apple::before, .hero-download::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -2;
  border-radius: 13px;
  background: linear-gradient(110deg, #58cde8, #8b6bff, #f17bb4, #efb669, #58cde8);
  background-size: 300% 100%;
  filter: blur(13px);
  opacity: .5;
  pointer-events: none;
  animation: download-halo 12s ease-in-out infinite alternate;
  transition: opacity 180ms ease;
}
.download-action-apple:hover::before, .download-action-apple:focus-visible::before, .hero-download:hover::before, .hero-download:focus-visible::before { opacity: .7; }
@keyframes download-halo {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .download-action-apple::before, .hero-download::before { animation: none; transition: none; background-position: 50% 50%; }
}

.download-action-apple::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; pointer-events: none; }
.download-action-apple:hover::after { background: #eee; }

.hero-download::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #101010; pointer-events: none; }
.hero-download:hover::after { background: #1b1b1b; }

/* The 2.0 homepage: actual worlds, simple type, purposeful device movement. */
.home-v2 .brand-meter {display:none}
.home-v2 main {overflow:clip}
.plasma-hero {position:relative;min-height:calc(100svh - 100px);display:flex;align-items:center;margin:0;isolation:isolate;background:#080808}
.plasma-background {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.plasma-hero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.2) 80%),linear-gradient(0deg,#080808,transparent 18%)}
.plasma-copy {width:min(1350px,calc(100% - 100px));margin:0 auto;padding:100px 0 140px}
.plasma-copy h1 {font-size:clamp(64px,8vw,126px);letter-spacing:-.065em;line-height:.98;max-width:850px;margin:0 0 30px;font-weight:500;text-wrap:balance}
.plasma-copy p {font-size:clamp(19px,1.6vw,24px);line-height:1.6;max-width:610px;margin:0 0 35px;color:#e1ded5}
.plasma-actions {display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.plasma-actions .hero-download {position:static;margin:0;background:var(--warm);color:#17120b;border:0;display:inline-flex;align-items:center;gap:12px;padding:17px 24px;border-radius:5px;font-size:17px;text-decoration:none}
.plasma-actions .hero-download img {filter:brightness(0)}
.film-open {display:inline-flex;align-items:center;gap:12px;font:inherit;color:var(--ink);border:0;background:transparent;padding:16px 0;cursor:pointer;text-decoration:underline;text-underline-offset:6px}
.background-control {position:absolute;right:30px;bottom:35px;width:44px;height:44px;background:#111b;color:white;border:1px solid #fff6;border-radius:50%;cursor:pointer;font-size:20px}
.sound-journey {width:min(1440px,calc(100% - 100px));margin:100px auto 60px;display:grid;grid-template-columns:1.25fr 1fr;gap:8%;position:relative}
.journey-stage {position:sticky;top:20vh;height:65vh;align-self:start}
.journey-panel {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .6s ease}
.journey-panel.is-active {opacity:1;visibility:visible;transform:none}
.journey-panel>div {position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.journey-step {min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:80px 0;scroll-margin-top:120px}
.journey-step h2,.shape-section h2,.home-end h2 {font-weight:500;font-size:clamp(40px,4vw,66px);line-height:1.08;letter-spacing:-.045em;margin:0 0 26px;text-wrap:balance}
.journey-step p,.shape-section p {font-size:20px;line-height:1.7;color:var(--muted);margin:0 0 25px;max-width:520px}
.journey-step a,.shape-section a {font-size:16px;color:var(--ink);text-underline-offset:6px}
.journey-step .output-performance {font-size:16px;color:var(--dim)}
.journey-mobile-art {display:none}
.show-device {position:relative;flex-shrink:0}
.device-frame {position:relative;width:100%;display:block;z-index:1;pointer-events:none}
.device-screen {position:absolute;z-index:2;overflow:hidden;background:#080808}
.device-screen video,.device-screen img {width:100%;height:100%;object-fit:cover;display:block}
.device-phone {width:30%}
.device-phone .device-screen {left:4.3%;top:1.8%;width:91.5%;height:96.4%;border-radius:10% / 4.7%}
.device-phone::after {content:"";position:absolute;z-index:3;top:3.2%;left:37%;width:26%;height:2.7%;background:#050505;border-radius:20px}
.device-ipad {width:90%}
.device-ipad .device-screen {left:3.2%;top:4%;width:93.6%;height:91.8%;border-radius:2.7% / 3.6%}
.device-mac {width:110%}
.device-mac .device-screen {left:10.15%;top:6.26%;width:79.74%;height:82.76%;border-radius:1.3% / 1.9%}
.device-mac::after {content:"";position:absolute;z-index:3;left:46%;top:6.26%;width:8%;height:3%;background:#060606;border-radius:0 0 4px 4px}
.scene-mic .device-phone {width:43%;margin:0}
.scene-line .device-ipad {width:100%;margin:0}
.external-screen {position:absolute;top:9%;left:0;width:100%;aspect-ratio:16/9;border:8px solid #232323;border-bottom-width:16px;border-radius:4px;background:#080808;box-shadow:0 1px 0 #888}
.external-screen::after {content:"";position:absolute;top:calc(100% + 16px);left:35%;width:30%;height:3px;background:#444}
.external-screen img {width:100%;height:100%;object-fit:cover}
.scene-output .device-ipad {position:absolute;width:47%;bottom:0;right:-4%}
.shape-section {width:min(1300px,calc(100% - 100px));margin:80px auto 150px;display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center}
.shape-image {overflow:hidden;border:1px solid #393832;border-radius:6px}
.shape-image img {width:100%;height:auto;display:block}
.home-v2 .visual-section {padding-top:40px}
.home-v2 .visual-intro h2 {font-size:clamp(38px,4vw,64px);font-weight:500;letter-spacing:-.04em}
.visual-pending {aspect-ratio:16/9;background:#121311;border:1px solid var(--line);display:grid;place-items:center;color:var(--warm);font-size:64px}
.home-end {text-align:center;padding:150px 30px 130px;border-top:1px solid var(--line);margin-top:100px}
.home-end>p {font-size:19px;color:var(--muted);margin:20px auto 30px}
.home-end>p:last-child {font-size:15px;margin-top:35px}
.home-end .download-action {display:inline-flex;width:auto}
.film-dialog {padding:0;border:1px solid var(--line);border-radius:4px;background:#080808;color:var(--ink);width:min(1100px,94vw);max-width:94vw;max-height:95svh;overflow:auto}
.film-dialog::backdrop {background:#000d}
.film-dialog-bar {display:flex;align-items:center;justify-content:space-between;padding:16px 22px;gap:20px}
.film-dialog-bar h2 {font-size:18px;margin:0;font-weight:400}
.film-dialog-bar button {background:transparent;border:0;color:var(--ink);font-size:26px;cursor:pointer;padding:6px}
.film-dialog video {display:block;width:100%;max-height:80svh;background:#000}
@media (max-width:900px) {
 .plasma-copy{width:calc(100% - 48px);padding:90px 0 120px}.plasma-copy h1{font-size:clamp(58px,10vw,95px)}
 .sound-journey {width:calc(100% - 48px);gap:6%;grid-template-columns:1fr 1fr}.journey-step p{font-size:18px}.journey-step h2{font-size:40px}
 .shape-section {width:calc(100% - 48px);gap:35px}.shape-section h2{font-size:40px}
}
@media (max-width:700px) {
 .plasma-hero{min-height:85svh}.plasma-copy{padding:90px 0 110px}.plasma-copy h1{font-size:clamp(54px,13vw,82px)}.plasma-copy p{font-size:18px}.plasma-actions{gap:16px 24px}.plasma-actions .hero-download{padding:14px 18px;font-size:15px}.film-open{font-size:15px}
 .plasma-hero::after{background:linear-gradient(90deg,#0009,#0002),linear-gradient(0deg,#080808,transparent 30%)}
 .sound-journey{display:block;margin:30px auto 40px}.journey-stage{display:none}.journey-step{min-height:0;padding:30px 0 70px}.journey-mobile-art{display:block;width:100%;height:360px;margin-bottom:35px}.journey-mobile-art>div{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.journey-step h2{font-size:42px}.journey-step p{font-size:18px}.journey-mobile-art .scene-system .device-mac{width:100%}.journey-mobile-art .scene-output .external-screen{top:12%}
 .shape-section{display:flex;flex-direction:column;align-items:stretch;gap:35px;margin:10px auto 90px}.shape-section h2{font-size:42px}.shape-section p{font-size:18px}.home-end{padding:100px 24px}.home-end h2{font-size:44px}.home-v2 .visual-intro h2{font-size:42px}
}
@media (prefers-reduced-motion:reduce) {.journey-panel{transition:none;transform:none}.sound-flow{animation:none}}
.device-frame {height:auto}
.plasma-background {z-index:0}
.plasma-hero::after {z-index:1;pointer-events:none}
.plasma-copy {position:relative;z-index:2}
.background-control {z-index:3}
.home-v2 .hero-download::before,.home-v2 .hero-download::after,.home-v2 .download-action::before,.home-v2 .download-action::after {content:none}
.home-v2 .download-action {background:var(--warm);color:#17120b;border:0;border-radius:5px;padding:17px 24px;gap:12px;align-items:center;text-decoration:none}
.home-v2 .download-action img {filter:brightness(0)}
.home-v2 .hero-download img,.home-v2 .download-action img {mix-blend-mode:normal}
html:not(.js) .journey-stage {display:none}
html:not(.js) .sound-journey {display:block}
html:not(.js) .journey-mobile-art {display:block;height:400px;position:relative;margin-bottom:35px}
html:not(.js) .journey-mobile-art>div {position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.home-v2 :focus-visible {outline:2px solid var(--warm);outline-offset:5px}
.external-screen video {width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px) {.journey-mobile-art .scene-mic .device-phone{width:38%}}
.home-v2 .hero-download img,.home-v2 .download-action img {filter:none;mix-blend-mode:multiply}

/* Sourced hardware, driven by the scroll position rather than looping poses. */
.journey-stage {height:72vh;top:15vh;isolation:isolate}
.journey-panel {transition:opacity .45s ease;transform:none;perspective:1400px}
.journey-panel.is-active {visibility:visible}
.journey-panel .show-device,.journey-mobile-art .show-device {transform:translateY(var(--camera-y,0px)) rotateX(var(--camera-pitch,0deg)) rotateY(var(--camera-yaw,0deg)) scale(var(--camera-scale,1));transform-origin:center}
.journey-render {position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
.has-device-render .journey-panel.is-active .scene-mic .show-device,
.has-device-render .journey-panel.is-active .scene-system .show-device {opacity:0}
.scene-mic .device-phone {width:45%;margin:0}
.scene-line .device-ipad {width:102%}
.scene-output .device-display {position:absolute;width:100%;top:0;left:0}
.device-display .device-screen {left:1.27%;top:1.71%;width:97.45%;height:73.96%;border-radius:0}
.scene-output .device-ipad {width:42%;bottom:1%;right:-1%;z-index:3}
.scene-output .device-ipad .device-screen {border:0}
.journey-mobile-art {perspective:1100px}
@media(max-width:700px){
 .journey-mobile-art{height:340px;overflow:visible}
 .journey-mobile-art .scene-mic .device-phone{width:43%}
 .journey-mobile-art .scene-line .device-ipad{width:100%}
 .journey-mobile-art .scene-output .device-display{top:0}
 .journey-mobile-art .scene-output .device-ipad{width:40%;bottom:0}
}
@media(prefers-reduced-motion:reduce){
 .journey-panel .show-device,.journey-mobile-art .show-device{transform:none}
 .journey-render {display:none}
 .has-device-render .journey-panel.is-active .show-device{opacity:1}
}