:root {
  --fg: #111827;
  --muted: #6b7280;
  --accent: #0ea5e9;
  --bg: #ffffff;
  --card: #f9fafb;
  --border: #e5e7eb;
}

* { box-sizing: border-box }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

/* ── Header ── */
header {
  background: linear-gradient(90deg, #0ea5e9, #2563eb);
  color: #fff;
  padding: 2.25rem 1rem 1.1rem;
}
header .wrap { max-width: 980px; margin: 0 auto }

h1 { font-size: 1.9rem; margin: 0 }

nav {
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
}
nav a {
  color: rgba(255,255,255,.75);
  padding: .3rem .7rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  transition: background .15s, color .15s;
}
nav a:hover { color: #fff; background: rgba(255,255,255,.18) }
nav a.active { color: #fff; background: rgba(255,255,255,.22); text-decoration: underline }

/* ── Main ── */
main { max-width: 980px; margin: 0 auto; padding: 2rem 1rem 4rem }

h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--border);
}

p { margin: .75rem 0 }

a { color: var(--accent); word-break: break-word }

.link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .06rem .35rem;
}

/* ── Responsive video ── */
.video-wrap {
  margin: 1rem 0 1.75rem;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  width: 100%;
  max-width: 848px;
  aspect-ratio: 848 / 480;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.video-wrap video { width: 100%; height: 100%; display: block }

/* ── Numbered step list ── */
ol.steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  counter-reset: step;
}
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: .45rem .5rem .45rem 3rem;
  margin-bottom: 1rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .45rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  line-height: 2rem;
  text-align: center;
}

/* ── Plain numbered list (notes, remarks, data lists) ── */
ol.notes {
  margin: .6rem 0 1rem 1.5rem;
}
ol.notes li { margin: .5rem 0 }

/* ── Figures ── */
figure {
  margin: .75rem 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
figure img { max-width: 100%; height: auto; display: block; border-radius: 6px }
figure figcaption {
  font-size: .875rem;
  color: var(--muted);
  margin-top: .4rem;
  font-style: italic;
}

kbd {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .3rem;
  font-size: .9em;
}

/* ── Note / tip callout ── */
.note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: .75rem 1rem;
  margin: 1.25rem 0;
  font-size: .95rem;
}

/* ── Code blocks (control-loop page) ── */
.code-block {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: .75rem 0 1.25rem;
  overflow-x: auto;
  color: var(--fg);
}
.code-block pre {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.code-label {
  font-size: .72rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  margin-bottom: .3rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Syntax highlighting (light palette) */
.code-block .kn, .code-block .k  { color: #7c3aed }
.code-block .kc                   { color: #0ea5e9 }
.code-block .nn, .code-block .n,
.code-block .nb                   { color: var(--fg) }
.code-block .nf                   { color: #0ea5e9 }
.code-block .nc                   { color: #dc2626 }
.code-block .s2                   { color: #16a34a }
.code-block .c1                   { color: #9ca3af; font-style: italic }
.code-block .mi, .code-block .mf  { color: #ea580c }
.code-block .o                    { color: #0891b2 }
.code-block .p, .code-block .w    { color: var(--fg) }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1rem;
  color: var(--muted);
  font-size: .9rem;
}
footer .footer-credit {
  margin-top: .5rem;
  font-size: .82rem;
}
footer .footer-copyright {
  margin-top: .4rem;
  font-size: .8rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  h1 { font-size: 1.4rem }
  main { padding: 1.5rem .75rem 3rem }
  ol.steps > li { padding-left: 2.75rem }
  ol.steps > li::before { width: 1.85rem; height: 1.85rem; font-size: .78rem; line-height: 1.85rem }
}