:root {
  --paper: var(--bg);
  --ink: var(--text);
  --heading: var(--text);
  --muted: var(--text-dim);
  --line: var(--border);
  --ornament: var(--gold);
}
.brand-lockup, .brand.brand-lockup { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; color: var(--heading); font: 700 1.4rem/1.2 var(--font-display); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.brand-mark { display: block; width: 36px; height: 36px; flex: none; object-fit: contain; background: var(--seal-ground); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem;
  border: 1px solid var(--accent);
  border-radius: .35rem;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--accent-soft); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { display: block; }
.page-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; min-width: 0; }
.page-tools nav { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.page-tools .theme-toggle { margin-left: auto; }
.lesson-diagram { width: min(100%, 24rem); margin: 1.5rem auto; break-inside: avoid; }
.lesson-diagram svg { display: block; width: 100%; height: auto; }
pre[data-language]::before { content: attr(data-language); display: block; margin-bottom: .6rem; color: var(--gold); font: 700 .7rem/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
@media print {
  :root, :root:not([data-theme]), :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #fff;
    --surface: #fff;
    --ink: #000;
    --heading: #000;
    --muted: #000;
    --line: #000;
    --accent: #000;
    --link: #000;
    --accent-soft: #fff;
    --ornament: #000;
    --gold: #000;
  }
  .theme-toggle { display: none !important; }
}