:root{
  --bg: #0f1115;
  --panel: #151923;
  --muted: #aab2c0;
  --text: #e7ecf3;
  --brand: #ff7a1a;     /* warm orange accent */
  --brand-2: #ffd7b0;
  --ring: #2b3345;
  --code-bg: #0b0d12;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:linear-gradient(180deg,#0b0d12, #0f1115 30%, #0f1115 100%);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:rgba(15,17,21,.8); backdrop-filter: blur(6px);
  border-bottom:1px solid #1c2230;
}
/* .brand{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.1px; font-size:18px} */
/* Brand with logo */
.brand {
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.1px; font-size:18px;
}
.brand-logo {
  display:block; width:36px; height:36px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.brand-text { line-height:1; }

/* Tighter on small screens */
@media (max-width: 480px){
  .brand-logo { width:30px; height:30px; }
  .brand-text { display:none; } /* keep just the mark if you prefer */
}

/* Light theme tweak: preserve color pop */
.light .brand-logo { filter:none; }

.site-nav{display:flex; gap:14px; align-items:center}
.site-nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.site-nav a[aria-current="page"]{color:var(--text); background:#171c27}
.nav-toggle{display:none; width:36px; height:36px; border:1px solid #273042; border-radius:10px; background:var(--panel)}
.theme-toggle{border:1px solid #273042; background:#171c27; color:var(--text); padding:6px 10px; border-radius:10px}

/* Hero */
.hero{
  display:grid; gap:24px; padding:42px 20px; max-width:1100px; margin:0 auto;
  grid-template-columns: 1.1fr .9fr;
}
.hero-inner h1{font-size:48px; line-height:1.1; margin:0 0 6px}
.tagline{font-size:20px; color:var(--brand-2); margin:0 0 10px}
.subtitle{color:var(--muted); max-width:640px}
.hero-cta {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-code{align-self:center; background:var(--code-bg); border:1px solid #1a2030; border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.code-block{display:block; white-space:pre; overflow:auto; tab-size:2}

/* Buttons */
.btn{display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid transparent}
.btn-primary{background:var(--brand); color:#101217}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#171c27; color:var(--text); border-color:#273042}

/* Cards & panels */
.grid.features{max-width:1100px; margin:10px auto 30px; padding:0 20px; display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--panel); border:1px solid #1b2130; padding:18px; border-radius:16px}
.card h3{margin:0 0 6px}
.panel{max-width:980px; margin:20px auto; padding:22px; background:var(--panel); border:1px solid #1b2130; border-radius:16px}
.panel-cta{margin-top:12px}

/* Checklist */
.checklist{list-style:none; padding:0; margin:0}
.checklist li{padding-left:28px; position:relative; margin:8px 0; color:var(--text)}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand)}

/* Page layout */
.page{max-width:900px; margin:24px auto; padding:0 20px}
.page h1{margin-top:10px}

/* Details blocks in guide */
details{background:#131826; border:1px solid #1b2130; border-radius:14px; margin:14px 0; padding:12px}
details[open]{box-shadow:var(--shadow)}
summary{font-weight:700; cursor:pointer}

/* Footer */
.site-footer{padding:28px 20px; border-top:1px solid #1c2230; color:var(--muted); text-align:center}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid.features{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .grid.features{grid-template-columns:1fr}
  .site-nav{display:none; position:absolute; right:14px; top:58px; background:#0f1115; padding:10px; border:1px solid #222a3a; border-radius:12px; flex-direction:column; width:200px}
  .nav-toggle{display:inline-grid; place-items:center; color:var(--text)}
  .site-nav.open{display:flex}
}

/* Light theme */
.light{
  --bg: #f7f8fb;
  --panel:#ffffff;
  --muted:#5a6475;
  --text:#0b0d12;
  --brand:#ff7a1a;
  --brand-2:#b64a00;
  --ring:#e7ebf3;
  --code-bg:#0f1115;
  background:#f7f8fb;
}
.light .site-header{background:#fff}
.light .site-nav a[aria-current="page"]{background:#f1f4fb}

/* Syntax coloring inside guide code blocks */
.code-keyword { color: #ff7a1a; font-weight: 600; }
.code-string  { color: #98c379; }
.code-comment { color: #5c6370; font-style: italic; }
.code-number  { color: #61afef; }

.checklist strong:first-child {
  color: #ff7a1a;  /* brand orange */
  font-weight: 800;
}

.checklist li::marker {
  color: #4CAF50; /* material green */
}