/* Stack animation reused from Chapter 7, Section 7.10. */
.recursion-trace{--ink-soft:var(--muted);--accent-dark:#085a68;--amber:#b45309;--amber-soft:#fdf1df;--grid:#e7edf6;--code-bg:#0f1a2e;--code-text:#dbe7ff;--font-mono:var(--mono);--font-display:var(--display)}
    .recursion-trace {
      margin: 24px 0 0;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      box-shadow: 0 10px 28px rgba(16,28,51,.06);
    }
    .recursion-trace > h3 { margin: 0 0 7px; }
    .recursion-trace > p { color: var(--ink-soft); }
    .recursion-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(245px, .75fr);
      gap: 16px;
      align-items: start;
      margin-top: 16px;
    }
    .recursion-layout > * { min-width: 0; }
    .trace-code {
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid #263754;
      border-radius: 10px;
      background: var(--code-bg);
      color: var(--code-text);
      font: 13px/1.55 var(--font-mono);
    }
    .trace-code-row {
      min-width: 470px;
      padding: 4px 12px 4px 48px;
      position: relative;
      white-space: pre;
      border-left: 4px solid transparent;
    }
    .trace-code-row:first-child { padding-top: 12px; }
    .trace-code-row:last-child { padding-bottom: 12px; }
    .trace-code-row .line-number {
      position: absolute;
      left: 13px;
      width: 20px;
      color: #8394b1;
      text-align: right;
      user-select: none;
    }
    .trace-code-row.active {
      border-left-color: var(--amber);
      background: rgba(180,83,9,.22);
      color: #fff;
    }
    .rec-list-state {
      margin-top: 12px;
      padding: 13px 14px;
      overflow-x: auto;
      border: 1px solid #b7d9df;
      border-radius: 9px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font: 600 14px var(--font-mono);
      white-space: nowrap;
    }
    .rec-var-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .rec-var {
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
      color: var(--ink-soft);
      font: 12px var(--font-mono);
    }
    .rec-var b { display: block; color: var(--ink); font-size: 14px; }
    .rec-stack-panel {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fbfcfe;
    }
    .rec-stack-panel h4 { margin-bottom: 3px; }
    .rec-stack-panel > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 13px; }
    .rec-stack-axis {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-bottom: 7px;
      color: var(--accent-dark);
      font: 600 11px var(--font-mono);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .rec-stack-axis b { font-size: 21px; line-height: 1; }
    .rec-stack-shell {
      min-height: 430px;
      padding: 38px 10px 0 62px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border: 2px solid #b8c7d9;
      border-top: 0;
      border-radius: 0 0 10px 10px;
      background:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        #fff;
      background-size: 22px 22px;
      overflow: hidden;
    }
    .rec-stack {
      min-height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 6px;
    }
    .rec-frame {
      position: relative;
      padding: 10px 11px;
      border: 2px solid #aebed2;
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 4px 10px rgba(16,28,51,.07);
    }
    .rec-frame.active { border-color: var(--amber); background: var(--amber-soft); }
    .rec-frame.waiting { border-color: #9db3d1; background: #f3f7fc; }
    .rec-frame.returning { border-color: #68a995; background: #e7f7f0; }
    .rec-top-pointer {
      position: absolute;
      right: calc(100% + 8px);
      top: 13px;
      color: var(--amber);
      font: 700 11px var(--font-mono);
      white-space: nowrap;
    }
    .rec-frame-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
      color: var(--accent-dark);
      font: 600 12px var(--font-mono);
    }
    .rec-frame code { display: block; color: var(--ink); font-size: 11.5px; }
    .rec-frame small { display: block; margin-top: 4px; color: var(--ink-soft); }
    .rec-stack-base {
      margin: 8px -10px 0 -62px;
      padding: 8px 10px;
      border-top: 5px solid var(--ink);
      background: #e9eff7;
      color: var(--ink);
      text-align: center;
      font: 700 11px var(--font-mono);
      letter-spacing: .08em;
    }
    .rec-stack-event {
      margin-top: 9px;
      padding: 8px 10px;
      border-radius: 7px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      text-align: center;
      font: 600 12px var(--font-mono);
    }
    .rec-stack-event.push { background: var(--amber-soft); color: var(--amber); }
    .rec-stack-event.pop { background: #e7f7f0; color: #176b56; }
    .rec-stack-empty {
      margin-bottom: 8px;
      padding: 24px 12px;
      border: 1px dashed #b9c6d8;
      border-radius: 8px;
      color: var(--ink-soft);
      text-align: center;
      font: 12px var(--font-mono);
    }
    .rec-link-build {
      margin-top: 18px;
      padding: 18px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fbfcfe;
    }
    .rec-link-build-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .rec-link-build-header h4 { margin: 2px 0 0; }
    .rec-link-write {
      padding: 7px 10px;
      border: 1px solid #b7d9df;
      border-radius: 7px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font: 600 12px var(--font-mono);
      white-space: nowrap;
    }
    .rec-link-scroll { margin-top: 12px; overflow-x: auto; }
    .rec-link-chain {
      min-width: 650px;
      min-height: 145px;
      padding: 52px 8px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 9px;
      background:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        #fff;
      background-size: 22px 22px;
    }
    .rec-link-node-wrap { position: relative; flex: 0 0 auto; }
    .rec-link-head-marker {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      opacity: .18;
      color: var(--accent-dark);
      font: 700 12px/1.15 var(--font-mono);
      text-align: center;
      white-space: pre-line;
      transform: translateX(-50%);
      transition: opacity .25s ease;
    }
    .rec-link-head-marker.established { opacity: 1; }
    .rec-link-node {
      width: 100px;
      display: grid;
      grid-template-columns: 42px 1fr;
      overflow: hidden;
      border: 2px solid #aebed2;
      border-radius: 7px;
      background: #fff;
      color: var(--ink-soft);
      box-shadow: 0 4px 10px rgba(16,28,51,.06);
      transition: border-color .25s ease, background .25s ease, color .25s ease;
    }
    .rec-link-node strong,
    .rec-link-node span {
      min-height: 48px;
      display: grid;
      place-items: center;
    }
    .rec-link-node strong {
      color: var(--ink);
      font: 700 18px var(--font-mono);
    }
    .rec-link-node span {
      border-left: 1px solid #c8d3e1;
      font: 10px var(--font-mono);
      text-transform: uppercase;
    }
    .rec-link-node.established {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent-dark);
    }
    .rec-link-arrow {
      width: 72px;
      flex: 0 0 72px;
      color: #a8b5c7;
      text-align: center;
      transition: color .25s ease;
    }
    .rec-link-arrow small {
      display: block;
      margin-bottom: 1px;
      font: 10px var(--font-mono);
    }
    .rec-link-arrow b {
      display: block;
      font: 700 22px/1 var(--font-mono);
      letter-spacing: -4px;
    }
    .rec-link-arrow.established { color: var(--accent-dark); }
    .rec-link-null {
      min-width: 64px;
      padding: 13px 8px;
      border: 2px dashed #b9c6d8;
      border-radius: 7px;
      background: #fff;
      color: #8a98ad;
      text-align: center;
      font: 600 12px var(--font-mono);
      transition: border-color .25s ease, background .25s ease, color .25s ease;
    }
    .rec-link-null.established {
      border-color: #68a995;
      background: #e7f7f0;
      color: #176b56;
    }
    .rec-link-caption {
      margin: 10px 0 0;
      color: var(--ink-soft);
      font-size: 13px;
      text-align: center;
    }
    .recursion-trace .viz-label { margin-bottom: 0; }
    @media (max-width: 760px) {
      .recursion-layout { grid-template-columns: 1fr; }
      .rec-var-grid { grid-template-columns: 1fr; }
      .rec-link-build-header { display: block; }
      .rec-link-write { display: inline-block; margin-top: 10px; }
    }


.recursion-trace{padding:0;border:0;box-shadow:none}
.recursion-trace .trace-code{font-family:"Comic Sans MS","Comic Sans",cursive}
.recursion-trace .trace-code-row{min-width:360px}
.recursion-trace .viz-label{padding:12px;margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:14px}
.recursion-trace .viz-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.recursion-trace .viz-controls button{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}
.recursion-trace .viz-controls button.primary{background:var(--ink);color:white}
.recursion-trace .viz-controls button:disabled{opacity:.45;cursor:not-allowed}
.recursion-trace .viz-status{font-size:12px;color:var(--muted)}
@media(max-width:1100px){.recursion-layout{grid-template-columns:1fr}}
@media print{.recursion-trace .viz-controls{display:none}.recursion-layout{grid-template-columns:1fr}.rec-stack-panel,.rec-link-build{break-inside:avoid}}