:root {
  color-scheme:light;
  --paper:#faf9f6;
  --card:#ffffff;
  --ink:#1e2334;
  --muted:#626678;
  --purple:#5637ad;
  --line:#dedee6;
  --soft:#efedf7;
  --radius:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
}
img {
  max-width:100%;
  height:auto;
}
a {
  color:var(--purple);
  text-underline-offset:.23em;
}
a:hover {
  text-decoration-thickness:2px;
}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:5px;
  border-radius:3px;
}
h1,h2,h3,p,figure {
  margin:0;
}
h1,h2,h3 {
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.12;
}
h2 {
  font-size:clamp(2rem,3.4vw,3rem);
  max-width:22ch;
}
h3 {
  font-size:1.35rem;
  letter-spacing:-.02em;
}
p+p {
  margin-top:1rem;
}
.wrap {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto;
}
.site-header {
  display:flex;
  align-items:center;
  gap:2rem;
  min-height:116px;
  border-bottom:1px solid var(--line);
}
.brand {
  margin-right:auto;
  display:flex;
  align-items:center;
}
.brand img {
  display:block;
  width:188px;
  height:42px;
  object-fit:contain;
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:1.7rem;
}
.site-header nav a {
  font-size:.88rem;
  color:var(--ink);
  text-decoration:none;
}
.site-header nav a:hover {
  color:var(--purple);
}
.site-header a[aria-current=page] {
  color:var(--purple);
  text-decoration:underline;
}
.site-header .nav-cta {
  border:1px solid var(--purple);
  color:var(--purple);
  border-radius:99px;
  padding:.4rem .95rem;
  font-weight:650;
}
.site-header .nav-cta:hover,.site-header .nav-cta[aria-current=page] {
  background:var(--purple);
  color:white;
  text-decoration:none;
}
.site-header .nav-support {
  color:var(--purple);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:#c5bbdf;
  white-space:nowrap;
}
.site-header .nav-support:hover {
  text-decoration-color:currentColor;
}
.site-header .languages {
  gap:.65rem;
  font-size:.8rem;
  border-left:1px solid var(--line);
  padding-left:1.5rem;
}
.languages span {
  font-weight:700;
}
.site-header .languages a {
  color:var(--muted);
  font-size:.8rem;
  text-decoration:underline;
}
.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  z-index:10;
  background:var(--ink);
  color:white;
  padding:12px 18px;
}
.skip-link:focus {
  top:12px;
}
.hero {
  display:grid;
  grid-template-columns:.95fr 1.2fr;
  align-items:center;
  gap:4rem;
  padding:88px 0 90px;
}
.eyebrow,.section-label {
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.15em;
  color:var(--purple);
  margin-bottom:1.4rem;
}
.hero-title {
  font-size:clamp(3.2rem,5vw,4.7rem);
  line-height:1.02;
  max-width:11ch;
  letter-spacing:-.055em;
}
.lead {
  font-size:1.05rem;
  line-height:1.65;
  color:var(--muted);
  max-width:46ch;
  margin-top:1.8rem;
}
.actions {
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:2rem;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.25rem;
  border-radius:9px;
  background:var(--purple);
  color:white;
  text-decoration:none;
  font-size:.86rem;
  font-weight:650;
  line-height:1.4;
  border:1px solid var(--purple);
}
.button:hover {
  background:#44278f;
}
.button-secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.button-secondary:hover {
  background:var(--soft);
}
.hero-note {
  font-size:.75rem;
  color:var(--muted);
  margin-top:1.1rem;
}
.hero-visual {
  min-width:0;
  position:relative;
  padding:2rem 0;
}
.hero-visual::before {
  content:"";
  position:absolute;
  inset:0 -15px 30px -15px;
  border-radius:50% 43% 46% 39%;
  background:#ece8f6;
  z-index:-1;
}
.hero-visual img {
  display:block;
  width:100%;
  border-radius:12px;
  box-shadow:0 24px 65px -24px #2525386b;
}
.hero-visual figcaption,.page-figure figcaption {
  font-size:.7rem;
  line-height:1.55;
  color:var(--muted);
  padding:1rem .5rem 0;
  max-width:60ch;
}
.steps-section,.story,.benefits-section,.formats-section,.faq {
  padding:76px 0;
  border-top:1px solid var(--line);
}
.steps,.benefits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
  list-style:none;
  padding:0;
  margin:2.6rem 0 0;
}
.steps {
  counter-reset:step;
}
.steps li,.benefits li {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.6rem 1.6rem 1.7rem;
}
.steps li {
  counter-increment:step;
}
.steps li::before {
  content:counter(step);
  display:grid;
  place-items:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:50%;
  background:var(--soft);
  color:var(--purple);
  font-weight:750;
  font-size:.9rem;
  margin-bottom:1.1rem;
}
.steps h3,.benefits h3 {
  font-size:1.12rem;
}
.steps p,.benefits p {
  color:var(--muted);
  font-size:.92rem;
  margin-top:.6rem;
}
.story h2 {
  margin-bottom:2.4rem;
}
.feature-row {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:2rem;
  align-items:start;
  padding:2.2rem 0;
  border-bottom:1px solid var(--line);
}
.feature-row:last-of-type {
  border-bottom:0;
  padding-bottom:0;
}
.feature-row>div {
  min-width:0;
}
.feature-row p {
  color:var(--muted);
  margin-top:.8rem;
}
.feature-demo {
  min-width:0;
  width:100%;
  max-width:420px;
  justify-self:end;
  margin:0;
}
.media-credit {
  font-size:.72rem;
  line-height:1.6;
  color:var(--muted);
  margin-top:2rem;
  max-width:90ch;
}
.feature-demo video {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:280px;
  margin-inline:auto;
  object-fit:contain;
  background:#211d1a;
  border-radius:12px;
  box-shadow:0 16px 45px -30px #2525386b;
}
.formats-section>p {
  color:var(--muted);
  max-width:70ch;
}
.format-list {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:2rem 0 1.4rem;
}
.format-list a {
  display:block;
  border:1px solid #cfcbdc;
  border-radius:8px;
  padding:.35rem .85rem;
  font-size:.82rem;
  font-weight:650;
  color:var(--ink);
  text-decoration:none;
  background:var(--card);
}
.format-list a:hover {
  border-color:var(--purple);
  color:var(--purple);
}
.availability {
  background:#29243f;
  color:#f8f6ff;
  border-radius:var(--radius);
  padding:48px 56px;
  margin:20px 0 76px;
  max-width:100%;
}
.availability .section-label {
  color:#c8baf1;
}
.availability h2 {
  font-size:2.5rem;
}
.availability p {
  max-width:79ch;
  color:#d7d3e4;
  margin-top:1.25rem;
}
.availability a {
  color:white;
}
.text-link {
  display:inline-block;
  margin-top:1.4rem;
  font-weight:650;
  font-size:.88rem;
}
.faq h2 {
  margin-bottom:2rem;
}
details {
  border-top:1px solid var(--line);
  padding:1.2rem 0;
}
details:last-of-type {
  border-bottom:1px solid var(--line);
}
summary {
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  list-style-position:outside;
  margin-left:1.3rem;
  padding-left:.5rem;
}
details p {
  font-size:.93rem;
  color:var(--muted);
  max-width:83ch;
  padding:1rem 1.8rem .25rem;
}
.site-footer {
  background:#eeedf0;
  margin-top:30px;
  padding:48px 0 32px;
}
.footer-inner {
  display:flex;
  gap:3rem;
  align-items:flex-start;
}
.footer-brand {
  margin-right:auto;
}
.footer-name {
  font-size:1.3rem;
  font-weight:750;
  letter-spacing:-.04em;
}
.footer-brand p+p {
  font-size:.8rem;
  margin-top:.25rem;
  color:var(--muted);
}
.footer-links {
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-size:.82rem;
  min-width:150px;
}
.footer-support {
  max-width:42ch;
  margin-top:1.5rem;
}
.footer-support p {
  font-size:.8rem;
  color:var(--muted);
}
.footer-support .button {
  margin:.75rem 0 .5rem;
}
.footer-support .support-test {
  color:var(--purple);
  font-weight:700;
  margin-bottom:.5rem;
}
.footer-links p {
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.3rem;
}
.footer-links a {
  color:var(--ink);
  text-decoration:none;
}
.footer-links a:hover,.footer-links a[aria-current=page] {
  color:var(--purple);
  text-decoration:underline;
}
.footer-legal {
  font-size:.7rem;
  color:var(--muted);
  border-top:1px solid #dcdbe2;
  margin-top:2.2rem;
  padding-top:1.2rem;
}
.document-page {
  padding-top:40px;
  padding-bottom:64px;
}
.breadcrumb {
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:2.2rem;
}
.breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
}
.breadcrumb li+li::before {
  content:"›";
  padding:0 .55rem;
}
.breadcrumb a {
  color:var(--muted);
}
.document-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:4rem;
}
.toc {
  position:sticky;
  top:30px;
  align-self:start;
  font-size:.77rem;
  line-height:1.5;
}
.toc strong {
  display:block;
  margin-bottom:1rem;
}
.toc ol {
  list-style:none;
  padding:0;
  margin:0;
}
.toc li+li {
  margin-top:.8rem;
}
.toc a {
  color:var(--muted);
  text-decoration:none;
}
.toc a:hover {
  color:var(--purple);
}
.prose {
  min-width:0;
  max-width:77ch;
}
.prose h1,.page-intro h1 {
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  margin-bottom:1.6rem;
  max-width:20ch;
}
.prose h2 {
  font-size:1.9rem;
  margin:2.7rem 0 1.1rem;
  max-width:100%;
}
.prose h3 {
  margin-top:1.8rem;
}
.prose p,.prose ul,.prose ol {
  font-size:.95rem;
  line-height:1.8;
  margin-bottom:1.1rem;
}
.prose p+p {
  margin-top:0;
}
.prose li+li {
  margin-top:.5rem;
}
.prose code {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.88em;
  background:var(--soft);
  padding:.1rem .3rem;
  border-radius:4px;
}
.guide-notice {
  font-size:.85rem;
  color:var(--muted);
  background:var(--soft);
  border-radius:10px;
  padding:.85rem 1.1rem;
}
.table-scroll {
  overflow:auto;
  max-width:100%;
  margin:1.5rem 0;
  border:1px solid var(--line);
  border-radius:10px;
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:.83rem;
  line-height:1.5;
  text-align:left;
}
th,td {
  padding:.85rem 1rem;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
th {
  background:#efedf3;
  font-weight:650;
}
tr:last-child td {
  border-bottom:0;
}
.page,.narrow-page .breadcrumb {
  max-width:900px;
  margin-inline:auto;
}
.page-intro {
  padding-bottom:2.4rem;
}
.page-intro .lead {
  max-width:62ch;
  margin-top:0;
}
.page-section {
  padding:2.2rem 0 .4rem;
}
.page h2 {
  font-size:1.8rem;
  max-width:100%;
}
.page-section h2 {
  margin-bottom:1rem;
}
.page-section p,.page-section li,.faq-group p {
  font-size:.97rem;
  color:var(--muted);
}
.page-section ul,.page-section ol {
  padding-left:1.4rem;
  margin:1rem 0;
}
.page-section li+li {
  margin-top:.45rem;
}
.page-section strong {
  color:var(--ink);
}
.page-section code,.faq-group code {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.88em;
  color:var(--ink);
  background:var(--soft);
  padding:.1rem .3rem;
  border-radius:4px;
}
.page-section pre {
  margin:1rem 0;
  padding:.85rem 1.1rem;
  background:var(--soft);
  border-radius:10px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.page-section pre code {
  padding:0;
  background:none;
}
.page-section .digest {
  overflow-wrap:anywhere;
}
.numbered li::marker {
  color:var(--purple);
  font-weight:750;
}
.page-figure {
  margin:0 0 1.4rem;
}
.page-figure+.media-credit {
  margin:0 0 1rem;
}
.page-figure img {
  display:block;
  width:100%;
  border-radius:12px;
  box-shadow:0 24px 65px -30px #2525386b;
}
.format-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.format-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.5rem 1.6rem;
}
.format-card h2 {
  font-size:1.35rem;
}
.format-card p {
  font-size:.92rem;
  color:var(--muted);
  margin-top:.6rem;
}
.format-card .extensions {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.78rem;
  color:var(--purple);
  margin-top:.35rem;
}
.codec-list,.requirements {
  margin:1.4rem 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
.codec-list div,.requirements div {
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:1rem;
  padding:.9rem 1.2rem;
}
.codec-list div+div,.requirements div+div {
  border-top:1px solid var(--line);
}
.codec-list dt,.requirements dt {
  font-weight:650;
  font-size:.9rem;
}
.codec-list dd,.requirements dd {
  margin:0;
  font-size:.92rem;
  color:var(--muted);
}
.cta-card {
  background:#29243f;
  color:#f8f6ff;
  border-radius:var(--radius);
  padding:40px 44px;
  margin-top:3rem;
}
.cta-card h2 {
  font-size:2rem;
}
.cta-card p {
  color:#d7d3e4;
  margin-top:1rem;
  max-width:62ch;
}
.cta-card .button-secondary {
  color:white;
  border-color:#5a5378;
}
.cta-card .button-secondary:hover {
  background:#3a3456;
}
.faq-group {
  padding-top:2rem;
}
.faq-group+.faq-group {
  margin-top:1.2rem;
  border-top:1px solid var(--line);
}
.faq-group h2 {
  margin-bottom:.4rem;
}
.faq-group h3 {
  font-size:1.12rem;
  margin-top:1.6rem;
}
.faq-group p {
  margin-top:.5rem;
  max-width:75ch;
}
.stage-label {
  display:inline-block;
  background:var(--soft);
  color:var(--purple);
  font-size:.72rem;
  font-weight:650;
  padding:.25rem .7rem;
  border-radius:99px;
  margin-bottom:1rem;
}
@media(max-width:1100px) {
  .site-header {
    flex-wrap:wrap;
    padding-block:20px;
    gap:.9rem;
  }
  .site-header>.primary-nav {
    order:3;
    width:100%;
    flex-wrap:wrap;
  }
}
@media(max-width:1000px) {
  .feature-row {
    grid-template-columns:minmax(0,1fr);
  }
  .feature-demo {
    grid-column:auto;
    justify-self:start;
  }
  .wrap {
    width:calc(100% - 56px);
  }
  .hero {
    gap:2.5rem;
  }
  .hero-title {
    font-size:3.5rem;
  }
  .site-header nav {
    gap:1.1rem;
  }
  .site-header {
    gap:1.4rem;
  }
  .brand img {
    width:160px;
  }
  .hero .actions {
    flex-direction:column;
    align-items:flex-start;
  }
  .steps,.benefits {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .document-layout {
    grid-template-columns:180px minmax(0,1fr);
    gap:2rem;
  }
  .footer-inner {
    flex-wrap:wrap;
  }
  .footer-brand {
    flex-basis:100%;
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .site-header {
    min-height:108px;
  }
  .brand img {
    width:158px;
    height:32px;
  }
  .site-header>.primary-nav {
    gap:.6rem 1.3rem;
  }
  .site-header nav a {
    font-size:.82rem;
  }
  .site-header .languages {
    padding-left:1rem;
    gap:.5rem;
  }
  .hero {
    grid-template-columns:1fr;
    padding:56px 0 48px;
    gap:1rem;
  }
  .hero-title {
    font-size:clamp(3rem,12vw,4.6rem);
    max-width:13ch;
  }
  .hero-copy {
    max-width:35rem;
  }
  .hero .actions {
    flex-direction:row;
    align-items:center;
  }
  .lead {
    font-size:1rem;
  }
  .hero-visual {
    max-width:600px;
    margin:1.4rem auto 0;
    width:100%;
    padding-bottom:0;
  }
  .hero-visual::before {
    inset:0 -8px 25px;
  }
  .steps-section,.story,.benefits-section,.formats-section,.faq {
    padding:48px 0;
  }
  .steps,.benefits,.format-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .feature-row {
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
    padding:1.8rem 0;
  }
  .feature-row h3 {
    font-size:1.2rem;
  }
  .feature-row p {
    font-size:.92rem;
  }
  .feature-demo {
    grid-column:1 / -1;
    justify-self:center;
  }
  .availability,.cta-card {
    padding:32px 24px;
    margin:10px 0 48px;
  }
  .cta-card {
    margin:2.4rem 0 0;
  }
  .availability h2,.cta-card h2 {
    font-size:1.9rem;
  }
  .availability p {
    font-size:.92rem;
  }
  .footer-inner {
    flex-direction:column;
    gap:1.8rem;
  }
  .document-page {
    padding-block:28px 42px;
  }
  .document-layout {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .toc {
    position:static;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--line);
  }
  .toc ol {
    columns:2;
    column-gap:1.5rem;
  }
  .toc li {
    break-inside:avoid;
  }
  .prose h1,.page-intro h1 {
    font-size:2.3rem;
  }
  .prose h2,.page h2 {
    font-size:1.55rem;
  }
  .prose ul,.prose ol {
    padding-left:1.4rem;
  }
  .table-scroll th,.table-scroll td {
    min-width:140px;
  }
  .codec-list div,.requirements div {
    grid-template-columns:1fr;
    gap:.2rem;
  }
  summary {
    font-size:.95rem;
  }
  details p {
    padding-inline:.5rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}
.language-choice {
  min-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:48px;
}
.language-choice h1 {
  font-size:clamp(2.8rem,9vw,4.5rem);
  margin:1rem 0;
}
.language-choice p {
  color:var(--muted);
}
.language-choice p+p {
  margin-top:.2rem;
}