). */
.reveal section.cli-slide pre {
width: 100%;
margin: 0 0 var(--r-block-margin) 0;
}
/* ── Jupyter-style notebook: stacked cells sharing one width ──────────────────
wraps rows, each a prompt gutter
(In [n]:) plus a grey input body. Use class "frame" on a cell whose body is an
iframe so the embed reads as a live widget cell in the same notebook. */
.reveal .notebook {
background: #fff;
border: 1px solid var(--omsf-border);
border-radius: var(--omsf-radius);
padding: 16px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
text-align: left;
}
.reveal .notebook .nb-cell {
display: flex;
align-items: flex-start;
background: #f4f4f4;
border: 1px solid #e2e2e2;
border-radius: 4px;
margin: 0 0 14px 0;
}
.reveal .notebook .nb-cell:last-child {
margin-bottom: 0;
}
.reveal .notebook .nb-prompt {
flex: none;
width: 92px;
padding: 14px 12px 0 0;
font-family: var(--r-code-font);
font-size: 0.5em;
line-height: 1.5;
color: #303f9f;
text-align: right;
white-space: nowrap;
user-select: none;
}
.reveal .notebook .nb-body {
flex: 1;
min-width: 0;
}
/* fenced code blends into the grey cell — no inner box of its own */
.reveal .notebook .nb-body pre {
font-size: 0.62em;
margin: 0;
}
.reveal .notebook .nb-body pre code {
background: transparent;
border: none;
border-radius: 0;
padding: 12px 14px;
max-height: none;
}
/* iframe cell: the live widget, padded so the grey frames it */
.reveal .notebook .nb-cell.frame .nb-body {
padding: 12px;
}
.reveal .notebook .nb-body iframe {
width: 100%;
height: 560px;
border: 0;
border-radius: 3px;
background: #fff;
display: block;
margin: 0;
}
/* ═══════════════════════════════════════════
Tables
═══════════════════════════════════════════ */
.reveal table {
border-collapse: collapse;
}
.reveal table th {
font-weight: 400;
background: var(--omsf-bg-mint);
border-bottom: 2px solid var(--omsf-accent-dark);
}
.reveal table th,
.reveal table td {
padding: 0.4em 0.8em;
border-bottom: 1px solid var(--omsf-border);
}
/* ═══════════════════════════════════════════
Blockquote
═══════════════════════════════════════════ */
.reveal blockquote {
background: var(--omsf-bg-warm);
border-left: 6px solid var(--omsf-accent);
border-radius: 0 var(--omsf-radius) var(--omsf-radius) 0;
box-shadow: none;
font-style: normal;
padding: 0.75em 1em;
}
/* ═══════════════════════════════════════════
Chrome: controls, progress, slide number
═══════════════════════════════════════════ */
.reveal .controls {
color: var(--omsf-accent-dark);
}
.reveal .progress {
color: var(--omsf-accent-dark);
height: 6px;
background: rgba(0, 0, 0, 0.1);
}
.reveal .slide-number {
background: transparent;
color: var(--omsf-text-muted);
font-family: var(--r-main-font);
}
/* Muted helper text */
.reveal .omsf-muted {
color: var(--omsf-text-muted);
}
/* Divider */
.reveal hr.omsf-divider {
border: none;
border-top: 1px solid var(--omsf-border);
margin: 1em 0;
}
/* ═══════════════════════════════════════════
Workshop layout helpers (framejs.io · OMSF)
═══════════════════════════════════════════ */
/* Inline text accents */
.reveal .accent {
color: var(--omsf-accent-dark);
}
.reveal .muted {
color: var(--omsf-text-muted);
font-weight: 400;
}
.reveal .nowrap {
white-space: nowrap;
}
/* Small uppercase eyebrow / kicker pill above a title */
.reveal .kicker {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.45em;
color: var(--omsf-text-muted);
margin-bottom: 1.1em;
padding: 0.35em 1em;
border: 1px solid var(--omsf-border);
border-radius: 9999px;
background: var(--omsf-bg-mint);
}
/* OMSF logo above everything on the title slides */
.reveal img.deck-logo {
display: block;
margin: 0 auto 0.6em;
height: 150px;
width: auto;
border: 0;
background: none;
box-shadow: none;
}
/* Title slide */
.reveal section.title-slide {
text-align: center;
justify-content: center;
align-items: center;
}
.reveal section.title-slide h1 {
margin: 0 0 0.1em 0;
}
.reveal section.title-slide h3 {
color: var(--omsf-text-soft);
font-weight: 100;
}
.reveal .byline {
color: var(--omsf-text-muted);
font-size: 0.8em;
margin-top: 1.4em;
}
/* A large single statement */
.reveal .lead {
font-size: 1.45em;
font-weight: 100;
line-height: 1.25;
}
/* Concluding takeaway bar */
.reveal .concl {
margin-top: 1em;
display: inline-block;
background: var(--omsf-bg-mint);
border-left: 6px solid var(--omsf-accent-dark);
border-radius: 0 var(--omsf-radius) var(--omsf-radius) 0;
padding: 0.6em 1em;
font-weight: 500;
text-align: left;
}
/* Footnote: mark a word with †, then add a matching
† …
near the bottom of the slide. The marker
is a small raised dagger; the note is muted, small, set off by a thin rule. */
.reveal sup.fn {
font-size: 0.6em;
font-weight: 600;
color: var(--omsf-border-dark);
margin-left: 0.1em;
}
.reveal .footnote {
margin-top: 1.4em;
padding-top: 0.5em;
border-top: 1px solid var(--omsf-border);
max-width: 60ch;
font-size: 0.42em;
line-height: 1.45;
color: var(--omsf-text-muted);
text-align: left;
}
.reveal .footnote sup {
font-weight: 600;
color: var(--omsf-border-dark);
}
/* Source credit / citation — a small attribution line under a slide's text
content. Set off from the body by a hair-thin rule and a leading em-dash, in
the muted footnote register; the name itself is lightly emphasised. Mark up as
Created by Name, Affiliation
. */
.reveal .cite {
margin-top: 1.1em;
padding-top: 0.5em;
border-top: 1px solid var(--omsf-border);
max-width: 48ch;
font-size: 0.46em;
font-style: italic;
line-height: 1.4;
color: var(--omsf-text-muted);
text-align: left;
}
.reveal .cite::before {
content: "\2014\00a0"; /* em-dash + nbsp */
}
.reveal .cite .who {
font-style: normal;
font-weight: 500;
color: var(--omsf-text-soft);
}
/* Two-column grid */
.reveal .two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center;
text-align: left;
}
.reveal .two-col.top {
align-items: start;
}
/* Right column always aligns its content to the top (left column keeps the
grid's default vertical alignment). */
.reveal .two-col > *:nth-child(2) {
align-self: start;
}
/* Give the right column more room. Stack the modifiers by how hard you want to
lean: lean-left (mild) → lean-left-xl (more) → lean-left-xxl (most). */
.reveal .two-col.lean-left {
grid-template-columns: 0.85fr 1.15fr;
}
.reveal .two-col.lean-left-xl {
grid-template-columns: 0.65fr 1.35fr;
}
.reveal .two-col.lean-left-xxl {
grid-template-columns: 0.5fr 1.5fr;
}
/* NOTE: put `two-col` on a wrapping , NOT on the via
. Reveal writes `display:block` as an INLINE
style on every section (to show/hide slides), and inline styles beat any
stylesheet rule — so a grid on the section silently collapses to one column.
A has no such inline style, so this rule just works, no overrides. */
/* Embedded framejs iframe — two height behaviours, same look.
A framejs embed always sizes its app to FILL the host iframe (its inner frame
is min-height:100vh / max-height:100% / overflow:hidden) and the Plotly/3Dmol
panels swallow the mouse wheel, so the iframe never makes its own scrollbar.
Whatever scrolling we want has to live on this WRAPPER — drag the mint
scrollbar, the wheel is captured by the charts.
1. .embed-frame FIT — never taller than the slide, so it can't
overflow; if its content is taller than the cap
the wrapper scrolls. Cap with --embed-fit-h
(defaults to the usable slide height).
2. .embed-frame.scroll FIXED — a fixed-height viewport over a deliberately
TALL iframe, for data-dense apps you scroll
through (--embed-scroll-h = viewport height,
--embed-frame-h = the iframe's real height). */
.reveal .embed-frame {
border: 1px solid var(--omsf-border);
border-radius: var(--omsf-radius);
background: #fff;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
max-height: var(--embed-fit-h, 880px); /* never run past the slide */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--omsf-accent-dark) var(--omsf-bg-alt);
}
.reveal .embed-frame iframe {
display: block;
width: 100%;
border: 0;
}
.reveal .embed-frame::-webkit-scrollbar {
width: 14px;
}
.reveal .embed-frame::-webkit-scrollbar-track {
background: var(--omsf-bg-alt);
}
.reveal .embed-frame::-webkit-scrollbar-thumb {
background: var(--omsf-accent-dark);
border-radius: 8px;
border: 3px solid var(--omsf-bg-alt);
}
/* FIXED-height scrolling variant: swap the cap for a fixed viewport and give the
iframe its own tall height; the difference is what you scroll through. */
.reveal .embed-frame.scroll {
max-height: var(--embed-scroll-h, 960px);
}
.reveal .embed-frame.scroll iframe {
height: var(--embed-frame-h, 1280px);
}
/* ── Two no-think iframe wrappers ──────────────────────────────────────────
Pick one and drop it on the around an