:root{
  --bg: #0b0d14;
  --card: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --accent: #ff4fd8;
  --accent2:#6cf5ff;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(255,79,216,.22), transparent 55%),
    radial-gradient(1200px 800px at 80% 20%, rgba(108,245,255,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 85%, rgba(85,239,196,.10), transparent 55%),
    linear-gradient(180deg, #070812 0%, #0b0d14 100%);
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.sg-wrap{ max-width:1100px; margin:0 auto; padding:22px 16px 48px; }
.sg-header{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0 18px;
}
.sg-brand h1{ margin:0; font-size:28px; letter-spacing:.2px; }
.sg-brand p{ margin:6px 0 0; color:var(--muted); }

.sg-nav a{
  display:inline-flex; align-items:center; padding:10px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow:var(--shadow);
  margin-left:8px;
}

.sg-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

.sg-content{ display:grid; gap:16px; }
.sg-footer{
  margin-top:24px; padding:18px 0; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line);
}

.sg-prose p{ color:var(--muted); line-height:1.6; }
.sg-prose h2, .sg-prose h3{ margin:10px 0 6px; }