:root {
  --primary: #6aa9ff;
  --bg: #0e0f12;
  --fg: #e7e9ee;
  --muted: #9aa0aa;
  --panel: #16181d;
  --border: #232730;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem 2rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(14,15,18,.92); backdrop-filter: blur(6px); z-index: 10;
}
.site-header .brand { flex: 0 0 auto; }
.site-header .lang-switch { flex: 0 0 auto; margin-left: auto; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.25rem; color: var(--fg);
}
.brand:hover { text-decoration: none; color: var(--primary); }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-name { line-height: 1; }
.lang-switch a {
  display: inline-block; padding: .25rem .55rem; margin-left: .25rem;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px;
  font-size: .8rem; letter-spacing: .05em;
}
.lang-switch a:hover { text-decoration: none; color: var(--fg); }
.lang-switch a.active { color: var(--primary); border-color: var(--primary); }

/* Search form in header */
.search-form {
  flex: 1 1 auto; max-width: 460px;
  display: flex; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 0 .25rem 0 .5rem;
  transition: border-color .15s;
}
.search-form:focus-within { border-color: var(--primary); }
.search-form input[type="search"] {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--fg); font: inherit; font-size: .92rem;
  padding: .45rem .25rem;
}
.search-form input[type="search"]::placeholder { color: var(--muted); }
.search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form button {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: .3rem .5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.search-form button:hover { color: var(--primary); background: var(--bg); }

/* Search results page */
.search-header { margin-bottom: 1.5rem; }
.search-header h1 { margin: 0 0 .35rem; font-size: 1.5rem; }
.search-header .q { color: var(--primary); }
.search-count { color: var(--muted); margin: 0; font-size: .9rem; }
.search-empty { color: var(--muted); padding: 2rem 0; }
.matched-lessons {
  margin: .75rem 0; padding-top: .5rem; border-top: 1px dashed var(--border);
  font-size: .85rem;
}
.matched-lessons .matched-label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.matched-lessons ul { list-style: none; padding: 0; margin: .35rem 0 0; }
.matched-lessons li { color: var(--fg); padding: .1rem 0; }
.matched-lessons li.more { color: var(--muted); font-size: .8rem; }

@media (max-width: 768px) {
  .site-header { flex-wrap: wrap; gap: .75rem 1rem; padding: .75rem 1rem; }
  .search-form { order: 3; flex-basis: 100%; max-width: none; }
}

/* Container / footer */
.container { max-width: 960px; margin: 0 auto; padding: 2rem; }
.site-footer { padding: 2rem; color: var(--muted); text-align: center; font-size: .85rem; }

/* Home */
.hero { font-size: 2rem; margin: 1rem 0 1rem; }
.home-lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0 0 2.5rem; }
.courses h2 { font-size: 1.1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.course-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}
.course-card a {
  display: block; background: var(--panel);
  border: 1px solid var(--border); border-left: 4px solid var(--card, var(--primary));
  border-radius: 6px; color: var(--fg); transition: border-color .15s, transform .15s;
  overflow: hidden;
}
.course-card a:hover {
  text-decoration: none;
  border-color: var(--card, var(--primary));
  transform: translateY(-2px);
}
.course-card .card-body { padding: 1.25rem; }
.course-card .preview {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.course-card.has-preview a:hover .preview { border-bottom-color: var(--card, var(--primary)); }
.course-card h3 { margin: 0 0 .5rem 0; color: var(--card, var(--primary)); }
.course-card p { margin: 0 0 .75rem 0; color: var(--muted); font-size: .92rem; }
.course-card .cta { font-size: .85rem; color: var(--card, var(--primary)); }

/* Lesson layout */
.lesson-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem;
  max-width: 1200px; margin: 0 auto; padding: 2rem;
}
.lesson-sidebar { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; }
.lesson-sidebar h2 { font-size: 1rem; margin: 0 0 1rem 0; }
.lesson-sidebar h2 a { color: var(--primary); }
.toc { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.toc li { margin: .15rem 0; counter-increment: step; }
.toc a {
  color: var(--muted); display: block; padding: .4rem .6rem;
  border-radius: 4px; font-size: .92rem;
  border-left: 2px solid transparent;
}
.toc a::before { content: counter(step, decimal-leading-zero) ". "; color: var(--border); }
.toc a:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
.toc li.current a { color: var(--primary); background: var(--panel); border-left-color: var(--primary); }

/* Lesson content */
.lesson-main { min-width: 0; }
.lesson-main h1 { color: var(--primary); margin-top: 0; font-size: 2rem; }
.lesson-main .lead { color: var(--muted); font-size: 1.05rem; margin-top: -.5rem; margin-bottom: 1.5rem; }
.lesson-main article h2 { margin-top: 2rem; border-bottom: 1px solid var(--border); padding-bottom: .35rem; }
.lesson-main article p, .lesson-main article li { font-size: 1rem; }
.lesson-main article code {
  font-family: var(--font-mono);
  background: var(--panel); padding: .1rem .35rem; border-radius: 3px;
  font-size: .9em; border: 1px solid var(--border);
}
.lesson-main pre.hljs {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 1rem; overflow-x: auto;
  font-size: .92rem;
}
.lesson-main pre.hljs code { background: none; padding: 0; border: 0; }

.lesson-main article img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.lesson-main article .lesson-figure {
  margin: 1.5rem 0;
  padding: 0;
}
.lesson-main article .lesson-figure img { margin: 0 auto; }
.lesson-main article .lesson-figure figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
  font-style: italic;
}
.lesson-main article .lesson-figure img.zoomable {
  cursor: zoom-in;
  transition: filter .15s;
}
.lesson-main article .lesson-figure img.zoomable:hover,
.lesson-main article .lesson-figure img.zoomable:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.lesson-main article .lesson-figure img.zoomable:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}

/* Lightbox */
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 9, 12, .92);
  z-index: 1000;
  display: flex; flex-direction: column;
  padding: 1rem;
  /* dvh handles mobile browser chrome resizing */
  height: 100vh;
  height: 100dvh;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lightbox-caption {
  flex: 0 0 auto;
  color: var(--fg);
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
  padding: 0 .5rem;
  font-style: italic;
}
.lightbox-caption[hidden] { display: none; }
.lightbox-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(22, 24, 29, .85);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lightbox-close:hover, .lightbox-close:focus-visible {
  background: var(--panel);
  color: var(--primary);
  border-color: var(--primary);
  outline: none;
}

@media (max-width: 768px) {
  .lightbox { padding: .5rem; }
  .lightbox-close {
    top: max(.5rem, env(safe-area-inset-top));
    right: max(.5rem, env(safe-area-inset-right));
    width: 48px; height: 48px;
  }
  .lightbox-caption { font-size: .88rem; }
}

.video { position: relative; padding-bottom: 56.25%; height: 0; margin: 1.5rem 0; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; border: 0; }

.lesson-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.lesson-nav a { color: var(--primary); }

@media (max-width: 768px) {
  .lesson-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .lesson-sidebar { position: static; max-height: none; }
  .hero { font-size: 1.5rem; }
}

/* Minimal highlight.js theme (atom-one-dark-ish) */
.hljs-comment, .hljs-quote { color: #5c6370; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: #c678dd; }
.hljs-string, .hljs-doctag { color: #98c379; }
.hljs-number, .hljs-meta, .hljs-symbol { color: #d19a66; }
.hljs-title, .hljs-function .hljs-title, .hljs-name { color: #61afef; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #e06c75; }
.hljs-built_in, .hljs-builtin-name, .hljs-type, .hljs-class .hljs-title { color: #e5c07b; }
.hljs-params { color: #abb2bf; }
.hljs-tag, .hljs-regexp { color: #e06c75; }