:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --card:#0f213f;
  --text:#e8eefc;
  --muted:#a8b7da;
  --accent:#4aa3ff;
  --accent2:#7c5cff;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:radial-gradient(1200px 600px at 20% -10%, rgba(74,163,255,.25), transparent 60%),
             radial-gradient(900px 500px at 90% 0%, rgba(124,92,255,.22), transparent 55%),
             linear-gradient(180deg, #09101e, var(--bg));
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.wrap{display:flex; min-height:100vh}
.sidebar{
  width:330px;
  padding:22px 18px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,27,51,.92), rgba(11,18,32,.92));
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; gap:12px; align-items:center;
  padding:14px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(74,163,255,.12), rgba(124,92,255,.08));
  box-shadow:var(--shadow);
}
.brand h1{font-size:18px; margin:0}
.brand p{margin:2px 0 0 0; color:var(--muted); font-size:12.5px; line-height:1.35}
.badge{margin-left:auto; font-size:11px; color:#cfe3ff; border:1px solid rgba(74,163,255,.35); padding:4px 8px; border-radius:999px; background:rgba(74,163,255,.08)}

.search{
  margin:14px 0 10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  width:100%;
  outline:none;
}
.search:focus{border-color:rgba(74,163,255,.65); box-shadow:0 0 0 4px rgba(74,163,255,.15)}

.nav h2{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:16px 6px 8px}
.nav a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color:var(--text);
  border:1px solid transparent;
}
.nav a small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.nav a:hover{background:rgba(255,255,255,.04); border-color:var(--border); text-decoration:none}
.nav a.active{background:rgba(74,163,255,.10); border-color:rgba(74,163,255,.35)}

.main{flex:1; padding:30px 34px 60px; max-width:1200px}

.hero{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(180deg, rgba(15,33,63,.92), rgba(15,27,51,.70));
  box-shadow:var(--shadow);
  padding:22px;
}
.hero h1{margin:0 0 6px 0; font-size:34px; letter-spacing:-.02em}
.hero .meta{color:var(--muted); font-size:13px}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:16px}
.card{
  grid-column: span 6;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:16px;
}
.card h3{margin:0 0 6px 0; font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.55}

.section{margin-top:26px}
.section h2{
  font-size:22px;
  margin:0 0 10px 0;
  padding-top:12px;
}
.section .lead{color:var(--muted); line-height:1.65; max-width:900px}

.subsection{margin-top:18px}
.subsection h3{margin:0 0 8px 0; font-size:18px}
.subsection p{margin:0 0 10px 0; color:var(--muted); line-height:1.65}

.callout{
  border:1px solid rgba(74,163,255,.35);
  background:rgba(74,163,255,.08);
  border-radius:var(--radius);
  padding:14px 14px;
  color:#dcebff;
  margin:12px 0;
}
.callout strong{color:#ffffff}

.kbd{font-family:var(--mono); font-size:12px; padding:2px 6px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.05)}

.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  text-align:left;
}
.table th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#cfe3ff; background:rgba(255,255,255,.04)}
.table tr:last-child td{border-bottom:none}
.table td code{font-family:var(--mono); font-size:12px}

figure{
  margin:14px 0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:visible;
  background:rgba(255,255,255,.02);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
figure img{width:100%; display:block; cursor:zoom-in}
figcaption{padding:10px 12px; font-size:12.5px; color:var(--muted)}

.gallery{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px}
.gallery figure{grid-column: span 6; margin:0}

.footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.78); z-index:99; padding:18px}
.modal.open{display:grid}
.modal img{max-width:min(1400px, 96vw); max-height:92vh; border-radius:16px; border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 70px rgba(0,0,0,.65)}
.modal .hint{margin-top:10px; color:#d0dcff; font-size:12px; text-align:center}

@media (max-width: 980px){
  .wrap{flex-direction:column}
  .sidebar{width:auto; height:auto; position:relative}
  .main{padding:18px 16px 50px}
  .card{grid-column: span 12}
  .gallery figure{grid-column: span 12}
}


/* Inline figure layout (text + image side-by-side) */
.sideBySide{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
  margin:14px 0 18px;
}
@media (max-width: 980px){
  .sideBySide{grid-template-columns: 1fr;}
}
.inlineFigure{margin:0}
.stepBadge{
  display:inline-block;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  vertical-align:middle;
}
.workflow{margin-top:18px}
.workflowList{margin:10px 0 0; padding-left:22px}
.stepTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  padding:3px 10px;
  margin-right:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(74,163,255,.22), rgba(124,92,255,.18));
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}

/* Hover-to-enlarge (in addition to click-to-zoom modal) */
figure img.zoomable{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  transform-origin:center center;
}
figure img.zoomable:hover{
  transform: scale(1.65);
  z-index: 999;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  filter: saturate(1.05) contrast(1.03);
}
/* Reduce hover zoom on small screens to avoid covering entire viewport */
@media (max-width: 980px){
  figure img.zoomable:hover{ transform: scale(1.15); }
}

.hmini{margin:0 0 8px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.clean{margin:0; padding-left:18px}