.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}
.site-header {
  display:flex;
  align-items:center;
  gap:36px;
  padding-block:28px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--pink);
  font-size:19px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.06em
}
.brand svg {
  width:39px;
  height:39px
}
.brand-detail {
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.035em;
  color:var(--muted);
  margin-top:2px
}
.site-header nav {
  display:flex;
  gap:28px;
  margin-left:auto
}
.site-header nav a {
  font-size:13px;
  color:var(--muted);
  text-decoration:none
}
.site-header nav a:hover {
  color:var(--pink)
}
.intro {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:100px;
  padding-block:76px 54px;
  align-items:center
}
.intro h1 {
  font-size:clamp(36px,4.5vw,58px);
  letter-spacing:-.035em;
  font-weight:600;
  line-height:1.18
}
.intro h1 span {
  color:var(--pink)
}
.intro-copy>p {
  margin-top:23px;
  max-width:53ch;
  font-size:15px
}
.intro-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}
.release-panel {
  border-top:1px solid var(--pink);
  padding-top:22px;
  max-width:370px
}
.release-heading {
  display:flex;
  gap:10px;
  color:var(--pink);
  align-items:center;
  font-size:12px
}
.release-heading svg {
  width:20px;
  height:20px
}
.package-name {
  font-family:var(--mono);
  color:var(--text);
  font-size:21px;
  line-height:1.5;
  margin-top:18px
}
.release-note {
  font-size:12px;
  margin-top:12px
}
.release-panel dl {
  margin:20px 0 0;
  font-size:11px
}
.release-panel dl div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-block:7px;
  border-top:1px solid var(--line)
}
dt {
  color:var(--muted)
}
dd {
  margin:0;
  text-align:right
}
.compatibility {
  display:flex;
  align-items:flex-start;
  gap:13px;
  background:var(--surface);
  padding:20px 25px;
  font-size:12px;
  border-radius:var(--radius)
}
.guide-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:70px;
  align-items:start;
  padding-top:70px
}
.contents {
  position:sticky;
  top:32px
}
.contents h2 {
  font-size:15px
}
.contents>p {
  font-size:12px;
  margin-top:8px
}
.contents nav {
  display:grid;
  margin-top:24px;
  gap:4px
}
.contents nav a {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--muted);
  font-size:12px;
  padding:8px 0
}
.contents nav a:hover,.contents nav a.is-active {
  color:var(--pink)
}
.contents nav a span {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:11px;
  border:1px solid var(--line);
  border-radius:50%
}
.contents nav a.is-complete span {
  background:var(--pink);
  color:#210f17;
  border-color:var(--pink)
}
.contents .local-note {
  font-size:11px;
  line-height:1.8;
  max-width:25ch
}
.guide-body {
  min-width:0;
  max-width:790px
}
.session-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  margin-top:24px
}
.session-columns li {
  font-size:13px;
  color:var(--muted)
}
footer {
  margin-top:70px;
  padding-block:28px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:14px 25px;
  justify-content:space-between;
  align-items:center
}
footer p,footer a {
  font-size:11px
}
footer span {
  margin-inline:7px;
  color:var(--pink)
}