:root  > * {
    --md-primary-fg-color: #306998;
    --md-primary-fg-color--light: #306998;
    --md-primary-fg-color--dark:  #5a9fd4;

    --md-typeset-a-color: #306998;
    --md-accent-fg-color: #5a9fd4;

    --md-accent-fg-color--transparent: #5a9fd41a;
  }

.md-overlay {
  backdrop-filter: blur(10px);
}

.md-search {
  padding: 0 .1rem 0 .6rem;
}

.md-header-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 或你需要的高度 */
  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
  z-index: 4;
  pointer-events: none; /* 可选，让它不阻止鼠标事件穿透 */
}

/* ---- Runnable code cells (Pyodide + CodeMirror) ---- */
.runnable { margin: 0.5rem 0 1.2rem; }
.runnable .CodeMirror {
  height: auto;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.5;
}
.runnable-bar {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0;
}
.runnable .md-button.runnable-run {
  padding: 0.12rem 0.7rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border-color: var(--md-primary-fg-color);
}
.runnable .md-button.runnable-reset { padding: 0.12rem 0.7rem; }
.runnable-status { font-size: 0.75rem; color: var(--md-default-fg-color--light); }
.runnable-output:empty { display: none; }
.runnable-stdout {
  margin: 0; padding: 0.6rem 0.8rem; min-height: 1.2rem;
  white-space: pre-wrap; word-break: break-word; font-size: 0.78rem;
  background: var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 0.2rem;
}
.runnable-stdout:empty { display: none; }
.runnable-stdout.error { border-left-color: #d32f2f; color: #b71c1c; }
.runnable-figures { margin-top: 0.4rem; }
.runnable-figure { max-width: 100%; height: auto; display: block; margin: 0.3rem 0; }

/* ---- Memory diagrams (object-centric) ---- */
.memory-diagram:not(.mem-rendered){font-family:var(--md-code-font-family,monospace);white-space:pre;opacity:0;}
.mem-rendered{margin:1.1rem 0;}
.mem-canvas{position:relative;display:flex;gap:5rem;align-items:flex-start;padding:0.4rem 0;}
.mem-names{display:flex;flex-direction:column;gap:0.4rem;align-items:flex-end;padding-top:2.6rem;min-width:5rem;}
.mem-names-title{font-size:0.72rem;font-weight:700;letter-spacing:0.03em;color:var(--md-default-fg-color--light);margin-bottom:0.2rem;}
.mem-name{display:flex;align-items:center;gap:0.5rem;}
.mem-name-key{font-style:italic;font-size:0.95rem;}
.mem-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--md-primary-fg-color);flex:none;}
.mem-memory{border:1.5px solid var(--md-primary-fg-color);border-radius:1rem;min-width:23rem;min-height:9rem;background:var(--md-default-bg-color);overflow:hidden;}
.mem-memory-title{text-align:center;font-weight:600;padding:0.45rem 0.8rem;border-bottom:1.5px solid var(--md-primary-fg-color);color:var(--md-default-fg-color);}
.mem-object{display:grid;grid-template-columns:1fr 1.5fr 0.8fr;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-bottom:1px solid var(--md-default-fg-color--lighter);font-family:var(--md-code-font-family,monospace);font-size:0.82rem;}
.mem-obj-val{font-weight:600;text-align:left;}
.mem-obj-addr{text-align:center;color:var(--md-default-fg-color--light);}
.mem-obj-type{text-align:right;color:var(--md-default-fg-color--light);}
.mem-arrows{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;}
.mem-arrow{fill:none;stroke:var(--md-primary-fg-color);stroke-width:1.6;opacity:0.9;}
.mem-arrowtip{fill:var(--md-primary-fg-color);}
/* ---- Call diagram (Chapter 2): Global Namespace | Heap | Call Stack ---- */
.mem-rendered{overflow-x:auto;}
.mem-canvas.mem-call{gap:1.8rem;align-items:stretch;}            /* equal-height, header-aligned boxes */
.mem-box,.mem-memory-call{align-self:stretch;border:1.5px solid var(--md-primary-fg-color);border-radius:1rem;background:var(--md-default-bg-color);overflow:hidden;display:flex;flex-direction:column;}
.mem-box-title,.mem-memory-call .mem-memory-title{text-align:center;font-weight:600;padding:0.45rem 0.9rem;border-bottom:1.5px solid var(--md-primary-fg-color);white-space:nowrap;}
.mem-box-rows{padding:0.55rem 0.7rem;display:flex;flex-direction:column;gap:0.45rem;}
.mem-global-box{min-width:7rem;max-width:13rem;width:max-content;}
/* heap in the middle: compact, value-only */
.mem-memory-call{min-width:0;width:max-content;max-width:13rem;}
.mem-object-simple{display:block;text-align:center;padding:0.5rem 1.1rem;border-bottom:1px solid var(--md-default-fg-color--lighter);font-family:var(--md-code-font-family,monospace);font-size:0.82rem;}
.mem-object-simple:last-child{border-bottom:none;}
.mem-object-simple .mem-obj-val{font-weight:600;}
/* call stack box wrapping dashed frames (local namespaces) */
.mem-stackbox{min-width:11rem;}
.mem-frames{padding:0.6rem;display:flex;flex-direction:column;gap:0.55rem;}
.mem-frame{border:1.4px dashed var(--md-default-fg-color--light);border-radius:0.5rem;padding:0.3rem 0.6rem 0.42rem;}
.mem-frame-title{font-family:var(--md-code-font-family,monospace);font-size:0.78rem;font-weight:700;color:var(--md-primary-fg-color);text-align:center;}
.mem-frame-kind{font-size:0.6rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--md-default-fg-color--light);text-align:center;border-bottom:1px dashed var(--md-default-fg-color--lighter);padding-bottom:0.22rem;margin-bottom:0.32rem;}
/* name rows; global box = name then dot (right edge), frame = dot then name */
.mem-grow,.mem-frow{display:flex;align-items:center;gap:0.5rem;}
.mem-global-box .mem-frow{justify-content:space-between;}
.mem-fname{font-style:italic;font-size:0.95rem;}
.mem-farrow{color:var(--md-default-fg-color--light);}
.mem-fval{font-family:var(--md-code-font-family,monospace);font-weight:600;}
.mem-frow-pending{opacity:0.65;}
.mem-frow-pendmark{color:var(--md-default-fg-color--light);}
/* green return arrow: the value handed back */
.mem-arrow-return{stroke:#2e9b3d;stroke-width:1.9;opacity:0.95;}
.mem-arrowtip-ret{fill:#2e9b3d;}

/* ---- Function-syntax template: fixed keywords (jarring) vs. fill-in placeholders ---- */
.func-syntax{font-family:var(--md-code-font-family,monospace);background:var(--md-code-bg-color,#f5f5f5);padding:0.8rem 1rem;border-radius:0.35rem;line-height:1.75;font-size:0.95rem;overflow-x:auto;margin:0.8rem 0;white-space:pre;}
.syn-k{color:#c1121f;font-weight:800;background:rgba(255,209,0,0.45);padding:0 0.14em;border-radius:0.15em;}
.syn-p{color:#1e6fd9;font-style:italic;}

/* ---- Floating "Ask a question" button (anonymous in-class questions) ---- */
.ask-fab{position:fixed;left:1rem;bottom:1rem;z-index:50;display:inline-flex;align-items:center;gap:0.4rem;
  background:var(--md-primary-fg-color);color:#fff;padding:0.55rem 0.95rem;border-radius:2rem;
  box-shadow:0 3px 12px rgba(0,0,0,0.28);font-weight:700;font-size:0.9rem;text-decoration:none;
  transition:filter .15s, transform .15s;}
.ask-fab:hover{filter:brightness(1.08);color:#fff;transform:translateY(-1px);}
.ask-fab-ic{font-size:1.1rem;line-height:1;}
@media (max-width:480px){.ask-fab-tx{display:none;} .ask-fab{padding:0.6rem;}}

/* ---- Chapter motto (epigraph) + recall callbacks ---- */
.epigraph{font-size:1.15rem;font-style:italic;color:var(--md-default-fg-color--light);border-left:3px solid var(--md-primary-fg-color);padding:0.3rem 0 0.3rem 1rem;margin:0.2rem 0 1.6rem;}
.callback{font-size:0.85rem;font-style:italic;color:var(--md-default-fg-color--light);background:var(--md-default-fg-color--lightest);border-left:3px solid var(--md-primary-fg-color);border-radius:0 0.2rem 0.2rem 0;padding:0.4rem 0.8rem;margin:0.9rem 0;}
.callback::before{content:"\21B3  ";font-style:normal;font-weight:700;color:var(--md-primary-fg-color);}

/* ---- Show-memory button, live memory panel, reading-mode toggle ---- */
.runnable .md-button.runnable-mem{padding:0.12rem 0.7rem;}
.runnable-memory{margin-top:0.7rem;}
.runnable-memnote{font-size:0.8rem;color:var(--md-default-fg-color--light);font-style:italic;}
.reading-toggle{display:flex;justify-content:flex-end;margin:0 0 1rem;}
.reading-toggle-btn{font-size:0.72rem;padding:0.1rem 0.6rem;}