*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0612;--panel:rgba(26,20,40,.55);--border:rgba(255,255,255,.08);
  --ink:#f2efea;--dim:#9a8fb0;--link:#60a5fa;
  --g1:#ff6b9d;--g2:#9f7aea;--g3:#38bdf8;
}
::selection{background:var(--g2);color:#fff}
html,body{background:var(--bg);color:var(--ink);overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;
  font-size:16px;line-height:1.65;min-height:100vh;position:relative;
  -webkit-font-smoothing:antialiased;
}
.orb{position:fixed;border-radius:50%;filter:blur(90px) saturate(1.4);opacity:.45;pointer-events:none;z-index:0}
.orb.a{width:520px;height:520px;top:-180px;left:-200px;background:var(--g1)}
.orb.b{width:460px;height:460px;bottom:-160px;right:-180px;background:var(--g2)}
.bar{
  position:relative;z-index:2;border-bottom:1px solid var(--border);padding:12px 24px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;
  background:rgba(10,6,18,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.bar a{color:var(--link);text-decoration:none}
.bar a:hover{text-decoration:underline}
.bar .slash{color:var(--dim)}
.bar .nav{margin-left:auto;display:flex;gap:16px}
main{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:40px 24px 80px}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);margin-bottom:24px;
}
h1{font-size:34px;line-height:1.2;margin-bottom:8px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:20px;margin:28px 0 8px}
h2:first-child{margin-top:0}
p,li{color:var(--ink)}
p+p{margin-top:10px}
ul{margin:8px 0 0 22px}
li+li{margin-top:4px}
a{color:var(--link)}
.dim{color:var(--dim);font-size:14px}
.lang{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  background:rgba(20,15,32,.6);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
footer{position:relative;z-index:2;text-align:center;color:var(--dim);font-size:13px;padding:0 24px 40px}
@media (max-width:640px){
  main{padding:24px 16px 60px}
  .card{padding:20px}
  h1{font-size:28px}
  .bar .nav{margin-left:0;width:100%}
}