Improvements to reveal template

.revealjs/ntn.css

@@ -14,6 +14,9 @@
   --text-muted: #555555;
   --accent: #2563eb;
   --accent-hover: #1d4ed8;
+  --border: rgba(0,0,0,0.1);
+  --border-light: rgba(0,0,0,0.06);
+  --highlight: #fef08a;
   --font-body: "Adwaita Sans", Helvetica, sans-serif;
   --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
   --h1-size: 2em;
@@ -47,6 +50,12 @@
   text-shadow: none;
   text-transform: uppercase;
   word-wrap: break-word;
+  background: var(--bg);
+  padding: 0.1em 0.35em;
+  width: fit-content;
+  max-width: 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .reveal h1 { font-size: var(--h1-size); font-weight: 700; margin-bottom: 1.6em; }
@@ -54,7 +63,16 @@
 .reveal h3 { font-size: 1.15em; }
 .reveal h4 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
 
-.reveal p { line-height: 1.35; margin: 0 0 0.6em 0; }
+.reveal p {
+  line-height: 1.35;
+  margin: 0 0 0.6em 0;
+  background: var(--bg);
+  padding: 0.1em 0.35em;
+  width: fit-content;
+  max-width: 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
 .reveal strong { font-weight: 700; }
 .reveal em { font-style: italic; }
 
@@ -62,7 +80,12 @@
   display: block;
   text-align: left;
   margin: 0 0 0.5em 0;
-  padding-left: 1.2em;
+  padding: 0.1em 0.35em 0.1em 1.2em;
+  background: var(--bg);
+  width: fit-content;
+  max-width: 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .reveal ul { list-style-type: disc; }
@@ -71,6 +94,8 @@
 
 .reveal li { margin-bottom: 0.15em; line-height: 1.3; }
 .reveal li::marker { color: var(--accent); }
+.reveal ol { list-style-type: decimal; }
+.reveal ol li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
 
 .reveal code {
   font-family: var(--font-mono);
@@ -96,6 +121,35 @@
 
 .reveal pre code { background: none; padding: 0; font-size: 1em; }
 
+.reveal mark { background: var(--highlight); color: var(--text); padding: 0.05em 0.2em; border-radius: 2px; }
+.reveal kbd {
+  font-family: var(--font-mono);
+  font-size: 0.8em;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 0.1em 0.4em;
+  white-space: nowrap;
+}
+.reveal hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
+.reveal sub, .reveal sup { font-size: 0.7em; line-height: 0; vertical-align: baseline; position: relative; }
+.reveal sup { top: -0.5em; }
+.reveal sub { bottom: -0.25em; }
+.reveal dl {
+  margin: 0 0 0.6em 0;
+  background: var(--bg);
+  padding: 0.1em 0.35em;
+  width: fit-content;
+  max-width: 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.reveal dt { font-weight: 600; margin-top: 0.3em; }
+.reveal dd { margin: 0 0 0.3em 0; padding-left: 1.2em; }
+.reveal details { margin: 0 0 0.6em 0; background: var(--bg-secondary); border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0; padding: 0.4em 0.8em; }
+.reveal summary { cursor: pointer; font-weight: 600; }
+
 .reveal blockquote {
   font-style: italic;
   color: var(--text-muted);
@@ -123,15 +177,15 @@
   padding: 0.4em 0.8em;
   background: var(--bg-secondary);
   border-bottom: 2px solid var(--accent);
-  border-top: 1px solid rgba(0,0,0,0.1);
+  border-top: 1px solid var(--border);
   vertical-align: bottom;
 }
 
 .reveal table td {
   text-align: left;
   padding: 0.35em 0.8em;
-  border-bottom: 1px solid rgba(0,0,0,0.08);
-  border-top: 1px solid rgba(0,0,0,0.04);
+  border-bottom: 1px solid var(--border-light);
+  border-top: 1px solid var(--border-light);
   vertical-align: top;
 }
 
@@ -152,6 +206,10 @@
   margin: 0 0 0.5em 0;
   display: inline-block;
   max-width: 98%;
+  background: var(--bg);
+  padding: 0.4em;
+  box-sizing: border-box;
+  border-radius: 4px;
 }
 
 .reveal img, .reveal video, .reveal iframe {
@@ -163,7 +221,7 @@
 }
 
 .reveal section img {
-  background: transparent;
+  background: var(--bg);
   border: none;
   box-shadow: none;
   border-radius: 4px;
@@ -173,10 +231,17 @@
   font-size: 0.8em;
   color: var(--text-muted);
   margin-top: 0.3em;
+  background: var(--bg);
+  padding: 0.1em 0.35em;
+  width: fit-content;
+  max-width: 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .reveal a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
-.reveal a:hover { color: var(--accent-hover); text-shadow: none; }
+.reveal a:hover { color: var(--accent-hover); text-shadow: none; text-decoration: underline; }
+.reveal a:active { color: var(--accent-hover); }
 
 .reveal .controls .navigate-left,
 .reveal .controls .navigate-left.enabled { border-right-color: var(--accent); }
@@ -191,7 +256,7 @@
 .reveal .controls .navigate-up.enabled:hover { border-bottom-color: var(--accent-hover); }
 .reveal .controls .navigate-down.enabled:hover { border-top-color: var(--accent-hover); }
 
-.reveal .progress { background: rgba(0,0,0,0.1); height: 4px; }
+.reveal .progress { background: var(--border); height: 4px; }
 .reveal .progress span { background: var(--accent); }
 
 .reveal ::selection { background: var(--accent); color: white; }
@@ -208,4 +273,30 @@
 
 .reveal .callout-title { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.3em; }
 .reveal .tag { display: inline-block; font-size: 0.7em; font-weight: 600; padding: 0.2em 0.6em; background: var(--accent); color: white; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; }
-.reveal small { font-size: var(--small-size); line-height: 1.4; vertical-align: top; background: transparent; }
+.reveal small {
+  font-size: var(--small-size);
+  line-height: 1.4;
+  vertical-align: top;
+  background: var(--bg);
+  padding: 0.1em 0.35em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* Keep wide code blocks from breaking the slide layout */
+.reveal pre { overflow-x: auto; }
+
+/* Respect reduced-motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .reveal a { transition: none; }
+  .reveal .progress span { transition: none; }
+}
+
+/* Print / PDF export: drop UI chrome, keep content readable */
+@media print {
+  .reveal .controls,
+  .reveal .progress,
+  .reveal .slide-number { display: none !important; }
+  .reveal a, .reveal a:hover { color: var(--text); text-decoration: underline; }
+  .reveal pre, .reveal blockquote, .reveal .callout, .reveal details { box-shadow: none; }
+}