kitfly 0.1.2 → 0.2.1

package/dist/styles.css

@@ -0,0 +1,1262 @@
+/* Kitfly - Minimal, professional styling */
+
+:root {
+  /* Light theme (default) */
+  --color-bg: #ffffff;
+  --color-bg-sidebar: #f8f9fa;
+  --color-text: #1a1a1a;
+  --color-text-muted: #6b7280;
+  --color-border: #e5e7eb;
+  --color-link: #2563eb;
+  --color-link-hover: #1d4ed8;
+  --color-accent: #0f172a;
+  --color-code-bg: #f3f4f6;
+  --color-logo: #0f172a;
+  /* Logo colors - light mode */
+  --logo-doc: #152F46;
+  --logo-fold: #0A6172;
+  --logo-feather: #007182;
+  --logo-accent: #D17059;
+
+  /* Typography */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  /* Layout */
+  --sidebar-width: 280px;
+  --footer-height: 2.25rem;
+}
+
+/* Dark theme - automatic based on OS preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-bg: #0f172a;
+    --color-bg-sidebar: #1e293b;
+    --color-text: #e2e8f0;
+    --color-text-muted: #94a3b8;
+    --color-border: #334155;
+    --color-link: #60a5fa;
+    --color-link-hover: #93c5fd;
+    --color-accent: #f8fafc;
+    --color-code-bg: #1e293b;
+    --color-logo: #f8fafc;
+    /* Logo colors - dark mode (brighter for contrast) */
+    --logo-doc: #60A5FA;
+    --logo-fold: #22D3EE;
+    --logo-feather: #06B6D4;
+    --logo-accent: #FB923C;
+  }
+}
+
+/* Dark theme - manual override */
+[data-theme="dark"] {
+  --color-bg: #0f172a;
+  --color-bg-sidebar: #1e293b;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+  --color-border: #334155;
+  --color-link: #60a5fa;
+  --color-link-hover: #93c5fd;
+  --color-accent: #f8fafc;
+  --color-code-bg: #1e293b;
+  --color-logo: #f8fafc;
+  /* Logo colors - dark mode (brighter for contrast) */
+  --logo-doc: #60A5FA;
+  --logo-fold: #22D3EE;
+  --logo-feather: #06B6D4;
+  --logo-accent: #FB923C;
+}
+
+/* Light theme - manual override */
+[data-theme="light"] {
+  --color-bg: #ffffff;
+  --color-bg-sidebar: #f8f9fa;
+  --color-text: #1a1a1a;
+  --color-text-muted: #6b7280;
+  --color-border: #e5e7eb;
+  --color-link: #2563eb;
+  --color-link-hover: #1d4ed8;
+  --color-accent: #0f172a;
+  --color-code-bg: #f3f4f6;
+  --color-logo: #0f172a;
+  /* Logo colors - light mode */
+  --logo-doc: #152F46;
+  --logo-fold: #0A6172;
+  --logo-feather: #007182;
+  --logo-accent: #D17059;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+  line-height: 1.6;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Layout */
+.layout {
+  display: flex;
+  min-height: calc(100vh - var(--footer-height));
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--color-bg-sidebar);
+  border-right: 1px solid var(--color-border);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: var(--footer-height);
+  overflow-y: auto;
+  padding: 1.5rem;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.sidebar-header {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.logo {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.logo-icon {
+  display: inline-flex;
+  align-items: center;
+  height: 64px;
+  width: auto;
+  max-width: 180px;
+  flex-shrink: 0;
+}
+
+.logo-icon svg,
+.logo-icon img,
+.logo-img {
+  display: block;
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  object-position: left center;
+}
+
+/* Logo dark mode - brighten for visibility */
+[data-theme="dark"] .logo-img,
+[data-theme="dark"] .logo-icon img {
+  filter: brightness(1.3) saturate(1.2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .logo-img,
+  :root:not([data-theme="light"]) .logo-icon img {
+    filter: brightness(1.3) saturate(1.2);
+  }
+}
+
+.logo-icon.logo-fallback,
+.mobile-logo.logo-fallback {
+  width: 2rem;
+  height: 2rem;
+  max-width: none;
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-accent);
+}
+
+.logo-icon.logo-fallback::before,
+.mobile-logo.logo-fallback::before {
+  content: attr(data-initial);
+  color: var(--color-bg);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 8rem;
+  line-height: 1.2;
+  min-width: 6rem;
+  max-width: 100%;
+}
+
+.logo-text .brand {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--color-accent);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.logo-text .brand:hover {
+  text-decoration: underline;
+}
+
+.logo-text .product {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.logo-text .product:hover {
+  color: var(--color-text);
+}
+
+/* Wide/wordmark logo support */
+.logo.logo-wordmark {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.logo.logo-wordmark .logo-icon {
+  width: auto;
+  height: 64px;
+  max-width: 180px;
+  max-height: 64px;
+}
+
+.logo.logo-wordmark .logo-img {
+  max-width: 180px;
+  max-height: 64px;
+  width: auto;
+  height: 100%;
+}
+
+.mobile-logo .logo-img.logo-wordmark {
+  max-width: 120px;
+  max-height: 32px;
+  width: auto;
+  height: auto;
+}
+
+/* Theme toggle */
+.header-tools {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.375rem;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.theme-toggle:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+
+.theme-toggle svg {
+  width: 16px;
+  height: 16px;
+}
+
+.theme-toggle .icon-sun { display: none; }
+.theme-toggle .icon-moon { display: block; }
+
+[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
+[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
+  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
+}
+
+/* Sidebar meta (version/branch) */
+.sidebar-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  margin-top: 0;
+}
+
+.meta-version {
+  background: var(--color-code-bg);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+}
+
+.meta-branch {
+  opacity: 0.7;
+  max-width: 7rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-nav {
+  margin-top: 1rem;
+}
+
+.sidebar-nav ul {
+  list-style: none;
+}
+
+.sidebar-nav > ul > li {
+  margin-bottom: 1.5rem;
+}
+
+.sidebar-nav .nav-section {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.sidebar-nav .nav-home {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.sidebar-nav .nav-home:hover {
+  color: var(--color-primary);
+}
+
+.sidebar-nav a {
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.875rem;
+  display: block;
+  padding: 0.25rem 0;
+  transition: color 0.15s ease;
+}
+
+.sidebar-nav a:hover {
+  color: var(--color-link);
+}
+
+.sidebar-nav a.active {
+  color: var(--color-link);
+  font-weight: 500;
+}
+
+.sidebar-nav ul ul {
+  margin-left: 1rem;
+  margin-top: 0.25rem;
+}
+
+/* Collapsible nav groups (details/summary) */
+.sidebar-nav details {
+  margin: 0;
+}
+
+.sidebar-nav summary {
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: 0.2rem 0;
+  list-style: none;
+}
+
+.sidebar-nav summary::-webkit-details-marker {
+  display: none;
+}
+
+.sidebar-nav .nav-group::before {
+  content: "›";
+  display: inline-block;
+  width: 1em;
+  margin-right: 0.15em;
+  text-align: center;
+  font-size: 0.85em;
+  transform-origin: center;
+  transition: transform 150ms ease;
+}
+
+.sidebar-nav details[open] > .nav-group::before {
+  transform: rotate(90deg);
+}
+
+.sidebar-nav .nav-group a {
+  display: inline;
+}
+
+/* Content */
+.content {
+  margin-left: var(--sidebar-width);
+  flex: 1;
+  padding: 3rem 4rem;
+  padding-right: 240px; /* Space for TOC */
+  padding-bottom: calc(var(--footer-height) + 1rem);
+  max-width: 1100px;
+}
+
+/* Slides mode */
+.mode-slides .content {
+  max-width: none;
+  padding: 1.5rem 2rem;
+  padding-right: 2rem;
+  padding-bottom: calc(var(--footer-height) + 1rem);
+}
+
+.mode-slides .toc,
+.mode-slides .breadcrumbs,
+.mode-slides .page-meta {
+  display: none !important;
+}
+
+.slides-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.slide-viewport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - var(--footer-height) - 11rem);
+}
+
+.slide-frame {
+  aspect-ratio: var(--slide-aspect, 16/9);
+  width: min(100%, 1100px);
+  max-height: calc(100vh - var(--footer-height) - 12rem);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  background: var(--color-bg);
+  padding: 2rem 2.5rem;
+}
+
+.slide {
+  display: none;
+}
+
+.slide.active {
+  display: block;
+}
+
+.slide-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+}
+
+.slide-prev,
+.slide-next {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  cursor: pointer;
+}
+
+.slide-prev:disabled,
+.slide-next:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slide-progress {
+  width: 10rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.slide-progress-bar {
+  display: block;
+  height: 100%;
+  background: var(--color-link);
+  transition: width 150ms ease;
+}
+
+.slide.centered {
+  min-height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.slide.two-column {
+  column-count: 2;
+  column-gap: 1.5rem;
+}
+
+.slide.active.centered {
+  display: flex;
+}
+
+.slide.active.two-column {
+  display: block;
+}
+
+.slide.active.two-column > h1,
+.slide.active.two-column > h2,
+.slide.active.two-column > h3 {
+  column-span: all;
+}
+
+.slide.active.two-column > * {
+  break-inside: avoid;
+}
+
+.slide.active.title-slide {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: color-mix(in srgb, var(--color-link) 12%, var(--color-bg));
+  border: 1px solid color-mix(in srgb, var(--color-link) 40%, var(--color-border));
+  border-radius: 0.5rem;
+  padding: 2rem;
+}
+
+.slide.active.section-header {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: color-mix(in srgb, var(--color-link) 6%, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 2rem;
+}
+
+.slide.title-slide h1,
+.slide.section-header h1 {
+  font-size: 2.25rem;
+}
+
+.slide.diagram .mermaid {
+  margin: 0.75rem 0;
+}
+
+/* Slide layout primitives (core structural patterns) */
+.block {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
+  color: var(--color-text);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .block {
+    transition: none;
+  }
+}
+
+.block.accent {
+  background: color-mix(in srgb, var(--color-link) 12%, var(--color-bg));
+  border-color: color-mix(in srgb, var(--color-link) 50%, var(--color-border));
+}
+
+.block.muted {
+  opacity: 0.8;
+}
+
+.block.outline {
+  background: transparent;
+}
+
+.block.circle {
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  inline-size: min(7rem, 100%);
+  margin-inline: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+}
+
+.block.pill {
+  border-radius: 9999px;
+}
+
+.block.diamond {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+.block.chevron {
+  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);
+}
+
+.block.hexagon {
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+}
+
+.block.triangle {
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.block.block-arrow {
+  clip-path: polygon(0 25%, 65% 25%, 65% 0, 100% 50%, 65% 100%, 65% 75%, 0 75%);
+}
+
+.block-label {
+  display: block;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.block-flow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem 1.5rem;
+  align-items: stretch;
+}
+
+.block-flow .block {
+  position: relative;
+  min-width: 8rem;
+}
+
+.block-flow:not(.vertical) .block:not(:last-child)::after {
+  content: "→";
+  position: absolute;
+  right: -1.05rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-muted);
+}
+
+.block-flow.vertical {
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 30rem;
+  margin-inline: auto;
+}
+
+.block-flow.vertical .block:not(:last-child)::after {
+  content: "↓";
+  position: static;
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--color-text-muted);
+}
+
+.block-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.block-grid.cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.block-grid.cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.block-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Breadcrumbs */
+.breadcrumbs {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.breadcrumbs a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  color: var(--color-link);
+}
+
+.breadcrumbs .separator {
+  margin: 0 0.375rem;
+  opacity: 0.5;
+}
+
+/* Page meta (last updated) */
+.page-meta {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  margin-bottom: 1.5rem;
+}
+
+/* Prose styles */
+.prose h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  line-height: 1.2;
+}
+
+.prose h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+.prose h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.prose p {
+  margin-bottom: 1rem;
+}
+
+.prose a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.prose a:hover {
+  text-decoration: underline;
+}
+
+.prose strong {
+  font-weight: 600;
+}
+
+.prose ul, .prose ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.prose li {
+  margin-bottom: 0.25rem;
+}
+
+.prose blockquote {
+  border-left: 4px solid var(--color-accent);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-code-bg);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.prose pre {
+  background: var(--color-code-bg);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.prose pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.875rem;
+}
+
+.prose th, .prose td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.prose th {
+  font-weight: 600;
+  background: var(--color-bg-sidebar);
+}
+
+.prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2rem 0;
+}
+
+.prose img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Status badges */
+.status-inviolable {
+  display: inline-block;
+  background: #dc2626;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+}
+
+.status-approved {
+  display: inline-block;
+  background: #16a34a;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+}
+
+/* Footer - full-width ribbon pinned to bottom */
+.site-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-height: var(--footer-height);
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  background: var(--color-bg);
+  border-top: 1px solid var(--color-border);
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  width: 100%;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.footer-left,
+.footer-center,
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.footer-center {
+  flex: 1;
+  justify-content: center;
+}
+
+.footer-right {
+  justify-content: flex-end;
+}
+
+.footer-separator {
+  opacity: 0.5;
+}
+
+.footer-version {
+  font-family: var(--font-mono);
+}
+
+.footer-commit {
+  cursor: help;
+}
+
+.footer-link {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  color: var(--color-link);
+}
+
+/* Mermaid diagrams */
+.mermaid {
+  background: transparent;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  text-align: center;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* External link indicator */
+.prose a[href^="http"]:not([href*="3leaps.net"])::after {
+  content: " ↗";
+  font-size: 0.75em;
+  opacity: 0.6;
+}
+
+/* Copy code button */
+.prose pre {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.prose pre:hover .copy-button {
+  opacity: 1;
+}
+
+.copy-button:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+
+/* Footer copyright - now inline in footer-right */
+.footer-copyright {
+  font-size: 0.6875rem;
+}
+
+/* Mobile header */
+.mobile-header {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3.5rem;
+  z-index: 200;
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-border);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+
+.nav-toggle,
+.mobile-theme-toggle {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+.mobile-theme-toggle {
+  color: var(--color-text-muted);
+}
+
+.nav-toggle svg,
+.mobile-theme-toggle svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.mobile-logo {
+  display: flex;
+  align-items: center;
+}
+
+.mobile-logo svg,
+.mobile-logo img {
+  width: 24px;
+  height: 24px;
+}
+
+.mobile-theme-toggle .icon-sun { display: none; }
+.mobile-theme-toggle .icon-moon { display: block; }
+
+[data-theme="dark"] .mobile-theme-toggle .icon-sun { display: block; }
+[data-theme="dark"] .mobile-theme-toggle .icon-moon { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .mobile-theme-toggle .icon-sun { display: block; }
+  :root:not([data-theme="light"]) .mobile-theme-toggle .icon-moon { display: none; }
+}
+
+/* On-page TOC */
+.toc {
+  position: fixed;
+  top: 6rem;
+  right: 2rem;
+  width: 200px;
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+  font-size: 0.8125rem;
+}
+
+.toc-title {
+  display: block;
+  font-weight: 600;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.75rem;
+}
+
+.toc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc li {
+  margin-bottom: 0.375rem;
+}
+
+.toc a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  display: block;
+  padding: 0.125rem 0;
+  transition: color 0.15s ease;
+}
+
+.toc a:hover {
+  color: var(--color-link);
+}
+
+.toc .toc-h3 {
+  padding-left: 0.75rem;
+  font-size: 0.75rem;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+  .toc {
+    display: none;
+  }
+
+  .content {
+    padding-right: 4rem;
+    max-width: 900px;
+  }
+
+  .mode-slides .content {
+    max-width: none;
+    padding-right: 2rem;
+  }
+}
+
+@media (max-width: 1024px) {
+  .sidebar {
+    width: 240px;
+  }
+
+  .logo-icon {
+    height: 56px;
+    max-width: 150px;
+  }
+
+  .logo.logo-wordmark .logo-icon,
+  .logo.logo-wordmark .logo-img {
+    max-width: 150px;
+    max-height: 56px;
+  }
+
+  .content {
+    margin-left: 240px;
+    padding: 2rem;
+  }
+
+  .mode-slides .content {
+    margin-left: 240px;
+    padding: 1.25rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .mobile-header {
+    display: flex;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -280px;
+    width: 280px;
+    height: 100vh;
+    z-index: 100;
+    transition: left 0.3s ease;
+    border-right: 1px solid var(--color-border);
+  }
+
+  .sidebar.open {
+    left: 0;
+  }
+
+  .logo-icon {
+    height: 48px;
+    max-width: 130px;
+  }
+
+  .logo.logo-wordmark .logo-icon,
+  .logo.logo-wordmark .logo-img {
+    max-width: 130px;
+    max-height: 48px;
+  }
+
+  .content {
+    margin-left: 0;
+    padding: 1.5rem;
+    padding-top: 4rem;
+    padding-bottom: calc(var(--footer-height) + 1rem);
+  }
+
+  .mode-slides .content {
+    margin-left: 0;
+    padding: 1rem;
+    padding-top: 4rem;
+  }
+
+  .slide-frame {
+    width: 100%;
+    padding: 1.25rem;
+    max-height: calc(100vh - var(--footer-height) - 9rem);
+  }
+
+  .slide.two-column {
+    column-count: 1;
+  }
+
+  .slide-progress {
+    width: 7rem;
+  }
+}
+
+/* Print styles */
+@media print {
+  .sidebar,
+  .mobile-header,
+  .toc,
+  .theme-toggle,
+  .copy-button,
+  .site-footer {
+    display: none !important;
+  }
+
+  .layout {
+    display: block;
+  }
+
+  .content {
+    margin: 0;
+    padding: 0;
+    max-width: 100%;
+  }
+
+  .prose {
+    font-size: 11pt;
+    line-height: 1.5;
+  }
+
+  .prose a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  .prose a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    word-break: break-all;
+  }
+
+  .prose pre {
+    white-space: pre-wrap;
+    border: 1px solid #ccc;
+  }
+
+  h1, h2, h3 {
+    page-break-after: avoid;
+  }
+
+  pre, table, .mermaid {
+    page-break-inside: avoid;
+  }
+}