/* Download page only. Shared site styling stays in ../styles.css. */
:root{
  color-scheme:dark light;
  --link-pink:var(--pink);
  --focus:var(--green)
}
@media(prefers-color-scheme:light){
  :root{
    --canvas:#fff;
    --surface:#f5f5f8;
    --surface-raised:#fff;
    --text:#16161b;
    --muted:#50505a;
    --line:#d3d3dc;
    --pink:#ff4f9a;
    --link-pink:#b0104e;
    --blue:#0b5cad;
    --green:#0b7a43;
    --focus:#0b5cad
  }
  a:hover{
    color:var(--link-pink)
  }
  .site-nav a:last-child{
    color:inherit
  }
  .skip-link,.skip-link:hover{
    background:var(--text);
    color:var(--canvas)
  }
}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline-color:var(--focus)
}
.site-nav a[aria-current="page"]{
  color:var(--link-pink);
  text-decoration:underline;
  text-underline-offset:.4em
}
.download{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
  align-items:center;
  padding-block:88px 96px
}
.download h1{
  font-size:clamp(2.7rem,5.4vw,5rem);
  line-height:1;
  letter-spacing:-.06em;
  margin-top:26px
}
.download .eyebrow{
  display:flex;
  align-items:center;
  gap:10px
}
.download-intro{
  margin-top:26px;
  font-size:1.12rem;
  line-height:1.5
}
.download-action{
  margin-top:30px
}
.download .button-primary,.download .button-primary:hover{
  color:#000
}
.download .button-primary{
  background:#ff4f9a
}
.download .button-primary:hover{
  background:#ff82b7
}
.download .button[hidden]{
  display:none
}
.release-status{
  margin-top:18px;
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
  max-width:52ch
}
.release-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 28px 24px;
  background:var(--surface)
}
.release-card h2{
  font-size:1.1rem;
  letter-spacing:-.02em;
  line-height:1.3;
  margin-bottom:6px
}
.release-card dl{
  margin:0
}
.release-card dl>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:13px;
  border-bottom:1px solid var(--line);
  font-size:.9rem
}
.release-card dl>div:last-child{
  border-bottom:0
}
.release-card dt{
  color:var(--muted)
}
.release-card dd{
  margin:0;
  font-weight:600;
  text-align:right
}
.architecture-note{
  margin-top:14px;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.55
}
.install-steps{
  list-style:none;
  margin:48px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px
}
.install-steps li{
  display:flex;
  flex-direction:column;
  gap:16px
}
.step-number{
  font-size:2.6rem;
  font-weight:650;
  line-height:1;
  letter-spacing:-.05em
}
.install-steps .pink{
  color:var(--link-pink)
}
.install-steps h3{
  margin-bottom:12px
}
.install-steps p{
  font-size:.92rem;
  color:var(--muted)
}
.before-you-start{
  padding-bottom:104px
}
.notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:44px;
  margin-top:44px
}
.notes article{
  border-left:3px solid var(--green);
  padding:3px 0 3px 22px
}
.notes article+article{
  border-left-color:var(--blue)
}
.notes h3{
  margin-bottom:12px
}
.notes p{
  font-size:.92rem;
  color:var(--muted)
}
.verify{
  margin-top:52px;
  border-top:1px solid var(--line)
}
.verify>p{
  padding:0 0 14px;
  max-width:70ch
}
.verify code{
  font:.84rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 8px
}
@media(max-width:1100px){
  .download{
    grid-template-columns:1fr;
    gap:40px;
    padding-block:60px 68px
  }
  .release-card{
    max-width:520px
  }
  .install-steps{
    gap:28px
  }
}
@media(max-width:760px){
  .install-steps,.notes{
    grid-template-columns:1fr;
    gap:32px
  }
  .install-steps li{
    flex-direction:row;
    gap:20px
  }
  .step-number{
    width:2rem;
    flex:none
  }
}
@media(forced-colors:active){
  .release-card,.verify code{
    border:1px solid CanvasText
  }
}
