move.gl 0.0.1 → 0.0.2

package/src/scss/docs.scss

@@ -0,0 +1,2344 @@
+// =============================================================================
+// move.gl Docs & Demo Styles
+// =============================================================================
+// Combined styles for the documentation site and interactive demos.
+// This file contains layout, theme, and demo-specific UI styles.
+// All animation, effect, transition, and interaction functionality is
+// imported from the main move.gl library.
+
+// Import move.gl library for animations, loaders, effects, etc.
+@use "index" as *;
+
+// -----------------------------------------------------------------------------
+// Variables
+// -----------------------------------------------------------------------------
+
+:root {
+    --color-bg: #ffffff;
+    --color-text: #1a1a1a;
+    --color-text-muted: #666666;
+    --color-border: #e5e5e5;
+    --color-primary: #3b82f6;
+    --color-primary-hover: #2563eb;
+    --color-surface: #f5f5f5;
+    --color-code-bg: #1e1e1e;
+    --color-code-text: #d4d4d4;
+    --nav-height: 60px;
+}
+
+[data-theme="dark"] {
+    --color-bg: #0a0a0a;
+    --color-text: #fafafa;
+    --color-text-muted: #a3a3a3;
+    --color-border: #262626;
+    --color-surface: #171717;
+    --color-code-bg: #0d0d0d;
+}
+
+// -----------------------------------------------------------------------------
+// Base
+// -----------------------------------------------------------------------------
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+    height: auto;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+    // Override unit.gl global styles that prevent scrolling
+    position: static;
+    height: auto;
+    width: auto;
+    min-height: 100vh;
+    overflow-y: auto;
+}
+
+// -----------------------------------------------------------------------------
+// Navigation
+// -----------------------------------------------------------------------------
+
+.nav-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+    backdrop-filter: blur(10px);
+}
+
+.nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+.nav__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--nav-height);
+}
+
+.nav__logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+.nav__logo-text {
+    font-weight: 600;
+    font-size: 1.125rem;
+}
+
+.nav__version {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+    background: var(--color-surface);
+    border-radius: 4px;
+    color: var(--color-text-muted);
+}
+
+.nav__right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.nav__github {
+    color: var(--color-text);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+// Theme toggle
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--color-text);
+    transition: background 0.2s, border-color 0.2s;
+
+    &:hover {
+        background: var(--color-surface);
+    }
+}
+
+.theme-icon--dark {
+    display: none;
+}
+
+[data-theme="dark"] {
+    .theme-icon--light { display: none; }
+    .theme-icon--dark { display: block; }
+}
+
+// Dropdown
+.nav__dropdown {
+    position: relative;
+}
+
+.nav__dropdown-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--color-text);
+    transition: background 0.2s;
+
+    &:hover {
+        background: var(--color-surface);
+    }
+}
+
+.nav__dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    min-width: 220px;
+    max-height: calc(100vh - var(--nav-height) - 40px);
+    overflow-y: auto;
+    padding: 8px;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all 0.2s;
+
+    // Custom scrollbar for dropdown
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--color-border);
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: var(--color-text-muted);
+    }
+}
+
+.nav__dropdown.open .nav__dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.nav__dropdown-section {
+    padding: 8px 0;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--color-border);
+    }
+}
+
+.nav__dropdown-label {
+    display: block;
+    padding: 4px 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+}
+
+.nav__dropdown-menu a {
+    display: block;
+    padding: 8px 12px;
+    color: var(--color-text);
+    text-decoration: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    transition: background 0.15s;
+
+    &:hover {
+        background: var(--color-surface);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Container & Layout
+// -----------------------------------------------------------------------------
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: calc(var(--nav-height) + 40px) 24px 80px;
+}
+
+.header {
+    margin-bottom: 48px;
+}
+
+.header--hero {
+    text-align: center;
+    padding: 60px 0;
+}
+
+.eyebrow {
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-primary);
+    margin-bottom: 8px;
+}
+
+h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1.1;
+    margin: 0 0 16px;
+}
+
+.lead {
+    font-size: 1.25rem;
+    color: var(--color-text-muted);
+    max-width: 600px;
+    margin: 0 auto 32px;
+}
+
+h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin: 0 0 24px;
+}
+
+h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 12px;
+}
+
+h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 8px;
+}
+
+section {
+    margin-bottom: 64px;
+}
+
+// -----------------------------------------------------------------------------
+// Page Header (Demo pages)
+// -----------------------------------------------------------------------------
+
+.page-header {
+    padding: 48px 0 32px;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 48px;
+}
+
+.page-header__badge {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background: var(--color-text);
+    color: var(--color-bg);
+    padding: 4px 10px;
+    margin-bottom: 16px;
+}
+
+.page-header__title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1.1;
+    margin: 0 0 16px;
+}
+
+.page-header__description {
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
+    max-width: 65ch;
+    margin: 0;
+    line-height: 1.6;
+}
+
+// -----------------------------------------------------------------------------
+// Section (Demo pages)
+// -----------------------------------------------------------------------------
+
+.section {
+    margin-bottom: 64px;
+}
+
+.section__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 16px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid var(--color-text);
+}
+
+.section__description {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    margin: 0 0 24px;
+    max-width: 65ch;
+    line-height: 1.6;
+}
+
+// -----------------------------------------------------------------------------
+// Code Block
+// -----------------------------------------------------------------------------
+
+.code-block {
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: 24px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-bottom: 24px;
+    font-family: 'JetBrains Mono', 'SF Mono', monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+}
+
+.code-block code {
+    display: block;
+    white-space: pre;
+}
+
+.code-block .keyword {
+    color: #c586c0;
+}
+
+.code-block .string {
+    color: #ce9178;
+}
+
+.code-block .function {
+    color: #dcdcaa;
+}
+
+.code-block .comment {
+    color: #6a9955;
+}
+
+.code-block .number {
+    color: #b5cea8;
+}
+
+// -----------------------------------------------------------------------------
+// API Table
+// -----------------------------------------------------------------------------
+
+.api-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 24px;
+}
+
+.api-table th,
+.api-table td {
+    text-align: left;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.api-table th {
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    background: var(--color-surface);
+}
+
+.api-table code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.875rem;
+    background: var(--color-surface);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+// -----------------------------------------------------------------------------
+// Controls
+// -----------------------------------------------------------------------------
+
+.controls {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin: 24px 0;
+}
+
+// -----------------------------------------------------------------------------
+// Demo Links Navigation
+// -----------------------------------------------------------------------------
+
+.demo-links {
+    margin-top: 64px;
+    padding-top: 32px;
+    border-top: 1px solid var(--color-border);
+}
+
+.demo-links__title {
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin: 0 0 16px;
+}
+
+.demo-links__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.demo-links__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--color-text);
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.demo-links__item:hover {
+    border-color: var(--color-text);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.demo-links__item--active {
+    background: var(--color-text);
+    color: var(--color-bg);
+    border-color: var(--color-text);
+}
+
+// -----------------------------------------------------------------------------
+// Buttons
+// -----------------------------------------------------------------------------
+
+.btn,
+button.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid var(--color-text);
+    background: var(--color-bg);
+    color: var(--color-text);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.btn:hover,
+button.btn:hover {
+    background: var(--color-text);
+    color: var(--color-bg);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.btn:active,
+button.btn:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.btn-primary,
+.btn--primary {
+    background: var(--color-text);
+    color: var(--color-bg);
+    border-color: var(--color-text);
+}
+
+.btn-primary:hover,
+.btn--primary:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+}
+
+.btn-secondary,
+.btn--secondary {
+    background: transparent;
+    color: var(--color-text);
+    border-color: var(--color-border);
+}
+
+.btn-secondary:hover,
+.btn--secondary:hover {
+    background: var(--color-surface);
+    border-color: var(--color-text);
+}
+
+.btn-danger {
+    background: #dc2626;
+    color: white;
+    border-color: #dc2626;
+}
+
+.btn-danger:hover {
+    background: #b91c1c;
+    border-color: #b91c1c;
+}
+
+.hero-actions {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+// -----------------------------------------------------------------------------
+// Feature Grid (Demo pages)
+// -----------------------------------------------------------------------------
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.feature-card {
+    padding: 24px;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    position: relative;
+    transition: all 0.2s;
+}
+
+.feature-card:hover {
+    border-color: var(--color-text);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+}
+
+.feature-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--color-primary);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+.feature-card h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 8px;
+}
+
+.feature-card p {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.feature-card__icon {
+    font-size: 2rem;
+    margin-bottom: 12px;
+}
+
+.feature-card__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 8px;
+}
+
+.feature-card__desc {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.5;
+}
+
+// -----------------------------------------------------------------------------
+// Demo Grid
+// -----------------------------------------------------------------------------
+
+.demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 24px;
+}
+
+.demo-card {
+    padding: 24px;
+    background: var(--color-surface);
+    border-radius: 12px;
+    border: 1px solid var(--color-border);
+    text-align: center;
+}
+
+.demo-card__preview {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+}
+
+.demo-card__title {
+    font-size: 1rem;
+    margin: 0 0 4px;
+}
+
+.demo-card__desc {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    margin: 0 0 12px;
+}
+
+.demo-card__link {
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo Row
+// -----------------------------------------------------------------------------
+
+.demo-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 48px;
+    margin-bottom: 32px;
+    padding: 24px;
+
+    // Timing demo row modifier
+    &--timing {
+        .demo-box.active {
+            transform: translateX(100px);
+        }
+    }
+}
+
+.demo-item {
+    text-align: center;
+    min-width: 100px;
+    padding: 20px;
+
+    p {
+        margin: 12px 0 0;
+        font-size: 0.875rem;
+        color: var(--color-text-muted);
+    }
+}
+
+.demo-box {
+    width: 60px;
+    height: 60px;
+    background: var(--color-primary);
+    border-radius: 8px;
+}
+
+// -----------------------------------------------------------------------------
+// Demo Section Headers
+// -----------------------------------------------------------------------------
+
+.demo-section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 48px 0 8px;
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:first-of-type {
+        margin-top: 32px;
+    }
+}
+
+.demo-section-desc {
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    margin: 0 0 24px;
+}
+
+// -----------------------------------------------------------------------------
+// Demo Grid (Fixed Layout for Loaders/Animations)
+// -----------------------------------------------------------------------------
+
+.demo-grid-fixed {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 24px;
+    margin-bottom: 48px;
+}
+
+.demo-card-fixed {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+        border-color: var(--color-text-muted);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.demo-card-fixed__preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    min-height: 120px;
+    max-height: 120px;
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+    overflow: hidden;
+    position: relative;
+}
+
+.demo-card-fixed__info {
+    padding: 16px;
+    flex: 1;
+}
+
+.demo-card-fixed__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0 0 4px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.demo-card-fixed__desc {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    margin: 0;
+}
+
+.demo-card-fixed__code {
+    padding: 12px 16px;
+    background: var(--color-code-bg);
+    border-top: 1px solid var(--color-border);
+
+    code {
+        display: block;
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.7rem;
+        color: #9cdcfe;
+        background: transparent;
+        padding: 0;
+        white-space: nowrap;
+        overflow-x: auto;
+    }
+
+    .tag { color: #569cd6; }
+    .attr { color: #9cdcfe; }
+    .string { color: #ce9178; }
+}
+
+// Animation demo box within fixed cards
+.demo-card-fixed__preview .demo-box {
+    width: 50px;
+    height: 50px;
+    background: var(--color-primary);
+    border-radius: 8px;
+}
+
+// -----------------------------------------------------------------------------
+// Loader Demo Styling (Greyscale)
+// -----------------------------------------------------------------------------
+
+// Override loader colors for demo display - greyscale only, no white
+.demo-card-fixed__preview {
+
+    // Set demo background to light grey for visibility
+    background: #f0f0f0;
+
+    [data-theme="dark"] & {
+        background: #1a1a1a;
+    }
+
+    // Base loader element styling
+    .loader {
+        // Apply greyscale colors - use currentColor approach
+        color: #333333;
+
+        [data-theme="dark"] & {
+            color: #999999;
+        }
+    }
+
+    // Spinner and ring loaders - use border colors
+    .loader--spinner,
+    .loader--dual-ring,
+    .loader--circle-notch,
+    .loader--ring,
+    .loader--circle-spinner,
+    .loader--circle-dual,
+    .loader--circle-clip,
+    .loader--circle-clip-dual,
+    .loader--circle-nested,
+    .loader--circle-triple,
+    .loader--circle-pulse,
+    .loader--hourglass,
+    .loader--gradient {
+        border-color: #333333 transparent #333333 transparent;
+
+        &::after, &::before {
+            border-color: #333333 transparent #333333 transparent;
+        }
+
+        [data-theme="dark"] & {
+            border-color: #999999 transparent #999999 transparent;
+
+            &::after, &::before {
+                border-color: #999999 transparent #999999 transparent;
+            }
+        }
+    }
+
+    // Dots, bars, bubble loaders - use background color
+    .loader--dots > *,
+    .loader--dots-bounce > *,
+    .loader--dots-wave > *,
+    .loader--dots-fade > *,
+    .loader--dots-grow > *,
+    .loader--ellipsis > *,
+    .loader--typing > *,
+    .loader--bars > *,
+    .loader--wave-bar > *,
+    .loader--bar-bounce > *,
+    .loader--bar-pulse > *,
+    .loader--bar-flash > *,
+    .loader--bar-wave > *,
+    .loader--bar-equalizer > *,
+    .loader--bar-sound-wave > *,
+    .loader--bar-shrink > *,
+    .loader--bar-matrix > *,
+    .loader--bubble-rotate > *,
+    .loader--bubble-dots-bounce > *,
+    .loader--bubble-dots-flash > *,
+    .loader--bubble-dots-pulse > *,
+    .loader--bubble-dots-rotate > *,
+    .loader--bubble-expand > *,
+    .loader--bubble-collision > *,
+    .loader--chase > *,
+    .loader--pendulum > *,
+    .loader--bounce > *,
+    .loader--windmill > *,
+    .loader--folding > *,
+    .loader--wifi > *,
+    .loader--atom > *,
+    .loader--dna span,
+    .loader--progress-dots span,
+    .loader--progress-segments span,
+    .loader--rect-dual > *,
+    .loader--rect-expand > *,
+    .loader--rect-alternate > *,
+    .loader--rect-walk > *,
+    .loader--rect-nested > *,
+    .loader--rect-stepped > *,
+    .loader--ripple > *,
+    .loader--circle-ripple > * {
+        background-color: #333333 !important;
+
+        [data-theme="dark"] & {
+            background-color: #999999 !important;
+        }
+    }
+
+    // Single element loaders with background
+    .loader--pulse,
+    .loader--heartbeat,
+    .loader--square,
+    .loader--cube,
+    .loader--rect-flip,
+    .loader--rect-fill,
+    .loader--rect-shrink,
+    .loader--rect-morph,
+    .loader--rect-diamond,
+    .loader--morph,
+    .loader--bubble-flip,
+    .loader--circle-dot,
+    .loader--circle-orbit,
+    .loader--heart,
+    .loader--star,
+    .loader--coin,
+    .loader--seesaw,
+    .loader--orbit,
+    .loader--infinity {
+        background-color: #333333 !important;
+
+        [data-theme="dark"] & {
+            background-color: #999999 !important;
+        }
+    }
+
+    // Progress bars
+    .loader--progress,
+    .loader--progress-fill,
+    .loader--progress-indeterminate,
+    .loader--progress-stripe,
+    .loader--progress-stripe-fill,
+    .loader--progress-pulse,
+    .loader--progress-split,
+    .loader--progress-gradient {
+        background-color: #d0d0d0 !important;
+
+        &::after, &::before {
+            background-color: #333333 !important;
+        }
+
+        [data-theme="dark"] & {
+            background-color: #404040 !important;
+
+            &::after, &::before {
+                background-color: #999999 !important;
+            }
+        }
+    }
+
+    // Bar expand and reveal
+    .loader--bar-expand,
+    .loader--bar-reveal {
+        background-color: #d0d0d0 !important;
+
+        &::after {
+            background-color: #333333 !important;
+        }
+
+        [data-theme="dark"] & {
+            background-color: #404040 !important;
+
+            &::after {
+                background-color: #999999 !important;
+            }
+        }
+    }
+
+    // Text loaders
+    .loader--text-fill,
+    .loader--text-dots,
+    .loader--text-pulse,
+    .loader--text-spotlight,
+    .loader--text-typing,
+    .loader--text-shake,
+    .loader--text-gradient,
+    .loader--text-percentage {
+        color: #333333 !important;
+
+        [data-theme="dark"] & {
+            color: #999999 !important;
+        }
+    }
+
+    .loader--text-bounce span,
+    .loader--text-fade span,
+    .loader--text-wave span {
+        color: #333333 !important;
+
+        [data-theme="dark"] & {
+            color: #999999 !important;
+        }
+    }
+
+    // Text spinner icon
+    .loader--text-spinner span {
+        border-color: #333333 transparent #333333 transparent !important;
+
+        [data-theme="dark"] & {
+            border-color: #999999 transparent #999999 transparent !important;
+        }
+    }
+
+    // Skeleton loaders
+    .loader--skeleton-shimmer,
+    .loader--skeleton-pulse,
+    .loader--skeleton-wave,
+    .loader--skeleton-fade {
+        background-color: #d0d0d0 !important;
+
+        [data-theme="dark"] & {
+            background-color: #404040 !important;
+        }
+    }
+
+    // Graphic loaders (icons)
+    .loader--clipboard,
+    .loader--book,
+    .loader--document,
+    .loader--envelope,
+    .loader--search,
+    .loader--clock,
+    .loader--gear {
+        color: #333333 !important;
+
+        &::before, &::after {
+            background-color: #333333 !important;
+            border-color: #333333 !important;
+        }
+
+        [data-theme="dark"] & {
+            color: #999999 !important;
+
+            &::before, &::after {
+                background-color: #999999 !important;
+                border-color: #999999 !important;
+            }
+        }
+    }
+
+    // Object loaders
+    .loader--ping-pong > *,
+    .loader--rolling-rock > *,
+    .loader--bouncing-ball > *,
+    .loader--brackets > *,
+    .loader--flip-card > * {
+        background-color: #333333 !important;
+
+        [data-theme="dark"] & {
+            background-color: #999999 !important;
+        }
+    }
+
+    // Special border-based loaders
+    .loader--brackets::before,
+    .loader--brackets::after {
+        border-color: #333333 !important;
+
+        [data-theme="dark"] & {
+            border-color: #999999 !important;
+        }
+    }
+
+    // Battery loader
+    .loader--battery {
+        border-color: #333333 !important;
+
+        &::before, &::after {
+            background-color: #333333 !important;
+        }
+
+        [data-theme="dark"] & {
+            border-color: #999999 !important;
+
+            &::before, &::after {
+                background-color: #999999 !important;
+            }
+        }
+    }
+
+    // Progress circle SVG
+    .loader--progress-circle svg path {
+        stroke: #333333 !important;
+
+        [data-theme="dark"] & {
+            stroke: #999999 !important;
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Code Block
+// -----------------------------------------------------------------------------
+
+.code-block {
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: 24px;
+    border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    overflow-x: auto;
+    white-space: pre;
+}
+
+.code-block .comment {
+    color: #6a9955;
+}
+
+.code-block .class {
+    color: #4ec9b0;
+}
+
+.code-block .keyword {
+    color: #c678dd;
+}
+
+.code-block .string {
+    color: #98c379;
+}
+
+.code-block .function {
+    color: #61afef;
+}
+
+.code-block .number {
+    color: #d19a66;
+}
+
+code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.875em;
+    background: var(--color-surface);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+// -----------------------------------------------------------------------------
+// Documentation Sections
+// -----------------------------------------------------------------------------
+
+.doc-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 32px;
+}
+
+.doc-section h3 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: 16px;
+}
+
+.doc-section ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.doc-section li {
+    margin-bottom: 8px;
+}
+
+.doc-section a {
+    color: var(--color-text);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--color-primary);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Footer
+// -----------------------------------------------------------------------------
+
+.footer {
+    margin-top: 80px;
+    padding: 32px 0;
+    border-top: 1px solid var(--color-border);
+}
+
+.footer__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 24px;
+}
+
+.footer__brand {
+    font-weight: 600;
+}
+
+.footer__tagline {
+    color: var(--color-text-muted);
+    margin-left: 8px;
+}
+
+.footer__right {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.footer__links {
+    display: flex;
+    gap: 16px;
+}
+
+.footer__link {
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: 0.875rem;
+
+    &:hover {
+        color: var(--color-text);
+    }
+}
+
+.footer__copyright {
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+}
+
+// -----------------------------------------------------------------------------
+// Demo Animation Wrappers
+// -----------------------------------------------------------------------------
+// These classes extend the core move.gl animation classes for use in demos.
+// The demo uses the actual library classes - no custom keyframes defined here.
+// This ensures the documentation accurately represents the library's capabilities.
+
+// Demo wrapper that applies infinite looping for showcase purposes
+.demo-loop {
+    animation-iteration-count: infinite !important;
+}
+
+// Demo wrapper for slower animations (better for showcases)
+.demo-slow {
+    animation-duration: 2s !important;
+}
+
+// Demo wrapper for faster animations
+.demo-fast {
+    animation-duration: 0.5s !important;
+}
+
+// -----------------------------------------------------------------------------
+// Effect Demo Containers
+// -----------------------------------------------------------------------------
+
+.effect-demo {
+    .effect-box {
+        width: 120px;
+        height: 80px;
+        background: #f8fafc;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #1e293b;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .color-block {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    }
+}
+
+// Original (no filter) - for comparison
+.effect--original img {
+    filter: none;
+    border: 2px solid #10b981;
+}
+
+// -----------------------------------------------------------------------------
+// Keyframe Demo Box
+// -----------------------------------------------------------------------------
+
+.keyframe-box {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: white;
+    font-weight: 600;
+}
+
+// -----------------------------------------------------------------------------
+// Mouse Demo Box
+// -----------------------------------------------------------------------------
+
+.mouse-box {
+    width: 100%;
+    min-width: 100px;
+    height: 80px;
+    background: #f8fafc;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #1e293b;
+    transition: all 0.3s ease;
+}
+
+button.mouse-box {
+    appearance: none;
+    font-family: inherit;
+}
+
+// -----------------------------------------------------------------------------
+// Scroll Demo
+// -----------------------------------------------------------------------------
+
+.scroll-demo {
+    .scroll-container {
+        width: 100%;
+        height: 120px;
+        overflow-y: auto;
+        background: #f8fafc;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+
+    .scroll-content p {
+        margin: 0 0 24px 0;
+        color: #64748b;
+    }
+}
+
+// Scroll snap demo
+.scroll--snap {
+    scroll-snap-type: y mandatory;
+
+    .scroll-snap-item {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        scroll-snap-align: start;
+        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+        color: white;
+        font-weight: 600;
+        border-radius: 4px;
+        margin-bottom: 8px;
+
+        &:last-child { margin-bottom: 0; }
+    }
+}
+
+// Custom scrollbar for demos
+.scrollbar--custom {
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    &::-webkit-scrollbar-track {
+        background: #e2e8f0;
+        border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+        border-radius: 4px;
+    }
+}
+
+.scrollbar--hidden {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+// Backdrop blur demo container
+.backdrop-container {
+    position: relative;
+
+    .backdrop-bg {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #f472b6 0%, #8b5cf6 50%, #3b82f6 100%);
+        border-radius: 8px;
+    }
+
+    .backdrop--blur {
+        position: relative;
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        background: rgba(255, 255, 255, 0.2);
+    }
+}
+
+// Text selection demo
+.selection--custom {
+    &::selection {
+        background-color: #8b5cf6;
+        color: white;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo Controls & Buttons
+// -----------------------------------------------------------------------------
+
+.controls {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+    flex-wrap: wrap;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+}
+
+.btn-secondary {
+    background: var(--color-surface);
+    color: var(--color-text);
+
+    &:hover {
+        background: var(--color-border);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Log Output
+// -----------------------------------------------------------------------------
+
+.log-output {
+    background: var(--color-code-bg);
+    color: #00ff88;
+    padding: 1rem;
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 1rem;
+
+    .log-entry {
+        padding: 0.25rem 0;
+        border-bottom: 1px solid #333;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .timestamp {
+        color: #888;
+        margin-right: 0.5rem;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// API Tables
+// -----------------------------------------------------------------------------
+
+.api-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+
+    th,
+    td {
+        padding: 0.75rem;
+        text-align: left;
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+        background: var(--color-surface);
+        font-weight: 600;
+    }
+
+    code {
+        background: var(--color-border);
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-size: 13px;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo Containers
+// -----------------------------------------------------------------------------
+
+.demo-container {
+    position: relative;
+    background: var(--color-surface);
+    border-radius: 12px;
+    padding: 2rem;
+    margin: 1rem 0;
+    overflow: hidden;
+
+    // Specific height for draggable demos
+    &--draggable {
+        height: 400px;
+        border: 2px dashed var(--color-border);
+    }
+
+    [data-theme="dark"] & {
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    }
+}
+
+.demo-area {
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed var(--color-border);
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+// -----------------------------------------------------------------------------
+// Status Indicators
+// -----------------------------------------------------------------------------
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 500;
+
+    &--active {
+        background: rgba(0, 255, 136, 0.1);
+        color: #00ff88;
+    }
+
+    &--inactive {
+        background: rgba(255, 100, 100, 0.1);
+        color: #ff6464;
+    }
+
+    &--pending {
+        background: rgba(255, 200, 0, 0.1);
+        color: #ffc800;
+    }
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+// -----------------------------------------------------------------------------
+// Tabs
+// -----------------------------------------------------------------------------
+
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 1rem;
+}
+
+.tab {
+    padding: 0.75rem 1rem;
+    border: none;
+    background: none;
+    color: var(--color-text-muted);
+    font-weight: 500;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all 0.2s ease;
+
+    &:hover {
+        color: var(--color-text);
+    }
+
+    &.active {
+        color: var(--color-primary);
+        border-bottom-color: var(--color-primary);
+    }
+}
+
+.tab-content {
+    display: none;
+
+    &.active {
+        display: block;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Range Sliders
+// -----------------------------------------------------------------------------
+
+.slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 1rem 0;
+}
+
+.slider-label {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--color-border);
+    outline: none;
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--color-primary);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    &::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--color-primary);
+        cursor: pointer;
+        border: none;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Tooltips
+// -----------------------------------------------------------------------------
+
+.tooltip {
+    position: relative;
+
+    &::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-8px);
+        padding: 0.5rem 0.75rem;
+        background: var(--color-code-bg);
+        color: white;
+        font-size: 12px;
+        border-radius: 4px;
+        white-space: nowrap;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s ease;
+    }
+
+    &:hover::after {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(-50%) translateY(-4px);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Keyboard
+// -----------------------------------------------------------------------------
+
+.keyboard-demo {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    margin: 2rem 0;
+    color: white;
+}
+
+.keyboard__input {
+    width: 100%;
+    padding: 1rem 1.5rem;
+    font-size: 1.125rem;
+    font-family: inherit;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    margin-bottom: 1.5rem;
+
+    &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: rgba(255, 255, 255, 0.4);
+    }
+}
+
+.mode-buttons {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.mode-btn {
+    padding: 8px 16px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, 0.5);
+    }
+
+    &.active {
+        background: white;
+        color: #1a1a2e;
+        border-color: white;
+    }
+}
+
+.keyboard {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.keyboard__row,
+.keyboard > div {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+}
+
+.key {
+    min-width: 40px;
+    height: 44px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.25);
+        border-color: rgba(255, 255, 255, 0.4);
+    }
+
+    &:active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: scale(0.95);
+    }
+}
+
+.keyboard__stats {
+    display: flex;
+    gap: 2rem;
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.7);
+
+    span {
+        font-weight: 600;
+        color: white;
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Draggable
+// -----------------------------------------------------------------------------
+
+.drag-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-border) 100%);
+    border-radius: 12px;
+    border: 2px dashed var(--color-border);
+    margin: 2rem 0;
+    overflow: hidden;
+}
+
+.draggable-box {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 12px;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+    user-select: none;
+    transition: box-shadow 0.2s ease;
+
+    &:active {
+        cursor: grabbing;
+        box-shadow: 0 12px 48px rgba(102, 126, 234, 0.4);
+    }
+
+    &--pink {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        box-shadow: 0 8px 32px rgba(240, 147, 251, 0.3);
+    }
+
+    &--cyan {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        box-shadow: 0 8px 32px rgba(79, 172, 254, 0.3);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Gesture
+// -----------------------------------------------------------------------------
+
+.gesture-area {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    user-select: none;
+    touch-action: none;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+        pointer-events: none;
+    }
+}
+
+.gesture-icon {
+    font-size: 80px;
+    margin-bottom: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.gesture-label {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.gesture-hint {
+    font-size: 14px;
+    opacity: 0.8;
+}
+
+.gesture-feedback {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 500;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &.visible {
+        opacity: 1;
+    }
+}
+
+.direction-indicator {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+
+    &.active {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+
+    &.left { left: 20px; top: 50%; transform: translateY(-50%); }
+    &.right { right: 20px; top: 50%; transform: translateY(-50%); }
+    &.up { top: 20px; left: 50%; transform: translateX(-50%); }
+    &.down { bottom: 60px; left: 50%; transform: translateX(-50%); }
+}
+
+.gesture-log {
+    background: var(--color-code-bg);
+    color: #00ff88;
+    padding: 1rem;
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    max-height: 250px;
+    overflow-y: auto;
+    margin: 1rem 0;
+
+    .entry {
+        padding: 0.25rem 0;
+        border-bottom: 1px solid #333;
+        display: flex;
+        gap: 0.5rem;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .timestamp { color: #888; min-width: 80px; }
+    .type { color: #61afef; min-width: 80px; font-weight: 600; }
+    .details { color: #e4e8eb; }
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Screensaver
+// -----------------------------------------------------------------------------
+
+.screensaver-preview {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16/9;
+    background: #000;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+.screensaver-content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+
+    &.active {
+        opacity: 1;
+    }
+
+    .icon {
+        font-size: 80px;
+        margin-bottom: 1rem;
+        animation: screensaver-float 3s ease-in-out infinite;
+    }
+
+    .text {
+        font-size: 24px;
+        font-weight: 600;
+        color: white;
+    }
+
+    .subtext {
+        font-size: 14px;
+        opacity: 0.8;
+        margin-top: 0.5rem;
+        color: white;
+    }
+}
+
+@keyframes screensaver-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
+
+.preview-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+
+    .icon {
+        font-size: 48px;
+        margin-bottom: 1rem;
+    }
+}
+
+.status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.countdown {
+    font-size: 24px;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Video Overlay
+// -----------------------------------------------------------------------------
+
+.video-preview {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16/9;
+    background:
+        linear-gradient(45deg, #333 25%, transparent 25%),
+        linear-gradient(-45deg, #333 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #333 75%),
+        linear-gradient(-45deg, transparent 75%, #333 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+.preview-content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+
+    .icon {
+        font-size: 64px;
+    }
+
+    .text {
+        font-size: 24px;
+        font-weight: 600;
+        margin-top: 1rem;
+    }
+}
+
+.video-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &.visible {
+        opacity: 1;
+    }
+}
+
+.overlay-effect {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Stats Cards
+// -----------------------------------------------------------------------------
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 2rem 0;
+}
+
+.stat-card {
+    background: var(--color-surface);
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    border: 1px solid var(--color-border);
+}
+
+.stat-card__value {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.stat-card__label {
+    font-size: 14px;
+    color: var(--color-text-muted);
+    margin-top: 0.5rem;
+}
+
+// -----------------------------------------------------------------------------
+// Demo: Control Panels
+// -----------------------------------------------------------------------------
+
+.controls-panel {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.control-group {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1rem;
+
+    label {
+        display: block;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        opacity: 0.7;
+        margin-bottom: 0.5rem;
+    }
+
+    .value {
+        font-size: 24px;
+        font-weight: 700;
+        color: var(--color-primary);
+    }
+
+    input[type="range"] {
+        width: 100%;
+        margin-top: 0.5rem;
+    }
+}
+
+.effect-buttons {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.effect-btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    background: transparent;
+    color: white;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: var(--color-primary);
+    }
+
+    &.active {
+        border-color: var(--color-primary);
+        background: rgba(102, 126, 234, 0.2);
+    }
+}
+
+// Activity log for demos
+.activity-log {
+    background: #000;
+    color: #00ff88;
+    padding: 1rem;
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    max-height: 150px;
+    overflow-y: auto;
+    margin-top: 1rem;
+}
+
+// -----------------------------------------------------------------------------
+// Responsive
+// -----------------------------------------------------------------------------
+
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    .lead {
+        font-size: 1rem;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .footer__content {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .footer__right {
+        flex-direction: column;
+    }
+}