:root{
  --bg: #0b0f19;
  --card: #0f1629;
  --border: #1f2a44;
  --txt: #e5e7eb;
  --muted: #9aa4b2;
  --brand-1: #7c3aed; /* violet */
  --brand-2: #06b6d4; /* cyan */
  --ring: #60a5fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Fluid type scale */
:root{--step--1: clamp(.88rem,.84rem + .2vw, .96rem);
      --step-0: clamp(1rem,.96rem + .35vw,1.125rem);
      --step-1: clamp(1.25rem,1.1rem + .8vw,1.5rem);
      --step-2: clamp(1.563rem,1.25rem + 1.3vw,1.875rem);
      --step-3: clamp(1.953rem,1.5rem + 1.8vw,2.25rem);}

body{min-height:100dvh;background:radial-gradient(1200px 600px at 10% -10%, #1b2340 0%, transparent 60%),
      radial-gradient(900px 500px at 100% 0%, #0f1b2e 0%, transparent 60%),
      linear-gradient(180deg, #0a0f1c, #0b0f19);
  color:var(--txt); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";}

/* Card (glass) */
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:16px; padding:1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(8px);}
.card:hover{transform:translateY(-2px); transition: transform .2s ease}
.card-title{font-size:var(--step-1); font-weight:650}

/* Header */
.header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px)}
.header-inner{max-width:1100px; margin-inline:auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand .logo{width:50px; height:50px; background-image: url("assets/leo.png")}
.brand .name{font-weight:700; letter-spacing:.2px}
.tagline{font-size:var(--step--1); color:var(--muted)}

/* Nav */
.nav{display:flex; align-items:center; gap:.35rem}
.pill{padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 2px; border-radius:5px; color:#e5e7ebcc; text-decoration:none; position:relative}
.pill:hover{color:#000}
.pill.active{color:#0a0f1c; background:linear-gradient(90deg, #a78bfa, #22d3ee);}
/* underline hover */
.pill::after{content:""; position:absolute; inset:auto 12px -6px 12px; height:2px; background:linear-gradient(90deg, #666, #e2e2e1); opacity:0; transform:translateY(4px); transition:.2s}
.pill:hover::after{opacity:1; transform:translateY(0)}

/* Mobile menu */
.menu-btn{display:none}
@media (max-width: 800px){
  .nav{display:none}
  .menu-btn{display:inline-flex; gap:.5rem; align-items:center; padding:.5rem .75rem; border:1px solid var(--border); border-radius:12px; background:#0b1220}
  .mobile-panel{display:none; border-top:1px solid var(--border); background:#0b1220}
  .mobile-panel.open{display:block}
  .mobile-panel a{display:block; padding:.75rem; margin:.25rem .5rem; border-radius:10px; text-decoration:none; color:#e5e7ebcc}
  .mobile-panel a:hover{background:#141c2b; color:#fff}
}

/* Layout */
.container{max-width:1100px; margin-inline:auto; padding:28px 16px}
.grid{display:grid; grid-template-columns: 280px 1fr; gap:24px}
@media (max-width: 1024px){ .grid{grid-template-columns:1fr} }

/* Sidebar */
.sidebar .card{position:sticky; top:90px}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border:1px solid var(--border); border-radius:12px; background:#0b1220; color:#e5e7eb}
.btn:hover{background:#121a2a}
.kbd{font-size:.75rem; border:1px solid var(--border); padding:.15rem .4rem; border-radius:6px; background:#11182a}

/* Content */
.section-title{font-size:var(--step-2); font-weight:750; letter-spacing:.2px}
.lead{color:#c8d2df; line-height:1.65}
.figure{border:0px dashed var(--border); border-radius:14px; height:320px; display:grid; place-items:center; color:var(--muted)}
.figcap{color:#a4b1c0; font-size:.925rem; margin-top:.5rem}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:9999px; font-size:.8rem;
  background:#121a2a; border:1px solid var(--border)}
.badge .dot{width:8px; height:8px; border-radius:9999px; background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); box-shadow:0 0 12px #7c3aed55}

/* Footer */
.footer{border-top:1px solid var(--border); padding:28px 16px; color:#9aa4b2; text-align:center}

/* Focus visibility */
:where(a, button, input, select, textarea):focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}
/* Light theme override when 'light' class is applied to html */
html.light body{background:linear-gradient(180deg,#f8fafc,#eef2ff)}
html.light .card{background:#ffffffc7; border-color:#e5e7eb; color:#0b1220}
html.light .pill{color:#1f2937}
html.light .pill.active{color:#111827}
html.light .sidebar .btn{background:#fff}