:root { --bg:#fbf7f0; --ink:#14161a; --accent:#e8a33d; --accent-ink:#14161a; --dim:#6b5e49; --line:#e6dccb; --card:#fff; --dark:#14161a; --dark-card:#1f2229; --dark-text:#f4efe6; --eyebrow:#a3671a; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; font-family:-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; padding-inline:0 }
a { color:inherit }
.wrap { max-width:1080px; margin:0 auto; padding-inline:20px }
header.top { display:flex; align-items:center; justify-content:space-between; padding-block:18px; gap:16px; flex-wrap:wrap }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.03em; text-decoration:none; font-size:18px }
.brand img { width:34px; height:34px; border-radius:8px }
nav a { text-decoration:none; margin-left:18px; font-weight:600; font-size:15px; color:var(--dim) }
nav a:hover { color:var(--ink) }
.btn { display:inline-block; padding:11px 18px; border-radius:10px; font-weight:700; text-decoration:none; border:2px solid var(--ink); font-size:15px }
.btn.primary { background:var(--ink); color:var(--dark-text) }
.btn.ghost { background:transparent; color:var(--ink) }
.hero { background:var(--accent); color:var(--accent-ink); padding-block:56px 48px }
.hero h1 { font-size:clamp(34px,6vw,60px); line-height:1.04; margin:0 0 16px; font-weight:800; letter-spacing:-.01em; text-wrap:balance; max-width:820px }
.hero p.lead { font-size:clamp(17px,2.2vw,21px); max-width:760px; margin:0 0 22px }
.formula { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:800; font-size:17px; margin:26px 0 8px }
.formula span.chip { background:var(--ink); color:var(--dark-text); border-radius:8px; padding:7px 13px }
.formula span.eq { display:inline-block; border:2.5px solid var(--ink); border-radius:8px; padding:5px 13px }
.formula span.chip { display:inline-block }
.formula-note { font-size:14px; opacity:.85; margin:0 0 26px }
.cta { display:flex; gap:12px; flex-wrap:wrap }
section { padding-block:56px }
section.dark { background:var(--dark); color:var(--dark-text) }
.eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow); font-weight:700; margin:0 0 8px }
.dark .eyebrow { color:var(--accent) }
h2 { font-size:clamp(26px,3.6vw,36px); line-height:1.1; margin:0 0 18px; font-weight:800; letter-spacing:-.01em; text-wrap:balance }
h3 { font-size:17px; margin:0 0 6px; font-weight:800 }
p { margin:0 0 10px }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.install-grid { display:grid; gap:22px; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr) }
@media (max-width:760px) { .install-grid { grid-template-columns:1fr } }
.shot { margin-top:28px; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 12px 40px rgba(20,22,26,.18); background:#fff }
.shot img { display:block; width:100%; height:auto }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px }
.dark .card { background:var(--dark-card); border-color:#33373f }
.card p { font-size:15px; color:inherit }
.quote { font-size:15px; color:var(--dim); margin-top:18px }
.dark .quote { color:#aab0bb }
table { border-collapse:collapse; width:100%; font-size:15px }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top }
th { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow) }
td.k { font-weight:700; white-space:nowrap }
.tablewrap { overflow-x:auto }
pre { background:#0b0b0b; color:#e8e8e8; padding:14px 16px; border-radius:10px; overflow-x:auto; font-size:15px; line-height:1.5; margin:12px 0; white-space:pre-wrap; word-break:break-all; border-left:5px solid var(--accent) }
.copyrow { display:flex; gap:10px; align-items:stretch; margin:12px 0 }
.copyrow pre { flex:1; margin:0 }
.copyrow button { flex:none; border:2px solid var(--ink); background:var(--ink); color:var(--dark-text); border-radius:10px; font-weight:700; padding:0 14px; cursor:pointer }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.93em; background:rgba(0,0,0,.06); padding:1px 5px; border-radius:5px }
pre code { background:none; padding:0 }
.dark code { background:rgba(255,255,255,.1) }
.steps { counter-reset:s; display:grid; gap:14px }
.steps > div { display:flex; gap:14px; align-items:flex-start }
.steps > div > div { min-width:0; flex:1 }
.steps > div::before { counter-increment:s; content:counter(s); flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--accent); font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px }
.diagram { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:stretch; margin-top:16px }
.box { background:var(--card); border:2px solid var(--ink); border-radius:12px; padding:12px 14px; font-size:14px }
.box b { display:block; font-size:15px; margin-bottom:4px }
.dark .box { background:var(--dark-card); border-color:#f4efe6 }
footer { padding-block:34px; color:var(--dim); font-size:14px; border-top:1px solid var(--line) }
footer a { margin-right:16px }
.small { font-size:13px; color:var(--dim) }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth } }