@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --bg: #070b09;
  --bg-soft: #0c1110;
  --surface: #101513;
  --outline: #2d3934;
  --text: #e7ebe7;
  --text-soft: #aab8b0;
  --primary: #95d3ba;
  --primary-2: #10b981;
  --primary-ink: #05251b;
  --radius-sm: 4px;
  --radius-md: 8px;
  --sidebar-width: 280px;
  --max-width: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(180deg,#050807 0%,#060b09 30%);
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content: '';
  position: fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(90deg, rgba(149,211,186,0.03) 1px, transparent 1px), linear-gradient(180deg, rgba(149,211,186,0.02) 1px, transparent 1px);
  background-size:48px 48px; opacity:0.45;
}

a { color: inherit; text-decoration: none; }
img{ max-width:100%; display:block }

code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.layout{ display:grid; grid-template-columns: var(--sidebar-width) 1fr; min-height:100vh }

.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px; padding:20px;
  background: linear-gradient(180deg, rgba(10,28,22,0.98), rgba(8,24,19,0.92)); border-right:1px solid rgba(57,77,69,0.95);
  overflow:auto;
}

.brand{ display:flex; gap:12px; align-items:center }
.brand-mark{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary); background:linear-gradient(180deg, rgba(149,211,186,0.12), rgba(6,78,59,0.08)); border-radius:8px }
.brand-name{ font-size:18px; font-weight:700 }
.brand-subtitle{ display:block; font-size:12px; color:var(--text-soft); margin-top:3px }

.sidebar-kicker{ font-size:12px; text-transform:uppercase; color:var(--primary); margin:0 }
.sidebar-nav{ display:flex; flex-direction:column; gap:6px; margin-top:8px }
.sidebar-nav a{ display:block; padding:10px 12px; border-radius:8px; color:var(--text-soft); border:1px solid transparent }
.sidebar-nav a:hover{ background: rgba(149,211,186,0.04); color:var(--text) }
.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"]{
  background: rgba(149,211,186,0.09);
  border-color: rgba(149,211,186,0.22);
  color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 700;
}
.sidebar-note{ padding:12px; border-radius:12px; background:linear-gradient(180deg, rgba(23,33,28,0.92), rgba(11,16,14,0.94)); border:1px solid rgba(59,77,69,0.9) }
.sidebar-note strong{ color:var(--primary); font-size:12px; text-transform:uppercase }

.main{ min-width:0 }
.topbar{ position:sticky; top:0; z-index:20; display:flex; gap:14px; align-items:center; padding:12px 20px; background: rgba(16,21,18,0.96); border-bottom:1px solid rgba(57,77,69,0.9) }
.topbar-links{ display:flex; gap:8px; }
.topbar-links a{ padding:8px 12px; border-radius:999px; color:var(--text-soft); background:transparent }
.topbar-links a.active,
.topbar-links a[aria-current="page"],
.topbar-links a:hover{ background: linear-gradient(180deg, rgba(143,220,194,0.12), rgba(86,209,154,0.06)); color:var(--primary) }

.search-wrap{ flex:1; display:flex; justify-content:center }
.search-input{ width:min(420px,100%); padding:10px 14px; border-radius:999px; border:1px solid var(--outline); background: rgba(25,28,27,0.95); color:var(--text) }

.topbar-cta{ padding:8px 14px; border-radius:10px; background:linear-gradient(180deg, var(--primary), var(--primary-2)); color:var(--primary-ink); font-weight:700 }

.page{ width:min(var(--max-width), calc(100vw - var(--sidebar-width))); margin:0 auto; padding:28px }

.hero{ display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:start; padding:22px 0 }
.badge{ display:inline-flex; padding:6px 10px; border-radius:6px; background: rgba(149,211,186,0.06); color:var(--primary); font-size:12px; border:1px solid rgba(149,211,186,0.12) }
.title{ margin:14px 0 16px; font-size:clamp(32px,4.5vw,56px); line-height:0.98; font-weight:700 }
.title .accent{ color:var(--primary) }
.lead{ margin:0; max-width:62ch; color:var(--text-soft); font-size:18px }
.actions{ display:flex; gap:12px; margin-top:18px }
.button{ padding:10px 14px; border-radius:10px; font-weight:700; border:1px solid transparent }
.button.primary{ background:linear-gradient(180deg, var(--primary), var(--primary-2)); color:var(--primary-ink) }
.button.secondary{ background: rgba(25,28,27,0.94); color:var(--text); border:1px solid rgba(149,211,186,0.12) }

.panel.terminal{ background: linear-gradient(180deg, rgba(9,12,10,0.96), rgba(9,12,10,0.82)); padding:12px; border-radius:10px; border:1px solid rgba(47,72,62,0.9) }
.terminal-bar{ display:flex; gap:8px; align-items:center; margin-bottom:8px }
.terminal-label{ margin-left:auto; color:var(--text-soft); font-size:12px }

.section{ margin-top:28px }
.section-head h2{ margin:0 0 8px }
.subtitle{ margin:0; color:var(--text-soft) }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px }
.card{ padding:14px; border-radius:8px; background: rgba(10,14,12,0.6); border:1px solid rgba(59,77,69,0.85) }

.footer{ margin-top:28px; padding:20px 0; border-top:1px solid rgba(57,77,69,0.9) }
.footer-grid{ display:flex; justify-content:space-between; gap:12px }

.page-nav{
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(57,77,69,0.9);
}

.page-nav .actions{
  margin-top: 16px;
}

.page-nav .button.primary{
  min-width: 220px;
}

@media (max-width:900px){
  .layout{ grid-template-columns: 1fr }
  .hero{ grid-template-columns: 1fr }
  .grid-3{ grid-template-columns:1fr }
  .sidebar{ position:relative; height:auto }
}

.panel {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(59, 77, 69, 0.92);
  background: linear-gradient(180deg, rgba(18, 23, 20, 0.97), rgba(11, 15, 13, 0.95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.panel::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(143, 220, 194, 0.95), rgba(86, 209, 154, 0.4), transparent);
}

.terminal {
  padding: 16px;
}

.terminal-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 16px;
}

.terminal-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(191, 201, 195, 0.16);
}

.terminal-bar span:nth-child(1) { background: #ef4444; }
.terminal-bar span:nth-child(2) { background: #f59e0b; }
.terminal-bar span:nth-child(3) { background: #22c55e; }

.terminal-label {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.terminal pre,
.code-shell pre {
  margin: 0;
  overflow: auto;
}

.terminal pre {
  padding: 4px 0 2px;
  color: #7cf4b8;
  font-size: 14px;
  line-height: 1.7;
}

.stat-grid,
.grid-3,
.grid-2 {
  display: grid;
  gap: 16px;
}

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

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

.section {
  margin-top: 36px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.section .subtitle {
  margin: 0;
  max-width: 68ch;
}

.stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(59, 77, 69, 0.92);
  background: linear-gradient(180deg, rgba(18, 28, 24, 0.88), rgba(10, 16, 13, 0.95));
}

.stat strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.stat span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.stat p {
  margin: 8px 0 0;
  color: var(--text-soft);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(59, 77, 69, 0.92);
  background: linear-gradient(180deg, rgba(18, 28, 24, 0.78), rgba(10, 16, 13, 0.94));
  padding: 18px;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(143, 220, 194, 0.04), transparent 35%);
  pointer-events: none;
}

.card h3,
.card h4 {
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.card h3 { font-size: 22px; }
.card h4 { font-size: 18px; }

.card p,
.card li,
.copy-note,
.muted {
  color: var(--text-soft);
}

.card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.card li + li {
  margin-top: 8px;
}

.mini-kicker {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.code-shell {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(59, 77, 69, 0.92);
  background: linear-gradient(180deg, rgba(14, 19, 16, 0.98), rgba(10, 14, 12, 0.98));
  overflow: hidden;
}

.code-shell .copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(149, 211, 186, 0.2);
  background: rgba(8, 13, 11, 0.8);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  opacity: 1;
  transform: translateY(0);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.code-shell .copy-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(10, 20, 16, 0.92);
}

.code-shell pre {
  padding: 18px;
}

.code-shell code,
.terminal code {
  color: #d7f8e9;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
}

.code-shell code .comment,
.terminal code .comment {
  color: var(--text-soft);
}

.callout {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(149, 211, 186, 0.07);
  border: 1px solid rgba(149, 211, 186, 0.2);
  border-left: 4px solid var(--primary);
}

.callout.warning {
  background: rgba(143, 220, 194, 0.06);
  border-color: rgba(143, 220, 194, 0.2);
  border-left-color: var(--secondary);
}

.callout p {
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(59, 77, 69, 0.95);
  background: rgba(14, 19, 16, 0.88);
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(59, 77, 69, 0.78);
  vertical-align: top;
  text-align: left;
}

th {
  background: rgba(18, 28, 24, 0.94);
  color: var(--primary);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.toc {
  position: sticky;
  top: 96px;
}

.toc ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.toc li + li {
  margin-top: 8px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(149, 211, 186, 0.16);
  background: rgba(149, 211, 186, 0.05);
  color: var(--text);
  font-size: 13px;
}

.footer {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(59, 77, 69, 0.85);
  color: var(--text-soft);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.footer-links a {
  color: var(--text-soft);
}

.footer-links a:hover {
  color: var(--primary);
}

.hidden {
  display: none !important;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(149, 211, 186, 0.2);
  background: rgba(25, 28, 27, 0.96);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.divider {
  height: 1px;
  background: rgba(68, 73, 68, 0.8);
  margin: 24px 0;
}

.flow {
  display: grid;
  gap: 14px;
}

.flow-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(59, 77, 69, 0.92);
  background: linear-gradient(180deg, rgba(18, 28, 24, 0.82), rgba(10, 16, 13, 0.95));
}

.flow-step {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(143, 220, 194, 0.08);
  border: 1px solid rgba(143, 220, 194, 0.18);
  color: var(--primary);
  font-weight: 700;
}

.hero .actions {
  display: flex;
}

.flow-item h3,
.flow-item p {
  margin: 0;
}

@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(57, 77, 69, 0.9);
  }

  .page {
    width: min(var(--max-width), 100%);
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }

  .stat-grid,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .search-wrap {
    order: 3;
    width: 100%;
    justify-content: stretch;
  }

  .search-input {
    width: 100%;
  }

  .page {
    padding: 18px 16px 52px;
  }

  .title {
    font-size: clamp(36px, 12vw, 54px);
  }

  .lead {
    font-size: 16px;
  }

  .footer-grid {
    align-items: start;
  }
}