*{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:linear-gradient(180deg,var(--bg),var(--surface));
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      transition:background var(--transition), color var(--transition);
    }

    .bg-body-tertiary1 {
        background-color: var(--nav-color)!important;
        color: var(--text);
    }

    .nav-link{
        color: var(--text)!important;
    }

    .toggle:focus{outline:3px solid rgba(99,102,241,0.18)}

    .knob{
      border-radius:999px;
      background:var(--bg);
      box-shadow: 0 4px 10px rgba(2,6,23,0.35);
      transform:translateX(0);
      transition:transform var(--transition), background var(--transition);
      display:flex;align-items:center;justify-content:center;
    }

    /* when dark -> move knob to right and tint background */
    [data-theme="dark"] .toggle{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
    }
    [data-theme="dark"] .knob{
      transform:translateX(calc(var(--w) - var(--h)));
      background:linear-gradient(180deg,var(--surface), rgba(0,0,0,0.06));
    }

    .icon{width:18px;height:18px;display:block}
    .meta{margin-top:1.25rem;color:var(--muted);font-size:0.95rem}

    /* small demo content */
    .demo{
      margin-top:1.5rem;
      padding:1rem;
      border-radius:10px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
      border:1px solid rgba(255,255,255,0.02);
    }

    a.btn{display:inline-block;padding:0.5rem 0.75rem;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.06)}

    /* Responsive */
    @media (max-width:520px){
      .toggle{--w:64px; --h:34px}
    }