*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --orange: #f7a41d;
  --bg: #07060a;
  --fg: #faf6ee;
  --acc: #f7a41d;
  --dim: rgba(250,246,238,0.55); /* Increased contrast for better readability */
  --rule: rgba(247,164,29,0.15); /* Slightly darker rules */
  --grid: rgba(247,164,29,0.032);
}
body { 
  font-family: var(--sans); background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; 
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; transition: background-color 0.25s;
}

[data-theme="light"] {
  --bg: #f5f0e4;
  --fg: #1a1006;
  --dim: rgba(30,18,4,0.7);
  --rule: rgba(30,18,4,0.15);
  --grid: rgba(30,18,4,0.04);
}

/* ════ BIOZIG GLOBAL HEADER LOGO ════ */
.bz-logo-sm { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.bz-logo-sm .bz-chr { display: flex; align-items: baseline; height: auto; }
.bz-logo-sm .bz-chr-band3 {
  font-family: var(--sans); font-size: 26px; font-weight: 900; line-height: 1;
  background: repeating-linear-gradient(180deg, #f7a41d 0%, #f7a41d 8%, #3b82f6 8%, #3b82f6 12%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: -2px;
}
.bz-logo-sm .bz-chr-band7 {
  font-family: var(--sans); font-size: 21px; font-weight: 900; line-height: 1;
  background: repeating-linear-gradient(180deg, #f7a41d 0%, #f7a41d 10%, #3b82f6 10%, #3b82f6 15%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.bz-logo-sm .bz-wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 2px;
  margin-top: 0; display: flex; align-items: center;
}
.bz-logo-sm .w-bio { color: rgba(255,255,255,0.4); }
.bz-logo-sm .w-zig { color: rgba(255,255,255,0.9); }
[data-theme="light"] .bz-logo-sm .w-bio { color: rgba(26,16,6,0.4); }
[data-theme="light"] .bz-logo-sm .w-zig { color: rgba(26,16,6,0.8); }

/* THEME TOGGLE & SEARCH */
.theme-btn, .search-btn {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6);
  transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
.theme-btn:hover, .search-btn:hover { color: rgba(255,255,255,1); border-color: rgba(255,255,255,0.3); }
[data-theme="light"] .theme-btn, [data-theme="light"] .search-btn { border-color: rgba(30,18,4,0.15); background: rgba(30,18,4,0.05); color: rgba(30,18,4,0.7); }
[data-theme="light"] .theme-btn:hover, [data-theme="light"] .search-btn:hover { color: rgba(30,18,4,1); border-color: rgba(30,18,4,0.4); }

/* LAYOUT */
.shell { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; gap: 24px; }
.nav-links { display: flex; gap: 24px; list-style: none; align-items: center; flex-wrap: wrap; }
.nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.15s; padding-bottom: 2px; }
.nav-links a:hover, .nav-links a.active { color: var(--fg); border-bottom: 1px solid var(--acc); }

/* CONTENT */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 80px 0 72px; border-bottom: 1px solid var(--rule); }
.left-col { padding-right: 72px; border-right: 1px solid var(--rule); }
.right-col { padding-left: 72px; }
.fig-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--acc); margin-bottom: 36px; display: flex; align-items: center; gap: 10px; }
.fig-tag::before { content: ''; width: 28px; height: 1px; background: var(--acc); }
h1 { font-weight: 700; font-size: clamp(50px, 6.5vw, 84px); line-height: 0.94; letter-spacing: -0.045em; margin-bottom: 36px; }
h1 em { font-style: normal; color: var(--acc); }

/* IMPROVED READABILITY CLASSES */
.body-text { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--dim); margin-bottom: 36px; max-width: 800px; }
.body-text b { color: var(--fg); font-weight: 600; }
h2 { font-size: 32px; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.02em; padding-top: 48px;}
h2:first-child { padding-top: 0; }
h3 { font-size: 20px; font-weight: 600; margin-top: 36px; margin-bottom: 16px; color: var(--fg); }
p.body-text { font-size: 17px; margin-bottom: 24px; }

/* CALL TO ACTION */
.cta {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--acc); text-decoration: none;
  border: 1px solid rgba(247,164,29,0.35); background: rgba(247,164,29,0.05); padding: 14px 26px; position: relative; transition: all 0.15s;
}
.cta::before, .cta::after { content: ''; position: absolute; width: 8px; height: 8px; }
.cta::before { top: -1px; left: -1px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); }
.cta::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--acc); border-right: 2px solid var(--acc); }
.cta:hover { background: rgba(247,164,29,0.1); border-color: var(--acc); }

/* READOUT BLOCK */
.readout { display: flex; flex-direction: column; gap: 0; }
.row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.row:first-child { border-top: 1px solid var(--rule); }
.op { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dim); }
.op em { display: block; font-style: normal; color: rgba(250,246,238,0.7); font-size: 13px; margin-top: 4px; }
.num { text-align: right; }
.num .v { display: block; font-family: var(--mono); font-size: 38px; font-weight: 700; color: var(--acc); letter-spacing: -0.04em; line-height: 1; }
.num .u { display: block; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 3px; }

/* NOTEBOOK (Docs/Philosophy) */
.nb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 48px; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-top: 80px;}
.nb-head:first-child { margin-top: 0; }
.nb-title { font-size: 28px; font-weight: 700; }
.entry { margin-bottom: 64px; }
.entry-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.entry-n { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--acc); }
.entry-title { font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em; font-weight: 600; color: var(--fg); }
.entry-line { flex-grow: 1; height: 1px; background: var(--rule); }
.entry-body { font-size: 17px; line-height: 1.7; color: var(--dim); margin-bottom: 24px; font-family: var(--sans);}
.entry-body b { color: var(--fg); }
.annotation { border-left: 2px solid var(--acc); padding: 16px 24px; font-family: var(--mono); font-size: 13px; color: var(--dim); background: rgba(247,164,29,0.03); line-height:1.6;}
.annotation b { color: var(--acc); }

/* CODE BLOCKS */
.code { background: #000; border: 1px solid var(--rule); padding: 24px; font-family: var(--mono); font-size: 14px; line-height: 1.6; color: #a1a1aa; border-radius: 4px; margin-bottom:24px; overflow-x: auto; }
[data-theme="light"] .code { background: #fdfcfa; color: #52525b; }
.code .kw { color: #f7a41d; }
.code .fn { color: #60a5fa; }
.code .str { color: #4ade80; }
.code .cm { color: #71717a; font-style: italic; }
.code .typ { color: #c084fc; }

/* CODE TABS */
.code-tabs { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-bottom: 24px; }
.tab-headers { display: flex; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
[data-theme="light"] .tab-headers { background: rgba(0,0,0,0.02); }
.tab-btn { background: none; border: none; padding: 12px 24px; font-family: var(--mono); font-size: 13px; color: var(--dim); cursor: pointer; transition: 0.2s; border-right: 1px solid var(--rule); }
.tab-btn:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.tab-btn.active { color: var(--acc); background: var(--bg); border-bottom: 1px solid var(--bg); margin-bottom: -1px; font-weight:bold;}
.tab-content { display: none; margin: 0; border: none; border-radius: 0; }
.tab-content.active { display: block; }

/* API REFERENCE */
.api-block { margin-bottom: 32px; border: 1px solid var(--rule); padding: 24px; background: rgba(255,255,255,0.01); transition: 0.2s; border-left: 3px solid var(--acc); }
.api-block:hover { background: rgba(247,164,29,0.03); }
[data-theme="light"] .api-block { background: rgba(0,0,0,0.01); }
.api-name { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: 12px; }
.api-sig { font-family: var(--mono); font-size: 14px; color: #60a5fa; margin-bottom: 16px; background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 4px; overflow-x: auto; border: 1px solid rgba(255,255,255,0.05);}
[data-theme="light"] .api-sig { background: rgba(0,0,0,0.05); color: #2563eb; border-color: rgba(0,0,0,0.1); }
.api-desc { font-family: var(--sans); font-size: 16px; color: var(--dim); line-height: 1.7; }

/* ARCHITECTURE GRID */
.arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.arch-cell { border: 1px solid var(--rule); padding: 32px 24px; transition: all 0.2s; }
.arch-cell:hover { border-color: var(--acc); background: rgba(247,164,29,0.05); }
.arch-num { font-family: var(--mono); font-size: 12px; font-weight:bold; color: var(--acc); margin-bottom: 16px; display: block; }
.arch-title { font-weight: 700; font-size: 18px; margin-bottom: 12px; color: var(--fg); }
.arch-desc { font-family: var(--sans); font-size: 15px; color: var(--dim); line-height: 1.6; }

/* SEARCH MODAL */
.search-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; }
.search-modal.active { display: flex; }
.search-box { width: 100%; max-width: 650px; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.search-input { width: 100%; padding: 24px; font-family: var(--sans); font-size: 20px; border: none; background: transparent; color: var(--fg); outline: none; border-bottom: 1px solid var(--rule); }
.search-results { flex-grow: 1; overflow-y: auto; padding: 16px 0; }
.search-result-item { padding: 16px 24px; border-bottom: 1px solid var(--rule); display: block; text-decoration: none; transition: 0.2s; }
.search-result-item:hover { background: rgba(247,164,29,0.05); border-left: 2px solid var(--acc); }
.search-result-title { font-family: var(--sans); font-weight: 700; color: var(--acc); margin-bottom: 8px; font-size: 17px; }
.search-result-snippet { font-family: var(--sans); font-size: 14px; color: var(--dim); line-height: 1.6; }

/* RESPONSIVE DESIGN (MOBILE FIXES) */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 40px 0; border-bottom: none; }
  .left-col { padding-right: 0; border-right: none; margin-bottom: 40px; }
  .right-col { padding-left: 0; border-top: 1px solid var(--rule); padding-top: 40px; }
  .arch-grid { grid-template-columns: 1fr 1fr; }
  .shell { padding: 0 24px; }
}
@media (max-width: 600px) {
  .nav-links { gap: 16px; }
  .arch-grid { grid-template-columns: 1fr; }
  h1 { font-size: 48px; }
  h2 { font-size: 28px; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .num { text-align: left; }
}