/* LUKSbox - clean security-minimal design system */

:root {
  /* neutrals - cool, near-zero chroma */
  --bg:        oklch(0.99 0.003 240);
  --bg-soft:   oklch(0.975 0.004 240);
  --bg-muted:  oklch(0.955 0.005 240);
  --line:      oklch(0.90 0.008 240);
  --line-soft: oklch(0.94 0.006 240);
  --fg:        oklch(0.22 0.02 240);
  --fg-soft:   oklch(0.42 0.018 240);
  --fg-mute:   oklch(0.58 0.014 240);

  /* single accent - brand soft blue #6e9def */
  --accent:        #6e9def;
  --accent-strong: #3d6fc9;
  --accent-soft:   rgba(110, 157, 239, 0.10);
  --accent-line:   rgba(110, 157, 239, 0.28);

  /* signal - used very sparingly */
  --ok:    oklch(0.62 0.12 155);
  --warn:  oklch(0.72 0.13 75);

  --radius:  6px;
  --radius-lg: 10px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1180px;
  --maxw-prose: 720px;
}

html[data-theme="dark"] {
  /* Brand-aligned dark palette: bg #1a1c28, text white, accent #6e9def, lines #d5dae0 */
  --bg:        #1a1c28;
  --bg-soft:   #20222f;
  --bg-muted:  #262838;
  --line:      rgba(213, 218, 224, 0.16);   /* #d5dae0 @ 16% */
  --line-soft: rgba(213, 218, 224, 0.09);
  --fg:        #ffffff;
  --fg-soft:   #d5dae0;
  --fg-mute:   #8a90a3;

  --accent:        #6e9def;
  --accent-strong: #8db3f3;
  --accent-soft:   rgba(110, 157, 239, 0.14);
  --accent-line:   rgba(110, 157, 239, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html[data-theme="dark"] body { background: var(--bg); }
/* prefer the brand dark by default at the system level too */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg:#1a1c28;--bg-soft:#20222f;--bg-muted:#262838;
    --line:rgba(213,218,224,.16);--line-soft:rgba(213,218,224,.09);
    --fg:#fff;--fg-soft:#d5dae0;--fg-mute:#8a90a3;
    --accent:#6e9def;--accent-strong:#8db3f3;
    --accent-soft:rgba(110,157,239,.14);--accent-line:rgba(110,157,239,.35);
  }
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

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

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-size: 1.125rem; line-height: 1.35; }
p  { margin: 0; text-wrap: pretty; }

code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* utilities */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-soft);
  background: var(--bg-soft);
}
.tag .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-secondary {
  border-color: var(--line);
  background: var(--bg);
  color: var(--fg);
}
.btn-secondary:hover { border-color: var(--fg-mute); background: var(--bg-soft); }
.btn-ghost { color: var(--fg-soft); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn .icon { width: 14px; height: 14px; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .name { font-size: 15px; }
.brand .ver  { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.nav a {
  color: var(--fg-soft);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 5px;
}
.nav a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.nav a.active { color: var(--fg); background: var(--bg-muted); }

.header-spacer { flex: 1; }

.search-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--fg-mute);
  font-size: 13px;
  min-width: 220px;
  cursor: pointer;
}
.search-mini:hover { border-color: var(--fg-mute); }
.search-mini .icon { width: 14px; height: 14px; }
.search-mini .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-mute);
  background: var(--bg);
}

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--fg); }
.icon-btn .icon { width: 16px; height: 16px; }

/* hero */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.hero .bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.7;
}
.hero .bg-glow {
  position: absolute;
  left: 50%;
  top: -10%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%);
  pointer-events: none;
}
.hero .inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.hero .hero-mark {
  width: 96px; height: 96px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 6px 24px rgba(110, 157, 239, 0.25));
}
.hero .hero-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero .badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.hero h1 { margin-bottom: 22px; }
.hero .lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--fg-soft);
  max-width: 640px;
  margin: 0 auto 18px;
}
.hero .author {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}
.hero .author a { color: var(--fg-soft); }
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

/* hero search */
.hero-search {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}
.hero-search form {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 6px 6px 14px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px -12px oklch(0 0 0 / 0.08);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hero-search form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero-search .icon-leading { width: 16px; height: 16px; color: var(--fg-mute); flex-shrink: 0; }
.hero-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  padding: 10px 12px;
  outline: none;
}
.hero-search input::placeholder { color: var(--fg-mute); }
.hero-search button {
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--fg);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.hero-search button:hover { background: var(--fg-soft); }
.hero-search .hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 12px;
  letter-spacing: 0.04em;
}
.hero-search .hint span { color: var(--fg-soft); }

/* section frame */
.section {
  padding: clamp(56px, 8vw, 96px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.section .head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.section .head .eyebrow { display: block; margin-bottom: 14px; }
.section .head h2 { margin-bottom: 12px; }
.section .head p { color: var(--fg-soft); font-size: 1.03rem; }

/* topics grid */
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.topic {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 26px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
  position: relative;
}
.topic:hover { background: var(--bg-soft); text-decoration: none; }
.topic .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.topic .icon-wrap {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--fg);
}
.topic .icon-wrap .icon { width: 18px; height: 18px; }
.topic h3 { color: var(--fg); }
.topic p { color: var(--fg-soft); font-size: 14px; }
.topic .arrow {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topic:hover .arrow { color: var(--accent-strong); }
.topic:hover .arrow svg { transform: translateX(2px); }
.topic .arrow svg { width: 12px; height: 12px; transition: transform 120ms ease; }

/* feature row - 3 columns of value props */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.feature {
  padding: 36px clamp(20px, 3vw, 36px);
  border-right: 1px solid var(--line-soft);
}
.feature:last-child { border-right: 0; }
.feature .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
}
.feature h3 { margin-bottom: 10px; font-size: 1.05rem; }
.feature p { color: var(--fg-soft); font-size: 14px; }

@media (max-width: 800px) {
  .features { grid-template-columns: 1fr; }
  .feature { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .feature:last-child { border-bottom: 0; }
}

/* terminal demo */
.demo-wrap {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.terminal {
  background: #1a1c28;
  color: #ffffff;
  border: 1px solid rgba(213, 218, 224, 0.18);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45);
}
.terminal .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(213, 218, 224, 0.12);
  background: #20222f;
}
.terminal .dots { display: flex; gap: 6px; }
.terminal .dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(213,218,224,0.30); }
.terminal .title { font-size: 11px; color: #8a90a3; letter-spacing: 0.05em; }
.terminal .body { padding: 18px 22px; }
.terminal .prompt { color: #6e9def; }
.terminal .cmd { color: #ffffff; }
.terminal .out  { color: #d5dae0; }
.terminal .ok   { color: #8de2b6; }
.terminal .dim  { color: #6c7187; }

/* faq */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
  flex-shrink: 0;
  padding-top: 4px;
  min-width: 28px;
}
.faq summary .q { flex: 1; }
.faq summary .toggle {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--fg-soft);
  flex-shrink: 0;
  transition: transform 160ms ease, background 120ms ease;
}
.faq summary .toggle svg { width: 12px; height: 12px; }
.faq details[open] summary .toggle { transform: rotate(45deg); background: var(--bg-muted); }
.faq .answer {
  padding: 14px 0 4px 44px;
  color: var(--fg-soft);
  font-size: 0.97rem;
  line-height: 1.65;
}
.faq .answer a { color: var(--accent-strong); }

.faq-foot {
  text-align: center;
  margin-top: 36px;
  color: var(--fg-soft);
  font-size: 14px;
}
.faq-foot a { margin-left: 4px; }

/* footer */
.site-footer {
  padding: 56px 0 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg-soft);
}
.site-footer .grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 800px) {
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
  font-weight: 500;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer ul a { color: var(--fg-soft); }
.site-footer ul a:hover { color: var(--fg); text-decoration: none; }
.site-footer .colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.site-footer .colophon .links { display: flex; gap: 18px; }

/* ==== Docs page (sidebar layout) ==== */
.docs-wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 200px;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 40px) 80px;
  align-items: start;
}
@media (max-width: 1024px) {
  .docs-wrap { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .docs-toc { display: none; }
}
@media (max-width: 760px) {
  .docs-wrap { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
}
.docs-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  font-size: 14px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-sidebar .group { margin-bottom: 22px; }
.docs-sidebar .group-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 8px;
  padding: 0 10px;
  text-decoration: none;
  border-radius: 0;
  line-height: 1.4;
}
.docs-sidebar a.group-title:hover { background: transparent; color: var(--fg); text-decoration: underline; }
.docs-sidebar a.group-title[aria-current="page"] { color: var(--fg); }
.docs-sidebar a {
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--fg-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.docs-sidebar a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.docs-sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent);
}

.docs-content { min-width: 0; }
.docs-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  margin-bottom: 16px;
}
.docs-breadcrumb span { color: var(--fg-soft); }
.docs-content h1 { font-size: 2.1rem; line-height: 1.15; margin-bottom: 8px; }
.docs-content > .lede { color: var(--fg-soft); font-size: 1.05rem; margin-bottom: 32px; max-width: var(--maxw-prose); }
.docs-content h2 {
  font-size: 1.45rem;
  margin: 48px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.docs-content h2:first-of-type { border-top: 0; padding-top: 0; }
.docs-content h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.docs-content p,
.docs-content ul,
.docs-content ol { margin: 0 0 14px; max-width: var(--maxw-prose); color: var(--fg-soft); }
.docs-content ul, .docs-content ol { padding-left: 22px; }
.docs-content li { margin-bottom: 4px; }
.docs-content strong { color: var(--fg); font-weight: 600; }
.docs-content code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1.5px 5px;
  background: var(--bg-muted);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--fg);
}
.docs-content pre {
  background: #1a1c28;
  color: #ffffff;
  padding: 16px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 18px;
  border: 1px solid rgba(213, 218, 224, 0.18);
  max-width: var(--maxw-prose);
}
.docs-content pre code { color: inherit; background: transparent; padding: 0; border: 0; }

.callout {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: 14px;
  margin: 0 0 18px;
  max-width: var(--maxw-prose);
}
.callout .icon { width: 16px; height: 16px; color: var(--accent-strong); margin-top: 2px; }
.callout strong { display: block; margin-bottom: 2px; }

.callout-warn {
  border-color: oklch(0.85 0.09 75);
  background: oklch(0.97 0.04 75);
  color: var(--fg);
}
html[data-theme="dark"] .callout-warn {
  border-color: oklch(0.42 0.10 75);
  background: oklch(0.26 0.06 75);
}
.callout-warn .icon { color: var(--warn); }

.docs-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  font-size: 13px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-toc .toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 12px;
}
.docs-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.docs-toc a {
  color: var(--fg-soft);
  font-size: 12.5px;
  line-height: 1.45;
  display: block;
  border-left: 1px solid var(--line);
  padding: 2px 0 2px 12px;
}
.docs-toc a.active {
  color: var(--accent-strong);
  border-left-color: var(--accent);
}

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
}
.docs-pager a:hover { border-color: var(--fg-mute); background: var(--bg-soft); text-decoration: none; }
.docs-pager .dir { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.06em; }
.docs-pager .ttl { font-weight: 500; font-size: 14px; }
.docs-pager .next { text-align: right; }

/* ==== Download page ==== */
.download-hero {
  padding: 64px 0 32px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.download-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.download-hero p  { color: var(--fg-soft); max-width: 600px; margin: 0 auto; }

.platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 40px auto 0;
}
@media (max-width: 800px) { .platforms { grid-template-columns: 1fr; } }
.platform {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.platform.recommended { border-color: var(--accent-line); position: relative; }
.platform.recommended::before {
  content: "Recommended";
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
}
.platform .head-row {
  display: flex; align-items: center; gap: 12px;
}
.platform .platform-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--fg);
}
.platform .platform-icon svg { width: 24px; height: 24px; }
.platform h3 { font-size: 1.1rem; }
.platform .ver { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); }
/* Summary paragraph: no flex stretch, so the actions row sits right
   under the summary text instead of being pushed to the bottom of
   the grid-cell-height box (which equals the tallest platform's
   content). The "notes" paragraph below the actions still gets
   pushed to the bottom via .platform .notes { margin-top: auto } so
   the box still visually fills. */
.platform p { color: var(--fg-soft); font-size: 13.5px; margin: 0; }
.platform .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.platform .actions .btn { font-size: 13px; padding: 8px 12px; }
/* Notes sit directly under the actions row so the small print is
   visually attached to the buttons it describes, rather than being
   pushed to the bottom of the platform card. The parent .platform
   has gap:14px which handles spacing — no extra margin needed.
   Sibling cards in the grid may be different heights as a result;
   that's fine. */
.platform .notes {
  font-size: 13px;
  color: var(--fg-soft);
}

.install-tabs {
  max-width: 760px;
  margin: 56px auto 0;
}
.install-tabs .tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.install-tabs .tab {
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-soft);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.install-tabs .tab:hover { color: var(--fg); }
.install-tabs .tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.checksum {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--fg-soft);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.checksum strong { color: var(--fg); display: block; margin-bottom: 6px; font-size: 13px; }
.checksum code { font-size: 11.5px; word-break: break-all; }

/* ==== 404 ==== */
.notfound {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 20px;
}
.notfound .code {
  font-family: var(--font-mono);
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 16px;
  opacity: 0.95;
}
.notfound .code span { color: var(--accent); }
.notfound h1 { font-size: 1.6rem; margin-bottom: 10px; }
.notfound p { color: var(--fg-soft); max-width: 460px; margin: 0 auto 24px; }
.notfound .ctas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ==== Search modal ==== */
.search-modal {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.4);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px;
  backdrop-filter: blur(2px);
}
.search-modal.open { display: flex; }
.search-modal .panel {
  width: 100%;
  max-width: 600px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px oklch(0 0 0 / 0.4);
  overflow: hidden;
}
.search-modal .input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.search-modal .input-row .icon { width: 16px; height: 16px; color: var(--fg-mute); }
.search-modal input {
  flex: 1;
  border: 0; outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  padding: 4px 0;
}
.search-modal .esc {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-mute);
}
.search-modal .results { padding: 8px; max-height: 400px; overflow-y: auto; }
.search-modal .res {
  display: block;
  padding: 10px 12px;
  border-radius: 5px;
  color: var(--fg);
  text-decoration: none;
}
.search-modal .res:hover, .search-modal .res.active { background: var(--bg-soft); text-decoration: none; }
.search-modal .res .ttl { font-size: 14px; font-weight: 500; }
.search-modal .res .ctx { font-size: 12px; color: var(--fg-mute); margin-top: 2px; }
.search-modal .res mark { background: var(--accent-soft); color: var(--accent-strong); padding: 0 2px; border-radius: 2px; }
.search-modal .empty { padding: 36px 18px; text-align: center; color: var(--fg-mute); font-size: 13px; }

/* hamburger toggle button (mobile only) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { border-color: var(--fg-mute); color: var(--fg); }
.nav-toggle .icon { width: 18px; height: 18px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: inline-block; }

/* responsive nav collapse */
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .search-mini { min-width: 0; }
  .search-mini .label, .search-mini .kbd { display: none; }
  .brand .ver { display: none; }

  .site-header .row { gap: 10px; }

  .nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 49;
  }
  body.nav-open .nav { display: flex; }
  .nav a {
    padding: 12px 14px;
    font-size: 15px;
    border-radius: var(--radius);
  }
}

/* ----------------------------------------------------------------
 * Copy-to-clipboard button on code blocks.
 *
 * The JS wraps each <pre> in a .code-block-wrap div; we float a
 * small button in the top-right. Hidden on hover-less small screens
 * to save real estate (touch users can long-press to select+copy).
 * ---------------------------------------------------------------- */
.code-block-wrap {
  position: relative;
}

.code-block-wrap .code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 500;
  background: var(--bg-soft, rgba(255, 255, 255, 0.08));
  color: var(--fg-mute, #888);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 1;
}

.code-block-wrap:hover .code-copy-btn,
.code-copy-btn:focus {
  opacity: 1;
}

.code-block-wrap .code-copy-btn:hover {
  background: var(--accent-soft, rgba(110, 157, 239, 0.15));
  color: var(--accent, #6e9def);
  border-color: var(--accent, #6e9def);
}

.code-block-wrap .code-copy-btn.copied {
  background: oklch(0.7 0.15 145 / 0.15);
  color: oklch(0.7 0.15 145);
  border-color: oklch(0.7 0.15 145);
  opacity: 1;
}

.code-block-wrap .code-copy-btn.failed {
  background: oklch(0.65 0.18 25 / 0.15);
  color: oklch(0.65 0.18 25);
  border-color: oklch(0.65 0.18 25);
  opacity: 1;
}

/* Make the button always visible on touch devices (hover detection
 * is unreliable) - matches "no hover" media-query semantics. */
@media (hover: none) {
  .code-block-wrap .code-copy-btn {
    opacity: 0.6;
  }
}

/* ----------------------------------------------------------------
 * Tables - markdown-rendered + manual.
 *
 * Defaults are: collapsed borders, header row with subtle background
 * + accent underline, zebra-striped rows, hover highlight, comfortable
 * cell padding. Works in both light and dark theme via the existing
 * --bg-soft / --line / --fg / --accent variables.
 *
 * Wrapped in .prose-table OR matched on bare <table> so both
 * markdown content (no class) and component-level tables get the
 * same look. Horizontal-scroll wrapper for narrow viewports.
 * ---------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 28px;
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

thead {
  background: var(--bg-muted);
  border-bottom: 2px solid var(--accent-line);
}

thead th {
  text-align: left;
  font-weight: 600;
  color: var(--fg);
  padding: 11px 14px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: bottom;
}

tbody td {
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-soft);
  vertical-align: top;
}

/* First row in tbody: no top border (the thead bottom-border serves
 * as the visual separator). */
tbody tr:first-child td {
  border-top: none;
}

/* Subtle zebra striping for readability on wide tables. Even rows
 * get the slightly-warmer base; odd rows stay on the soft surface. */
tbody tr:nth-child(even) {
  background: var(--bg-muted);
}

/* Hover highlight - works in both themes thanks to accent-soft. */
tbody tr:hover {
  background: var(--accent-soft);
}

/* Inline code in cells: tighter padding, no overrun of the cell. */
table code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--fg);
  white-space: nowrap;
}

/* Horizontal scroll on narrow viewports rather than crushing
 * column widths. The wrap div is added by JS for any table that
 * overflows; bare <table> still works without it. */
.table-wrap {
  overflow-x: auto;
  margin: 22px 0 28px;
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table {
  margin: 0;
}

/* Slightly narrower padding on small screens so 4-column tables
 * stay readable. */
@media (max-width: 760px) {
  table {
    font-size: 13.5px;
  }
  thead th, tbody td {
    padding: 8px 10px;
  }
}

/* Strong rows for emphasis (use <strong> in the cell content for
 * highlighted-feature rows in comparison tables). */
table strong {
  color: var(--fg);
  font-weight: 600;
}

/* ----------------------------------------------------------------
 * Screenshot figure (used by the {{< image >}} shortcode).
 * ---------------------------------------------------------------- */
figure.screenshot {
  margin: 28px 0;
  text-align: center;
}

figure.screenshot img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

figure.screenshot figcaption {
  margin-top: 10px;
  color: var(--fg-soft);
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.screenshot-placeholder {
  display: block;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 48px 24px;
  background: var(--bg-soft);
  color: var(--fg-mute);
  font-size: 13.5px;
  text-align: center;
}

.screenshot-placeholder-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 480px;
}

.placeholder-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.placeholder-path {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-soft);
  word-break: break-all;
}

.placeholder-alt {
  color: var(--fg-mute);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 420px;
}

/* ----------------------------------------------------------------
 * Status pills (used by the {{< s >}} shortcode in comparison
 * tables). Color-coded for at-a-glance scanning:
 *   green  = supported
 *   yellow = partial / caveat
 *   orange = limited / known issue
 *   red    = not supported
 * ---------------------------------------------------------------- */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.5;
}

.status-yes {
  background: oklch(0.65 0.16 145 / 0.18);
  color: oklch(0.45 0.18 145);
  border-color: oklch(0.55 0.18 145 / 0.35);
}

.status-partial {
  background: oklch(0.78 0.14 95 / 0.20);
  color: oklch(0.50 0.16 80);
  border-color: oklch(0.55 0.16 80 / 0.35);
}

.status-limited {
  background: oklch(0.72 0.16 50 / 0.20);
  color: oklch(0.50 0.18 45);
  border-color: oklch(0.55 0.18 45 / 0.35);
}

.status-no {
  background: oklch(0.65 0.18 25 / 0.18);
  color: oklch(0.50 0.20 25);
  border-color: oklch(0.55 0.20 25 / 0.35);
}

html[data-theme="dark"] .status-yes {
  background: oklch(0.55 0.18 145 / 0.22);
  color: oklch(0.82 0.18 145);
  border-color: oklch(0.65 0.18 145 / 0.45);
}

html[data-theme="dark"] .status-partial {
  background: oklch(0.65 0.16 90 / 0.22);
  color: oklch(0.88 0.18 95);
  border-color: oklch(0.75 0.16 95 / 0.45);
}

html[data-theme="dark"] .status-limited {
  background: oklch(0.60 0.18 45 / 0.24);
  color: oklch(0.83 0.16 50);
  border-color: oklch(0.70 0.16 50 / 0.45);
}

html[data-theme="dark"] .status-no {
  background: oklch(0.55 0.20 25 / 0.22);
  color: oklch(0.80 0.18 25);
  border-color: oklch(0.68 0.20 25 / 0.45);
}