/* Muninn Stylesheet */
:root, [data-theme="light"] {
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --mono: var(--font-mono);

  /* Light Theme Tokens */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --text: #16192a;
  --muted: #525870;
  --border: #dde1ec;
  --accent: #2456d6;
  --accent-contrast: #ffffff;
  --accent-soft: #e5ecfd;
  --good: #137a4a;
  --good-soft: #e1f4ea;
  --bad: #b42335;
  --bad-soft: #fbe6e9;
  --warn: #8a5a00;
  --warn-soft: #fff4dc;

  --lu1: #2456d6;
  --lu2: #8a3fc9;
  --lu3: #0b8a7a;
  --lu4: #c2560c;
  --lu5: #c0267a;
  --lu6: #5a7d0f;
  --lu7: #0e7490;
  --lu8: #b91c1c;
  --lu9: #6d5a00;
  --gold: #b48318;

  --raven: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='30' height='30' x='1' y='1' rx='7' fill='%2314182b' stroke='%23d9b25c' stroke-width='1.5' stroke-opacity='0.6'/%3E%3Cpath d='M5 22c3-1 6-4 8-8 2-4 6-7 11-7l3 2-3 1c-1 3-3 5-6 6l4 4-6-1-3 4-1-4c-2 1-5 2-7 3z' fill='%23fbbf24'/%3E%3Ccircle cx='22' cy='9.5' r='1.2' fill='%2314182b'/%3E%3C/svg%3E");
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow: 0 1px 3px rgba(20, 25, 50, .06), 0 4px 14px rgba(20, 25, 50, .05);
  --shadow-sm: 0 1px 2px rgba(20, 25, 50, .05);
  --shadow-hover: 0 8px 24px -2px rgba(20, 25, 50, .12), 0 0 12px rgba(36, 86, 214, .08);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);

  --erd-line: #3d4560;
  --erd-border: #69708a;
  --erd-fill: #ffffff;
  --erd-head: #eef1f8;
}

/* Dark Theme Tokens (Auto and Manual Override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f121b;
    --surface: #171b27;
    --surface-2: #1f2433;
    --text: #e8eaf2;
    --muted: #a0a6bb;
    --border: #2c3244;
    --accent: #7ea2ff;
    --accent-contrast: #0f121b;
    --accent-soft: #1f2a4a;
    --good: #5fd39a;
    --good-soft: #15302a;
    --bad: #ff8a99;
    --bad-soft: #3a1b22;
    --warn: #f3c260;
    --warn-soft: #33290f;

    --lu1: #7ea2ff;
    --lu2: #c99aff;
    --lu3: #4fd6c3;
    --lu4: #ffa66b;
    --lu5: #ff8cc6;
    --lu6: #b5dc5f;
    --lu7: #5fd0ea;
    --lu8: #ff8f8f;
    --lu9: #e6c95c;
    --gold: #facc15;

    --raven: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='30' height='30' x='1' y='1' rx='7' fill='%231e2436' stroke='%23facc15' stroke-width='1.5' stroke-opacity='0.8'/%3E%3Cpath d='M5 22c3-1 6-4 8-8 2-4 6-7 11-7l3 2-3 1c-1 3-3 5-6 6l4 4-6-1-3 4-1-4c-2 1-5 2-7 3z' fill='%23facc15'/%3E%3Ccircle cx='22' cy='9.5' r='1.2' fill='%230f121b'/%3E%3C/svg%3E");
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 14px rgba(126, 162, 255, 0.15);

    --erd-line: #9aa3bd;
    --erd-border: #7c849c;
    --erd-fill: #171b27;
    --erd-head: #232a3d;
  }
}

[data-theme="dark"] {
  --bg: #0f121b;
  --surface: #171b27;
  --surface-2: #1f2433;
  --text: #e8eaf2;
  --muted: #a0a6bb;
  --border: #2c3244;
  --accent: #7ea2ff;
  --accent-contrast: #0f121b;
  --accent-soft: #1f2a4a;
  --good: #5fd39a;
  --good-soft: #15302a;
  --bad: #ff8a99;
  --bad-soft: #3a1b22;
  --warn: #f3c260;
  --warn-soft: #33290f;

  --lu1: #7ea2ff;
  --lu2: #c99aff;
  --lu3: #4fd6c3;
  --lu4: #ffa66b;
  --lu5: #ff8cc6;
  --lu6: #b5dc5f;
  --lu7: #5fd0ea;
  --lu8: #ff8f8f;
  --lu9: #e6c95c;
  --gold: #facc15;

  --raven: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='30' height='30' x='1' y='1' rx='7' fill='%231e2436' stroke='%23facc15' stroke-width='1.5' stroke-opacity='0.8'/%3E%3Cpath d='M5 22c3-1 6-4 8-8 2-4 6-7 11-7l3 2-3 1c-1 3-3 5-6 6l4 4-6-1-3 4-1-4c-2 1-5 2-7 3z' fill='%23facc15'/%3E%3Ccircle cx='22' cy='9.5' r='1.2' fill='%230f121b'/%3E%3C/svg%3E");
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 14px rgba(126, 162, 255, 0.15);

  --erd-line: #9aa3bd;
  --erd-border: #7c849c;
  --erd-fill: #171b27;
  --erd-head: #232a3d;
}

/* Base & Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* Keep the footer at the bottom of the window, however short the page is. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Viewport Top Gradient Bar */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--accent) 35%, var(--lu2) 70%, var(--lu3) 100%);
  z-index: 100;
  pointer-events: none;
}

/* Accessibility Focus Visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: var(--accent-contrast) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 10px 10px;
  z-index: 9999;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold);
}

a {
  color: var(--accent);
  text-decoration-skip-ink: auto;
  transition: color 0.15s ease;
}
a:hover {
  filter: brightness(1.15);
}

h1, h2, h3, h4 {
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 { font-size: 1.85rem; margin: 0 0 .35rem; font-weight: 800; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 .85rem; font-weight: 700; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; font-weight: 600; }

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

table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: .5rem .7rem;
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 600;
}
.table-wrap {
  overflow-x: auto;
  margin: .85rem 0;
  -webkit-overflow-scrolling: touch;
}

/* Page & Notes Transition Animations */
.page-transition {
  animation: pageFadeIn 0.22s var(--ease-out) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.notes-fade-in {
  animation: notesContentEnter 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes notesContentEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Topbar Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem max(16px, calc((100% - 1240px) / 2));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex-shrink: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--raven) center / 100% no-repeat;
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 10px color-mix(in srgb, var(--gold) 25%, transparent);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.1);
  border-color: var(--gold);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 45%, transparent);
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}
.crumb a {
  text-decoration: none;
  color: var(--accent);
}
.crumb a:hover {
  text-decoration: underline;
}
.crumb .sep {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.6;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

#nav {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#nav::-webkit-scrollbar { display: none; }
#nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  padding: .38rem .7rem;
  border-radius: 9px;
  white-space: nowrap;
  transition: all 0.18s ease;
}
#nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}
#nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Theme Toggle Button */
.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.theme-toggle:hover {
  background: var(--border);
  transform: scale(1.05);
}
.theme-toggle:active {
  transform: scale(0.95);
}
.sun-icon { display: none; }
.moon-icon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sun-icon { display: block; }
  :root:not([data-theme="light"]) .moon-icon { display: none; }
}
[data-theme="dark"] .sun-icon { display: block !important; }
[data-theme="dark"] .moon-icon { display: none !important; }
[data-theme="light"] .sun-icon { display: none !important; }
[data-theme="light"] .moon-icon { display: block !important; }

/* Main Container & Footer */
main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.75rem 16px 3.5rem;
}
main:focus {
  outline: none;
}
.footer {
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  padding: 2rem 16px 3rem;
  border-top: 1px solid var(--border);
}
.footer p { margin: .25rem 0; }
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-sources {
  font-style: italic;
  opacity: .85;
}

.lead {
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 65ch;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Hub Hero */
/* One column for the headline and the text under it, so both share the same right edge. */
.hub-hero {
  padding: 1.8rem 0 1.25rem;
  max-width: 36rem;
}
.hub-hero .lead { max-width: none; text-wrap: pretty; }
.hub-hero .lead + .lead { margin-top: -.75rem; }
.hub-hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.eyebrow {
  margin: 0 0 .45rem;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Module Cards & Assessment Card */
.module-card {
  border-top: 4px solid var(--gold);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.22s ease;
}
.module-card:hover {
  border-top-color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 5%, var(--surface)) 0%, var(--surface) 100%);
  box-shadow: 0 12px 24px -3px rgba(180, 131, 24, 0.15), 0 0 14px color-mix(in srgb, var(--gold) 15%, transparent);
}
.module-card h3 {
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  margin-top: 0.35rem;
}
.module-card .module-meta {
  margin-top: auto;
  padding-top: .85rem;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 500;
}
.assess {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
.assess p { margin: .25rem 0; }

/* Grid and Card System */
.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow);
  transition: border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
a.card:active {
  transform: translateY(-1px);
}
.card h3 {
  margin: .2rem 0 .4rem;
  color: var(--text);
  font-weight: 700;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

/* Learning Unit Tags */
.tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid transparent;
}
.tag.lu1 { color: var(--lu1); background: color-mix(in srgb, var(--lu1) 12%, transparent); border-color: color-mix(in srgb, var(--lu1) 25%, transparent); }
.tag.lu2 { color: var(--lu2); background: color-mix(in srgb, var(--lu2) 12%, transparent); border-color: color-mix(in srgb, var(--lu2) 25%, transparent); }
.tag.lu3 { color: var(--lu3); background: color-mix(in srgb, var(--lu3) 12%, transparent); border-color: color-mix(in srgb, var(--lu3) 25%, transparent); }
.tag.lu4 { color: var(--lu4); background: color-mix(in srgb, var(--lu4) 12%, transparent); border-color: color-mix(in srgb, var(--lu4) 25%, transparent); }
.tag.lu5 { color: var(--lu5); background: color-mix(in srgb, var(--lu5) 12%, transparent); border-color: color-mix(in srgb, var(--lu5) 25%, transparent); }
.tag.lu6 { color: var(--lu6); background: color-mix(in srgb, var(--lu6) 12%, transparent); border-color: color-mix(in srgb, var(--lu6) 25%, transparent); }
.tag.lu7 { color: var(--lu7); background: color-mix(in srgb, var(--lu7) 12%, transparent); border-color: color-mix(in srgb, var(--lu7) 25%, transparent); }
.tag.lu8 { color: var(--lu8); background: color-mix(in srgb, var(--lu8) 12%, transparent); border-color: color-mix(in srgb, var(--lu8) 25%, transparent); }
.tag.lu9 { color: var(--lu9); background: color-mix(in srgb, var(--lu9) 12%, transparent); border-color: color-mix(in srgb, var(--lu9) 25%, transparent); }

/* Unit Cards */
.unit-card {
  border-top: 4px solid var(--accent);
  background: var(--surface);
  transition: border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.22s ease;
}
.unit-card.lu1 { border-top-color: var(--lu1); }
.unit-card.lu2 { border-top-color: var(--lu2); }
.unit-card.lu3 { border-top-color: var(--lu3); }
.unit-card.lu4 { border-top-color: var(--lu4); }
.unit-card.lu5 { border-top-color: var(--lu5); }
.unit-card.lu6 { border-top-color: var(--lu6); }
.unit-card.lu7 { border-top-color: var(--lu7); }
.unit-card.lu8 { border-top-color: var(--lu8); }
.unit-card.lu9 { border-top-color: var(--lu9); }

.unit-card.lu1:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu1) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu2:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu2) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu3:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu3) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu4:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu4) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu5:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu5) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu6:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu6) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu7:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu7) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu8:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu8) 6%, var(--surface)) 0%, var(--surface) 100%); }
.unit-card.lu9:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lu9) 6%, var(--surface)) 0%, var(--surface) 100%); }

.hero { padding: 1.25rem 0 .65rem; }
.hero h1 { font-size: 2.1rem; letter-spacing: -0.025em; }

/* Steps list */
.steps {
  counter-reset: s;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .85rem;
}
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 2.6rem;
  line-height: 1.55;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--lu2) 18%, var(--accent-soft)));
  color: var(--accent);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Pills / Filters */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .85rem 0 1.4rem;
}
.pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: .38rem .85rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all 0.18s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.pill:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.pill:active {
  transform: translateY(0);
}
.pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Buttons */
.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  padding: .55rem 1.15rem;
  border-radius: 9px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  border-color: var(--border);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

/* Notes Layout */
.notes-layout {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
}
.notes-layout > * { min-width: 0; }
.toc {
  position: sticky;
  top: 5rem;
  font-size: .92rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface)) 0%, var(--surface) 100%);
}
.toc strong {
  display: block;
  margin-bottom: .6rem;
  color: var(--text);
  font-weight: 700;
}
.toc ol {
  margin: 0;
  padding-left: 1.2rem;
}
.toc li { margin: .4rem 0; }
.toc a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
  /* Block, not inline-block: an inline-block's baseline is its last line, which pushed the number down to it. */
  display: block;
}
.toc a:hover {
  color: var(--accent);
  transform: translateX(2px);
}
.notes h2 {
  scroll-margin-top: 5.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.notes h2:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.notes ul, .notes ol { padding-left: 1.4rem; }
.notes li { margin: .35rem 0; }

.formula {
  font-family: var(--font-mono);
  font-size: .93rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, var(--surface-2)) 0%, var(--surface-2) 100%);
  border-left: 3.5px solid var(--accent);
  padding: .85rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1rem 0;
  overflow-x: auto;
  /* Code keeps its own line breaks; long lines scroll sideways instead of wrapping. */
  white-space: pre;
  tab-size: 4;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.callout {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 10%, var(--surface)) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  padding: 1.25rem 1.45rem;
  margin: 2.5rem 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.callout h2 {
  border: 0;
  margin: 0 0 .6rem;
  color: var(--warn);
  font-size: 1.15rem;
  font-weight: 700;
}
.callout ul { margin: 0; }

/* Learning outcomes at the top of a unit's notes */
.outcomes {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: .9rem 1.2rem;
  margin: 0 0 1.5rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.outcomes summary { font-weight: 700; cursor: pointer; }
.outcomes .outcome-theme { margin: .8rem 0 .2rem; font-weight: 600; font-size: .92rem; color: var(--muted); }
.outcomes ul { margin: 0 0 0 .2rem; }
.outcomes .q-meta { margin: .8rem 0 0; }

/* Glossary */
a.gloss {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border-radius: 4px;
  cursor: help;
}
a.gloss strong { color: inherit; }
a.gloss:hover { background: var(--accent-soft); text-decoration-style: solid; filter: none; }
.gloss-hint { font-size: .88rem; color: var(--muted); margin: -.5rem 0 1.5rem; }
.gloss-tools { display: grid; gap: .75rem; margin-bottom: 1rem; }
.gloss-tools input {
  width: 100%;
  font: inherit;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.gloss-tools .pills { margin: 0; }
.glossary { display: grid; gap: .5rem; margin: 0; }
.gloss-item.card { margin: 0; padding: .85rem 1.1rem; }
.gloss-item dt { font-weight: 700; font-size: 1.05rem; }
.gloss-item dd { margin: .3rem 0 0; }
.gloss-item dd p { margin: 0 0 .4rem; }
.gloss-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .88rem; }
.gloss-item.flash-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .notes-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; }
}

/* Quiz UI */
.progress {
  height: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin: .65rem 0 1.25rem;
  border: 1px solid var(--border);
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--lu2));
  border-radius: 99px;
  transition: width 0.35s var(--ease-out);
}
.q-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
}
.q-text {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
  margin: .65rem 0 1.25rem;
}
.options {
  display: grid;
  gap: .65rem;
}
.option {
  text-align: left;
  font-family: inherit;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(4px);
  box-shadow: var(--shadow);
}
.option:disabled { cursor: default; }
.option.correct {
  border-color: var(--good) !important;
  background: var(--good-soft) !important;
  color: var(--good);
  font-weight: 600;
}
.option.wrong {
  border-color: var(--bad) !important;
  background: var(--bad-soft) !important;
  color: var(--bad);
}
.feedback {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: feedbackSlideIn 0.22s var(--ease-out);
}
@keyframes feedbackSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.feedback strong.ok { color: var(--good); }
.feedback strong.no { color: var(--bad); }
.score-big {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: .35rem 0 .75rem;
}
.bar-row {
  display: grid;
  grid-template-columns: 4rem 1fr 4.5rem;
  gap: .75rem;
  align-items: center;
  margin: .55rem 0;
  font-size: .95rem;
}
.bar {
  height: 10px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bar > div {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s var(--ease-out);
}

/* Drills UI */
.field {
  display: grid;
  grid-template-columns: 1fr minmax(130px, 200px) 1.8rem;
  gap: .75rem;
  align-items: center;
  margin: .65rem 0;
}
.field label {
  font-size: .95rem;
  font-weight: 500;
}
.field label small {
  color: var(--muted);
  display: block;
  font-size: .84rem;
}
.field input, .field select {
  font-family: inherit;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field.wide { grid-template-columns: 1fr minmax(170px, 340px) 1.8rem; }
.field select.ok, .field input.ok { border-color: var(--good); background: var(--good-soft); }
.field select.no, .field input.no { border-color: var(--bad); background: var(--bad-soft); }
.field .mark {
  font-weight: 800;
  text-align: center;
  font-size: 1.15rem;
  transition: transform 0.2s var(--ease-spring);
}
.field .mark.ok { color: var(--good); transform: scale(1.15); }
.field .mark.no { color: var(--bad); transform: scale(1.15); }
.working {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  animation: feedbackSlideIn 0.2s var(--ease-out);
}
.working p { margin: .35rem 0; }
.working .mono {
  white-space: pre;
  overflow-x: auto;
  display: block;
  padding: .4rem 0;
}
.prompt { font-size: 1.05rem; line-height: 1.55; }
.given {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .65rem 0 .35rem;
}
.given span {
  font-family: var(--font-mono);
  font-size: .88rem;
  background: var(--surface-2);
  padding: .2rem .6rem;
  border-radius: 7px;
  border: 1px solid var(--border);
}
@media (max-width: 520px) {
  .field { grid-template-columns: 1fr 1.8rem; }
  .field label { grid-column: 1 / -1; }
}

/* Flashcards 3D System */
.flash-wrap {
  max-width: 640px;
  margin: 0 auto;
}
.flash {
  perspective: 1200px;
  cursor: pointer;
  height: 290px;
  margin: .75rem 0 1.25rem;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.flash-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-spring);
  transform-style: preserve-3d;
}
.flash.flipped .flash-inner {
  transform: rotateY(180deg);
}
.flash-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow-y: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.flash:hover .flash-face {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.flash-face.back {
  transform: rotateY(180deg);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.flash-face .term {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.flash-face .def {
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0;
}
.flash-face .hint {
  position: absolute;
  bottom: .9rem;
  font-size: .82rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.flash-face .tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.flash-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.flash-controls.bottom {
  margin-top: .75rem;
}
.check {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  font-size: .92rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.check input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Keyboard badge helper */
.kbd-hint {
  font-size: .8rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
kbd {
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .15rem .4rem;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Responsive Overrides */
/* Below 1180px the module nav may not fit beside the name, so it gets its own row. */
@media (max-width: 1180px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
  .brand-row { grid-column: 1; grid-row: 1; }
  /* Let the nav and theme toggle join the grid: toggle beside the brand, nav on its own row below. */
  .topbar-controls { display: contents; }
  .theme-toggle { grid-column: 2; grid-row: 1; }
  #nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .notes h2 { scroll-margin-top: 7.5rem; }
  #nav:empty { display: none; }
}
@media (max-width: 520px) {
  #nav a { padding: .35rem .55rem; font-size: .88rem; }
  .field.wide { grid-template-columns: 1fr 1.8rem; }
  .flash-controls.bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .flash-controls.bottom .btn { padding: .6rem .4rem; font-size: .88rem; }
  .flash-controls.bottom #know { grid-column: 1 / -1; order: 4; }
}

/* Prefers Reduced Motion Graceful Degradation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flash-inner { transition: none !important; }
}

/* ---------- Labs ---------- */
.erd-wrap, .erd-embed, .dep-embed {
  overflow-x: auto;
  margin: .85rem 0;
  -webkit-overflow-scrolling: touch;
}
.erd-svg, .dep-svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: var(--font-sans);
}
.erd-canvas .erd-svg {
  max-width: none;
  min-width: 100%;
}
.erd-svg .hit { cursor: pointer; }
.erd-svg .erd-ent.hit:hover rect:first-child {
  stroke: var(--accent);
  stroke-width: 2.4;
}
.erd-svg .erd-rel.hit:hover line, .erd-svg .erd-rel.hit:hover path {
  stroke: var(--accent);
}
.notice {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .93rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn.small {
  padding: .35rem .75rem;
  font-size: .85rem;
}
.erd-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.rules {
  margin: .35rem 0 .65rem;
  padding-left: 1.4rem;
}
.rules li { margin: .3rem 0; }
.level-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin-top: .75rem;
}
.level-row .pill { padding: .28rem .75rem; }
.editor {
  margin-top: 1.25rem;
  border-color: var(--accent);
}
.editor .q-meta { margin-bottom: .6rem; }
.ed-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: .75rem;
  align-items: center;
  margin: .6rem 0;
  font-size: .95rem;
}
.editor select, .rel-grid select {
  font-family: inherit;
  padding: .45rem .6rem;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border-color 0.2s ease;
}
.editor select:focus, .rel-grid select:focus {
  outline: none;
  border-color: var(--accent);
}
.ed-attrs { display: grid; gap: .45rem; margin: .6rem 0; }
.ed-attr {
  display: grid;
  grid-template-columns: 1fr 6.5rem auto;
  gap: .6rem;
  align-items: center;
  padding: .4rem .65rem;
  background: var(--surface-2);
  border-radius: 9px;
}
.rel-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, 1fr);
}
.rel-grid label {
  display: grid;
  gap: .3rem;
  font-size: .85rem;
  color: var(--muted);
}
.mark-list {
  list-style: none;
  padding: 0;
  margin: .6rem 0;
  display: grid;
  gap: .45rem;
}
.mark-list li {
  padding: .5rem .85rem;
  border-radius: 9px;
  border-left: 4px solid var(--border);
  background: var(--surface-2);
}
.mark-list li.ok { border-left-color: var(--good); }
.mark-list li.no { border-left-color: var(--bad); }
@media (max-width: 640px) {
  .rel-grid { grid-template-columns: 1fr 1fr; }
  .ed-row { grid-template-columns: 1fr; }
}

/* Normalise Lab */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
}
.step {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  padding: .38rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: all 0.18s ease;
}
.step.done {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
}
.step.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.nf-table td, .nf-table th {
  white-space: nowrap;
  font-size: .88rem;
}
.nf-table tr.grp td { border-top: 2px solid var(--border); }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .85rem 0;
}
.chip {
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  padding: .4rem .85rem;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.18s ease;
}
.chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
.nf-builder { display: grid; gap: .85rem; margin: .6rem 0; }
.nf-tablecard {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.nf-attrs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .45rem;
  margin-top: .5rem;
}
.nf-attr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .55rem;
  padding: .35rem .6rem;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: .9rem;
}
.nf-attr.on { background: var(--accent-soft); }
.nf-attr label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
.pk-toggle {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
}
.pk-toggle.dim { opacity: .35; }

/* SQL & Mongo Labs */
.ex-list .pill { font-size: .82rem; padding: .3rem .7rem; }
.code {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: 1.55;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.sql-editor { margin-top: 1.25rem; }
details.schema, details { margin-top: .85rem; }
details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
}
.schema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.schema-table {
  background: var(--surface-2);
  border-radius: 9px;
  padding: .6rem .85rem;
  font-size: .88rem;
  border: 1px solid var(--border);
}
.schema-table ul {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.result-grid { margin-top: 1.25rem; }
.result-grid table td, .result-grid table th {
  font-family: var(--font-mono);
  font-size: .85rem;
  white-space: nowrap;
}
td.null { color: var(--muted); font-style: italic; }
.log td { font-size: .86rem; }
.log tr.error td { color: var(--bad); }
.log tr.warning td { color: var(--warn); }
.log .stmt {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dict td, .dict th { font-size: .86rem; }
.shell {
  background: #090d16;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: .88rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.shell-cmd {
  color: #60a5fa;
  margin-top: .65rem;
  white-space: pre-wrap;
}
.shell-cmd:first-child { margin-top: 0; }
.shell-out {
  margin: .25rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
}
.shell-out.err { color: #f87171; }
pre.formula { white-space: pre-wrap; }

/* Mini ERD & Net SVG in drills */
.mini-erd {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
  overflow-x: auto;
}
.mini-box {
  border: 1.5px solid var(--erd-border);
  border-radius: 6px;
  padding: .55rem 1rem;
  font-weight: 700;
  background: var(--erd-head);
  white-space: nowrap;
}
.mini-line {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  border-top: 1.6px solid var(--erd-line);
  display: flex;
  justify-content: space-between;
  padding: .35rem .45rem 0;
  font-size: .85rem;
}
.mini-line .mini-m {
  font-weight: 700;
  font-family: var(--font-mono);
}
.mini-line .mini-verb {
  font-style: italic;
  color: var(--muted);
}
.net-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch;
}
.net-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

/* ---------- Notes: easier reading ---------- */
.notes { --unit: var(--accent); font-size: 1.02rem; line-height: 1.72; counter-reset: sec; padding: 1.6rem 2rem; }
.notes p { margin: .7rem 0; }
.notes strong { font-weight: 700; }

/* Numbered section headings in the unit's colour, matching the contents list */
.notes > h2 { display: flex; align-items: center; gap: .65rem; }
.notes > h2::before {
  counter-increment: sec;
  content: counter(sec);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--unit);
  background: color-mix(in srgb, var(--unit) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--unit) 35%, transparent);
}
.notes h3 {
  color: var(--unit);
  padding-left: .7rem;
  border-left: 3px solid color-mix(in srgb, var(--unit) 60%, transparent);
}
.notes ul > li::marker { color: var(--unit); }
.notes ol > li::marker { color: var(--unit); font-weight: 700; }
.notes li > strong:first-child { color: color-mix(in srgb, var(--unit) 75%, var(--text)); }

/* Tables: tinted header, light stripes, rounded frame */
.notes .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.notes table th {
  color: var(--text);
  background: color-mix(in srgb, var(--unit) 11%, var(--surface));
  border-bottom: 2px solid color-mix(in srgb, var(--unit) 40%, transparent);
}
.notes table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.notes table td:first-child { font-weight: 600; }
.notes table tr:last-child td { border-bottom: 0; }

/* Highlight boxes: definitions, key points, tips, warnings */
.notes p.def, .notes p.key, .notes p.tip, .notes p.warn {
  position: relative;
  margin: 1.1rem 0;
  padding: 1.55rem 1.1rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--box-line);
  border-left: 4px solid var(--box);
  background: color-mix(in srgb, var(--box) 7%, var(--surface));
}
.notes p.def::before, .notes p.key::before, .notes p.tip::before, .notes p.warn::before {
  position: absolute;
  top: .45rem;
  left: 1.1rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--box);
}
.notes p.def { --box: var(--unit); --box-line: color-mix(in srgb, var(--unit) 25%, transparent); }
.notes p.def::before { content: "Definition"; }
.notes p.key { --box: var(--good); --box-line: color-mix(in srgb, var(--good) 25%, transparent); }
.notes p.key::before { content: "Key point"; }
.notes p.tip { --box: var(--gold); --box-line: color-mix(in srgb, var(--gold) 30%, transparent); }
.notes p.tip::before { content: "Tip"; }
.notes p.warn { --box: var(--bad); --box-line: color-mix(in srgb, var(--bad) 25%, transparent); }
.notes p.warn::before { content: "Important"; }

/* Code blocks: a neutral panel so SQL stands apart from the prose */
.notes .formula { border-left-color: var(--unit); line-height: 1.6; }

/* Previous / next unit */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.pager-link {
  display: grid;
  gap: .15rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--surface);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pager-link:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); filter: none; }
.pager-link.next { grid-column: 2; text-align: right; }
.pager-dir { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pager-title { font-weight: 700; color: var(--accent); }
@media (max-width: 760px) {
  .notes { padding: 1.15rem 1rem; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.next { grid-column: 1; }
}
/* Inline code as small chips, so values like 0..* and SQL keywords stand out in the text */
.notes p code, .notes li code, .notes td code {
  padding: .08rem .35rem;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
/* Scrollbars that match the theme, instead of bright default ones */
.formula, .table-wrap, .erd-wrap, .erd-embed, .dep-embed, .net-wrap, pre {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}
.formula::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .erd-wrap::-webkit-scrollbar,
.erd-embed::-webkit-scrollbar, .dep-embed::-webkit-scrollbar, pre::-webkit-scrollbar { height: 8px; }
.formula::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .erd-wrap::-webkit-scrollbar-thumb,
.erd-embed::-webkit-scrollbar-thumb, .dep-embed::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 99px;
}
.formula::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .erd-wrap::-webkit-scrollbar-track,
.erd-embed::-webkit-scrollbar-track, .dep-embed::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { background: transparent; }

/* Annotations: students' own notes on the notes */
#anno-hint { margin-top: -1rem; }
mark.anno {
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  color: inherit;
  border-bottom: 2px solid var(--gold);
  border-radius: 2px;
  cursor: pointer;
}
mark.anno:hover, mark.anno:focus-visible { background: color-mix(in srgb, var(--gold) 45%, transparent); outline: none; }
.anno-pop {
  position: absolute;
  z-index: 60;
  width: min(360px, calc(100vw - 24px));
  padding: .85rem 1rem;
  box-shadow: 0 10px 30px rgba(20, 25, 50, .18);
}
.anno-pop.anno-add { width: auto; padding: .35rem; }
.anno-pop .btn-row { margin-top: .6rem; }
.anno-pop p { margin: 0 0 .4rem; }
.anno-pop textarea, .anno-item textarea {
  width: 100%;
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.anno-quote {
  margin: 0 0 .6rem;
  padding: .35rem .7rem;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem;
  color: var(--muted);
  max-height: 7.5rem;
  overflow: auto;
  white-space: pre-wrap;
}
.anno-note { white-space: pre-wrap; margin: 0 0 .4rem; }
.anno-store { font-size: .8rem; color: var(--muted); margin: .6rem 0 0 !important; }
.btn.ghost.danger { color: var(--bad); }
.btn.ghost.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.anno-warning {
  background: var(--bad-soft);
  border: 2px solid var(--bad);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.75rem;
}
.anno-warning h2 { margin: 0 0 .5rem; color: var(--bad); font-size: 1.2rem; border: 0; }
.anno-warning p { margin: 0 0 .5rem; }
.anno-warning .btn-row { margin: .9rem 0 .7rem; }
.anno-backup-status { font-size: .9rem; }
.anno-msg:empty { display: none; }
.anno-msg { font-weight: 600; color: var(--good); }
.anno-msg.bad { color: var(--bad); }
#anno-list h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
.anno-item.card { margin: 0 0 .6rem; padding: .9rem 1.1rem; }
.anno-item .q-meta { margin: 0 0 .4rem; }
.anno-item-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.anno-item-foot .q-meta { margin: 0; }

/* What's new */
.changes { display: grid; gap: .75rem; }
.change.card { margin: 0; padding: 1rem 1.2rem; }
.change h3 { margin: .35rem 0 .3rem; font-size: 1.08rem; }
.change p { margin: 0 0 .3rem; }
.change ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.change li { margin: .2rem 0; }
.change-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); }
.change-meta a.tag { text-decoration: none; }
.tag.new { background: var(--gold); color: #14182b; border-color: var(--gold); }
.changelog-preview { margin-top: 2.5rem; }
.changelog-preview > p { margin: .75rem 0 0; }
#whats-new-link.has-new { font-weight: 700; }
#whats-new-link.has-new::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-left: .35rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}

/* Highlighted table row, e.g. UML in the notation comparison */
.notes tr.row-key td {
  background: color-mix(in srgb, var(--unit, var(--accent)) 14%, var(--surface)) !important;
  font-weight: 600;
}
.notes tr.row-key td:first-child { box-shadow: inset 4px 0 0 var(--unit, var(--accent)); }
.notes tr.row-key .tag { margin-left: .35rem; font-size: .72rem; vertical-align: middle; }

/* Three ways to mark keys on a UML entity */
.notes li.key-styles-li { list-style: none; margin-left: -1.2rem; }
.notes li.key-styles-li::before, .notes li.key-styles-li::marker { content: none; }
.key-styles { display: flex; flex-wrap: wrap; gap: 1rem; margin: .4rem 0 .8rem; }
.key-styles figure { margin: 0; display: grid; gap: .4rem; justify-items: center; }
.key-styles figcaption { font-size: .82rem; color: var(--muted); text-align: center; max-width: 13rem; }
.uml-box {
  display: grid;
  min-width: 11rem;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .85rem;
}
.uml-box b { font-family: var(--font-sans); text-align: center; padding: .3rem .6rem; border-bottom: 1.5px solid var(--text); }
.uml-box span { padding: .1rem .6rem; }
.uml-box span:nth-of-type(1) { padding-top: .35rem; }
.uml-box span:last-child { padding-bottom: .4rem; }

/* ---------- Flow Lab ---------- */
.flow { display: grid; gap: 1rem; }
.fl-stage, .flow-embed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem;
  overflow-x: auto;
}
.flow-embed { margin: 1rem 0 1.5rem; }
.fl-svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--font-sans); }
/* In the lab, the diagram is capped so the step text and buttons fit on screen below it. */
.fl-stage .fl-svg { max-height: max(250px, calc(100vh - 340px)); }
.flow { scroll-margin-top: 70px; }
.fl-edge line { stroke: var(--erd-border); stroke-width: 1.3; fill: none; }
.fl-edge.on line { stroke: var(--accent); stroke-width: 1.8; }
.fl-head { fill: none; stroke: var(--erd-border); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fl-head.on { stroke: var(--accent); }
.fl-edge rect { fill: var(--surface); stroke: var(--border); }
.fl-edge.on rect { stroke: var(--accent); }
.fl-edge text { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.fl-edge.on text { fill: var(--accent); }
.fl-node rect { fill: var(--surface); stroke: var(--erd-border); stroke-width: 1.4; transition: stroke .25s ease; }
.fl-node .glyph { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-node .fl-label { font-size: 13.5px; font-weight: 700; fill: var(--text); }
.fl-node .fl-detail { font-size: 10.5px; fill: var(--muted); font-family: var(--font-mono); }
.fl-node .fl-status rect { fill: var(--surface); stroke: var(--accent); stroke-width: 1.2; }
.fl-node .fl-status text { font-size: 10.5px; font-weight: 600; text-anchor: middle; fill: var(--accent); }
.fl-node.focus rect { stroke: var(--accent); stroke-width: 2.2; }
.fl-node.focus .glyph { stroke: var(--accent); }
.fl-node.st-ok .fl-status text { fill: var(--good); }
.fl-node.st-ok .fl-status rect { stroke: var(--good); }
.fl-node.st-error rect { stroke: var(--bad); stroke-width: 2.2; }
.fl-node.st-error .glyph, .fl-node.st-error .fl-label { stroke: var(--bad); }
.fl-node.st-error .fl-label { fill: var(--bad); stroke: none; }
.fl-node.st-error .fl-status text { fill: var(--bad); }
.fl-node.st-error .fl-status rect { stroke: var(--bad); fill: var(--bad-soft); }
.fl-token { transition: transform .55s var(--ease-out), opacity .3s ease; }
.fl-token.enter { opacity: 0; }
.fl-token rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.fl-token text { font-size: 11px; font-family: var(--font-mono); text-anchor: middle; fill: var(--text); }
.fl-token.invisible { opacity: .55; }
.fl-token.invisible rect { stroke-dasharray: 3 3; }
.fl-token .dq circle { fill: var(--surface); stroke: var(--gold); stroke-width: 1.4; }
.fl-token .dq text { font-size: 10px; font-weight: 700; fill: var(--gold); }
@media (prefers-reduced-motion: reduce) { .fl-token, .fl-node rect { transition: none; } }

.fl-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "say console" "controls console"; gap: .75rem 1rem; align-items: start; }
.fl-panel .fl-say { grid-area: say; }
.fl-panel .fl-controls { grid-area: controls; }
.fl-panel .fl-console { grid-area: console; align-self: stretch; min-height: 9rem; max-height: 13rem; }
.fl-say { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1.1rem; min-height: 6.5rem; }
.fl-eyebrow { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.fl-text { margin: 0; line-height: 1.6; }
.fl-badge { text-transform: none; letter-spacing: 0; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; color: var(--bad); border: 1px solid var(--bad); }
.fl-options { display: grid; gap: .5rem; margin-top: .75rem; }
.fl-option {
  text-align: left; font: inherit; cursor: pointer; padding: .6rem .8rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  display: grid; gap: .3rem;
}
.fl-option:hover:not(:disabled) { border-color: var(--accent); }
.fl-option:disabled { cursor: default; }
.fl-option small { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.fl-option.right { border-color: var(--good); background: var(--good-soft); }
.fl-option.wrong { border-color: var(--bad); background: var(--bad-soft); }
.fl-option.dim { opacity: .55; }
.fl-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fl-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; flex: 1; }
.fl-dots span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border); }
.fl-dots span.done { background: var(--muted); border-color: var(--muted); }
.fl-dots span.now { background: var(--accent); border-color: var(--accent); }
.fl-dots span.brk { border-color: color-mix(in srgb, var(--bad) 60%, var(--border)); }
.fl-dots span.brk.done, .fl-dots span.brk.now { background: var(--bad); border-color: var(--bad); }
.fl-console {
  background: #0d1117; color: #c9d1d9; border-radius: var(--radius); padding: .7rem .85rem;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; max-height: 15rem; overflow: auto;
}
.fl-log { white-space: pre-wrap; word-break: break-word; padding: .1rem 0; opacity: .7; }
.fl-log.new { opacity: 1; }
.fl-log.muted { color: #8b949e; opacity: 1; }
.fl-log .src { display: block; color: #8b949e; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.fl-log + .fl-log { margin-top: .35rem; }
.fl-log.is-code .msg { color: #a5d6ff; }
.fl-log.warn .msg { color: #e3b341; }
.fl-log.error .msg { color: #ff7b72; }
.fl-end { grid-column: 1 / -1; }
.fl-end[hidden] { display: none; }
.fl-verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.fl-verdict > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; }
.fl-verdict h3 { margin: 0 0 .35rem; font-size: .95rem; }
.fl-verdict p { margin: 0; }
.fl-verdict .fix { border-color: var(--good); }
.fl-verdict .fix h3 { color: var(--good); }
.fl-next { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; }
.fl-next p { margin: 0; }
.fl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; align-items: center; margin-bottom: .75rem; }
.fl-head h2 { margin: 0 0 .25rem; font-size: 1.2rem; border: 0; }
.fl-head p { margin: 0; color: var(--muted); }
.fl-symptom-src { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fl-symptom { display: block; margin-top: .3rem; color: var(--bad); white-space: pre-wrap; word-break: break-word; }
.fl-q-symptom { margin: 0 0 .6rem; }
.fl-cause { margin: 0 0 .8rem; font-size: 1.05rem; }
.fl-recap { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; }
.fl-recap > p { margin: 0 0 .5rem; }
.fl-recap > p:last-child { margin-bottom: 0; }
.fl-missed { margin: 0 0 .6rem; padding-left: .8rem; border-left: 3px solid var(--bad); }
.fl-missed p { margin: 0 0 .25rem; }
.fl-approx { display: block; margin-top: .3rem; font-size: .8rem; font-style: italic; color: var(--muted); }
.fl-names { display: flex; gap: .4rem; }
.fl-modes { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; }
.fl-mode { padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; }
.fl-mode:hover { border-color: var(--accent); }
.fl-mode.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fl-mode.brk:hover, .fl-mode.brk.active { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.fl-mode-label { font-size: .85rem; color: var(--muted); margin-left: .4rem; }
.fl-problems { border: 2px solid var(--bad); background: var(--bad-soft); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) {
  .fl-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "controls" "console"; }
  .fl-verdict { grid-template-columns: minmax(0, 1fr); }
}

/* Time-window timelines (CLDV6212 LU3) */
.window-embed { margin: .75rem 0 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; overflow-x: auto; }
.win-svg { display: block; width: 100%; min-width: 420px; height: auto; font-family: var(--font-sans); }
.win-svg .win rect { fill: none; stroke: var(--unit, var(--accent)); stroke-width: 1.5; }
.win-svg .win.hi rect { fill: color-mix(in srgb, var(--unit, var(--accent)) 14%, transparent); stroke-width: 2.2; }
.win-svg .win text { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--unit, var(--accent)); }
.win-svg .axis line { stroke: var(--erd-border); stroke-width: 1.3; }
.win-svg .axis text { font-size: 10px; fill: var(--muted); text-anchor: middle; font-family: var(--font-mono); }
.win-svg .ev circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }

/* Git Lab: three areas, a terminal, conflicts and exercises */
.gl-stage, .git-embed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; overflow-x: auto; }
.git-embed { margin: 1rem 0 1.25rem; }
.gl-stage { margin-bottom: 1rem; }
.gl-svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: var(--font-sans); }
.gl-col rect { fill: var(--surface-2); stroke: var(--border); }
.gl-title { font-size: 14px; font-weight: 700; fill: var(--text); }
.gl-sub { font-size: 11px; fill: var(--muted); }
.gl-empty { font-size: 12px; fill: var(--muted); font-style: italic; }
.gl-file rect { fill: var(--surface); stroke: var(--erd-border); stroke-width: 1.2; }
.gl-fname { font-size: 12px; font-family: var(--font-mono); fill: var(--text); }
.gl-badge { font-size: 10.5px; font-weight: 700; text-anchor: end; fill: var(--muted); }
.gl-file.st-new rect { stroke: var(--gold); stroke-dasharray: 4 3; }
.gl-file.st-new .gl-badge { fill: var(--gold); }
.gl-file.st-mod rect, .gl-file.st-staged rect { stroke: var(--accent); }
.gl-file.st-mod .gl-badge, .gl-file.st-staged .gl-badge { fill: var(--accent); }
.gl-file.st-staged rect { fill: var(--accent-soft); }
.gl-file.st-del rect { stroke: var(--bad); stroke-dasharray: 4 3; }
.gl-file.st-del .gl-badge, .gl-file.st-del .gl-fname { fill: var(--bad); }
.gl-file.st-conflict rect { stroke: var(--bad); stroke-width: 2; fill: var(--bad-soft); }
.gl-file.st-conflict .gl-badge { fill: var(--bad); }
.gl-file.st-clean .gl-fname, .gl-file.st-ignored .gl-fname { fill: var(--muted); }
.gl-file.st-ignored { opacity: .6; }
.gl-edge { fill: none; stroke: var(--erd-border); stroke-width: 2; }
.gl-edge.pending { stroke: var(--bad); stroke-dasharray: 4 4; }
.gl-commit circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2.4; }
.gl-commit.merge circle { fill: var(--accent); }
.gl-commit.pending circle { stroke: var(--bad); stroke-dasharray: 3 3; fill: var(--bad-soft); }
.gl-hash { font-size: 11.5px; font-family: var(--font-mono); fill: var(--muted); }
.gl-msg { font-size: 12.5px; fill: var(--text); }
.gl-msg.pending { fill: var(--bad); font-weight: 600; }
.gl-ref rect { fill: var(--surface); stroke: var(--erd-border); }
.gl-ref text { font-size: 11px; font-weight: 700; fill: var(--text); font-family: var(--font-mono); }
.gl-ref.head rect { fill: var(--accent); stroke: var(--accent); }
.gl-ref.head text { fill: var(--accent-contrast); }

.gl-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "say term" "controls term"; gap: .75rem 1rem; align-items: start; }
.gl-panel .gl-say { grid-area: say; }
.gl-panel .fl-controls { grid-area: controls; }
.gl-panel .gl-term { grid-area: term; }
.gl-panel.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "term"; }
.gl-say .fl-text p { margin: 0 0 .5rem; }
.gl-done { color: var(--good); text-transform: none; letter-spacing: 0; }
.gl-todo { color: var(--accent); text-transform: none; letter-spacing: 0; }
.gl-after { margin: .6rem 0 0; padding: .5rem .7rem; border-left: 3px solid var(--good); background: var(--good-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.gl-hint { margin: .6rem 0 0; color: var(--muted); }
.gl-hint code { white-space: pre-wrap; }
.linklike { background: none; border: 0; padding: 0; margin-top: .6rem; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gl-term { background: #0d1117; color: #c9d1d9; border-radius: var(--radius); font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; display: flex; flex-direction: column; min-height: 15rem; }
.gl-out { padding: .7rem .85rem 0; overflow: auto; max-height: 20rem; flex: 1; }
.gl-line { white-space: pre-wrap; word-break: break-word; margin-bottom: .2rem; }
.gl-line.cmd { color: #f0f6fc; margin-top: .45rem; }
.gl-line.err { color: #ff7b72; }
.gl-line.note { color: #8b949e; font-style: italic; }
.gl-line code { color: #a5d6ff; }
.gl-line .add { color: #7ee787; }
.gl-line .del { color: #ff7b72; }
.gl-by { color: #e3b341; font-style: italic; }
.gl-ps { color: #7ee787; }
.gl-ps-b { color: #79c0ff; }
.gl-in { display: flex; gap: .5rem; align-items: center; padding: .55rem .85rem .7rem; border-top: 1px solid #30363d; }
.gl-prompt { white-space: nowrap; }
.gl-in input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f0f6fc; font: inherit; outline: none; padding: .2rem 0; }
.gl-in:focus-within { box-shadow: inset 0 0 0 2px #388bfd55; border-radius: 0 0 var(--radius) var(--radius); }

.gl-conflict { margin-top: 1rem; }
.gl-fv-note { margin: 0; font-size: .88rem; color: var(--muted); }
.gl-file-view { padding: .9rem 1.1rem; }
.gl-fv-head { margin: 0 0 .5rem; }
.gl-code { margin: 0 0 .6rem; padding: .6rem .8rem; background: var(--surface-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .82rem; line-height: 1.55; overflow-x: auto; }
.gl-code > span { display: block; white-space: pre; }
.gl-code.small { font-size: .78rem; margin: .5rem 0; }
.gl-code .gl-mark { color: var(--muted); font-weight: 700; }
.gl-code .gl-ours { background: var(--good-soft); }
.gl-code .gl-theirs { background: var(--accent-soft); }
.gl-actions { font-family: var(--font-sans); font-size: .78rem; color: var(--muted); padding: .15rem 0; }
.gl-actions button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.gl-ex h2 { margin-top: 0; border: 0; font-size: 1.2rem; }
.gl-list { list-style: none; margin: .5rem 0 1rem; padding: .35rem; display: grid; gap: .4rem; min-height: 3rem; border: 1.5px dashed transparent; border-radius: var(--radius); counter-reset: gl; }
.gl-list.over { border-color: var(--accent); background: var(--accent-soft); }
ol.gl-list .gl-item::before { counter-increment: gl; content: counter(gl); font-weight: 700; color: var(--muted); min-width: 1.2rem; }
.gl-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: grab; }
.gl-item code { background: none; padding: 0; font-family: var(--font-mono); font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.gl-item > span:not(.gl-grip):not(.gl-item-btns) { flex: 1; }
.gl-item > code { flex: 1; }
.gl-item.dragging { opacity: .45; }
.gl-item.ok { border-color: var(--good); background: var(--good-soft); }
.gl-item.no { border-color: var(--bad); background: var(--bad-soft); }
.gl-grip { color: var(--muted); letter-spacing: -2px; }
.gl-item-btns { display: flex; gap: .25rem; margin-left: auto; }
.gl-item-btns button { font: inherit; font-size: .8rem; padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.gl-item-btns button:disabled { opacity: .35; cursor: default; }
.gl-empty-li { color: var(--muted); font-style: italic; padding: .5rem .65rem; }
.gl-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.gl-build .q-meta { margin: 0; }
@media (max-width: 900px) {
  .gl-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "controls" "term"; }
  .gl-build { grid-template-columns: minmax(0, 1fr); }
}

/* Git Lab: GitHub column, pull requests, deploys, movement and notes figures */
.gl-col.remote rect { fill: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft)); stroke-dasharray: 5 4; }
.gl-ref.tracking rect { fill: none; stroke: var(--muted); stroke-dasharray: 3 2; }
.gl-ref.tracking text { fill: var(--muted); font-weight: 600; }
.gl-ref.tag rect { fill: var(--warn-soft); stroke: var(--gold); }
.gl-ref.tag text { fill: var(--gold); }
.gl-ref.protected rect { stroke: var(--good); }
.gl-lock { fill: none; stroke: var(--good); stroke-width: 1.3; }
.gl-pr rect, .gl-deploy rect { fill: var(--surface); stroke: var(--erd-border); stroke-width: 1.3; }
.gl-pr-t { font-size: 12px; font-weight: 700; fill: var(--text); }
.gl-pr-s { font-size: 10.5px; fill: var(--muted); font-family: var(--font-mono); }
.gl-pr-st { font-size: 10.5px; font-weight: 700; fill: var(--muted); }
.gl-pr.ready rect, .gl-deploy.live rect { stroke: var(--good); }
.gl-pr.ready .gl-pr-st, .gl-deploy.live .gl-pr-st { fill: var(--good); }
.gl-pr.blocked rect, .gl-deploy.failed rect { stroke: var(--bad); }
.gl-pr.blocked .gl-pr-st, .gl-deploy.failed .gl-pr-st { fill: var(--bad); }
.gl-pr.merged rect { stroke: var(--lu2); }
.gl-pr.merged .gl-pr-st { fill: var(--lu2); }
.gl-stash rect { fill: var(--warn-soft); stroke: var(--gold); stroke-dasharray: 4 3; }
.gl-stash text { font-size: 11px; font-weight: 700; fill: var(--gold); }
.gl-arrow path { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.gl-arrow rect { fill: var(--accent); }
.gl-arrow text { font-size: 11.5px; font-weight: 700; text-anchor: middle; fill: var(--accent-contrast); font-family: var(--font-mono); }
.gl-arrow.back path { stroke: var(--lu3); }
.gl-arrow.back rect { fill: var(--lu3); }
.gl-ahead { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gl-arrow.back .gl-ahead { stroke: var(--lu3); }
.gl-arrow { animation: gl-draw .5s var(--ease-out); }
@keyframes gl-draw { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gl-svg .fresh rect, .gl-svg .fresh circle { animation: gl-glow 1.6s ease-out; }
.gl-svg .gl-commit.fresh circle { stroke-width: 3.2; }
@keyframes gl-glow { 0% { filter: drop-shadow(0 0 0 var(--accent)); } 25% { filter: drop-shadow(0 0 7px var(--accent)); } 100% { filter: drop-shadow(0 0 0 transparent); } }
@media (prefers-reduced-motion: reduce) { .gl-arrow, .gl-svg .fresh rect, .gl-svg .fresh circle { animation: none; } }
.gl-svg.compact { min-width: 0; }
.gl-line.ev { color: #d2a8ff; }
.gl-line.ev.bad { color: #ff7b72; }
.gl-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.btn.small { padding: .35rem .75rem; font-size: .85rem; }
.gl-nav { display: grid; gap: .45rem; margin-bottom: 1rem; }
.gl-nav-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.gl-nav-l { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 4.6rem; }

/* Notes figures */
.git-fig { margin: 1rem 0 1.4rem; }
.git-fig figcaption, .git-pair figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; text-align: center; }
.git-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; margin: 1rem 0 1.4rem; }
.git-pair figure { margin: 0; }
.git-pair .git-embed { margin: 0; padding: .35rem; }
.git-pair-arrow { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--accent); text-align: center; white-space: nowrap; }
.git-pair-arrow::after { content: "→"; display: block; font-size: 1.4rem; line-height: 1; }
.git-map { display: block; width: 100%; height: auto; min-width: 560px; font-family: var(--font-sans); }
.git-map-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; }
.git-map .box rect { fill: var(--surface-2); stroke: var(--erd-border); stroke-width: 1.3; }
.git-map .box.dim rect { stroke-dasharray: 5 4; opacity: .6; }
.git-map .box.dim text { opacity: .55; }
.git-map .box text { font-size: 16px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.git-map .box .sub { font-size: 12.5px; font-weight: 400; fill: var(--muted); }
.git-map .fwd path { fill: none; stroke: var(--accent); stroke-width: 2; }
.git-map .bwd path { fill: none; stroke: var(--lu3); stroke-width: 2; }
.git-map .lbl rect { fill: var(--surface); stroke: currentColor; }
.git-map .lbl rect { height: 22px; transform: translateY(-1px); }
.git-map .fwd .lbl { color: var(--accent); }
.git-map .bwd .lbl { color: var(--lu3); }
.git-map .lbl text { font-size: 13.5px; font-weight: 700; font-family: var(--font-mono); fill: currentColor; text-anchor: middle; }
.git-map .ah { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.git-map .fwd .ah { stroke: var(--accent); }
.git-map .bwd .ah { stroke: var(--lu3); }
.git-anatomy { display: grid; grid-template-columns: minmax(0, 1fr); margin: 1rem 0 1.4rem; background: var(--surface-2); border-radius: var(--radius); padding: .6rem .8rem; font-family: var(--font-mono); font-size: .82rem; overflow-x: auto; }
.git-anatomy > div { display: grid; grid-template-columns: minmax(16rem, max-content) 1fr; gap: 1rem; align-items: baseline; padding: .12rem .3rem; border-radius: 4px; }
.git-anatomy > div > span:first-child { white-space: pre; }
.git-anatomy > div > span:last-child { font-family: var(--font-sans); font-size: .8rem; color: var(--muted); }
.git-anatomy .mark > span:first-child { font-weight: 700; color: var(--muted); }
.git-anatomy .ours { background: var(--good-soft); }
.git-anatomy .theirs { background: var(--accent-soft); }
.git-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0 1.4rem; counter-reset: gs; padding: 0; list-style: none; }
.git-steps li { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--unit, var(--accent)); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .9rem; }
.git-steps li::before { counter-increment: gs; content: counter(gs); display: block; font-weight: 800; color: var(--unit, var(--accent)); font-size: 1.1rem; }
.git-steps code { font-size: .8rem; }
@media (max-width: 700px) {
  .git-pair { grid-template-columns: minmax(0, 1fr); }
  .git-pair-arrow::after { content: "↓"; }
}
.gl-more { font-size: 11px; font-weight: 700; fill: var(--muted); }

/* Git notes: flow diagrams, bisect, comparisons, three-way merge, merge box */
.git-map .ah.f { stroke: var(--accent); }
.git-map .ah.b { stroke: var(--lu3); }
.git-map .ah.x { stroke: var(--bad); }
.git-map .ah.p { stroke: var(--muted); }
.git-map .bad path { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 6 5; }
.git-map .plain path { fill: none; stroke: var(--muted); stroke-width: 1.8; }
.git-map .bad .lbl { color: var(--bad); }
.git-map .plain .lbl { color: var(--muted); }
.git-map .box.good rect { stroke: var(--good); fill: var(--good-soft); }
.git-map .box.bad rect { stroke: var(--bad); fill: var(--bad-soft); }
.git-map .box.accent rect { stroke: var(--accent); fill: var(--accent-soft); }
.git-map .box.dim rect { stroke-dasharray: 5 4; opacity: .7; }
.git-map .box.group rect { fill: none; stroke: var(--erd-border); stroke-dasharray: 6 5; }
.git-map .box.group text { text-anchor: start; font-size: 13px; fill: var(--muted); }
.git-map .bis-line { stroke: var(--border); stroke-width: 2; }
.git-map .bis-range { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.git-map .bis-dot { fill: var(--surface); stroke: var(--erd-border); stroke-width: 1.5; }
.git-map .bis-dot.good { fill: var(--good); stroke: var(--good); }
.git-map .bis-dot.bad { fill: var(--bad); stroke: var(--bad); }
.git-map .bis-test { fill: var(--surface); stroke-width: 3; }
.git-map .bis-test.good { stroke: var(--good); }
.git-map .bis-test.bad { stroke: var(--bad); }
.git-map .bis-test.found { fill: var(--bad); }
.git-map .bis-note { font-size: 16px; font-weight: 700; fill: var(--muted); text-anchor: start; }
.git-map .bis-head { font-size: 15px; fill: var(--muted); }
.git-map .bis-head.end { text-anchor: end; }
.git-map .bis-found { font-size: 17px; font-weight: 700; fill: var(--bad); }
.git-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.git-compare > div { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.git-compare h4 { margin: 0; padding: .5rem .8rem; font-size: .85rem; border-bottom: 1px solid var(--border); }
.git-compare .bad h4 { color: var(--bad); background: var(--bad-soft); }
.git-compare .good h4 { color: var(--good); background: var(--good-soft); }
.git-compare ul { list-style: none; margin: 0; padding: .55rem .8rem; font-family: var(--font-mono); font-size: .8rem; line-height: 1.75; }
.git-compare li::before { content: none; }
.git-compare .h { color: var(--muted); margin-right: .6rem; }
.git-three { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 .5rem; align-items: stretch; }
.git-three > div { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .5rem .6rem; font-family: var(--font-mono); font-size: .75rem; line-height: 1.6; }
.git-three > div > b { display: block; font-family: var(--font-sans); font-size: .78rem; margin-bottom: .3rem; color: var(--muted); }
.git-three .chg { background: var(--warn-soft); border-radius: 3px; }
.git-three .ok { border-color: var(--good); }
.git-three .ok > b { color: var(--good); }
.git-three .no { border-color: var(--bad); }
.git-three .no > b { color: var(--bad); }
.git-three-cap { font-size: .85rem; color: var(--muted); margin: 0 0 1.2rem; }
.git-mergebox { margin: 1rem 0 1.4rem; border: 1.5px solid var(--bad); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.git-mergebox > div { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .9rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.git-mergebox > div:last-child { border-bottom: 0; }
.git-mergebox .i { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.git-mergebox .ok .i { background: var(--good-soft); color: var(--good); }
.git-mergebox .no .i { background: var(--bad-soft); color: var(--bad); }
.git-mergebox small { display: block; color: var(--muted); }
.git-mergebox .btnrow { justify-content: flex-end; background: var(--surface-2); }
.git-mergebox .fake-btn { padding: .35rem .8rem; border-radius: 6px; background: var(--border); color: var(--muted); font-weight: 700; font-size: .85rem; }
.git-stack { display: grid; gap: .5rem; margin: 1rem 0 1.4rem; }
.git-stack figure { margin: 0; }
.git-stack .git-embed { margin: 0; }
@media (max-width: 700px) {
  .git-compare { grid-template-columns: minmax(0, 1fr); }
  .git-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.git-embed > .gl-svg.compact { max-width: 440px; margin: 0 auto; }
.git-map.flow .box text { font-size: 18px; }
.git-map.flow .box .sub { font-size: 14.5px; }
.git-map.flow .box.group text { font-size: 15px; }
.git-map.flow .lbl text { font-size: 15px; }
.git-map.flow .lbl rect { height: 26px; transform: none; }
.git-map.flow path { stroke-width: 2.4; }
.notes .git-steps li code { white-space: normal; word-break: break-word; }

/* Git Lab: make the terminal's input line obvious */
.gl-term-head { display: flex; align-items: center; gap: .55rem; padding: .45rem .85rem; border-bottom: 1px solid #30363d; color: #c9d1d9; font-family: var(--font-sans); font-size: .78rem; font-weight: 700; }
.gl-dots { display: inline-flex; gap: 4px; }
.gl-dots i { width: 9px; height: 9px; border-radius: 50%; background: #484f58; }
.gl-dots i:nth-child(1) { background: #ff5f56; } .gl-dots i:nth-child(2) { background: #ffbd2e; } .gl-dots i:nth-child(3) { background: #27c93f; }
.gl-term-tip { font-weight: 400; color: #8b949e; margin-left: auto; text-align: right; }
.gl-in { background: #161b22; border-top: 1px solid #388bfd66; border-radius: 0 0 var(--radius) var(--radius); }
.gl-in input { caret-color: #7ee787; }
.gl-in input::placeholder { color: #8b949e; opacity: 1; font-style: italic; }
.gl-enter { flex: none; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: .1rem .45rem; }
.gl-in:focus-within .gl-enter { color: #7ee787; border-color: #7ee78766; }
.fresh-term .gl-in { animation: gl-invite 2.2s ease-in-out infinite; }
@keyframes gl-invite { 0%, 100% { box-shadow: inset 0 0 0 1px #388bfd55; } 50% { box-shadow: inset 0 0 0 2px #58a6ff; } }
.fresh-term .gl-in:focus-within { animation: none; }
@media (max-width: 600px) { .gl-term-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .fresh-term .gl-in { animation: none; box-shadow: inset 0 0 0 2px #388bfd88; } }

/* Slogan: the home page's eyebrow, and a sign-off line in the footer */
.eyebrow.slogan { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.footer .footer-slogan { color: var(--gold); font-weight: 700; margin-bottom: .5rem; }
/* Long values in table cells (e.g. web addresses) wrap rather than widen the page. */
.notes td code { white-space: normal; overflow-wrap: anywhere; }
/* Tablets: the module nav has its own row, and wraps onto a second line rather than hiding links. */
@media (min-width: 521px) and (max-width: 1180px) { #nav { flex-wrap: wrap; overflow-x: visible; } }
/* A code chip too long for the line scrolls within itself instead of widening the page. */
.notes p code, .notes li code { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: -0.32em; scrollbar-width: none; }
.git-stack > figure, .git-fig { min-width: 0; }

/* Faculties on the home page */
.faculty { margin: 2rem 0 1rem; }
.faculty-head { margin-bottom: .9rem; }
.faculty-head h2 { margin: 0 0 .25rem; }
.faculty-head h2 a { color: inherit; text-decoration: none; }
.faculty-head h2 a:hover { color: var(--accent); }
.faculty-head p { margin: 0; color: var(--muted); max-width: 65ch; }

/* The study-aid disclaimer on every module */
.disclaimer { margin: 0 0 1.25rem; padding: .7rem .95rem; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text); font-size: .9rem; line-height: 1.55; }
.disclaimer strong { color: var(--warn); }

/* Unkindness: the maker's mark in the footer and on the About page. Matches the theme in light and dark. */
:root { --uk-slate: #6b7896; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --uk-slate: #a9b4c8; } }
:root[data-theme="dark"] { --uk-slate: #a9b4c8; }
.maker-word { font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.maker-word span { color: var(--uk-slate); }
.footer .maker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .6rem; color: var(--text); text-decoration: none; opacity: .9; transition: opacity .2s; }
.footer .maker:hover { text-decoration: none; opacity: 1; }
.footer .maker:hover .maker-word span { color: var(--accent); }
.maker-bird { width: 26px; height: 24px; color: var(--text); }
.footer .maker-word { font-size: 1.15rem; }
.about-hero { text-align: center; padding: 1.5rem 0 1rem; }
.about-monogram { width: 145px; height: 190px; color: var(--text); display: block; margin: 0 auto; }
.about-word { font-size: 1.6rem; margin: .5rem 0 0; text-transform: uppercase; letter-spacing: .12em; }
.about-by { margin: .2rem 0 0; color: var(--uk-slate); font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.about { max-width: 68ch; margin: 0 auto; }
.about h1 { margin-top: 1rem; }
.about h2 { margin-top: 1.75rem; }