/* Shared, non-invasive quality layer for Chapters 1–17. */
html { scroll-padding-top: 92px; }
body { text-rendering: optimizeLegibility; }
main, .chapter-body, .chapter { min-width: 0; }
.chapter-section, .section, [id^="sec-"] { scroll-margin-top: 104px; }
img, svg, canvas { max-width: 100%; }
pre, code { tab-size: 4; }
pre { max-width: 100%; overflow-x: auto; }
table { font-variant-numeric: tabular-nums; }
th { text-align: left; }
p, li, td, figcaption { overflow-wrap: break-word; }
::selection { background: rgba(11,114,133,.2); color: #101c33; }
.quality-skip {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 2000;
  padding: 9px 13px;
  border-radius: 8px;
  background: #101c33;
  color: #fff !important;
  font: 600 14px "Space Grotesk", sans-serif;
  transform: translateY(-150%);
  transition: transform .18s ease;
}
.quality-skip:focus { transform: translateY(0); }
.quality-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  height: 4px;
  pointer-events: none;
}
.quality-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #0b7285, #b45309);
  box-shadow: 0 0 10px rgba(11,114,133,.25);
}
.quality-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  min-width: 48px;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid #bfdde3;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #075968;
  box-shadow: 0 10px 26px rgba(16,28,51,.13);
  cursor: pointer;
  font: 600 13px "Space Grotesk", sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.quality-top.show { opacity: 1; pointer-events: auto; transform: none; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(11,114,133,.28);
  outline-offset: 3px;
}
.chapter-nav { align-items: center; gap: 14px; }
.chapter-nav a { text-underline-offset: 4px; }
.site-footer a, footer a { text-underline-offset: 3px; }
@media (max-width: 620px) {
  .quality-top { right: 12px; bottom: 12px; }
  .quality-top span { display: none; }
  .chapter-nav { align-items: stretch; flex-direction: column; }
  .chapter-nav a, .chapter-nav span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .quality-skip, .quality-progress span, .quality-top { transition: none; }
}
@media print {
  .quality-progress, .quality-top, .quality-skip, .back-top, .top,
  .controls, .viz-controls { display: none !important; }
  .toc { position: static !important; max-height: none !important; }
  .section, .chapter-section { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  body { background: #fff !important; }
}

/* Unified interactive-visual system for Chapters 6–17. */
.chapter-interaction-polish {
  --ip-accent: #0b7285;
  --ip-accent-2: #2563eb;
  --ip-soft: #eef8fa;
  --ip-border: #b9d9df;
}
.chapter-interaction-polish :is(.chapter-section, .section):nth-of-type(4n + 1) {
  --ip-accent: #0f766e; --ip-accent-2: #2563eb; --ip-soft: #ecfdf5; --ip-border: #9ed8ce;
}
.chapter-interaction-polish :is(.chapter-section, .section):nth-of-type(4n + 2) {
  --ip-accent: #2563eb; --ip-accent-2: #7c3aed; --ip-soft: #eff6ff; --ip-border: #b8cbf5;
}
.chapter-interaction-polish :is(.chapter-section, .section):nth-of-type(4n + 3) {
  --ip-accent: #7c3aed; --ip-accent-2: #db2777; --ip-soft: #f7f2ff; --ip-border: #d3c1f4;
}
.chapter-interaction-polish :is(.chapter-section, .section):nth-of-type(4n) {
  --ip-accent: #b45309; --ip-accent-2: #dc2626; --ip-soft: #fff7ed; --ip-border: #efc68f;
}
.chapter-interaction-polish :where(.viz, .lab, .plot-shell) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--viz-border, var(--ip-border)) !important;
  background:
    radial-gradient(circle at 97% 2%, color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 10%, transparent), transparent 28%),
    linear-gradient(145deg, #fff 0%, #fff 64%, var(--viz-soft, var(--ip-soft)) 100%) !important;
  box-shadow: 0 16px 38px rgba(16,28,51,.09), 0 2px 7px rgba(16,28,51,.04);
}
.chapter-interaction-polish :where(.viz, .lab, .plot-shell)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--viz-accent, var(--ip-accent)), var(--viz-accent-2, var(--ip-accent-2)));
}
.chapter-interaction-polish :where(.viz-title, .lab-head h3) {
  color: #101c33;
  letter-spacing: -.01em;
}
.chapter-interaction-polish .viz-title {
  position: relative;
  padding-left: 18px;
}
.chapter-interaction-polish .viz-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--viz-accent, var(--ip-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 14%, transparent);
}
.chapter-interaction-polish :where(.viz-sub, .lab-head p) {
  color: #526078;
  line-height: 1.55;
}
.chapter-interaction-polish :where(.tree-stage, .heap-stage, .canvas-stage, .lab-stage, .stage, .index-stage, .middle-stage, .dbl-insert-stage, .stack-stage, .queue-stage) {
  border-color: color-mix(in srgb, var(--ip-accent) 22%, #dbe4f0) !important;
  background:
    linear-gradient(color-mix(in srgb, var(--ip-accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ip-accent) 6%, transparent) 1px, transparent 1px),
    rgba(255,255,255,.88) !important;
  background-size: 28px 28px !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(16,28,51,.06);
}
.chapter-interaction-polish canvas {
  display: block;
  image-rendering: auto;
  filter: saturate(1.06) contrast(1.015);
}
.chapter-interaction-polish :where(.viz-label, .readout, .lab-readout, .lab-message) {
  border-color: var(--viz-border, var(--ip-border)) !important;
  border-left: 5px solid var(--viz-accent, var(--ip-accent)) !important;
  background: linear-gradient(90deg, var(--viz-soft, var(--ip-soft)), #fff 76%) !important;
  box-shadow: 0 5px 14px rgba(16,28,51,.05);
  color: #26364f;
}
.chapter-interaction-polish :where(.viz-controls, .controls) {
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 18%, #dbe4f0);
}
.chapter-interaction-polish :where(.viz-controls, .controls) button {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 25%, #dbe4f0) !important;
  box-shadow: 0 3px 9px rgba(16,28,51,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.chapter-interaction-polish :where(.viz-controls, .controls) button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--viz-accent, var(--ip-accent)) !important;
  box-shadow: 0 8px 17px rgba(16,28,51,.11);
}
.chapter-interaction-polish :where(.viz-controls, .controls) button:active:not(:disabled) { transform: translateY(0); }
.chapter-interaction-polish :where(.viz-controls, .controls) button.primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--viz-accent, var(--ip-accent)), var(--viz-accent-2, var(--ip-accent-2))) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 24%, transparent);
}
.chapter-interaction-polish :where(.viz-controls, .controls) :is(select, input) {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--viz-accent, var(--ip-accent)) 25%, #dbe4f0) !important;
  background: #fff;
  box-shadow: 0 3px 9px rgba(16,28,51,.04);
}
.chapter-interaction-polish :where(.viz-status, .status, .stage-badge) {
  padding: 5px 9px;
  border: 1px solid var(--viz-border, var(--ip-border));
  border-radius: 999px;
  background: var(--viz-soft, var(--ip-soft));
  color: var(--viz-accent, var(--ip-accent));
  font-weight: 600;
}
.chapter-interaction-polish :where(.viz-metric, .metric) {
  border-top: 3px solid var(--viz-accent, var(--ip-accent)) !important;
  background: linear-gradient(150deg, #fff, var(--viz-soft, var(--ip-soft))) !important;
  box-shadow: 0 6px 14px rgba(16,28,51,.06);
}
.chapter-interaction-polish :where(.chip, .sequence-chip) {
  box-shadow: 0 3px 8px rgba(16,28,51,.05);
}
@media (max-width: 620px) {
  .chapter-interaction-polish :where(.viz, .lab, .plot-shell) { padding-right: 14px; padding-left: 14px; }
  .chapter-interaction-polish :where(.viz-controls, .controls) button { flex: 1 1 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-interaction-polish :where(.viz-controls, .controls) button,
  .chapter-interaction-polish :where(.chip, .sequence-chip) {
    transition: none !important;
    transform: none !important;
  }
}