unit.gl 0.1.13 → 0.3.1

package/scss/classes/_docs.scss

@@ -0,0 +1,4690 @@
+////
+///
+/// Docs / Demo Styles Module
+/// ===========================================================================
+///
+/// Complete styling for the documentation site using the Q unit system.
+/// All sizes use the q() function for consistent, fluid sizing.
+///
+/// 1Q = 0.0625rem = 1px at default browser settings.
+///
+/// The fluid typography system works as follows:
+/// - html font-size scales from 12px (320px viewport) to 24px (2560px viewport)
+/// - All q() values and rem units scale proportionally with html font-size
+/// - This means at small screens, q(16) = 12px, at large screens q(16) = 24px
+///
+////
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:map";
+@use "../variables/unit" as *;
+@use "../variables/scale" as *;
+@use "../variables/view" as *;
+@use "../mixins/unit" as *;
+
+// ============================================================================
+// CSS Custom Properties (Design Tokens)
+// ============================================================================
+
+:root {
+    // Colors - Light theme (default)
+    --swiss-black: #000000;
+    --swiss-white: #ffffff;
+    --swiss-red: #ff0000;
+    --swiss-gray-50: #fafafa;
+    --swiss-gray-100: #f5f5f5;
+    --swiss-gray-200: #e8e8e8;
+    --swiss-gray-300: #d4d4d4;
+    --swiss-gray-400: #a3a3a3;
+    --swiss-gray-500: #737373;
+    --swiss-gray-600: #525252;
+    --swiss-gray-700: #404040;
+    --swiss-gray-800: #262626;
+    --swiss-gray-900: #171717;
+
+    // Semantic colors (mapped for theming)
+    --color-bg: var(--swiss-white);
+    --color-bg-subtle: var(--swiss-gray-50);
+    --color-bg-muted: var(--swiss-gray-100);
+    --color-text: var(--swiss-black);
+    --color-text-muted: var(--swiss-gray-600);
+    --color-text-subtle: var(--swiss-gray-500);
+    --color-border: var(--swiss-gray-200);
+    --color-border-strong: var(--swiss-black);
+    --color-accent: var(--swiss-red);
+    --color-code-bg: var(--swiss-gray-900);
+    --color-code-text: var(--swiss-gray-300);
+    --color-code-comment: var(--swiss-gray-500);
+
+    // Typography
+    --font-sans:
+        "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
+        sans-serif;
+    --font-mono:
+        "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Roboto Mono",
+        monospace;
+
+    // Grid - Using Q units (these scale with fluid html font-size)
+    --grid-unit: #{q(8)};
+    --max-width: #{q(1200)};
+
+    // Transitions
+    --transition-fast: 0.1s ease;
+    --transition-base: 0.2s ease;
+    --transition-slow: 0.3s ease;
+
+    // Shadows
+    --shadow-sm: 0 #{q(1)} #{q(2)} rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 #{q(4)} #{q(12)} rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 #{q(8)} #{q(24)} rgba(0, 0, 0, 0.15);
+
+    // Density-aware properties
+    // These use JavaScript-injected --dpr and --dpr-inverse for runtime adjustment
+    // Default to 1 when JavaScript hasn't initialized
+    --dpr: 1;
+    --dpr-inverse: 1;
+
+    // Density-adjusted grid unit
+    // Maintains physical consistency across pixel densities
+    --grid-unit-density: calc(var(--grid-unit) * var(--dpr-inverse));
+
+    // Physical-to-digital multiplier (1mm = 4px at 96dpi)
+    --mm-to-px: 4;
+
+    // Q format breakpoint values (derived from paper sizes × 4)
+    --bp-us: #{map.get($breakpoints, us)}; // Q07 Portrait → 240px
+    --bp-ss: #{map.get($breakpoints, ss)}; // Q06 Portrait → 360px
+    --bp-xs: #{map.get($breakpoints, xs)}; // Q05 Portrait → 540px
+    --bp-sm: #{map.get($breakpoints, sm)}; // Q04 Portrait → 720px
+    --bp-md: #{map.get($breakpoints, md)}; // Q03 Landscape → 1440px
+    --bp-lg: #{map.get($breakpoints, lg)}; // Q02 Landscape → 2160px
+    --bp-xl: #{map.get($breakpoints, xl)}; // Q01 Landscape → 2880px
+    --bp-ul: #{map.get($breakpoints, ul)}; // Q00 Landscape → 4320px
+}
+
+// Dark theme
+[data-theme="dark"] {
+    --color-bg: #0a0a0a;
+    --color-bg-subtle: #111111;
+    --color-bg-muted: #1a1a1a;
+    --color-text: #fafafa;
+    --color-text-muted: #a3a3a3;
+    --color-text-subtle: #737373;
+    --color-border: #2a2a2a;
+    --color-border-strong: #fafafa;
+    --color-accent: #ff3333;
+    --color-code-bg: #111111;
+    --color-code-text: #e5e5e5;
+    --color-code-comment: #6b7280;
+
+    // Invert shadows for dark mode
+    --shadow-sm: 0 #{q(1)} #{q(2)} rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 #{q(4)} #{q(12)} rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 #{q(8)} #{q(24)} rgba(0, 0, 0, 0.5);
+}
+
+// ============================================================================
+// Base Reset & Typography
+// ============================================================================
+// NOTE: We do NOT set html font-size here - it's set by unit.gl.css with
+// fluid_type() which scales 12px → 24px across viewports. All rem/q() values
+// will scale proportionally.
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    // font-size is controlled by unit.gl.css fluid_type mixin
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-sans);
+    // Use Q units for font-size - this will scale with the fluid html font-size
+    font-size: q(16); // 1rem equivalent at base, scales with viewport
+    line-height: q(24); // 1.5 line-height ratio (24/16)
+    font-weight: 400;
+    color: var(--color-text);
+    background: var(--color-bg);
+    margin: 0;
+    padding: 0;
+    transition:
+        background-color var(--transition-base),
+        color var(--transition-base);
+
+    // Prevent scroll when mobile nav is open
+    &.nav-open {
+        overflow: hidden;
+
+        @media (min-width: #{q(768)}) {
+            overflow: auto;
+        }
+    }
+}
+
+// ============================================================================
+// Accessibility Essentials
+// ============================================================================
+
+// Skip to main content link
+.skip-link {
+    position: absolute;
+    top: #{q(-100)};
+    left: #{q(16)};
+    z-index: 10000;
+    padding: #{q(12)} #{q(24)};
+    background: var(--color-text);
+    color: var(--color-bg);
+    font-weight: 600;
+    font-size: #{q(14)};
+    text-decoration: none;
+    transition: top var(--transition-fast);
+
+    &:focus {
+        top: #{q(16)};
+        outline: #{q(2)} solid var(--color-accent);
+        outline-offset: #{q(2)};
+    }
+}
+
+// Noscript warning for JS-dependent features
+.noscript-warning {
+    background: var(--color-accent);
+    color: var(--color-bg);
+    padding: #{q(16)} #{q(24)};
+    margin-bottom: #{q(24)};
+    font-size: #{q(14)};
+    line-height: #{q(20)};
+
+    strong {
+        font-weight: 600;
+    }
+}
+
+// Global focus-visible styles
+*:focus-visible {
+    outline: #{q(2)} solid var(--color-accent);
+    outline-offset: #{q(2)};
+}
+
+// Remove default focus for mouse users
+*:focus:not(:focus-visible) {
+    outline: none;
+}
+
+// Active nav item indicator
+.is-active {
+    color: var(--color-accent) !important;
+    font-weight: 600;
+
+    &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: #{q(3)};
+        height: #{q(16)};
+        background: var(--color-accent);
+    }
+}
+
+// ============================================================================
+// Reduced Motion Support
+// ============================================================================
+
+@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;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 0 0 calc(var(--grid-unit) * 2);
+    letter-spacing: -0.02em;
+    color: var(--color-text);
+}
+
+h1 {
+    font-size: #{q(56)};
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    margin-bottom: calc(var(--grid-unit) * 3);
+}
+
+h2 {
+    font-size: #{q(28)};
+    margin-top: calc(var(--grid-unit) * 6);
+    margin-bottom: calc(var(--grid-unit) * 3);
+    padding-bottom: calc(var(--grid-unit) * 2);
+    border-bottom: #{q(2)} solid var(--color-border-strong);
+}
+
+h3 {
+    font-size: #{q(18)};
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-top: calc(var(--grid-unit) * 4);
+    margin-bottom: calc(var(--grid-unit) * 2);
+}
+
+p {
+    margin: 0 0 calc(var(--grid-unit) * 2);
+    max-width: 65ch;
+}
+
+.lead {
+    font-size: #{q(20)};
+    font-weight: 300;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+    max-width: 50ch;
+}
+
+.eyebrow {
+    font-size: #{q(12)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-accent);
+    margin-bottom: calc(var(--grid-unit) * 1);
+}
+
+code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background: var(--color-bg-muted);
+    padding: #{q(2)} #{q(6)};
+}
+
+// ============================================================================
+// Layout
+// ============================================================================
+
+.container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 0 calc(var(--grid-unit) * 4);
+}
+
+.header {
+    padding: calc(var(--grid-unit) * 8) 0 calc(var(--grid-unit) * 6);
+    border-bottom: 1px solid var(--color-border-strong);
+    margin-bottom: calc(var(--grid-unit) * 6);
+}
+
+.header--hero {
+    padding: calc(var(--grid-unit) * 12) 0 calc(var(--grid-unit) * 8);
+}
+
+main {
+    padding-bottom: calc(var(--grid-unit) * 12);
+}
+
+section {
+    margin-bottom: calc(var(--grid-unit) * 10);
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: calc(var(--grid-unit) * 6);
+}
+
+@media (min-width: #{q(1024)}) {
+    .layout {
+        grid-template-columns: #{q(200)} 1fr;
+    }
+}
+
+// ============================================================================
+// Links
+// ============================================================================
+
+a {
+    color: var(--color-text);
+    text-decoration: none;
+    border-bottom: 1px solid var(--color-border-strong);
+    transition:
+        border-color var(--transition-fast),
+        color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+}
+
+// ============================================================================
+// Tags & Labels
+// ============================================================================
+
+.tag {
+    display: inline-block;
+    font-size: #{q(10)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background: var(--color-text);
+    color: var(--color-bg);
+    padding: #{q(4)} #{q(10)};
+    margin-left: calc(var(--grid-unit) * 1);
+    vertical-align: middle;
+}
+
+.tag--outline {
+    background: transparent;
+    color: var(--color-text);
+    border: 1px solid var(--color-border-strong);
+}
+
+.tag--red {
+    background: var(--color-accent);
+}
+
+// ============================================================================
+// Buttons
+// ============================================================================
+
+button,
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--grid-unit) * 0.5);
+    font-family: var(--font-sans);
+    font-size: #{q(12)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border-strong);
+    padding: calc(var(--grid-unit) * 1.25) calc(var(--grid-unit) * 2.5);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+    box-shadow: var(--shadow-sm);
+}
+
+button:hover,
+.btn:hover {
+    background: var(--color-text);
+    color: var(--color-bg);
+    border-color: var(--color-text);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+button:active,
+.btn:active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-sm);
+}
+
+button.active,
+.btn.active {
+    background: var(--color-text);
+    color: var(--color-bg);
+}
+
+.btn--primary {
+    background: var(--color-text);
+    color: var(--color-bg);
+    border-color: var(--color-text);
+}
+
+.btn--primary:hover {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-bg);
+}
+
+.btn--secondary {
+    background: transparent;
+    box-shadow: none;
+}
+
+.btn--secondary:hover {
+    background: var(--color-bg-subtle);
+    box-shadow: none;
+    transform: none;
+}
+
+.btn--ghost {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.btn--ghost:hover {
+    background: var(--color-bg-subtle);
+    border-color: var(--color-border);
+    transform: none;
+}
+
+// ============================================================================
+// Hero Actions
+// ============================================================================
+
+.hero-actions {
+    display: flex;
+    gap: calc(var(--grid-unit) * 2);
+    margin-top: calc(var(--grid-unit) * 4);
+    flex-wrap: wrap;
+}
+
+// ============================================================================
+// Feature Grid & Cards
+// ============================================================================
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(#{q(280)}, 1fr));
+    gap: calc(var(--grid-unit) * 3);
+}
+
+.feature-card {
+    background: var(--color-bg);
+    padding: calc(var(--grid-unit) * 3);
+    border: 1px solid var(--color-border);
+    transition: all var(--transition-base);
+    position: relative;
+}
+
+.feature-card:hover {
+    border-color: var(--color-border-strong);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+
+.feature-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: #{q(3)};
+    background: var(--color-accent);
+    opacity: 0;
+    transition: opacity var(--transition-base);
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+.feature-card__icon {
+    font-size: #{q(32)};
+    font-weight: 700;
+    margin-bottom: calc(var(--grid-unit) * 2);
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{q(48)};
+    height: #{q(48)};
+    background: var(--color-bg-subtle);
+}
+
+.feature-card__title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 calc(var(--grid-unit) * 1);
+    color: var(--color-text);
+}
+
+.feature-card__desc {
+    font-size: #{q(14)};
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.6;
+}
+
+// ============================================================================
+// Documentation Sections
+// ============================================================================
+
+.doc-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(#{q(200)}, 1fr));
+    gap: calc(var(--grid-unit) * 4);
+}
+
+.doc-section h3 {
+    font-size: #{q(12)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-text-muted);
+    margin-bottom: calc(var(--grid-unit) * 2);
+}
+
+.doc-section ul {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 1);
+}
+
+.doc-section li {
+    padding: 0;
+    border: none;
+}
+
+.doc-section a {
+    font-size: #{q(15)};
+    font-weight: 500;
+    color: var(--color-text);
+    border-bottom: none;
+}
+
+.doc-section a:hover {
+    color: var(--color-accent);
+    border-bottom: 1px solid var(--color-accent);
+}
+
+// ============================================================================
+// Grid Toggle Controls
+// ============================================================================
+
+.grid-controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 0.5);
+    background: transparent;
+    padding: 0;
+    border: none;
+}
+
+.grid-controls button {
+    font-size: #{q(11)};
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 1);
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    outline: none;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.grid-controls button:hover,
+.grid-controls button:focus {
+    color: var(--color-text);
+    border-color: var(--color-border-strong);
+    outline: none;
+}
+
+.grid-controls button.active {
+    color: var(--color-bg);
+    background: var(--color-text);
+    border-color: var(--color-text);
+}
+
+.grid-status {
+    display: none;
+}
+// ============================================================================
+// Lists
+// ============================================================================
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+li {
+    padding: calc(var(--grid-unit) * 2) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+li:last-child {
+    border-bottom: none;
+}
+
+.list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--grid-unit) * 1);
+    margin: calc(var(--grid-unit) * -1);
+    transition: background var(--transition-fast);
+}
+
+.list-item:hover {
+    background: var(--color-bg-subtle);
+}
+
+.list-item__title {
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.list-item__meta {
+    font-size: #{q(12)};
+    color: var(--color-text-muted);
+}
+
+.list-item__arrow {
+    font-family: var(--font-mono);
+    font-size: #{q(12)};
+    color: var(--color-text-subtle);
+    transition: transform var(--transition-fast);
+}
+
+.list-item:hover .list-item__arrow {
+    transform: translateX(#{q(4)});
+    color: var(--color-accent);
+}
+
+// ============================================================================
+// Cards & Boxes
+// ============================================================================
+
+.card {
+    background: var(--color-bg);
+    border: 1px solid var(--color-border-strong);
+    padding: calc(var(--grid-unit) * 3);
+    transition:
+        box-shadow var(--transition-base),
+        transform var(--transition-base);
+}
+
+.card:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.card--filled {
+    background: var(--color-bg-muted);
+    border: none;
+}
+
+// ============================================================================
+// Demo Components
+// ============================================================================
+
+.demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(#{q(200)}, 1fr));
+    gap: calc(var(--grid-unit) * 3);
+}
+
+.demo-box {
+    position: relative;
+    aspect-ratio: 4/3;
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transition: border-color var(--transition-fast);
+}
+
+.demo-box:hover {
+    border-color: var(--color-border-strong);
+}
+
+.demo-box::after {
+    content: attr(data-label);
+    position: absolute;
+    bottom: calc(var(--grid-unit) * 1);
+    left: calc(var(--grid-unit) * 1);
+    font-size: #{q(10)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+}
+
+.demo-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--grid-unit) * 3);
+    align-items: flex-end;
+    margin-bottom: calc(var(--grid-unit) * 4);
+}
+
+.demo-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 1);
+}
+
+.demo-item__label {
+    font-family: var(--font-mono);
+    font-size: #{q(10)};
+    color: var(--color-text-muted);
+}
+
+// ============================================================================
+// Code Blocks
+// ============================================================================
+
+.code-block {
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: calc(var(--grid-unit) * 3);
+    font-family: var(--font-mono);
+    font-size: #{q(13)};
+    line-height: 1.7;
+    overflow-x: auto;
+    margin: calc(var(--grid-unit) * 3) 0;
+    border: 1px solid var(--color-border);
+    position: relative;
+    white-space: pre;
+    tab-size: 4;
+}
+
+.code-block::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: #{q(32)};
+    background: linear-gradient(
+        to right,
+        var(--color-accent) 20%,
+        transparent 20%
+    );
+    background-size: #{q(8)} #{q(8)};
+    opacity: 0.1;
+}
+
+.code-block pre {
+    margin: 0;
+    white-space: pre;
+}
+
+.code-block code {
+    font-family: var(--font-mono);
+    white-space: pre;
+}
+
+.code-block .keyword {
+    color: #c084fc;
+}
+
+.code-block .class {
+    color: #7dd3fc;
+}
+
+.code-block .value {
+    color: #fda4af;
+}
+
+.code-block .string {
+    color: #86efac;
+}
+
+.code-block .comment {
+    color: var(--color-code-comment);
+    font-style: italic;
+}
+
+.code-block .tag-hl {
+    color: #86efac;
+}
+
+.code-block .function {
+    color: #fbbf24;
+}
+
+// ============================================================================
+// Scale Demo
+// ============================================================================
+
+.scale-demo {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 1);
+}
+
+.scale-line {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 2);
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.scale-line__label {
+    font-family: var(--font-mono);
+    font-size: #{q(11)};
+    color: var(--color-text-muted);
+    min-width: #{q(80)};
+}
+
+.scale-line__value {
+    font-family: var(--font-mono);
+    font-size: #{q(11)};
+    color: var(--color-text-subtle);
+    min-width: #{q(60)};
+}
+
+.scale-line__bar {
+    height: q(8);
+    background: var(--color-text);
+}
+
+.scale-line__text {
+    flex: 1;
+}
+
+// ============================================================================
+// Number Grid
+// ============================================================================
+
+.number-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(#{q(80)}, 1fr));
+    gap: 1px;
+    background: var(--color-border);
+    border: 1px solid var(--color-border);
+    overflow: hidden;
+}
+
+.number-cell {
+    background: var(--color-bg);
+    padding: calc(var(--grid-unit) * 2);
+    text-align: center;
+    transition: background var(--transition-fast);
+}
+
+.number-cell:hover {
+    background: var(--color-bg-subtle);
+}
+
+.number-cell__value {
+    font-size: #{q(24)};
+    font-weight: 600;
+    line-height: 1;
+    margin-bottom: calc(var(--grid-unit) * 0.5);
+    color: var(--color-text);
+}
+
+.number-cell__label {
+    font-family: var(--font-mono);
+    font-size: #{q(10)};
+    color: var(--color-text-muted);
+}
+
+// ============================================================================
+// Navigation
+// ============================================================================
+
+.nav-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--color-bg);
+    backdrop-filter: blur(#{q(8)});
+    transition: background-color var(--transition-base);
+}
+
+.nav {
+    background: transparent;
+    border-bottom: 1px solid var(--color-border);
+    padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 4);
+    max-width: calc(var(--max-width) + var(--grid-unit) * 8);
+    margin: 0 auto;
+}
+
+.nav__inner {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--grid-unit) * 3);
+}
+
+.nav__right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--grid-unit) * 1.5);
+    flex-wrap: wrap;
+}
+
+.nav__logo {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 1);
+    font-weight: 700;
+    font-size: 1rem;
+    letter-spacing: -0.02em;
+    color: var(--color-text);
+    border: none;
+    outline: none;
+    text-decoration: none;
+}
+
+.nav__logo-text {
+    transition: color var(--transition-fast);
+}
+
+.nav__version {
+    font-size: #{q(9)};
+    font-weight: 500;
+    padding: #{q(2)} #{q(6)};
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}
+
+.nav__logo:hover .nav__logo-text,
+.nav__logo:focus .nav__logo-text {
+    color: var(--color-accent);
+}
+
+.nav__logo:hover,
+.nav__logo:focus {
+    border: none;
+    outline: none;
+}
+
+// GitHub link
+.nav__github {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{q(32)};
+    height: #{q(32)};
+    color: var(--color-text-muted);
+    border: none;
+    transition:
+        color var(--transition-fast),
+        background-color var(--transition-fast);
+}
+
+.nav__github:hover {
+    color: var(--color-text);
+    background: var(--color-bg-muted);
+    border: none;
+}
+
+.nav__links {
+    display: flex;
+    gap: calc(var(--grid-unit) * 0.5);
+    flex-wrap: wrap;
+}
+
+.nav__link {
+    font-size: #{q(11)};
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 1);
+    border: none;
+    border-radius: 0;
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+.nav__link:hover,
+.nav__link:focus {
+    color: var(--color-text);
+    border: none;
+    outline: none;
+}
+
+.nav__link--active {
+    color: var(--color-bg);
+    background: var(--color-text);
+}
+
+.nav__link--active:hover {
+    color: var(--color-bg);
+}
+
+// Theme Toggle
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{q(32)};
+    height: #{q(32)};
+    padding: 0;
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.theme-toggle:hover {
+    color: var(--color-text);
+    border-color: var(--color-text-muted);
+    background: var(--color-bg-muted);
+}
+
+.theme-icon--dark {
+    display: none;
+}
+
+[data-theme="dark"] .theme-icon--light {
+    display: none;
+}
+
+[data-theme="dark"] .theme-icon--dark {
+    display: block;
+}
+
+// Dropdown Menu
+.nav__dropdown {
+    position: relative;
+}
+
+.nav__dropdown-toggle {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 0.75);
+    font-size: #{q(11)};
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 1.25);
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    cursor: pointer;
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+.nav__dropdown-toggle:hover,
+.nav__dropdown-toggle:focus {
+    color: var(--color-text);
+    border-color: var(--color-text-muted);
+    outline: none;
+}
+
+.nav__dropdown-toggle svg {
+    transition: transform var(--transition-fast);
+}
+
+.nav__dropdown.open .nav__dropdown-toggle svg {
+    transform: rotate(180deg);
+}
+
+.nav__dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    min-width: #{q(200)};
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(#{q(-8)});
+    transition: all var(--transition-base);
+    z-index: 1000;
+    padding: calc(var(--grid-unit) * 1) 0;
+}
+
+.nav__dropdown.open .nav__dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(#{q(8)});
+}
+
+.nav__dropdown-section {
+    padding: calc(var(--grid-unit) * 1) 0;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--color-border);
+    }
+}
+
+.nav__dropdown-label {
+    display: block;
+    font-size: #{q(10)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-text-subtle);
+    padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 2);
+    margin-bottom: calc(var(--grid-unit) * 0.5);
+}
+
+.nav__dropdown-menu a {
+    display: block;
+    font-size: #{q(13)};
+    font-weight: 400;
+    color: var(--color-text-muted);
+    padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 2);
+    border: none;
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+.nav__dropdown-menu a:last-child {
+    border-bottom: none;
+}
+
+.nav__dropdown-menu a:hover,
+.nav__dropdown-menu a:focus {
+    color: var(--color-text);
+    background: var(--color-bg-muted);
+    border: none;
+    outline: none;
+}
+
+// Active nav link styling
+.nav__dropdown-menu a.is-active {
+    position: relative;
+    color: var(--color-accent);
+    font-weight: 500;
+}
+
+// ============================================================================
+// Mobile Navigation
+// ============================================================================
+
+// Hamburger menu toggle button
+.nav__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{q(40)};
+    height: #{q(40)};
+    padding: 0;
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    cursor: pointer;
+    z-index: 1001;
+
+    .icon-close {
+        display: none;
+    }
+
+    &[aria-expanded="true"] {
+        .icon-menu {
+            display: none;
+        }
+        .icon-close {
+            display: block;
+        }
+    }
+
+    // Hide on desktop
+    @media (min-width: #{q(768)}) {
+        display: none;
+    }
+}
+
+// Mobile nav menu
+.nav__right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--grid-unit) * 1.5);
+    flex-wrap: wrap;
+
+    // Mobile: full-screen overlay
+    @media (max-width: #{q(767)}) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+        padding: #{q(80)} #{q(24)} #{q(24)};
+        background: var(--color-bg);
+        z-index: 1000;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(#{q(-16)});
+        transition: all var(--transition-base);
+        overflow-y: auto;
+
+        &.is-open {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        // Stack items vertically on mobile
+        .grid-controls {
+            flex-direction: column;
+            width: 100%;
+            border-bottom: 1px solid var(--color-border);
+            padding-bottom: #{q(16)};
+            margin-bottom: #{q(16)};
+
+            button {
+                width: 100%;
+                justify-content: flex-start;
+                padding: #{q(12)} #{q(16)};
+            }
+        }
+
+        .theme-toggle {
+            width: 100%;
+            justify-content: flex-start;
+            padding: #{q(12)} #{q(16)};
+            margin-bottom: #{q(16)};
+        }
+
+        .nav__dropdown {
+            width: 100%;
+        }
+
+        .nav__dropdown-toggle {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .nav__dropdown-menu {
+            position: static;
+            opacity: 1;
+            visibility: visible;
+            transform: none;
+            box-shadow: none;
+            border: none;
+            border-top: 1px solid var(--color-border);
+            display: none;
+        }
+
+        .nav__dropdown.open .nav__dropdown-menu {
+            display: block;
+        }
+
+        .nav__github {
+            width: 100%;
+            justify-content: flex-start;
+            padding: #{q(12)} #{q(16)};
+            margin-top: auto;
+            border-top: 1px solid var(--color-border);
+            padding-top: #{q(16)};
+        }
+    }
+}
+
+// Nav wrapper mobile state
+.nav-wrapper.nav-open {
+    @media (max-width: #{q(767)}) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 999;
+    }
+}
+
+// ============================================================================
+// Sidebar Layout
+// ============================================================================
+
+.sidebar {
+    position: sticky;
+    top: calc(var(--grid-unit) * 8);
+    align-self: start;
+}
+
+.sidebar__section {
+    margin-bottom: calc(var(--grid-unit) * 3);
+}
+
+.sidebar__title {
+    font-size: #{q(10)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-text-subtle);
+    margin-bottom: calc(var(--grid-unit) * 1);
+}
+
+.sidebar__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar__list li {
+    padding: calc(var(--grid-unit) * 0.5) 0;
+    border-bottom: none;
+}
+
+.sidebar__link {
+    font-size: #{q(13)};
+    color: var(--color-text-muted);
+    border: none;
+    display: block;
+    padding: calc(var(--grid-unit) * 0.5) 0;
+    transition: color var(--transition-fast);
+}
+
+.sidebar__link:hover {
+    color: var(--color-text);
+    border: none;
+}
+
+.sidebar__link--active {
+    color: var(--color-text);
+    font-weight: 600;
+}
+
+// ============================================================================
+// Tables
+// ============================================================================
+
+// Table scroll wrapper for mobile responsiveness
+.table-scroll {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: calc(var(--grid-unit) * 3) 0;
+
+    // Fade indicator for scrollable content
+    &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: #{q(24)};
+        background: linear-gradient(to right, transparent, var(--color-bg));
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity var(--transition-fast);
+    }
+
+    @media (max-width: #{q(768)}) {
+        position: relative;
+
+        &.is-scrollable::after {
+            opacity: 1;
+        }
+    }
+
+    .table {
+        margin: 0;
+    }
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: calc(var(--grid-unit) * 3) 0;
+    font-size: #{q(14)};
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+}
+
+.table th,
+.table td {
+    text-align: left;
+    padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2);
+    border-bottom: 1px solid var(--color-border);
+    white-space: nowrap;
+
+    @media (min-width: #{q(768)}) {
+        white-space: normal;
+    }
+}
+
+.table th {
+    font-size: #{q(11)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    background: var(--color-bg-muted);
+}
+
+// Table caption for accessibility
+.table caption {
+    font-size: #{q(12)};
+    font-weight: 500;
+    color: var(--color-text-muted);
+    text-align: left;
+    padding: #{q(8)} #{q(16)};
+    background: var(--color-bg-subtle);
+    border: 1px solid var(--color-border);
+    border-bottom: none;
+    caption-side: top;
+}
+
+.table tr:last-child td {
+    border-bottom: none;
+}
+
+.table tr:hover td {
+    background: var(--color-bg-subtle);
+}
+
+.table td:first-child {
+    font-weight: 500;
+}
+
+.table code {
+    font-size: #{q(12)};
+    background: var(--color-bg-muted);
+    padding: #{q(2)} #{q(6)};
+}
+
+// ============================================================================
+// Alert Boxes
+// ============================================================================
+
+.alert {
+    padding: calc(var(--grid-unit) * 2) calc(var(--grid-unit) * 2.5);
+    margin: calc(var(--grid-unit) * 3) 0;
+    border-left: #{q(4)} solid var(--color-border-strong);
+    background: var(--color-bg-muted);
+}
+
+.alert--tip {
+    border-left-color: #22c55e;
+    background: rgba(34, 197, 94, 0.08);
+}
+
+.alert--warning {
+    border-left-color: #f59e0b;
+    background: rgba(245, 158, 11, 0.08);
+}
+
+.alert--danger {
+    border-left-color: var(--color-accent);
+    background: rgba(255, 0, 0, 0.08);
+}
+
+.alert__title {
+    font-size: #{q(12)};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: calc(var(--grid-unit) * 0.5);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 0.5);
+}
+
+.alert p {
+    margin: 0;
+    font-size: #{q(14)};
+    line-height: 1.6;
+}
+
+// ============================================================================
+// API Signature
+// ============================================================================
+
+.api-signature {
+    background: var(--color-code-bg);
+    color: #7dd3fc;
+    padding: calc(var(--grid-unit) * 2);
+    font-family: var(--font-mono);
+    font-size: #{q(14)};
+    margin: calc(var(--grid-unit) * 2) 0;
+}
+
+.api-params {
+    margin: calc(var(--grid-unit) * 2) 0;
+}
+
+.api-param {
+    display: grid;
+    grid-template-columns: #{q(140)} #{q(100)} 1fr;
+    gap: calc(var(--grid-unit) * 2);
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+    font-size: #{q(14)};
+}
+
+.api-param__name {
+    font-family: var(--font-mono);
+    font-weight: 500;
+}
+
+.api-param__type {
+    font-family: var(--font-mono);
+    font-size: #{q(12)};
+    color: var(--color-text-muted);
+}
+
+.api-param__desc {
+    color: var(--color-text-muted);
+}
+
+// ============================================================================
+// Footer
+// ============================================================================
+
+.footer {
+    border-top: 1px solid var(--color-border-strong);
+    padding: calc(var(--grid-unit) * 5) 0;
+    margin-top: calc(var(--grid-unit) * 10);
+    background: var(--color-bg-subtle);
+}
+
+.footer__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: calc(var(--grid-unit) * 4);
+    flex-wrap: wrap;
+}
+
+.footer__left {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 0.5);
+}
+
+.footer__brand {
+    font-size: #{q(16)};
+    font-weight: 700;
+    color: var(--color-text);
+    letter-spacing: -0.02em;
+}
+
+.footer__tagline {
+    font-size: #{q(12)};
+    color: var(--color-text-subtle);
+}
+
+.footer__right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: calc(var(--grid-unit) * 1);
+}
+
+.footer__links {
+    display: flex;
+    gap: calc(var(--grid-unit) * 2);
+}
+
+.footer__link {
+    font-size: #{q(12)};
+    font-weight: 500;
+    color: var(--color-text-muted);
+    border: none;
+    transition: color var(--transition-fast);
+}
+
+.footer__link:hover {
+    color: var(--color-accent);
+    border: none;
+}
+
+.footer__copyright {
+    font-size: #{q(11)};
+    color: var(--color-text-subtle);
+}
+
+// ============================================================================
+// Responsive
+// ============================================================================
+
+@media (max-width: #{q(768)}) {
+    h1 {
+        font-size: #{q(40)};
+    }
+
+    h2 {
+        font-size: #{q(24)};
+    }
+
+    .header {
+        padding: calc(var(--grid-unit) * 4) 0;
+    }
+
+    .nav__links {
+        display: none;
+    }
+
+    .grid-controls span {
+        display: none;
+    }
+
+    .sidebar {
+        display: none;
+    }
+
+    .api-param {
+        grid-template-columns: 1fr;
+        gap: calc(var(--grid-unit) * 0.5);
+    }
+
+    .footer__content {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .footer__right {
+        align-items: flex-start;
+    }
+}
+
+// ============================================================================
+// Form Controls (Docs only)
+// ============================================================================
+
+input[type="range"] {
+    --slider-track-h: #{q(3)};
+    --slider-thumb: #{q(14)};
+
+    width: 100%;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+/* WebKit (Chromium/Safari) */
+input[type="range"]::-webkit-slider-runnable-track {
+    height: var(--slider-track-h);
+    background: var(--color-text);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--slider-thumb);
+    height: var(--slider-thumb);
+    background: var(--color-text);
+    border: 1px solid var(--color-text);
+    margin-top: calc((var(--slider-track-h) - var(--slider-thumb)) / 2);
+}
+
+input[type="range"]:focus-visible::-webkit-slider-thumb {
+    outline: q(2) solid var(--color-accent);
+    outline-offset: q(2);
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-track {
+    height: var(--slider-track-h);
+    background: var(--color-text);
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: var(--slider-thumb);
+    height: var(--slider-thumb);
+    background: var(--color-text);
+    border: 1px solid var(--color-text);
+}
+
+input[type="range"]:focus-visible::-moz-range-thumb {
+    outline: q(2) solid var(--color-accent);
+    outline-offset: q(2);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Page Formats Demo
+   ───────────────────────────────────────────────────────────────── */
+
+.page--paper {
+    .paper-muted {
+        color: var(--color-text-muted);
+        font-size: 0.9375rem;
+        margin-top: calc(var(--grid-unit) * -1);
+    }
+
+    .paper-controls {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 2) 0;
+        padding: calc(var(--grid-unit) * 2);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+    }
+
+    @media (min-width: 720px) {
+        .paper-controls {
+            grid-template-columns: 1fr auto;
+            align-items: end;
+        }
+    }
+
+    .paper-field {
+        display: grid;
+        gap: calc(var(--grid-unit) * 1);
+    }
+
+    .paper-field__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .paper-select {
+        width: 100%;
+        padding: calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 1.5);
+        border: 1px solid var(--color-border-strong);
+        background: var(--color-bg);
+        color: var(--color-text);
+        font-family: var(--font-mono);
+        font-size: 0.875rem;
+    }
+
+    .paper-orient {
+        display: inline-flex;
+        gap: calc(var(--grid-unit) * 1);
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .paper-orient__btn {
+        padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 1.25);
+        font-size: 0.625rem;
+        outline: none;
+    }
+
+    .paper-orient__btn:focus {
+        outline: none;
+    }
+
+    .paper-preview-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--grid-unit) * 2);
+        padding: calc(var(--grid-unit) * 3);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+        margin: calc(var(--grid-unit) * 2) 0;
+        min-height: q(450);
+    }
+
+    .paper-preview-container {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: q(420);
+    }
+
+    .paper-preview {
+        border: 1px solid var(--color-border-strong);
+        background:
+            linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
+            linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
+        background-size: q(20) q(20);
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        transition:
+            width 0.3s ease,
+            height 0.3s ease;
+        box-shadow: var(--shadow-lg);
+    }
+
+    .paper-preview__meta {
+        display: grid;
+        gap: q(4);
+        padding: calc(var(--grid-unit) * 1.5);
+        background: rgba(255, 255, 255, 0.95);
+        border-top: 1px solid var(--color-border);
+    }
+
+    .paper-preview__title {
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        text-transform: uppercase;
+    }
+
+    .paper-preview__dims {
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        color: var(--color-text-muted);
+    }
+
+    .paper-scale-indicator {
+        font-family: var(--font-mono);
+        font-size: 0.6875rem;
+        color: var(--color-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    /* Comparison Grid */
+    .comparison-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: calc(var(--grid-unit) * 3);
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    @media (max-width: 900px) {
+        .comparison-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .comparison-column {
+        padding: calc(var(--grid-unit) * 2);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg);
+    }
+
+    .comparison-heading {
+        font-size: 0.875rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
+    }
+
+    .comparison-desc {
+        font-size: 0.75rem;
+        color: var(--color-text-muted);
+        margin: 0 0 calc(var(--grid-unit) * 2) 0;
+        line-height: 1.5;
+    }
+
+    .comparison-stack {
+        position: relative;
+        height: q(300);
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding: calc(var(--grid-unit) * 2);
+        background: var(--color-bg-subtle);
+    }
+
+    .comparison-sheet {
+        position: absolute;
+        bottom: calc(var(--grid-unit) * 2);
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding: calc(var(--grid-unit) * 1);
+        border: 1px solid;
+        transition: all 0.2s ease;
+        cursor: pointer;
+    }
+
+    .comparison-sheet:hover {
+        z-index: 10 !important;
+        box-shadow: var(--shadow-md);
+    }
+
+    .comparison-sheet--q {
+        background: rgba(220, 38, 38, 0.08);
+        border-color: var(--color-accent);
+    }
+
+    .comparison-sheet--a {
+        background: rgba(37, 99, 235, 0.08);
+        border-color: #2563eb;
+    }
+    .comparison-sheet--us {
+        background: rgba(22, 163, 74, 0.08);
+        border-color: #16a34a;
+    }
+
+    .comparison-sheet__label {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        white-space: nowrap;
+    }
+
+    .comparison-sheet--q .comparison-sheet__label {
+        color: var(--color-accent);
+    }
+
+    .comparison-sheet--a .comparison-sheet__label {
+        color: #2563eb;
+    }
+
+    .comparison-sheet--us .comparison-sheet__label {
+        color: #16a34a;
+    }
+
+    .paper-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: calc(var(--grid-unit) * 2);
+    }
+
+    .paper-table th,
+    .paper-table td {
+        border-bottom: 1px solid var(--color-border);
+        padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 1);
+        text-align: left;
+        font-size: 0.875rem;
+    }
+
+    .paper-table th {
+        font-size: 0.6875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: var(--color-text-muted);
+        font-weight: 700;
+    }
+
+    .paper-usage {
+        color: var(--color-text-muted);
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+    }
+}
+
+.guide--layer {
+    display: none;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    pointer-events: none;
+}
+
+.guide--layer.active {
+    display: block !important;
+}
+
+/* Ensure baseline is always above graph */
+.guide--layer[data-grid="graph"] {
+    z-index: 9998;
+}
+
+.guide--layer[data-grid="baseline"] {
+    z-index: 9999;
+}
+
+/* Graph Grid */
+.guide--layer.guide--graph_centered {
+    background-image:
+        linear-gradient(to right, rgba(255, 0, 0, 0.1) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
+    background-size: q(8) q(8);
+}
+
+/* Baseline Grid */
+.guide--layer.guide--baseline {
+    background-image: linear-gradient(
+        to bottom,
+        rgba(0, 150, 255, 0.15) 1px,
+        transparent 1px
+    );
+    background-size: 100% q(8);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Layering Demo Page
+   ───────────────────────────────────────────────────────────────── */
+
+.page--layers {
+    .layer-controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--grid-unit) * 1);
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .layer-btn {
+        font-family: var(--font-sans);
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 1.5);
+        border: 1px solid var(--color-border-strong);
+        background: var(--color-bg);
+        color: var(--color-text);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+
+    .layer-btn:hover {
+        background: var(--color-text);
+        color: var(--color-bg);
+    }
+
+    .layer-btn--active {
+        background: var(--color-text);
+        color: var(--color-bg);
+    }
+
+    .layer-demo {
+        position: relative;
+        height: q(400);
+        border: 1px solid var(--color-border);
+        margin: calc(var(--grid-unit) * 3) 0;
+        background:
+            linear-gradient(90deg, var(--color-border) 1px, transparent 1px),
+            linear-gradient(var(--color-border) 1px, transparent 1px);
+        background-size: q(20) q(20);
+        overflow: hidden;
+    }
+
+    .layer-box {
+        position: absolute;
+        width: q(180);
+        height: q(140);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition:
+            transform 0.3s ease,
+            opacity 0.3s ease,
+            box-shadow 0.3s ease;
+        border: none;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .layer-box:hover {
+        transform: scale(1.05);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    }
+
+    .layer-box__name {
+        font-size: 1rem;
+        font-weight: 700;
+        margin-bottom: q(4);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .layer-box__value {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        opacity: 0.9;
+    }
+
+    .layer-box__zindex {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        opacity: 0.7;
+        margin-top: q(4);
+    }
+
+    .layer-box--hidden {
+        opacity: 0.08 !important;
+        pointer-events: none;
+        transform: scale(0.95);
+    }
+
+    /* Layer colors and positions - cascading from back to front */
+    .z-canvas {
+        z-index: 1;
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        color: #fff;
+        top: q(200);
+        left: q(280);
+    }
+
+    .z-content {
+        z-index: 2;
+        background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
+        color: #fff;
+        top: q(160);
+        left: q(220);
+    }
+
+    .z-interface {
+        z-index: 3;
+        background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
+        color: #fff;
+        top: q(120);
+        left: q(160);
+    }
+
+    .z-modal {
+        z-index: 4;
+        background: linear-gradient(135deg, #d00000 0%, #e85d04 100%);
+        color: #fff;
+        top: q(80);
+        left: q(100);
+    }
+
+    .z-guides {
+        z-index: 5;
+        background: linear-gradient(135deg, #7209b7 0%, #b5179e 100%);
+        color: #fff;
+        top: q(40);
+        left: q(40);
+    }
+
+    .layer-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .layer-table th,
+    .layer-table td {
+        text-align: left;
+        padding: calc(var(--grid-unit) * 1.5);
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    .layer-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .layer-table td {
+        font-size: 0.875rem;
+    }
+
+    .layer-table td:first-child {
+        font-weight: 500;
+    }
+
+    .layer-table code {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        background: var(--color-bg-muted);
+        padding: 0.2em 0.4em;
+    }
+
+    .layer-swatch {
+        display: inline-block;
+        width: q(16);
+        height: q(16);
+        margin-right: q(8);
+        vertical-align: middle;
+    }
+
+    .stack-diagram {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: q(4);
+        margin: calc(var(--grid-unit) * 3) 0;
+        max-width: 500px;
+    }
+
+    .stack-item {
+        height: q(48);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 calc(var(--grid-unit) * 2);
+        font-size: 0.8125rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+    }
+
+    .stack-item__z {
+        font-family: var(--font-mono);
+        font-size: 0.6875rem;
+        font-weight: 400;
+        opacity: 0.9;
+    }
+
+    .stack-item--guides {
+        background: linear-gradient(135deg, #7209b7 0%, #b5179e 100%);
+        color: #fff;
+    }
+
+    .stack-item--modal {
+        background: linear-gradient(135deg, #d00000 0%, #e85d04 100%);
+        color: #fff;
+    }
+
+    .stack-item--interface {
+        background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
+        color: #fff;
+    }
+
+    .stack-item--content {
+        background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
+        color: #fff;
+    }
+
+    .stack-item--canvas {
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        color: #fff;
+    }
+
+    .use-case-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .use-case {
+        padding: calc(var(--grid-unit) * 2);
+        background: var(--color-bg-muted);
+        border: 1px solid var(--color-border);
+    }
+
+    .use-case__layer {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: calc(var(--grid-unit) * 1);
+        padding: q(4) q(8);
+        display: inline-block;
+    }
+
+    .use-case__layer--guides {
+        background: #7209b7;
+        color: #fff;
+    }
+
+    .use-case__layer--modal {
+        background: #d00000;
+        color: #fff;
+    }
+
+    .use-case__layer--interface {
+        background: #2d6a4f;
+        color: #fff;
+    }
+
+    .use-case__layer--content {
+        background: #0077b6;
+        color: #fff;
+    }
+
+    .use-case__layer--canvas {
+        background: #1a1a2e;
+        color: #fff;
+    }
+
+    .use-case__title {
+        font-weight: 600;
+        font-size: 0.9375rem;
+        margin-bottom: q(4);
+    }
+
+    .use-case__examples {
+        font-size: 0.8125rem;
+        color: var(--color-text-muted);
+        margin: 0;
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Device Explorer Demo Page
+   ───────────────────────────────────────────────────────────────── */
+
+.page--device {
+    .device-status {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 2) 0 calc(var(--grid-unit) * 3);
+    }
+
+    .device-status__item {
+        border: 1px solid var(--color-border);
+        background: var(--color-bg);
+        padding: calc(var(--grid-unit) * 2);
+    }
+
+    .device-status__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: calc(var(--grid-unit) * 1);
+    }
+
+    .device-status__value {
+        font-family: var(--font-mono);
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+    .device-features {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: calc(var(--grid-unit) * 3);
+        margin: calc(var(--grid-unit) * 2) 0;
+    }
+
+    .device-feature-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border-top: 1px solid var(--color-border);
+    }
+
+    .device-feature-list li {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: calc(var(--grid-unit) * 2);
+        padding: calc(var(--grid-unit) * 1.5) 0;
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    .device-feature-list__key {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        color: var(--color-text-muted);
+    }
+
+    .device-feature-list__value {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        font-weight: 700;
+        color: var(--color-text);
+    }
+
+    .device-tip {
+        margin-top: calc(var(--grid-unit) * 3);
+    }
+
+    .device-muted {
+        color: var(--color-text-muted);
+        margin-top: calc(var(--grid-unit) * 1);
+    }
+
+    .device-controls {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 2) 0;
+        padding: calc(var(--grid-unit) * 2);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+    }
+
+    .device-search {
+        display: grid;
+        gap: calc(var(--grid-unit) * 1);
+        min-width: min(520px, 100%);
+    }
+
+    .device-search__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .device-search__input {
+        width: 100%;
+        padding: calc(var(--grid-unit) * 1.25) calc(var(--grid-unit) * 1.5);
+        border: 1px solid var(--color-border-strong);
+        background: var(--color-bg);
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        outline: none;
+        transition: box-shadow var(--transition-fast);
+    }
+
+    .device-search__input:focus {
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
+    }
+
+    .device-match {
+        min-width: 160px;
+        text-align: right;
+    }
+
+    .device-match__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: calc(var(--grid-unit) * 1);
+    }
+
+    .device-match__value {
+        font-family: var(--font-mono);
+        font-size: 1rem;
+        font-weight: 700;
+    }
+
+    .device-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: calc(var(--grid-unit) * 2) 0;
+    }
+
+    .device-table th,
+    .device-table td {
+        text-align: left;
+        padding: calc(var(--grid-unit) * 1.5);
+        border-bottom: 1px solid var(--color-border);
+        vertical-align: top;
+    }
+
+    .device-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .device-table code {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        background: var(--color-bg-muted);
+        padding: 0.2em 0.4em;
+        white-space: nowrap;
+    }
+
+    .device-row.is-filtered {
+        display: none;
+    }
+
+    .device-row.is-match {
+        background: rgba(255, 0, 0, 0.06);
+    }
+
+    .device-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25em 0.5em;
+        border: 1px solid var(--color-border-strong);
+        font-family: var(--font-mono);
+        font-size: 0.6875rem;
+        background: var(--color-bg);
+        white-space: nowrap;
+    }
+
+    .code-block {
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+        padding: calc(var(--grid-unit) * 2);
+        overflow: auto;
+        margin: calc(var(--grid-unit) * 2) 0;
+        white-space: pre;
+        tab-size: 4;
+    }
+
+    .code-block pre {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        line-height: 1.5;
+        white-space: pre;
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Q Scale Explorer Demo Page
+   ───────────────────────────────────────────────────────────────── */
+
+.page--qscale {
+    .qscale-metrics {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 2) 0 calc(var(--grid-unit) * 3);
+    }
+
+    .qscale-metrics__item {
+        border: 1px solid var(--color-border);
+        background: var(--color-bg);
+        padding: calc(var(--grid-unit) * 2);
+    }
+
+    .qscale-metrics__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: calc(var(--grid-unit) * 1);
+    }
+
+    .qscale-metrics__value {
+        font-family: var(--font-mono);
+        font-size: 0.875rem;
+        font-weight: 700;
+    }
+
+    .qscale-controls {
+        display: grid;
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 2) 0;
+        padding: calc(var(--grid-unit) * 2);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+    }
+
+    .qscale-slider {
+        display: grid;
+        gap: calc(var(--grid-unit) * 1);
+    }
+
+    .qscale-slider__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    #qs-range {
+        width: 100%;
+    }
+
+    .qscale-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--grid-unit) * 1);
+    }
+
+    .qscale-chip {
+        appearance: none;
+        border: 1px solid var(--color-border-strong);
+        background: var(--color-bg);
+        color: var(--color-text);
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        padding: 0.35em 0.6em;
+        cursor: pointer;
+        transition:
+            background var(--transition-fast),
+            color var(--transition-fast);
+    }
+
+    .qscale-chip:hover,
+    .qscale-chip.active {
+        background: var(--color-text);
+        color: var(--color-bg);
+    }
+
+    .qscale-demo {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: calc(var(--grid-unit) * 3);
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .qscale-demo__panel {
+        border: 1px solid var(--color-border);
+        background: var(--color-bg);
+        padding: calc(var(--grid-unit) * 2);
+    }
+
+    .qscale-demo__title {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: calc(var(--grid-unit) * 1.5);
+    }
+
+    .qscale-demo__row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: calc(var(--grid-unit) * 2);
+        align-items: center;
+    }
+
+    .qscale-box {
+        background:
+            linear-gradient(90deg, rgba(255, 0, 0, 0.12) 1px, transparent 1px),
+            linear-gradient(rgba(255, 0, 0, 0.12) 1px, transparent 1px);
+        background-size: q(8) q(8);
+        border: 1px solid var(--color-border-strong);
+        box-sizing: border-box;
+        min-width: q(8);
+        min-height: q(8);
+    }
+
+    .qscale-demo__meta {
+        display: grid;
+        gap: calc(var(--grid-unit) * 0.75);
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+    }
+
+    .qscale-demo__line {
+        display: flex;
+        justify-content: space-between;
+        gap: calc(var(--grid-unit) * 2);
+        border-bottom: 1px solid var(--color-border);
+        padding-bottom: calc(var(--grid-unit) * 0.5);
+    }
+
+    .qscale-demo__line .k {
+        color: var(--color-text-muted);
+    }
+
+    .qscale-demo__line .v {
+        font-weight: 700;
+        color: var(--color-text);
+    }
+
+    .qscale-muted {
+        color: var(--color-text-muted);
+        margin-top: calc(var(--grid-unit) * 1);
+    }
+
+    .qscale-util-grid {
+        display: grid;
+        gap: calc(var(--grid-unit) * 1);
+        margin-top: calc(var(--grid-unit) * 2);
+    }
+
+    .qscale-util {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: calc(var(--grid-unit) * 2);
+        padding: calc(var(--grid-unit) * 1.25) calc(var(--grid-unit) * 1.5);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-subtle);
+    }
+
+    .qscale-util .c {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        font-weight: 700;
+    }
+
+    .qscale-util .d {
+        font-size: 0.75rem;
+        color: var(--color-text-muted);
+    }
+
+    .qscale-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: calc(var(--grid-unit) * 2) 0;
+    }
+
+    .qscale-table th,
+    .qscale-table td {
+        text-align: left;
+        padding: calc(var(--grid-unit) * 1.5);
+        border-bottom: 1px solid var(--color-border);
+        vertical-align: top;
+    }
+
+    .qscale-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .qscale-table code {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        background: var(--color-bg-muted);
+        padding: 0.2em 0.4em;
+        white-space: nowrap;
+    }
+
+    .qscale-usage {
+        color: var(--color-text-muted);
+    }
+
+    // Use Cases Grid
+    .qscale-use-cases {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: q(24);
+        margin: q(32) 0;
+    }
+
+    .use-case {
+        background: var(--color-bg-subtle);
+        border: q(1) solid var(--color-border);
+        padding: q(24);
+
+        h3 {
+            font-size: q(16);
+            font-weight: 600;
+            margin-bottom: q(16);
+            color: var(--color-text);
+        }
+
+        ul {
+            margin: 0;
+            padding-left: q(20);
+        }
+
+        li {
+            font-size: q(14);
+            line-height: q(24);
+            color: var(--color-text-muted);
+        }
+
+        &:first-child h3 {
+            color: var(--color-success, #16a34a);
+        }
+
+        &:last-child h3 {
+            color: var(--color-error, #dc2626);
+        }
+    }
+
+    @media (max-width: 640px) {
+        .qscale-demo__row {
+            grid-template-columns: 1fr;
+        }
+
+        .qscale-use-cases {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Breakpoints Demo Page
+   ───────────────────────────────────────────────────────────────── */
+
+.page--breakpoints {
+    .bp-status {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: calc(var(--grid-unit) * 2);
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .bp-status__item {
+        border: 1px solid var(--color-border);
+        padding: calc(var(--grid-unit) * 2);
+        background: var(--color-bg);
+    }
+
+    .bp-status__label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: q(6);
+    }
+
+    .bp-status__value {
+        font-family: var(--font-mono);
+        font-size: 1.125rem;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+    }
+
+    .bp-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: calc(var(--grid-unit) * 3) 0;
+    }
+
+    .bp-table th,
+    .bp-table td {
+        text-align: left;
+        padding: calc(var(--grid-unit) * 1.5);
+        border-bottom: 1px solid var(--color-border);
+        vertical-align: top;
+    }
+
+    .bp-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    .bp-row.active {
+        background: var(--color-bg-muted);
+        outline: 2px solid var(--color-border-strong);
+        outline-offset: -2px;
+    }
+
+    .bp-mult {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        color: var(--color-text-muted);
+    }
+
+    .bp-demo-card {
+        border: 1px solid var(--color-border-strong);
+        background: var(--color-bg);
+        margin-top: calc(var(--grid-unit) * 2);
+    }
+
+    .bp-demo-card__title {
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        margin-bottom: q(6);
+    }
+
+    .bp-demo-card__meta {
+        color: var(--color-text-muted);
+        font-size: 0.875rem;
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Layers Documentation Page
+   ───────────────────────────────────────────────────────────────── */
+
+.layer-stack {
+    display: flex;
+    flex-direction: column;
+    gap: q(2);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.layer-stack__item {
+    display: grid;
+    grid-template-columns: 120px 120px 1fr;
+    gap: calc(var(--grid-unit) * 2);
+    align-items: center;
+    padding: calc(var(--grid-unit) * 2);
+    background: var(--color-bg-muted);
+    border-left: 4px solid var(--color-border-strong);
+}
+
+.layer-stack__item--guides {
+    border-left-color: #7209b7;
+    background: linear-gradient(90deg, rgba(114, 9, 183, 0.1), transparent);
+}
+.layer-stack__item--modal {
+    border-left-color: #d00000;
+    background: linear-gradient(90deg, rgba(208, 0, 0, 0.1), transparent);
+}
+.layer-stack__item--interface {
+    border-left-color: #2d6a4f;
+    background: linear-gradient(90deg, rgba(45, 106, 79, 0.1), transparent);
+}
+.layer-stack__item--content {
+    border-left-color: #0077b6;
+    background: linear-gradient(90deg, rgba(0, 119, 182, 0.1), transparent);
+}
+.layer-stack__item--canvas {
+    border-left-color: #1a1a2e;
+    background: linear-gradient(90deg, rgba(26, 26, 46, 0.15), transparent);
+}
+
+.layer-stack__name {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 0.9375rem;
+}
+
+.layer-stack__value {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--color-text-muted);
+}
+
+.layer-stack__desc {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+}
+
+@media (max-width: 640px) {
+    .layer-stack__item {
+        grid-template-columns: 1fr;
+        gap: calc(var(--grid-unit) * 0.5);
+    }
+
+    .layer-stack__desc {
+        margin-top: calc(var(--grid-unit) * 0.5);
+    }
+}
+
+.best-practices {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.best-practice {
+    border: 1px solid var(--color-border);
+    padding: calc(var(--grid-unit) * 2.5);
+}
+
+.best-practice h4 {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 calc(var(--grid-unit) * 1);
+}
+
+.best-practice p {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.5;
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Background Story Page
+   ───────────────────────────────────────────────────────────────── */
+
+.highlight-box {
+    background: var(--color-bg-muted);
+    padding: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 3) 0;
+    border-left: 4px solid var(--color-border-strong);
+}
+
+.highlight-box h4 {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 calc(var(--grid-unit) * 1);
+}
+.highlight-box p {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+}
+
+.principles-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.principle {
+    border-top: 2px solid var(--color-border-strong);
+    padding-top: calc(var(--grid-unit) * 2);
+}
+
+.principle h4 {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 calc(var(--grid-unit) * 1);
+}
+
+.principle p {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.philosophy {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.philosophy__item {
+    border-left: 3px solid var(--color-border);
+    padding-left: calc(var(--grid-unit) * 3);
+}
+
+.philosophy__item h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 calc(var(--grid-unit) * 1);
+}
+
+.philosophy__item p {
+    font-size: 0.9375rem;
+    color: var(--color-text-muted);
+    margin: 0;
+    line-height: 1.6;
+}
+
+.quote {
+    margin: calc(var(--grid-unit) * 4) 0;
+    padding: calc(var(--grid-unit) * 3);
+    background: var(--color-bg-muted);
+    border-left: 4px solid var(--color-accent);
+}
+
+.quote blockquote {
+    font-size: 1.125rem;
+    font-style: italic;
+    line-height: 1.6;
+    margin: 0 0 calc(var(--grid-unit) * 2);
+    color: var(--color-text);
+}
+
+.quote cite {
+    font-size: 0.875rem;
+    font-style: normal;
+    color: var(--color-text-muted);
+}
+
+.cta-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--grid-unit) * 2);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 3);
+    background: var(--color-text);
+    color: var(--color-bg);
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background var(--transition-fast);
+}
+
+.button:hover {
+    background: var(--color-text-muted);
+}
+
+.button--secondary {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border-strong);
+}
+
+.button--secondary:hover {
+    background: var(--color-bg-muted);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Pixel Density Page
+   ───────────────────────────────────────────────────────────────── */
+
+.density-current {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: calc(var(--grid-unit) * 2);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.density-current__item {
+    background: var(--color-bg-muted);
+    padding: calc(var(--grid-unit) * 2.5);
+    text-align: center;
+}
+
+.density-current__label {
+    display: block;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: calc(var(--grid-unit) * 1);
+}
+
+.density-current__value {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+.density-visual {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 4) 0;
+}
+
+@media (max-width: 640px) {
+    .density-visual {
+        grid-template-columns: 1fr;
+    }
+}
+
+.density-visual__box {
+    text-align: center;
+}
+
+.density-visual__grid {
+    width: q(80);
+    height: q(80);
+    margin: 0 auto calc(var(--grid-unit) * 2);
+    border: 2px solid var(--color-border-strong);
+    position: relative;
+    background: var(--color-bg);
+}
+
+.density-visual__grid::before,
+.density-visual__grid::after {
+    content: "";
+    position: absolute;
+    background: var(--color-border);
+}
+
+.density-visual__grid--1x::before {
+    width: 100%;
+    height: 1px;
+    top: 50%;
+    left: 0;
+}
+
+.density-visual__grid--1x::after {
+    width: 1px;
+    height: 100%;
+    left: 50%;
+    top: 0;
+}
+
+.density-visual__grid--2x {
+    background:
+        linear-gradient(var(--color-border) 1px, transparent 1px),
+        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
+    background-size: 50% 50%;
+}
+
+.density-visual__grid--3x {
+    background:
+        linear-gradient(var(--color-border) 1px, transparent 1px),
+        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
+    background-size: 33.333% 33.333%;
+}
+
+.density-visual__label {
+    display: block;
+    font-weight: 600;
+    font-size: 0.9375rem;
+    margin-bottom: calc(var(--grid-unit) * 0.5);
+}
+
+.density-visual__desc {
+    display: block;
+    font-size: 0.8125rem;
+    color: var(--color-text-muted);
+}
+
+.density-baseline {
+    font-size: 0.6875rem;
+    color: var(--color-text-muted);
+    font-weight: normal;
+}
+
+.density-row--highlight {
+    background: var(--color-bg-muted);
+}
+
+.density-calculator {
+    background: var(--color-bg-muted);
+    padding: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.density-calc__input {
+    margin-bottom: calc(var(--grid-unit) * 3);
+}
+
+.density-calc__input label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: calc(var(--grid-unit) * 1);
+}
+
+.density-calc__input input {
+    width: 100%;
+    max-width: 200px;
+    padding: calc(var(--grid-unit) * 1.5);
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    border: 2px solid var(--color-border-strong);
+    background: var(--color-bg);
+    color: var(--color-text);
+    transition: border-color var(--transition-fast);
+}
+
+.density-calc__input input:focus {
+    outline: none;
+    border-color: var(--color-accent);
+}
+
+.density-calc__results {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: calc(var(--grid-unit) * 2);
+}
+
+.density-calc__result {
+    background: var(--color-bg);
+    padding: calc(var(--grid-unit) * 2);
+    border-left: 3px solid var(--color-border);
+}
+
+.density-calc__label {
+    display: block;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: calc(var(--grid-unit) * 0.5);
+}
+
+.density-calc__value {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+// ============================================================================
+// Hybrid Scale Demo
+// ============================================================================
+
+.scale-comparison {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    border: 1px solid var(--color-border);
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    overflow: hidden;
+}
+
+.scale-row {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border-bottom: 1px solid var(--color-border);
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &.scale-header {
+        background: var(--color-bg-alt);
+        font-weight: 600;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    &.scale-lcm {
+        background: var(--color-bg-alt);
+        font-weight: 600;
+    }
+}
+
+.scale-cell {
+    padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2);
+    text-align: center;
+    border-right: 1px solid var(--color-border);
+
+    &:last-child {
+        border-right: none;
+    }
+
+    &.highlight-type {
+        background: rgba(59, 130, 246, 0.1);
+        color: var(--color-accent);
+        font-weight: 500;
+    }
+
+    &.highlight-line {
+        background: rgba(16, 185, 129, 0.1);
+        color: #10b981;
+        font-weight: 500;
+    }
+}
+
+[data-theme="dark"] {
+    .scale-cell.highlight-type {
+        background: rgba(59, 130, 246, 0.15);
+    }
+
+    .scale-cell.highlight-line {
+        background: rgba(16, 185, 129, 0.15);
+    }
+}
+
+// Grid Demo
+.grid-demo {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 4);
+}
+
+.grid-container {
+    position: relative;
+
+    &.combined {
+        margin-top: calc(var(--grid-unit) * 2);
+    }
+}
+
+.grid-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: calc(var(--grid-unit) * 1);
+}
+
+.grid-type,
+.grid-line-scale,
+.grid-combined {
+    position: relative;
+    height: 60px;
+    background: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+}
+
+.grid-type .grid-line,
+.grid-line-scale .grid-line,
+.grid-combined .grid-line {
+    position: absolute;
+    left: var(--offset);
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: var(--color-border-strong);
+
+    &.lcm {
+        background: var(--color-accent);
+        width: 2px;
+    }
+}
+
+.grid-type .grid-line {
+    background: rgba(59, 130, 246, 0.4);
+
+    &.lcm {
+        background: var(--color-accent);
+    }
+}
+
+.grid-line-scale .grid-line {
+    background: rgba(16, 185, 129, 0.4);
+
+    &.lcm {
+        background: #10b981;
+    }
+}
+
+.grid-combined .grid-line {
+    &.type {
+        background: rgba(59, 130, 246, 0.4);
+        height: 50%;
+        top: 0;
+    }
+
+    &.line {
+        background: rgba(16, 185, 129, 0.4);
+        height: 50%;
+        top: 50%;
+    }
+
+    &.lcm {
+        background: var(--color-accent);
+        height: 100%;
+        top: 0;
+        width: 2px;
+    }
+
+    span {
+        position: absolute;
+        bottom: -18px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0.625rem;
+        font-family: var(--font-mono);
+        color: var(--color-text-muted);
+        white-space: nowrap;
+    }
+}
+
+// Info and Insight Boxes
+.info-box,
+.insight-box {
+    background: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+    padding: calc(var(--grid-unit) * 3);
+    margin-top: calc(var(--grid-unit) * 3);
+
+    h4 {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin-bottom: calc(var(--grid-unit) * 1.5);
+        color: var(--color-text);
+    }
+
+    p {
+        font-size: 0.875rem;
+        margin-bottom: calc(var(--grid-unit) * 1);
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    code {
+        background: var(--color-bg);
+        padding: 0.15em 0.4em;
+        font-family: var(--font-mono);
+        font-size: 0.875em;
+    }
+}
+
+.insight-box {
+    border-left: 3px solid var(--color-accent);
+
+    h3 {
+        font-size: 1.125rem;
+        margin-bottom: calc(var(--grid-unit) * 2);
+    }
+
+    ul {
+        padding-left: calc(var(--grid-unit) * 3);
+        margin-bottom: calc(var(--grid-unit) * 2);
+    }
+
+    li {
+        margin-bottom: calc(var(--grid-unit) * 1);
+        font-size: 0.875rem;
+    }
+}
+
+// Highlight row for tables
+.highlight-row {
+    background: var(--color-bg-alt);
+    font-weight: 600;
+}
+
+// Typography Demo
+.type-demo {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--grid-unit) * 3);
+    margin-top: calc(var(--grid-unit) * 3);
+}
+
+.type-sample {
+    background: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+    padding: calc(var(--grid-unit) * 3);
+    position: relative;
+
+    p {
+        margin: 0;
+    }
+}
+
+.type-label {
+    position: absolute;
+    top: calc(var(--grid-unit) * 1);
+    right: calc(var(--grid-unit) * 1.5);
+    font-size: 0.625rem;
+    font-family: var(--font-mono);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.body-sample p {
+    font-size: 16px;
+    line-height: 25px;
+}
+
+.small-sample p {
+    font-size: 12px;
+    line-height: 20px;
+}
+
+.heading-sample p {
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 600;
+}
+
+.display-sample p {
+    font-size: 40px;
+    line-height: 40px;
+    font-weight: 700;
+}
+
+// ============================================================================
+// Scale Explorer (Hybrid Scale Demo)
+// ============================================================================
+
+.scale-explorer {
+    background: var(--color-bg-subtle);
+    border: q(1) solid var(--color-border);
+    padding: q(30);
+    margin: q(30) 0;
+}
+
+.explorer-controls {
+    display: flex;
+    flex-direction: column;
+    gap: q(20);
+    margin-bottom: q(30);
+}
+
+.explorer-slider {
+    display: flex;
+    align-items: center;
+    gap: q(20);
+
+    label {
+        font-weight: 500;
+        min-width: q(100);
+    }
+
+    input[type="range"] {
+        flex: 1;
+        height: q(8);
+        -webkit-appearance: none;
+        background: var(--color-border);
+
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: q(20);
+            height: q(20);
+            background: var(--color-accent);
+            cursor: pointer;
+        }
+    }
+}
+
+.slider-value {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: q(20);
+    line-height: q(25);
+    min-width: q(40);
+    text-align: center;
+}
+
+.explorer-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: q(10);
+}
+
+.chip-label {
+    font-size: q(14);
+    line-height: q(20);
+    color: var(--color-text-muted);
+}
+
+.chip {
+    padding: q(5) q(15);
+    border: q(1) solid var(--color-border);
+    background: transparent;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: q(14);
+    line-height: q(20);
+    transition: all 0.15s ease;
+
+    &:hover {
+        border-color: var(--color-accent);
+    }
+
+    &.active {
+        background: var(--color-accent);
+        border-color: var(--color-accent);
+        color: white;
+    }
+}
+
+.explorer-display {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: q(30);
+    align-items: start;
+}
+
+.explorer-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: q(20);
+}
+
+.metric-card {
+    background: var(--color-bg);
+    border: q(1) solid var(--color-border);
+    padding: q(20);
+    text-align: center;
+
+    h4 {
+        font-size: q(12);
+        line-height: q(15);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin: 0 0 q(10);
+    }
+}
+
+.metric-main {
+    font-family: var(--font-mono);
+    font-size: q(28);
+    line-height: q(35);
+    font-weight: 700;
+    margin-bottom: q(10);
+}
+
+.type-card .metric-main {
+    color: #2563eb;
+}
+
+.line-card .metric-main {
+    color: #d946ef;
+}
+
+.lcm-card .metric-main {
+    color: #16a34a;
+}
+
+.metric-details {
+    display: flex;
+    justify-content: center;
+    gap: q(15);
+    font-size: q(12);
+    line-height: q(15);
+    font-family: var(--font-mono);
+    color: var(--color-text-muted);
+
+    .aligned {
+        color: #16a34a;
+        font-weight: 500;
+    }
+}
+
+.explorer-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preview-box {
+    width: q(120);
+    height: q(120);
+    background: linear-gradient(
+        135deg,
+        rgba(37, 99, 235, 0.2),
+        rgba(217, 70, 239, 0.2)
+    );
+    border: q(2) solid var(--color-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.preview-label {
+    position: absolute;
+    bottom: q(-30);
+    font-size: q(12);
+    line-height: q(15);
+    color: var(--color-text-muted);
+}
+
+// Grid Comparison
+.grid-comparison-large {
+    background: var(--color-bg-subtle);
+    border: q(1) solid var(--color-border);
+    padding: q(30);
+    margin: q(30) 0;
+}
+
+.grid-row {
+    display: grid;
+    grid-template-columns: q(140) 1fr;
+    gap: q(20);
+    margin-bottom: q(20);
+    align-items: center;
+
+    &.combined {
+        margin-top: q(30);
+        padding-top: q(30);
+        border-top: q(2) dashed var(--color-border);
+    }
+}
+
+.grid-label {
+    display: flex;
+    flex-direction: column;
+    gap: q(5);
+}
+
+.label-title {
+    font-weight: 600;
+    font-size: q(14);
+    line-height: q(20);
+}
+
+.label-value {
+    font-family: var(--font-mono);
+    font-size: q(12);
+    line-height: q(15);
+    color: var(--color-text-muted);
+}
+
+.grid-canvas {
+    height: q(80);
+    background: var(--color-bg);
+    border: q(1) solid var(--color-border);
+    position: relative;
+    overflow: hidden;
+}
+
+.grid-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: q(1);
+
+    &.type {
+        background: rgba(37, 99, 235, 0.6);
+    }
+
+    &.line-scale {
+        background: rgba(217, 70, 239, 0.6);
+    }
+
+    &.lcm {
+        background: rgba(22, 163, 74, 0.9);
+        width: q(2);
+    }
+}
+
+.grid-legend {
+    display: flex;
+    justify-content: center;
+    gap: q(40);
+    margin-top: q(20);
+    padding-top: q(20);
+    border-top: q(1) solid var(--color-border);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: q(10);
+    font-size: q(14);
+    line-height: q(20);
+
+    &.type .legend-color {
+        background: #2563eb;
+    }
+
+    &.line .legend-color {
+        background: #d946ef;
+    }
+
+    &.lcm .legend-color {
+        background: #16a34a;
+    }
+}
+
+.legend-color {
+    width: q(20);
+    height: q(4);
+}
+
+// Math Foundation
+.math-foundation {
+    display: grid;
+    gap: q(30);
+    margin: q(30) 0;
+}
+
+.foundation-card {
+    background: var(--color-bg-subtle);
+    border: q(1) solid var(--color-border);
+    padding: q(30);
+
+    h3 {
+        margin: 0 0 q(20);
+        font-size: q(20);
+        line-height: q(25);
+    }
+}
+
+.math-formula {
+    background: var(--color-bg);
+    padding: q(20);
+    margin-bottom: q(20);
+    text-align: center;
+
+    code {
+        font-size: q(20);
+        line-height: q(25);
+        font-weight: 600;
+    }
+}
+
+.math-example {
+    display: flex;
+    flex-direction: column;
+    gap: q(5);
+    font-family: var(--font-mono);
+    font-size: q(14);
+    line-height: q(20);
+    color: var(--color-text-muted);
+
+    strong {
+        color: #16a34a;
+    }
+}
+
+// HCN Grid
+.hcn-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(q(180), 1fr));
+    gap: q(20);
+    margin-top: q(20);
+}
+
+.hcn-item {
+    background: var(--color-bg);
+    border: q(1) solid var(--color-border);
+    padding: q(20);
+    text-align: center;
+
+    &.highlight {
+        border-color: #16a34a;
+        background: rgba(22, 163, 74, 0.05);
+    }
+}
+
+.hcn-number {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: q(24);
+    line-height: q(30);
+    font-weight: 700;
+    color: var(--color-accent);
+    margin-bottom: q(10);
+}
+
+.hcn-divisors {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: q(12);
+    line-height: q(15);
+    color: var(--color-text-muted);
+    margin-bottom: q(5);
+    word-break: break-all;
+}
+
+.hcn-count {
+    display: block;
+    font-size: q(12);
+    line-height: q(15);
+    color: var(--color-text-muted);
+    font-weight: 500;
+}
+
+.hcn-badge {
+    display: inline-block;
+    background: rgba(22, 163, 74, 0.1);
+    color: #16a34a;
+    padding: q(5) q(10);
+    font-family: var(--font-mono);
+    font-size: q(12);
+    line-height: q(15);
+    font-weight: 500;
+}
+
+// Scale Table
+.scale-table {
+    .lcm-row {
+        background: rgba(22, 163, 74, 0.05);
+    }
+
+    .aligned {
+        color: #16a34a;
+        font-weight: 600;
+    }
+
+    .not-aligned {
+        color: var(--color-text-muted);
+    }
+}
+
+// Function Grid
+.function-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(q(280), 1fr));
+    gap: q(20);
+    margin: q(30) 0;
+}
+
+.function-card {
+    background: var(--color-bg-subtle);
+    border: q(1) solid var(--color-border);
+    padding: q(25);
+
+    h4 {
+        margin: 0 0 q(10);
+        font-family: var(--font-mono);
+    }
+
+    p {
+        margin: 0 0 q(20);
+        font-size: q(14);
+        line-height: q(20);
+        color: var(--color-text-muted);
+    }
+
+    pre {
+        margin: 0;
+        padding: q(15);
+        background: var(--color-bg);
+        font-size: q(12);
+        line-height: q(20);
+        overflow-x: auto;
+    }
+}
+
+// Typography Demo (hybrid scale)
+.typography-demo {
+    margin: q(30) 0;
+}
+
+.type-specimen {
+    border-bottom: q(1) solid var(--color-border);
+    padding: q(20) 0;
+    position: relative;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    p {
+        font-size: var(--type-size);
+        line-height: var(--line-height);
+        margin: 0;
+    }
+}
+
+.specimen-label {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: q(12);
+    line-height: q(15);
+    color: var(--color-text-muted);
+    margin-bottom: q(10);
+}
+
+// Benefits Grid
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(q(220), 1fr));
+    gap: q(20);
+    margin: q(30) 0;
+}
+
+.benefit-card {
+    background: var(--color-bg-subtle);
+    border: q(1) solid var(--color-border);
+    padding: q(25);
+    text-align: center;
+
+    h4 {
+        margin: 0 0 q(10);
+        font-size: q(16);
+        line-height: q(20);
+    }
+
+    p {
+        margin: 0;
+        font-size: q(14);
+        line-height: q(20);
+        color: var(--color-text-muted);
+    }
+}
+
+.benefit-icon {
+    font-size: q(32);
+    line-height: q(40);
+    margin-bottom: q(15);
+}
+
+// Responsive for Scale Explorer
+@media (max-width: 768px) {
+    .explorer-display {
+        grid-template-columns: 1fr;
+    }
+
+    .explorer-metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .explorer-preview {
+        order: -1;
+    }
+
+    .grid-row {
+        grid-template-columns: 1fr;
+    }
+
+    .grid-label {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+// ============================================================================
+// Ratio Demo Styles
+// ============================================================================
+
+.ratio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 4) 0;
+}
+
+.ratio-card {
+    border: 1px solid var(--color-border);
+
+    &__preview {
+        background: var(--color-text);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__inner {
+        color: var(--color-bg);
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        opacity: 0.6;
+    }
+
+    &__info {
+        padding: calc(var(--grid-unit) * 1.5);
+        background: var(--color-bg);
+    }
+
+    &__name {
+        font-weight: 600;
+        font-size: 0.875rem;
+        margin: 0 0 calc(var(--grid-unit) * 0.5);
+    }
+
+    &__value {
+        font-family: var(--font-mono);
+        font-size: 0.6875rem;
+        color: var(--color-text-muted);
+        margin: 0;
+    }
+}
+
+.ratio-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: calc(var(--grid-unit) * 3) 0;
+
+    th,
+    td {
+        text-align: left;
+        padding: calc(var(--grid-unit) * 1.5);
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+    }
+
+    td {
+        font-size: 0.875rem;
+
+        &:first-child {
+            font-weight: 500;
+        }
+    }
+
+    code {
+        font-family: var(--font-mono);
+        font-size: 0.75rem;
+        background: var(--color-bg-muted);
+        padding: 0.2em 0.4em;
+    }
+}
+
+.use-case-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: calc(var(--grid-unit) * 2);
+    margin: calc(var(--grid-unit) * 3) 0;
+
+    @media (max-width: 640px) {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.use-case {
+    text-align: center;
+
+    &__box {
+        background: var(--color-bg-muted);
+        border: 1px solid var(--color-border);
+        margin-bottom: calc(var(--grid-unit) * 1);
+    }
+
+    &__label {
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    &__ratio {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        color: var(--color-text-muted);
+    }
+}
+
+// ============================================================================
+// Lorem / Typography Demo Styles
+// ============================================================================
+
+.prose {
+    max-width: 65ch;
+
+    p {
+        font-size: 1rem;
+        line-height: 1.75;
+        margin-bottom: 1.5em;
+        color: var(--color-text-muted);
+
+        &:first-of-type {
+            font-size: 1.125rem;
+            color: var(--color-text);
+
+            &::first-letter {
+                font-size: 3.5rem;
+                font-weight: 600;
+                float: left;
+                line-height: 1;
+                margin-right: 0.5rem;
+                margin-top: 0.1em;
+            }
+        }
+    }
+}
+
+.text-sample {
+    border-left: 4px solid var(--color-text);
+    padding-left: calc(var(--grid-unit) * 3);
+    margin: calc(var(--grid-unit) * 4) 0;
+
+    &--quote {
+        border-left-color: var(--color-accent);
+    }
+
+    blockquote {
+        font-size: 1.25rem;
+        font-style: italic;
+        margin: 0 0 calc(var(--grid-unit) * 1);
+        color: var(--color-text);
+    }
+
+    cite {
+        font-size: 0.875rem;
+        font-style: normal;
+        color: var(--color-text-muted);
+    }
+}
+
+.type-comparison {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--grid-unit) * 4);
+    margin: calc(var(--grid-unit) * 4) 0;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.type-column {
+    h4 {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-text-muted);
+        margin-bottom: calc(var(--grid-unit) * 2);
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
+// ============================================================================
+// Scale Demo Styles
+// ============================================================================
+
+.type-line {
+    display: flex;
+    align-items: baseline;
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+
+    &__label {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        color: var(--color-text-muted);
+        min-width: 100px;
+        flex-shrink: 0;
+    }
+
+    &__size {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        color: var(--color-text-subtle);
+        min-width: 60px;
+        flex-shrink: 0;
+    }
+
+    &__text {
+        color: var(--color-text);
+        font-weight: 400;
+    }
+}
+
+.rhythm-row {
+    display: flex;
+    align-items: flex-end;
+    gap: calc(var(--grid-unit) * 1);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.rhythm-block {
+    background: var(--color-text);
+    width: 48px;
+
+    &__label {
+        font-family: var(--font-mono);
+        font-size: 0.5625rem;
+        color: var(--color-text-muted);
+        text-align: center;
+        margin-top: calc(var(--grid-unit) * 0.5);
+    }
+}
+
+.width-specimen {
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.width-line {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 2);
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.width-bar {
+    height: 6px;
+    background: var(--color-text);
+}
+
+.width-label {
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    color: var(--color-text-muted);
+    min-width: 100px;
+    flex-shrink: 0;
+}
+
+.modular-scale {
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.modular-item {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 2);
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+
+    &__ratio {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        color: var(--color-accent);
+        min-width: 120px;
+        flex-shrink: 0;
+    }
+
+    &__bar {
+        height: 16px;
+        background: var(--color-text);
+    }
+}
+
+.grid-unit-demo {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 1px;
+    background: var(--color-border);
+    border: 1px solid var(--color-border);
+    margin: calc(var(--grid-unit) * 3) 0;
+    max-width: 320px;
+
+    &__cell {
+        aspect-ratio: 1;
+        background: var(--color-bg-muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-mono);
+        font-size: 0.5rem;
+        color: var(--color-text-muted);
+
+        &--filled {
+            background: var(--color-text);
+            color: var(--color-bg);
+        }
+    }
+}
+
+// ============================================================================
+// Utility Demo Styles
+// ============================================================================
+
+.utility-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: calc(var(--grid-unit) * 2);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.utility-box {
+    background: var(--color-text);
+    color: var(--color-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    font-weight: 500;
+    min-height: 48px;
+    text-align: center;
+}
+
+.padding-demo {
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+}
+
+.padding-inner {
+    background: var(--color-text);
+    color: var(--color-bg);
+    font-family: var(--font-mono);
+    font-size: 0.5625rem;
+    text-align: center;
+    padding: calc(var(--grid-unit) * 1);
+}
+
+.margin-demo {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border);
+    display: inline-block;
+}
+
+.margin-inner {
+    background: var(--color-text);
+    color: var(--color-bg);
+    font-family: var(--font-mono);
+    font-size: 0.5625rem;
+    text-align: center;
+    width: 48px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gap-demo {
+    display: flex;
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+    padding: calc(var(--grid-unit) * 1);
+}
+
+.gap-item {
+    width: 24px;
+    height: 24px;
+    background: var(--color-text);
+}
+
+.size-box {
+    background: var(--color-text);
+}
+
+.border-demo {
+    width: 48px;
+    height: 32px;
+    border-style: solid;
+    border-color: var(--color-text);
+    background: var(--color-bg-muted);
+}
+
+.radius-demo {
+    width: 48px;
+    height: 48px;
+    background: var(--color-text);
+}
+
+.inset-demo {
+    position: relative;
+    width: 80px;
+    height: 60px;
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+}
+
+.inset-item {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: var(--color-accent);
+}
+
+.responsive-demo {
+    background: var(--color-text);
+    color: var(--color-bg);
+    text-align: center;
+    font-weight: 500;
+    transition: all 0.3s ease;
+
+    p {
+        margin: 0;
+        max-width: none;
+    }
+}
+
+.scale-bar {
+    height: 6px;
+    background: var(--color-text);
+}
+
+.scale-reference {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--grid-unit) * 2);
+    padding: calc(var(--grid-unit) * 1.5) 0;
+    border-bottom: 1px solid var(--color-border);
+
+    &__label {
+        font-family: var(--font-mono);
+        font-size: 0.6875rem;
+        color: var(--color-text-muted);
+        min-width: 100px;
+    }
+}
+
+.card-demo {
+    border: 1px solid var(--color-text);
+    background: var(--color-bg);
+    max-width: 320px;
+
+    h4 {
+        font-size: 1rem;
+        margin: 0 0 calc(var(--grid-unit) * 1);
+    }
+
+    p {
+        font-size: 0.875rem;
+        color: var(--color-text-muted);
+        margin: 0 0 calc(var(--grid-unit) * 2);
+    }
+}
+
+.btn-demo {
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: none;
+    cursor: pointer;
+
+    &--primary {
+        background: var(--color-text);
+        color: var(--color-bg);
+    }
+
+    &--secondary {
+        background: var(--color-bg);
+        color: var(--color-text);
+        border: 1px solid var(--color-text);
+    }
+}
+
+.breakpoint-tag {
+    display: inline-block;
+    font-family: var(--font-mono);
+    font-size: 0.5625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    padding: 0.25em 0.5em;
+    margin-right: calc(var(--grid-unit) * 0.5);
+    border: 1px solid var(--color-border);
+}
+
+// ============================================================================
+// Baseline Grid Demo Styles
+// ============================================================================
+
+.baseline-demo {
+    position: relative;
+    border: 1px solid var(--color-border);
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.baseline-content {
+    position: relative;
+    z-index: 1;
+    padding: calc(var(--grid-unit) * 3);
+
+    h3 {
+        margin-top: 0;
+    }
+
+    p {
+        max-width: 45ch;
+    }
+}
+
+.toggle-btn {
+    position: fixed;
+    bottom: calc(var(--grid-unit) * 3);
+    right: calc(var(--grid-unit) * 3);
+    z-index: 10000;
+    font-family: var(--font-sans);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);
+    background: var(--color-text);
+    color: var(--color-bg);
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.rhythm-example {
+    margin: calc(var(--grid-unit) * 3) 0;
+}
+
+.rhythm-spec {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--grid-unit) * 4);
+    margin-top: calc(var(--grid-unit) * 1);
+
+    &__item {
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        color: var(--color-text-muted);
+    }
+}