:root{
  --bg:#fff7ed;
  --ink:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);
  --c1:#ff3d71;
  --c2:#7c3aed;
  --c3:#06b6d4;
}

body.theme-b0018{background:radial-gradient(1100px 480px at 10% 0%, rgba(255,61,113,.18), transparent 72%),
  radial-gradient(900px 520px at 90% 10%, rgba(124,58,237,.14), transparent 70%),
  radial-gradient(900px 520px at 55% 90%, rgba(6,182,212,.12), transparent 72%),
  var(--bg);
  color:var(--ink);
}

#logo a{font-weight:900; letter-spacing:.02em; text-decoration:none; color:var(--ink);} 

.ribbon{height:10px; background:linear-gradient(90deg, var(--c1), var(--c2), var(--c3));}

.wrap{max-width:1100px; margin:0 auto; padding:0 16px;}

.headerx{position:sticky; top:0; z-index:40; background:rgba(255,247,237,.82); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);} 

.tabs a{display:inline-block; padding:.6rem .85rem; border-radius:999px; text-decoration:none; color:var(--muted);} 
.tabs a.is-active{background:rgba(15,23,42,.08); color:var(--ink); font-weight:800;} 

.panelx{background:rgba(255,255,255,.76); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(2,6,23,.10);} 

.grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:1rem;
}

.side a{display:block; padding:.55rem .7rem; border-radius:12px; text-decoration:none; color:var(--muted);} 
.side a:hover{background:rgba(15,23,42,.06); color:var(--ink);} 

#footer{margin-top:2rem; padding:1.75rem 0; border-top:1px solid var(--line);} 

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr;}
}