:root{
  --bg:#0b1020;
  --panel:#0f1724;
  --muted:#9aa4b2;
  --accent:#7c5cff; 
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,0.18), rgba(255,255,255,0)),
              linear-gradient(180deg, var(--bg), #081025);
  color:#e6eef6;
}

.container{
  max-width: 980px;
  margin: 44px auto;
  padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
}

.site-title{
  display:flex;
  gap:16px;
  align-items:center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.brand{display:inline-flex;align-items:center; text-decoration:none;}

.logo{
  width:52px;
  height:52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #4bb6ff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
}

h1{margin:0;font-size:clamp(1.35rem,3.4vw,2.1rem); letter-spacing:-0.02em}
h2{margin: 22px 0 10px; font-size: 1.25rem; letter-spacing:-0.01em}
h3{margin: 0 0 10px; font-size: 1.05rem}
p{line-height: 1.6}
p.lead{color:var(--muted);margin:6px 0 0}

.nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.nav a{
  color: var(--muted);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.01);
}
.nav a:hover{color:#fff; border-color: rgba(255,255,255,0.08)}
.nav a.active{background:rgba(255,255,255,0.04);color:#fff}

.hero{padding: 22px 0 6px}
.hero h2{margin-top: 10px; font-size: clamp(1.4rem, 3.2vw, 2rem)}
.hero p{max-width: 68ch}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top: 14px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #fff;
  text-decoration:none;
}
.button.primary{border-color: rgba(124,92,255,0.55); background: rgba(124,92,255,0.14)}
.button.secondary{color: var(--muted)}
.button:hover{border-color: rgba(255,255,255,0.12)}

.grid{display:grid;grid-template-columns: repeat(12, minmax(0, 1fr));gap: 14px; margin-top: 16px}
.span-6{grid-column: span 6}
.span-12{grid-column: span 12}

.card{
  padding:16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.008));
  border:1px solid rgba(255,255,255,0.05);
}

pre, code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
pre{background: rgba(255,255,255,0.02); padding: 12px; border-radius: 12px; overflow:auto; border: 1px solid rgba(255,255,255,0.05)}
code{background: rgba(255,255,255,0.02); padding: 2px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05)}

ul,ol{padding-left: 18px}
li{margin: 6px 0}
a{color: var(--accent)}
a:hover{text-decoration: underline}

footer{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.05);color:var(--muted);font-size:0.92rem;text-align:center}
.footer-meta{margin-top: 8px}

@media (max-width: 760px){
  .container{margin: 24px 14px; padding: 18px}
  .span-6{grid-column: span 12}
}