/* -------------------------
       Theme variables (light)
       ------------------------- */
    :root{
      --bg: #f6f7fb;
      --card: #ffffff;
      --muted: #546070;
      --text: #0b1320;
      --accent: #4f46e5;
      --accent-weak: rgba(79,70,229,0.12);
      --glass: rgba(255,255,255,0.6);
      --radius: 12px;
      --shadow: 0 6px 18px rgba(15,23,42,0.06);
      --code-bg: #f3f4f6;
    }

    /* -------------------------
       Dark mode overrides
       ------------------------- */
    .dark, .dark-mode {
      --bg: #0b1020;
      --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      --muted: #9aa3b2;
      --text: #e6eef6;
      --accent: #7c5cff;
      --accent-weak: rgba(124,92,255,0.12);
      --glass: rgba(255,255,255,0.03);
      --radius: 12px;
      --shadow: 0 8px 24px rgba(2,6,23,0.6);
      --code-bg: rgba(255,255,255,0.04);
    }

    /* If user has a system preference, use that initially */
    @media (prefers-color-scheme: dark){
      :root:not(.light):not(.light-mode) {
        /* nothing — styles will use .dark when JS is present; this keeps CSS predictable */
      }
    }

    /* -------------------------
       Base layout
       ------------------------- */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 400px at 10% 10%, rgba(79,70,229,0.06), transparent),
                  radial-gradient(800px 300px at 90% 90%, rgba(16,185,129,0.03), transparent),
                  var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding:28px;
    }

    .container{
      max-width:1100px;
      margin:0 auto;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:28px;
    }

    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      text-decoration:none;
      color:inherit;
    }

    .logo{
      width:44px;
      height:44px;
      display:inline-grid;
      place-items:center;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent), #3b82f6 60%);
      box-shadow:var(--shadow);
      color:white;
      font-weight:700;
      font-size:18px;
    }

    h1{
      margin:0;
      font-size:20px;
      letter-spacing:-0.2px;
    }
    p.lead{
      margin:6px 0 0 0;
      color:var(--muted);
      font-size:14px;
    }

    /* -------------------------
       Toggle button
       ------------------------- */
    .theme-toggle{
      border:0;
      background:var(--glass);
      backdrop-filter: blur(6px);
      padding:8px;
      border-radius:999px;
      display:inline-flex;
      gap:8px;
      align-items:center;
      cursor:pointer;
      box-shadow:var(--shadow);
    }
    .theme-toggle:focus{outline:3px solid var(--accent-weak); outline-offset:3px}

    .toggle-icon{
      width:20px; height:20px;
      display:inline-block;
    }

    /* -------------------------
       Hero / cards
       ------------------------- */
    .hero{
      display:grid;
      grid-template-columns: 1fr 320px;
      gap:18px;
      align-items:start;
      margin-bottom:28px;
    }

    .card{
      background:var(--card);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,0.02);
    }

    .intro h2{ margin:0 0 8px 0; font-size:28px }
    .intro p{ margin:0; color:var(--muted) }

    .actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap }
    .btn{
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      background:linear-gradient(180deg,var(--accent), #5b45ff);
      color:white;
      box-shadow: 0 8px 18px rgba(79,70,229,0.18);
    }
    .btn.ghost{
      background:transparent;
      color:var(--text);
      border:1px solid rgba(255,255,255,0.04);
      box-shadow:none;
    }

    /* features grid */
    .features{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }
    .feature{
      padding:12px;
      border-radius:10px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border:1px solid rgba(255,255,255,0.02);
    }
    .feature h3{ margin:0 0 8px 0; font-size:15px }
    .feature p{ margin:0; color:var(--muted); font-size:13px }

    /* code sample */
    pre code{
      display:block;
      padding:12px;
      border-radius:8px;
      background:var(--code-bg);
      overflow:auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:13px;
      color:inherit;
    }

    footer{
      margin-top:28px;
      text-align:center;
      color:var(--muted);
      font-size:13px;
    }

    /* small screens */
    @media (max-width:880px){
      .hero{ grid-template-columns: 1fr; }
      .features{ grid-template-columns:1fr }
      body{ padding:18px }
    }