:root{--fg:#111827;--mut:#4b5563;--bg:#fafaf9;--card:#fff;--line:#e7e5e4;--acc:#15803d}
@media (prefers-color-scheme:dark){:root{--fg:#f3f4f6;--mut:#a1a1aa;--bg:#0b0d12;--card:#151922;--line:#262b36;--acc:#22c55e}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:40px 20px 60px}
.hero{text-align:center;padding:10px 0 20px}
.hero img{border-radius:18px}
h1{font-size:44px;margin:.2em 0 .1em;letter-spacing:-.02em}
.lead{font-size:22px;margin:.2em 0;font-weight:600}
.sub{color:var(--mut);margin:.2em 0 1.2em}
.dl{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:16px 26px;border-radius:14px;font-size:18px}
.dl:hover{filter:brightness(1.07)}
.dl:focus-visible,a:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
.tablet{margin-top:14px;color:var(--mut)}
a{color:var(--acc)}
section{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 22px 14px;margin:18px 0}
h2{font-size:21px;margin:16px 0 6px}
.steps li{margin:10px 0;padding-left:4px}
ul li{margin:6px 0}
code{background:rgba(127,127,127,.15);padding:1px 6px;border-radius:6px;font-size:.92em;word-break:break-all}
.privacy{border-color:var(--acc)}
footer{text-align:center;color:var(--mut);font-size:14px;margin-top:28px}
@media (max-width:480px){h1{font-size:36px}.lead{font-size:19px}section{padding:4px 16px 12px}}

.vid{padding-bottom:18px}
.vid video{display:block;width:100%;height:auto;border-radius:12px;background:#000}