@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url("montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url("montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-display:swap;src:url("montserrat-latin-800-normal.woff2") format("woff2")}
:root{--bg:#FEFFF8;--surface:#FFFFFF;--ink:#00212B;--muted:#3E5862;--line:#D6E3F5;--blue:#4392F1;--blue-text:#1D6BD0;--lime:#DCFF38;--lime2:#C2E812;--soft:#E3EFFD;--navy:#00212B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#00212B;--surface:#06303D;--ink:#FEFFF8;--muted:#A9BDC4;--line:#1A4A5A;--blue:#6AA8F4;--blue-text:#8DBDF7;--soft:#0F3B5E}}
:root[data-theme="dark"]{--bg:#00212B;--surface:#06303D;--ink:#FEFFF8;--muted:#A9BDC4;--line:#1A4A5A;--blue:#6AA8F4;--blue-text:#8DBDF7;--soft:#0F3B5E}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.6 "Montserrat","Segoe UI",system-ui,sans-serif}
a{color:var(--blue-text)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header.top{display:flex;align-items:center;gap:12px;padding:18px 0}
header.top img{height:42px}
header.top .name{font-weight:800;font-size:22px;line-height:1.1}
header.top .by{font-size:12px;font-weight:700;color:var(--muted)}
header.top nav{margin-left:auto;display:flex;gap:16px;font-weight:700;font-size:15px}
header.top nav a{text-decoration:none;color:var(--ink)}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding:28px 0 40px}
.hero h1{font-size:clamp(32px,5vw,52px);margin:0 0 14px}
.hero p.lead{font-size:19px;color:var(--muted);margin:0 0 22px}
.hero img{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 40px rgb(0 33 43/.14)}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;background:var(--lime);color:#00212B;font-weight:800;padding:14px 22px;border-radius:12px;text-decoration:none;border:2px solid var(--lime2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.small{font-size:14px;color:var(--muted)}
section{padding:36px 0;border-top:1px solid var(--line)}
section h2{font-size:30px;margin:0 0 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{font-size:19px;margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shots figure{margin:0}
.shots img{width:100%;border-radius:12px;border:1px solid var(--line)}
.shots figcaption{font-size:14px;color:var(--muted);margin-top:6px}
ol.steps{padding-left:22px;display:grid;gap:8px}
.note{background:var(--soft);border-radius:12px;padding:14px 16px;font-size:15.5px}
footer{padding:28px 0 48px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.prose{max-width:760px}
.prose h2{font-size:24px;margin:28px 0 8px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.grid3,.shots{grid-template-columns:1fr}header.top nav{display:none}}