:root {
  --bg: #1a1b26;
  --bg-secondary: #24283b;
  --bg-code: #1e2030;
  --text: #c0caf5;
  --text-secondary: #a9b1d6;
  --accent: #0082FC;
  --accent-hover: #339dff;
  --border: #3b4261;
  --success: #9ece6a;
  --warning: #e0af68;
  --error: #f7768e;
  --table-stripe: #1e2030;
  --shadow: rgba(0, 0, 0, 0.3);
  --nav-bg: #16161e;
}

[data-theme="light"] {
  --bg: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-code: #e8e8e8;
  --text: #1a1b26;
  --text-secondary: #4e5173;
  --accent: #0070d6;
  --accent-hover: #005cb8;
  --border: #d0d0d0;
  --success: #4a7a1e;
  --warning: #a07020;
  --error: #c44040;
  --table-stripe: #eaeaea;
  --shadow: rgba(0, 0, 0, 0.1);
  --nav-bg: #e8e8e8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  transition: background 0.3s, color 0.3s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.logo:hover { text-decoration: none; }

.logo-svg { height: 28px; width: auto; display: block; }
.logo-dark { fill: var(--text); }
.logo-cutout { fill: var(--nav-bg); }

nav { display: flex; align-items: center; gap: 1.5rem; }
nav a { color: var(--text-secondary); font-size: 0.9rem; }
nav a:hover { color: var(--accent); text-decoration: none; }
nav a.active { color: var(--accent); font-weight: 600; }

.theme-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 1rem;
  transition: background 0.2s;
}

.theme-toggle:hover { background: var(--border); }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}

h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--text); }
h2 { font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.75rem; color: var(--text); }

p { margin-bottom: 1rem; color: var(--text-secondary); }

ul, ol { margin: 0 0 1rem 1.5rem; color: var(--text-secondary); }
li { margin-bottom: 0.3rem; }

code {
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.85em;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Prism.js theme overrides to match site theme */
pre[class*="language-"],
code[class*="language-"] {
  background: var(--bg-code);
  color: var(--text);
  text-shadow: none;
}

pre[class*="language-"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #636da6; }
.token.punctuation { color: var(--text-secondary); }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #ff9e64; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: #9ece6a; }
.token.operator, .token.entity, .token.url { color: #89ddff; }
.token.atrule, .token.attr-value, .token.keyword { color: #bb9af7; }
.token.function, .token.class-name { color: #7aa2f7; }
.token.regex, .token.important, .token.variable { color: #e0af68; }

[data-theme="light"] .token.comment, [data-theme="light"] .token.prolog, [data-theme="light"] .token.doctype, [data-theme="light"] .token.cdata { color: #8890a8; }
[data-theme="light"] .token.punctuation { color: var(--text-secondary); }
[data-theme="light"] .token.property, [data-theme="light"] .token.tag, [data-theme="light"] .token.boolean, [data-theme="light"] .token.number, [data-theme="light"] .token.constant, [data-theme="light"] .token.symbol { color: #b5560f; }
[data-theme="light"] .token.selector, [data-theme="light"] .token.attr-name, [data-theme="light"] .token.string, [data-theme="light"] .token.char, [data-theme="light"] .token.builtin { color: #4a7a1e; }
[data-theme="light"] .token.operator, [data-theme="light"] .token.entity, [data-theme="light"] .token.url { color: #2e7d9e; }
[data-theme="light"] .token.atrule, [data-theme="light"] .token.attr-value, [data-theme="light"] .token.keyword { color: #7c3aad; }
[data-theme="light"] .token.function, [data-theme="light"] .token.class-name { color: #2e59a8; }
[data-theme="light"] .token.regex, [data-theme="light"] .token.important, [data-theme="light"] .token.variable { color: #a07020; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

th, td {
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th { color: var(--text); font-weight: 600; background: var(--bg-secondary); }
tr:nth-child(even) td { background: var(--table-stripe); }

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s;
  min-width: 0;
  overflow-x: auto;
}

.card:hover { box-shadow: 0 4px 12px var(--shadow); }

.card h3 { margin-top: 0; }
.card pre { margin-bottom: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 4px;
}

.badge-blue { background: rgba(0, 130, 252, 0.15); color: var(--accent); }
.badge-green { background: rgba(158, 206, 106, 0.15); color: var(--success); }
.badge-yellow { background: rgba(224, 175, 104, 0.15); color: var(--warning); }
.badge-red { background: rgba(247, 118, 142, 0.15); color: var(--error); }

.hero {
  text-align: center;
  padding: 3rem 1rem;
}

.hero-logo { display: flex; justify-content: center; margin-bottom: 1rem; }
.hero-logo-svg { height: 80px; width: auto; }
.hero-logo-svg .logo-cutout { fill: var(--bg); }
.hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.hero p { font-size: 1.1rem; max-width: 650px; margin: 0 auto 1.5rem; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin: 2rem 0; }

.feature {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
}

.feature-icon { margin-bottom: 0.75rem; color: var(--text-secondary); }
.feature-icon svg { width: 36px; height: 36px; }
.feature h3 { margin-bottom: 0.5rem; }

.diagram {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
}

.diagram pre { border: none; padding: 0; margin: 0; background: none; }
.diagram .mermaid svg { background: transparent !important; }
.diagram .mermaid { display: flex; justify-content: center; }

.packet-format-wrapper { overflow-x: auto; margin: 1rem 0 1.5rem; }
.packet-format {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 550px;
}
.packet-field {
  border-right: 1px solid var(--border);
  padding: 0.5rem 0.25rem;
  text-align: center;
  background: var(--bg-secondary);
  min-width: 35px;
}
.packet-field:last-child { border-right: none; }
.packet-field-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.packet-field-size { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; }
.packet-field-var { background: var(--bg-code); }

.bench-value { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.bench-unit { font-size: 0.9rem; color: var(--text-secondary); }

footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .hamburger { display: block; }
  nav { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: var(--nav-bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; gap: 0.75rem; }
  nav.open { display: flex; }
  .hero h1 { font-size: 1.8rem; }
  main { padding: 1.5rem 1rem; }
  .grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  table { font-size: 0.8rem; }
  th, td { padding: 0.4rem 0.5rem; }
}