/* The page owns the section; the walkthrough owns its warm shell and console. */
.memory-demo {
  --mm-line: var(--line, #deddd6);
  --mm-muted: var(--muted, #66665e);
  --mm-paper: #fdfcf8;
  --mm-console: #2d302a;
  container: mm-memory / inline-size;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--mm-line);
  border-radius: 16px;
  background: var(--page, #f7f6f2);
  color: var(--ink, #242421);
  font-family: var(--font-body, Inter, sans-serif);
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 12px 36px #24242106;
}
.memory-demo,
.memory-demo * { box-sizing: border-box; }
.memory-demo p,
.memory-demo h4,
.memory-demo pre { margin: 0; }
.memory-demo button {
  appearance: none;
  min-height: 44px;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.memory-demo :focus-visible {
  outline: 2px solid #53634b;
  outline-offset: 4px;
}
.mm-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 18px 24px;
  color: var(--mm-muted);
  font-size: 12px;
}
.mm-wordmark {
  color: var(--ink, #242421);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.mm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-inline: 20px;
  padding: 5px;
  border: 1px solid var(--mm-line);
  border-radius: 12px;
  background: #eeede6;
}
.mm-steps button {
  min-width: 0;
  min-height: 48px;
  border: 1px solid transparent;
  padding: 11px 16px;
  background: transparent;
  color: var(--mm-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  text-wrap: balance;
}
.mm-steps button:hover { color: var(--ink, #242421); background: #f5f4ee; }
.mm-steps button[aria-pressed="true"] {
  border-color: #b9bdb0;
  background: var(--mm-paper);
  color: var(--ink, #242421);
  font-weight: 500;
  box-shadow: 0 1px 3px #24242108;
}
.mm-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 28px 24px;
}
.mm-replay-dialog {
  width: min(1320px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--mm-line);
  border-radius: 16px;
  background: var(--mm-paper);
  color: var(--ink, #242421);
}
.mm-replay-dialog::backdrop { background: #171a16bf; }
html:has(.mm-replay-dialog[open]) { overflow: hidden; }
.mm-replay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}
.mm-replay-head h4 { font: 400 28px/1.2 var(--font-display); letter-spacing: -.02em; }
.mm-replay-head p { margin-top: 6px; color: var(--mm-muted); font-size: 12px; }
.mm-close-replay { flex: none; padding: 8px 14px; border: 1px solid var(--mm-line); background: transparent; color: inherit; font-size: 13px; }
.mm-close-replay:hover { background: #eeede6; }
.mm-replay-scroll { overflow-x: auto; margin-inline: 24px; border-radius: 10px; }
.mm-replay-image {
  position: relative;
  min-width: 1100px;
  aspect-ratio: 3.25 / 1;
  overflow: hidden;
  border: 1px solid #494e43;
  border-radius: 10px;
  background: #202020;
}
/* Preserve the actual UI at a readable size; pan it on narrow screens.
   Crop only unused canvas. The untouched original remains linked. */
.mm-replay-image img {
  position: absolute;
  top: 0;
  left: -15.48%;
  width: 131%;
  max-width: none;
  height: auto;
  transform: translateY(-14.58%);
}
.mm-replay-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 24px;
  color: var(--mm-muted);
  font-size: 12px;
  line-height: 1.6;
}
.mm-replay-bottom a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--ink, #242421);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mm-replay-bottom a:hover { color: #53634b; }
.mm-spatial { position: relative; height: 400px; min-width: 0; overflow: hidden; }
.mm-spatial canvas { display: block; width: 100%; height: 100%; }
.mm-spatial-title,
.mm-spatial-caption {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  color: var(--mm-muted);
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}
.mm-spatial-title { top: 0; text-transform: none; }
.mm-spatial-caption { bottom: 0; max-width: 44ch; color: #50574a; }
.mm-fallback {
  position: absolute;
  inset: 30px 12px;
  display: grid;
  align-content: center;
  gap: 5px;
}
.mm-fallback p {
  padding: 6px 12px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-paper);
  font-size: 12px;
  line-height: 1.6;
}
.mm-fallback p:last-child { border-color: #a5b19a; background: #e8ece2; }
.mm-spatial[data-renderer="webgl"] .mm-fallback { display: none; }
.mm-terminal {
  display: flex;
  flex-direction: column;
  align-self: center;
  min-width: 0;
  border: 1px solid #41463c;
  border-radius: 16px;
  background: var(--mm-console);
  color: #f5f3eb;
  box-shadow: 0 8px 24px #2424210a;
}
.mm-terminal-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  border-bottom: 1px solid #494e43;
  padding: 12px 20px;
  color: #c3c6b9;
  font-size: 11px;
  line-height: 1.6;
}
/* Also support an earlier cached module without the inline frame layout. */
.mm-terminal-body { display: grid; min-width: 0; padding: 20px; }
.mm-frame { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.mm-frame[aria-hidden="false"] { visibility: visible; }
.mm-terminal .mm-kicker {
  margin-bottom: 12px;
  color: #c3c6b9;
  font-size: 12px;
  line-height: 1.6;
  text-transform: none;
}
.mm-terminal h4 {
  font: 400 28px/1.2 var(--font-display, 'Newsreader', Georgia, serif);
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: none;
}
.mm-terminal pre {
  margin-block: 16px;
  border: 1px solid #494e43;
  border-left: 2px solid #a5b19a;
  border-radius: 8px;
  padding: 12px 14px;
  background: #252821;
  color: #f1f2e9;
  font: 12px/1.7 var(--font-mono, monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mm-terminal p:not(.mm-kicker) { color: #d0d2c6; font-size: 13px; line-height: 1.7; }
.mm-terminal p.mm-source {
  margin-top: 16px;
  color: #bcc2b1;
  font: 11px/1.7 var(--font-mono, monospace);
  overflow-wrap: anywhere;
}
.mm-terminal strong { color: #f5f3eb; font-weight: 500; }
.mm-detail { min-width: 0; margin-inline: 20px; border-top: 1px solid #494e43; }
.mm-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding-block: 10px;
  color: #e4e7db;
  font-size: 12px;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.mm-detail summary::-webkit-details-marker { display: none; }
.mm-detail summary::after { content: '+'; font-size: 18px; line-height: 1; }
.mm-detail[open] summary::after { content: '−'; }
.mm-detail-body { padding-bottom: 18px; }
.mm-detail-body pre { margin-block: 4px 10px; }
.mm-terminal .mm-detail-body .mm-source { margin-top: 0; }
.mm-terminal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid #494e43;
  padding: 12px 20px;
}
.mm-position { color: #c3c6b9; font: 11px/1.6 var(--font-mono, monospace); }
.mm-next {
  max-width: 100%;
  border: 1px solid #e4e7db;
  padding: 10px 16px;
  background: #e4e7db;
  color: #292e24;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.mm-next:hover { border-color: #f6f7f0; background: #f6f7f0; }
.mm-terminal :focus-visible { outline-color: #e4e7db; }
.mm-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 24px;
  border-top: 1px solid var(--mm-line);
  padding: 12px 24px;
  color: var(--mm-muted);
  font-size: 12px;
  line-height: 1.7;
}
.mm-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink, #242421);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mm-bottom a:hover { color: #53634b; }
.mm-open-replay {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink, #242421);
  font-size: 12px;
  text-align: left;
}
.mm-open-replay:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Respond to the demo's available space, including a narrow desktop column. */
@container mm-memory (max-width: 760px) {
  .mm-topline { padding: 18px 20px; }
  .mm-steps { margin-inline: 18px; }
  .mm-steps button { padding: 10px 12px; font-size: 12px; }
  .mm-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .mm-spatial { height: 330px; }
  .mm-bottom { padding-inline: 20px; }
}
@container mm-memory (max-width: 420px) {
  .mm-topline { gap: 4px; padding: 14px 16px; }
  .mm-topline > span:last-child { max-width: 32ch; font-size: 11px; }
  .mm-steps { gap: 3px; margin-inline: 12px; padding: 4px; }
  .mm-steps button { min-height: 64px; padding: 8px 6px; font-size: 11px; }
  .mm-stage { gap: 18px; padding: 16px 12px; }
  .mm-spatial { height: 290px; margin-inline: 4px; }
  .mm-spatial-title,
  .mm-spatial-caption { font-size: 11px; }
  .mm-fallback { inset: 25px 0; gap: 4px; }
  .mm-fallback p { padding: 3px 10px; font-size: 11px; }
  .mm-terminal-body { padding: 18px 16px; }
  .mm-terminal-head,
  .mm-terminal-footer { padding: 10px 16px; }
  .mm-terminal h4 { font-size: 25px; }
  .mm-terminal pre { margin-block: 14px; padding: 10px; font-size: 11px; }
  .mm-detail { margin-inline: 16px; }
  .mm-detail-body pre { margin-block: 2px 10px; }
  .mm-next { padding-inline: 12px; }
  .mm-bottom { align-items: flex-start; gap: 4px; padding: 12px 16px; font-size: 11px; }
}
@media (max-width: 600px) {
  .mm-replay-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .mm-replay-head { align-items: start; padding: 20px 16px; }
  .mm-replay-head h4 { font-size: 24px; }
  .mm-replay-head p { max-width: 26ch; line-height: 1.6; }
  .mm-replay-scroll { margin-inline: 16px; }
  .mm-replay-bottom { flex-wrap: wrap; padding: 12px 16px; }
  .mm-replay-bottom::before { content: 'Scroll sideways to inspect the full session →'; width: 100%; color: var(--ink, #242421); }
}
@media (prefers-reduced-motion: reduce) {
  .memory-demo * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .mm-steps button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .memory-demo :focus-visible { outline-color: Highlight; }
}