simplex-web 0.2.0__py3-none-any.whl

simplex/web/static/simplex.css

@@ -0,0 +1,1870 @@
+/* Simplex site-specific styles.
+ *
+ * Layered on top of vendored Tailwind. Keep selectors low-specificity so
+ * utility classes in templates still win.
+ *
+ * Typography stack (academic):
+ *   - Body / notes: Merriweather (serif), justified, hyphenated.
+ *   - Headings / chrome: Lato (clean sans, ties to the Francis-Bach reference).
+ *   - Math: KaTeX vendored woff2 (handled by katex.min.css).
+ *
+ * CSS variables in `:root` are tied to the `dastimator_dark` theme palette
+ * in src/simplex/theme/presets.py. Notes use a *light* surface inside the
+ * dark chrome -- closer to a physical paper / journal page, easier to read.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Fonts (vendored under /static/fonts/* by web/vendor.py)             */
+/* ------------------------------------------------------------------ */
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/lato/lato-latin-400-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/lato/lato-latin-400-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/lato/lato-latin-700-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/lato/lato-latin-700-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("fonts/lato/lato-latin-900-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Merriweather";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/merriweather/merriweather-latin-400-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Merriweather";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/merriweather/merriweather-latin-400-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Merriweather";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/merriweather/merriweather-latin-700-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Merriweather";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/merriweather/merriweather-latin-700-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Merriweather";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("fonts/merriweather/merriweather-latin-900-normal.woff2") format("woff2");
+}
+
+:root {
+  --site-bg: #2b2b2b;
+  --site-surface: rgba(28, 30, 31, 0.82);
+  --site-surface-solid: #1c1e1f;
+  --site-surface-hover: #25282a;
+  --site-elevated: #151617;
+  --canvas-text: #f5f7f8;
+  --canvas-muted: #b8c0c4;
+  --site-text: #f5f7f8;
+  --site-muted: #b8c0c4;
+  --site-dim: #788185;
+  --site-border: rgba(255, 255, 255, 0.11);
+  --site-accent: #f4c84a;
+  --site-blue: #1058c2;
+  --site-control: #585f62;
+  --bg: var(--site-bg);
+  --bg-card: var(--site-surface-solid);
+  --bg-card-hover: var(--site-surface-hover);
+  --fg: var(--site-text);
+  --fg-muted: var(--site-muted);
+  --fg-dim: var(--site-dim);
+  --accent: var(--site-accent);
+  --border: var(--site-border);
+  --radius-card: 8px;
+  --shadow-card: 0 16px 36px -22px rgba(0, 0, 0, 0.95);
+  --shadow-nav: 0 18px 50px -30px rgba(0, 0, 0, 0.85);
+
+  /* Notes surface -- a paper-like reading pane within the dark chrome. */
+  --notes-bg: #fdfaf3;
+  --notes-fg: #1d1c1a;
+  --notes-fg-soft: #3b3a36;
+  --notes-fg-dim: #6c6a64;
+  --notes-rule: #e3ddcd;
+  --notes-accent: #8a5a00;
+  --notes-link: #1e4f8a;
+  --notes-blockquote-bg: #f3eedd;
+  --notes-code-bg: #f3efe2;
+  --notes-pre-bg: #1c1d1f;
+  --notes-pre-fg: #d4d4d4;
+  --notes-sidenote-bg: #fbf6e6;
+
+  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: "Merriweather", "Iowan Old Style", "Apple Garamond",
+    "Palatino Linotype", "Georgia", "Times New Roman", serif;
+  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo,
+    Consolas, "Liberation Mono", monospace;
+}
+
+[data-theme="light"] {
+  --site-bg: #f3f5f7;
+  --site-surface: rgba(255, 255, 255, 0.86);
+  --site-surface-solid: #ffffff;
+  --site-surface-hover: #edf1f5;
+  --site-elevated: #ffffff;
+  --canvas-text: #15191c;
+  --canvas-muted: #50606a;
+  --site-text: #15191c;
+  --site-muted: #50606a;
+  --site-dim: #77858d;
+  --site-border: rgba(24, 34, 42, 0.13);
+  --site-accent: #9b6b00;
+  --site-control: #58636a;
+  --shadow-card: 0 18px 38px -28px rgba(21, 31, 40, 0.34);
+  --shadow-nav: 0 18px 42px -30px rgba(21, 31, 40, 0.38);
+}
+
+html {
+  background: var(--site-bg);
+  font-family: var(--font-sans);
+}
+
+/* Site chrome owns the page colors. Deck palettes only provide
+ * ``--simplex-*`` tokens for slide/chrome accents, never the body
+ * background; keep this as the single source of truth for the portal page. */
+body {
+  margin: 0;
+  background: var(--site-bg);
+  color: var(--canvas-text);
+  font-family: var(--simplex-font-sans, var(--font-sans));
+  overflow-x: hidden;
+}
+
+.icon-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  line-height: 1;
+}
+.icon-fallback.is-hidden {
+  display: none !important;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0.5rem;
+  background: var(--bg-card);
+  color: var(--fg);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  z-index: 100;
+}
+.skip-link:focus {
+  left: 0.5rem;
+  outline: 2px solid var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Shared chrome                                                       */
+/* ------------------------------------------------------------------ */
+
+.site-nav-wrap {
+  position: sticky;
+  top: 0;
+  z-index: 80;
+  padding: 0.85rem clamp(1rem, 4vw, 2.25rem) 0.55rem;
+  pointer-events: none;
+}
+.site-navbar {
+  width: min(1180px, 100%);
+  box-sizing: border-box;
+  margin: 0 auto;
+  min-height: 3.45rem;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.45rem;
+  border: 1px solid var(--site-border);
+  border-radius: 999px;
+  background: var(--site-surface);
+  box-shadow: var(--shadow-nav);
+  backdrop-filter: blur(18px) saturate(1.3);
+  pointer-events: auto;
+}
+.site-brand,
+.site-nav-link,
+.site-resource-link,
+.theme-toggle {
+  min-height: 2.45rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  color: var(--site-text);
+  text-decoration: none;
+  border-radius: 999px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.site-brand {
+  padding: 0 0.85rem 0 0.75rem;
+  font-weight: 800;
+}
+.site-brand svg,
+.site-nav-link svg,
+.site-resource-link svg,
+.theme-toggle svg,
+.site-footer svg {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+.github-square-icon {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  border-radius: 4px;
+  background: currentColor;
+}
+.github-square-icon::before {
+  content: "";
+  position: absolute;
+  inset: 0.3rem;
+  background: var(--site-surface-solid);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.65 7.65 0 0 1 8 4.42c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.65 7.65 0 0 1 8 4.42c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.pdf-file-icon {
+  position: relative;
+  width: 1rem;
+  height: 1.22rem;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: end;
+  justify-content: center;
+  padding-bottom: 0.14rem;
+  border: 1.6px solid currentColor;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  line-height: 1;
+}
+.pdf-file-icon::after {
+  content: "";
+  position: absolute;
+  top: -1.6px;
+  right: -1.6px;
+  width: 0.34rem;
+  height: 0.34rem;
+  border-left: 1.6px solid currentColor;
+  border-bottom: 1.6px solid currentColor;
+  background: var(--site-surface-solid);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+.pdf-file-icon > span {
+  color: #e53935;
+  font-size: 0.34rem;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+.site-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+}
+.site-nav-link,
+.site-resource-link {
+  padding: 0 0.72rem;
+  color: var(--site-muted);
+  font-size: 0.9rem;
+  transition: background 150ms ease, color 150ms ease;
+}
+.site-nav-link-icon-only {
+  width: 3rem;
+  padding: 0;
+}
+.site-nav-link:hover,
+.site-resource-link:hover {
+  background: var(--site-surface-hover);
+  color: var(--site-text);
+}
+.site-nav-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: max-content;
+  width: max-content;
+  flex: 0 0 auto;
+}
+.site-resource-link {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--site-border);
+}
+[data-theme="light"] .site-resource-link {
+  background: rgba(16, 88, 194, 0.08);
+}
+.theme-toggle {
+  position: relative;
+  width: 2.45rem;
+  padding: 0;
+  border: 0;
+  background: var(--site-surface-hover);
+  color: var(--site-text);
+  cursor: pointer;
+}
+.theme-toggle-fallback {
+  font-size: 1.05rem;
+  color: currentColor;
+}
+.theme-icon {
+  position: absolute;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+[data-theme="dark"] .theme-icon-sun,
+[data-theme="light"] .theme-icon-moon {
+  opacity: 1;
+  transform: scale(1);
+}
+[data-theme="dark"] .theme-icon-moon,
+[data-theme="light"] .theme-icon-sun {
+  opacity: 0;
+  transform: scale(0.65);
+}
+.site-footer {
+  width: min(1180px, calc(100vw - 2rem));
+  margin: 3rem auto 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--canvas-muted);
+  font-size: 0.78rem;
+}
+.site-footer a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--canvas-muted);
+  text-decoration: none;
+}
+.site-footer a:hover { color: var(--canvas-text); }
+@media (max-width: 760px) {
+  .site-nav-wrap {
+    width: 100vw;
+    box-sizing: border-box;
+    padding: 0.75rem 0.5rem 0.45rem;
+  }
+  .site-navbar {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    max-width: 100%;
+    min-height: 3rem;
+    border-radius: 999px;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.35rem;
+  }
+  .site-brand {
+    flex: 0 1 auto;
+    min-width: 0;
+    padding: 0 0.65rem;
+    justify-content: flex-start;
+  }
+  .site-nav-links {
+    flex: 0 1 auto;
+    width: auto;
+    overflow: visible;
+    padding: 0;
+  }
+  .site-nav-actions {
+    flex: 0 0 auto;
+    width: auto;
+    justify-content: flex-end;
+    margin-left: 0;
+  }
+  .site-resource-link {
+    width: 2.45rem;
+    padding: 0;
+  }
+  .site-resource-link > span:not(.pdf-file-icon) { display: none; }
+  .site-resource-link .pdf-file-icon { display: inline-flex; }
+}
+
+@media (max-width: 480px) {
+  .site-nav-link:not(.site-nav-link-icon-only) {
+    width: 2.45rem;
+    padding: 0;
+  }
+  .site-nav-link:not(.site-nav-link-icon-only) > span:not(.icon-fallback) {
+    display: none;
+  }
+}
+
+@media (max-width: 380px) {
+  .site-brand {
+    padding: 0 0.55rem;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Carousel                                                            */
+/* ------------------------------------------------------------------ */
+
+.carousel-section { scroll-margin-top: 4rem; }
+
+.carousel-track {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  padding: 0.25rem 0 1.5rem 0;
+  margin: 0;
+  list-style: none;
+  scrollbar-color: var(--fg-dim) transparent;
+}
+.carousel-track::-webkit-scrollbar { height: 6px; }
+.carousel-track::-webkit-scrollbar-thumb {
+  background: var(--fg-dim);
+  border-radius: 4px;
+}
+
+.carousel-card-wrap {
+  flex: 0 0 320px;
+  scroll-snap-align: start;
+}
+@media (min-width: 768px) {
+  .carousel-card-wrap { flex-basis: 380px; }
+}
+
+.carousel-card {
+  display: block;
+  background: var(--bg-card);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+  transition: transform 200ms ease, box-shadow 200ms ease;
+  isolation: isolate;
+}
+.carousel-card:hover,
+.carousel-card:focus-visible {
+  transform: translateY(-2px) scale(1.01);
+  box-shadow: var(--shadow-card);
+}
+.carousel-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0;
+  background: var(--accent);
+  transition: width 200ms ease;
+  z-index: 2;
+}
+.carousel-card:hover::before,
+.carousel-card:focus-visible::before { width: 4px; }
+
+.carousel-thumb {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  background: #111;
+  overflow: hidden;
+}
+.carousel-thumb img,
+.carousel-thumb-empty {
+  width: 100%; height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.carousel-thumb-empty {
+  display: flex;
+  align-items: center; justify-content: center;
+  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
+  color: var(--fg-dim);
+  font-size: 3rem;
+}
+
+.carousel-overlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 1rem;
+  background: linear-gradient(
+    180deg,
+    rgba(36, 36, 36, 0) 0%,
+    rgba(20, 20, 20, 0.92) 75%
+  );
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 200ms ease, transform 200ms ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.carousel-card:hover .carousel-overlay,
+.carousel-card:focus-visible .carousel-overlay {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.carousel-meta {
+  display: flex; gap: 0.5rem; align-items: center;
+  font-size: 0.75rem;
+}
+.carousel-badge {
+  background: var(--accent);
+  color: #1a1a1a;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-weight: 600;
+}
+.carousel-duration { color: var(--fg-muted); }
+.carousel-cta {
+  color: var(--fg);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.carousel-text { padding: 0.85rem 1rem 1.1rem 1rem; }
+.carousel-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.carousel-sub {
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 35%;
+  width: 40px; height: 40px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.65);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center; justify-content: center;
+  cursor: pointer;
+  z-index: 5;
+  font-size: 1.1rem;
+  transition: background 150ms ease, opacity 150ms ease;
+}
+.carousel-arrow:hover { background: rgba(0, 0, 0, 0.85); }
+.carousel-arrow-prev { left: -10px; }
+.carousel-arrow-next { right: -10px; }
+.carousel-arrow[hidden] { display: none; }
+@media (hover: none) {
+  .carousel-arrow { display: none; }
+}
+
+/* ------------------------------------------------------------------ */
+/* Deck page                                                           */
+/* ------------------------------------------------------------------ */
+
+/* Three areas: viewer (slides + controls), sidebar (slide list), notes.
+   Narrow layout: viewer -> sidebar -> notes. Wide layout: viewer + sidebar
+   on top row, notes underneath the viewer with the sidebar still anchored
+   right alongside. */
+.deck-grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "viewer"
+    "sidebar"
+    "notes";
+}
+.deck-viewer  { grid-area: viewer;  min-width: 0; }
+.deck-sidebar { grid-area: sidebar; min-width: 0; }
+.deck-notes   { grid-area: notes;   min-width: 0; }
+
+@media (min-width: 1024px) {
+  .deck-grid {
+    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
+    grid-template-areas:
+      "viewer  sidebar"
+      "notes   sidebar";
+  }
+}
+
+.deck-viewer-frame {
+  aspect-ratio: 16 / 9;
+  background: var(--bg);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+}
+.deck-iframe {
+  width: 100%; height: 100%;
+  border: 0;
+  display: block;
+  background: var(--bg);
+}
+.deck-viewer-frame:fullscreen {
+  aspect-ratio: auto;
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+}
+.deck-viewer-frame:fullscreen .deck-iframe { height: 100vh; }
+
+.deck-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.6rem;
+  padding: 0.45rem 0.6rem;
+  background: var(--bg-card);
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+.deck-controls-left,
+.deck-controls-right {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+}
+.deck-ctl-btn {
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.4rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  line-height: 0;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease,
+              transform 80ms ease;
+}
+.deck-ctl-btn svg { width: 1.15rem; height: 1.15rem; }
+.deck-ctl-btn:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--border);
+}
+.deck-ctl-btn:active { transform: scale(0.94); }
+.deck-ctl-play {
+  background: var(--accent);
+  color: #1a1a1a;
+  width: 2.6rem;
+  height: 2.6rem;
+}
+.deck-ctl-play:hover {
+  background: #ffe44d;
+  border-color: transparent;
+  color: #1a1a1a;
+}
+.deck-ctl-play .deck-ctl-icon-pause { display: none; }
+.deck-ctl-play[data-state="playing"] .deck-ctl-icon-play { display: none; }
+.deck-ctl-play[data-state="playing"] .deck-ctl-icon-pause { display: inline; }
+.deck-counter {
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-muted);
+  padding: 0 0.6rem;
+  font-size: 0.85rem;
+}
+
+.deck-sidebar {
+  background: var(--bg-card);
+  border-radius: var(--radius-card);
+  border: 1px solid var(--border);
+  padding: 0.9rem;
+}
+@media (min-width: 1024px) {
+  .deck-sidebar {
+    height: fit-content;
+    max-height: calc(100vh - 6rem);
+    overflow-y: auto;
+    position: sticky;
+    top: 1rem;
+  }
+}
+.deck-sidebar-title {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--fg-dim);
+  margin: 0 0 0.7rem 0;
+}
+
+/* Wide: vertical stack of cards. Narrow: horizontal scrollable row. */
+.deck-slide-list {
+  list-style: none;
+  margin: 0; padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+@media (max-width: 1023px) {
+  .deck-slide-list {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    padding-bottom: 0.4rem;
+    scrollbar-color: var(--fg-dim) transparent;
+  }
+  .deck-slide-list::-webkit-scrollbar { height: 6px; }
+  .deck-slide-list::-webkit-scrollbar-thumb {
+    background: var(--fg-dim);
+    border-radius: 4px;
+  }
+  .deck-slide-list > li {
+    flex: 0 0 220px;
+    scroll-snap-align: start;
+  }
+}
+
+.deck-slide-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease,
+              transform 100ms ease;
+}
+.deck-slide-card:hover {
+  background: var(--bg-card-hover);
+  border-color: #3a3a3a;
+  transform: translateY(-1px);
+}
+.deck-slide-card[aria-current="true"] {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent) inset;
+}
+
+.deck-slide-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  min-width: 0;
+}
+.deck-slide-title {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.deck-slide-duration {
+  font-size: 0.72rem;
+  color: var(--fg-dim);
+  font-variant-numeric: tabular-nums;
+  flex: 0 0 auto;
+}
+.deck-slide-card[aria-current="true"] .deck-slide-head {
+  background: rgba(255, 215, 0, 0.08);
+}
+
+.deck-slide-thumb {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--bg);
+  width: 100%;
+}
+.deck-slide-thumb img,
+.deck-slide-thumb-empty {
+  width: 100%; height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.deck-slide-thumb-empty {
+  background: linear-gradient(135deg, #2a2a2a, #161616);
+}
+
+/* ------------------------------------------------------------------ */
+/* Academic notes pane                                                 */
+/* ------------------------------------------------------------------ */
+/*
+ * The notes pane is a paper-like reading surface. Layout reserves a 35%
+ * right margin on wide screens (>= 1280px) where Tufte-style sidenotes
+ * float; on narrower viewports the margin collapses and sidenotes inline
+ * via a CSS-only "click the number" toggle.
+ */
+
+.deck-notes {
+  margin-top: 0.25rem;
+  background: var(--notes-bg);
+  color: var(--notes-fg);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
+  font-family: var(--font-serif);
+  font-size: 1.05rem;
+  line-height: 1.75;
+  /* `text-align: justify` with hyphens makes dense technical prose read
+     like a typeset journal page; without hyphens it would leave rivers. */
+  text-align: justify;
+  text-justify: inter-word;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  position: relative;
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 1280px) {
+  .deck-notes {
+    /* Reserve a margin for sidenotes. The padding-right reservation,
+       combined with `.sidenote { right: 0; width: 32%; }`, places the
+       note in the gutter without overlapping body text. */
+    padding-right: clamp(2rem, 35%, 22rem);
+  }
+}
+
+.deck-notes h1,
+.deck-notes h2,
+.deck-notes h3,
+.deck-notes h4,
+.deck-notes h5,
+.deck-notes h6 {
+  font-family: var(--font-sans);
+  color: var(--notes-fg);
+  font-weight: 700;
+  letter-spacing: -0.005em;
+  line-height: 1.25;
+  margin: 1.8em 0 0.55em;
+  text-align: left;
+  hyphens: manual;
+}
+.deck-notes h1 {
+  font-size: 2.1rem;
+  font-weight: 900;
+  margin-top: 0;
+  border-bottom: 1px solid var(--notes-rule);
+  padding-bottom: 0.45em;
+}
+.deck-notes h2 {
+  font-size: 1.55rem;
+  border-bottom: 1px solid var(--notes-rule);
+  padding-bottom: 0.3em;
+}
+.deck-notes h3 { font-size: 1.22rem; }
+.deck-notes h4 { font-size: 1.08rem; color: var(--notes-fg-soft); }
+
+.deck-notes p,
+.deck-notes li {
+  color: var(--notes-fg);
+  line-height: 1.75;
+}
+.deck-notes p { margin: 0.9em 0; }
+.deck-notes a {
+  color: var(--notes-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+.deck-notes a:hover { text-decoration-thickness: 2px; }
+
+.deck-notes ul,
+.deck-notes ol {
+  padding-left: 1.6rem;
+  margin: 0.6em 0;
+}
+.deck-notes ul li::marker { color: var(--notes-fg-dim); }
+
+.deck-notes table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.2em 0;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+}
+.deck-notes th,
+.deck-notes td {
+  border-top: 1px solid var(--notes-rule);
+  border-bottom: 1px solid var(--notes-rule);
+  padding: 0.5rem 0.7rem;
+  text-align: left;
+}
+.deck-notes th {
+  background: var(--notes-blockquote-bg);
+  color: var(--notes-fg);
+  font-weight: 700;
+}
+
+.deck-notes code {
+  background: var(--notes-code-bg);
+  color: var(--notes-fg);
+  padding: 0.12em 0.4em;
+  border-radius: 4px;
+  font-size: 0.88em;
+  font-family: var(--font-mono);
+}
+.deck-notes pre {
+  background: var(--notes-pre-bg);
+  color: var(--notes-pre-fg);
+  border: 1px solid #111;
+  border-radius: 8px;
+  padding: 0.9rem 1.1rem;
+  overflow-x: auto;
+  margin: 1.2em 0;
+  font-size: 0.9rem;
+  line-height: 1.55;
+  text-align: left;
+  hyphens: manual;
+  font-family: var(--font-mono);
+}
+.deck-notes pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+.deck-notes blockquote {
+  margin: 1.4em 0;
+  padding: 0.9em 1.2em;
+  border-left: 4px solid var(--notes-accent);
+  background: var(--notes-blockquote-bg);
+  color: var(--notes-fg-soft);
+  font-style: normal;
+  border-radius: 0 6px 6px 0;
+  hyphens: manual;
+}
+.deck-notes blockquote p:first-child { margin-top: 0; }
+.deck-notes blockquote p:last-child { margin-bottom: 0; }
+
+.deck-notes hr {
+  border: 0;
+  border-top: 1px solid var(--notes-rule);
+  margin: 2em 0;
+}
+
+/* Display math.
+ *
+ * Default to `overflow-x: auto` so very wide formulas stay readable. The
+ * `notes.js` shim measures each `.katex-display` after KaTeX renders and
+ * applies a `transform: scale(...)` (capped at MIN_SCALE) when the
+ * equation only slightly overflows -- so the reader gets a fitted
+ * formula instead of a scrollbar for the common "just a touch too wide"
+ * case.
+ *
+ * `text-align: center` is the KaTeX default; we keep it because justified
+ * text reading doesn't apply to standalone display math. */
+.deck-notes .katex-display {
+  margin: 1.4em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: center;
+  max-width: 100%;
+}
+.deck-notes .katex { font-size: 1.05em; }
+/* When notes.js has fitted the equation, lock visual flow to the scaled
+ * size: no scroll, no horizontal overflow, no leftover blank band. */
+.deck-notes .katex-display.katex-fitted {
+  overflow: visible;
+  text-align: left;
+}
+.deck-notes .katex-display.katex-fitted > .katex {
+  margin: 0;
+}
+
+/* Display-equation container.
+ *
+ * `web/equations.py` pulls `\tag{X}` out of the math content and emits a
+ * <span class="eq-tag"> sibling so the tag never overlaps the formula
+ * (KaTeX's own tag is `position: absolute; right: 0` and rides inside
+ * the scaled box when `notes.js` fits a wide equation).
+ *
+ * Grid: math column shrinks to available width (`minmax(0, 1fr)`), tag
+ * stays at its natural size in the right column. */
+.deck-notes .equation {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1.5em;
+  margin: 1.4em 0;
+  scroll-margin-top: 4rem;
+}
+.deck-notes .equation > .math.block {
+  margin: 0;
+  min-width: 0;
+}
+.deck-notes .equation > .math.block .katex-display {
+  margin: 0;
+}
+.deck-notes .eq-tag {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  color: var(--notes-fg-dim);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.deck-notes .equation:target {
+  outline: 2px solid var(--notes-link);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Theorem / definition / remark callouts                              */
+/* ------------------------------------------------------------------ */
+/*
+ * Each callout type carries its own accent. Variables let us layer
+ * `--callout-accent` and `--callout-tint` once and reuse them for the
+ * left border, tag colour, target highlight, and tinted background.
+ */
+
+.callout {
+  --callout-accent: var(--notes-accent);
+  --callout-tint: var(--notes-blockquote-bg);
+  --callout-tag-fg: var(--notes-accent);
+
+  display: block;
+  margin: 1.6em 0;
+  padding: 0.9em 1.2em;
+  background: var(--callout-tint);
+  border-left: 4px solid var(--callout-accent);
+  border-radius: 0 6px 6px 0;
+  color: var(--notes-fg);
+  hyphens: manual;
+  scroll-margin-top: 4rem;
+  position: relative;
+}
+.callout > p:first-child { margin-top: 0; }
+.callout > p:last-child { margin-bottom: 0; }
+.callout:target {
+  outline: 2px solid var(--callout-accent);
+  outline-offset: 2px;
+}
+
+.callout-tag {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  color: var(--callout-tag-fg);
+  margin-right: 0.45em;
+}
+
+/* Per-type palettes. Backgrounds are tinted versions of the accent so a
+ * mid-paragraph callout reads at a glance without overwhelming the
+ * Merriweather body around it. */
+.callout-theorem {
+  --callout-accent: #1f4f8a;
+  --callout-tint: #eaf1fa;
+  --callout-tag-fg: #163f73;
+}
+.callout-lemma {
+  --callout-accent: #0d7b6e;
+  --callout-tint: #e3f4f1;
+  --callout-tag-fg: #08594f;
+}
+.callout-proposition {
+  --callout-accent: #3a4cb8;
+  --callout-tint: #eaedfa;
+  --callout-tag-fg: #2b3a93;
+}
+.callout-corollary {
+  --callout-accent: #5b6ed1;
+  --callout-tint: #eef0fb;
+  --callout-tag-fg: #3f4fa8;
+}
+.callout-claim,
+.callout-fact {
+  --callout-accent: #1f6a8a;
+  --callout-tint: #e7f1f6;
+  --callout-tag-fg: #134f6b;
+}
+.callout-definition {
+  --callout-accent: #b06400;
+  --callout-tint: #fbf1de;
+  --callout-tag-fg: #8a4d00;
+}
+.callout-example {
+  --callout-accent: #2f7f3f;
+  --callout-tint: #e7f3e7;
+  --callout-tag-fg: #1f5e2c;
+}
+.callout-remark,
+.callout-note,
+.callout-observation {
+  --callout-accent: #757066;
+  --callout-tint: #f1ede0;
+  --callout-tag-fg: #4a4538;
+}
+.callout-proof {
+  --callout-accent: #9d9385;
+  --callout-tint: #f6f2e6;
+  --callout-tag-fg: #5d564a;
+  font-style: italic;
+}
+.callout-proof em { font-style: normal; }
+/* The classic "Q.E.D." marker at the close of a proof. */
+.callout-proof::after {
+  content: "\220E";
+  float: right;
+  margin-top: -1.6em;
+  color: var(--callout-accent);
+  font-style: normal;
+  font-size: 1.2em;
+}
+
+/* `\ref{label}` cross-reference chips. Title-case label, no underline --
+ * the colour alone signals the link. */
+.ref {
+  color: var(--notes-link);
+  text-decoration: none;
+  font-weight: 600;
+}
+.ref:hover {
+  background: rgba(30, 79, 138, 0.10);
+  border-radius: 3px;
+}
+.ref-stale { color: #b03030; }
+
+/* Article-style "drop cap" on the first paragraph after the lead H1. */
+.deck-notes > p:first-of-type::first-letter,
+.deck-notes > h1:first-of-type + p::first-letter {
+  font-family: var(--font-sans);
+  font-weight: 900;
+  font-size: 3.3em;
+  float: left;
+  line-height: 0.85;
+  padding: 0.05em 0.12em 0 0;
+  color: var(--notes-accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Slide-ref + citation inline chips                                   */
+/* ------------------------------------------------------------------ */
+
+.slide-ref {
+  display: inline-flex;
+  align-items: center;
+  background: var(--notes-blockquote-bg);
+  border: 1px solid var(--notes-accent);
+  color: var(--notes-accent);
+  padding: 0 0.45rem;
+  border-radius: 4px;
+  font-family: var(--font-sans);
+  font-size: 0.85em;
+  text-decoration: none;
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.slide-ref::before {
+  content: "\25B6";
+  margin-right: 0.25rem;
+  font-size: 0.7em;
+}
+.slide-ref:hover {
+  background: var(--notes-accent);
+  color: var(--notes-bg);
+}
+.slide-ref-stale {
+  border-color: #b03030;
+  color: #b03030;
+  cursor: not-allowed;
+}
+
+.cite-group {
+  font-family: var(--font-sans);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+.cite {
+  color: var(--notes-link);
+  text-decoration: none;
+  font-weight: 600;
+}
+.cite:hover {
+  background: rgba(30, 79, 138, 0.10);
+  border-radius: 3px;
+}
+.cite-stale { color: #b03030; }
+
+/* ------------------------------------------------------------------ */
+/* Bibliography                                                        */
+/* ------------------------------------------------------------------ */
+
+.bibliography {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 2px solid var(--notes-rule);
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+}
+.bibliography h2 {
+  font-family: var(--font-sans);
+  font-size: 1.35rem;
+  margin: 0 0 0.8em 0;
+  text-align: left;
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+.bib-list {
+  padding-left: 0;
+  list-style: none;
+}
+.bib-entry {
+  position: relative;
+  padding: 0.55rem 0 0.55rem 4.5rem;
+  border-bottom: 1px solid var(--notes-rule);
+  text-align: left;
+  hyphens: manual;
+  line-height: 1.6;
+  scroll-margin-top: 4rem;
+}
+.bib-entry:last-child { border-bottom: 0; }
+/* Alpha-style marker -- `[KB15]` -- rendered as an inline element from
+ * Python so the printed bullet always matches the inline citation chip. */
+.bib-marker {
+  position: absolute;
+  left: 0;
+  top: 0.55rem;
+  width: 4rem;
+  color: var(--notes-link);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.bib-entry:target {
+  background: rgba(255, 215, 0, 0.12);
+  border-radius: 4px;
+}
+.bib-link {
+  margin-left: 0.4em;
+  color: var(--notes-link);
+  text-decoration: none;
+  font-size: 0.85em;
+}
+.bib-link:hover { text-decoration: underline; }
+
+/* ------------------------------------------------------------------ */
+/* Tufte sidenotes                                                     */
+/* ------------------------------------------------------------------ */
+/*
+ * On wide screens (>= 1280px) the .sidenote floats into the right gutter
+ * reserved by `.deck-notes` padding-right. The label (number) stays inline
+ * with the surrounding sentence. On narrow screens, clicking the label
+ * toggles a hidden checkbox that reveals the note inline.
+ */
+
+.sidenote-toggle {
+  display: none;
+}
+
+.sidenote-ref {
+  font-family: var(--font-sans);
+  font-size: 0.78em;
+  font-weight: 700;
+  vertical-align: super;
+  line-height: 1;
+  color: var(--notes-accent);
+  cursor: pointer;
+  padding: 0 0.15em;
+  border-radius: 2px;
+}
+.sidenote-ref::before { content: "["; }
+.sidenote-ref::after { content: "]"; }
+.sidenote-ref:hover { background: rgba(138, 90, 0, 0.12); }
+
+.sidenote {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  text-align: left;
+  hyphens: manual;
+  color: var(--notes-fg-soft);
+  background: var(--notes-sidenote-bg);
+  border-left: 3px solid var(--notes-accent);
+  padding: 0.6rem 0.85rem;
+  margin: 0.8rem 0 1rem;
+  border-radius: 0 4px 4px 0;
+}
+
+@media (min-width: 1280px) {
+  .sidenote {
+    float: right;
+    clear: right;
+    width: 32%;
+    /* Push out of the body column into the reserved padding-right gutter. */
+    margin: 0.25rem 0 0.8rem clamp(0.75rem, 2vw, 1.5rem);
+    margin-right: calc(-1 * clamp(2rem, 33%, 21rem));
+    background: transparent;
+    border-left: 1px solid var(--notes-rule);
+    padding: 0 0 0 0.85rem;
+    font-size: 0.78rem;
+    line-height: 1.45;
+  }
+}
+
+/* Narrow viewport: collapse the sidenote until the user clicks the number. */
+@media (max-width: 1279px) {
+  .sidenote { display: none; }
+  .sidenote-toggle:checked + .sidenote { display: block; }
+  .sidenote-toggle:checked + .sidenote::before {
+    content: "Note: ";
+    color: var(--notes-accent);
+    font-weight: 700;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Facelift overrides                                                  */
+/* ------------------------------------------------------------------ */
+
+.carousel-section {
+  scroll-margin-top: 6rem;
+  margin-bottom: 2.25rem;
+}
+.carousel-section:first-child { margin-top: 0.15rem; }
+.carousel-heading,
+.section-page-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.8rem;
+}
+.carousel-heading-line {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  color: var(--canvas-text);
+}
+.carousel-heading-line svg {
+  width: 1.05rem;
+  height: 1.05rem;
+  color: var(--site-accent);
+}
+.carousel-heading h2,
+.section-page-heading h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+.carousel-heading p,
+.section-page-heading p {
+  margin: 0.35rem 0 0;
+  max-width: 42rem;
+  color: var(--canvas-muted);
+  font-size: 0.92rem;
+}
+.carousel-section-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--canvas-muted);
+  text-decoration: none;
+  font-size: 0.88rem;
+  line-height: 1;
+}
+.carousel-section-link svg { width: 0.95rem; height: 0.95rem; }
+.carousel-section-link:hover { color: var(--canvas-text); }
+.carousel-shell { position: relative; }
+.carousel-track {
+  gap: 0.8rem;
+  padding: 0.25rem 0 1rem;
+}
+.carousel-card-wrap {
+  flex: 0 0 300px;
+}
+@media (min-width: 768px) {
+  .carousel-card-wrap { flex-basis: 360px; }
+}
+.section-deck-grid {
+  list-style: none;
+  margin: 1.2rem 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 0.9rem;
+}
+.carousel-card {
+  background: transparent;
+  border-radius: var(--radius-card);
+  box-shadow: none;
+  overflow: visible;
+}
+.carousel-card::before { display: none; }
+.carousel-card:hover,
+.carousel-card:focus-visible {
+  transform: translateY(-3px);
+  box-shadow: none;
+}
+.carousel-thumb {
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  background: #111;
+}
+.carousel-thumb img,
+.carousel-thumb-empty {
+  transform: scale(1.001);
+  transition: transform 240ms ease, filter 240ms ease, opacity 220ms ease;
+}
+.carousel-card:hover .carousel-thumb img,
+.carousel-card:focus-visible .carousel-thumb img,
+.carousel-card:hover .carousel-thumb-empty,
+.carousel-card:focus-visible .carousel-thumb-empty {
+  transform: scale(1.055);
+}
+.carousel-thumb-empty {
+  background:
+    linear-gradient(135deg, rgba(16, 88, 194, 0.38), rgba(244, 200, 74, 0.28)),
+    #202326;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 3rem;
+  font-weight: 800;
+}
+.carousel-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.18) 38%, rgba(0, 0, 0, 0.82) 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 55%);
+  z-index: 1;
+}
+.carousel-card-content {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0.8rem;
+  color: white;
+}
+.carousel-card-top,
+.carousel-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.carousel-badge,
+.carousel-created,
+.carousel-duration {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-height: 1.55rem;
+  padding: 0 0.55rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.52);
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 0.74rem;
+  font-weight: 700;
+  backdrop-filter: blur(10px);
+}
+.carousel-badge {
+  background: rgba(244, 200, 74, 0.92);
+  color: #151617;
+}
+.carousel-created {
+  margin-left: auto;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 170ms ease, transform 170ms ease;
+}
+.carousel-created svg,
+.carousel-play svg { width: 0.82rem; height: 0.82rem; }
+.carousel-card:hover .carousel-created,
+.carousel-card:focus-visible .carousel-created {
+  opacity: 1;
+  transform: translateY(0);
+}
+.carousel-card-bottom h3,
+.carousel-card-bottom h2 {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+}
+.carousel-card-bottom p {
+  max-height: 0;
+  margin: 0;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  opacity: 0;
+  transition: max-height 190ms ease, margin 190ms ease, opacity 190ms ease;
+}
+.carousel-card:hover .carousel-card-bottom p,
+.carousel-card:focus-visible .carousel-card-bottom p {
+  max-height: 3.8rem;
+  margin-top: 0.35rem;
+  opacity: 1;
+}
+.carousel-card-actions {
+  margin-top: 0.65rem;
+  justify-content: flex-start;
+}
+.carousel-play {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 1.75rem;
+  padding: 0 0.75rem;
+  border-radius: 999px;
+  background: #e50914;
+  color: white;
+  font-size: 0.78rem;
+  font-weight: 800;
+  box-shadow: 0 10px 22px -14px rgba(229, 9, 20, 0.9);
+}
+.carousel-arrow {
+  top: calc(50% - 20px);
+  width: 2.35rem;
+  height: 2.35rem;
+  border-radius: 999px;
+  background: rgba(10, 11, 12, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.8);
+}
+.carousel-arrow svg { width: 1.1rem; height: 1.1rem; }
+.carousel-arrow:hover { background: rgba(10, 11, 12, 0.95); }
+.carousel-arrow-prev { left: -0.8rem; }
+.carousel-arrow-next { right: -0.8rem; }
+
+.deck-main {
+  width: min(1220px, calc(100vw - clamp(2rem, 12vw, 13rem)));
+  margin: 0.25rem auto 0;
+}
+.deck-grid {
+  gap: 1rem;
+}
+@media (min-width: 1024px) {
+  .deck-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(200px, 235px);
+  }
+}
+.deck-viewer-frame {
+  border-radius: 8px;
+  background: var(--site-bg);
+  box-shadow: 0 16px 45px -26px rgba(0, 0, 0, 0.9);
+}
+.deck-iframe {
+  background: var(--site-bg);
+  transition: filter 180ms ease;
+}
+.deck-grid.is-grayscale .deck-iframe,
+.deck-grid.is-grayscale .deck-slide-thumb img {
+  filter: grayscale(1);
+}
+.deck-controls {
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  margin-top: 0.55rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+.deck-control-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.18rem;
+  width: max-content;
+  max-width: 100%;
+  min-height: 2.5rem;
+  padding: 0.25rem;
+  border-radius: 8px;
+  background: var(--site-control);
+  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.8);
+}
+.deck-ctl-btn {
+  width: 2.1rem;
+  height: 2.1rem;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+}
+.deck-ctl-btn svg,
+.deck-ctl-btn .icon-fallback {
+  width: 1.05rem;
+  height: 1.05rem;
+}
+.deck-ctl-btn:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: transparent;
+}
+.deck-ctl-play,
+.deck-ctl-play:hover {
+  width: 2.1rem;
+  height: 2.1rem;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+.deck-ctl-play .deck-ctl-icon-pause { display: none; }
+.deck-ctl-play[data-state="playing"] .deck-ctl-icon-play { display: none; }
+.deck-ctl-play[data-state="playing"] .deck-ctl-icon-pause { display: inline; }
+.deck-counter {
+  min-width: 3.8rem;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 0.78rem;
+  text-align: center;
+}
+.deck-settings {
+  position: relative;
+  display: inline-flex;
+}
+.deck-settings-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.5rem;
+  padding: 0 0.85rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--site-blue);
+  color: white;
+  font-weight: 800;
+  font-size: 0.82rem;
+  cursor: pointer;
+  box-shadow: 0 12px 24px -18px rgba(16, 88, 194, 0.9);
+}
+.deck-settings-trigger svg { width: 1rem; height: 1rem; }
+.deck-settings-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.45rem);
+  z-index: 50;
+  width: 15rem;
+  padding: 0.45rem;
+  border: 1px solid var(--site-border);
+  border-radius: 8px;
+  background: var(--site-surface-solid);
+  box-shadow: var(--shadow-card);
+}
+.deck-setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.6rem;
+  border-radius: 6px;
+  color: var(--site-text);
+  font-size: 0.85rem;
+}
+.deck-setting-row:hover { background: var(--site-surface-hover); }
+.deck-setting-row span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+.deck-setting-row svg { width: 0.95rem; height: 0.95rem; color: var(--site-blue); }
+.deck-setting-row input {
+  accent-color: var(--site-blue);
+  width: 1rem;
+  height: 1rem;
+}
+.deck-sidebar {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+@media (min-width: 1024px) {
+  .deck-sidebar {
+    max-height: calc(100vh - 6.25rem);
+    top: 5rem;
+  }
+}
+.deck-slide-list {
+  gap: 0.65rem;
+  scroll-padding: 50%;
+}
+@media (max-width: 1023px) {
+  .deck-slide-list > li {
+    scroll-snap-align: center;
+  }
+}
+.deck-slide-card {
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  box-shadow: var(--shadow-card);
+}
+.deck-slide-card:hover {
+  background: transparent;
+  border-color: transparent;
+  transform: translateY(-1px);
+}
+.deck-slide-card[aria-current="true"] {
+  border-color: transparent;
+  box-shadow: var(--shadow-card);
+}
+.deck-slide-thumb {
+  border-radius: 8px;
+  background: var(--site-elevated);
+}
+.deck-slide-thumb::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  pointer-events: none;
+}
+.deck-slide-card[aria-current="true"] .deck-slide-thumb::after {
+  border-color: var(--site-accent);
+}
+.deck-slide-overlay {
+  position: absolute;
+  inset: auto 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  padding: 0.65rem;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
+  color: white;
+}
+.deck-slide-title {
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-slide-duration {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.76rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+@media (max-width: 760px) {
+  .deck-main { width: calc(100vw - 1rem); }
+  .deck-grid { gap: 0.65rem; }
+  .deck-controls {
+    align-items: center;
+    gap: 0.35rem;
+  }
+  .deck-control-group {
+    flex: 0 1 auto;
+    min-width: 0;
+    padding: 0.22rem;
+  }
+  .deck-ctl-btn,
+  .deck-ctl-play,
+  .deck-ctl-play:hover {
+    width: 1.9rem;
+    height: 1.9rem;
+  }
+  .deck-counter {
+    min-width: 3.1rem;
+    padding: 0 0.25rem;
+    font-size: 0.72rem;
+  }
+  .deck-settings {
+    flex: 0 0 auto;
+  }
+  .deck-settings-trigger {
+    width: 2.35rem;
+    min-height: 2.35rem;
+    justify-content: center;
+    padding: 0;
+  }
+  .deck-settings-trigger > span:last-child {
+    display: none;
+  }
+  .deck-settings-panel {
+    left: auto;
+    right: 0;
+    width: min(15rem, calc(100vw - 1rem));
+  }
+  .deck-slide-list {
+    gap: 0.5rem;
+    padding-bottom: 0.15rem;
+  }
+  .deck-slide-list > li {
+    flex-basis: 168px;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Reduced motion                                                      */
+/* ------------------------------------------------------------------ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; }
+  .carousel-track { scroll-behavior: auto; }
+  .carousel-card:hover { transform: none; }
+}