:root{
  --z-charcoal:#2E2E2E;
  --z-cream:#F4F1E8;
  --z-accent:#8A9EFF;
  --z-blush:#F2A7A7;
  --z-brown:#7A4E2F;
  --z-mist:#F8F7FC;
  --z-minty:#63D6B2;

  --z-slate-900:#0f172a;
  --z-slate-800:#1f2937;
  --z-slate-700:#334155;
  --z-slate-600:#475569;
  --z-slate-200:#e2e8f0;
  --z-slate-100:#f1f5f9;
}

body{
  background: linear-gradient(to bottom, #f5f3ff 0%, #ffffff 45%, #f8fafc 100%);
  color: var(--z-slate-900);
}

/* Big rounded style used everywhere */
.z-round-xl{ border-radius: 2rem; }
.z-round-2xl{ border-radius: 1.5rem; }

/* Soft “ring” look */
.z-ring{
  border: 1px solid rgba(226,232,240,1);
}

/* Blurred glass header */
.z-glass{
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(10px);
}

/* “Sleep badge” */
.z-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(226,232,240,1);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  font-weight: 700;
  color: var(--z-slate-700);
  font-size: .95rem;
}
.z-badge .zz{ color: var(--z-accent); font-weight: 800; }

/* Buttons close to your Tailwind ones */
.btn-z-dark{
  background: var(--z-slate-900);
  color: #fff;
  border: 0;
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 800;
  box-shadow: 0 18px 30px rgba(15,23,42,.15);
  transform: translateY(0);
  transition: transform .15s ease;
}
.btn-z-dark:hover{ transform: translateY(-2px); background:var(--z-slate-700); color:#fff }

.btn-z-light{
  background: #fff;
  color: var(--z-slate-800);
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 800;
  border: 1px solid rgba(226,232,240,1);
  transform: translateY(0);
  transition: transform .15s ease;
}
.btn-z-light:hover{ transform: translateY(-2px); }

/* Card style close to rounded-3xl + ring + shadow */
.z-card{
  background:#fff;
  border-radius: 1.75rem;
  border: 1px solid rgba(226,232,240,1);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.z-card h3{ color: var(--z-slate-800); font-weight: 900; }
.z-muted{ color: var(--z-slate-600); }

/* Code block */
pre.zuzu-highlight{
  margin: 0;
  padding: 1.25rem;
  border-radius: 1.25rem;
  overflow-x: auto;
  line-height: 1.75;
  font-size: .95rem;
}

/* Right-side gradient blob behind the mascot card */
.z-blob{
  position:absolute;
  inset: 0;
  border-radius: 2rem;
  background: linear-gradient(45deg, rgba(138,158,255,.45), rgba(237,233,254,.75), rgba(242,167,167,.45));
  filter: blur(48px);
  z-index: -1;
}

/* Meet Zia left panel */
.z-dark-panel{
  background: var(--z-slate-900);
  color:#fff;
  border-radius: 2rem;
  box-shadow: 0 20px 50px rgba(15,23,42,.20);
}

/* CTA */
.z-cta{
  background: linear-gradient(to right, var(--z-slate-900), #111827);
  border-radius: 2rem;
  color:#fff;
  box-shadow: 0 30px 60px rgba(15,23,42,.25);
}
.z-cta p{ color: rgba(226,232,240,.80); }

/* Navbar links */
.nav-link{ font-weight: 700; color: var(--z-slate-600); }
.nav-link:hover{ color: var(--z-slate-900); }

.z-site-logo{
  width: auto;
  height: 42px;
  max-width: 100%;
  object-fit: contain;
}

.z-nav-toggle{
  border-color: rgba(148,163,184,.65);
}

.z-nav-toggle:focus{
  box-shadow: 0 0 0 .2rem rgba(138,158,255,.35);
}

.z-nav-toggle .navbar-toggler-icon{
  background-image: none;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.z-nav-toggle .navbar-toggler-icon::before,
.z-nav-toggle .navbar-toggler-icon::after,
.z-nav-toggle .navbar-toggler-icon{
  border-top: 2px solid var(--z-slate-700);
}

.z-nav-toggle .navbar-toggler-icon::before,
.z-nav-toggle .navbar-toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.z-nav-toggle .navbar-toggler-icon::before{ top: .35rem; }
.z-nav-toggle .navbar-toggler-icon::after{ top: .7rem; }

/* Slightly bigger display heading */
.z-hero-title{
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* Small helper for section spacing */
.z-section{ padding-top: 3rem; padding-bottom: 3rem; }

.z-doc{
  line-height: 1.75;
}
.z-doc h1,
.z-doc h2,
.z-doc h3,
.z-doc h4,
.z-doc h5,
.z-doc h6{
  color: var(--z-slate-800);
  font-weight: 900;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.z-doc h1:first-child,
.z-doc h2:first-child,
.z-doc h3:first-child{
  margin-top: 0;
}
.z-doc p,
.z-doc ul,
.z-doc ol,
.z-doc pre,
.z-doc .z-doc-table{
  margin-bottom: 1.25rem;
}
.z-doc pre:not(.zuzu-highlight){
  background: #111827;
  color: #f8fafc;
  border-radius: 1.25rem;
  padding: 1.25rem;
}
.z-doc pre code{
  display: block;
  overflow-x: auto;
  white-space: pre;
}
.z-doc code{
  white-space: nowrap;
}
.z-doc .zuzu-highlight{
  background: #111827;
  color: #f8fafc;
}
.z-doc-table{
  border: 1px solid rgba(226,232,240,1);
  border-radius: 1rem;
}
.z-doc-table table{
  min-width: 48rem;
  margin-bottom: 0;
}
.z-guide-nav{
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
}
.z-guide-nav .nav-link{
  border-radius: .75rem;
  padding: .45rem .65rem;
}
.z-guide-nav .nav-link.active{
  background: var(--z-slate-100);
  color: var(--z-slate-900);
}
.z-guide-index-link{
  color: var(--z-slate-800);
  text-decoration: none;
}
.z-guide-index-link:hover{
  color: var(--z-slate-900);
  transform: translateY(-1px);
}
.z-guide-next{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.75rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--z-slate-900);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1.25rem 2.5rem rgba(15,23,42,.18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.z-guide-next:hover,
.z-guide-next:focus{
  background: var(--z-slate-800);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 1.5rem 3rem rgba(15,23,42,.24);
}
.z-guide-next-icon{
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
}
.z-guide-next-icon svg{
  width: 1.5rem;
  height: 1.5rem;
}
.z-guide-next-copy{
  min-width: 0;
}
.z-guide-next-label{
  display: block;
  color: rgba(226,232,240,.84);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.z-guide-next-title{
  display: block;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
}
.z-intro-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.z-intro-link{
  min-height: 6.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(203,213,225,1);
  border-radius: 1rem;
  background: #fff;
  color: var(--z-slate-800);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  transform: translateY(0);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.z-intro-link:hover,
.z-intro-link:focus{
  color: var(--z-slate-900);
  border-color: rgba(138,158,255,.85);
  box-shadow: 0 20px 44px rgba(15,23,42,.13);
  transform: translateY(-2px);
}
.z-intro-icon{
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.z-download-feature-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.z-download-feature{
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.z-download-feature h2{
  margin-top: 0;
}
.z-download-feature p{
  flex: 1 1 auto;
}
.z-download-list{
  display: grid;
  gap: .75rem;
  padding-left: 0;
  list-style: none;
}
.z-download-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(203,213,225,1);
  border-radius: .85rem;
  background: #fff;
}
.z-download-list span{
  font-weight: 800;
  color: var(--z-slate-800);
}
.z-download-list a{
  color: var(--z-slate-600);
  font-weight: 800;
  text-decoration: none;
}
.z-free-software{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(203,213,225,1);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.z-free-software h2{
  margin-top: 0;
  margin-bottom: .5rem;
}
.z-free-software p{
  margin-bottom: 0;
}
.z-free-software a{
  font-weight: 800;
  color: var(--z-slate-900);
}
.z-free-software-icon{
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.z-try-output{
  min-height: 24rem;
  max-height: 34rem;
  overflow: auto;
  border: 1px solid rgba(203,213,225,1);
  border-radius: 1rem;
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  white-space: pre-wrap;
}
.z-try-script{
  min-height: 20rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.z-try-run{
  font-weight: 700;
}
.z-try-stdout + .z-try-stdout,
.z-try-stderr + .z-try-stderr,
.z-try-stdout + .z-try-stderr,
.z-try-stderr + .z-try-stdout{
  margin-top: .35rem;
}
.z-try-stderr{
  color: #fda4af;
}

@media (max-width: 991.98px){
  .z-guide-nav{
    position: static;
    max-height: 18rem;
  }

  .z-intro-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .z-download-feature-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  .z-site-nav{
    width: 100%;
    margin-top: .75rem;
  }

  .z-site-nav .nav-link,
  .z-site-nav .btn,
  .z-site-nav form{
    width: 100%;
  }

  .z-site-nav .btn{
    text-align: center;
  }

  .z-intro-grid{
    grid-template-columns: 1fr;
  }

  .z-download-feature-grid{
    grid-template-columns: 1fr;
  }

  .z-download-list li{
    align-items: flex-start;
    flex-direction: column;
  }

  .z-free-software{
    align-items: flex-start;
    flex-direction: column;
  }
}