*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0e1a;--fg:#e2e8f0;--muted:#94a3b8;--primary:#3b82f6;--card:#111827;--border:#1e293b;--accent:#1e40af;--radius:0.75rem;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color-scheme:dark}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--primary);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.8;text-decoration:underline}
.sp-header{background:var(--card);border-bottom:1px solid var(--border);padding:1rem 0;position:sticky;top:0;z-index:50}
.sp-header .sp-inner{max-width:56rem;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between}
.sp-brand{display:flex;align-items:center;gap:.625rem;font-weight:700;font-size:1.25rem;color:var(--fg);text-decoration:none}
.sp-brand:hover{opacity:1;text-decoration:none}
.sp-brand img{height:2rem;width:2rem;border-radius:.5rem}
.sp-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.sp-nav a{color:var(--muted);font-size:.875rem}
.sp-nav a:hover{color:var(--primary);text-decoration:none}
.sp-main{flex:1;max-width:56rem;margin:0 auto;padding:3rem 1.5rem 4rem;width:100%}
.sp-main h1{font-size:2rem;font-weight:800;margin-bottom:.5rem;color:var(--fg);line-height:1.2}
.sp-main .sp-updated{font-size:.875rem;color:var(--muted);margin-bottom:2rem}
.sp-main h2{font-size:1.35rem;font-weight:700;margin:2.5rem 0 .75rem;color:var(--fg)}
.sp-main h3{font-size:1.1rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--fg)}
.sp-main p{margin-bottom:1rem;color:var(--muted)}
.sp-main ul,.sp-main ol{margin:0 0 1rem 1.5rem;color:var(--muted)}
.sp-main li{margin-bottom:.4rem}
.sp-main strong{color:var(--fg)}
.sp-footer{background:var(--card);border-top:1px solid var(--border);padding:2rem 0;margin-top:auto}
.sp-footer .sp-inner{max-width:56rem;margin:0 auto;padding:0 1.5rem}
.sp-footer-links{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-bottom:1rem}
.sp-footer-links a{color:var(--muted);font-size:.875rem}
.sp-footer-copy{text-align:center;font-size:.8rem;color:var(--muted)}
.sp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;margin-bottom:1.5rem}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.sp-icon-card{text-align:center;padding:1.5rem}
.sp-icon-card h3{margin-top:.5rem;font-size:1rem}
.sp-icon-card p{font-size:.85rem}
@media(max-width:640px){.sp-main h1{font-size:1.5rem}.sp-nav{gap:.75rem}.sp-header .sp-inner{flex-direction:column;gap:.75rem}}