:root {
  --ink: #172033;
  --muted: #667085;
  --line: #d7dee8;
  --panel: #ffffff;
  --soft: #f5f8fb;
  --blue: #2454a6;
  --teal: #167c80;
  --green: #277a46;
  --orange: #a45d13;
  --red: #b42318;
  --code-bg: #1C1C1C;
  --code-fg: #FFB000;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* clip (not hidden) prevents horizontal scroll WITHOUT turning html/body into
     a scroll container — which would break the sticky sidebar below. */
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 10%, rgba(149,108,70,.13), transparent 30vw),
    radial-gradient(circle at 90% 4%, rgba(177,132,83,.10), transparent 28vw),
    linear-gradient(145deg, #f5efe7 0%, #fbf7f1 48%, #f1e7dc 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: clip;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd {
  font-family: Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── Layout ── */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}
nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 22px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,251,255,.92) 100%);
  border-right: 1px solid var(--line);
  font-size: 13.5px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  box-shadow: 8px 0 26px rgba(23,32,51,.06);
}
.nav-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  margin: -22px -16px 12px;
  padding: 22px 16px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.95) 82%, rgba(248,252,255,.84) 100%);
  border-bottom: 1px solid rgba(215,222,232,0);
  backdrop-filter: blur(14px);
  transition: padding .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav-head::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal), #f4b942);
  border-radius: 999px;
  opacity: .45;
  transform: scaleX(.38);
  transform-origin: left center;
  transition: transform .28s ease, opacity .22s ease;
}
body.page-scrolled nav .nav-head,
nav.menu-scrolled .nav-head {
  padding-top: 12px;
  padding-bottom: 10px;
  border-bottom-color: rgba(215,222,232,.92);
  box-shadow: 0 12px 24px rgba(23,32,51,.08);
}
body.page-scrolled nav .nav-head::after,
nav.menu-scrolled .nav-head::after {
  opacity: .95;
  transform: scaleX(1);
}
.nav-brand {
  display: block;
  transition: transform .22s ease;
}
body.page-scrolled nav .nav-brand,
nav.menu-scrolled .nav-brand {
  transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  color: #22304a;
  border-radius: 9px;
  padding: 8px 11px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.nav-toggle:hover { background: #edf4ff; }
.nav-toggle-icon {
  display: grid;
  gap: 3px;
  width: 17px;
}
.nav-toggle-icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-links {
  display: block;
  padding-top: 16px;
  scroll-padding-top: 120px;
}
.nav-group {
  margin: 12px 0;
}
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(36,84,166,.13);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(237,247,255,.98) 0%, rgba(246,251,255,.98) 100%);
  color: #183763;
  padding: 9px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(23,32,51,.035);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.nav-group-toggle:hover {
  background: linear-gradient(135deg, #e4f2ff 0%, #f7fdff 100%);
  border-color: rgba(36,84,166,.24);
  color: #12305a;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(23,32,51,.07);
}
.nav-chevron {
  color: var(--teal);
  font-size: 12px;
  transition: transform .18s ease;
}
.nav-group.collapsed .nav-chevron {
  transform: rotate(-90deg);
}
.nav-group-items {
  overflow: hidden;
  padding: 7px 0 0 6px;
}
.js-ready .nav-group.collapsed .nav-group-items {
  display: none;
}
.nav-advanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.advanced-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(164,93,19,.28);
  background: linear-gradient(135deg, #fff7e8, #fffbf2);
  color: #8a4b0e;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
nav .advanced-badge {
  margin-left: auto;
  font-size: 9.5px;
  padding: 1px 6px;
}
nav img {
  display: block;
  max-width: 228px;
  max-height: 78px;
  object-fit: contain;
  margin: 0 0 14px;
  transition: max-width .22s ease, max-height .22s ease, margin .22s ease, filter .22s ease;
}
body.page-scrolled nav img,
nav.menu-scrolled img {
  max-width: 188px;
  max-height: 64px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(23,32,51,.12));
}
nav .title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 2px;
  transition: font-size .22s ease;
}
body.page-scrolled nav .title,
nav.menu-scrolled .title {
  font-size: 15px;
}
nav .subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 16px;
  transition: margin .22s ease, opacity .22s ease;
}
body.page-scrolled nav .subtitle,
nav.menu-scrolled .subtitle {
  margin-bottom: 10px;
  opacity: .76;
}
nav .section-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 14px 0 4px 8px;
}
nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 9px 6px 22px;
  margin: 2px 0;
  color: #2d3d58;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13.25px;
  font-weight: 600;
  line-height: 1.25;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
nav a::before {
  content: "";
  position: absolute;
  left: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b5c4d8;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
nav a:hover {
  background: rgba(237,244,255,.92);
  border-color: rgba(36,84,166,.12);
  color: var(--blue);
  text-decoration: none;
  transform: translateX(2px);
  box-shadow: 0 5px 12px rgba(23,32,51,.045);
}
nav a:hover::before {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(22,124,128,.12);
  transform: scale(1.08);
}
nav a.active {
  background: linear-gradient(135deg, rgba(220,238,255,.98), rgba(237,250,249,.98));
  border-color: rgba(36,84,166,.22);
  color: var(--blue);
  font-weight: 760;
  box-shadow: inset 3px 0 0 var(--teal), 0 6px 14px rgba(23,32,51,.055);
}
nav a.active::before {
  background: #f4b942;
  box-shadow: 0 0 0 3px rgba(244,185,66,.16);
}

main {
  width: 100%;
  min-width: 0;
  max-width: 1120px;
  padding: 32px;
}

main img,
main video,
main svg {
  max-width: 100%;
  height: auto;
}

figure {
  max-width: 100%;
}

header, section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(23,32,51,.055);
  scroll-margin-top: 92px;
}
header {
  padding: 36px 32px 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(22,124,128,.14), transparent 220px),
    linear-gradient(130deg, #ffffff 0%, #ffffff 100%);
}
.hero {
  position: relative;
  overflow: hidden;
}
.hero-head {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.hero-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(23,32,51,.10));
}
.hero-kicker {
  margin-bottom: 6px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 { margin: 0 0 8px; font-size: clamp(26px, 3.5vw, 44px); line-height: 1.08; }
h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.2; }
h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 700; color: #1a2c46; }
h2 .advanced-badge, h3 .advanced-badge {
  margin-left: 8px;
  vertical-align: middle;
}
p  { margin: 0 0 12px; }
ul, ol { margin: 6px 0 14px 20px; padding: 0; }
li { margin: 5px 0; }

.lede { max-width: 820px; color: #38465f; font-size: 17px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); background: #f7fafc; color: #344054;
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 650;
}

/* ── Screenshot frames ── */
.screenshot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  margin: 16px 0 8px;
}
.screenshot-caption {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
}

/* ── Media placeholder (screenshot / video to be added later) ── */
.placeholder {
  border: 2px dashed #c7b8a4;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #faf7f2, #faf7f2 13px, #f2eadf 13px, #f2eadf 26px);
  color: var(--muted);
  text-align: center;
  padding: 44px 20px;
  margin: 16px 0 8px;
  font-size: 14px;
}
.placeholder.video { padding: 70px 20px; }
.placeholder .ph-icon { font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; }
.placeholder .ph-label { font-weight: 700; color: var(--ink); }
.placeholder .ph-file {
  display: inline-block;
  margin-top: 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--blue);
}

/* ── Two-column screenshot ── */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}
.ss-grid figure { margin: 0; }
.ss-grid figcaption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}
.ss-grid img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}

/* ── Cards ── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.card {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 16px 18px;
}
.card h3 { margin-top: 0; }

/* ── Callouts ── */
.callout {
  border-left: 4px solid var(--teal);
  background: #f0fbfa;
  padding: 11px 14px;
  margin: 14px 0;
  border-radius: 0 6px 6px 0;
}
.warn  { border-left-color: var(--orange); background: #fff8ed; }
.tip   { border-left-color: var(--blue);   background: #f0f6ff; }

/* ── Tables ── */
table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0 18px; font-size: 13.5px;
  table-layout: auto;
}
th, td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left; vertical-align: top;
  /* break-word (not anywhere): only break a word when the line truly overflows,
     so short headers like "Button"/"Format" keep their full min-width and never
     wrap character-by-character. */
  overflow-wrap: break-word;
  word-break: normal;
}
/* Short label columns must never wrap. */
.toolbar-table th, .toolbar-table td:first-child,
.isa-format-table th:first-child, .isa-format-table td:first-child {
  white-space: nowrap;
}
th { background: #edf3fb; color: #263750; font-weight: 800; }
tr:nth-child(even) td { background: #fafcff; }

/* ── Themed reference tables ── */
.manual-ref-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(45,64,91,.14);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28,44,67,.06);
}
.manual-ref-table th {
  border: 0;
  background: linear-gradient(135deg, #243752 0%, #36516f 100%);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.manual-ref-table td {
  border-width: 0 0 1px;
  border-color: rgba(45,64,91,.09);
  background: #fff;
}
.manual-ref-table tr:last-child td {
  border-bottom: 0;
}
.manual-ref-table tbody tr {
  transition: filter .14s ease, transform .14s ease;
}
.manual-ref-table tbody tr:hover {
  filter: saturate(1.04) brightness(.992);
}
.manual-ref-table code {
  border: 1px solid rgba(45,64,91,.10);
  background: rgba(248,250,252,.92);
  color: #20304a;
  font-weight: 700;
}
.manual-ref-table td:first-child {
  font-weight: 800;
}
.tab-panel-table tr:nth-child(4n+1) td { background: #f2f6fb; }
.tab-panel-table tr:nth-child(4n+1) td:first-child { background: #dfe7f2; color: #344f73; }
.tab-panel-table tr:nth-child(4n+2) td { background: #f1f7f7; }
.tab-panel-table tr:nth-child(4n+2) td:first-child { background: #dcebed; color: #406770; }
.tab-panel-table tr:nth-child(4n+3) td { background: #f7f4ec; }
.tab-panel-table tr:nth-child(4n+3) td:first-child { background: #efe3c7; color: #6f5522; }
.tab-panel-table tr:nth-child(4n) td { background: #f7f5fb; }
.tab-panel-table tr:nth-child(4n) td:first-child { background: #e7e3f1; color: #554a76; }
.toolbar-table td:first-child {
  width: 72px;
  text-align: center;
  background: #f3f6fb;
}
.toolbar-table td:nth-child(2) {
  width: 110px;
  background: #e4ecf5;
  color: #365577;
  font-weight: 850;
}
.toolbar-table tbody tr:nth-child(even) td:first-child { background: #f7f4ec; }
.toolbar-table tbody tr:nth-child(even) td:nth-child(2) { background: #efe3c7; color: #6f5522; }
.toolbar-table img {
  filter: drop-shadow(0 3px 6px rgba(28,44,67,.12));
}
.cpu-control-table td:first-child,
.register-table td:first-child {
  width: 128px;
  text-align: center;
  background: #e4ecf5;
  color: #365577;
  font-weight: 850;
  letter-spacing: .02em;
}
.cpu-control-table tr:nth-child(even) td,
.register-table tr:nth-child(even) td { background: #f8f5ee; }
.cpu-control-table tr:nth-child(even) td:first-child,
.register-table tr:nth-child(even) td:first-child { background: #ede3cf; color: #6a532d; }
.memory-address-table td:first-child,
.memory-range-table td:first-child,
.display-memory-table td:first-child,
.glyph-storage-table td:first-child,
.keyboard-bit-table td:first-child {
  width: 138px;
  text-align: center;
  background: #e4ecf5;
  color: #365577;
  font-weight: 850;
}
.memory-address-table tr:nth-child(3n+1) td,
.memory-range-table tr:nth-child(3n+1) td { background: #f2f6fb; }
.memory-address-table tr:nth-child(3n+1) td:first-child,
.memory-range-table tr:nth-child(3n+1) td:first-child { background: #dfe7f2; color: #344f73; }
.memory-address-table tr:nth-child(3n+2) td,
.memory-range-table tr:nth-child(3n+2) td { background: #f1f7f7; }
.memory-address-table tr:nth-child(3n+2) td:first-child,
.memory-range-table tr:nth-child(3n+2) td:first-child { background: #dcebed; color: #406770; }
.memory-address-table tr:nth-child(3n) td,
.memory-range-table tr:nth-child(3n) td { background: #f8f5ee; }
.memory-address-table tr:nth-child(3n) td:first-child,
.memory-range-table tr:nth-child(3n) td:first-child { background: #ede3cf; color: #6a532d; }
.memory-tools-table td:first-child,
.display-control-table td:first-child,
.import-options-table td:first-child {
  width: 180px;
  background: #e4ecf5;
  color: #365577;
  font-weight: 850;
}
.memory-tools-table tr:nth-child(even) td:first-child,
.display-control-table tr:nth-child(even) td:first-child,
.import-options-table tr:nth-child(even) td:first-child {
  background: #efe3c7;
  color: #6f5522;
}
.memory-tools-table tr:nth-child(odd) td,
.display-control-table tr:nth-child(odd) td,
.import-options-table tr:nth-child(odd) td { background: #f3f6fb; }
.memory-tools-table tr:nth-child(even) td,
.display-control-table tr:nth-child(even) td,
.import-options-table tr:nth-child(even) td { background: #f8f5ee; }
.memory-tools-table tr:nth-child(odd) td:first-child,
.display-control-table tr:nth-child(odd) td:first-child,
.import-options-table tr:nth-child(odd) td:first-child {
  background: #e4ecf5;
  color: #365577;
}
.memory-tools-table tr:nth-child(even) td:first-child,
.display-control-table tr:nth-child(even) td:first-child,
.import-options-table tr:nth-child(even) td:first-child {
  background: #efe3c7;
  color: #6f5522;
}
.display-memory-table tr:first-child td { background: #f4f6fa; }
.display-memory-table tr:first-child td:first-child { background: #e3e8f3; color: #4c5f82; }
.display-memory-table tr:last-child td { background: #f1f7f7; }
.display-memory-table tr:last-child td:first-child { background: #dcebed; color: #406770; }
.glyph-storage-table tr:nth-child(odd) td { background: #f7f4ec; }
.glyph-storage-table tr:nth-child(odd) td:first-child { background: #efe3c7; color: #6f5522; }
.glyph-storage-table tr:nth-child(even) td { background: #f2f6fb; }
.glyph-storage-table tr:nth-child(even) td:first-child { background: #dfe7f2; color: #344f73; }
.glyph-storage-table td:last-child {
  width: 120px;
  text-align: center;
  font-weight: 800;
  color: #365577;
}
.keyboard-bit-table td:first-child {
  width: 72px;
}
.keyboard-bit-table td:nth-child(2) {
  width: 98px;
  text-align: center;
  background: #f3f6fb;
}
.keyboard-bit-table td:nth-child(3) {
  width: 150px;
  background: #f8f5ee;
}
.keyboard-bit-table tr:nth-child(odd) td { background: #f2f6fb; }
.keyboard-bit-table tr:nth-child(odd) td:first-child { background: #dfe7f2; color: #344f73; }
.keyboard-bit-table tr:nth-child(even) td { background: #f7f4ec; }
.keyboard-bit-table tr:nth-child(even) td:first-child { background: #efe3c7; color: #6f5522; }
.keyboard-bit-table td:nth-child(2) {
  background: #eef3f8;
}
.keyboard-bit-table td:nth-child(3) {
  background: #faf7f0;
}
.keyboard-bit-table kbd {
  background: #fff;
  box-shadow: 0 1px 0 rgba(28,44,67,.08);
}
.game-memory-table td:nth-child(2) {
  width: 92px;
  text-align: center;
  font-weight: 800;
  color: #365577;
}

/* ── ISA reference tables ── */
.isa-format-table,
.isa-ref-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(45,64,91,.14);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28,44,67,.06);
}
.isa-format-table th,
.isa-ref-table th {
  border: 0;
  background: linear-gradient(135deg, #243752 0%, #36516f 100%);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.isa-format-table td,
.isa-ref-table td {
  border-width: 0 0 1px;
  border-color: rgba(45,64,91,.09);
  background: #fff;
}
.isa-format-table tr:last-child td,
.isa-ref-table tr:last-child td {
  border-bottom: 0;
}
.isa-format-table code,
.isa-ref-table code {
  border: 1px solid rgba(45,64,91,.10);
  background: rgba(248,250,252,.92);
  color: #20304a;
  font-weight: 700;
}
.isa-format-table tbody tr,
.isa-ref-table tbody tr {
  transition: filter .14s ease, transform .14s ease;
}
.isa-format-table tbody tr:hover,
.isa-ref-table tbody tr:hover {
  filter: saturate(1.04) brightness(.992);
}
.format-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.format-badge {
  min-width: 38px;
  background: #e8eef6;
  color: #2f4a6b;
  box-shadow: inset 0 0 0 1px rgba(47,74,107,.12);
}
.isa-ref-table td:first-child {
  width: 118px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(45,64,91,.10);
}
.isa-format-table td:first-child {
  width: 72px;
  text-align: center;
}
.isa-ref-table td:nth-child(2) {
  min-width: 190px;
}
.isa-ref-table .isa-system td { background: #f5f7fa; }
.isa-ref-table .isa-system td:first-child { background: #e7ebf0; color: #465568; }
.isa-ref-table .isa-move td { background: #f2f6fb; }
.isa-ref-table .isa-move td:first-child { background: #dde8f4; color: #365577; }
.isa-ref-table .isa-immediate td { background: #f7f4ec; }
.isa-ref-table .isa-immediate td:first-child { background: #efe3c7; color: #6f5522; }
.isa-ref-table .isa-memory td { background: #f1f7f7; }
.isa-ref-table .isa-memory td:first-child { background: #dcebed; color: #406770; }
.isa-ref-table .isa-arithmetic td { background: #f3f6fb; }
.isa-ref-table .isa-arithmetic td:first-child { background: #dfe7f2; color: #344f73; }
.isa-ref-table .isa-logic td { background: #f5f7f2; }
.isa-ref-table .isa-logic td:first-child { background: #e5ead8; color: #4f6331; }
.isa-ref-table .isa-shift td { background: #f4f6fa; }
.isa-ref-table .isa-shift td:first-child { background: #e3e8f3; color: #4c5f82; }
.isa-ref-table .isa-compare td { background: #f8f4f1; }
.isa-ref-table .isa-compare td:first-child { background: #ecdfd7; color: #705244; }
.isa-ref-table .isa-branch td,
.isa-ref-table .isa-jump td,
.isa-ref-table .isa-call td { background: #f7f5fb; }
.isa-ref-table .isa-branch td:first-child,
.isa-ref-table .isa-jump td:first-child,
.isa-ref-table .isa-call td:first-child { background: #e7e3f1; color: #554a76; }
.isa-ref-table .isa-stack td { background: #f8f5ee; }
.isa-ref-table .isa-stack td:first-child { background: #ede3cf; color: #6a532d; }

/* ── Code ── */
pre {
  max-width: 100%;
  overflow: auto; margin: 10px 0 18px;
  padding: 14px 16px; border-radius: 8px;
  background: var(--code-bg); color: var(--code-fg);
  font-family: "IBM Plex Mono", "Glass TTY VT220", "Perfect DOS VGA 437",
    "Px437 IBM VGA8", "Courier New", "Lucida Console", monospace;
  font-size: 14px; line-height: 1.6; letter-spacing: .025em;
  font-weight: 700;
  font-variant-ligatures: none;
  text-shadow: 0 0 6px rgba(255,176,0,.5);
}
.code-frame {
  position: relative;
  margin: 10px 0 18px;
  border-radius: 8px;
  background: var(--code-bg);
}
.code-frame pre {
  margin: 0 !important;
  padding-top: 42px;
}
.callout .code-frame {
  margin: 8px 0 0;
}
li .code-frame {
  margin: 6px 0;
}
.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: #dbe7ff;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.copy-code:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.copy-code:focus-visible {
  outline: 2px solid #8ec5ff;
  outline-offset: 2px;
}
.copy-code svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}
code {
  background: #eef2f7; color: #210533;
  border-radius: 4px; padding: 1px 4px; font-size: .92em;
  overflow-wrap: anywhere;
}
pre code {
  background: transparent; color: inherit; padding: 0; border-radius: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  font-variant-ligatures: none;
}

/* ── Kbd ── */
kbd {
  display: inline-block;
  border: 1px solid #c8d2df; border-bottom-width: 2px;
  background: #fff; color: #263750;
  border-radius: 5px; padding: 1px 6px; margin: 0 2px;
  font-size: 12px;
}

.foot {
  color: var(--muted); font-size: 12.5px;
  padding: 6px 0 24px;
}

/* ── Video placeholders ── */
.video-placeholder {
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: #f7fafc;
  margin: 18px 0;
  overflow: hidden;
}
.vp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #edf3fb;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vp-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
}
.vp-icon { font-size: 40px; line-height: 1; }
.vp-title { font-weight: 700; font-size: 14px; color: #38465f; }
.vp-hint { font-size: 12px; max-width: 480px; }
.vp-hint code { font-size: 11px; }

.game-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 28px;
}
.game-video-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(23,32,51,.08);
}
.game-video-card video,
.game-video-wide video {
  display: block;
  width: 100%;
  height: auto;
}
.game-video-wide {
  margin: 18px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.game-video-card figcaption,
.game-video-wide figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  background: #f7fafc;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body {
    font-size: 17px;
  }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }
  .game-video-grid { grid-template-columns: 1fr; }
  nav {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: auto;
    max-height: 100vh;
    overflow: visible;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(16,24,40,.08);
    font-size: 15.5px;
  }
  .nav-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    margin: -10px -12px 0;
    padding: 10px 12px;
    border-bottom-color: rgba(215,222,232,.72);
  }
  .nav-head::after {
    left: 12px;
    right: 12px;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Mobile: just the logo + hamburger — drop the "TARA Studio / SeNSE Lab" text.
     The logo is a wide wordmark, so let it FILL the row width left of the
     hamburger (width:100% of the flex brand). That makes it as large as it can
     be on one row; the desktop max-height cap is overridden. */
  .nav-brand > div { display: none; }
  .nav-brand { gap: 0; }
  nav img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 150px;
    margin: 0;
  }
  body.page-scrolled nav .nav-head,
  nav.menu-scrolled .nav-head {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  body.page-scrolled nav img,
  nav.menu-scrolled img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 120px;
    margin: 0;
  }
  nav .title {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  nav .subtitle {
    margin: 0;
    font-size: 13.5px;
  }
  body.page-scrolled nav .subtitle,
  nav.menu-scrolled .subtitle {
    margin: 0;
  }
  .nav-toggle {
    display: inline-flex;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    min-height: 48px;
    padding: 10px;
    order: 2;            /* push the hamburger to the far right */
    margin-left: auto;
  }
  .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-top: 10px;
    transition: max-height .2s ease, padding-top .2s ease;
  }
  .nav-group {
    grid-column: 1 / -1;
    margin: 0;
  }
  .nav-group-toggle {
    min-height: 42px;
    font-size: 12px;
  }
  .nav-group-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 0 0;
  }
  nav.js-ready:not(.open) .nav-links {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
  }
  nav.open .nav-links {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-top: 10px;
  }
  nav .section-label {
    grid-column: 1 / -1;
    margin: 8px 0 0;
  }
  nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 10px 12px 10px 28px;
    background: #f5f8fc;
    border: 1px solid #e3eaf3;
    font-size: 15.5px;
  }
  .nav-toggle-icon {
    width: 24px;
    gap: 5px;
  }
  .nav-toggle-icon span {
    height: 3px;
  }
  .nav-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  main {
    width: 100%;
    max-width: 100%;
    padding: 14px;
  }
  header, section {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    overflow-wrap: anywhere;
  }
  .hero-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .hero-logo {
    max-width: 320px;
  }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  .lede { font-size: 18px; }
  .pill { font-size: 14px; }
  main img,
  main video,
  main svg {
    max-width: 100% !important;
    height: auto;
  }
  .screenshot,
  .ss-grid img {
    width: 100%;
    max-width: 100% !important;
    height: auto;
  }
  figure {
    margin-left: 0;
    margin-right: 0;
  }
  table { font-size: 15px; }
  .grid, .ss-grid { grid-template-columns: 1fr; }
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    border-collapse: separate;
    border-spacing: 0;
  }
  .manual-ref-table,
  .isa-format-table,
  .isa-ref-table {
    overflow: visible;
  }
  table thead {
    display: none;
  }
  table tbody,
  table tr,
  table th,
  table td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
  }
  table tr {
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  table th,
  table td {
    border-width: 0 0 1px;
    padding: 9px 11px;
  }
  table tr > :last-child {
    border-bottom: 0;
  }
  table td:first-child,
  table th:first-child {
    font-weight: 850;
  }
  table img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .code-frame pre {
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  body { font-size: 18px; }
  .nav-links { grid-template-columns: 1fr; }
  .nav-group-items { grid-template-columns: 1fr; }
  nav img,
  body.page-scrolled nav img,
  nav.menu-scrolled img {
    max-width: 96px;
  }
  nav .subtitle {
    font-size: 12px;
  }
  main { padding: 10px; }
  header, section {
    padding: 14px;
    border-radius: 8px;
  }
  .hero-head { padding-bottom: 14px; }
  nav a { font-size: 16px; }
  .code-frame pre { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-head,
  .nav-head::after,
  .nav-brand,
  nav img,
  nav .title,
  nav .subtitle {
    transition: none;
  }
}


/* Memory map component */
/* ── Proportional bar ── */
.mm-propbar {
  display: flex;
  height: 9px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.mpb-code    { background: #4F6F9F; flex: 1024; }
.mpb-data    { background: #6F94A0; flex: 256; }
.mpb-stack   { background: #C99A3E; flex: 241; }
.mpb-io      { background: #A97863; flex: 15; }
.mpb-display { background: #6E7FA8; flex: 512; }

/* ── Card container ── */
.memmap {
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(45,64,91,0.13);
  border-top: none;
  box-shadow: 0 4px 16px rgba(28,44,67,0.08), 0 1px 4px rgba(28,44,67,0.05);
  margin: 0 0 28px;
  font-size: 13px;
}

/* ── Dark header bar ── */
.mm-header {
  background: linear-gradient(135deg, #20304A 0%, #314762 100%);
  color: rgba(255,255,255,0.9);
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mm-header-title {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.mm-header-range {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

/* ── Rows ── */
.memmap-row {
  display: grid;
  grid-template-columns: 152px 76px 1fr;
  align-items: stretch;
  border-bottom: 1px solid rgba(45,64,91,0.075);
  transition: filter 0.12s ease;
}
.memmap-row:last-child { border-bottom: none; }
.memmap-row:hover { filter: brightness(0.985) saturate(1.03); }

/* ── Address block ── */
.mm-addr {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
  font-size: 13.5px;
  font-weight: 700;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 16px 14px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  position: relative;
}
.mm-addr::after {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: rgba(255,214,122,0.48);
}
.mm-addr-sep {
  font-size: 11px;
  opacity: 0.45;
  letter-spacing: 0;
  font-weight: 400;
  margin: 1px 0;
}

/* ── Size chip ── */
.mm-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-left: 1px solid rgba(45,64,91,0.075);
  border-right: 1px solid rgba(45,64,91,0.075);
}
.mm-size-num {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
}
.mm-size-unit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.65;
  line-height: 1;
}

/* ── Description ── */
.mm-desc {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.mm-desc-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mm-icon { font-size: 15px; line-height: 1; }
.mm-desc-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.78;
}

/* ── TARA-inspired memory region palettes ── */
/* Code — soft navy */
.mm-code { background: #F2F6FB; color: #223654; }
.mm-code .mm-addr  { background: linear-gradient(160deg,#405B82,#5E789C); }
.mm-code .mm-size  { background: #E4ECF5; color: #365577; }

/* Data — muted teal-blue */
.mm-data { background: #F2F8F8; color: #284950; }
.mm-data .mm-addr  { background: linear-gradient(160deg,#527C86,#759BA3); }
.mm-data .mm-size  { background: #E3EFF0; color: #486E76; }

/* Stack — pale amber */
.mm-stack { background: #FBF7EE; color: #5E4520; }
.mm-stack .mm-addr { background: linear-gradient(160deg,#A67A2F,#C49A4A); }
.mm-stack .mm-size { background: #F3E8CC; color: #846424; }

/* I/O — warm neutral */
.mm-io { background: #F8F4F1; color: #604035; }
.mm-io .mm-addr  { background: linear-gradient(160deg,#8D6759,#A77F6E); }
.mm-io .mm-size  { background: #EFE2DB; color: #785649; }

/* Display — quiet blue-violet */
.mm-display { background: #F4F6FA; color: #303A57; }
.mm-display .mm-addr  { background: linear-gradient(160deg,#5D6D91,#7C8BAC); }
.mm-display .mm-size  { background: #E7EBF4; color: #566589; }

/* responsive */
@media (max-width: 640px) {
  .memmap-row { grid-template-columns: 116px 60px 1fr; }
  .mm-addr { font-size: 11.5px; padding: 12px 10px 12px 14px; }
  .mm-size-num { font-size: 14px; }
  .mm-desc { padding: 10px 12px; }
  .mm-desc-title { font-size: 12.5px; }
  .mm-desc-body { font-size: 11px; }
}

/* FPGA interconnect diagram */
.nm{font:600 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#172033}
.sub{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#667085}
.lbl{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#3a4150;paint-order:stroke;stroke:#fff;stroke-width:3px}
.lk{stroke:#7a1e2b;stroke-width:2}
.lkt{stroke:#167c80;stroke-width:2}

.fpga-diagram-frame {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  margin: 16px 0 8px;
}
.fpga-diagram {
  width: 100%;
  height: auto;
}

.manual-intro-card,
.fpga-intro-card {
  margin: 12px 0 20px;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fb 100%);
  box-shadow: 0 6px 20px rgba(23,32,51,.09);
}

.manual-intro-card p:last-child,
.fpga-intro-card p:last-child {
  margin-bottom: 0;
}

.manual-intro-photo,
.fpga-intro-photo {
  float: right;
  width: min(42%, 360px);
  margin: 0 0 14px 22px;
  padding: 8px;
  border: 1px solid #d4dce8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23,32,51,.14);
}

.manual-intro-photo img,
.fpga-intro-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 7px;
}

.manual-intro-photo.logo-card img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: 8px;
}

.manual-intro-photo.tara-photo {
  width: min(36%, 260px);
}

.manual-intro-photo.tara-photo img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .manual-intro-card,
  .fpga-intro-card {
    padding: 16px;
  }

  .manual-intro-photo,
  .fpga-intro-photo {
    float: none;
    width: 100%;
    margin: 0 0 16px;
  }
}

/* ── Mobile scroll-progress bar ───────────────────────────────────────────────
   A thin bar pinned to the very top of the viewport whose width tracks the
   fraction of the page scrolled. Shown on small screens only (on desktop the
   sticky sidebar already gives a sense of place). Width is set from JS. */
#scroll-progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--blue), var(--teal), #f4b942);
  box-shadow: 0 0 6px rgba(36,84,166,.4);
  pointer-events: none;
  transition: width .08s linear;
}
@media (max-width: 900px) {
  #scroll-progress { display: block; }
}