<style>
    :root{
      --bg: #0b0c0f; /* near-black */
      --panel: #13151a; /* dark grey */
      --text: #f5f7fb; /* near-white */
      --muted: #b7bfd1;
      --brand: #4c8dff; /* blue accent */
      --ok: #1db954;
      --warn: #ffb020;
      --danger: #ff5c5c;
      --radius: 14px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text); background:var(--bg);
    }
    .wrap{max-width: 900px; margin: 0 auto; padding: 24px;}
    header{position:sticky; top:0; backdrop-filter: blur(6px); background:color-mix(in oklab, var(--bg) 75%, transparent); border-bottom:1px solid #1e212a}
    header .wrap{display:flex; gap:16px; align-items:center; padding-block:14px}
    h1{font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0}
    .badge{font-size: .8rem; color:var(--bg); background:var(--brand); padding:.2rem .5rem; border-radius:999px}
    nav{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
    nav a{color:var(--muted); text-decoration:none; padding:.35rem .6rem; border-radius:999px; border:1px solid #202431}
    nav a:hover{color:var(--text); border-color:#2a2f40}

    .hero{margin-top:18px; background:linear-gradient(180deg, #12141a, #0d0f13); border:1px solid #1c2030; padding:22px; border-radius: var(--radius)}
    .hero h2{margin-top:0; font-size:1.25rem}

    .grid{display:grid; gap:18px}
    @media(min-width:840px){.grid{grid-template-columns: 1fr 320px}}

    .card{background:var(--panel); border:1px solid #1c2030; border-radius: var(--radius); padding:18px}
    .card h3{margin-top:0}

    .step{display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:12px; border:1px dashed #2a2f40; background:#111318}
    .num{flex:0 0 auto; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; font-weight:700; background:#182036; color:#cfe0ff}
    ol{padding-left:1rem}

    .callout{border-left:4px solid var(--brand); background:#0f1320; padding:12px 14px; border-radius:10px}
    .callout.warn{border-left-color:var(--warn); background:#1b160b}
    .callout.danger{border-left-color:var(--danger); background:#1a0f10}
    .callout ok{border-left-color:var(--ok);}

    details{border:1px solid #1c2030; border-radius:12px; background:#10131a; padding:12px}
    details>summary{cursor:pointer; font-weight:600}

    code,kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95em; background:#0e1117; color:#d6e2ff; padding:.15rem .35rem; border-radius:6px; border:1px solid #1d2330}
    kbd{background:#0d1117; border-color:#232a3b}

    .footer{color:var(--muted); font-size:.9rem; padding-block:24px}
    .btn{display:inline-block; color:#fff; background:var(--brand); border:none; border-radius:10px; padding:.6rem .9rem; text-decoration:none}
    .btn.secondary{background:transparent; border:1px solid #2a2f40; color:var(--text)}

    .toc{display:flex; flex-direction:column; gap:10px}
    .toc a{color:var(--muted); text-decoration:none; border:1px solid #1e2230; padding:.5rem .7rem; border-radius:10px}
    .toc a:hover{color:var(--text); border-color:#2a2f40}

    .legal{font-size:.9rem; color:var(--muted)}
  </style>