/* Pixel typography is scoped to the website; mathematical glyphs and diagrams stay native. */
@font-face { font-family: FusionPixel; src: url("../fonts/FusionPixel-CN.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: FusionPixelLatin; src: url("../fonts/FusionPixel-Latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.whiteboard-story { max-width: 1180px; margin: 36px auto 18px; }
.whiteboard-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.whiteboard-eyebrow { font: 400 13px/1.5 FusionPixelLatin, monospace; color: var(--hy); letter-spacing: .03em; margin: 0 0 8px; }
.whiteboard-heading h2 { font: 400 28px/1.4 FusionPixel, sans-serif; color: #263b5b; }
.whiteboard-heading h2 span { display: block; font: 400 19px/1.5 FusionPixelLatin, sans-serif; color: #73839b; margin-top: 3px; }
.whiteboard-heading .btn { flex-shrink: 0; }
.whiteboard-screen { margin-top: 16px; border: 1px solid #ccd5e3; background: #fcfcfd; box-shadow: 4px 4px 0 #e1e7f0; }
.whiteboard-screen video { width: 100%; aspect-ratio: 55 / 36; background: #fcfcfd; }
.whiteboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.whiteboard-play-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.whiteboard-related { font-size: 13px; white-space: nowrap; }
.whiteboard-current { font: 400 16px/1.6 FusionPixel, sans-serif; color: #52647e; margin: 16px 0 8px; }
.whiteboard-chapters { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.whiteboard-chapter-group { min-width: 0; }
.whiteboard-chapter-group h3 { font: 400 13px/1.5 FusionPixelLatin, monospace; color: #8291a7; margin: 0 0 8px; }
.whiteboard-chapter-list { display: grid; gap: 7px; }
.whiteboard-chapter { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 7px; align-items: start; width: 100%; padding: 10px 9px; border: 1px solid #dce3ed; border-radius: 3px; background: #fff; color: #314564; cursor: pointer; text-align: left; }
.whiteboard-chapter:hover { border-color: #91abc9; background: #f4f7fb; }
.whiteboard-chapter[aria-current="true"] { background: #eaf0fb; border-color: #4267a8; box-shadow: 2px 2px 0 #d7e1f1; }
.whiteboard-chapter-time { font: 400 12px/1.7 FusionPixelLatin, monospace; color: #7b8da6; }
.whiteboard-chapter-zh { display: block; font: 400 16px/1.4 FusionPixel, sans-serif; }
.whiteboard-chapter-en { display: block; font: 400 12px/1.5 FusionPixelLatin, sans-serif; color: #718199; margin-top: 4px; }
.whiteboard-chapter:focus-visible, .whiteboard-story button:focus-visible, .whiteboard-watch:focus-visible { outline: 3px solid #3d81c2; outline-offset: 3px; }
.whiteboard-credits { color: var(--muted); margin: 18px 0 0; }
.whiteboard-interactive { max-width: 1180px; margin: 22px auto 38px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 14px 18px; }
.whiteboard-interactive summary { cursor: pointer; font-weight: 600; color: var(--hy); }
.whiteboard-interactive summary span { font: 400 14px/1.5 FusionPixel, sans-serif; color: #73839b; margin-left: 10px; }
.whiteboard-interactive .xp-stage { border-radius: 2px; box-shadow: 3px 3px 0 #e1e7f0; }
.whiteboard-interactive .xp-over { font-family: FusionPixelLatin, FusionPixel, sans-serif; font-synthesis: none; }
.whiteboard-interactive .xp-over h4, .whiteboard-interactive .xp-chips span { font-weight: 400; }
.whiteboard-watch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; margin: 14px 0 2px; border: 1px solid #ccd5e3; color: var(--hy); background: #f7f9fd; font-size: 13px; }
.whiteboard-watch span[lang] { font: 400 14px/1.4 FusionPixel, sans-serif; color: #7c8da6; }
.pixel-whiteboard-site .fig { position: relative; border-radius: 3px; border-color: #ccd5e3; box-shadow: 3px 3px 0 #e1e7f0; }
.pixel-whiteboard-site .fig .schematic, .pixel-whiteboard-site .eqbox .label { font-family: FusionPixelLatin, sans-serif; font-weight: 400; }
.pixel-whiteboard-site .fig .readout, .pixel-whiteboard-site .fig .caption { font-family: FusionPixelLatin, sans-serif; font-size: 14px; line-height: 1.55; }
.whiteboard-figure-presenter { position: absolute; z-index: 2; pointer-events: none; background: url("../assets/presenter/states.png") no-repeat; background-size: 400% 200%; image-rendering: pixelated; }
@media (max-width: 1000px) { .whiteboard-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .whiteboard-heading { align-items: start; flex-direction: column; gap: 12px; }
  .whiteboard-heading h2 { font-size: 24px; }
  .whiteboard-heading h2 span { font-size: 16px; }
  .whiteboard-actions { align-items: start; flex-direction: column; gap: 10px; }
  .whiteboard-chapters { grid-template-columns: 1fr; gap: 14px; }
  .whiteboard-chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whiteboard-chapter { padding: 9px 7px; gap: 5px; grid-template-columns: 28px minmax(0, 1fr); }
  .whiteboard-chapter-zh { font-size: 14px; }
  .whiteboard-interactive { padding: 12px; }
  .whiteboard-interactive summary span { display: block; margin: 6px 0 0; }
}