orz-slides 0.1.0

package/assets/themes/base.css

@@ -0,0 +1,777 @@
+/* ==========================================================
+   orz-slides · BASE.CSS
+   Structural + content styling for the rendered-slide DOM contract
+   (docs/dom-contract.md). Each theme file `@import`s this and then
+   defines ONLY the design tokens in its own :root{}.
+
+   This file loads alongside reveal.js + reveal.css. It styles our
+   contract classes (.orz-slide, .orz-title, .orz-content, .orz-split,
+   .orz-region, .orz-footer, .orz-float) and the .markdown-body content
+   inside regions. ALL colors and fonts are driven from CSS variables so
+   a theme only sets :root tokens.
+
+   CSS-VARIABLE CONTRACT (a theme sets these in :root):
+     --accent            brand / accent color
+     --ink               body text color
+     --bg                slide background
+     --font-heading      heading font stack
+     --font-body         body font stack
+     --heading-color     text color of the h2 title band
+     --heading-bg        background of the h2 title band
+     --slide-gap         grid gap between regions (e.g. 28px)
+     --slide-pad         slide content padding (e.g. 4% 5%)
+     --box-info / --box-warning / --box-danger / --box-success   (border colors)
+     --box-*-bg          (callout fill backgrounds)
+     --table-head-bg     table header background
+     --row-highlight     highlighted-row background
+   Optional (sensible fallbacks below):
+     --heading-radius --heading-shadow --heading-pad --heading-align
+     --heading-letter-spacing --heading-font-weight
+     --box-radius --box-shadow --box-border-width
+     --surface (elevated panel bg, e.g. floats/code) --muted (dim text)
+     --code-bg --code-color --rule (hairline border color)
+     --link-color
+   Dark themes additionally override reveal's own vars:
+     --r-background-color --r-main-color --r-heading-color --r-link-color
+   ========================================================== */
+
+/* ---------- Reveal-level defaults from our tokens ---------- */
+/* Keep left-aligned, top-anchored slides (reveal defaults to centered). */
+.reveal .slides { text-align: left; }
+
+.reveal,
+.reveal .slides section {
+    font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif);
+    color: var(--ink, #222);
+}
+
+.reveal-viewport,
+body {
+    background-color: var(--bg, #ffffff);
+}
+
+/* ==========================================================
+   SLIDE FRAME — the .orz-slide <section>
+   ========================================================== */
+.reveal .orz-slide {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: var(--slide-pad, 1% 2% 2% 2%);
+    /* floats are positioned against this box; content is clipped to the slide */
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+    color: var(--ink, #222);
+    font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif);
+    /* Presentation-scale base font in slide (960×H) coordinates — reveal then
+       scales the whole slide to the screen. Without this the deck inherits the
+       16px document default and content looks tiny inside a full-size slide.
+       Em-based content sizes (title band, bullets, code…) all derive from it. */
+    font-size: 24px;
+    line-height: 1.45;
+}
+
+/* Inner flex frame. reveal.js forces `display:block` (inline) on the <section>,
+   which overrides any flex frame placed on .orz-slide — so the title/content/
+   footer column lives on this wrapper, where reveal won't touch it. */
+.reveal .orz-frame {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ---------- Title band: .orz-title h2 ---------- */
+.reveal .orz-title {
+    flex: 0 0 auto;
+    margin-bottom: var(--slide-gap, 28px);
+}
+.reveal .orz-title .markdown-body { margin: 0; }
+
+.reveal .orz-title h2 {
+    box-sizing: border-box;
+    margin: 0;
+    width: 100%;
+    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
+    font-weight: var(--heading-font-weight, 600);
+    font-size: 1.5em;
+    line-height: 1.15;
+    letter-spacing: var(--heading-letter-spacing, 0);
+    text-align: var(--heading-align, left);
+    text-transform: none;
+    color: var(--heading-color, #fff);
+    background: var(--heading-bg, var(--accent, #345));
+    padding: var(--heading-pad, 0.4em 0.7em);
+    border-radius: var(--heading-radius, 8px);
+    box-shadow: var(--heading-shadow, none);
+}
+
+/* ==========================================================
+   CONTENT AREA + LAYOUT GRID
+   ========================================================== */
+.reveal .orz-content {
+    flex: 1 1 auto;
+    min-height: 0;       /* allow grid children to shrink/scroll */
+    display: flex;       /* a single-region content area fills height */
+    flex-direction: column;
+}
+
+/* Splits carry inline grid-template-* from the layout engine; we only
+   theme the gap and make them fill the available content height. */
+.reveal .orz-split {
+    display: grid;
+    gap: var(--slide-gap, 28px);
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+    align-items: stretch;
+}
+
+/* A split nested inside another split is itself a grid item — make it
+   stretch to fill its cell. */
+.reveal .orz-split .orz-split { height: 100%; }
+
+/* ---------- Region cell ---------- */
+.reveal .orz-region {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    /* Fill height in the single-region case (lone region in flex .orz-content);
+       harmless as a grid item (grid controls sizing). Lets WP6 detect overflow. */
+    flex: 1 1 auto;
+    overflow: hidden;            /* fit=scroll flips this to auto */
+    display: flex;
+    flex-direction: column;
+    /* WP6 sets --region-scale on this element when scaling to fit. */
+    font-size: calc(1em * var(--region-scale, 1));
+}
+.reveal .orz-slide[data-fit="scroll"] .orz-region { overflow: auto; }
+
+/* ==========================================================
+   FOOTER BAND
+   ========================================================== */
+.reveal .orz-footer {
+    flex: 0 0 auto;
+    margin-top: var(--slide-gap, 28px);
+    padding-top: 0.5em;
+    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
+    font-size: 0.6em;
+    line-height: 1.3;
+    color: var(--muted, rgba(0, 0, 0, 0.55));
+}
+.reveal .orz-footer .markdown-body { margin: 0; }
+.reveal .orz-footer p { margin: 0; }
+
+/* ==========================================================
+   FLOAT — absolute overlay box (positioned via inline style)
+   ========================================================== */
+.reveal .orz-float {
+    box-sizing: border-box;
+    position: absolute;
+    overflow: hidden;
+    padding: 0.8em 1em;
+    background: var(--surface, #fff);
+    border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
+    border-radius: var(--box-radius, 8px);
+    box-shadow: var(--box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18));
+    color: var(--ink, #222);
+    font-size: 0.85em;
+}
+.reveal .orz-float .markdown-body { margin: 0; }
+.reveal .orz-float > .markdown-body > :first-child { margin-top: 0; }
+.reveal .orz-float > .markdown-body > :last-child { margin-bottom: 0; }
+
+/* ==========================================================
+   .markdown-body — orz-markdown content inside regions
+   ========================================================== */
+.reveal .markdown-body {
+    line-height: 1.45;
+    color: var(--ink, #222);
+}
+.reveal .orz-region > .markdown-body {
+    margin: 0;
+    height: 100%;
+    /* As a flex item, default min-height:auto would force the region to grow to
+       the content's height (breaking scale-to-fit). 0 lets the region clamp to
+       the slide; overflow is then detectable via scrollHeight and WP6 scales. */
+    min-height: 0;
+}
+.reveal .markdown-body > :first-child { margin-top: 0; }
+.reveal .markdown-body > :last-child { margin-bottom: 0; }
+
+/* ---------- Sub-headings h3–h6 (plain, NOT the title band) ---------- */
+.reveal .markdown-body h3,
+.reveal .markdown-body h4,
+.reveal .markdown-body h5,
+.reveal .markdown-body h6 {
+    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
+    color: var(--accent, #345);
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+    margin: 0 0 0.4em;
+    line-height: 1.2;
+    font-weight: var(--heading-font-weight, 600);
+    text-align: left;
+}
+.reveal .markdown-body h3 { font-size: 1.15em; }
+.reveal .markdown-body h4 { font-size: 1.0em; }
+.reveal .markdown-body h5 { font-size: 0.9em; }
+.reveal .markdown-body h6 { font-size: 0.85em; color: var(--muted, #777); }
+
+/* ---------- Paragraphs ---------- */
+.reveal .markdown-body p {
+    margin: 0 0 0.6em;
+    font-size: 0.82em;
+    line-height: 1.45;
+}
+
+/* ---------- Lists ---------- */
+.reveal .markdown-body ul,
+.reveal .markdown-body ol {
+    text-align: left;
+    margin: 0 0 0.6em;
+    padding-left: 1.8em;   /* room for the marker (esp. two-digit ol numbers) */
+}
+.reveal .markdown-body li {
+    font-size: 0.82em;
+    line-height: 1.45;
+    margin-bottom: 0.35em;
+}
+.reveal .markdown-body li > ul,
+.reveal .markdown-body li > ol {
+    margin: 0.25em 0 0.25em;
+}
+.reveal .markdown-body li > ul li,
+.reveal .markdown-body li > ol li { font-size: 1em; }
+
+/* ---------- Inline emphasis / links ----------
+   reveal's reset.css applies `font: inherit; font-size: 100%; vertical-align:
+   baseline` to strong/em/b/i/sub/sup/small, wiping their semantics — so restore
+   them here. Bold is BOLD (not recolored — a color hack disappears when it
+   matches the background); italic is italic; sub/sup raise and lower. */
+.reveal .markdown-body strong,
+.reveal .markdown-body b { font-weight: 700; }
+.reveal .markdown-body em,
+.reveal .markdown-body i { font-style: italic; }
+.reveal .markdown-body em strong,
+.reveal .markdown-body strong em { font-weight: 700; font-style: italic; }
+.reveal .markdown-body s,
+.reveal .markdown-body del { text-decoration: line-through; }
+.reveal .markdown-body ins,
+.reveal .markdown-body u { text-decoration: underline; }
+.reveal .markdown-body small { font-size: 0.82em; }
+.reveal .markdown-body sub,
+.reveal .markdown-body sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
+.reveal .markdown-body sub { bottom: -0.3em; }
+.reveal .markdown-body sup { top: -0.5em; }
+.reveal .markdown-body mark {
+    background: var(--mark-bg, #fde68a);
+    color: #3a2f00;
+    padding: 0 0.18em;
+    border-radius: 2px;
+}
+.reveal .markdown-body a {
+    color: var(--link-color, var(--accent, #345));
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+/* ---------- Tables ---------- */
+.reveal .markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.74em;
+    margin: 0 0 0.6em;
+}
+.reveal .markdown-body th {
+    background: var(--table-head-bg, var(--accent, #345));
+    color: var(--table-head-color, #fff);
+    text-align: left;
+    padding: 0.4em 0.6em;
+    border-bottom: 2px solid var(--accent, #345);
+    font-weight: 600;
+}
+.reveal .markdown-body td {
+    padding: 0.4em 0.6em;
+    border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
+}
+.reveal .markdown-body tr.row-highlight,
+.reveal .markdown-body tr.row-highlight td {
+    background: var(--row-highlight, rgba(0, 0, 0, 0.04));
+}
+
+/* ---------- Code ---------- */
+.reveal .markdown-body code {
+    font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
+    font-size: 0.85em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.06));
+    color: var(--code-color, var(--ink, #222));
+    padding: 0.1em 0.4em;
+    border-radius: 4px;
+}
+.reveal .markdown-body pre {
+    margin: 0 0 0.6em;
+    padding: 0.7em 0.9em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.06));
+    border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
+    border-radius: var(--box-radius, 8px);
+    overflow: auto;
+}
+.reveal .markdown-body pre code {
+    display: block;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font-size: 0.72em;
+    line-height: 1.4;
+    color: var(--code-color, var(--ink, #222));
+    white-space: pre;
+}
+
+/* ---------- Blockquote ---------- */
+.reveal .markdown-body blockquote {
+    margin: 0 0 0.6em;
+    padding: 0.5em 1em;
+    border-left: 4px solid var(--accent, #345);
+    background: var(--surface, rgba(0, 0, 0, 0.03));
+    color: var(--ink, #222);
+    font-style: italic;
+}
+.reveal .markdown-body blockquote p { margin: 0; }
+
+/* ---------- Horizontal rule ---------- */
+.reveal .markdown-body hr {
+    border: 0;
+    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
+    margin: 0.8em 0;
+}
+
+/* ==========================================================
+   CALLOUT BOXES  .box-info / .box-warning / .box-danger / .box-success
+   ========================================================== */
+.reveal .markdown-body .box-info,
+.reveal .markdown-body .box-warning,
+.reveal .markdown-body .box-danger,
+.reveal .markdown-body .box-success {
+    text-align: left;
+    padding: 0.7em 0.9em;
+    margin: 0 0 0.6em;
+    border: var(--box-border-width, 2px) solid currentColor;
+    border-radius: var(--box-radius, 8px);
+    box-shadow: var(--box-shadow, none);
+    font-size: 0.92em;
+}
+.reveal .markdown-body .box-info {
+    border-color: var(--box-info, #2b6cb0);
+    background: var(--box-info-bg, rgba(43, 108, 176, 0.08));
+}
+.reveal .markdown-body .box-warning {
+    border-color: var(--box-warning, #c79a2e);
+    background: var(--box-warning-bg, rgba(199, 154, 46, 0.10));
+}
+.reveal .markdown-body .box-danger {
+    border-color: var(--box-danger, #c0392b);
+    background: var(--box-danger-bg, rgba(192, 57, 43, 0.08));
+}
+.reveal .markdown-body .box-success {
+    border-color: var(--box-success, #2e8b57);
+    background: var(--box-success-bg, rgba(46, 139, 87, 0.08));
+}
+/* keep box text in the ink color (the border colors it, not the text) */
+.reveal .markdown-body .box-info,
+.reveal .markdown-body .box-warning,
+.reveal .markdown-body .box-danger,
+.reveal .markdown-body .box-success { color: var(--ink, #222); }
+
+.reveal .markdown-body .box-info > :first-child,
+.reveal .markdown-body .box-warning > :first-child,
+.reveal .markdown-body .box-danger > :first-child,
+.reveal .markdown-body .box-success > :first-child { margin-top: 0; }
+.reveal .markdown-body .box-info > :last-child,
+.reveal .markdown-body .box-warning > :last-child,
+.reveal .markdown-body .box-danger > :last-child,
+.reveal .markdown-body .box-success > :last-child { margin-bottom: 0; }
+
+/* Headings inside callouts: strip the sub-heading accent, keep inline */
+.reveal .markdown-body .box-info :is(h3,h4,h5,h6),
+.reveal .markdown-body .box-warning :is(h3,h4,h5,h6),
+.reveal .markdown-body .box-danger :is(h3,h4,h5,h6),
+.reveal .markdown-body .box-success :is(h3,h4,h5,h6) {
+    color: inherit;
+    margin-top: 0;
+    font-size: 1em;
+}
+
+/* ==========================================================
+   GENERATED CONSTRUCTS (mermaid / smiles / qrcode / math wrappers)
+   ========================================================== */
+.reveal .markdown-body .mermaid,
+.reveal .markdown-body .smiles-render,
+.reveal .markdown-body .qrcode,
+.reveal .markdown-body .katex-display {
+    text-align: center;
+    margin: 0 auto 0.6em;
+    max-width: 100%;
+}
+/* Async graphics (mermaid SVG, smiles + chart canvases, qr SVG) must never
+   overflow their region — cap to the container width. */
+.reveal .markdown-body .mermaid svg,
+.reveal .markdown-body .smiles-render canvas,
+.reveal .markdown-body canvas[data-smiles],
+.reveal .markdown-body canvas.orz-chart,
+.reveal .markdown-body .qrcode svg,
+.reveal .markdown-body .qrcode img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ---- QR code: white plate + click-to-expand ---- */
+.reveal .markdown-body .qrcode {
+    display: inline-block; position: relative; cursor: pointer;
+    background: #fff; padding: 6px; border-radius: 4px; line-height: 0;
+    vertical-align: middle;
+}
+.reveal .markdown-body .qrcode svg { display: block; width: 160px; }
+.reveal .markdown-body .qrcode__icon {
+    position: absolute; top: 3px; right: 3px; z-index: 1;
+    font-size: 13px; line-height: 1; color: #444;
+    background: rgba(255, 255, 255, 0.85); border-radius: 3px; padding: 1px 3px;
+    opacity: 0; transition: opacity 0.15s;
+}
+.reveal .markdown-body .qrcode:hover .qrcode__icon { opacity: 1; }
+
+/* fullscreen QR overlay (built by browser-entry on click) */
+.orz-qr-overlay {
+    position: fixed; inset: 0; z-index: 200;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, 0.8); cursor: zoom-out;
+}
+.orz-qr-overlay svg {
+    width: min(78vh, 78vw); height: auto;
+    background: #fff; padding: 20px; border-radius: 10px;
+    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
+}
+
+/* ---- YouTube embed: fill the container width at 16:9 ---- */
+.reveal .markdown-body .youtube-embed {
+    position: relative; width: 100%; max-width: 100%;
+    aspect-ratio: 16 / 9; margin: 0 auto 0.6em;
+}
+.reveal .markdown-body .youtube-embed iframe,
+.reveal .markdown-body .youtube-embed .youtube-facade {
+    position: absolute; inset: 0; width: 100%; height: 100%;
+    border: 0; border-radius: 4px;
+}
+/* file:// fallback poster (see fixYouTube): thumbnail + play button, opens youtube.com */
+.reveal .markdown-body .youtube-embed .youtube-facade {
+    display: flex; align-items: center; justify-content: center;
+    background: #000 center / cover no-repeat; cursor: pointer;
+}
+.reveal .markdown-body .youtube-facade .youtube-facade-play {
+    width: 16%; aspect-ratio: 1; border-radius: 50%;
+    background: rgba(0,0,0,0.65); transition: background 0.15s;
+    position: relative;
+}
+.reveal .markdown-body .youtube-facade:hover .youtube-facade-play { background: #f00; }
+.reveal .markdown-body .youtube-facade .youtube-facade-play::after {
+    content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
+    border-style: solid; border-width: 0.5em 0 0.5em 0.85em;
+    border-color: transparent transparent transparent #fff;
+}
+
+/* ---- task lists (- [ ] / - [x]): drop the bullet, keep the checkbox ---- */
+.reveal .markdown-body ul.contains-task-list { list-style: none; padding-left: 0.2em; }
+.reveal .markdown-body li.task-list-item { list-style: none; }
+
+/* ---- on-deck clock + elapsed-timer overlay (toggled with T) ---- */
+.orz-timer {
+    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
+    z-index: 60; display: flex; gap: 14px; align-items: baseline;
+    padding: 5px 14px; border-radius: 999px;
+    background: rgba(0, 0, 0, 0.62); color: #fff;
+    font: 500 15px/1 system-ui, -apple-system, sans-serif;
+    font-variant-numeric: tabular-nums; pointer-events: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+}
+.orz-timer .orz-timer-clock { opacity: 0.7; }
+.orz-timer .orz-timer-elapsed { font-size: 18px; font-weight: 700; }
+.reveal .markdown-body .task-list-item-checkbox {
+    margin-right: 0.45em; vertical-align: middle; pointer-events: none;
+}
+
+/* ---- table of contents ({{toc}}) ---- */
+.reveal .markdown-body .toc-list { list-style: none; padding-left: 0; }
+.reveal .markdown-body .toc-list a { text-decoration: none; }
+.reveal .markdown-body .toc-list a:hover { text-decoration: underline; }
+
+/* ---- footnotes ---- */
+.reveal .markdown-body .footnotes {
+    margin-top: 0.8em; padding-top: 0.4em; font-size: 0.8em;
+    border-top: 1px solid var(--rule, #ddd); color: var(--muted, #777);
+}
+.reveal .markdown-body .footnote-ref a,
+.reveal .markdown-body .footnote-backref { text-decoration: none; }
+
+/* ==========================================================
+   TEMPLATE SLIDES (title / section / outline / closing)
+   Generic helpers; themes restyle via the same tokens.
+   ========================================================== */
+.reveal .orz-slide[data-kind="template"] .orz-frame { justify-content: center; }
+.reveal .orz-template {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.35em;
+}
+
+/* ---------- title — v1 (default): centered with an accent rule ---------- */
+.reveal .orz-template-title { text-align: center; align-items: center; }
+.reveal .orz-title-main {
+    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
+    font-weight: 800;
+    font-size: 2.7em;
+    line-height: 1.06;
+    letter-spacing: -0.015em;
+    color: var(--ink, #1a1a1a);
+    margin: 0;
+}
+.reveal .orz-template-title .orz-title-main::after {
+    content: ""; display: block;
+    width: 2.2em; height: 4px; margin: 0.5em auto 0;
+    background: var(--accent, #345); border-radius: 2px;
+}
+.reveal .orz-title-sub {
+    font-size: 1.3em; font-weight: 500;
+    color: var(--muted, #6b7280);
+    margin: 0.7em 0 0;
+}
+.reveal .orz-title-meta { font-size: 0.85em; color: var(--muted, #6b7280); margin-top: 1.5em; }
+.reveal .orz-title-meta p { margin: 0.15em 0; }
+
+/* title — v2: left-aligned with an accent bar */
+.reveal .orz-template-title.orz-v2 {
+    text-align: left; align-items: flex-start;
+    padding-left: 0.7em; border-left: 6px solid var(--accent, #345);
+}
+.reveal .orz-template-title.orz-v2 .orz-title-main { font-size: 3em; }
+.reveal .orz-template-title.orz-v2 .orz-title-main::after { display: none; }
+.reveal .orz-template-title.orz-v2 .orz-title-sub { margin-top: 0.5em; }
+
+/* title — v3: an uppercase kicker above the title */
+.reveal .orz-template-title.orz-v3 .orz-title-sub {
+    order: -1; margin: 0 0 0.7em;
+    font-size: 0.8em; font-weight: 700; font-style: normal;
+    text-transform: uppercase; letter-spacing: 0.22em;
+    color: var(--accent, #345);
+}
+.reveal .orz-template-title.orz-v3 .orz-title-main::after { display: none; }
+
+/* ---------- section dividers ---------- */
+.reveal .orz-template-section { text-align: left; align-items: flex-start; }
+.reveal .orz-section-main {
+    font-family: var(--font-heading, 'Segoe UI', system-ui, sans-serif);
+    font-weight: 800; font-size: 2.5em; line-height: 1.1;
+    color: var(--ink, #1a1a1a);
+    border-bottom: 4px solid var(--accent, #345);
+    padding-bottom: 0.18em;
+}
+.reveal .orz-section-meta { color: var(--muted, #6b7280); margin-top: 0.6em; }
+
+/* section — v2: centered, accent title, no rule */
+.reveal .orz-template-section.orz-v2 { text-align: center; align-items: center; }
+.reveal .orz-template-section.orz-v2 .orz-section-main {
+    border: none; font-size: 3.1em; color: var(--accent, #345);
+}
+
+/* ---------- closing (centered, tighter) ---------- */
+.reveal .orz-template-closing { text-align: center; align-items: center; }
+.reveal .orz-template-closing .orz-title-main { font-size: 2.2em; }
+.reveal .orz-template-closing .orz-title-main::after { margin-top: 0.45em; }
+
+/* ---------- outline (agenda list) ---------- */
+.reveal .orz-template-outline { text-align: left; align-items: stretch; }
+.reveal .orz-template-outline .orz-outline { font-size: 1.2em; line-height: 1.8; }
+.reveal .orz-template-outline .orz-outline ol,
+.reveal .orz-template-outline .orz-outline ul { padding-left: 1.2em; }
+
+/* ==========================================================
+   EXTRA TEMPLATE VARIANTS (v=4…) — colored panels, borders, frames.
+   All use theme tokens (--accent / --surface / --rule / --ink) so they adapt
+   to light and dark themes.
+   ========================================================== */
+
+/* title v4 — SPLIT: a bold full-height accent band on the left, title on the right */
+.reveal .orz-slide:has(.orz-template-title.orz-v4) {
+    background: linear-gradient(90deg, var(--accent, #345) 0 34%, var(--bg, #fff) 34%);
+}
+.reveal .orz-template-title.orz-v4 { text-align: left; align-items: flex-start; padding-left: 40%; }
+.reveal .orz-template-title.orz-v4 .orz-title-main { font-size: 3em; }
+.reveal .orz-template-title.orz-v4 .orz-title-main::after { margin-left: 0; }
+
+/* title v5 — FULL-COLOR COVER: bold background, title anchored bottom-left */
+.reveal .orz-slide:has(.orz-template-title.orz-v5) { background: var(--cover-bg, var(--ink, #1a1a1a)); }
+.reveal .orz-template-title.orz-v5 { text-align: left; align-items: flex-start; margin-top: auto; }
+.reveal .orz-template-title.orz-v5 .orz-title-main {
+    color: var(--cover-ink, var(--bg, #fff)); font-size: 3.6em; line-height: 1;
+}
+.reveal .orz-template-title.orz-v5 .orz-title-main::after {
+    margin-left: 0; background: var(--cover-accent, var(--accent, #345));
+}
+.reveal .orz-template-title.orz-v5 .orz-title-sub { color: var(--cover-accent, var(--accent, #345)); }
+.reveal .orz-template-title.orz-v5 .orz-title-meta { color: var(--cover-ink, var(--bg, #fff)); opacity: 0.72; }
+
+/* title v6 — OVERSIZED EDITORIAL: huge left title with a kicker, bottom-anchored */
+.reveal .orz-template-title.orz-v6 { text-align: left; align-items: flex-start; margin-top: auto; }
+.reveal .orz-template-title.orz-v6 .orz-title-main {
+    font-size: 4.4em; line-height: 0.96; letter-spacing: -0.03em; font-weight: 800;
+}
+.reveal .orz-template-title.orz-v6 .orz-title-main::after { display: none; }
+.reveal .orz-template-title.orz-v6 .orz-title-sub {
+    order: -1; margin: 0 0 0.35em;
+    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.62em;
+    font-weight: 700; font-style: normal; color: var(--accent, #345);
+}
+.reveal .orz-template-title.orz-v6 .orz-title-meta { margin-top: 0.9em; font-size: 0.8em; }
+
+/* section v3 — surface band with a left accent bar */
+.reveal .orz-template-section.orz-v3 { text-align: left; align-items: stretch; }
+.reveal .orz-template-section.orz-v3 .orz-section-main {
+    background: var(--surface, #f4f4f4);
+    border: none;
+    border-left: 7px solid var(--accent, #345);
+    border-radius: 0 8px 8px 0;
+    padding: 0.45em 0.7em;
+}
+
+/* section v4 — outlined box */
+.reveal .orz-template-section.orz-v4 { text-align: center; align-items: center; }
+.reveal .orz-template-section.orz-v4 .orz-section-main {
+    border: 3px solid var(--accent, #345); border-bottom-width: 3px;
+    border-radius: 10px; padding: 0.4em 0.9em; background: transparent;
+}
+
+/* outline v2 — each item as a surface card with an accent left edge */
+.reveal .orz-template-outline.orz-v2 .orz-outline ol,
+.reveal .orz-template-outline.orz-v2 .orz-outline ul { list-style: none; padding-left: 0; }
+.reveal .orz-template-outline.orz-v2 .orz-outline li {
+    background: var(--surface, #f4f4f4);
+    border-left: 4px solid var(--accent, #345);
+    border-radius: 0 8px 8px 0;
+    padding: 0.35em 0.7em; margin: 0.35em 0;
+}
+
+/* outline v3 — two balanced columns */
+.reveal .orz-template-outline.orz-v3 .orz-outline ol,
+.reveal .orz-template-outline.orz-v3 .orz-outline ul {
+    column-count: 2; column-gap: 2em;
+}
+.reveal .orz-template-outline.orz-v3 .orz-outline li { break-inside: avoid; }
+
+/* closing v2 — FULL-COLOR COVER sign-off */
+.reveal .orz-slide:has(.orz-template-closing.orz-v2) { background: var(--cover-bg, var(--ink, #1a1a1a)); }
+.reveal .orz-template-closing.orz-v2 { text-align: center; align-items: center; }
+.reveal .orz-template-closing.orz-v2 .orz-title-main { color: var(--cover-ink, var(--bg, #fff)); font-size: 3em; }
+.reveal .orz-template-closing.orz-v2 .orz-title-main::after { background: var(--cover-accent, var(--accent, #345)); }
+.reveal .orz-template-closing.orz-v2 .orz-title-meta { color: var(--cover-ink, var(--bg, #fff)); opacity: 0.85; }
+.reveal .orz-template-closing.orz-v2 .orz-title-meta a,
+.reveal .orz-template-closing.orz-v2 a { color: var(--cover-accent, var(--accent, #345)); }
+
+/* closing v3 — OVERSIZED: huge thanks, bottom-left */
+.reveal .orz-template-closing.orz-v3 { text-align: left; align-items: flex-start; margin-top: auto; }
+.reveal .orz-template-closing.orz-v3 .orz-title-main {
+    font-size: 4.2em; line-height: 0.97; letter-spacing: -0.03em; font-weight: 800;
+}
+.reveal .orz-template-closing.orz-v3 .orz-title-main::after { margin-left: 0; }
+.reveal .orz-template-closing.orz-v3 .orz-title-meta { margin-top: 0.8em; }
+
+/* ==========================================================
+   orz-markdown CONTAINERS & INLINE PLUGINS
+   The slide base styled only plain markdown; these restore the
+   ::: admonitions / cols / tabs / spoiler and {{sp[...]}} spans,
+   using the theme's --box-* / --rule / --surface / --accent tokens.
+   ========================================================== */
+
+/* ---- admonition callouts: ::: info | success | warning | danger ---- */
+.reveal .markdown-body div.info,
+.reveal .markdown-body div.success,
+.reveal .markdown-body div.warning,
+.reveal .markdown-body div.danger {
+    border-radius: var(--box-radius, 6px);
+    border-left: var(--box-border-width, 4px) solid;
+    box-shadow: var(--box-shadow, none);
+    padding: 0.5em 0.8em;
+    margin: 0.5em 0;
+}
+.reveal .markdown-body div.info    { background: var(--box-info-bg, #eef4fb);    border-left-color: var(--box-info, #2b6cb0); }
+.reveal .markdown-body div.success { background: var(--box-success-bg, #effaf3); border-left-color: var(--box-success, #2f9e44); }
+.reveal .markdown-body div.warning { background: var(--box-warning-bg, #fdf6e3); border-left-color: var(--box-warning, #d9a300); }
+.reveal .markdown-body div.danger  { background: var(--box-danger-bg, #fdecec);  border-left-color: var(--box-danger, #e03131); }
+.reveal .markdown-body div.info > :last-child,
+.reveal .markdown-body div.success > :last-child,
+.reveal .markdown-body div.warning > :last-child,
+.reveal .markdown-body div.danger > :last-child { margin-bottom: 0; }
+
+/* ---- inline colour spans: {{sp[red|green|blue|yellow] …}} ---- */
+.reveal .markdown-body span.red    { color: var(--span-red, #e03131); }
+.reveal .markdown-body span.green  { color: var(--span-green, #2f9e44); }
+.reveal .markdown-body span.blue   { color: var(--span-blue, #1971c2); }
+.reveal .markdown-body span.yellow { color: var(--span-yellow, #d9a300); }
+
+/* ---- inline badges: {{sp[success|info|warning|danger] …}} ---- */
+.reveal .markdown-body span.info,
+.reveal .markdown-body span.success,
+.reveal .markdown-body span.warning,
+.reveal .markdown-body span.danger {
+    display: inline-flex; align-items: center; line-height: 1; white-space: nowrap;
+    padding: 0.15em 0.55em; border-radius: 999px; font-size: 0.82em; font-weight: 600;
+    border: 1px solid;
+}
+.reveal .markdown-body span.info    { color: var(--box-info, #2b6cb0);    background: var(--box-info-bg, #eef4fb);    border-color: var(--box-info, #2b6cb0); }
+.reveal .markdown-body span.success { color: var(--box-success, #2f9e44); background: var(--box-success-bg, #effaf3); border-color: var(--box-success, #2f9e44); }
+.reveal .markdown-body span.warning { color: var(--box-warning, #d9a300); background: var(--box-warning-bg, #fdf6e3); border-color: var(--box-warning, #d9a300); }
+.reveal .markdown-body span.danger  { color: var(--box-danger, #e03131);  background: var(--box-danger-bg, #fdecec);  border-color: var(--box-danger, #e03131); }
+
+/* ---- alignment containers: ::: left | center | right ---- */
+.reveal .markdown-body div.left   { text-align: left; }
+.reveal .markdown-body div.center { text-align: center; }
+.reveal .markdown-body div.right  { text-align: right; }
+
+/* ---- column container: ::: cols / ::: col ---- */
+.reveal .markdown-body .cols {
+    display: grid; gap: 0.8em; margin: 0.5em 0;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+.reveal .markdown-body .cols > .col > :last-child { margin-bottom: 0; }
+
+/* ---- tabs: ::: tabs / ::: tab Label (JS in browser-entry adds the bar) ---- */
+.reveal .markdown-body .tabs { margin: 0.5em 0; }
+.reveal .markdown-body .tabs-bar {
+    display: flex; flex-wrap: wrap; gap: 0.3em;
+    margin-bottom: 0.5em; border-bottom: 1px solid var(--rule, #ddd);
+}
+.reveal .markdown-body .tabs-bar-btn {
+    font: inherit; font-size: 0.85em; cursor: pointer;
+    background: transparent; border: 0; border-bottom: 2px solid transparent;
+    padding: 0.3em 0.7em; color: var(--muted, #777);
+}
+.reveal .markdown-body .tabs-bar-btn.active {
+    color: var(--accent, #345); border-bottom-color: var(--accent, #345); font-weight: 600;
+}
+.reveal .markdown-body .tabs[data-js] > .tab { display: none; }
+.reveal .markdown-body .tabs[data-js] > .tab.active { display: block; }
+.reveal .markdown-body .tabs:not([data-js]) > .tab { display: block; }
+.reveal .markdown-body .tabs:not([data-js]) > .tab::before {
+    content: attr(data-label); display: block;
+    font-weight: 700; color: var(--accent, #345); font-size: 0.85em; margin: 0.3em 0 0.2em;
+}
+.reveal .markdown-body .tabs > .tab > :last-child { margin-bottom: 0; }
+
+/* ---- spoiler: ::: spoil Title ---- */
+.reveal .markdown-body details.spoil {
+    border: 1px solid var(--rule, #ddd); border-radius: var(--box-radius, 6px);
+    padding: 0.35em 0.7em; margin: 0.5em 0; background: var(--surface, #f6f6f6);
+}
+.reveal .markdown-body details.spoil > summary { cursor: pointer; font-weight: 600; color: var(--accent, #345); }
+.reveal .markdown-body details.spoil > :not(summary) { margin-top: 0.4em; }