/* ── 21. Minimap in the margin ───────────────────────── */
.s21 { height: 640px; background: var(--gray-10); color: var(--gray-830); }
.mm-sc { position: absolute; left: 0; top: 0; bottom: 0; right: 96px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.mm-sc::-webkit-scrollbar { display: none; }
.mm-a { max-width: 640px; margin: 0 auto; padding: 60px 28px 120px; }
.mm-a h3 { margin: 0; font-size: 40px; line-height: 1; letter-spacing: -0.022em; font-weight: 550; }
.mm-a h4 { margin: 56px 0 0; font-size: 24px; letter-spacing: -0.02em; font-weight: 550; }
.mm-a p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--gray-700); }
.mm-a figure { margin: 26px 0 0; height: 220px; border-radius: 8px; }
.mm-a blockquote { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--orange-400); font-size: 20px; line-height: 1.4; font-weight: 550; }
.mm-a pre { margin: 20px 0 0; background: var(--gray-840); color: var(--gray-100); border-radius: 8px; padding: 16px 18px; font: 13px/1.7 var(--font-mono); overflow: hidden; }
.mm-map { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 64px; border-radius: 8px; cursor: default; touch-action: none; }
.mm-map::before { content: ""; position: absolute; left: -16px; top: -16px; bottom: -16px; width: 1px; background: color-mix(in srgb, var(--gray-900) 7%, transparent); }
.mm-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-win { position: absolute; left: -4px; right: -4px; top: 0; height: 60px; border-radius: 6px; background: color-mix(in srgb, var(--orange-400) 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange-400) 75%, transparent); cursor: grab; }
.mm-map.drag .mm-win { cursor: grabbing; background: color-mix(in srgb, var(--orange-400) 14%, transparent); }
.mm-tip { position: absolute; right: 100px; top: 0; z-index: 5; padding: 6px 11px; border-radius: 8px; background: var(--gray-830); color: var(--gray-0); font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
@container (max-width: 700px) { .mm-sc { right: 64px; } .mm-map { right: 12px; width: 40px; } .mm-map::before { left: -12px; } .mm-tip { right: 64px; } .mm-a { padding: 40px 18px 100px; } .mm-a h3 { font-size: 32px; } }