:root{
  --content-width:980px;
  --bg0:#0f0f10;
  --bg1:#1a1b1d;
  --bg2:#2a2c2f;
  --a1:#b9f2cf;
  --a2:#f3d28d;
  --text:#f2f2ee;
  --muted:rgba(242,242,238,.66);
  --line:rgba(255,255,255,.10);
  --card:rgba(22,23,25,.72);
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background: radial-gradient(900px 600px at 20% 10%, rgba(185,242,207,.18), transparent 55%), radial-gradient(800px 500px at 80% 20%, rgba(243,210,141,.16), transparent 55%), radial-gradient(900px 700px at 55% 90%, rgba(255,255,255,.08), transparent 60%), linear-gradient(180deg, var(--bg0), #121315 60%, #0f0f10); }
.topbar{ position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(15,15,16,.55); border-bottom:1px solid rgba(255,255,255,.08); }
.topbar-inner{ max-width:var(--content-width); margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.5px; }
.brand-badge{ width:12px; height:12px; border-radius:999px; background:radial-gradient(circle at 30% 30%, var(--a2), var(--a1) 55%, rgba(185,242,207,.15)); box-shadow:0 0 18px rgba(185,242,207,.55); }
.brand span{ background:linear-gradient(90deg,var(--a2),var(--a1)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu{ position:relative; margin-left:auto; }
.menu-toggle{ position:absolute; opacity:0; pointer-events:none; }
.menu-button{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.menu-button:hover{ border-color:rgba(185,242,207,.45); background:rgba(185,242,207,.10); }
.menu-lines{ position:relative; width:20px; height:14px; display:block; }
.menu-lines span{ position:absolute; left:0; width:20px; height:2px; border-radius:999px; background:rgba(242,242,238,.92); transition:transform .18s ease,opacity .12s ease,top .18s ease; }
.menu-lines span:nth-child(1){ top:0; }
.menu-lines span:nth-child(2){ top:6px; }
.menu-lines span:nth-child(3){ top:12px; }
.menu-toggle:checked + .menu-button .menu-lines span:nth-child(1){ top:6px; transform:rotate(45deg); }
.menu-toggle:checked + .menu-button .menu-lines span:nth-child(2){ opacity:0; }
.menu-toggle:checked + .menu-button .menu-lines span:nth-child(3){ top:6px; transform:rotate(-45deg); }
.nav{ position:absolute; right:0; top:52px; min-width:230px; display:grid; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(15,15,16,.96); box-shadow:var(--shadow); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .16s ease,transform .16s ease; }
.menu-toggle:checked ~ .nav{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav a{ text-decoration:none; color:rgba(242,242,238,.92); font-size:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.04); transition:border-color .12s ease,background .12s ease; }
.nav a:hover{ border-color:rgba(185,242,207,.45); background:rgba(185,242,207,.10); }
.wrap{ max-width:var(--content-width); margin:0 auto; padding:26px 16px 60px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
h1{ font-size:30px; margin:0 0 10px; font-weight:650; letter-spacing:.2px; }
h2{ font-size:18px; margin:22px 0 10px; font-weight:600; color:rgba(242,242,238,.92); }
p,li{ line-height:1.65; color:var(--muted); font-size:15px; }
b,strong{ color:rgba(242,242,238,.95); font-weight:650; }
.meta{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 18px; }
.badge{ font-size:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:7px 10px; border-radius:999px; color:rgba(242,242,238,.82); }
a{ color:rgba(185,242,207,.95); }
a:hover{ color:rgba(243,210,141,.95); }
.small{ font-size:12px; color:rgba(242,242,238,.60); margin-top:16px; border-top:1px solid rgba(255,255,255,.08); padding-top:14px; }
ul{ padding-left:18px; }
li{ margin:7px 0; }
hr{ border:0; border-top:1px solid rgba(255,255,255,.08); margin:22px 0; }
code{ display:inline-block; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:6px; padding:2px 6px; color:rgba(242,242,238,.95); }
@media (max-width:520px){ h1{ font-size:24px; } .nav{ right:-4px; min-width:calc(100vw - 32px); } }