:root {
  color-scheme:dark;
  --bg:#0e1014;
  --panel:#171a20;
  --text:#f6f4ee;
  --muted:#aab0bd;
  --gold:#f5c842;
  --line:#343842
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
  color:var(--gold);
  text-underline-offset:4px
}
a:hover {
  text-decoration-thickness:2px
}
a:focus-visible,summary:focus-visible,video:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px
}
.skip {
  position:absolute;
  top:-100px;
  left:20px
}
.skip:focus {
  top:10px;
  background:var(--bg);
  padding:12px;
  z-index:3
}
.wrap {
  width:min(1120px,calc(100% - 48px));
  margin:auto
}
.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:25px 0;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  text-decoration:none;
  font-size:21px
}
.brand img {
  width:32px;
  height:32px
}
.top nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}
.top nav a {
  font-size:14px;
  color:var(--muted)
}
.crumb {
  font-size:13px;
  color:var(--muted);
  margin:28px 0
}
.hero {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:60px;
  align-items:center;
  padding:32px 0 60px
}
.kicker {
  color:var(--gold);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800
}
h1 {
  font-size:clamp(38px,5vw,62px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:18px 0 24px
}
h2 {
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.025em
}
h3 {
  font-size:20px;
  line-height:1.35
}
p {
  margin:0 0 20px
}
.intro {
  font-size:20px;
  color:#d0d3da
}
.button {
  display:inline-block;
  background:var(--gold);
  color:#13151a;
  padding:13px 22px;
  border-radius:8px;
  font-weight:750;
  text-decoration:none
}
.fine {
  font-size:13px;
  color:var(--muted);
  margin-top:12px
}
.hero figure {
  margin:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  box-shadow:0 22px 80px #0005
}
.hero img {
  display:block;
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:contain
}
figcaption {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-top:12px
}
.layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:70px;
  border-top:1px solid var(--line);
  padding:48px 0
}
.toc {
  align-self:start;
  position:sticky;
  top:24px
}
.toc strong {
  display:block;
  margin-bottom:12px
}
.toc a {
  display:block;
  color:var(--muted);
  font-size:14px;
  padding:6px 0
}
.article {
  max-width:760px
}
.article section {
  margin-bottom:54px
}
.steps {
  padding-left:26px
}
.steps li {
  padding-left:10px;
  margin:0 0 26px
}
.steps li::marker {
  color:var(--gold);
  font-weight:800
}
.steps strong {
  display:block;
  font-size:19px;
  margin-bottom:6px
}
.example {
  background:var(--panel);
  border-left:3px solid var(--gold);
  padding:24px 28px
}
.example p:last-child {
  margin-bottom:0
}
video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#171a20;
  border-radius:12px
}
.videofigure {
  margin:24px 0
}
details {
  border-bottom:1px solid var(--line);
  padding:18px 0
}
summary {
  cursor:pointer;
  font-weight:650
}
details p {
  color:#c8ccd5;
  margin:14px 0 4px
}
.next {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.next a {
  display:block;
  padding:22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none
}
.next small {
  display:block;
  color:var(--muted);
  margin-top:8px
}
.install {
  padding:32px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px
}
.footer {
  border-top:1px solid var(--line);
  padding:28px 0 44px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.footer nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
@media(max-width:760px) {
  .wrap {
  width:calc(100% - 36px)
}
.top {
  align-items:flex-start;
  flex-direction:column;
  gap:14px
}
.top nav {
  gap:16px
}
.hero {
  grid-template-columns:1fr;
  gap:28px;
  padding:14px 0 36px
}
.hero figure {
  max-width:440px;
  justify-self:center;
  width:100%
}
.hero img {
  max-height:320px
}
.layout {
  grid-template-columns:1fr;
  gap:24px;
  padding:28px 0
}
.toc {
  position:static;
  border-bottom:1px solid var(--line);
  padding-bottom:24px
}
.next {
  grid-template-columns:1fr
}
.install {
  padding:24px
}
h2 {
  font-size:26px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}