@dataimago/css 0.1.0-alpha.1

package/dist/dataimago.css

@@ -0,0 +1,1094 @@
+@charset "UTF-8";
+:root {
+  --color-palette-ink-50: #f5f5f4;
+  --color-palette-ink-100: #e7e5e4;
+  --color-palette-ink-200: #d6d3d1;
+  --color-palette-ink-300: #a8a29e;
+  --color-palette-ink-400: #78716c;
+  --color-palette-ink-500: #57534e;
+  --color-palette-ink-600: #44403c;
+  --color-palette-ink-700: #292524;
+  --color-palette-ink-800: #1c1917;
+  --color-palette-ink-900: #0c0a09;
+  --color-palette-cream-50: #fefdfb;
+  --color-palette-cream-100: #fdf9f2;
+  --color-palette-cream-200: #faf2e3;
+  --color-palette-cream-300: #f5e8cf;
+  --color-palette-cream-400: #edd9b3;
+  --color-palette-cream-500: #e0c088;
+  --color-palette-copper-50: #fdf4ee;
+  --color-palette-copper-100: #fbe5d1;
+  --color-palette-copper-200: #f6c79c;
+  --color-palette-copper-300: #f0a467;
+  --color-palette-copper-400: #ea8441;
+  --color-palette-copper-500: #d46820;
+  --color-palette-copper-600: #b55017;
+  --color-palette-copper-700: #913d15;
+  --color-palette-copper-800: #753318;
+  --color-palette-copper-900: #612b16;
+  --color-palette-accent-50: #fdf2f2;
+  --color-palette-accent-500: #b54a27;
+  --color-palette-accent-600: #9a3e20;
+  --color-palette-accent-700: #7d321a;
+  --color-palette-presentation-blue-50: #f0f8fc;
+  --color-palette-presentation-blue-500: #3498DB;
+  --color-palette-presentation-blue-600: #2980B9;
+  --color-palette-presentation-blue-700: #1f618d;
+  --color-functional-success: #27AE60;
+  --color-functional-warning: #F39C12;
+  --color-functional-error: #E74C3C;
+  --color-functional-info: #3498DB;
+  --font-family-sans: Fira Sans, system-ui, sans-serif;
+  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
+  --font-family-display: Josefin Sans, system-ui, sans-serif;
+  --font-family-brand: Futura, system-ui, sans-serif;
+  --font-family-math: Fira Math, Fira Sans Math, system-ui, sans-serif;
+  --font-size-micro: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-readable: 1.125rem;
+  --font-size-emphasis: 1.25rem;
+  --font-size-heading-small: 1.5rem;
+  --font-size-heading-medium: 1.875rem;
+  --font-size-heading-large: 2.25rem;
+  --font-size-heading-xl: 3rem;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heading-h1: var(--font-weight-bold);
+  --font-weight-heading-h2: var(--font-weight-medium);
+  --font-weight-heading-h3: var(--font-weight-normal);
+  --font-weight-heading-h4: var(--font-weight-light);
+  --font-weight-heading-h5: var(--font-weight-light);
+  --font-weight-heading-h6: var(--font-weight-light);
+  --font-weight-heading-subtitle: var(--font-weight-semibold);
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.625;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+:root, [data-bs-theme=light] {
+  --color-surface-page: #fdf9f2;
+  --color-surface-page-scrolled: #fdf9f2;
+  --color-surface-elevated: #fefdfb;
+  --color-surface-sunken: #faf2e3;
+  --color-surface-navbar: #fdf9f2;
+  --color-surface-navbar-scrolled: #fdf9f2;
+  --color-surface-code: #faf2e3;
+  --color-border-subtle: rgba(12, 10, 9, 0.08);
+  --color-border-moderate: rgba(12, 10, 9, 0.15);
+  --color-border-strong: rgba(12, 10, 9, 0.25);
+  --color-border-card: rgba(12, 10, 9, 0.15);
+  --color-border-code: #d6d3d1;
+  --color-content-primary: #0c0a09;
+  --color-content-secondary: #57534e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #fdf9f2;
+  --color-interactive-primary: #d46820;
+  --color-interactive-hover: #b55017;
+  --color-interactive-accent: #b54a27;
+  --color-interactive-focus: #d46820;
+  --color-presentation-accent: #3498DB;
+  --color-presentation-accent-hover: #2980B9;
+  --contrast-high: rgb(20, 20, 16);
+  --contrast-readable: rgb(20, 20, 16);
+  --contrast-medium: #7c7c7c;
+  --contrast-subtle: #7c7c7c;
+  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
+  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --border-subtle: rgba(20, 20, 16, 0.1);
+  --border-moderate: rgba(20, 20, 16, 0.15);
+  --border-focus: #3498DB;
+  --navigation-hover-background: rgba(20, 20, 16, 0.05);
+  --navigation-active-background: rgba(20, 20, 16, 0.1);
+}
+
+[data-bs-theme=dark] {
+  --color-surface-page: #0c0a09;
+  --color-surface-page-scrolled: #0c0a09;
+  --color-surface-elevated: #1c1917;
+  --color-surface-sunken: #0c0a09;
+  --color-surface-navbar: #0c0a09;
+  --color-surface-navbar-scrolled: #0c0a09;
+  --color-surface-code: #1c1917;
+  --color-border-subtle: rgba(253, 249, 242, 0.08);
+  --color-border-moderate: rgba(253, 249, 242, 0.15);
+  --color-border-strong: rgba(253, 249, 242, 0.25);
+  --color-border-card: rgba(253, 249, 242, 0.15);
+  --color-border-code: #292524;
+  --color-content-primary: #fdf9f2;
+  --color-content-secondary: #a8a29e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #0c0a09;
+  --color-interactive-primary: #f0a467;
+  --color-interactive-hover: #ea8441;
+  --color-interactive-accent: #b54a27;
+  --color-interactive-focus: #f0a467;
+  --color-presentation-accent: #3498DB;
+  --color-presentation-accent-hover: #2980B9;
+  --contrast-high: rgb(237, 237, 235);
+  --contrast-readable: rgb(237, 237, 235);
+  --contrast-medium: #83838f;
+  --contrast-subtle: #83838f;
+  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --border-subtle: rgba(237, 237, 235, 0.1);
+  --border-moderate: rgba(237, 237, 235, 0.15);
+  --border-focus: #4FC3F7;
+  --navigation-hover-background: rgba(237, 237, 235, 0.05);
+  --navigation-active-background: rgba(237, 237, 235, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-surface-page: #0c0a09;
+    --color-surface-page-scrolled: #0c0a09;
+    --color-surface-elevated: #1c1917;
+    --color-surface-sunken: #0c0a09;
+    --color-surface-navbar: #0c0a09;
+    --color-surface-navbar-scrolled: #0c0a09;
+    --color-surface-code: #1c1917;
+    --color-border-subtle: rgba(253, 249, 242, 0.08);
+    --color-border-moderate: rgba(253, 249, 242, 0.15);
+    --color-border-strong: rgba(253, 249, 242, 0.25);
+    --color-border-card: rgba(253, 249, 242, 0.15);
+    --color-border-code: #292524;
+    --color-content-primary: #fdf9f2;
+    --color-content-secondary: #a8a29e;
+    --color-content-muted: #78716c;
+    --color-content-inverse: #0c0a09;
+    --color-interactive-primary: #f0a467;
+    --color-interactive-hover: #ea8441;
+    --color-interactive-accent: #b54a27;
+    --color-interactive-focus: #f0a467;
+    --color-presentation-accent: #3498DB;
+    --color-presentation-accent-hover: #2980B9;
+    --contrast-high: rgb(237, 237, 235);
+    --contrast-readable: rgb(237, 237, 235);
+    --contrast-medium: #83838f;
+    --contrast-subtle: #83838f;
+    --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+    --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+    --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --border-subtle: rgba(237, 237, 235, 0.1);
+    --border-moderate: rgba(237, 237, 235, 0.15);
+    --border-focus: #4FC3F7;
+    --navigation-hover-background: rgba(237, 237, 235, 0.05);
+    --navigation-active-background: rgba(237, 237, 235, 0.1);
+  }
+}
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--font-lineHeight-normal);
+  color: var(--theme-text-primary);
+  background-color: var(--theme-body-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Global typography hierarchy */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-sans) !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-lineHeight-tight);
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-primary);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--spacing-lg);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+  margin-bottom: var(--spacing-lg);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+  line-height: var(--font-lineHeight-normal);
+}
+
+a {
+  color: var(--color-brand-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--color-brand-primary);
+  text-decoration-thickness: 2px;
+}
+
+a:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.3em;
+  background-color: var(--color-background-surface);
+  border-radius: var(--radius-sm);
+  color: var(--color-brand-accent);
+}
+
+pre {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  padding: var(--spacing-md);
+  background-color: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  margin-bottom: var(--spacing-md);
+}
+
+pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+.svg-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--logo-transition-duration) ease;
+}
+
+svg {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+
+.navbar-logo {
+  background-size: contain;
+  background-repeat: no-repeat;
+  max-height: 36px;
+  transition: max-height var(--logo-transition-duration) ease-in-out, transform var(--logo-transition-duration) ease-in-out, opacity var(--logo-transition-duration) ease-in-out;
+  will-change: max-height, transform, opacity;
+}
+.navbar-logo.shrink {
+  max-height: 28px;
+}
+.navbar-logo.transitioning {
+  opacity: 0.8;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.navbar-brand-logo {
+  display: inline-flex;
+  align-items: center;
+}
+.navbar-brand-logo svg {
+  height: 36px;
+  width: auto;
+  transition: all var(--logo-transition-duration) ease;
+}
+
+.hex-logo-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+}
+.hex-logo-container svg {
+  width: 280px;
+  height: auto;
+  transition: all var(--logo-transition-duration) ease;
+}
+@media (max-width: 768px) {
+  .hex-logo-container svg {
+    width: 200px;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .landing-logo {
+    animation: gentle-float 6s ease-in-out infinite;
+  }
+  .landing-logo:hover {
+    animation-play-state: paused;
+    transform: scale(1.05);
+  }
+}
+@keyframes gentle-float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+.footer-quarto-logo {
+  display: inline-flex;
+  align-items: center;
+}
+.footer-quarto-logo svg {
+  height: 24px;
+  width: auto;
+  transition: all var(--logo-transition-duration) ease;
+}
+.footer-quarto-logo path {
+  transition: fill var(--logo-transition-duration) ease;
+}
+.footer-quarto-logo:hover path, a:hover .footer-quarto-logo path {
+  fill: var(--logo-hover-fill);
+}
+
+.social-icons {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.social-icons a {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--logo-transition-duration) ease;
+}
+.social-icons a:hover {
+  transform: translateY(-2px);
+}
+.social-icons svg, .social-icons iconify-icon {
+  width: 24px;
+  height: 24px;
+  transition: all var(--logo-transition-duration) ease;
+}
+
+.navbar-nav .nav-link[href*="github.com"], .navbar-nav .nav-link[href*="bsky.app"] {
+  display: inline-flex;
+  align-items: center;
+}
+.navbar-nav .nav-link[href*="github.com"] iconify-icon, .navbar-nav .nav-link[href*="bsky.app"] iconify-icon {
+  font-size: 1.2rem;
+  transition: color var(--logo-transition-duration) ease;
+}
+.navbar-nav .nav-link[href*="github.com"]:hover iconify-icon, .navbar-nav .nav-link[href*="bsky.app"]:hover iconify-icon {
+  color: var(--theme-text-hover);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .svg-pulse {
+    animation: svg-pulse 2s ease-in-out infinite;
+  }
+  .svg-rotate {
+    animation: svg-rotate 20s linear infinite;
+  }
+}
+@keyframes svg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+@keyframes svg-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.svg-scale-hover {
+  transition: transform var(--logo-transition-duration) ease;
+}
+.svg-scale-hover:hover {
+  transform: scale(1.1);
+}
+
+.theme-svg path, .theme-svg circle, .theme-svg rect, .theme-svg polygon {
+  fill: var(--logo-default-fill);
+  transition: fill var(--logo-transition-duration) ease;
+}
+.theme-svg.svg-hover path, .theme-svg.svg-hover circle, .theme-svg.svg-hover rect, .theme-svg.svg-hover polygon, .theme-svg:hover path, .theme-svg:hover circle, .theme-svg:hover rect, .theme-svg:hover polygon {
+  fill: var(--logo-hover-fill);
+  stroke: var(--logo-hover-stroke, transparent);
+}
+.theme-svg.logo-navbar path, .theme-svg.logo-navbar circle, .theme-svg.logo-navbar rect, .theme-svg.logo-navbar polygon {
+  fill: var(--logo-default-fill);
+}
+.theme-svg.logo-hex path, .theme-svg.logo-hex circle, .theme-svg.logo-hex rect, .theme-svg.logo-hex polygon {
+  fill: var(--logo-default-fill);
+}
+
+[data-bs-theme=light] .theme-adaptive-svg {
+  filter: none;
+}
+
+[data-bs-theme=dark] .theme-adaptive-svg {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.svg-loading {
+  position: relative;
+}
+.svg-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid var(--theme-text-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+}
+.svg-loading svg {
+  opacity: 0.3;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .svg-loading::after {
+    animation: svg-spinner 0.8s linear infinite;
+  }
+}
+@keyframes svg-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.svg-aspect-ratio {
+  position: relative;
+  width: 100%;
+}
+.svg-aspect-ratio::before {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+.svg-aspect-ratio svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.svg-xs {
+  max-width: 16px;
+}
+
+.svg-sm {
+  max-width: 24px;
+}
+
+.svg-md {
+  max-width: 32px;
+}
+
+.svg-lg {
+  max-width: 48px;
+}
+
+.svg-xl {
+  max-width: 64px;
+}
+
+.svg-decorative {
+  aria-hidden: true;
+}
+
+.svg-icon[role=img] {
+  pointer-events: none;
+}
+
+.svg-interactive {
+  cursor: pointer;
+  transition: all var(--logo-transition-duration) ease;
+}
+.svg-interactive:focus {
+  outline: 2px solid var(--theme-focus-color);
+  outline-offset: 2px;
+}
+.svg-interactive:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.svg-accelerated {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .svg-container,
+  .navbar-logo,
+  .landing-logo,
+  .svg-pulse,
+  .svg-rotate,
+  .svg-scale-hover {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+.di-callout, .proof, .theorem, .definition, .proposition {
+  padding: var(--spacing-md, 1rem) var(--spacing-md, 1rem) var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
+  margin: var(--spacing-lg, 1.5rem) 0;
+  border-radius: var(--radius-sm, 4px);
+  background-color: var(--color-surface-sunken);
+  border-left: 4px solid var(--color-interactive-primary);
+}
+.di-callout .di-callout-title, .di-callout .proof-title, .proof .di-callout-title, .proof .proof-title, .di-callout .theorem-title, .proof .theorem-title, .di-callout .definition-title, .proof .definition-title, .di-callout .proposition-title, .proof .proposition-title, .theorem .di-callout-title, .theorem .proof-title, .theorem .theorem-title, .theorem .definition-title, .theorem .proposition-title, .definition .di-callout-title, .definition .proof-title, .definition .theorem-title, .definition .definition-title, .definition .proposition-title, .proposition .di-callout-title, .proposition .proof-title, .proposition .theorem-title, .proposition .definition-title, .proposition .proposition-title {
+  font-family: var(--font-family-display);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 0.5rem;
+  color: var(--color-content-primary);
+}
+.di-callout > :last-child, .proof > :last-child, .theorem > :last-child, .definition > :last-child, .proposition > :last-child {
+  margin-bottom: 0;
+}
+
+.di-callout-insight {
+  border-left-color: var(--color-interactive-accent);
+}
+.di-callout-insight .di-callout-title, .di-callout-insight .proof-title, .di-callout-insight .theorem-title, .di-callout-insight .definition-title, .di-callout-insight .proposition-title {
+  color: var(--color-interactive-accent);
+}
+
+.di-callout-tip {
+  border-left-color: var(--color-presentation-accent);
+}
+.di-callout-tip .di-callout-title, .di-callout-tip .proof-title, .di-callout-tip .theorem-title, .di-callout-tip .definition-title, .di-callout-tip .proposition-title {
+  color: var(--color-presentation-accent);
+}
+
+.di-callout-proof, .proof {
+  margin: var(--spacing-md, 1rem) 0;
+}
+.di-callout-proof .di-callout-title, .di-callout-proof .proof-title, .proof .di-callout-title, .proof .proof-title, .di-callout-proof .theorem-title, .proof .theorem-title, .di-callout-proof .definition-title, .proof .definition-title, .di-callout-proof .proposition-title, .proof .proposition-title {
+  font-style: italic;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-content-primary);
+}
+.di-callout-proof::after, .proof::after {
+  content: "□";
+  float: right;
+  color: var(--color-content-secondary);
+}
+
+.di-callout-rich {
+  padding: 0;
+  margin: 0.6em 0 0.8em 0;
+  border-radius: 6px;
+  border-left-width: 4px;
+  border-style: solid;
+  overflow: hidden;
+}
+.di-callout-rich .di-callout-title, .di-callout-rich .proof-title, .di-callout-rich .theorem-title, .di-callout-rich .definition-title, .di-callout-rich .proposition-title {
+  margin: 0;
+  padding: 0.35em 0.75em;
+  font-family: var(--font-family-display);
+  font-weight: var(--font-weight-semibold);
+  border-bottom: 1px solid currentColor;
+}
+.di-callout-rich > :not(.di-callout-title):not(.proof-title):not(.theorem-title):not(.definition-title):not(.proposition-title) {
+  padding-left: 0.9em;
+  padding-right: 0.9em;
+}
+.di-callout-rich > :last-child {
+  padding-bottom: 0.55em;
+}
+
+.di-callout-rich.di-callout-theorem, .di-callout-rich.theorem, .di-callout-rich.definition, .di-callout-rich.proposition {
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-interactive-primary) 10%, transparent), color-mix(in srgb, var(--color-interactive-primary) 3%, transparent));
+  border-color: color-mix(in srgb, var(--color-interactive-primary) 30%, transparent);
+  border-left-color: var(--color-interactive-primary);
+}
+.di-callout-rich.di-callout-theorem .di-callout-title, .di-callout-rich.di-callout-theorem .proof-title, .di-callout-rich.di-callout-theorem .theorem-title, .di-callout-rich.di-callout-theorem .definition-title, .di-callout-rich.di-callout-theorem .proposition-title, .di-callout-rich.theorem .di-callout-title, .di-callout-rich.theorem .proof-title, .di-callout-rich.theorem .theorem-title, .di-callout-rich.theorem .definition-title, .di-callout-rich.theorem .proposition-title, .di-callout-rich.definition .di-callout-title, .di-callout-rich.definition .proof-title, .di-callout-rich.definition .theorem-title, .di-callout-rich.definition .definition-title, .di-callout-rich.definition .proposition-title, .di-callout-rich.proposition .di-callout-title, .di-callout-rich.proposition .proof-title, .di-callout-rich.proposition .theorem-title, .di-callout-rich.proposition .definition-title, .di-callout-rich.proposition .proposition-title {
+  background: color-mix(in srgb, var(--color-interactive-primary) 18%, transparent);
+  color: color-mix(in srgb, var(--color-interactive-primary) 80%, var(--color-content-primary));
+  border-bottom-color: color-mix(in srgb, var(--color-interactive-primary) 28%, transparent);
+}
+
+.di-callout-rich.di-callout-insight {
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-interactive-accent) 10%, transparent), color-mix(in srgb, var(--color-interactive-accent) 3%, transparent));
+  border-color: color-mix(in srgb, var(--color-interactive-accent) 30%, transparent);
+  border-left-color: var(--color-interactive-accent);
+}
+.di-callout-rich.di-callout-insight .di-callout-title, .di-callout-rich.di-callout-insight .proof-title, .di-callout-rich.di-callout-insight .theorem-title, .di-callout-rich.di-callout-insight .definition-title, .di-callout-rich.di-callout-insight .proposition-title {
+  background: color-mix(in srgb, var(--color-interactive-accent) 18%, transparent);
+  color: color-mix(in srgb, var(--color-interactive-accent) 80%, var(--color-content-primary));
+  border-bottom-color: color-mix(in srgb, var(--color-interactive-accent) 28%, transparent);
+}
+
+.di-callout-rich.di-callout-tip {
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-presentation-accent) 8%, transparent), color-mix(in srgb, var(--color-presentation-accent) 3%, transparent));
+  border-color: color-mix(in srgb, var(--color-presentation-accent) 20%, transparent);
+  border-left-color: var(--color-presentation-accent);
+}
+.di-callout-rich.di-callout-tip .di-callout-title, .di-callout-rich.di-callout-tip .proof-title, .di-callout-rich.di-callout-tip .theorem-title, .di-callout-rich.di-callout-tip .definition-title, .di-callout-rich.di-callout-tip .proposition-title {
+  background: color-mix(in srgb, var(--color-presentation-accent) 15%, transparent);
+  color: var(--color-presentation-accent-hover);
+  border-bottom-color: color-mix(in srgb, var(--color-presentation-accent) 25%, transparent);
+}
+
+.di-figure-box {
+  border: 1px solid var(--color-border-moderate);
+  padding: 4px;
+  background-color: var(--color-surface-sunken);
+  display: inline-block;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.di-figure-box:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-prominent, 0 4px 12px rgba(0, 0, 0, 0.15));
+  border-color: var(--color-interactive-primary);
+}
+.di-figure-box:active {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-moderate, 0 2px 8px rgba(0, 0, 0, 0.12));
+}
+.di-figure-box:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: 2px;
+}
+
+.di-figure-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: color-mix(in srgb, var(--color-content-primary) 92%, transparent);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.di-figure-modal.is-open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: di-figure-modal-fade-in 0.25s ease;
+}
+.di-figure-modal .di-figure-modal-content {
+  position: relative;
+  max-width: 95vw;
+  max-height: 95vh;
+  animation: di-figure-modal-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.di-figure-modal .di-figure-modal-content img {
+  width: auto;
+  height: auto;
+  max-width: 95vw;
+  max-height: 95vh;
+  object-fit: contain;
+  border: 2px solid var(--color-interactive-primary);
+  background-color: var(--color-surface-elevated);
+  padding: 8px;
+  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-content-primary) 40%, transparent);
+}
+.di-figure-modal .di-figure-modal-close {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  font-size: 2rem;
+  color: var(--color-content-inverse);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  line-height: 1;
+  transition: transform 0.2s ease, color 0.2s ease;
+  font-family: inherit;
+}
+.di-figure-modal .di-figure-modal-close:hover {
+  transform: scale(1.2);
+  color: var(--color-interactive-primary);
+}
+.di-figure-modal .di-figure-modal-close:focus-visible {
+  outline: 2px solid var(--color-interactive-primary);
+  outline-offset: 4px;
+  border-radius: var(--radius-sm, 0.25rem);
+}
+.di-figure-modal .di-figure-modal-caption {
+  position: absolute;
+  bottom: -60px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: var(--color-content-inverse);
+  font-size: var(--font-size-small, 0.9rem);
+  font-style: italic;
+  padding: 0 2rem;
+  line-height: var(--line-height-normal, 1.4);
+}
+
+@keyframes di-figure-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes di-figure-modal-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .di-figure-box {
+    transition: none !important;
+  }
+  .di-figure-box:hover, .di-figure-box:active {
+    transform: none !important;
+  }
+  .di-figure-modal,
+  .di-figure-modal .di-figure-modal-content,
+  .di-figure-modal .di-figure-modal-close {
+    animation: none !important;
+    transition: none !important;
+  }
+  .di-figure-modal .di-figure-modal-close:hover {
+    transform: none !important;
+  }
+}
+.di-card {
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-component);
+  padding: var(--spacing-component-padding);
+  box-shadow: var(--shadow-moderate);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.di-card:hover {
+  box-shadow: var(--shadow-prominent);
+  transform: translateY(-2px);
+}
+
+.di-card-title {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-readable);
+  color: var(--color-content-primary);
+}
+
+.di-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-micro-tight);
+  padding: var(--spacing-micro-normal) var(--spacing-component-padding);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-component);
+  background: var(--color-surface-elevated);
+  color: var(--color-content-primary);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-base);
+  cursor: pointer;
+  transition: all var(--transition-standard);
+  min-height: 2.5rem;
+  font-family: inherit;
+}
+
+.di-button:hover {
+  background: var(--color-interactive-primary);
+  color: var(--color-content-inverse);
+  border-color: var(--color-interactive-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-prominent);
+}
+
+.di-button:focus {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: 2px;
+}
+
+.di-button-primary {
+  background: var(--color-interactive-primary);
+  color: var(--color-content-inverse);
+  border-color: var(--color-interactive-primary);
+}
+
+.di-button-primary:hover {
+  background: var(--color-interactive-hover);
+  border-color: var(--color-interactive-hover);
+}
+
+.di-button:hover {
+  background: var(--color-brand-accent);
+  color: var(--color-text-inverse);
+  border-color: var(--color-brand-accent);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
+}
+
+.di-button:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.di-button-primary {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  border-color: var(--color-brand-primary);
+}
+
+.di-button-primary:hover {
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
+}
+
+.di-hex-logo {
+  transition: max-height 0.25s ease-in-out, transform 0.25s ease-in-out;
+  cursor: pointer;
+  max-width: 100%;
+  height: auto;
+}
+.di-hex-logo:hover {
+  transform: scale(1.05);
+}
+@media (max-width: 768px) {
+  .di-hex-logo {
+    width: 150px;
+  }
+}
+@media (max-width: 480px) {
+  .di-hex-logo {
+    width: 120px;
+  }
+}
+
+.di-m-0 {
+  margin: 0;
+}
+
+.di-m-xs {
+  margin: var(--spacing-xs);
+}
+
+.di-m-sm {
+  margin: var(--spacing-sm);
+}
+
+.di-m-md {
+  margin: var(--spacing-md);
+}
+
+.di-m-lg {
+  margin: var(--spacing-lg);
+}
+
+.di-m-xl {
+  margin: var(--spacing-xl);
+}
+
+.di-p-0 {
+  padding: 0;
+}
+
+.di-p-xs {
+  padding: var(--spacing-xs);
+}
+
+.di-p-sm {
+  padding: var(--spacing-sm);
+}
+
+.di-p-md {
+  padding: var(--spacing-md);
+}
+
+.di-p-lg {
+  padding: var(--spacing-lg);
+}
+
+.di-p-xl {
+  padding: var(--spacing-xl);
+}
+
+.di-block {
+  display: block;
+}
+
+.di-inline {
+  display: inline;
+}
+
+.di-flex {
+  display: flex;
+}
+
+.di-hidden {
+  display: none;
+}
+
+.di-justify-center {
+  justify-content: center;
+}
+
+.di-items-center {
+  align-items: center;
+}
+
+.di-flex-col {
+  flex-direction: column;
+}
+
+.di-text-center {
+  text-align: center;
+}
+
+.di-text-left {
+  text-align: left;
+}
+
+.di-text-right {
+  text-align: right;
+}
+
+.di-text-primary {
+  color: var(--color-text-primary);
+}
+
+.di-text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.di-text-muted {
+  color: var(--color-text-muted);
+}
+
+.di-bg-page {
+  background-color: var(--color-background-page);
+}
+
+.di-bg-surface {
+  background-color: var(--color-background-surface);
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+*:focus {
+  outline: 2px solid var(--color-border-focus) !important;
+  outline-offset: 2px !important;
+  border-radius: var(--radius-sm) !important;
+}
+
+.di-button,
+button,
+[role=button],
+a {
+  min-height: 44px;
+  min-width: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .di-card:hover,
+  .di-button:hover,
+  .di-button:focus,
+  a:hover,
+  button:hover,
+  [role=button]:hover {
+    transform: none !important;
+  }
+  [data-parallax],
+  [data-scroll-effect] {
+    transform: none !important;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+@media (prefers-contrast: high) {
+  :root {
+    --color-brand-primary: #000000;
+    --color-brand-accent: #0000FF;
+    --color-text-primary: #000000;
+    --color-text-inverse: #FFFFFF;
+    --color-background-page: #FFFFFF;
+    --color-background-surface: #F0F0F0;
+    --color-border-default: #000000;
+    --color-border-focus: #FF0000;
+  }
+}