:root {
  color-scheme: dark;
  --bg:#0b0f18; --panel:#111825; --soft:#141d2d; --line:#263246;
  --text:#f3f5fc; --muted:#acb9cb; --cyan:#76ece6; --violet:#bdb5ff;
  --sans:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-padding-top:5.7rem }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.64 var(--sans); -webkit-font-smoothing:antialiased }
a { color:var(--cyan); text-underline-offset:.2em }
a:hover { color:#c3fcf6 }
img { display:block; width:100%; height:auto }
svg { width:1.25em; height:1.25em; flex:none }
h1,h2,h3,p,figure,dl,dd { margin:0 }
h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; overflow-wrap:anywhere }
h1 { max-width:18ch; font-size:clamp(2.65rem,7vw,5.55rem); font-weight:740 }
h2 { font-size:clamp(1.55rem,3.7vw,2.75rem); font-weight:700 }
h3 { font-size:1.24rem; letter-spacing:-.022em }
p,li,dd,address { color:var(--muted) }
:focus-visible { outline:2px solid #adf6f0; outline-offset:4px }
.shell { width:min(100% - 2rem, 76rem); margin-inline:auto }
.narrow { max-width:49rem; margin-inline:auto }
.skip { position:fixed; left:1rem; top:1rem; z-index:10; background:var(--bg); padding:.65rem 1rem; transform:translateY(-250%) }
.skip:focus { transform:none }
.site-header { position:relative; z-index:2; background:#0c111b; border-bottom:1px solid #212c3d }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.4rem }
.brand { display:block; width:fit-content; max-width:100%; flex:none; border-radius:8px }
.brand img { display:block; width:100%; height:auto; transition:filter .15s ease }
.brand:hover img { filter:brightness(1.12) }
.brand-header { width:clamp(11.25rem,22vw,14.25rem); padding-block:.25rem }
.brand-footer { width:10.5rem }
.desktop-nav { display:none }
.mobile-nav { position:relative }
.mobile-nav summary { cursor:pointer; padding:.46rem .72rem; border:1px solid var(--line); border-radius:8px; min-height:44px }
.mobile-nav .mobile-menu { position:absolute; right:0; top:calc(100% + .65rem); display:grid; gap:.15rem; padding:.5rem; min-width:13rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 15px 30px #0009 }
.site-header nav a { display:flex; align-items:center; min-height:44px; padding:.5rem .75rem; text-decoration:none; color:var(--muted); font-weight:600; font-size:.94rem; border-radius:7px }
.site-header nav a:hover,.site-header nav a[aria-current] { color:var(--cyan); background:#172638 }
.site-header nav .nav-download { color:var(--cyan); border:1px solid #346265 }
.hero { background:radial-gradient(ellipse at 80% 40%,#262043 0,transparent 58%),radial-gradient(ellipse at 0 0,#102b37 0,transparent 58%),var(--bg); padding:clamp(2.9rem,7vw,6.8rem) 0 clamp(2rem,5vw,5rem) }
.hero-grid { display:grid; align-items:center; gap:clamp(1.65rem,4vw,4.4rem) }
.hero h1 { font-size:clamp(2.75rem,7.25vw,5.4rem); letter-spacing:-.07em; line-height:.99 }
.hero h1 em { color:var(--cyan); font-style:normal; background:linear-gradient(102deg,#8af2e7 5%,#c0b2ff 95%); background-clip:text; -webkit-text-fill-color:transparent }
.eyebrow { font-size:.77rem; text-transform:uppercase; font-weight:700; letter-spacing:.125em; color:var(--cyan); line-height:1.45; margin-bottom:1rem }
.dot { width:.3rem; height:.3rem; border-radius:50%; background:currentColor; display:inline-block; vertical-align:middle; margin:0 .38rem }
.lead { font-size:clamp(1.05rem,2.05vw,1.23rem); max-width:53ch; margin-top:1.15rem }
.actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.65rem }
.button { display:inline-flex; gap:.6rem; align-items:center; justify-content:center; min-height:48px; padding:.64rem 1.05rem; border:1px solid transparent; border-radius:8px; font-weight:710; text-decoration:none; line-height:1.25; transition:background-color .15s,border-color .15s }
.primary { background:#87eee6; color:#09212a }
.primary:hover { background:#b4fcf3; color:#09212a }
.secondary { color:var(--text); border-color:#384b63; background:#152130 }
.secondary:hover { border-color:#6f879f; background:#1d3044; color:var(--text) }
.release-line { margin-top:1.1rem; color:#b6c6d7; font-size:.88rem }
.device-frame { border:1px solid #506079; padding:clamp(.35rem,1.1vw,.72rem); background:#05070b; border-radius:clamp(.72rem,2.1vw,1.7rem); box-shadow:0 22px 56px #0009,0 0 64px #7d75e926 }
.device-frame img { border-radius:clamp(.42rem,1.25vw,1rem); background:#26251e }
.hero-device,.shot,.card,.feature-pair>* { min-width:0 }
figcaption { color:var(--muted); font-size:.85rem; margin-top:.55rem }
.hero-device figcaption { text-align:right }
.strip { background:#101724; border-block:1px solid var(--line) }
.strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.65rem 1.15rem; min-height:4.8rem; padding-block:1rem }
.strip-inner>span { font-size:.9rem; color:var(--muted) }
.strip ul { display:flex; gap:.38rem 1.3rem; flex-wrap:wrap; padding:0; list-style:none; margin:0 }
.strip li { color:#e2eaf6; font-weight:680 }
.text-link { display:inline-flex; align-items:center; gap:.45rem; width:fit-content; font-weight:660; text-decoration:none; border-bottom:1px solid #3c777e; line-height:1.45 }
.text-link:hover { border-color:currentColor }
.section { padding:clamp(2.7rem,6.4vw,5.5rem) 0 }
.section.compact { padding-top:clamp(1.35rem,3vw,2.4rem) }
.tinted { background:#0e1520; border-block:1px solid #233043 }
.section h2+.card-grid { margin-top:1.5rem }
.page-intro { padding:clamp(2.5rem,6.5vw,5rem) 0 clamp(1rem,3vw,2rem); background:radial-gradient(ellipse at 14% 2%,#12313a 0,transparent 70%) }
.page-intro h1 { font-size:clamp(2.4rem,6.5vw,4.8rem) }
.card-grid,.feature-pair,.reading-layout { display:grid; gap:1rem }
.card { padding:clamp(1.05rem,2.5vw,1.6rem); border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#151f2f,var(--panel)); overflow-wrap:anywhere }
.card h2 { font-size:clamp(1.45rem,3vw,2.2rem) }
.card p,.card dl,.card .text-link,.card h3:not(:first-child) { margin-top:.67rem }
.card .eyebrow { margin-bottom:.3rem }
.card-icon { display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:.63rem; color:var(--cyan); border:1px solid #345a66; background:#142b37; margin-bottom:.87rem }
.feature-pair { align-items:center; gap:clamp(1.3rem,4.7vw,4.4rem) }
.feature-pair p:not(.eyebrow) { margin-top:.9rem; max-width:58ch }
.feature-pair .text-link { margin-top:1.1rem }
.shot img { border-radius:12px; border:1px solid #41526a }
.callout { padding:clamp(1.15rem,4.3vw,2.7rem); display:flex; align-items:start; flex-direction:column; gap:1rem; justify-content:space-between; border:1px solid #34465d; border-radius:15px; background:linear-gradient(116deg,#14303c,#1e1c35) }
.callout p { margin-top:.55rem }
.callout .button { flex:none }
.jump-list,.resource-links { display:flex; flex-wrap:wrap; gap:.55rem 1.2rem }
.jump-list { margin-bottom:2.25rem }
.jump-list a { display:inline-block; padding:.45rem .77rem; border:1px solid var(--line); border-radius:6px; text-decoration:none }
.jump-list a:hover { border-color:var(--cyan) }
.resource-links { margin-top:1.25rem }
.integration-section+.integration-section { margin-top:3rem }
.integration { scroll-margin-top:1rem }
.card .status { margin-top:0; margin-bottom:.7rem; display:inline-block; font-size:.77rem; font-weight:680; color:#a2ece1; background:#19343d; border-radius:5px; padding:.18rem .52rem }
.card .status.review { color:#f9d49f; background:#352b25 }
dt { font-weight:650; margin-top:.65rem }
dd { margin-top:.1rem }
.notice { background:#172437; border:1px solid #384d68; border-radius:10px; padding:.9rem 1rem; color:#d9eafa; margin-bottom:1.15rem }
.release-pending { color:#f3d1a1 }
.download>div { border-block:1px solid var(--line); margin-block:1rem; padding:.3rem 0 .8rem }
.download dl { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:.25rem .9rem }
.download dt,.download dd { margin:0 }
.download .button { margin-top:1rem }
.download details { margin-top:.75rem }
.download code { overflow-wrap:anywhere; color:var(--text); font-size:.87rem }
.release-notes article { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.2rem; margin-bottom:1rem }
.release-notes h2 { margin-bottom:.45rem }
.contents { display:flex; flex-direction:column; gap:.3rem; padding:1rem; border:1px solid var(--line); border-radius:10px; height:fit-content; background:var(--panel) }
.contents a { padding:.32rem; text-decoration:none }
.steps { display:grid; gap:.8rem; margin:0; padding:0; list-style:none }
.steps li { display:flex; align-items:start; gap:.75rem; border:1px solid var(--line); border-radius:10px; padding:1rem; background:var(--panel) }
.steps li>span { background:#1c3944; color:var(--cyan); border-radius:6px; min-width:2rem; padding:.14rem .3rem; text-align:center; font-weight:700 }
.steps h2 { color:var(--text); font-size:1.22rem }
.steps p { margin-top:.4rem }
.faq details { padding:.85rem 1rem; border:1px solid var(--line); background:var(--panel); border-radius:9px; margin-bottom:.6rem }
.faq summary,.download summary { cursor:pointer; min-height:2rem; color:var(--text); font-weight:650 }
.faq p { margin-top:.4rem }
.prose { overflow-wrap:anywhere }
.prose h2 { font-size:clamp(1.38rem,3vw,2rem); margin-top:1.65rem }
.prose h3 { margin-top:1.1rem }
.prose p,.prose address { margin:.65rem 0 .9rem }
.prose address { font-style:normal }
.prose h2:first-child { margin-top:0 }
.prose section+section { margin-top:1.65rem }
.error-actions { margin-bottom:5rem }
.site-footer { padding:2.7rem 0 1rem; border-top:1px solid var(--line); background:#0e141f }
.footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem }
.footer-grid>div:first-child { grid-column:1/-1 }
.footer-grid>div:not(:first-child) { display:grid; align-content:start; gap:.25rem }
.footer-grid>div:not(:first-child) a { color:var(--muted); text-decoration:none; padding:.21rem 0 }
.footer-grid>div:not(:first-child) a:hover { color:var(--cyan) }
.footer-grid p,.footer-end { color:var(--muted); font-size:.88rem; margin-top:.55rem }
.footer-end { border-top:1px solid var(--line); margin-top:1.5rem; padding-top:.8rem }
@media (min-width:36rem) {
  .shell { width:min(100% - 3rem,76rem) }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .callout { flex-direction:row; align-items:center }
  .footer-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .footer-grid>div:first-child { grid-column:auto }
}
@media (min-width:51rem) {

  .hero-grid { grid-template-columns:minmax(0,.91fr) minmax(0,1.22fr) }
  .hero h1 { font-size:clamp(3rem,5.3vw,4.72rem) }
  .card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .card-grid.two,.feature-pair { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .card-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .reading-layout { grid-template-columns:15rem minmax(0,1fr); gap:1.5rem }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important } }


.header-actions { display:flex; align-items:center; gap:.55rem; min-width:0 }
.header-actions .language-switch { display:flex; gap:.14rem; padding:.15rem; border:1px solid var(--line); border-radius:8px }
.site-header .language-switch a { display:grid; place-items:center; min-height:36px; min-width:35px; padding:.2rem; font-size:.8rem }
.site-header .language-switch a[aria-current] { color:var(--cyan); background:#172f39 }
.mobile-menu .language-switch { justify-content:center; margin-top:.35rem }
.mobile-menu .language-switch a { min-width:48px }
.language-suggestion { text-align:center; background:#152332; padding:.35rem 1rem; font-size:.9rem }
.language-suggestion a { display:inline-block; min-height:2rem; padding:.12rem .5rem }
.legal-translation { margin-block:1rem; padding:.7rem 1rem; border:1px solid var(--line); border-radius:8px }
.release-notes time + h2 { margin-top:.42rem }
@media (max-width:25rem) {
  .brand-header { width:clamp(8.1rem,44vw,11rem) }
  .header-inner { gap:.35rem }
  .header-actions { gap:.35rem }
  .site-header .language-switch a { min-width:29px }
  .mobile-nav summary { padding-inline:.4rem }
}
@media (min-width:62rem) {
  .desktop-nav { display:flex; gap:.25rem; align-items:center }
  .mobile-nav { display:none }
  .header-actions { gap:.85rem }
}