/* MEMO documentation theme
   Visual identity from the MEMO introduction deck:
   night-navy chrome, teal accent, ink-on-paper text, soft wash cards,
   mono teal package names. Shared across the memo, memo-tools, and
   memo-architect documentation sites. */

:root {
  --memo-night: #0b1e2d;
  --memo-night-2: #132d42;
  --memo-ink: #082744;
  --memo-muted: #5c7188;
  --memo-paper: #fbfcfd;
  --memo-wash: #eef4f7;
  --memo-line: #d5e0e7;
  --memo-teal: #2dd4a8;
  --memo-teal-deep: #168c72;
  --memo-teal-soft: #e4faf7;
  --memo-blue: #438ed0;
  --memo-blue-soft: #eaf4fd;
  --memo-purple: #8971dc;
  --memo-purple-soft: #f0edff;
  --memo-orange: #ef9b51;
  --memo-orange-soft: #fff3e8;
  --memo-red: #e05d6f;
  --memo-red-soft: #fff0ef;
  --memo-code-bg: #06243d;
  --memo-code-ink: #cfe8ff;
  --memo-radius: 12px;
}

/* ── Palette mapping ─────────────────────────────────────────────────── */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--memo-night);
  --md-primary-fg-color--dark: var(--memo-night);
  --md-primary-fg-color--light: var(--memo-night-2);
  --md-accent-fg-color: var(--memo-teal-deep);
  --md-typeset-a-color: var(--memo-teal-deep);
  --md-default-bg-color: var(--memo-paper);
  --md-code-bg-color: var(--memo-wash);
  --md-typeset-table-color: var(--memo-line);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--memo-night);
  --md-primary-fg-color--dark: var(--memo-night);
  --md-primary-fg-color--light: var(--memo-night-2);
  --md-accent-fg-color: var(--memo-teal);
  --md-typeset-a-color: var(--memo-teal);
  --md-default-bg-color: #0d2231;
  --md-code-bg-color: rgba(6, 36, 61, 0.72);
}

/* ── Chrome: header and tabs match the deck's night navy ────────────── */

.md-header { background: var(--memo-night); }
.md-header--shadow { box-shadow: 0 1px 0 rgba(45, 212, 168, 0.25), 0 8px 24px rgba(2, 31, 54, 0.18); }
.md-tabs { background: var(--memo-night-2); border-bottom: 1px solid rgba(45, 212, 168, 0.20); }
.md-tabs__link { font-weight: 750; letter-spacing: 0.01em; }
.md-tabs__link--active { color: var(--memo-teal); font-weight: 850; }
.md-header__topic:first-child { font-weight: 800; letter-spacing: -0.01em; }

/* Sidebar navigation uses the same teal selection language as Architect. */
.md-nav__link {
  margin-top: 0.12rem;
  padding: 0.34rem 0.48rem;
  border-radius: 8px;
  line-height: 1.35;
}
.md-nav__link:hover { color: var(--memo-teal-deep); background: rgba(45, 212, 168, 0.07); }
.md-nav__link--active {
  color: var(--memo-teal-deep) !important;
  background: var(--memo-teal-soft);
  font-weight: 850;
}
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--memo-teal) !important;
  background: rgba(45, 212, 168, 0.10);
}

/* ── Typography: tight display headings like the deck ────────────────── */

.md-typeset h1 {
  color: var(--memo-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.md-typeset { color: #263746; line-height: 1.68; }
.md-typeset p { margin-top: 0.8em; margin-bottom: 1em; }
.md-typeset h2 { color: var(--memo-ink); font-weight: 800; letter-spacing: -0.025em; }
.md-typeset h3 { color: var(--memo-ink); font-weight: 750; letter-spacing: -0.015em; }
.md-typeset a { font-weight: 700; text-underline-offset: 0.15em; }
.md-typeset a:hover { color: var(--memo-ink); }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #e8f1f8; }
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 { color: #e8f1f8; }

/* ── Inline code: teal chips, as the deck styles package names ───────── */

.md-typeset code {
  border-radius: 6px;
  background: var(--memo-teal-soft);
  color: var(--memo-teal-deep);
  padding: 0.1em 0.4em;
}
[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(45, 212, 168, 0.12);
  color: var(--memo-teal);
}

/* Code blocks keep neutral syntax colors on the standard panel */
.md-typeset pre {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
}
.md-typeset pre > code {
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: var(--memo-radius);
  padding: 0.75em 1em;
}

@media screen and (max-width: 76.1875em) {
  .md-typeset pre > code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ── Tables: wash header band, soft rounded frame ─────────────────────── */

.md-typeset table:not([class]) {
  border-radius: var(--memo-radius);
  border: 1px solid var(--memo-line);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--memo-wash);
  color: var(--memo-ink);
  font-weight: 750;
}
.md-typeset table:not([class]) tr:hover td { background: rgba(45, 212, 168, 0.045); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: rgba(216, 226, 233, 0.16);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(45, 212, 168, 0.08);
  color: #e8f1f8;
}

/* ── Admonitions: deck card styling ──────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--memo-radius);
  border-width: 0 0 0 4px;
  border-left-color: var(--memo-teal-deep);
  box-shadow: 0 6px 20px rgba(2, 31, 54, 0.08);
}
.md-typeset .admonition-title,
.md-typeset summary { background: rgba(45, 212, 168, 0.10); }
.md-typeset .admonition.warning, .md-typeset details.warning { border-left-color: var(--memo-orange); }
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary { background: var(--memo-orange-soft); }
.md-typeset .admonition.danger, .md-typeset details.danger { border-left-color: var(--memo-red); }
.md-typeset .danger > .admonition-title, .md-typeset .danger > summary { background: var(--memo-red-soft); }
.md-typeset .admonition.info, .md-typeset details.info { border-left-color: var(--memo-blue); }
.md-typeset .info > .admonition-title, .md-typeset .info > summary { background: var(--memo-blue-soft); }
[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title { background: rgba(239, 155, 81, 0.14); }
[data-md-color-scheme="slate"] .md-typeset .danger > .admonition-title { background: rgba(234, 107, 97, 0.14); }
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title { background: rgba(67, 142, 208, 0.14); }

/* ── Blockquotes: the deck's teal-rail callout ───────────────────────── */

.md-typeset blockquote {
  border-left: 4px solid var(--memo-teal);
  background: var(--memo-teal-soft);
  border-radius: 0 var(--memo-radius) var(--memo-radius) 0;
  padding: 0.6em 1em;
  color: var(--memo-ink);
}
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: rgba(45, 212, 168, 0.08);
  color: inherit;
}

/* ── Buttons and footer ──────────────────────────────────────────────── */

.md-typeset .md-button--primary {
  background-color: var(--memo-teal-deep);
  border-color: var(--memo-teal-deep);
}
.md-footer { background: var(--memo-night); }
.md-footer-meta { background: #071825; }

/* ── Landing-page composition ───────────────────────────────────────── */

.memo-hero {
  position: relative;
  overflow: hidden;
  margin: -0.3rem 0 2.6rem;
  padding: 2.8rem 3rem 3rem;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 94% 8%, rgba(45, 212, 168, 0.30), transparent 28%),
    radial-gradient(circle at 68% 100%, rgba(67, 142, 208, 0.30), transparent 34%),
    linear-gradient(135deg, var(--memo-night), var(--memo-night-2));
  box-shadow: 0 22px 48px rgba(2, 31, 54, 0.20);
}
.memo-hero::after {
  position: absolute;
  right: -5rem;
  bottom: -8rem;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(45, 212, 168, 0.45);
  border-radius: 50%;
  content: "";
}
.memo-hero > * { position: relative; z-index: 1; }
.memo-kicker {
  margin: 0 0 0.75rem;
  color: var(--memo-teal);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.md-typeset .memo-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.03;
}
.memo-hero > p:not(.memo-kicker):not(.memo-hero-path) {
  max-width: 44rem;
  margin: 1.15rem 0 0;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.6;
}
.memo-hero-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 1.6rem 0 0;
  font-size: 0.78rem;
  font-weight: 800;
}
.memo-hero-path span {
  padding: 0.34rem 0.58rem;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.memo-hero-path i { color: var(--memo-teal); font-size: 1rem; font-style: normal; }
.memo-card-grid,
.memo-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 2.4rem;
}
.memo-card-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.memo-card {
  min-height: 11.5rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--memo-line);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(12, 43, 73, 0.05);
}
.memo-card h3 { margin-top: 0; }
.memo-card p { color: var(--memo-muted); }
.memo-card ul {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  color: var(--memo-muted);
}
.memo-card li { margin: 0.34rem 0; line-height: 1.45; }
.memo-zoomable {
  display: block;
  position: relative;
  cursor: zoom-in;
}
.md-typeset .memo-presentation-graphic {
  display: block;
  width: 100%;
  margin: 1.6rem 0 2.2rem;
  border: 1px solid var(--memo-line);
  border-radius: 20px;
  background: var(--memo-paper);
  box-shadow: 0 18px 38px rgba(2, 31, 54, 0.10);
}
[data-md-color-scheme="slate"] .md-typeset .memo-presentation-graphic {
  border-color: rgba(216, 226, 233, 0.18);
  background: #f6f9fb;
}
.memo-zoomable img {
  display: block;
  border-radius: var(--memo-radius);
  transition: box-shadow .18s ease, transform .18s ease;
}
.memo-zoomable:hover img,
.memo-zoomable:focus-visible img {
  box-shadow: 0 12px 30px rgba(12, 43, 73, .18);
  transform: scale(1.01);
}
.md-content .memo-zoomable-image {
  cursor: zoom-in;
  border-radius: var(--memo-radius);
  transition: box-shadow .18s ease, transform .18s ease;
}
.md-content .memo-zoomable-image:hover,
.md-content .memo-zoomable-image:focus-visible {
  box-shadow: 0 12px 30px rgba(12, 43, 73, .18);
  outline: none;
  transform: scale(1.01);
}
.memo-image-dialog {
  width: min(96vw, 1500px);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}
.memo-image-dialog::backdrop { background: rgba(3, 18, 31, .74); }
.memo-image-dialog__content { position: relative; padding: 0.6rem; background: var(--memo-paper); }
.memo-image-dialog img { display: block; width: 100%; max-height: calc(94vh - 1.2rem); object-fit: contain; }
.memo-image-dialog button {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--memo-night);
  color: #fff;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}
.memo-card-teal { border-color: #9bded5; background: var(--memo-teal-soft); }
.memo-card-blue { border-color: #cce2f6; background: var(--memo-blue-soft); }
.memo-card-purple { border-color: #ddd5f6; background: var(--memo-purple-soft); }
.memo-card-orange { border-color: #f6dcc2; background: var(--memo-orange-soft); }
.memo-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memo-start-card {
  display: flex;
  min-height: 7.8rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--memo-line);
  border-radius: 14px;
  background: #fff;
  color: var(--memo-ink) !important;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.memo-start-card strong { color: var(--memo-teal-deep); }
.memo-start-card span { color: var(--memo-muted); }
.memo-start-card:hover {
  border-color: var(--memo-teal-deep);
  box-shadow: 0 10px 22px rgba(10,141,118,.13);
  transform: translateY(-2px);
}
[data-md-color-scheme="slate"] .memo-card,
[data-md-color-scheme="slate"] .memo-start-card { background: rgba(255,255,255,.04); }
[data-md-color-scheme="slate"] .memo-card p,
[data-md-color-scheme="slate"] .memo-start-card span { color: rgba(232,241,248,.72); }
[data-md-color-scheme="slate"] .memo-start-card { color: #e8f1f8 !important; }

@media screen and (max-width: 44.9375em) {
  .memo-hero { padding: 2rem 1.45rem 2.15rem; border-radius: 16px; }
  .memo-card-grid,
  .memo-card-grid-two,
  .memo-start-grid { grid-template-columns: 1fr; }
  .memo-card { min-height: 0; }
}

/* ── Layer map: a compact visual stack, not a diagramming canvas ─────── */

.memo-layer-map {
  position: relative;
  display: grid;
  gap: 0.7rem;
  margin: 2rem 0 2.3rem;
  padding: 1.15rem 1.15rem 1.15rem 2.6rem;
  border: 1px solid var(--memo-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f7fbfa);
}
.memo-layer-map::before {
  position: absolute;
  top: 2.7rem;
  bottom: 2.7rem;
  left: 2.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--memo-teal-deep), var(--memo-blue), var(--memo-purple), var(--memo-red), #59b875);
  content: "";
}
.memo-layer-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(12rem, 0.8fr);
  gap: 1rem;
  align-items: center;
  min-height: 5.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--memo-line);
  border-radius: 14px;
  background: #fff;
  color: var(--memo-ink) !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.memo-layer-step::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--memo-teal-deep);
  content: "";
}
.memo-layer-step:hover { transform: translateX(3px); box-shadow: 0 10px 20px rgba(12,43,73,.08); }
.memo-layer-number {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--memo-teal-deep);
  box-shadow: 0 0 0 1px #9bded5;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}
.memo-layer-copy { display: grid; gap: 0.18rem; }
.memo-layer-copy strong { font-size: 1rem; letter-spacing: -0.01em; }
.memo-layer-copy em { color: var(--memo-muted); font-size: 0.84rem; font-style: normal; line-height: 1.35; }
.memo-layer-examples { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.memo-layer-examples code { font-size: 0.68rem; white-space: nowrap; }
.layer-operational::before, .layer-operational .memo-layer-number { background: #438ed0; }
.layer-operational .memo-layer-number { box-shadow: 0 0 0 1px #acd0ec; }
.layer-system::before, .layer-system .memo-layer-number { background: #5f84b1; }
.layer-system .memo-layer-number { box-shadow: 0 0 0 1px #b5c9df; }
.layer-requirements::before, .layer-requirements .memo-layer-number { background: #0a8d76; }
.layer-functions::before, .layer-functions .memo-layer-number { background: #8971dc; }
.layer-functions .memo-layer-number { box-shadow: 0 0 0 1px #ddd5f6; }
.layer-architecture::before, .layer-architecture .memo-layer-number { background: #438ed0; }
.layer-implementation::before, .layer-implementation .memo-layer-number { background: #536f8f; }
.layer-implementation .memo-layer-number { box-shadow: 0 0 0 1px #becbd8; }
.layer-risk::before, .layer-risk .memo-layer-number { background: #ea6b61; }
.layer-risk .memo-layer-number { box-shadow: 0 0 0 1px #f3c9c6; }
.layer-assurance::before, .layer-assurance .memo-layer-number { background: #59b875; }
.layer-assurance .memo-layer-number { box-shadow: 0 0 0 1px #cfeccf; }
.memo-review-thread {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.25rem 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid #9bded5;
  border-radius: 14px;
  background: var(--memo-teal-soft);
  font-size: 0.84rem;
  font-weight: 750;
}
.memo-review-thread span { padding: 0.25rem 0.45rem; border-radius: 7px; background: rgba(255,255,255,.72); }
.memo-review-thread i { color: var(--memo-teal-deep); font-size: 1rem; font-style: normal; }
[data-md-color-scheme="slate"] .memo-layer-map { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.025); }
[data-md-color-scheme="slate"] .memo-layer-step { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.04); color: #e8f1f8 !important; }
[data-md-color-scheme="slate"] .memo-layer-copy em { color: rgba(232,241,248,.7); }
[data-md-color-scheme="slate"] .memo-review-thread { background: rgba(45,212,168,.08); }

@media screen and (max-width: 44.9375em) {
  .memo-layer-map { padding-left: 1.95rem; }
  .memo-layer-map::before { left: 1.62rem; }
  .memo-layer-step { grid-template-columns: 2.45rem minmax(0, 1fr); gap: 0.65rem; }
  .memo-layer-examples { grid-column: 2; justify-content: flex-start; }
}

/* ── Tutorial: a simple, concrete device before ontology depth ───────── */

.memo-tutorial-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(13rem, .55fr);
  gap: 1.4rem;
  align-items: stretch;
  margin: 1.1rem 0 1.25rem;
  padding: 1.65rem;
  border: 1px solid #b9d8e8;
  border-radius: 20px;
  background: linear-gradient(125deg, #eaf4fd, #f7fdfb 62%, #e3faf3);
}
.memo-tutorial-overview h2 { margin: 0; color: var(--memo-ink); }
.memo-tutorial-overview p:last-child { max-width: 38rem; margin-bottom: 0; color: var(--memo-muted); }
.memo-device-card {
  position: relative;
  display: grid;
  min-height: 10.5rem;
  padding: 1.05rem 1.15rem;
  border: 5px solid #12384d;
  border-radius: 23px;
  background: linear-gradient(160deg, #193f56, #092638);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.13), 0 14px 24px rgba(2,31,54,.16);
  color: #fff;
  align-content: space-between;
}
.memo-device-card::after {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--memo-teal);
  box-shadow: 0 0 0 4px rgba(45,212,168,.13);
  content: "";
}
.memo-device-label { color: rgba(255,255,255,.64); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.memo-device-card strong { font-size: 1.26rem; line-height: 1.08; }
.memo-device-display { justify-self: start; padding: .32rem .48rem; border-radius: 5px; background: #dff7ee; color: #063527; font-family: var(--md-code-font-family); font-size: .92rem; font-weight: 800; }
.memo-device-alert { position: absolute; right: 1rem; bottom: 1.05rem; color: #ff9b92; font-size: .69rem; font-weight: 900; letter-spacing: .08em; }
.memo-tutorial-flow {
  display: flex;
  gap: .45rem;
  align-items: center;
  margin: 0 0 2.3rem;
  padding: 1rem;
  border: 1px solid var(--memo-line);
  border-radius: 16px;
  background: #fff;
}
.memo-tutorial-flow > div { flex: 1 1 0; min-width: 0; }
.memo-tutorial-flow span { display: block; margin-bottom: .22rem; color: var(--memo-teal-deep); font-family: var(--md-code-font-family); font-size: .67rem; font-weight: 900; }
.memo-tutorial-flow strong { display: block; color: var(--memo-ink); font-size: .82rem; line-height: 1.25; }
.memo-tutorial-flow small { display: block; margin-top: .2rem; color: var(--memo-muted); font-size: .7rem; line-height: 1.3; }
.memo-tutorial-flow i { color: var(--memo-teal-deep); font-size: 1.1rem; font-style: normal; }
.memo-trace-strip {
  display: flex;
  gap: .55rem;
  align-items: stretch;
  margin: 1.35rem 0 1.6rem;
  padding: 1rem;
  border-radius: 16px;
  background: var(--memo-wash);
}
.memo-trace-strip span { flex: 1 1 0; min-width: 0; padding: .72rem .78rem; border-radius: 10px; font-size: .67rem; line-height: 1.35; }
.memo-trace-strip strong { display: block; margin-top: .2rem; font-size: .78rem; }
.memo-trace-need { background: var(--memo-purple-soft); color: #46358f; }
.memo-trace-requirement { background: var(--memo-blue-soft); color: #17557f; }
.memo-trace-evidence { background: var(--memo-teal-soft); color: #07604f; }
.memo-trace-strip i { align-self: center; color: var(--memo-muted); font-size: .67rem; font-style: normal; white-space: nowrap; }
.memo-requirement-craft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin: 1.2rem 0;
}
.memo-requirement-craft > div { padding: 1rem 1.1rem; border-radius: 13px; }
.memo-requirement-craft > div:first-child { border: 1px solid #cce2f6; background: var(--memo-blue-soft); color: #17557f; }
.memo-requirement-craft > div:last-child { border: 1px solid #9bded5; background: var(--memo-teal-soft); color: #07604f; }
.memo-requirement-craft span { display: block; margin-bottom: .4rem; font-family: var(--md-code-font-family); font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.memo-requirement-craft strong { font-size: .84rem; line-height: 1.42; }
.memo-model-stages {
  display: flex;
  gap: .55rem;
  align-items: stretch;
  margin: 1.25rem 0 1.6rem;
  padding: .85rem;
  border: 1px solid var(--memo-line);
  border-radius: 17px;
  background: var(--memo-wash);
}
.memo-model-stages > div { flex: 1 1 0; min-width: 0; padding: .8rem; border-radius: 11px; }
.memo-model-stages span { display: inline-grid; width: 1.25rem; height: 1.25rem; margin-bottom: .38rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.72); font-family: var(--md-code-font-family); font-size: .66rem; font-weight: 850; }
.memo-model-stages strong { display: block; font-size: .78rem; line-height: 1.25; }
.memo-model-stages small { display: block; margin-top: .24rem; font-size: .67rem; line-height: 1.32; }
.memo-model-stages i { align-self: center; color: var(--memo-muted); font-size: .85rem; font-style: normal; }
.memo-stage-goal { background: var(--memo-purple-soft); color: #4c3a98; }
.memo-stage-operational { background: var(--memo-blue-soft); color: #17557f; }
.memo-stage-function { background: var(--memo-orange-soft); color: #88501f; }
.memo-stage-evidence { background: var(--memo-teal-soft); color: #07604f; }
[data-md-color-scheme="slate"] .memo-trace-strip { background: rgba(255,255,255,.045); }
[data-md-color-scheme="slate"] .memo-requirement-craft > div:first-child { border-color: rgba(67,142,208,.35); background: rgba(67,142,208,.12); }
[data-md-color-scheme="slate"] .memo-requirement-craft > div:last-child { border-color: rgba(45,212,168,.35); background: rgba(45,212,168,.1); }
[data-md-color-scheme="slate"] .memo-model-stages { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.035); }

/* SysML v2 has no bundled Pygments lexer.  The MkDocs formatter supplies these
   semantic token classes so source retains an editor-like visual hierarchy. */
.sysml-highlight pre { border: 1px solid #16435e; background: #06243d; box-shadow: 0 10px 22px rgba(2,31,54,.12); }
.sysml-highlight pre > code { display: block; background: transparent; color: #d9eaf4; }
.sysml-highlight pre > code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sysml-highlight .sysml-comment { color: #7196a9; font-style: italic; }
.sysml-highlight .sysml-keyword { color: #82caff; font-weight: 700; }
.sysml-highlight .sysml-type { color: #7eead0; font-weight: 700; }
.sysml-highlight .sysml-relation { color: #d6a8ff; font-weight: 700; }
.sysml-highlight .sysml-operator { color: #ffcf73; font-weight: 800; }
.sysml-highlight .sysml-string { color: #a9dc98; }
.sysml-highlight .sysml-number { color: #ffb86b; }

/* ── Mental model: an argument, not a process diagram ───────────────── */

.memo-argument-map {
  display: flex;
  gap: .55rem;
  align-items: stretch;
  margin: 1.25rem 0 1.1rem;
  padding: 1rem;
  border: 1px solid var(--memo-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #f7fbfd, #f5fcf9);
}
.memo-argument-map > div { flex: 1 1 0; min-width: 0; padding: .9rem; border-radius: 12px; }
.memo-argument-map span { display: block; margin-bottom: .45rem; font-size: .66rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.memo-argument-map strong { display: block; font-size: .92rem; line-height: 1.2; }
.memo-argument-map small { display: block; margin-top: .32rem; color: var(--memo-muted); font-size: .72rem; line-height: 1.35; }
.memo-argument-map i { align-self: center; color: var(--memo-teal-deep); font-style: normal; }
.argument-intent { background: var(--memo-purple-soft); color: #4c3a98; }
.argument-obligation { background: var(--memo-blue-soft); color: #1e5d88; }
.argument-design { background: var(--memo-orange-soft); color: #88501f; }
.argument-proof { background: var(--memo-teal-soft); color: #08634f; }
.memo-slice-example { display: flex; gap: .42rem; align-items: stretch; margin: 1.2rem 0 1.7rem; padding: 1rem; border-radius: 15px; background: #edf3f6; }
.memo-slice-example span { display: flex; flex: 1 1 0; min-width: 0; min-height: 7.2rem; flex-direction: column; justify-content: center; padding: .7rem; border-radius: 10px; font-size: .72rem; line-height: 1.35; }
.memo-slice-example b { display: block; margin-bottom: .2rem; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; }
.memo-slice-example i { align-self: center; color: var(--memo-muted); font-style: normal; }
.slice-need { background: #e5ddff; color: #4c3a98; }
.slice-requirement { background: #dceefa; color: #1e5d88; }
.slice-design { background: #ffead7; color: #88501f; }
.slice-proof { background: #d6f4ee; color: #08634f; }

/* Project-model operations: full-width rows preserve technical readability. */
.memo-model-steps {
  display: grid;
  gap: .75rem;
  margin: 1.15rem 0 2rem;
}
.memo-model-step {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--memo-line);
  border-left-width: 5px;
  border-radius: 14px;
  background: var(--memo-paper);
  box-shadow: 0 8px 20px rgba(12, 43, 73, 0.05);
}
.memo-model-step .memo-step-number {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 850;
}
.memo-model-step h3 { margin: 0 0 .28rem; font-size: 1rem; }
.memo-model-step p { margin: 0; color: var(--memo-muted); font-size: .78rem; line-height: 1.55; }
.memo-model-step > a { white-space: nowrap; font-size: .72rem; font-weight: 800; }
.step-scope { border-left-color: var(--memo-purple); background: linear-gradient(90deg, var(--memo-purple-soft), var(--memo-paper) 30%); }
.step-scope .memo-step-number { background: #ddd5f6; color: #4c3a98; }
.step-elements { border-left-color: var(--memo-blue); background: linear-gradient(90deg, var(--memo-blue-soft), var(--memo-paper) 30%); }
.step-elements .memo-step-number { background: #cce2f6; color: #17557f; }
.step-relations { border-left-color: var(--memo-teal); background: linear-gradient(90deg, var(--memo-teal-soft), var(--memo-paper) 30%); }
.step-relations .memo-step-number { background: #bce9df; color: #07604f; }
[data-md-color-scheme="slate"] .memo-model-step {
  border-color: rgba(216,226,233,.16);
  border-left-color: currentColor;
  background: rgba(255,255,255,.035);
}
[data-md-color-scheme="slate"] .memo-model-step p { color: rgba(232,241,248,.7); }

/* ── Architecture map: layers, internal vocabulary, cross-layer links ── */

.memo-architecture-map { margin: 1.6rem 0 2.2rem; padding: 1.1rem; border: 1px solid var(--memo-line); border-radius: 20px; background: linear-gradient(160deg, #f8fbfd, #f5fcf9); }
.memo-architecture-layer { padding: 1rem 1.1rem; border: 1px solid var(--memo-line); border-radius: 14px; background: #fff; }
.memo-architecture-layer header { display: flex; gap: .7rem; align-items: center; }
.memo-architecture-layer header > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 8px; background: var(--memo-blue-soft); color: #17557f; font-family: var(--md-code-font-family); font-size: .7rem; font-weight: 850; }
.memo-architecture-layer header strong { display: block; color: var(--memo-ink); font-size: .96rem; }
.memo-architecture-layer header small { display: block; margin-top: .12rem; color: var(--memo-muted); font-size: .75rem; }
.memo-architecture-elements { display: grid; gap: .38rem; margin: .85rem 0 0; }
.memo-architecture-elements b { display: block; padding: .38rem .5rem; border-radius: 7px; background: var(--memo-blue-soft); color: #17557f; font-family: var(--md-code-font-family); font-size: .72rem; }
.memo-architecture-bridge { display: flex; gap: .35rem; align-items: center; justify-content: center; min-height: 2rem; color: var(--memo-muted); font-size: .68rem; font-weight: 750; }
.memo-architecture-bridge i { color: var(--memo-teal-deep); font-size: 1.1rem; font-style: normal; }
.layer-operation { border-left: 5px solid var(--memo-purple); }
.layer-operation .memo-architecture-elements b { background: var(--memo-purple-soft); color: #4c3a98; }
.layer-function { border-left: 5px solid var(--memo-teal-deep); }
.layer-function .memo-architecture-elements b { background: var(--memo-teal-soft); color: #07604f; }
.layer-logical { border-left: 5px solid var(--memo-blue); }
.layer-realization { border-left: 5px solid var(--memo-orange); }
.layer-realization .memo-architecture-elements b { background: var(--memo-orange-soft); color: #88501f; }
[data-md-color-scheme="slate"] .memo-architecture-map { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.025); }
[data-md-color-scheme="slate"] .memo-architecture-layer { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.04); }
[data-md-color-scheme="slate"] .memo-architecture-layer header strong { color: #e8f1f8; }
[data-md-color-scheme="slate"] .memo-architecture-layer header small, [data-md-color-scheme="slate"] .memo-architecture-layer p { color: rgba(232,241,248,.68); }
[data-md-color-scheme="slate"] .memo-tutorial-overview { border-color: rgba(67,142,208,.35); background: linear-gradient(125deg, rgba(67,142,208,.13), rgba(45,212,168,.08)); }
[data-md-color-scheme="slate"] .memo-tutorial-overview h2,
[data-md-color-scheme="slate"] .memo-tutorial-flow strong { color: #e8f1f8; }
[data-md-color-scheme="slate"] .memo-tutorial-overview p:last-child,
[data-md-color-scheme="slate"] .memo-tutorial-flow small { color: rgba(232,241,248,.7); }
[data-md-color-scheme="slate"] .memo-tutorial-flow { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.035); }
[data-md-color-scheme="slate"] .memo-argument-map { border-color: rgba(216,226,233,.16); background: rgba(255,255,255,.035); }
[data-md-color-scheme="slate"] .memo-argument-map small { color: rgba(232,241,248,.68); }

@media screen and (max-width: 44.9375em) {
  .memo-tutorial-overview { grid-template-columns: 1fr; padding: 1.15rem; }
  .memo-device-card { min-height: 8.5rem; }
  .memo-tutorial-flow { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .5rem; }
  .memo-tutorial-flow i { display: none; }
  .memo-trace-strip { display: grid; grid-template-columns: 1fr; }
  .memo-trace-strip i { display: none; }
  .memo-requirement-craft { grid-template-columns: 1fr; }
  .memo-model-stages { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .memo-model-stages i { display: none; }
  .memo-argument-map { display: grid; grid-template-columns: 1fr 1fr; }
  .memo-argument-map i { display: none; }
  .memo-slice-example { display: grid; grid-template-columns: 1fr 1fr; }
  .memo-slice-example i { display: none; }
  .memo-model-step { grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; }
  .memo-model-step > a { grid-column: 2; white-space: normal; }
}

/* ── Ontology reference diagrams ────────────────────────────────────── */

.memo-ontology-layers > p { margin: 0; }

.memo-model-axis {
  display: grid;
  grid-template-columns: 1.45fr .9fr;
  gap: .8rem;
  margin: 1rem 0 2rem;
}
.memo-model-axis > div {
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--memo-line);
  border-radius: 14px;
}
.memo-axis-horizontal { border-left: 5px solid var(--memo-blue) !important; background: var(--memo-blue-soft); }
.memo-axis-vertical { border-left: 5px solid var(--memo-teal-deep) !important; background: var(--memo-teal-soft); }
.memo-model-axis span { display: block; margin-bottom: .35rem; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.memo-model-axis p { margin: .35rem 0 0; color: var(--memo-muted); font-size: .75rem; line-height: 1.45; }
.memo-element-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0;
  padding: .9rem;
  border: 1px solid var(--memo-line);
  border-radius: 13px;
  background: var(--memo-wash);
}
.memo-ontology-layers {
  display: grid;
  gap: .7rem;
  margin: 1.15rem 0 1.4rem;
}
.memo-ontology-layer {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem 10rem minmax(0,1fr);
  gap: .9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--memo-line);
  border-left: 6px solid var(--memo-blue);
  border-radius: 14px;
  background: #fff;
  color: var(--memo-ink) !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.memo-ontology-layer:hover { box-shadow: 0 10px 22px rgba(12,43,73,.1); transform: translateX(3px); }
.memo-ontology-layer > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--memo-blue-soft);
  color: #17557f;
  font-family: var(--md-code-font-family);
  font-size: .68rem;
  font-weight: 900;
}
.memo-ontology-layer h3 { margin: 0; font-size: .95rem; }
.memo-ontology-layer p { margin: 0; color: var(--memo-muted); font-size: .76rem; line-height: 1.5; }
.ontology-operational { border-left-color: var(--memo-purple); }
.ontology-operational > span { background: var(--memo-purple-soft); color: #4c3a98; }
.ontology-functional { border-left-color: var(--memo-teal-deep); }
.ontology-functional > span { background: var(--memo-teal-soft); color: #07604f; }
.ontology-logical { border-left-color: var(--memo-blue); }
.ontology-realization { border-left-color: var(--memo-orange); }
.ontology-realization > span { background: var(--memo-orange-soft); color: #88501f; }
.memo-assurance-grid,
.memo-rule-families {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
  margin: 1rem 0 1.4rem;
}
.memo-assurance-grid > div,
.memo-rule-families > div {
  padding: .9rem;
  border: 1px solid #bce9df;
  border-radius: 12px;
  background: var(--memo-teal-soft);
  color: #07604f;
  font-size: .74rem;
  line-height: 1.5;
}
.memo-assurance-grid code { font-size: .65rem; }
.memo-semantic-thread {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: 1.1rem 0;
  padding: .85rem;
  border: 1px solid var(--memo-line);
  border-radius: 15px;
  background: var(--memo-wash);
}
.memo-semantic-thread span { flex: 1 1 0; min-width: 0; padding: .7rem; border-radius: 9px; background: #fff; }
.memo-semantic-thread b { display: block; margin-bottom: .25rem; color: var(--memo-ink); font-size: .76rem; }
.memo-semantic-thread code { font-size: .62rem; }
.memo-semantic-thread i { color: var(--memo-teal-deep); font-style: normal; }

.memo-view-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .55rem;
  align-items: stretch;
  margin: 1rem 0 1.8rem;
}
.memo-view-flow > div {
  padding: 1rem;
  border: 1px solid var(--memo-line);
  border-radius: 14px;
  background: #fff;
}
.memo-view-flow > div:nth-of-type(2) { background: var(--memo-teal-soft); border-color: #bce9df; }
.memo-view-flow span {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  margin-bottom: .55rem;
  place-items: center;
  border-radius: 50%;
  background: var(--memo-wash);
  color: var(--memo-teal-deep);
  font-family: var(--md-code-font-family);
  font-size: .66rem;
  font-weight: 900;
}
.memo-view-flow p { margin: .3rem 0 0; color: var(--memo-muted); font-size: .72rem; line-height: 1.45; }
.memo-view-flow > i,
.memo-view-flow > p { align-self: center; margin: 0; color: var(--memo-teal-deep); font-style: normal; }
.memo-view-flow > p i { color: var(--memo-teal-deep); font-style: normal; }
.memo-viewpoint-catalog {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .7rem;
  margin: 1rem 0 1.7rem;
}
.memo-viewpoint-catalog > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--memo-line);
  border-radius: 14px;
  background: linear-gradient(145deg,#fff,var(--memo-teal-soft));
}
.memo-viewpoint-catalog h3 { margin: 0 0 .45rem; font-size: .9rem; }
.memo-viewpoint-catalog p { margin: 0; color: var(--memo-muted); font-size: .73rem; line-height: 1.55; }
.memo-dual-view {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .7rem;
  margin: 1rem 0 1.7rem;
}
.memo-dual-view > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--memo-line);
  border-left: 5px solid var(--memo-teal-deep);
  border-radius: 13px;
  background: #fff;
  color: var(--memo-muted);
  font-size: .78rem;
}

.memo-rule-families > div {
  border-color: #ddd5f6;
  background: var(--memo-purple-soft);
  color: #4c3a98;
}
[data-md-color-scheme="slate"] .memo-ontology-layer,
[data-md-color-scheme="slate"] .memo-view-flow > div,
[data-md-color-scheme="slate"] .memo-viewpoint-catalog > div,
[data-md-color-scheme="slate"] .memo-dual-view > div {
  border-color: rgba(216,226,233,.16);
  background: rgba(255,255,255,.04);
  color: #e8f1f8 !important;
}
[data-md-color-scheme="slate"] .memo-ontology-layer p,
[data-md-color-scheme="slate"] .memo-view-flow p,
[data-md-color-scheme="slate"] .memo-viewpoint-catalog p { color: rgba(232,241,248,.7); }
[data-md-color-scheme="slate"] .memo-model-axis > div,
[data-md-color-scheme="slate"] .memo-element-strip,
[data-md-color-scheme="slate"] .memo-semantic-thread {
  border-color: rgba(216,226,233,.16);
  background: rgba(255,255,255,.035);
}

@media screen and (max-width: 60em) {
  .memo-model-axis { grid-template-columns: 1fr; }
  .memo-ontology-layer { grid-template-columns: 2.7rem minmax(0,1fr); }
  .memo-ontology-layer p { grid-column: 2; }
  .memo-assurance-grid, .memo-rule-families { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memo-view-flow { display: flex; flex-direction: column; }
  .memo-view-flow > i,
  .memo-view-flow > p { transform: rotate(90deg); }
}

@media screen and (max-width: 44.9375em) {
  .memo-viewpoint-catalog,
  .memo-dual-view,
  .memo-assurance-grid,
  .memo-rule-families { grid-template-columns: 1fr; }
  .memo-semantic-thread { display: grid; grid-template-columns: 1fr; }
  .memo-semantic-thread i { display: none; }
}