*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f0f1a;--bg2:#16162a;--accent:#4db8ff;--cnc:#1ed282;--amber:#f5a623;--text:#e8e8f0;--muted:#8888aa;--border:rgba(255,255,255,0.08);--vbg:#0c0c18}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}

.header{padding:36px 48px 28px;border-bottom:1px solid var(--border)}
.logo{font-size:0.95rem;font-weight:800;color:#fff;text-decoration:none}.logo span{color:var(--accent)}
.crumb{font-size:0.75rem;color:var(--muted);margin-top:16px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--accent)}
.header h1{font-size:1.85rem;font-weight:800;margin-top:10px;letter-spacing:-0.5px;max-width:820px;line-height:1.25}
.header .sub{color:var(--muted);font-size:0.92rem;margin-top:10px;max-width:720px}

.container{max-width:820px;padding:44px 48px 60px}
h2{font-size:1.25rem;font-weight:700;margin:44px 0 14px;letter-spacing:-0.2px}
h2:first-of-type{margin-top:0}
h3{font-size:1rem;font-weight:700;margin:26px 0 8px}
p{color:var(--muted);font-size:0.93rem;margin-bottom:14px}
p strong{color:var(--text)}
code{font-family:'Courier New',monospace;font-size:0.87em;color:var(--accent);background:rgba(77,184,255,0.08);padding:1px 6px;border-radius:4px}
code.cnc{color:var(--cnc);background:rgba(30,210,130,0.08)}
code.amber{color:var(--amber);background:rgba(245,166,35,0.08)}

.lead{font-size:1rem;color:var(--text);border-left:3px solid var(--accent);padding-left:18px;margin-bottom:8px}

ul.plain{list-style:none;margin:14px 0 18px}
ul.plain li{color:var(--muted);font-size:0.9rem;padding-left:22px;position:relative;margin-bottom:7px}
ul.plain li::before{content:'—';position:absolute;left:0;color:var(--muted)}
ul.check li::before{content:'✔';color:var(--cnc);font-size:0.85rem}

.steps{counter-reset:s;margin:20px 0 8px}
.step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-num{counter-increment:s;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(77,184,255,0.1);border:1px solid rgba(77,184,255,0.25);color:var(--accent);font-weight:700;font-size:0.8rem;display:flex;align-items:center;justify-content:center}
.step-num::before{content:counter(s)}
.step-body h4{font-size:0.93rem;font-weight:600;margin-bottom:2px;color:var(--text)}
.step-body p{font-size:0.88rem;margin-bottom:0}

.vid{margin:22px 0 6px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--vbg)}
.vid video,.vid img{width:100%;display:block;cursor:pointer}
.vid-cap{font-size:0.78rem;color:var(--muted);padding:9px 14px;border-top:1px solid var(--border)}

.callout{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px 24px;margin:28px 0}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout.amber{background:rgba(245,166,35,0.05);border-color:rgba(245,166,35,0.2)}
.callout.amber h3{color:var(--amber)}

.cta{background:linear-gradient(160deg,#1a2a40 0%,var(--bg2) 100%);border:1px solid rgba(77,184,255,0.25);border-radius:12px;padding:28px 30px;margin:40px 0 10px;text-align:center}
.cta h3{font-size:1.1rem;margin:0 0 8px}
.cta p{font-size:0.88rem;margin-bottom:18px}
.cta a{display:inline-block;background:var(--accent);color:#000;font-weight:700;font-size:0.9rem;padding:12px 28px;border-radius:8px;text-decoration:none}
.cta a:hover{background:#7ed4ff}

.related{margin-top:48px;border-top:1px solid var(--border);padding-top:26px}
.related-label{font-size:0.65rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.related-grid a{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:13px 16px;font-size:0.85rem;color:var(--text);text-decoration:none;transition:border-color 0.2s,background 0.2s}
.related-grid a:hover{border-color:var(--accent);background:#1a1a30}

footer{padding:24px 48px;border-top:1px solid var(--border);font-size:0.77rem;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--accent)}

@media(max-width:640px){
  .header,.container,footer{padding-left:20px;padding-right:20px}
  .header h1{font-size:1.45rem}
}