/* Slide styles for the exercise decks, copied from brainstorm.html's <style> (the brainstorm deck keeps its own). */
/* Map display controls: same as the B1 map in the chapter deck (⚙ panel, draggable colour bar). */
.reveal .map-wrap { position: relative; display: flex; align-items: center; gap: 14px; }
.reveal .map-cell { position: relative; flex: none; }
.reveal .map-cell .cell-title { font-size: 15px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.reveal .cmap-btn { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.92); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 0; z-index: 4; }
.reveal .map-wrap:hover .cmap-btn, .reveal .cmap-btn:focus-visible, .reveal .cmap-btn[aria-expanded="true"] { opacity: 1; }
.reveal .cmap-btn:hover { color: var(--accent); border-color: var(--accent); }
.reveal .cmap-pop { position: absolute; top: 42px; left: 6px; width: 190px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 6px 18px rgba(29, 39, 51, 0.14); padding: 8px 10px; z-index: 5; }
.reveal .cmap-pop[hidden] { display: none; }
.reveal .pop-label { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.reveal .pop-label + .pop-label, .reveal .cmap-pop .swatches + .pop-label { margin-top: 10px; }
.reveal .cmap-pop .swatches button { display: block; width: 100%; height: 14px; margin: 6px 0; border-radius: 4px; border: 2px solid transparent; padding: 0; cursor: pointer; }
.reveal .cmap-pop .swatches button[aria-pressed="true"] { border-color: var(--accent); }
.reveal .cmap-pop .swatches button:hover { border-color: var(--muted); }
.reveal .cbar-col { position: relative; height: 300px; width: 66px; flex: none; }
.reveal .cbar-title { position: absolute; top: -34px; left: 8px; transform: translateX(-50%); font-size: 18px; white-space: nowrap; }
.reveal .unit-toggle { display: flex; margin-top: 5px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.reveal .unit-toggle button { flex: 1; font: inherit; font-size: 14px; line-height: 1; padding: 6px 0; border: none; background: #fff; color: var(--muted); cursor: pointer; }
.reveal .unit-toggle button + button { border-left: 1px solid var(--rule); }
.reveal .unit-toggle button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 700; }
.reveal .nominal { display: block; margin-top: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.reveal .nominal input::-webkit-inner-spin-button, .reveal .nominal input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.reveal .nominal input { -moz-appearance: textfield; appearance: textfield; font: inherit; font-size: 14px; width: 2.2em; color: var(--ink); border: none; border-bottom: 1px dotted var(--muted); background: transparent; text-align: right; padding: 0; }
.reveal .nominal input:focus { outline: none; border-bottom-color: var(--accent); }
.reveal .cbar { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 3px; touch-action: none; }
.reveal .cbar-handle { position: absolute; left: -6px; width: 28px; height: 8px; margin-top: -4px; background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; cursor: ns-resize; touch-action: none; }
.reveal .cbar-label { position: absolute; left: 30px; margin-top: -10px; font-size: 15px; color: var(--ink); white-space: nowrap; }
.reveal .cbar-tick { position: absolute; left: 18px; width: 5px; height: 1px; background: var(--muted); }
.reveal .cbar-hint { position: absolute; top: calc(100% + 10px); left: -40px; width: 120px; font-size: 13px; color: var(--muted); text-align: center; opacity: 0; transition: opacity 0.15s; }
.reveal .cbar-col:hover .cbar-hint { opacity: 1; }
.reveal .busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted); }
.reveal .ax-x, .reveal .ax-y { position: absolute; font-size: 15px; color: var(--muted); pointer-events: none; }
.reveal .ax-x { left: -26px; top: 50%; transform: translateY(-50%); }
.reveal .ax-y { left: 50%; bottom: -26px; transform: translateX(-50%); }
/* Simulation controls */
.reveal .sim-cols { display: grid; grid-template-columns: 450px 1fr; gap: 40px; align-items: start; margin-top: 0.2em; }
.reveal .ctrl h3 { font-size: 0.72em; margin: 0 0 0.35em; color: var(--muted); }
.reveal .ctrl .row { margin-bottom: 1em; }
.reveal .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.reveal .seg button { font: inherit; font-size: 0.66em; padding: 7px 16px; border: none; background: #fff; color: var(--muted); cursor: pointer; }
.reveal .seg button + button { border-left: 1px solid var(--rule); }
.reveal .seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 700; }
.reveal .read { font-size: 0.9em; font-weight: 700; margin-left: 0.3em; }
.reveal .slider-wrap { position: relative; width: 100%; max-width: 560px; }
.reveal input[type="range"] { width: 100%; margin: 0.4em 0 0; accent-color: var(--accent); }
.reveal .ticks { position: relative; height: 1.3em; font-size: 0.5em; color: var(--muted); }
.reveal .ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.reveal .ticks span.paper { color: var(--accent); font-weight: 700; }
.reveal .stats { font-size: 0.6em; border-collapse: collapse; }
.reveal .stats td { padding: 0.18em 0.9em 0.18em 0; }
.reveal .stats td:first-child { color: var(--muted); }
.reveal .fixed { font-size: 0.52em; color: var(--muted); margin-top: 0.4em; line-height: 1.45; }
.reveal .cite a { color: inherit; border-bottom: 1px dotted currentColor; text-decoration: none; }
/* Motion exercise */
.reveal #mo h2 { font-size: 1.15em; margin-bottom: 0.35em; }
.reveal .mo-grid { display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: start; }
.reveal .mo-setup canvas { display: block; width: 330px; height: 330px; border: 1px solid var(--rule); border-radius: 8px; touch-action: none; cursor: default; }
.reveal .mo-setup .cap { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.35; }
.reveal .mo-setup .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; color: var(--muted); }
.reveal .mo-setup .seg button, .reveal .mo-sliders .seg button { font-size: 14px; padding: 5px 12px; }
.reveal .mo-btn { font: inherit; font-size: 14px; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.reveal .mo-btn:hover { color: var(--accent); border-color: var(--accent); }
.reveal .mo-sliders { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 18px; align-items: end; font-size: 15px; color: var(--muted); }
.reveal .mo-sliders input[type="range"] { margin: 2px 0 0; }
.reveal .mo-sliders b { color: var(--ink); }
.reveal .mo-body { display: grid; grid-template-columns: auto 1fr; gap: 18px; margin-top: 10px; align-items: start; }
.reveal .mo-maps .map-wrap { gap: 10px; }
.reveal .mo-maps .map-wrap + .map-wrap { margin-top: 6px; }
.reveal .mo-maps .cell-title { font-size: 13px; line-height: 1.25; height: 2.5em; }
.reveal .mo-maps .cbar-col { height: 200px; width: 58px; }
.reveal .mo-maps .cbar-spacer { width: 58px; flex: none; }
.reveal .mo-side .stats { font-size: 15px; }
.reveal .mo-side .stats td { padding: 3px 8px 3px 0; vertical-align: top; line-height: 1.25; }
.reveal .mo-side .stats td:last-child { white-space: nowrap; font-weight: 700; }
.reveal .mo-side .q { font-size: 15px; line-height: 1.4; margin: 0 0 10px; }
.reveal .mo-setup .fixed { font-size: 12px; margin-top: 8px; line-height: 1.35; }
.reveal .mo-side { font-size: 15px; }
/* Slide 3 */
.reveal .mp-top { display: flex; gap: 18px; align-items: flex-start; margin-top: 0.1em; }
.reveal .mp-bottom { display: grid; grid-template-columns: 0.95fr 1.1fr 1.15fr; gap: 26px; margin-top: 0.5em; align-items: start; }
.reveal .mp-bottom .row { margin-bottom: 0.7em; }
.reveal .mp-bottom .slider-wrap { max-width: 330px; }
.reveal .mp-note { margin-top: 0.3em; }
.reveal [hidden] { display: none !important; }
.reveal .legend { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 4px; max-width: 215px; }
.reveal .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
/* Bloch–Siegert exercise */
.reveal section.bs h2, .reveal section.bs-saw h2, .reveal #bs-title h2 { font-size: 1.15em; margin-bottom: 0.35em; }
.reveal .bs-cols { display: grid; grid-template-columns: 400px 1fr; gap: 30px; align-items: start; }
.reveal .bs-cols2 { display: grid; grid-template-columns: 330px 330px 1fr; gap: 18px; align-items: start; }
.reveal .bs-view { text-align: center; }
.reveal .bs-cols .bs-sphere { width: 390px; height: 390px; }
.reveal .bs-cols2 .bs-sphere { width: 320px; height: 320px; }
.reveal .bs-sphere { display: block; margin: 0 auto; border: 1px solid var(--rule); border-radius: 8px; cursor: grab; }
.reveal .bs-cap { font-size: 15px; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
.reveal .bs-hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.reveal .bs-q { font-size: 16px; line-height: 1.4; margin: 0 0 10px; }
.reveal .bs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.reveal .bs-row input[type="range"] { width: 260px; margin: 0; }
.reveal .bs-row b { color: var(--ink); }
.reveal .bs .seg button { font-size: 14px; padding: 5px 11px; }
.reveal .bs-play { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.reveal .bs-play .bs-scrub { width: 200px; margin: 0; }
.reveal .bs-time { min-width: 6.5em; font-variant-numeric: tabular-nums; }
.reveal .bs-btn { font: inherit; font-size: 14px; padding: 6px 13px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.reveal .bs-btn:hover { color: var(--accent); border-color: var(--accent); }
.reveal .bs-btn[aria-pressed="true"] { background: var(--panel); font-weight: 700; }
.reveal .bs-readout { font-size: 14.5px; color: var(--ink); margin: 4px 0 0; line-height: 1.4; min-height: 2.8em; }
.reveal .b-stats { font-size: 15px; margin-top: 6px; }
.reveal .b-stats td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.reveal .bs-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-top: 0.6em; }
.reveal .bs-questions { font-size: 0.72em; line-height: 1.5; margin: 0; padding-left: 0; list-style: none; }
.reveal .bs-questions li { margin-bottom: 0.6em; }
.reveal .bs-howto p { font-size: 0.56em; line-height: 1.45; margin: 0 0 0.7em; color: var(--muted); }
.reveal .bs-foot { margin-top: 2.2em; max-width: 60em; }
.reveal section.bs-saw ul { font-size: 0.66em; line-height: 1.5; max-width: 34em; }
.reveal section.bs-saw li { margin-bottom: 0.7em; }
/* FLASH brain and receive coils */
.reveal #fl h2, .reveal #fl-rx h2 { font-size: 1.15em; margin-bottom: 0.3em; }
.reveal .fl-grid { display: grid; grid-template-columns: 300px 396px 1fr; gap: 20px; align-items: start; }
.reveal .fl-params { display: grid; grid-template-columns: 190px 190px; gap: 6px 16px; }
.reveal .fl-cap, .reveal .rx-cap { font-size: 13.5px; color: var(--muted); text-align: center; margin-bottom: 3px; }
.reveal .fl-ctrl .bs-row, .reveal .rx-ctrl .bs-row { margin: 0 0 7px; font-size: 14px; gap: 8px; }
.reveal .fl-ctrl .bs-row > span:first-child { min-width: 6.5em; }
.reveal .fl-ctrl input[type="range"] { width: 210px; margin: 0; }
.reveal .fl-ctrl .seg button, .reveal .rx-ctrl .seg button { font-size: 13.5px; padding: 4px 10px; }
.reveal .fl-guess { font-size: 13.5px; border-collapse: collapse; margin: 4px 0 8px; }
.reveal .fl-guess th { font-weight: 700; color: var(--muted); padding: 2px 8px 2px 0; text-align: left; }
.reveal .fl-guess td { padding: 2px 8px 2px 0; }
.reveal .fl-guess input { width: 4.2em; font: inherit; font-size: 13.5px; padding: 1px 4px; border: 1px solid var(--rule); border-radius: 4px; }
.reveal .fl-eq { font-size: 14px; margin: 2px 0 8px; }
.reveal .fl-ctrl .stats, .reveal .rx-ctrl .stats { font-size: 14px; }
.reveal .fl-foot { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 6px 0 0; }
.reveal .rx-grid { display: grid; grid-template-columns: 430px 1fr; gap: 22px; align-items: start; }
.reveal .rx-grid canvas.fr-lab { width: 430px; height: 430px; display: block; border: 1px solid var(--rule); border-radius: 8px; touch-action: none; cursor: grab; }
.reveal .rx-maps { display: flex; gap: 10px; }
.reveal .rx-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; min-height: 66px; }
.reveal .rx-thumb { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 4px; line-height: 0; }
.reveal .rx-thumb.sel { border-color: #e8770e; }
.reveal .rx-thumb canvas { width: 50px; height: 64px; image-rendering: pixelated; }
.reveal .rx-thumb span { position: absolute; left: 3px; top: 7px; font-size: 11px; line-height: 1; color: var(--ink); font-weight: 700; }
.reveal .rx-ctrl .bs-btn { font-size: 13.5px; padding: 4px 10px; }
.reveal .rx-ctrl .bs-btn:disabled { opacity: 0.4; cursor: default; }
.reveal .dam-grid { display: grid; grid-template-columns: 190px 190px 190px 1fr; gap: 6px 18px; align-items: start; }
.reveal .dam-ctrl { grid-row: span 2; }
.reveal .dam-ctrl .bs-row { margin: 0 0 8px; font-size: 14px; gap: 8px; }
.reveal .dam-ctrl input[type="range"] { width: 200px; margin: 0; }
.reveal .dam-ctrl .stats { font-size: 14px; }
.reveal .dam-setup { font-size: 13.5px; color: var(--ink); margin: 0 0 8px; line-height: 1.4; }
.reveal .n4-grid { display: grid; grid-template-columns: repeat(4, 160px) 1fr; gap: 4px 12px; align-items: start; }
.reveal .n4-ctrl { grid-row: span 2; }
.reveal .n4-ctrl .bs-row { margin: 0 0 7px; font-size: 13.5px; gap: 6px; }
.reveal .n4-ctrl .seg button { font-size: 13px; padding: 4px 8px; }
.reveal .n4-ctrl input[type="range"] { width: 170px; margin: 0; }
.reveal .n4-ctrl .stats { font-size: 13.5px; }
.reveal .n4-ctrl .stats td { padding: 2px 6px 2px 0; vertical-align: top; }
.reveal .ph-grid { display: grid; grid-template-columns: 640px 1fr; gap: 0 22px; align-items: start; }
.reveal .ph-maps { display: grid; grid-template-columns: 200px 200px 210px; gap: 0 10px; }
.reveal .ph-side .seg button { font-size: 13.5px; padding: 4px 9px; }
.reveal .ph-side .bs-btn { font-size: 13.5px; padding: 4px 9px; }
.reveal .ph-note { font-size: 13.5px; color: var(--ink); line-height: 1.4; margin: 6px 0 6px; }
.reveal .ang-grid { display: grid; grid-template-columns: 820px 1fr; gap: 0 18px; align-items: start; }
.reveal .ang-side .seg button { font-size: 13px; padding: 4px 7px; }
.reveal .ang-side .bs-row { font-size: 14px; gap: 6px; margin-bottom: 8px; }
.reveal .ang-table { font-size: 12.5px; margin-bottom: 6px; }
.reveal .ang-table th { font-weight: 700; color: var(--muted); text-align: left; padding: 2px 6px 2px 0; font-size: 12px; }
.reveal .ang-table td { padding: 2px 6px 2px 0; color: var(--ink); }
.reveal .ff-grid { display: grid; grid-template-columns: 760px 1fr; gap: 0 18px; align-items: start; }
.reveal .ff-side .bs-row { font-size: 14px; gap: 6px; margin-bottom: 7px; }
.reveal .ff-side .bs-row > span:first-child { min-width: 4.5em; }
.reveal .ff-side .bs-btn { font-size: 13px; padding: 3px 8px; }
.reveal .ff-side input[type="range"] { width: 200px; margin: 0; }
.reveal .ff-side input[type="number"] { width: 4.5em; font: inherit; font-size: 13.5px; padding: 2px 4px; border: 1px solid var(--rule); border-radius: 4px; }
.reveal .ff-side .seg button { font-size: 13px; padding: 3px 8px; }
.reveal .ff-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.reveal .ff-chip span { color: var(--muted); margin-left: 2px; }
.reveal .ff-side .stats { font-size: 14px; }
.reveal .vf-tight .bs-row { margin-bottom: 4px; }
.reveal .vb-grid { display: grid; grid-template-columns: 290px 340px 1fr; gap: 0 18px; align-items: start; }
.reveal .vb-lab { width: 290px; height: 290px; border-radius: 6px; touch-action: none; }
.reveal .vb-cap { font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; line-height: 1.3; }
.reveal .vb-labcol .bs-row { font-size: 13px; gap: 4px; margin-bottom: 5px; }
.reveal .vb-labcol .bs-btn { font-size: 12.5px; padding: 3px 7px; }
.reveal .vb-labcol .bs-btn:disabled { opacity: 0.4; }
.reveal .vb-maps { display: grid; grid-template-columns: 162px 162px; gap: 2px 14px; }
.reveal .vb-mcap { font-size: 13px; font-weight: 700; margin: 0 0 1px; }
.reveal .va-grid { display: grid; grid-template-columns: 690px 1fr; gap: 0 18px; align-items: start; }
.reveal .va-maps { display: grid; grid-template-columns: repeat(4, 162px); gap: 0 14px; }
.reveal .va-label { font-size: 12.5px; line-height: 1.35; color: var(--ink); padding-top: 18px; }
.reveal .va-side .bs-row > span:first-child { min-width: 6.5em; }
.reveal .va-table td { padding-right: 10px; }
.reveal .vb-msg { font-size: 14px; color: #c0392b; margin: 0; min-height: 1.2em; }
.reveal .gs-grid { display: grid; grid-template-columns: 620px 1fr; gap: 0 28px; align-items: start; }
.reveal .gs-imgs { display: grid; grid-template-columns: 300px 300px; gap: 0 20px; }
.reveal .gs-imgs .gs-pix { grid-column: 1 / -1; font-size: 14px; margin: 6px 0 0; min-height: 1.4em; }
.reveal .gs-cap { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.reveal .gs-side .stats { font-size: 14px; }
.reveal .gs-side .stats td { padding: 3px 10px 3px 0; vertical-align: middle; }
.reveal .gs-side .seg button { font-size: 13px; padding: 3px 10px; }
.reveal .gs-b1wrap { margin-top: 6px; }
.reveal .ce-grid { display: grid; grid-template-columns: 420px 1fr; gap: 0 26px; align-items: start; }
.reveal .ce-cvwrap { position: relative; } .reveal .ce-cv { width: 420px; height: 420px; cursor: crosshair; border-radius: 6px; }
.reveal .ce-side .bs-row { font-size: 14px; gap: 6px; margin-bottom: 6px; }
.reveal .ce-side .bs-row > span:first-child { min-width: 4em; }
.reveal .ce-side input[type="range"] { width: 150px; margin: 0; }
.reveal .ce-side .seg button { font-size: 12.5px; padding: 3px 7px; }
.reveal .ce-side .ph-note { margin: 4px 0 6px; } .reveal .ce-side .vb-cap { margin: 0; }
.reveal .pc-grid { display: grid; grid-template-columns: 270px 520px 1fr; gap: 0 22px; align-items: start; }
.reveal .pc-cv { width: 270px; height: 360px; cursor: crosshair; }
.reveal .pc-table { font-size: 14px; margin-top: 4px; }
.reveal .pc-side .bs-row { font-size: 15px; gap: 6px; margin-bottom: 8px; }
.reveal .pc-side input[type="range"] { width: 170px; margin: 0; }
.reveal .pc-side .seg button { font-size: 13px; padding: 3px 8px; }
.reveal .pt-grid { display: grid; grid-template-columns: 240px 560px 1fr; gap: 0 22px; align-items: start; }
.reveal .pt-map { width: 240px; height: 320px; cursor: crosshair; }
.reveal .pt-mapcol .bs-row { gap: 4px; margin-bottom: 5px; } .reveal .pt-mapcol .bs-btn { font-size: 12.5px; padding: 3px 7px; }
.reveal .pt-row2 { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; }
.reveal .pt-loop { width: 220px; height: 220px; display: block; }
.reveal .pt-views button { font-size: 12px; padding: 2px 6px; }
.reveal .pt-read .stats { font-size: 14px; } .reveal .pt-read .ph-note { margin-top: 0; }
.reveal .pt-side .bs-row { font-size: 15px; gap: 6px; margin-bottom: 8px; }
.reveal .pt-side input[type="range"] { width: 170px; margin: 0; }
.reveal .pt-side .seg button { font-size: 13px; padding: 3px 7px; }
.reveal .pl-grid { display: grid; grid-template-columns: 330px 1fr; gap: 0 36px; align-items: start; }
.reveal .pl-cv { width: 330px; height: 440px; }
.reveal .pl-side .bs-row { font-size: 15px; gap: 6px; margin-bottom: 8px; }
.reveal .pl-side .bs-row > span:first-child { min-width: 5.5em; }
.reveal .pl-side input[type="range"] { width: 220px; margin: 0; }
.reveal .pl-side .seg button, .reveal .ps-side .seg button { font-size: 13.5px; padding: 3px 9px; }
.reveal .pl-qcap { font-size: 13.5px; margin: 8px 0 2px; }
.reveal .pl-quad { border-collapse: collapse; font-size: 18px; margin: 0 0 8px; }
.reveal .pl-quad td { border: 1px solid var(--rule); padding: 4px 22px; text-align: center; }
.reveal .ps-grid { display: grid; grid-template-columns: 680px 1fr; gap: 0 26px; align-items: start; }
.reveal .ps-maps { display: grid; grid-template-columns: repeat(4, 150px); gap: 0 16px; }
.reveal .ps-d { font-size: 14px; margin: 2px 0 0; text-align: center; }
.reveal .ps-side .bs-row { font-size: 15px; gap: 6px; margin-bottom: 8px; }
.reveal .ps-side .bs-row > span:first-child { min-width: 4em; }
.reveal .ps-side input[type="range"] { width: 220px; margin: 0; }
.reveal .ps-side .bs-btn { font-size: 13px; padding: 3px 8px; }
.reveal .bd-grid { display: grid; grid-template-columns: 700px 1fr; gap: 0 24px; align-items: start; }
.reveal .bd-imgs { display: flex; gap: 14px; align-items: flex-start; }
.reveal .bd-arrows { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; }
.reveal .bd-arrows svg { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: visible; }
.reveal .bd-arrows .bs-row { font-size: 14px; gap: 6px; } .reveal .bd-arrows input[type="range"] { width: 200px; margin: 0; }
.reveal .bd-arrows .stats { font-size: 14px; }
.reveal .bd-hist { display: block; width: 390px; height: 96px; }
.reveal .bd-range { position: relative; width: 390px; height: 20px; margin: 0 0 2px; }
.reveal .bd-side .bd-range input[type="range"] { position: absolute; left: 0; top: 0; width: 390px; margin: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; height: 20px; }
.reveal .bd-side .bd-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.reveal .bd-side .bd-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #e8770e; border: 2px solid #fff; box-shadow: 0 0 0 1px #c2610a; cursor: ew-resize; }
.reveal .bd-side .bd-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #e8770e; border: 2px solid #fff; cursor: ew-resize; }
.reveal .bd-range::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: #d8dee6; }
.reveal .bd-sel { font-size: 14px; margin: 0 0 8px; }
.reveal .bd-side .bs-row { font-size: 14px; gap: 6px; margin-bottom: 6px; }
.reveal .bd-side .bs-row > span:first-child { min-width: 9.5em; }
.reveal .bd-side input[type="range"] { width: 150px; margin: 0; }
.reveal .bd-side .bs-btn { font-size: 13px; padding: 3px 8px; }
.reveal .bd-side .bs-btn:disabled { opacity: 0.4; cursor: default; }
.reveal .bd-pix { font-size: 14px; margin: 2px 0 4px; min-height: 1.4em; }
.reveal .bd-list { margin: 2px 0 6px; }
.reveal .bd-side .stats { font-size: 14px; }
.reveal #build .seg button { font-size: 13px; padding: 3px 8px; }
.reveal .gs-timer { height: 6px; background: #eef1f4; border-radius: 3px; margin: 2px 0 10px; overflow: hidden; }
.reveal .gs-timer > div { height: 100%; width: 0; background: #e8770e; }
.reveal .gs-answer .bs-btn { font-size: 17px; padding: 6px 18px; }
.reveal .gs-answer .bs-btn:disabled { opacity: 0.4; cursor: default; }
.reveal .gs-pt { font-size: 16px; margin: 0 0 6px; min-height: 1.4em; }
.reveal .gs-fb { font-size: 17px; font-weight: 700; margin: 4px 0 8px; min-height: 1.6em; }
.reveal .gs-fb.gs-right, .reveal .gs-fb.gs-wrong { color: #fff; display: inline-block; padding: 3px 12px; border-radius: 5px; }
.reveal .gs-fb.gs-right { background: #2e8b3a; }
.reveal .gs-fb.gs-wrong { background: #c0392b; }
.reveal .gs-tag { color: #fff; font-size: 12.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.reveal .gw-grid { display: grid; grid-template-columns: 600px 1fr; gap: 0 32px; align-items: start; }
.reveal .gw-grid svg { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: visible; }
.reveal .gw-side .bs-row { font-size: 15px; }
.reveal .gw-side input[type="range"] { width: 260px; }
.reveal .gw-side .stats { font-size: 15px; }
.reveal .vf-tight .stats td { padding: 0.05em 0.9em 0.05em 0; }
.reveal .vfa-grid { display: grid; grid-template-columns: 760px 1fr; gap: 0 18px; align-items: start; }
.reveal .vfa-side .bs-row { font-size: 14px; gap: 8px; margin-bottom: 8px; }
.reveal .vfa-side input[type="range"] { width: 260px; margin: 0; }
.reveal .tx-grid { display: grid; grid-template-columns: 700px 1fr; gap: 0 20px; align-items: start; }
.reveal .tx-maps { display: grid; grid-template-columns: 160px repeat(3, 180px); gap: 0 6px; }
.reveal .tx-colcap { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 2px; }
.reveal .tx-rowcap { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 2px; white-space: nowrap; }
.reveal .tx-ctrl .bs-row { margin: 0 0 6px; font-size: 14px; gap: 8px; }
.reveal .tx-ctrl .bs-row > span:first-child { min-width: 4.5em; }
.reveal .tx-ctrl input[type="range"] { width: 250px; margin: 0; }
.reveal .tx-ctrl .stats { font-size: 14px; }
.reveal .tx-note { font-size: 13px; color: var(--muted); line-height: 1.35; margin: 2px 0 6px; }
.reveal .rx-q { font-size: 14.5px; line-height: 1.4; margin: 0 0 8px; }
/* frames of reference 2: a pulse */
.reveal #frames-pulse h2 { font-size: 1.15em; margin-bottom: 0.3em; }
.reveal .fp-cols { display: grid; grid-template-columns: 412px 412px 1fr; gap: 16px; align-items: start; }
.reveal .fp-cols canvas { width: 404px; height: 404px; display: block; margin: 0 auto; border: 1px solid var(--rule); border-radius: 8px; cursor: grab; }
.reveal .fp-read { font-size: 13px; line-height: 1.35; color: var(--ink); margin: 5px 4px 0; min-height: 2.8em; }
.reveal .fp-ctrl .bs-q { font-size: 14.5px; margin-bottom: 8px; }
.reveal .fp-ctrl .bs-row { margin: 0 0 7px; font-size: 14px; gap: 8px; }
.reveal .fp-ctrl .bs-row > span:first-child { min-width: 100%; }
.reveal .fp-ctrl input[type="range"] { width: 230px; margin: 0; }
.reveal .fp-ctrl .bs-btn { font-size: 13.5px; padding: 4px 11px; }
.reveal .fp-pad { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; }
.reveal .fp-pad .bs-btn { padding: 4px 0; }
.reveal .fp-status { font-size: 13.5px; color: var(--ink); min-height: 1.4em; margin: 2px 0 0; }
.reveal .fp-ctrl .bs-row > span.fp-envlab { min-width: 0; }
.reveal .fp-ctrl .seg button { font-size: 13.5px; padding: 4px 10px; }
.reveal .fp-muted { color: var(--muted); }
.reveal .fp-foot { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 6px 0 0; }
/* frames of reference */
.reveal #frames h2 { font-size: 1.15em; margin-bottom: 0.3em; }
.reveal .fr-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reveal .fr-views canvas { width: 372px; height: 372px; display: block; margin: 0 auto; border: 1px solid var(--rule); border-radius: 8px; cursor: grab; }
.reveal .fr-cap { font-size: 15px; font-weight: 700; margin-bottom: 4px; text-align: center; }
.reveal .fr-read { font-size: 13px; line-height: 1.35; color: var(--ink); margin: 5px 4px 0; min-height: 4.2em; }
.reveal .fr-ctrl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 6px; }
.reveal .fr-ctrl .bs-row { margin: 0 0 7px; font-size: 14px; gap: 8px; }
.reveal .fr-ctrl .bs-row > span:first-child { min-width: 11.2em; }
.reveal .fr-ctrl input[type="range"] { width: 150px; margin: 0; }
.reveal .fr-ctrl .seg button { font-size: 13.5px; padding: 4px 10px; }
.reveal .fr-ctrl .bs-btn { font-size: 13.5px; padding: 4px 11px; }
.reveal .fr-blur { color: var(--muted); }
.reveal .fr-foot { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 4px 0 0; }
/* the guessing game (Exercises 4-1 #guess and 4-3 #guess-afi, js/guess.js): the asked point's values in boxes, the B1 map beside the results */
.reveal .gs-task { margin: 6px 0 8px; padding: 7px 12px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #b42318; background: #fdecea; border: 2px solid #d92d20; border-radius: 8px; }
.reveal .gs-reveal { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.reveal .gs-reveal:hover { background: #174a78; border-color: #174a78; color: #fff; }
.reveal .gs-reveal[hidden] { display: none; }
.reveal .gs-status { font-size: 18px; color: var(--accent); }
.reveal .gs-pt { display: none; }
.reveal .gs-vals { display: flex; gap: 12px; margin: 4px 0 10px; }
.reveal .gs-vals > div { flex: 1; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 12px; }
.reveal .gs-vals span { display: block; font-size: 13px; color: var(--muted); }
.reveal .gs-vals b { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.reveal .gs-out { display: flex; gap: 14px; align-items: flex-start; }
.reveal .gs-out .gs-b1wrap { margin-top: 0; flex: none; }
.reveal .gs-hint { background: #fff4d6; border-left: 4px solid #e0a800; border-radius: 6px; padding: 4px 10px; }

/* ===================================================================== B0 exercises (5-1 to 5-3) */
/* The predict-first quiz card (js/hl-quiz.js), from Exercise 4-3's inline styles. */
.reveal .hq-lead { font-size: 16px; color: var(--muted); margin: 0 0 4px; }
.reveal .hq-card { margin-top: 14px; padding: 14px 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); font-size: 18px; }
.reveal .hq-top { display: flex; justify-content: space-between; font-size: 15px; color: var(--muted); }
.reveal .hq-top b { color: var(--accent); }
.reveal .hq-q { font-size: 22px; font-weight: 700; line-height: 1.35; margin: 8px 0 12px; color: var(--ink); }
.reveal .hq-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.reveal .hq-btns .bs-btn { font-size: 18px; padding: 8px 22px; background: #fff; }
.reveal .hq-btns .bs-btn:disabled { cursor: default; opacity: 0.45; }
.reveal .hq-btns .bs-btn.hq-pick { opacity: 1; border-width: 2px; border-color: #c0392b; }
.reveal .hq-btns .bs-btn.hq-good { opacity: 1; border-width: 2px; border-color: #2e8b3a; background: #e6f4e8; font-weight: 700; }
.reveal .hq-fb { display: inline-block; margin: 12px 0 0; padding: 3px 12px; border-radius: 5px; color: #fff; font-weight: 700; }
.reveal .hq-fb.hq-right { background: #2e8b3a; } .reveal .hq-fb.hq-wrong { background: #c0392b; }
.reveal .hq-fb[hidden], .reveal .hq-why[hidden], .reveal .hq-next[hidden], .reveal .hq-btns .bs-btn[hidden] { display: none; }
.reveal .hq-why { margin: 8px 0 0; line-height: 1.4; }
.reveal .hq-check { margin: 8px 0 0; padding: 6px 12px; font-size: 16px; background: #fff4d6; border-left: 4px solid #e0a800; border-radius: 6px; }
.reveal .hq-check[hidden] { display: none; }
.reveal .hq-check .hq-go { display: inline-block; margin: 6px 8px 0 0; font-size: 15px; font-weight: 700; background: #fff; border-color: #e0a800; }
.hq-back { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30; font: 700 15px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 7px 16px; border: 2px solid #e0a800; border-radius: 8px; background: #fff4d6; color: #1d2733; cursor: pointer; }
.hq-back[hidden] { display: none; }
.reveal .hq-next { display: block; margin-top: 12px; font-size: 16px; }
.reveal .sl-answer { margin: 0.4em 0 0; padding: 8px 14px; background: var(--panel); border-left: 4px solid var(--accent); border-radius: 6px; }

/* Two columns: the picture on the left, the text, controls and numbers on the right. */
.reveal .ex-grid { display: grid; grid-template-columns: var(--left, 600px) 1fr; gap: 0 34px; align-items: start; }
.reveal .ex-side { font-size: 16px; line-height: 1.4; }
.reveal .ex-lead { margin: 0 0 12px; }
.reveal .ex-side .bs-row { font-size: 15px; }
.reveal .ex-side .bs-row > span:first-child { min-width: 7.5em; }
.reveal .ex-side .stats { width: 100%; font-size: 15px; }
.reveal .ex-side .stats td b { font-variant-numeric: tabular-nums; }
.reveal .ex-cap { font-size: 13px; color: var(--muted); margin: 4px 0 0; text-align: center; }
.reveal .warn { color: #c0392b; font-weight: 700; }
.reveal .ok { color: #2e8b3a; font-weight: 700; }

/* "Your answer" boxes: a number, Check, then right / wrong. */
.reveal .ask { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.reveal .ask p { margin: 0 0 6px; }
.reveal .ask-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reveal .ask input[type="number"] { font: inherit; width: 6em; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; }
.reveal .ask-fb { font-weight: 700; }
.reveal .ask-fb.right { color: #2e8b3a; } .reveal .ask-fb.wrong { color: #c0392b; }

/* The answer bullets behind "Show the answer", as in Exercise 4-1. */
.reveal .ans { font-size: 17px; line-height: 1.4; margin: 10px 0 0; padding: 10px 14px 10px 32px; background: var(--panel); border: 2px solid var(--accent); border-radius: 10px; }
.reveal .ans li { margin: 5px 0; }
.reveal .ans[hidden] { display: none; }

/* Tabs across the top of a slide, for an exercise in several parts (js/ex-common.js). */
.reveal .ex-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--rule); }
.reveal .ex-tabs button { font: inherit; font-size: 16px; padding: 7px 18px; margin-bottom: -2px; border: 2px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: none; color: var(--muted); cursor: pointer; }
.reveal .ex-tabs button:hover { color: var(--accent); }
.reveal .ex-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 700; border-color: var(--rule); border-bottom: 2px solid #fff; }
.reveal .ex-tabs button.done::after { content: " ✓"; color: #2e8b3a; }
.reveal .ex-panel[hidden] { display: none; }

/* Exercise 5-2, the unwrapping viewers (js/unwrap-demo.js, js/nifti-lite.js): four pixel panels and the controls */
.reveal .uw-view .fig-layout { grid-template-columns: 290px 1fr; column-gap: 24px; }
.reveal .uw-host { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; justify-content: flex-start; align-content: flex-start; }
.reveal .uw-host figure { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; width: 215px; }
.reveal .uw-host canvas { width: 215px; height: 215px; image-rendering: pixelated; display: block; background: #e9edf1; outline: 1px solid #c9d1db; }
.reveal .uw-host figcaption { font-size: 15px; color: var(--muted); margin-top: 4px; }
.reveal .uw-ctrl { display: grid; gap: 10px; font-size: 15px; margin-top: 4px; }
.reveal .uw-ctrl label, .reveal .uw-ctrl .uw-row { display: grid; grid-template-columns: 5.6em 1fr 5em; align-items: center; gap: 8px; color: var(--muted); }
.reveal .uw-ctrl .uw-row .seg { grid-column: 2 / 4; justify-self: start; }
.reveal .uw-ctrl label[hidden] { display: none; }
.reveal .uw-ctrl b { color: var(--ink); white-space: nowrap; }
.reveal .uw-stats { font-size: 15px; margin: 12px 0 0; line-height: 1.45; }
.reveal .uw-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.reveal .uw-view .uw-back { display: none; }
.reveal .uw-view.uw-own .uw-back { display: inline-block; }
.reveal .uw-view.uw-mask-none .uw-thr-row, .reveal .uw-view.uw-no-mag .uw-thr-row, .reveal .uw-view.uw-no-mag .uw-mask-row { display: none; }
/* a file dragged over the slide */
.reveal .uw-view.uw-dropping .uw-host { outline: 3px dashed var(--accent); outline-offset: 8px; border-radius: 6px; }
/* the intervals' list under their panel: a swatch and [lower, upper) for each */
.reveal .uw-int-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 6px; font-size: 13px; color: var(--ink); text-align: left; width: 100%; font-variant-numeric: tabular-nums; }
.reveal .uw-int-list span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.reveal .uw-int-list i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
/* real data: 8 panels in 4 columns; the B0 maps and ΔTE only with two echoes */
.reveal .uw-view[data-uw="real"] .uw-host figure { width: 146px; }
.reveal .uw-view[data-uw="real"] .uw-host canvas { width: 146px; height: 166px; }
.reveal .uw-view[data-uw="real"] .uw-host { gap: 8px 9px; }
.reveal .uw-view[data-uw="real"] .uw-cbar { font-size: 11px; }
.reveal .uw-view[data-uw="real"] .uw-host figcaption { font-size: 13px; }
.reveal .uw-view:not(.uw-two-echoes) .uw-map, .reveal .uw-view:not(.uw-two-echoes) .uw-dte-row { display: none; }
.reveal .uw-ctrl .uw-dte { width: 5em; font: inherit; padding: 1px 4px; }
/* colour bars under the phase and B0 panels: the ramp, then −, 0, + labels */
.reveal .uw-cbar { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 3px; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.reveal .uw-cbar i { grid-column: 1 / -1; height: 9px; border-radius: 2px; border: 1px solid #c9d1db; }
.reveal .uw-cbar span { margin-top: 1px; }
.reveal .uw-cbar span:nth-of-type(1) { text-align: left; }
.reveal .uw-cbar span:nth-of-type(2) { text-align: center; }
.reveal .uw-cbar span:nth-of-type(3) { text-align: right; }
/* the lock button at the right end of a colour bar */
.reveal .uw-cbar.uw-lockable { grid-template-columns: 1fr 1fr 1fr auto; column-gap: 0; }
.reveal .uw-cbar.uw-lockable i { grid-column: 1 / 4; }
.reveal .uw-cbar .uw-lock { grid-column: 4; grid-row: 1 / 3; align-self: center; margin-left: 4px; font-size: 13px; line-height: 1; padding: 3px 4px; border: 1px solid #c9d1db; border-radius: 5px; background: #fff; cursor: pointer; }
.reveal .uw-cbar .uw-lock[aria-pressed="true"] { background: #e9eef5; border-color: var(--accent); }
/* the citation for the unwrapping method, under the controls */
.reveal .uw-cite { font-size: 12px; line-height: 1.35; color: var(--muted); margin: 10px 0 0; }
/* which file is the phase and which the magnitude */
.reveal .uw-roles { flex-basis: 100%; font-size: 13px; line-height: 1.4; color: var(--muted); margin: 2px 0 0; word-break: break-all; }
.reveal .uw-roles b { color: var(--ink); font-weight: 600; }
/* the poor-shim and simulated-head slides: 11 panels in 5 columns; the expected B0 only when it is known */
.reveal .uw-view[data-grad] .uw-host figure, .reveal .uw-view[data-truth] .uw-host figure { width: 122px; }
.reveal .uw-view[data-grad] .uw-host canvas, .reveal .uw-view[data-truth] .uw-host canvas { width: 122px; height: 145px; }
.reveal .uw-view[data-grad] .uw-host, .reveal .uw-view[data-truth] .uw-host { gap: 8px 8px; }
.reveal .uw-view[data-grad] .uw-cbar, .reveal .uw-view[data-truth] .uw-cbar { font-size: 10px; }
.reveal .uw-view[data-grad] .uw-host figcaption, .reveal .uw-view[data-truth] .uw-host figcaption { font-size: 12px; }
.reveal .uw-view.uw-no-truth .uw-map:has(.uw-c-b0e), .reveal .uw-view.uw-no-truth .uw-map:has(.uw-c-b0d) { display: none; }
/* the unwrap switch only with two echoes; unwrapping Δφ, the echo slider has nothing to choose */
.reveal .uw-view:not(.uw-two-echoes) .uw-unwrap-row { display: none; }
.reveal .uw-view.uw-diff .uw-t-row { display: none; }
/* the pipeline slide (.uw-pipe): input | one step at a time, in tabs | output */
.reveal .uw-pipe .pipe { display: grid; grid-template-columns: 124px 640px 240px; column-gap: 30px; align-items: start; margin-top: 4px; }
.reveal .uw-pipe .pipe-mid, .reveal .uw-pipe .pipe-out { border-left: 1px solid var(--rule); padding-left: 30px; min-height: 520px; }
.reveal .uw-pipe h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.reveal .uw-pipe figure { margin: 0 0 6px; display: flex; flex-direction: column; align-items: center; }
.reveal .uw-pipe .pipe-in figure { width: 116px; }
.reveal .uw-pipe .pipe-out figure { width: 210px; }
.reveal .uw-pipe canvas { image-rendering: pixelated; display: block; background: #e9edf1; outline: 1px solid #c9d1db; }
.reveal .uw-pipe figcaption { font-size: 13px; color: var(--muted); margin-top: 3px; }
.reveal .uw-pipe .pipe-in .uw-cbar { font-size: 10px; }
.reveal .uw-pipe .ex-tabs { margin-bottom: 10px; }
.reveal .uw-pipe .ex-tabs button { font-size: 15px; padding: 6px 14px; }
.reveal .uw-pipe .pipe-echo { margin: 0 0 12px; width: 300px; }
.reveal .uw-pipe .pipe-hidden { display: none !important; }
.reveal .uw-pipe .ex-panel:not([hidden]) { display: grid; grid-template-columns: 280px 300px; column-gap: 26px; align-items: start; }
.reveal .uw-pipe .ex-panel figure { width: 280px; }
.reveal .uw-pipe .ex-panel .uw-ctrl { margin-top: 0; }
.reveal .uw-pipe .ex-panel .uw-stats { margin: 0; }
.reveal .uw-pipe .pipe-in, .reveal .uw-pipe .pipe-out { display: flex; flex-direction: column; align-items: center; }
.reveal .uw-pipe .pipe-out { padding-left: 30px; }
.reveal .uw-pipe .ex-panel.pipe-proto:not([hidden]) { display: block; max-width: 520px; }
.reveal .uw-pipe .pipe-proto .uw-ctrl label, .reveal .uw-pipe .pipe-proto .uw-ctrl .uw-row { grid-template-columns: 7em auto 1fr; }
.reveal .uw-pipe .uw-num { width: 5.5em; font: inherit; padding: 1px 4px; }
.reveal .uw-pipe .pipe-proto .uw-ctrl > label > b { justify-self: start; }
.reveal .uw-pipe.uw-te-delta .te-pair, .reveal .uw-pipe:not(.uw-te-delta) .te-delta { display: none; }
.reveal .uw-pipe:not(.uw-mask-file) .mask-file-row { display: none; }
.reveal .uw-view.uw-mask-file .uw-thr-row { display: none; }
.reveal .uw-pipe .ex-panel .uw-stats { margin-top: 6px; }
.reveal .uw-pipe[data-tab="view"] .pipe-echo, .reveal .uw-pipe[data-tab="proto"] .pipe-echo, .reveal .uw-pipe[data-tab="mask"] .pipe-echo { display: none; }   /* the mask: from echo 1, for both */
.reveal .uw-pipe.uw-unwrap-none .ex-tabs [data-tab="int"], .reveal .uw-pipe.uw-unwrap-none .ex-tabs [data-tab="unw"], .reveal .uw-pipe.uw-unwrap-none .ex-tabs [data-tab="cmp"] { display: none; }   /* nothing to unwrap */
.reveal .uw-pipe .pipe-slice { width: 116px; margin-top: 6px; }
.reveal .uw-pipe .pipe-slice label { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 13px; text-align: center; }
.reveal .uw-pipe .pipe-slice label[hidden] { display: none; }
.reveal .uw-pipe .pipe-slice input { width: 100%; }
.reveal .uw-pipe .pipe-out .uw-cite { font-size: 11px; width: 210px; margin: 8px 0 0; }
.reveal .uw-pipe .uw-view-seg { justify-self: start; }
.reveal .uw-pipe .ex-panel .uw-cite { margin: 0; }
/* the steps slides: the citation at the bottom of the Intervals and Unwrapped tabs; the unwrapped image centred */
.reveal .uw-pipe .ex-panel > .uw-cite { grid-column: 1 / -1; margin: 14px 0 0; font-size: 12px; }
.reveal .uw-pipe .ex-panel.pipe-unw:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
.reveal .uw-pipe .ex-panel.pipe-unw > .uw-cite { text-align: center; max-width: 560px; }
/* the viewer tab: a mini qMRLab viewer (its palette: zinc greys, olive accent, mono names, black image panel) */
.reveal .uw-pipe .ex-panel.pipe-view:not([hidden]) { display: block; }
.reveal .uw-mv { display: grid; grid-template-columns: 250px 1fr; gap: 10px; height: 440px; padding: 8px; border: 1px solid #e4e4e7; border-radius: 10px; background: #f6f6f7; font-size: 12px; color: #18181b; }
.reveal .uw-mv .mv-side { background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; padding: 8px 10px; overflow: hidden; }
.reveal .uw-mv .mv-h { margin: 2px 0 6px; font: 500 10px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a93; }
.reveal .uw-mv .mv-h + .uw-mv-xy, .reveal .uw-mv .uw-mv-layers + .mv-h { margin-top: 10px; }
.reveal .uw-mv .mv-group { margin: 6px 0 2px; font-size: 10px; color: #8a8a93; }
.reveal .uw-mv .mv-layer { display: grid; grid-template-columns: 12px 1fr auto 26px; gap: 6px; align-items: center; width: 100%; height: 24px; padding: 0 6px 0 8px; margin: 1px 0; border: 1px solid transparent; border-radius: 7px; background: none; color: #18181b; cursor: pointer; text-align: left; font: inherit; }
.reveal .uw-mv .mv-layer:hover { background: #f1f1f3; }
.reveal .uw-mv .mv-layer.sel { background: #e7e7ea; border-color: #d4d4d8; box-shadow: inset 2px 0 0 #4d7c0f; }
.reveal .uw-mv .mv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px ui-monospace, "SF Mono", Menlo, monospace; }
.reveal .uw-mv .mv-val { font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: #4d7c0f; text-align: right; font-variant-numeric: tabular-nums; }
.reveal .uw-mv .mv-unit { font-size: 10px; color: #8a8a93; }
.reveal .uw-mv .mv-swatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid #d4d4d8; }
.reveal .uw-mv .mv-gray { background: linear-gradient(to right, #000, #fff); }
.reveal .uw-mv .mv-phase { background: linear-gradient(to right, rgb(86,124,189), #fff, rgb(196,92,84)); }
.reveal .uw-mv .mv-bwr { background: linear-gradient(to right, rgb(5,48,97), #fff, rgb(103,0,31)); }
.reveal .uw-mv .uw-mv-xy { margin: 0; font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: #52525b; white-space: pre; }
.reveal .uw-mv .mv-main { display: flex; flex-direction: column; min-width: 0; background: #000; border: 1px solid #e4e4e7; border-radius: 10px; padding: 8px; }
.reveal .uw-mv .uw-mv-view { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.reveal .uw-mv .uw-mv-canvas { display: block; cursor: crosshair; touch-action: none; }
.reveal .uw-mv .uw-mv-cbar { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; font: 10px ui-monospace, "SF Mono", Menlo, monospace; color: #d4d4d8; }
.reveal .uw-mv .uw-mv-cbar i { grid-column: 1 / -1; height: 8px; border-radius: 2px; }
.reveal .uw-mv .uw-mv-cbar span:last-child { text-align: right; }
.reveal .uw-pipe .uw-mv canvas { outline: none; background: #000; }
.reveal .uw-mv.mv-nocur .mv-h-cur, .reveal .uw-mv.mv-nocur .mv-val, .reveal .uw-mv.mv-nocur .mv-unit { visibility: hidden; }
.reveal .uw-pipe .uw-drag-range canvas, .reveal .uw-pipe .uw-drag-range .uw-cbar i { cursor: ew-resize; touch-action: none; }
.reveal .uw-pipe .uw-drag-range { user-select: none; }
.reveal .uw-pipe .ex-panel.pipe-cmp:not([hidden]) { display: flex; gap: 14px; justify-content: center; }
.reveal .uw-pipe .ex-panel.pipe-cmp figure { width: 190px; }
/* the exercises' title slides: "In this exercise, we will cover:" and a numbered list */
.reveal .ex-cover-lead { margin: 1.1em 0 0.3em; font-size: 1.05em; color: var(--ink); }
.reveal .ex-cover { list-style: none; counter-reset: cover; margin: 0 0 0 0.6em; padding: 0; font-size: 1.05em; line-height: 1.6; }
.reveal .ex-cover li { counter-increment: cover; }
.reveal .ex-cover li::before { content: counter(cover) "."; display: inline-block; width: 1.5em; font-weight: 700; color: var(--accent); }
/* the summary slides: our tools (Shimming Toolbox, NeuroPoly) */
.reveal .tool-promo { display: flex; align-items: center; gap: 24px; margin-top: 0.7em; padding: 6px 18px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; max-width: 1130px; }
.reveal .tool-promo img { display: block; margin: 0; }
.reveal .tool-promo p { flex: 1; margin: 0; font-size: 0.8em; line-height: 1.45; }
.reveal .tool-promo code { font-size: 0.9em; }
.reveal .tool-promo .tool-qmrlab { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.8em; white-space: nowrap; }
.reveal .tool-promo { gap: 20px; }
/* Exercise 5-2: the task, under the title */
.reveal .uw-goal { font-size: 18px; margin: -4px 0 8px; color: var(--ink); }