/* KeyPath Documentation */

:root {
    /* Color palette */
    --color-primary: #007AFF;
    --color-primary-dark: #0051D5;
    --color-primary-light: #5AC8FA;
    
    --color-background: #FFFFFF;
    --color-background-secondary: #F5F5F7;
    --color-background-tertiary: #FAFAFA;
    
    --color-text: #1D1D1F;
    --color-text-secondary: #86868B;
    --color-text-tertiary: #6E6E73;
    
    --color-border: #D2D2D7;
    --color-border-light: #E5E5EA;
    
    --color-success: #34C759;
    --color-warning: #FF9500;
    --color-error: #FF3B30;
    
    /* Typography */
    --font-display: 'Source Serif 4', ui-serif, 'Iowan Old Style', 'Palatino', 'Times New Roman', serif;
    --font-text: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Spacing */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* Layout */
    /* Slightly narrower overall measure for more "article" feel */
    --max-width: 1120px;
    --sidebar-width: 240px;
    --header-height: 64px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #000000;
        --color-background-secondary: #1C1C1E;
        --color-background-tertiary: #2C2C2E;
        
        --color-text: #F5F5F7;
        --color-text-secondary: #98989D;
        --color-text-tertiary: #6E6E73;
        
        --color-border: #38383A;
        --color-border-light: #2C2C2E;
    }
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-text);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); margin-top: var(--spacing-2xl); }
h3 { font-size: var(--font-size-2xl); margin-top: var(--spacing-xl); }
h4 { font-size: var(--font-size-xl); margin-top: var(--spacing-lg); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--color-border-light);
    height: var(--header-height);
}

@media (prefers-color-scheme: dark) {
    .site-header {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.logo svg {
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    gap: var(--spacing-xl);
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.github-link {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.github-link:hover {
    color: var(--color-text);
}

/* Hero Section */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-lg);
    min-height: 600px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    margin-bottom: 0;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-container {
    width: 100%;
    max-width: 500px;
}

.hero-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

/* Main Content */
.main-content {
    min-height: calc(100vh - var(--header-height));
}

.content-wrapper {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-2xl);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-lg);
}


/* Sidebar toggle + off-canvas drawer */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background) 85%, transparent);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-toggle:hover {
    background: color-mix(in srgb, var(--color-background) 94%, transparent);
    border-color: var(--color-border);
    transform: translateY(-1px);
}

.sidebar-toggle:active {
    transform: translateY(0);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

/* Article-first layout: sidebar becomes a drawer */
.content-wrapper {
    display: block;
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: min(320px, calc(100vw - 56px));
    padding: var(--spacing-lg);
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
    border-right: 1px solid var(--color-border-light);
    overflow-y: auto;
    transform: translateX(-110%);
    transition: transform var(--transition-base);
    z-index: 200;
}

body.sidebar-open .sidebar {
    transform: translateX(0);
}


.sidebar-nav {
    padding-right: var(--spacing-md);
}

.nav-section {
    margin-bottom: var(--spacing-lg);
}

.nav-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
}

.nav-section-items {
    list-style: none;
}

.nav-item {
    margin-bottom: var(--spacing-xs);
}

.nav-item .nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.nav-item .nav-link:hover {
    background-color: var(--color-background-secondary);
    color: var(--color-text);
}

.nav-item.active .nav-link {
    /* Less "app chrome", more "docs" */
    background-color: var(--color-background-secondary);
    color: var(--color-text);
    font-weight: 650;
    border: 1px solid var(--color-border-light);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Content */
main .content-wrapper > section,
.content {
    /* Editorial reading measure (closer to approachable-style docs) */
    max-width: 720px;
    padding-bottom: var(--spacing-3xl);
}

main .content-wrapper > section,
.content {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
}

main .content-wrapper > section p,
main .content-wrapper > section li,
.content p,
.content li {
    /* Fallback (no `color-mix`) */
    color: var(--color-text);
    color: color-mix(in srgb, var(--color-text) 92%, transparent);
}

main .content-wrapper > section a,
.content a {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

main .content-wrapper > section a:hover,
.content a:hover {
    text-decoration-thickness: 0.12em;
}

main .content-wrapper > section h1,
.content h1 {
    font-size: clamp(2.25rem, 3.8vw, 3rem);
    letter-spacing: -0.02em;
}

main .content-wrapper > section h2,
.content h2 {
    letter-spacing: -0.01em;
    margin-top: var(--spacing-3xl);
}

main .content-wrapper > section h3,
.content h3 {
    margin-top: var(--spacing-2xl);
}

main .content-wrapper > section hr,
.content hr {
    border: none;
    height: 1px;
    background: var(--color-border-light);
    margin: var(--spacing-2xl) 0;
}

main .content-wrapper > section blockquote,
.content blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-border);
    background: var(--color-background-secondary);
    border-radius: 10px;
}

main .content-wrapper > section blockquote p:last-child,
.content blockquote p:last-child {
    margin-bottom: 0;
}

/* Inline code: "chips" that stay readable */
main .content-wrapper > section :not(pre) > code,
.content :not(pre) > code {
    /* Fallback (no `color-mix`) */
    background-color: var(--color-background-secondary);
    background-color: color-mix(in srgb, var(--color-background-secondary) 70%, transparent);
    border: 1px solid var(--color-border-light);
    /* Fallback (no `color-mix`) */
    color: var(--color-text);
    color: color-mix(in srgb, var(--color-text) 92%, transparent);
}

main .content-wrapper > section pre,
.content pre {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

main .content-wrapper > section pre,
.content pre {
    position: relative;
}

main .content-wrapper > section pre code,
.content pre code {
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid var(--color-border);
    /* Fallback (no `color-mix`) */
    background: var(--color-background);
    background: color-mix(in srgb, var(--color-background) 80%, transparent);
    color: var(--color-text-secondary);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.copy-button:hover {
    /* Fallback (no `color-mix`) */
    background: var(--color-background);
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    color: var(--color-text);
    transform: translateY(-1px);
}

.copy-button:active {
    transform: translateY(0);
}

.content-wrapper.no-sidebar {
    grid-template-columns: 1fr;
}

.content-full {
    max-width: var(--max-width);
}

/* ===========================================
   DOCS LANDING PAGE
   =========================================== */

.docs-landing {
    max-width: var(--max-width);
}

.docs-landing > h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-sm);
}

.docs-landing > .docs-intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2xl);
    max-width: 640px;
}

/* --- Docs Hero Section --- */

.docs-hero {
    display: flex;
    flex-direction: column;
    background: #f5efe6;
    border: 1px solid rgba(139, 109, 75, 0.14);
    border-radius: 14px;
    padding: 0;
    margin-bottom: var(--spacing-2xl);
    overflow: hidden;
}

.docs-hero-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center 42%;
    border-bottom: 1px solid rgba(139, 109, 75, 0.14);
}

.docs-hero-content h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.docs-hero-content {
    padding: var(--spacing-xl) var(--spacing-2xl);
}

.docs-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.docs-hero-cta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.docs-cta-primary {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.docs-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 55, 40, 0.15);
}

.docs-cta-secondary {
    display: inline-block;
    background: transparent;
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 109, 75, 0.3);
    font-weight: 500;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.docs-cta-secondary:hover {
    background: rgba(139, 109, 75, 0.06);
    border-color: rgba(139, 109, 75, 0.45);
}

@media (max-width: 768px) {
    .docs-hero {
        text-align: left;
    }

    .docs-hero-content h1 {
        font-size: var(--font-size-3xl);
    }

    .docs-hero-cta {
        justify-content: flex-start;
    }
}

/* --- External link indicator --- */

main .content-wrapper > section a[href^="http"]:not([href*="keypath"]):not(.docs-cta-primary):not(.docs-cta-secondary):not(.docs-card h3 a):not(.nav-link):not(.header-nav a)::after,
.content a[href^="http"]:not([href*="keypath"]):not(.docs-cta-primary):not(.docs-cta-secondary):not(.docs-card h3 a):not(.nav-link):not(.header-nav a)::after {
    content: ' ↗';
    font-size: 0.8em;
    opacity: 0.6;
    vertical-align: super;
    line-height: 0;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 640px) {
    .docs-grid {
        grid-template-columns: 1fr;
    }
}

.docs-card {
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.docs-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.docs-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.docs-card h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.docs-card h3 a:hover {
    color: var(--color-primary);
}

.docs-card > p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.docs-card-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.docs-card-links li a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.docs-card-links li a:hover {
    text-decoration: underline;
}

/* Kanata landing page (marketing-style) */
.kanata-landing {
    max-width: var(--max-width);
}

/* ===========================================
   HERO SECTION - 50/50 Split Layout
   =========================================== */

.kanata-landing-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-2xl);
    overflow: hidden;

    /* Full-bleed: touch all edges */
    margin: calc(var(--spacing-2xl) * -1) calc(var(--spacing-lg) * -1) 0;
    padding: var(--spacing-2xl) var(--spacing-2xl);

    /* Base dark background */
    background: radial-gradient(ellipse 40% 40% at 100% 20%, rgba(255, 255, 255, 0.03), transparent);
}

/* Breathing orange glow - subtle */
.kanata-landing-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255, 149, 0, 0.18), transparent);
    animation: hero-glow-breathe 12s ease-in-out infinite;
    z-index: 0;
    transition: transform 0.3s ease-out;
}

@keyframes hero-glow-breathe {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* ===========================================
   VIDEO SECTION - Full-screen demo placeholder
   =========================================== */

.kanata-landing-video-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    margin: 0 calc(var(--spacing-lg) * -1);
    background: linear-gradient(180deg, var(--color-background) 0%, var(--color-background-secondary) 50%, var(--color-background) 100%);
}

.kanata-landing-video-container {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
}

.kanata-landing-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    background: var(--color-background-secondary);
    border: 2px dashed var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kanata-landing-video-placeholder:hover {
    border-color: var(--color-text-tertiary);
    background: var(--color-background-tertiary);
}

.kanata-landing-video-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 149, 0, 0.15);
    border-radius: 50%;
    color: #FF9500;
}

.kanata-landing-video-icon svg {
    width: 40px;
    height: 40px;
}

.kanata-landing-video-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* ===========================================
   FULLSCREEN SECTIONS - Simplified content
   =========================================== */

.kanata-fullscreen-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    margin: 0 calc(var(--spacing-lg) * -1);
    text-align: center;
}

.kanata-fullscreen-section.kanata-fullscreen-alt {
    background: var(--color-background-secondary);
}

.kanata-fullscreen-content {
    max-width: 800px;
}

.kanata-fullscreen-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.kanata-fullscreen-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

/* =====================================================
   LAUNCH CINEMA - Cinematic Demo Section
   ===================================================== */
.launch-cinema {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-md);
    position: relative;
    background: var(--color-background);
    overflow: hidden;
}

/* Breathing blue glow for cinema section */
.launch-cinema::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 70% at 80% 30%, rgba(0, 122, 255, 0.12), transparent);
    animation: cinema-glow-breathe 10s ease-in-out infinite;
    z-index: 0;
}

@keyframes cinema-glow-breathe {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.cinema-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
    text-align: center;
}

.cinema-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.6;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cinema-subtitle {
        white-space: normal;
        max-width: 90%;
    }
}

/* Cinema TOC - table of contents for gesture types */
.cinema-toc {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.cinema-toc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0.3;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.cinema-toc-item:hover {
    opacity: 0.6;
}

.cinema-toc-item.active {
    opacity: 1;
}

.cinema-toc-item.active .cinema-gesture-icon {
    transform: scale(1.1);
}

.cinema-toc-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    background-image: none !important;
}

.cinema-toc-item.active .cinema-toc-label {
    color: var(--color-text);
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    background-image: none !important;
}

@media (max-width: 640px) {
    .cinema-toc {
        gap: var(--spacing-md);
    }
    .cinema-toc-label {
        font-size: 10px;
    }
}

.launch-cinema-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    text-align: center;
    min-height: 180px;
}

/* Gesture text with typing effect */
.cinema-gesture {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

/* Horizontal row for keys and result */
.cinema-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
}

.cinema-arrow {
    font-size: 3rem;
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cinema-arrow.visible {
    opacity: 1;
}

.cinema-gesture-text {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
}

.cinema-cursor {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 300;
    color: #FF9500;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Keys display */
.cinema-keys {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.cinema-key {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: linear-gradient(180deg, #3a3a3c, #2c2c2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    box-shadow:
        0 5px 0 #1c1c1e,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cinema-key.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cinema-key.pressed {
    transform: scale(0.95) translateY(4px);
    box-shadow:
        0 1px 0 #1c1c1e,
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, #FF9500, #e88600);
    color: #000;
}

.cinema-key-plus {
    font-size: 2.5rem;
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cinema-key-plus.visible {
    opacity: 1;
}

/* Result display */
.cinema-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    opacity: 0;
    transform: scale(0.9) translateX(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cinema-result.visible {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.cinema-app-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
}

.cinema-app-icon.slack { background-image: url('../../images/cinema-icons/slack.png'); }
.cinema-app-icon.github { background-image: url('../../images/cinema-icons/github.png'); border-radius: 50%; }
.cinema-app-icon.figma { background-image: url('../../images/cinema-icons/figma.png'); }
.cinema-app-icon.safari { background-image: url('../../images/cinema-icons/safari.png'); }
.cinema-app-icon.docs { background-image: url('../../images/cinema-icons/docs.png'); }

/* Summary slide styling */
.cinema-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.cinema-summary.visible {
    opacity: 1;
    transform: translateY(0);
}

.cinema-summary-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.cinema-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
}

.cinema-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.cinema-summary-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.cinema-summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cinema-gesture-icon {
    width: 56px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}

.cinema-gesture-icon svg {
    width: 100%;
    height: 100%;
    max-height: 36px;
}

/* Gesture icon hover animations */
.cinema-gesture-icon svg rect,
.cinema-gesture-icon svg path,
.cinema-gesture-icon svg text {
    transition: all 0.15s ease-out;
}

/* Gesture icon hover animations - now on TOC items */
/* Chord: both keys press down together */
.cinema-toc-item[data-index="0"]:hover .cinema-gesture-icon svg rect,
.cinema-toc-item[data-index="0"].active .cinema-gesture-icon svg rect {
    transform: translateY(2px);
    filter: brightness(1.2);
}

/* Sequence: keys light up in order */
.cinema-toc-item[data-index="1"]:hover .cinema-gesture-icon svg rect:nth-child(1),
.cinema-toc-item[data-index="1"].active .cinema-gesture-icon svg rect:nth-child(1) {
    animation: sequence-pulse 0.6s ease-out forwards;
}
.cinema-toc-item[data-index="1"]:hover .cinema-gesture-icon svg rect:nth-child(2),
.cinema-toc-item[data-index="1"].active .cinema-gesture-icon svg rect:nth-child(2) {
    animation: sequence-pulse 0.6s ease-out 0.15s forwards;
}
.cinema-toc-item[data-index="1"]:hover .cinema-gesture-icon svg rect:nth-child(3),
.cinema-toc-item[data-index="1"].active .cinema-gesture-icon svg rect:nth-child(3) {
    animation: sequence-pulse 0.6s ease-out 0.3s forwards;
}

@keyframes sequence-pulse {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Tap-dance: key bounces twice */
.cinema-toc-item[data-index="2"]:hover .cinema-gesture-icon svg rect,
.cinema-toc-item[data-index="2"].active .cinema-gesture-icon svg rect {
    animation: tap-dance 0.4s ease-out;
}

@keyframes tap-dance {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(3px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(3px); }
}

/* Tap-hold: key presses, bar fills */
.cinema-toc-item[data-index="3"]:hover .cinema-gesture-icon svg rect:first-child,
.cinema-toc-item[data-index="3"].active .cinema-gesture-icon svg rect:first-child {
    transform: translateY(2px);
}
.cinema-toc-item[data-index="3"]:hover .cinema-gesture-icon svg rect:last-child,
.cinema-toc-item[data-index="3"].active .cinema-gesture-icon svg rect:last-child {
    animation: hold-fill 0.8s ease-out forwards;
    transform-origin: left center;
}

@keyframes hold-fill {
    0% { transform: scaleX(0.2); opacity: 0.3; }
    100% { transform: scaleX(1); opacity: 1; }
}

/* Leader: key taps, arrow shoots forward */
.cinema-toc-item[data-index="4"]:hover .cinema-gesture-icon svg rect,
.cinema-toc-item[data-index="4"].active .cinema-gesture-icon svg rect {
    animation: leader-tap 0.3s ease-out;
}
.cinema-toc-item[data-index="4"]:hover .cinema-gesture-icon svg path,
.cinema-toc-item[data-index="4"].active .cinema-gesture-icon svg path {
    animation: leader-arrow 0.5s ease-out 0.15s forwards;
}

@keyframes leader-tap {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

@keyframes leader-arrow {
    0% { opacity: 0.6; transform: translateX(0); }
    100% { opacity: 1; transform: translateX(3px); }
}

/* Replay button */
.cinema-replay-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-text);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    margin-top: var(--spacing-lg);
}

.cinema-replay-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.cinema-replay-btn:hover {
    border-color: #FF9500;
    color: #FF9500;
    background: rgba(255, 149, 0, 0.08);
}

.cinema-replay-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.cinema-app-name {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--color-text);
}

/* Progress dots */
.cinema-progress {
    position: absolute;
    bottom: var(--spacing-2xl);
    display: flex;
    gap: var(--spacing-sm);
}

.cinema-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    opacity: 0.3;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cinema-dot.active {
    opacity: 1;
    background: #FF9500;
    transform: scale(1.2);
}

/* Fade transition between examples */
.launch-cinema-stage.fading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.launch-cinema-stage.entering {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* "See how it works" link */
.cinema-see-more {
    display: inline-block;
    margin-top: var(--spacing-xl);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-decoration: none !important;
    border: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.cinema-see-more:hover {
    color: var(--color-text-secondary);
    transform: translateY(2px);
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
    .cinema-action-row {
        gap: var(--spacing-md);
        flex-wrap: wrap;
    }

    .cinema-key {
        width: 64px;
        height: 64px;
        font-size: 1.25rem;
    }

    .cinema-app-icon {
        width: 64px;
        height: 64px;
    }

    .cinema-result-name {
        font-size: 1.5rem;
    }

    .cinema-arrow {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .cinema-action-row {
        gap: var(--spacing-sm);
        transform: scale(0.85);
        transform-origin: center center;
    }

    .cinema-key {
        width: 56px;
        height: 56px;
        font-size: 1.1rem;
    }

    .cinema-app-icon {
        width: 56px;
        height: 56px;
    }

    .cinema-result-name {
        font-size: 1.25rem;
    }

    .cinema-arrow {
        font-size: 1.25rem;
    }
}

/* =====================================================
   LAUNCH ANYTHING SECTION - Combined Layout (legacy)
   ===================================================== */
.kanata-fullscreen-content-wide {
    max-width: 1100px;
    width: 100%;
    padding: 0 var(--spacing-lg);
}

.launch-anything-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.launch-anything-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.launch-anything-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Comparison Cards */
.launch-compare {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.compare-card {
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-xl);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.compare-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.compare-keypath {
    border-color: rgba(255, 149, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), transparent);
}

.compare-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.compare-icon {
    font-size: 1.5rem;
}

.compare-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.compare-flow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.flow-arrow {
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
}

.flow-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.flow-result {
    font-weight: 600;
    color: #FF9500;
}

.compare-caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Key Pills */
.key-pill {
    font-family: 'SF Mono', Monaco, monospace;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.key-pill.small {
    padding: 3px 8px;
    font-size: 0.8rem;
}

.key-pill-orange {
    background: linear-gradient(180deg, #FFB44C, #FF9500);
    color: #111;
    border-color: rgba(0, 0, 0, 0.1);
}

.key-plus,
.key-then,
.key-times {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

/* Trigger List */
.muscle-memory-triggers {
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-xl);
}

.triggers-heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-text);
}

.trigger-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.trigger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--color-background);
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: default;
}

.trigger-item:hover {
    background: rgba(255, 149, 0, 0.08);
    transform: translateX(4px);
}

.trigger-keys {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trigger-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trigger-name {
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.trigger-result {
    color: #FF9500;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Trigger Examples (plain language version) */
.trigger-examples-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
}

.trigger-examples {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trigger-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.trigger-row:hover {
    background: rgba(255, 149, 0, 0.08);
    transform: translateX(4px);
}

.trigger-gesture {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* UI Screenshot - cropped and zoomed */
.launch-anything-visual {
    position: relative;
}

.launch-ui-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    height: 400px;
}

.launch-ui-image {
    width: 200%;
    height: auto;
    object-fit: cover;
    object-position: top left;
    transform: scale(1.1);
    transform-origin: top left;
}

/* =====================================================
   LAUNCH APPS SECTION - Rich Layout (legacy, keep for now)
   ===================================================== */
.launch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.launch-capabilities {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.capability-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.capability-item:hover {
    border-color: rgba(255, 149, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.capability-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 149, 0, 0.05));
    border-radius: 10px;
}

.capability-icon svg {
    width: 24px;
    height: 24px;
    stroke: #FF9500;
}

.capability-text h4 {
    margin: 0 0 4px 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.capability-text p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Launch Demo Visual */
.launch-examples-visual {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-lg);
}

.launch-demo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.launch-demo-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.launch-demo-row:hover {
    background: rgba(255, 149, 0, 0.08);
}

.launch-keys {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}

.launch-arrow {
    color: var(--color-text-tertiary);
    font-size: 1.2rem;
}

.launch-target {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.app-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-block;
}

.app-slack { background: linear-gradient(135deg, #4A154B, #611f69); }
.app-github { background: linear-gradient(135deg, #24292e, #1b1f23); }
.app-safari { background: linear-gradient(135deg, #0078FF, #00C7FF); }
.app-figma { background: linear-gradient(135deg, #F24E1E, #A259FF); }
.app-docs { background: linear-gradient(135deg, #4285F4, #34A853); }

.app-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

/* =====================================================
   RULES FULLSCREEN SECTION
   ===================================================== */
.rules-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--color-background);
}

.rules-fullscreen-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.rules-fullscreen-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
}

.rules-fullscreen-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.5;
}

.rules-chips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.rule-chip-large {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: all 0.25s ease;
    text-align: left;
}

.rule-chip-large:hover {
    border-color: rgba(255, 149, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rule-chip-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 149, 0, 0.05));
    border-radius: 12px;
}

.rule-chip-icon svg {
    width: 24px;
    height: 24px;
    stroke: #FF9500;
}

.rule-chip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rule-chip-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.rule-chip-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.rules-fullscreen-note {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .rules-chips-grid {
        grid-template-columns: 1fr;
    }

    .rule-chip-large {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .rule-chip-icon {
        width: 40px;
        height: 40px;
    }

    .rule-chip-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* =====================================================
   KEYBOARDS FULLSCREEN SECTION
   ===================================================== */
.keyboards-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
    background: var(--color-background);
    overflow: hidden;
}

.keyboards-fullscreen-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
    padding: 0 var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.keyboards-fullscreen-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
}

.keyboards-fullscreen-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Make marquee full-width in this context */
.keyboards-fullscreen .keyboard-marquee {
    width: 100%;
    margin: 0;
}

/* =====================================================
   LAYOUTS FULLSCREEN SECTION
   ===================================================== */
.layouts-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--color-background);
}

.layouts-fullscreen-content {
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.layouts-fullscreen-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
}

.layouts-fullscreen-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.5;
}

.layouts-fullscreen .layouts-video {
    width: 100%;
    max-width: 900px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--spacing-lg);
}

.layouts-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0 0 var(--spacing-md) 0;
}

.layouts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    margin: 0 auto var(--spacing-xl) auto;
    max-width: 800px;
}

/* Remove blue underline from layout info links */
.layouts-fullscreen .layout-info-link {
    text-decoration: none;
    border-bottom: none;
}

.layouts-fullscreen .layout-info-link:hover {
    text-decoration: none;
    border-bottom: none;
}

.layouts-international {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .layouts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .layouts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   MICROANIMATIONS (Scroll-triggered)
   ===================================================== */

/* Initial state - items hidden until section comes into view */
.animate-on-scroll .stagger-item {
    opacity: 0;
    transform: translateY(12px);
}

/* Trigger animations when section comes into view */
.animate-on-scroll.animate-in .trigger-row {
    animation: slideInRight 0.4s ease forwards;
}

.animate-on-scroll.animate-in .trigger-row:nth-child(1) { animation-delay: 0.1s; }
.animate-on-scroll.animate-in .trigger-row:nth-child(2) { animation-delay: 0.15s; }
.animate-on-scroll.animate-in .trigger-row:nth-child(3) { animation-delay: 0.2s; }
.animate-on-scroll.animate-in .trigger-row:nth-child(4) { animation-delay: 0.25s; }
.animate-on-scroll.animate-in .trigger-row:nth-child(5) { animation-delay: 0.3s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Compare cards entrance */
.animate-on-scroll.animate-in .compare-card {
    animation: fadeInUp 0.4s ease forwards;
}

.animate-on-scroll.animate-in .compare-card:nth-child(1) { animation-delay: 0.05s; }
.animate-on-scroll.animate-in .compare-card:nth-child(2) { animation-delay: 0.15s; }

/* UI image fade in */
.animate-on-scroll.animate-in .launch-ui-frame {
    animation: fadeInScale 0.6s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Key pill subtle pulse on hover */
.trigger-row:hover .key-pill {
    animation: keyPulse 0.3s ease;
}

@keyframes keyPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Compare card subtle glow */
.compare-keypath:hover {
    box-shadow: 0 8px 32px rgba(255, 149, 0, 0.15);
}

/* =====================================================
   RESPONSIVE - Fullscreen Sections
   ===================================================== */
@media (max-width: 900px) {
    .launch-anything-grid,
    .launch-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .launch-anything-visual {
        order: -1;
    }

    .launch-ui-frame {
        height: 300px;
    }

    .trigger-row {
        grid-template-columns: 100px 1fr auto;
    }
}

@media (max-width: 768px) {
    .kanata-fullscreen-section {
        min-height: auto;
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .kanata-fullscreen-content-wide {
        padding: 0 var(--spacing-sm);
    }

    .compare-flow {
        font-size: var(--font-size-sm);
    }

    .launch-keys {
        min-width: auto;
    }
}

/* Scroll indicator at bottom center */
.kanata-landing-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 32px;
    width: 24px;
    height: 40px;
    border: 2px solid var(--color-text-tertiary);
    border-radius: 12px;
    transform: translateX(-50%);
    opacity: 0.3;
}
.kanata-landing-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 4px;
    height: 8px;
    background: var(--color-text-tertiary);
    border-radius: 2px;
    transform: translateX(-50%);
    opacity: 0.3;
    animation: hero-scroll-hint 2s ease-in-out infinite;
}
@keyframes hero-scroll-hint {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 0.6; }
}

/* Progressive reveal animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-animate {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}
.hero-animate-1 { animation-delay: 0.1s; }
.hero-animate-2 { animation-delay: 0.25s; }
.hero-animate-3 { animation-delay: 0.4s; }
.hero-animate-4 { animation-delay: 0.55s; }
.hero-animate-5 { animation-delay: 0.7s; }

/* Hero text content (left side) */
.kanata-landing-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Hero visual (right side) */
.kanata-landing-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeInScale 1s ease-out 0.3s forwards;
}

.kanata-landing-hero-image {
    width: 100%;
    max-width: 580px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.kanata-landing-kicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.kanata-landing-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: rgba(255, 149, 0, 0.10);
    color: var(--color-text);
}

/* Hero Typography - left-aligned hierarchy */
.content .kanata-landing-title,
.kanata-landing-title {
    font-size: clamp(4rem, 9.5vw, 6rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--spacing-md);
    padding-bottom: 0.05em; /* Prevent descender clipping */
    background: linear-gradient(180deg, var(--color-text) 40%, var(--color-text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kanata-landing-tagline {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.kanata-landing-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 480px;
    line-height: 1.6;
}

.kanata-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* Center buttons only in the Ready section, not the hero */
.kanata-landing-section .kanata-landing-actions {
    justify-content: center;
}

.kanata-landing-requirements {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-md);
}

.button-orange {
    background: linear-gradient(180deg, #FFB44C, #FF9500);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.10);
    transition: all 0.2s ease;
}

.button-orange:hover {
    background: linear-gradient(180deg, #FFF, #F5F5F7);
    color: #111;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.button-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.15);
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kanata-landing-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanata-landing-hero-image {
    width: min(260px, 100%);
    height: auto;
    border-radius: 12px;
    /* No background: hero image is transparent */
    background: transparent;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

/* Kanata User Callout */
.kanata-user-callout {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(88, 86, 214, 0.08) 100%);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 2rem auto 0;
    max-width: 600px;
}

.kanata-user-callout-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.kanata-user-callout-badge {
    background: linear-gradient(135deg, #007AFF, #5856D6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kanata-user-callout p {
    flex: 1;
    min-width: 200px;
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.kanata-user-callout code {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.kanata-user-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #007AFF;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.kanata-user-callout-link:hover {
    gap: 8px;
}

.kanata-user-callout-link svg {
    transition: transform 0.2s ease;
}

.kanata-user-callout-link:hover svg {
    transform: translateX(2px);
}

@media (prefers-color-scheme: dark) {
    .kanata-user-callout {
        background: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(88, 86, 214, 0.12) 100%);
        border-color: rgba(0, 122, 255, 0.3);
    }

    .kanata-user-callout code {
        background: rgba(0, 122, 255, 0.15);
    }
}

/* Migration Page Hero */
.migration-hero {
    text-align: center;
    padding: 3.5rem 2rem 3rem;
    margin-bottom: 2.5rem;
    background: linear-gradient(145deg, #0b1120 0%, #1a1040 50%, #0d1a2d 100%);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* Subtle radial glow behind text */
.migration-hero::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(88, 86, 214, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.migration-hero h1 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #fff;
    position: relative;
    letter-spacing: -0.02em;
}

.migration-hero h1 br + * {
    color: #fff;
}

.migration-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    position: relative;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* "Karabiner → KeyPath" styled spans */
.migration-from {
    color: rgba(255, 255, 255, 0.45);
}

.migration-hero-arrow {
    display: inline-block;
    font-size: 2rem;
    color: rgba(0, 122, 255, 0.6);
    vertical-align: middle;
    margin: 0 0.15em;
    position: relative;
}

.migration-to {
    background: linear-gradient(135deg, #5AC8FA, #007AFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (prefers-color-scheme: dark) {
    .migration-hero {
        background: linear-gradient(145deg, #0b1120 0%, #1a1040 50%, #0d1a2d 100%);
    }
}

.kanata-landing-section {
    margin-top: var(--spacing-2xl);
    text-align: center;
}

/* Existing Kanata users - Full Screen */
.kanata-existing-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--color-background);
}

.kanata-existing-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.kanata-existing-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
}

.kanata-existing-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2xl) 0;
}

.kanata-existing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.kanata-existing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    border-radius: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.kanata-existing-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}

.kanata-existing-icon svg {
    width: 32px;
    height: 32px;
}

.kanata-existing-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kanata-existing-name {
    font-weight: 600;
    color: var(--color-text);
}

.kanata-existing-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.kanata-existing-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-md);
}

.kanata-existing-learn-more:hover {
    color: var(--color-primary);
}

.kanata-existing-learn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .kanata-existing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

.kanata-landing-simple {
    /* Remove extra container chrome; use spacing instead */
    border-radius: 0;
    border: none;
    background: transparent;
    padding: 0;
}

.kanata-landing-bullets {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.kanata-landing-bullets li {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.kanata-landing-bullets li strong {
    color: var(--color-text);
}

/* Kanata landing: feature list with icons */
.kanata-feature-list {
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md) var(--spacing-xl);
}

@media (max-width: 720px) {
    .kanata-feature-list {
        grid-template-columns: 1fr;
    }
}

.kanata-feature {
    --kp-icon-color: var(--color-primary);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
}

/* Color accents */
.kanata-feature.kp-accent-blue { --kp-icon-color: #5AC8FA; }
.kanata-feature.kp-accent-purple { --kp-icon-color: #AF52DE; }
.kanata-feature.kp-accent-green { --kp-icon-color: #34C759; }
.kanata-feature.kp-accent-orange { --kp-icon-color: #FF9500; }
.kanata-feature.kp-accent-teal { --kp-icon-color: #30B0C7; }
.kanata-feature.kp-accent-slate { --kp-icon-color: #8E8E93; }
.kanata-feature.kp-accent-white { --kp-icon-color: #F5F5F7; }

.kanata-feature-icon {
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 88px;
    margin-top: 4px;
    color: var(--kp-icon-color);
}

.kanata-feature-icon .kp-icon {
    width: 48px;
    height: 48px;
    display: block;
}

.kanata-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kanata-feature-title {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.25;
}

.kanata-feature-body {
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.kanata-feature-body code {
    font-size: 0.9em;
}

.kanata-landing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.kanata-landing-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.kanata-landing-card {
    /* Reduce container noise: no background/border by default */
    border-radius: 0;
    border: none;
    background: transparent;
    padding: 0;
}

.kanata-landing-card h3 {
    margin-top: 0;
}

.kanata-landing-divider {
    height: 1px;
    background: var(--color-border-light);
    opacity: 0.7;
    margin: var(--spacing-2xl) 0;
}

.kanata-landing-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
}

.kanata-landing-list li {
    padding: 0.25em 0;
    color: var(--color-secondary-text);
    font-size: 0.95rem;
}

.kanata-landing-list code {
    background: var(--color-code-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Reduce "module" roundness inside Kanata landing page */
.kanata-landing .button {
    border-radius: 10px;
}

.kanata-landing pre {
    border-radius: 10px;
}

.kanata-landing-code {
    margin-top: var(--spacing-sm);
}

.media-placeholder {
    border-radius: 14px;
    border: 1px dashed var(--color-border);
    background:
        linear-gradient(180deg, rgba(255, 149, 0, 0.08), transparent 60%),
        var(--color-background-secondary);
    padding: var(--spacing-xl);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    text-align: center;
}

.kanata-landing-fineprint {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Hero responsive - tablet */
@media (max-width: 1024px) {
    .kanata-landing-hero {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
        padding: var(--spacing-2xl) var(--spacing-lg);
        gap: var(--spacing-xl);
    }

    .kanata-landing-hero-content {
        text-align: center;
        order: 1;
    }

    .kanata-landing-hero-visual {
        order: 2;
    }

    .kanata-landing-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .kanata-landing-actions {
        justify-content: center;
    }

    .kanata-landing-grid-3 {
        grid-template-columns: 1fr;
    }

    .kanata-landing-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Hero responsive - mobile */
@media (max-width: 768px) {
    .kanata-landing-hero {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .kanata-landing-hero-image {
        max-width: 100%;
    }

    .kanata-landing-hero::after,
    .kanata-landing-hero::before {
        display: none; /* Hide scroll indicator on mobile */
    }
}

.content h1:first-child {
    margin-top: 0;
}

/* Code Blocks */
code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9em;
    background-color: var(--color-background-secondary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    color: var(--color-primary-dark);
}

pre {
    position: relative;
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-lg);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    color: var(--color-text);
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 8px;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
}

.button-primary {
    background-color: var(--color-primary);
    color: white;
}

.button-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.button-secondary {
    background-color: var(--color-background-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.button-secondary:hover {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border);
}

/* Cards */
.card {
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.92em;
}

th, td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

/* Remove bottom border on last row */
tr:last-child td {
    border-bottom: none;
}

th {
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background-color: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border);
}

/* Subtle alternating row stripes */
tbody tr:nth-child(even) {
    background-color: var(--color-background-tertiary);
}

/* Hover highlight */
tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
}

/* First column emphasis for label columns */
td:first-child {
    font-weight: 500;
    color: var(--color-text);
}

/* "Full support" and status badges in table cells */
td strong {
    color: var(--color-text);
}

/* Lists */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-secondary);
}

/* =========================================================================
   CSS Keyboard Hero Section (before footer)
   ========================================================================= */
.keyboard-hero-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    background: #0a0a0a; /* Very dark to match keyboard */
    margin-bottom: 0;
    padding-top: var(--spacing-2xl);
    padding-bottom: 0;
}

.keyboard-hero-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.keyboard-hero-copy {
    max-width: 680px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

.keyboard-hero-title {
    margin: 0 0 var(--spacing-sm);
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #f5f5f7;
    padding-bottom: 0.05em;
}

.keyboard-hero-subtitle {
    margin: 0;
    font-size: var(--font-size-base);
    color: rgba(245, 245, 247, 0.75);
    line-height: 1.6;
}

/* CSS Keyboard Container - matches app's LiveKeyboardOverlayView */
/* Always uses dark theme to match the app */
.css-keyboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px 40px;
    background: #0d0d0d;
    border-radius: 16px 16px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 -4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    /* Start fully illuminated */
    opacity: 1;
    transition: opacity 1.5s ease;
}

/* Base state - crisp text, minimal glow */
.css-keyboard .kb-primary,
.css-keyboard .kb-secondary,
.css-keyboard .kb-label,
.css-keyboard .kb-fn-label,
.css-keyboard .kb-mod-label,
.css-keyboard .kb-mod-symbol,
.css-keyboard .kb-arrow-icon {
    text-shadow:
        0 0 2px currentColor,
        0 0 4px rgba(255, 255, 255, 0.15);
    transition: text-shadow 1.5s ease;
}

.css-keyboard .kb-sf-icon {
    filter: drop-shadow(0 0 2px currentColor);
    transition: filter 1.5s ease;
}

/* Idle state - fade and add ethereal glow after inactivity */
.keyboard-hero-section.keyboard-idle .css-keyboard {
    opacity: 0.6;
}

.keyboard-hero-section.keyboard-idle .css-keyboard .kb-primary,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-secondary,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-label,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-fn-label,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-mod-label,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-mod-symbol,
.keyboard-hero-section.keyboard-idle .css-keyboard .kb-arrow-icon {
    text-shadow:
        0 0 8px currentColor,
        0 0 16px currentColor,
        0 0 24px rgba(255, 255, 255, 0.3);
}

.keyboard-hero-section.keyboard-idle .css-keyboard .kb-sf-icon {
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

/* Hover cancels idle state immediately */
.keyboard-hero-section:hover .css-keyboard {
    opacity: 1;
}

.keyboard-hero-section:hover .css-keyboard .kb-primary,
.keyboard-hero-section:hover .css-keyboard .kb-secondary,
.keyboard-hero-section:hover .css-keyboard .kb-label,
.keyboard-hero-section:hover .css-keyboard .kb-fn-label,
.keyboard-hero-section:hover .css-keyboard .kb-mod-label,
.keyboard-hero-section:hover .css-keyboard .kb-mod-symbol,
.keyboard-hero-section:hover .css-keyboard .kb-arrow-icon {
    text-shadow:
        0 0 2px currentColor,
        0 0 4px rgba(255, 255, 255, 0.15);
}

.keyboard-hero-section:hover .css-keyboard .kb-sf-icon {
    filter: drop-shadow(0 0 2px currentColor);
}

/* Keyboard Rows */
.kb-row {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.kb-row-fn {
    gap: 4px;
    margin-bottom: 8px;
}

.kb-row-mods {
    gap: 5px;
}

/* Base Key Styles - matches app's OverlayKeycapView with GMKColorway.default */
.kb-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.kb-key:hover {
    background: #1c1c1c; /* slightly brighter than alphaBase */
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Key Labels - bright white text */
.kb-primary {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.kb-secondary {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
    margin-bottom: 2px;
}

.kb-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: lowercase;
}

.kb-icon {
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

.kb-fn-icon {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

.kb-fn-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.kb-mod-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
}

/* Function Keys */
.kb-key-fn {
    width: 54px;
    height: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.kb-key-fn .kb-icon {
    font-size: 14px;
}

.kb-key-esc {
    width: 54px;
}

.kb-key-power {
    width: 54px;
}

/* Wide Keys */
.kb-key-delete {
    width: 82px;
}

.kb-key-tab {
    width: 82px;
    align-items: flex-start;
    padding-left: 12px;
}

.kb-key-caps {
    width: 94px;
    align-items: flex-start;
    padding-left: 12px;
}

.kb-key-return {
    width: 94px;
    align-items: flex-end;
    padding-right: 12px;
}

.kb-key-shift-l {
    width: 124px;
    align-items: flex-start;
    padding-left: 12px;
}

.kb-key-shift-r {
    width: 124px;
    align-items: flex-end;
    padding-right: 12px;
}

.kb-key-backslash {
    width: 54px;
}

/* Modifier Row Keys */
.kb-key-fn-mod {
    width: 54px;
    height: 54px;
    flex-direction: column;
    gap: 2px;
}

.kb-key-ctrl,
.kb-key-opt {
    width: 54px;
}

.kb-key-cmd {
    width: 68px;
}

.kb-key-space {
    width: 280px;
}

/* SF Symbol Icon */
.kb-sf-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

/* SF icons in function keys */
.kb-key-fn .kb-sf-icon {
    width: 14px;
    height: 14px;
}

.kb-globe {
    width: 12px;
    height: 12px;
}

/* Modifier symbols (⌃, ⌥, ⌘) */
.kb-mod-symbol {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

/* Arrow cluster - inverted T layout */
.kb-arrow-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.kb-arrow-row-top {
    display: flex;
    justify-content: center;
}

.kb-arrow-row-bottom {
    display: flex;
    gap: 2px;
}

/* Arrow Keys - half-height keys */
.kb-key-arrow {
    width: 38px;
    height: 24px;
    padding: 0;
}

.kb-arrow-icon {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* Key pressed/clicked state - blue glow */
.kb-key.kb-key-pressed {
    background: linear-gradient(180deg, #007AFF 0%, #0051D5 100%) !important;
    border-color: #0051D5 !important;
    box-shadow:
        0 0 20px rgba(0, 122, 255, 0.6),
        0 0 40px rgba(0, 122, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(1px);
}

.kb-key.kb-key-pressed .kb-primary,
.kb-key.kb-key-pressed .kb-secondary,
.kb-key.kb-key-pressed .kb-label,
.kb-key.kb-key-pressed .kb-icon,
.kb-key.kb-key-pressed .kb-fn-icon,
.kb-key.kb-key-pressed .kb-fn-label,
.kb-key.kb-key-pressed .kb-mod-label,
.kb-key.kb-key-pressed .kb-mod-symbol,
.kb-key.kb-key-pressed .kb-arrow-icon,
.kb-key.kb-key-pressed .kb-sf-icon {
    color: #ffffff !important;
}

/* Fade out animation */
@keyframes keyFadeOut {
    0% {
        background: linear-gradient(180deg, #007AFF 0%, #0051D5 100%);
        border-color: #0051D5;
        box-shadow:
            0 0 20px rgba(0, 122, 255, 0.6),
            0 0 40px rgba(0, 122, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    100% {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

.kb-key.kb-key-fading {
    animation: keyFadeOut 0.4s ease-out forwards;
}

.kb-key.kb-key-fading .kb-primary,
.kb-key.kb-key-fading .kb-icon,
.kb-key.kb-key-fading .kb-mod-symbol,
.kb-key.kb-key-fading .kb-arrow-icon {
    transition: color 0.4s ease-out;
    color: rgba(255, 255, 255, 0.9);
}

.kb-key.kb-key-fading .kb-secondary,
.kb-key.kb-key-fading .kb-label,
.kb-key.kb-key-fading .kb-mod-label,
.kb-key.kb-key-fading .kb-sf-icon {
    transition: color 0.4s ease-out;
    color: rgba(255, 255, 255, 0.5);
}

.kb-key.kb-key-fading .kb-fn-icon {
    transition: color 0.4s ease-out;
    color: rgba(255, 255, 255, 0.7);
}

.kb-key.kb-key-fading .kb-fn-label {
    transition: color 0.4s ease-out;
    color: rgba(255, 255, 255, 0.4);
}

/* Gradient fade at the bottom - hidden since backgrounds match */
.keyboard-hero-fade {
    display: none;
}

/* Responsive - Tablet */
@media (max-width: 900px) {
    .css-keyboard {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .css-keyboard {
        transform: scale(0.65);
        transform-origin: top center;
    }

    .keyboard-hero-section {
        padding-top: var(--spacing-lg);
    }
}

/* Footer */
.site-footer {
    background-color: var(--color-background-secondary);
    border-top: none;
    padding: var(--spacing-3xl) var(--spacing-lg);
    margin-top: 0;
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-2xl);
}

.footer-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.footer-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.footer-heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-sm);
}

.footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-credits {
    max-width: var(--max-width);
    margin: var(--spacing-xl) auto 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.footer-love {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xs);
}

.footer-love a.footer-creator {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-love a.footer-creator:hover {
    color: var(--color-primary);
}

.footer-standing {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.footer-standing a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-standing a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: var(--spacing-md) auto 0;
    padding-top: var(--spacing-md);
    text-align: center;
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Responsive */
@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: static;
        max-height: none;
    }
    
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .button {
        width: 100%;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Syntax Highlighting */
.highlight {
    /*
     Rouge output often wraps code as `.highlight > pre`.
     We already style `pre` blocks, so keep this wrapper minimal to avoid
     double-padding/double-background.
     */
    background: none;
    padding: 0;
    overflow-x: visible;
}

.highlight {
    position: relative;
}

.highlight pre {
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
}

/* Rouge syntax highlighting tokens */
.highlight .c { color: var(--color-text-secondary); font-style: italic; } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2; } /* Error */
.highlight .k { color: var(--color-primary); font-weight: 500; } /* Keyword */
.highlight .o { color: var(--color-text); } /* Operator */
.highlight .cm { color: var(--color-text-secondary); font-style: italic; } /* Comment.Multiline */
.highlight .cp { color: var(--color-text-secondary); font-weight: 500; } /* Comment.Preproc */
.highlight .c1 { color: var(--color-text-secondary); font-style: italic; } /* Comment.Single */
.highlight .cs { color: var(--color-text-secondary); font-weight: 500; font-style: italic; } /* Comment.Special */
.highlight .gd { color: #000; background-color: #fdd; } /* Generic.Deleted */
.highlight .ge { color: #000; font-style: italic; } /* Generic.Emph */
.highlight .gr { color: #a00; } /* Generic.Error */
.highlight .gh { color: #999; } /* Generic.Heading */
.highlight .gi { color: #000; background-color: #dfd; } /* Generic.Inserted */
.highlight .go { color: #888; } /* Generic.Output */
.highlight .gp { color: #555; } /* Generic.Prompt */
.highlight .gs { font-weight: 500; } /* Generic.Strong */
.highlight .gu { color: #aaa; } /* Generic.Subheading */
.highlight .gt { color: #a00; } /* Generic.Traceback */
.highlight .kc { color: var(--color-primary); font-weight: 500; } /* Keyword.Constant */
.highlight .kd { color: var(--color-primary); font-weight: 500; } /* Keyword.Declaration */
.highlight .kn { color: var(--color-primary); font-weight: 500; } /* Keyword.Namespace */
.highlight .kp { color: var(--color-primary); font-weight: 500; } /* Keyword.Pseudo */
.highlight .kr { color: var(--color-primary); font-weight: 500; } /* Keyword.Reserved */
.highlight .kt { color: var(--color-primary); font-weight: 500; } /* Keyword.Type */
.highlight .m { color: #099; } /* Literal.Number */
.highlight .s { color: #d14; } /* Literal.String */
.highlight .na { color: #008080; } /* Name.Attribute */
.highlight .nb { color: #0086B3; } /* Name.Builtin */
.highlight .nc { color: #458; font-weight: 500; } /* Name.Class */
.highlight .no { color: #008080; } /* Name.Constant */
.highlight .ni { color: #800080; } /* Name.Entity */
.highlight .ne { color: #900; font-weight: 500; } /* Name.Exception */
.highlight .nf { color: #900; font-weight: 500; } /* Name.Function */
.highlight .nn { color: #555; } /* Name.Namespace */
.highlight .nt { color: #000080; } /* Name.Tag */
.highlight .nv { color: #008080; } /* Name.Variable */
.highlight .ow { color: var(--color-text); font-weight: 500; } /* Operator.Word */
.highlight .w { color: #bbb; } /* Text.Whitespace */
.highlight .mf { color: #099; } /* Literal.Number.Float */
.highlight .mh { color: #099; } /* Literal.Number.Hex */
.highlight .mi { color: #099; } /* Literal.Number.Integer */
.highlight .mo { color: #099; } /* Literal.Number.Oct */
.highlight .sb { color: #d14; } /* Literal.String.Backtick */
.highlight .sc { color: #d14; } /* Literal.String.Char */
.highlight .sd { color: #d14; } /* Literal.String.Doc */
.highlight .s2 { color: #d14; } /* Literal.String.Double */
.highlight .se { color: #d14; } /* Literal.String.Escape */
.highlight .sh { color: #d14; } /* Literal.String.Heredoc */
.highlight .si { color: #d14; } /* Literal.String.Interpol */
.highlight .sx { color: #d14; } /* Literal.String.Other */
.highlight .sr { color: #009926; } /* Literal.String.Regex */
.highlight .s1 { color: #d14; } /* Literal.String.Single */
.highlight .ss { color: #990073; } /* Literal.String.Symbol */
.highlight .bp { color: #999; } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080; } /* Name.Variable.Class */
.highlight .vg { color: #008080; } /* Name.Variable.Global */
.highlight .vi { color: #008080; } /* Name.Variable.Instance */
.highlight .il { color: #099; } /* Literal.Number.Integer.Long */


/* Glossary term highlighting + popover */
.kp-term {
    all: unset;
    display: inline;
    cursor: help;
    color: inherit;
    border-bottom: 1px dotted color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
}

.kp-term:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    outline-offset: 3px;
    border-radius: 4px;
}

.kp-popover {
    position: fixed;
    z-index: 1000;
    width: min(360px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: saturate(180%) blur(18px);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.kp-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.kp-popover-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.kp-popover-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex: 0 0 18px;
}

.kp-popover-title {
    font-weight: 700;
    color: var(--color-text);
}

.kp-popover-body {
    color: var(--color-text-secondary);
    line-height: 1.5;
}


/* Buttons should not be underlined */
a.button,
a.button:hover,
a.button:focus,
a.button:active {
    text-decoration: none;
    border-bottom: none;
}

.content a.button,
.content a.button:hover,
.content a.button:focus,
.content a.button:active {
    text-decoration: none;
    border-bottom: none;
}


/* Kanata landing: launcher section */
.kanata-launches {
    align-items: center;
}

.kanata-launches-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanata-launches-image {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}


/* Kanata landing: secondary CTA stacked label */
.kanata-landing-secondary-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.kanata-landing-secondary-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    line-height: 1.35;
}

.kanata-landing-secondary-note code {
    font-size: 0.95em;
}



/* Kanata hero: tighter CTA row */
.kanata-landing-actions {
    align-items: flex-start;
}

@media (max-width: 520px) {
    .kanata-landing-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Kanata landing: Raycast comparison */
.kanata-launches-note {
    margin-top: var(--spacing-xl);
}

.kanata-compare {
    margin-top: var(--spacing-md);
}

.kanata-compare-card {
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background-secondary) 55%, transparent);
    border-radius: 14px;
    padding: var(--spacing-lg);
}

.kanata-compare-kicker {
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-sm);
}

.kanata-compare-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--color-text);
    margin-top: 10px;
}

.kanata-compare-caption {
    margin-top: 12px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.kanata-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background) 75%, transparent);
    font-family: 'SF Mono', Monaco, ui-monospace, Menlo, monospace;
    font-size: 0.9em;
    color: var(--color-text);
}


/* Kanata landing: app icon tiles for comparison */
.kanata-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    overflow: hidden;
}

.kanata-app-icon .kanata-app-svg {
    width: 24px;
    height: 24px;
}

.kanata-app-icon.app-github {
    background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.10), transparent 55%),
                linear-gradient(180deg, #1f2328, #0b0d0f);
    color: #ffffff;
}

.kanata-app-icon.app-notion {
    background: radial-gradient(120% 120% at 20% 10%, rgba(0,0,0,0.06), transparent 55%),
                linear-gradient(180deg, #ffffff, #f0f0f0);
    color: #111111;
}

.kanata-app-icon.app-slack {
    background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
                linear-gradient(180deg, #4A154B, #2b0c2c);
    color: #ffffff;
}

.kanata-app-icon.app-safari {
    background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.18), transparent 55%),
                linear-gradient(180deg, #0A84FF, #0057D9);
    color: #ffffff;
}


/* Kanata landing: headline icon for Raycast comparison */
.kanata-compare-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kanata-compare-title-icon {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    flex: 0 0 22px;
}

.kanata-compare-title-icon .kp-icon {
    width: 22px;
    height: 22px;
    display: block;
}


/* Alternate layouts section */
.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.layout-card {
    position: relative;
    padding: var(--spacing-md);
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background-secondary) 50%, transparent);
    text-align: center;
    cursor: default;
    transition: all var(--transition-fast);
}

.layout-card:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    transform: translateY(-2px);
}

.layout-card-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.layout-card-type {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.layout-card-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 280px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    pointer-events: none;
}

.layout-card:hover .layout-card-tooltip {
    opacity: 1;
    visibility: visible;
}

.layout-card-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-background);
}

.layouts-video {
    width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-left: calc(var(--spacing-lg) * -1);
    margin-right: calc(var(--spacing-lg) * -1);
    width: calc(100% + var(--spacing-lg) * 2);
    max-width: none;
}

/* Flip card for ergonomic layouts */
.layout-flip-card {
    perspective: 1000px;
    height: 120px;
}

.layout-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.layout-flip-card:hover .layout-flip-inner {
    transform: rotateY(180deg);
}

.layout-flip-front,
.layout-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background-secondary) 50%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.layout-flip-front {
    text-align: center;
}

.layout-flip-back {
    transform: rotateY(180deg);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: var(--color-primary);
    text-align: center;
}

.layout-flip-back p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

.layout-info-link {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-background) 80%, transparent);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    opacity: 0.7;
}

.layout-info-link:hover {
    background: var(--color-primary);
    color: white;
    opacity: 1;
    transform: scale(1.1);
}

.layout-info-icon {
    width: 16px;
    height: 16px;
}

.layout-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-top: var(--spacing-md);
}

/* Keyboard marquee */
.keyboard-marquee {
    overflow: visible;
    overflow-x: clip;
    position: relative;
    margin-left: calc(var(--spacing-lg) * -1);
    margin-right: calc(var(--spacing-lg) * -1);
    padding: var(--spacing-md) 0;
    padding-top: 60px; /* Space for tooltip above */
}

.keyboard-marquee::before,
.keyboard-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.keyboard-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-background), transparent);
}

.keyboard-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-background), transparent);
}

.keyboard-marquee-track {
    display: flex;
    gap: var(--spacing-md);
    animation: marquee 40s linear infinite;
    width: max-content;
    cursor: grab;
    touch-action: pan-x; /* Enable horizontal swipe on touch */
    user-select: none;
    -webkit-user-select: none;
}

.keyboard-marquee:hover .keyboard-marquee-track {
    animation-play-state: paused;
}

/* Dragging state - controlled by JS */
.keyboard-marquee-track.is-dragging {
    animation: none !important;
    cursor: grabbing;
}

/* Momentum state - animation paused while coasting */
.keyboard-marquee-track.has-momentum {
    animation: none !important;
    cursor: grab;
}

/* Returning to auto-scroll - smooth transition */
.keyboard-marquee-track.resuming {
    transition: none;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.keyboard-marquee-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-sm);
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    background: color-mix(in srgb, var(--color-background-secondary) 50%, transparent);
    min-width: 180px;
    transition: all var(--transition-fast);
    cursor: default;
}

.keyboard-marquee-item:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    transform: scale(1.05);
}

/* Disable hover effects while dragging or has momentum */
.keyboard-marquee-track.is-dragging .keyboard-marquee-item,
.keyboard-marquee-track.has-momentum .keyboard-marquee-item {
    pointer-events: none;
}

.keyboard-marquee-track.is-dragging .keyboard-marquee-item:hover,
.keyboard-marquee-track.has-momentum .keyboard-marquee-item:hover {
    border-color: var(--color-border-light);
    background: color-mix(in srgb, var(--color-background-secondary) 50%, transparent);
    transform: none;
}

.keyboard-marquee-track.is-dragging .keyboard-marquee-item::after,
.keyboard-marquee-track.has-momentum .keyboard-marquee-item::after {
    display: none;
}

.keyboard-marquee-icon {
    font-size: 1.5rem;
}

.keyboard-marquee-img {
    width: 160px;
    height: 80px;
    border-radius: 4px;
    object-fit: contain;
}

.keyboard-marquee-name {
    font-weight: 500;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    opacity: 0.7;
}

.keyboard-marquee-item:hover .keyboard-marquee-name {
    color: var(--color-text);
    opacity: 1;
}

.keyboard-marquee-item::after {
    content: attr(data-stat);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text);
    white-space: normal;
    text-align: center;
    min-width: 140px;
    max-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 10;
}

.keyboard-marquee-item:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Keyboard marquee - mobile optimizations */
@media (max-width: 768px) {
    .keyboard-marquee {
        margin-left: calc(var(--spacing-md) * -1);
        margin-right: calc(var(--spacing-md) * -1);
        padding-top: 50px;
    }

    .keyboard-marquee::before,
    .keyboard-marquee::after {
        width: 40px;
    }

    .keyboard-marquee-track {
        gap: var(--spacing-sm);
        /* Slightly faster on mobile */
        animation-duration: 30s;
    }

    .keyboard-marquee-item {
        min-width: 160px;
        padding: var(--spacing-xs);
        /* Larger touch target */
        min-height: 110px;
    }

    .keyboard-marquee-img {
        width: 140px;
        height: 70px;
    }

    .keyboard-marquee-name {
        font-size: 12px;
    }

    /* Hide tooltip on mobile - show on tap instead */
    .keyboard-marquee-item::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .keyboard-marquee {
        padding-top: 12px; /* No tooltip space needed */
    }

    .keyboard-marquee-track {
        gap: 8px;
    }

    .keyboard-marquee-item {
        min-width: 140px;
        min-height: 100px;
        border-radius: 10px;
    }

    .keyboard-marquee-img {
        width: 120px;
        height: 60px;
    }

    .keyboard-marquee-name {
        font-size: 11px;
    }
}

/* Custom Rules Section */
.rules-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

@media (max-width: 768px) {
    .rules-section {
        grid-template-columns: 1fr;
    }
}

.rules-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.rules-image {
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.rules-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.rules-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Tooltip term with hover explanation */
.term-tooltip {
    position: relative;
    display: inline;
    cursor: help;
    transition: color var(--transition-fast);
}

.term-tooltip:hover {
    color: var(--color-primary);
}

.term-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text);
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.term-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Complex tooltip with bullet list */
.complex-tooltip::after {
    content: "Kanata supports:\A\A› tap-hold — tap for one key, hold for another\A› tap-dance — different actions by tap count\A› one-shot — modifier applies to next key only\A› sticky keys — toggle modifiers on/off\A› macros — multiple keys from one trigger\A› chords & layers — combos and key layouts";
    white-space: pre-line;
    text-align: left;
    min-width: 320px;
    line-height: 1.6;
}

/* Rules list */
.rules-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--spacing-sm);
}

.rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
    border: 1px solid var(--color-border-light);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    cursor: default;
}

.rule-chip:hover {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-color: var(--color-primary);
    color: var(--color-text);
    transform: translateY(-2px);
}

.rule-chip svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.rule-chip:hover svg {
    opacity: 1;
}

.rule-info-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 50%;
    color: var(--color-text-secondary);
    opacity: 0.5;
    transition: all 0.2s ease;
}

.rule-info-link svg {
    width: 14px;
    height: 14px;
}

.rule-info-link:hover {
    opacity: 1;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Mapping examples */
.mapping-examples {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.mapping-example {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-background-secondary) 40%, transparent);
    border: 1px solid var(--color-border-light);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.mapping-example:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mapping-key {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text);
    box-shadow: 0 2px 0 var(--color-border);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.mapping-example:hover .mapping-key {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--color-border);
}

.mapping-arrow {
    color: var(--color-text-secondary);
    font-size: 1.2em;
}

.mapping-result {
    color: var(--color-primary);
    font-weight: 500;
}

.mapping-type {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    opacity: 0.7;
}

/* Inspiration link */
.inspiration-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.inspiration-link:hover {
    color: var(--color-primary);
}

.inspiration-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.inspiration-link:hover svg {
    transform: translateX(2px) translateY(-2px);
}

/* --- Explained Two Ways Section (Tabbed Visualization) --- */

.explained-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.explained-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.explained-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.explained-header .subtitle {
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin-bottom: var(--spacing-lg);
}

/* Segmented Control */
.viz-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.viz-toggle-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.viz-toggle-hidden.revealed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.viz-toggle-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.viz-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.viz-toggle-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Visualization Panels */
.viz-panel {
    display: none;
}

.viz-panel.active {
    display: block;
}

/* Creator Section */
.creator-section {
    text-align: center;
    padding: 3rem 0;
}

.creator-section h2 {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.creator-card {
    display: inline-flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    max-width: 500px;
    text-align: left;
}

.creator-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    object-fit: cover;
}

.creator-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

.creator-bio {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

.creator-twitter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.creator-twitter:hover {
    color: #1DA1F2;
}

.twitter-icon {
    width: 16px;
    height: 16px;
}

/* --- Kanata Timeline Visualization Section --- */

.kanata-timeline-section {
    padding: 4rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline-header {
    text-align: center;
    margin-bottom: 48px;
}

.timeline-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.timeline-header .subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
}

.kanata-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .kanata-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Styling */
.kanata-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.3s ease;
    overflow: hidden;
}

.kanata-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.card-text h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    margin: 0 0 4px 0;
    text-decoration: none !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-icon {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

.card-text p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Visualization Base */
.kanata-viz {
    width: 100%;
    position: relative;
    padding: 10px 0;
}

.track {
    height: 48px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.kanata-card.in-view .track {
    opacity: 1;
    transform: translateY(0);
}

/* Block Base Styling */
.block {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 32px;
    padding: 0 8px;
    box-sizing: border-box;
    transform-origin: center left;
}

.block--blue { background: var(--color-primary); }
.block--purple { background: #5856D6; }
.block--green { background: #34C759; }
.block--orange { background: #FF9500; color: #000; }
.block--white { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); }
.block--hold { background: rgba(0, 122, 255, 0.6); }

/* Animation Keyframes */
@keyframes popIn {
    0% { transform: translateY(-50%) scale(0); opacity: 0; }
    60% { transform: translateY(-50%) scale(1.1); opacity: 1; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

@keyframes stretch {
    0% { width: 0; opacity: 0; transform: translateY(-50%); }
    100% { width: var(--target-width); opacity: 1; transform: translateY(-50%); }
}

@keyframes fadeOut {
    to { opacity: 0.3; filter: grayscale(100%); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); }
    50% { box-shadow: 0 0 0 6px rgba(255, 149, 0, 0.3); }
}

@keyframes trackGlow {
    0%, 100% { background: rgba(255, 255, 255, 0.06); }
    50% { background: rgba(0, 122, 255, 0.15); }
}

/* 1. Chord */
.kanata-card[data-viz="chord"] .block--chord-1 {
    left: 10%; width: 40px; z-index: 2; margin-top: -10px;
}
.kanata-card[data-viz="chord"] .block--chord-2 {
    left: 10%; width: 40px; z-index: 1; margin-top: 10px;
}
.kanata-card[data-viz="chord"] .chord-result {
    left: 30%; width: auto; padding: 0 12px;
}
.kanata-card.in-view[data-viz="chord"] .block {
    animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.kanata-card.in-view[data-viz="chord"] .block--chord-2 { animation-delay: 0.05s; }
.kanata-card.in-view[data-viz="chord"] .chord-result { animation-delay: 0.5s; }

/* 2. Layers */
.multi-track { display: flex; flex-direction: column; gap: 8px; }
.track-row { display: flex; align-items: center; gap: 10px; }
.track-label { font-size: 10px; font-family: monospace; color: rgba(255,255,255,0.4); width: 50px; text-align: right; }

.kanata-card[data-viz="layers"] .block--switch { left: 5%; width: 50px; }
.kanata-card[data-viz="layers"] .nav-key { width: 32px; }
.kanata-card[data-viz="layers"] .nav-1 { left: 35%; }
.kanata-card[data-viz="layers"] .nav-2 { left: 50%; }
.kanata-card[data-viz="layers"] .nav-3 { left: 65%; }
.kanata-card[data-viz="layers"] .layer-1 .track { opacity: 0.3; }

.kanata-card.in-view[data-viz="layers"] .block--switch {
    animation: popIn 0.4s forwards;
}
.kanata-card.in-view[data-viz="layers"] .layer-0 .track {
    animation: fadeOut 0.5s forwards 0.6s;
}
.kanata-card.in-view[data-viz="layers"] .layer-1 .track {
    transition: opacity 0.5s ease 0.6s;
    opacity: 1;
}
.kanata-card.in-view[data-viz="layers"] .nav-key {
    animation: popIn 0.3s forwards;
}
.kanata-card.in-view[data-viz="layers"] .nav-1 { animation-delay: 0.8s; }
.kanata-card.in-view[data-viz="layers"] .nav-2 { animation-delay: 1.0s; }
.kanata-card.in-view[data-viz="layers"] .nav-3 { animation-delay: 1.2s; }

/* 3. Tap-Hold */
.threshold-line {
    position: absolute; left: 30%; height: 100%; top: 0;
    border-left: 1px dashed rgba(255,255,255,0.3); z-index: 5;
}
.threshold-line span {
    position: absolute; top: -18px; left: 5px; font-size: 10px; color: rgba(255,255,255,0.5);
}
.kanata-card[data-viz="tap-hold"] .tap-block { left: 5%; width: 50px; }
.kanata-card[data-viz="tap-hold"] .hold-block {
    left: 5%; --target-width: 55%; width: 0;
}

.kanata-card.in-view[data-viz="tap-hold"] .tap-block {
    animation: popIn 0.3s forwards;
}
.kanata-card.in-view[data-viz="tap-hold"] .hold-block {
    animation: stretch 1.5s ease-out forwards 0.5s;
}

/* 4. Tap-Dance */
.kanata-card[data-viz="tap-dance"] .tap-1 { left: 5%; width: 32px; }
.kanata-card[data-viz="tap-dance"] .tap-2 { left: 18%; width: 32px; }
.kanata-card[data-viz="tap-dance"] .tap-3 { left: 31%; width: 32px; }
.kanata-card[data-viz="tap-dance"] .result-block { left: 50%; width: auto; padding: 0 12px; }
.count-badge {
    position: absolute; top: 3px; font-size: 10px; color: rgba(255,255,255,0.6); opacity: 0;
}
.badge-1 { left: 8%; } .badge-2 { left: 21%; } .badge-3 { left: 34%; }

.kanata-card.in-view[data-viz="tap-dance"] .tap-1 { animation: popIn 0.2s forwards 0s; }
.kanata-card.in-view[data-viz="tap-dance"] .badge-1 { animation: popIn 0.2s forwards 0.1s; }
.kanata-card.in-view[data-viz="tap-dance"] .tap-2 { animation: popIn 0.2s forwards 0.4s; }
.kanata-card.in-view[data-viz="tap-dance"] .badge-2 { animation: popIn 0.2s forwards 0.5s; }
.kanata-card.in-view[data-viz="tap-dance"] .tap-3 { animation: popIn 0.2s forwards 0.8s; }
.kanata-card.in-view[data-viz="tap-dance"] .badge-3 { animation: popIn 0.2s forwards 0.9s; }
.kanata-card.in-view[data-viz="tap-dance"] .result-block { animation: popIn 0.4s forwards 1.3s; }

/* 5. Leader */
.arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; color: rgba(255,255,255,0.5); opacity: 0; }
.kanata-card[data-viz="leader"] .leader-block { left: 5%; width: 40px; }
.kanata-card[data-viz="leader"] .arrow-1 { left: 18%; }
.kanata-card[data-viz="leader"] .seq-1 { left: 25%; width: 32px; }
.kanata-card[data-viz="leader"] .seq-2 { left: 38%; width: 32px; }
.kanata-card[data-viz="leader"] .result-out { left: 55%; width: auto; padding: 0 12px; }

.kanata-card.in-view[data-viz="leader"] .leader-block { animation: popIn 0.3s forwards, pulse 1.5s infinite 0.3s; }
.kanata-card.in-view[data-viz="leader"] .arrow-1 { animation: popIn 0.2s forwards 0.4s; }
.kanata-card.in-view[data-viz="leader"] .seq-1 { animation: popIn 0.2s forwards 0.6s; }
.kanata-card.in-view[data-viz="leader"] .seq-2 { animation: popIn 0.2s forwards 0.9s; }
.kanata-card.in-view[data-viz="leader"] .result-out { animation: popIn 0.4s forwards 1.2s; }

/* 6. Sequence */
.kanata-card[data-viz="sequence"] .seq-a { left: 5%; width: 32px; }
.kanata-card[data-viz="sequence"] .seq-b { left: 18%; width: 32px; }
.kanata-card[data-viz="sequence"] .seq-c { left: 31%; width: 32px; }
.kanata-card[data-viz="sequence"] .seq-result { left: 50%; width: auto; padding: 0 12px; }
.timing-bracket {
    position: absolute; bottom: 2px; left: 5%; width: 27%; height: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    border-left: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    opacity: 0;
}
.timing-bracket span {
    position: absolute; bottom: -16px; width: 100%; text-align: center; font-size: 9px; color: rgba(255,255,255,0.4);
}

.kanata-card.in-view[data-viz="sequence"] .seq-a { animation: popIn 0.2s forwards 0s; }
.kanata-card.in-view[data-viz="sequence"] .seq-b { animation: popIn 0.2s forwards 0.3s; }
.kanata-card.in-view[data-viz="sequence"] .seq-c { animation: popIn 0.2s forwards 0.6s; }
.kanata-card.in-view[data-viz="sequence"] .timing-bracket { animation: popIn 0.5s forwards 0s; }
.kanata-card.in-view[data-viz="sequence"] .seq-result { animation: popIn 0.3s forwards 1.0s; }

/* 7. One-Shot */
.kanata-card[data-viz="oneshot"] .osm-block { left: 5%; width: 52px; }
.kanata-card[data-viz="oneshot"] .osm-arrow { left: 24%; }
.kanata-card[data-viz="oneshot"] .osm-target { left: 32%; width: 32px; }
.kanata-card[data-viz="oneshot"] .osm-result { left: 48%; font-size: 20px; font-weight: bold; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); color: #fff; }

.kanata-card.in-view[data-viz="oneshot"] .osm-block { animation: popIn 0.3s forwards, fadeOut 0.5s forwards 1.2s; }
.kanata-card.in-view[data-viz="oneshot"] .osm-arrow { animation: popIn 0.2s forwards 0.4s; }
.kanata-card.in-view[data-viz="oneshot"] .osm-target { animation: popIn 0.3s forwards 0.8s; }
.kanata-card.in-view[data-viz="oneshot"] .osm-result { animation: popIn 0.3s forwards 1.0s; }

/* 8. Sticky */
.kanata-card[data-viz="sticky"] .sticky-mod { left: 5%; width: 36px; }
.kanata-card[data-viz="sticky"] .sticky-a { left: 20%; width: 32px; }
.kanata-card[data-viz="sticky"] .sticky-b { left: 33%; width: 32px; }
.kanata-card[data-viz="sticky"] .sticky-c { left: 46%; width: 32px; }
.kanata-card[data-viz="sticky"] .sticky-result { left: 62%; font-size: 14px; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.7); }
.sticky-glow { box-shadow: 0 0 12px rgba(255, 149, 0, 0.6); }

.kanata-card.in-view[data-viz="sticky"] .sticky-mod { animation: popIn 0.3s forwards, pulse 1s infinite 0.3s; }
.kanata-card.in-view[data-viz="sticky"] .sticky-a { animation: popIn 0.2s forwards 0.5s; }
.kanata-card.in-view[data-viz="sticky"] .sticky-b { animation: popIn 0.2s forwards 0.8s; }
.kanata-card.in-view[data-viz="sticky"] .sticky-c { animation: popIn 0.2s forwards 1.1s; }
.kanata-card.in-view[data-viz="sticky"] .sticky-result { animation: popIn 0.3s forwards 1.4s; }

/* 9. Macros */
.kanata-card[data-viz="macro"] .macro-trigger { left: 5%; width: 56px; }
.kanata-card[data-viz="macro"] .macro-out-1 { left: 30%; width: 32px; }
.kanata-card[data-viz="macro"] .macro-out-2 { left: 43%; width: 32px; }
.kanata-card[data-viz="macro"] .macro-out-3 { left: 56%; width: 32px; }
.kanata-card[data-viz="macro"] .macro-out-4 { left: 69%; width: 32px; }
.macro-arrow { position: absolute; left: 22%; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgba(255,255,255,0.4); opacity: 0; }

.kanata-card.in-view[data-viz="macro"] .macro-trigger { animation: popIn 0.4s forwards; }
.kanata-card.in-view[data-viz="macro"] .macro-arrow { animation: popIn 0.2s forwards 0.5s; }
.kanata-card.in-view[data-viz="macro"] .macro-out-1 { animation: popIn 0.2s forwards 0.7s; }
.kanata-card.in-view[data-viz="macro"] .macro-out-2 { animation: popIn 0.2s forwards 0.85s; }
.kanata-card.in-view[data-viz="macro"] .macro-out-3 { animation: popIn 0.2s forwards 1.0s; }
.kanata-card.in-view[data-viz="macro"] .macro-out-4 { animation: popIn 0.2s forwards 1.15s; }

/* 10. Caps-Word */
.kanata-card[data-viz="capsword"] .cw-trigger { left: 5%; width: 70px; }
.kanata-card[data-viz="capsword"] .cw-h { left: 30%; width: 28px; }
.kanata-card[data-viz="capsword"] .cw-e { left: 40%; width: 28px; }
.kanata-card[data-viz="capsword"] .cw-l { left: 50%; width: 28px; }
.kanata-card[data-viz="capsword"] .cw-l2 { left: 60%; width: 28px; }
.kanata-card[data-viz="capsword"] .cw-o { left: 70%; width: 28px; }
.kanata-card[data-viz="capsword"] .cw-space { left: 82%; width: 28px; }
.track-glow { animation: trackGlow 1s ease-in-out infinite; }

.kanata-card.in-view[data-viz="capsword"] .cw-trigger { animation: popIn 0.3s forwards; }
.kanata-card.in-view[data-viz="capsword"] .track { animation: trackGlow 1.5s ease-in-out 0.4s 3; }
.kanata-card.in-view[data-viz="capsword"] .cw-h { animation: popIn 0.15s forwards 0.5s; }
.kanata-card.in-view[data-viz="capsword"] .cw-e { animation: popIn 0.15s forwards 0.65s; }
.kanata-card.in-view[data-viz="capsword"] .cw-l { animation: popIn 0.15s forwards 0.8s; }
.kanata-card.in-view[data-viz="capsword"] .cw-l2 { animation: popIn 0.15s forwards 0.95s; }
.kanata-card.in-view[data-viz="capsword"] .cw-o { animation: popIn 0.15s forwards 1.1s; }
.kanata-card.in-view[data-viz="capsword"] .cw-space { animation: popIn 0.15s forwards 1.4s; }

/* 11. Fork/Switch */
.fork-container { position: relative; }
.fork-track { height: 32px; margin-bottom: 8px; }
.fork-label { position: absolute; left: 35%; top: -18px; font-size: 10px; color: rgba(255,255,255,0.5); opacity: 0; }
.kanata-card[data-viz="fork"] .fork-input { left: 5%; width: 32px; top: 50%; }
.kanata-card[data-viz="fork"] .fork-check { left: 30%; width: 60px; }
.kanata-card[data-viz="fork"] .fork-yes { left: 55%; width: 40px; }
.kanata-card[data-viz="fork"] .fork-no { left: 55%; width: 32px; }
.fork-paths { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fork-path { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.5); }
.fork-path .block { position: relative; transform: scale(0); top: auto; }

.kanata-card.in-view[data-viz="fork"] .fork-input { animation: popIn 0.3s forwards; }
.kanata-card.in-view[data-viz="fork"] .fork-label { animation: popIn 0.2s forwards 0.4s; }
.kanata-card.in-view[data-viz="fork"] .fork-check { animation: popIn 0.3s forwards 0.5s; }
.kanata-card.in-view[data-viz="fork"] .fork-yes { animation: popIn 0.3s forwards 0.9s; }
.kanata-card.in-view[data-viz="fork"] .fork-no { animation: popIn 0.3s forwards 0.9s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .block, .track, .arrow, .count-badge, .timing-bracket, .fork-label, .osm-result, .sticky-result, .macro-arrow {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(-50%) scale(1) !important;
    }
    .track {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .kanata-card[data-viz="tap-hold"] .hold-block {
        width: var(--target-width) !important;
    }
}

/* ============================================
   PIANO ROLL VISUALIZATION (Design #2)
   ============================================ */

:root {
    --pr-bg: #0d0d12;
    --pr-grid: rgba(255,255,255,0.06);
    --pr-key-white: #e8e8e8;
    --pr-key-black: #2a2a2e;
    --pr-playhead: #ff6b35;
    --pr-note-chord: #ff6b35;
    --pr-note-layer: #3b82f6;
    --pr-note-tap: #10b981;
    --pr-note-hold: #8b5cf6;
    --pr-note-leader: #f59e0b;
    --pr-note-seq: #ec4899;
    --pr-note-osm: #06b6d4;
    --pr-note-sticky: #84cc16;
    --pr-note-macro: #f43f5e;
    --pr-note-caps: #a855f7;
    --pr-note-fork: #14b8a6;
    --pr-duration: 2.5s;
}

.piano-roll-section {
    background: var(--pr-bg);
    padding: 64px 24px;
    margin: 48px 0;
    border-radius: 16px;
}

.piano-roll-section h2 {
    text-align: center;
    color: #fff;
    font-size: 1.75rem;
    margin-bottom: 8px;
}

.piano-roll-section .section-subtitle {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.95rem;
    margin-bottom: 48px;
}

.piano-roll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.pr-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    overflow: hidden;
}

.pr-card-text {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}

.pr-card-text h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-decoration: none !important;
    border-bottom: none !important;
}

.pr-card-text p {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin: 0;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Piano keys column */
.pr-keys {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pr-key {
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 9px;
    font-weight: 500;
    transition: background 0.15s;
}

.pr-key--white {
    background: var(--pr-key-white);
    color: #333;
}

.pr-key--black {
    background: var(--pr-key-black);
    color: #888;
    margin-left: 8px;
    width: calc(100% - 8px);
}

.pr-key.is-active {
    background: var(--pr-playhead) !important;
    color: #fff !important;
}

/* Note grid area */
.pr-grid {
    position: relative;
    background:
        linear-gradient(90deg, var(--pr-grid) 1px, transparent 1px),
        linear-gradient(0deg, var(--pr-grid) 1px, transparent 1px);
    background-size: 24px 22px;
    min-height: 88px;
    border-radius: 6px;
    overflow: hidden;
}

/* Playhead */
.pr-playhead {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--pr-playhead);
    box-shadow: 0 0 12px var(--pr-playhead), 0 0 24px var(--pr-playhead);
    opacity: 0;
    z-index: 10;
}

.pr-card.in-view .pr-playhead {
    animation: playheadSweep var(--pr-duration) ease-out forwards;
}

@keyframes playheadSweep {
    0% { left: 0; opacity: 1; }
    95% { left: 100%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Notes */
.pr-note {
    position: absolute;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pr-note--chord { background: var(--pr-note-chord); }
.pr-note--layer { background: var(--pr-note-layer); }
.pr-note--tap { background: var(--pr-note-tap); }
.pr-note--hold { background: var(--pr-note-hold); }
.pr-note--leader { background: var(--pr-note-leader); }
.pr-note--seq { background: var(--pr-note-seq); }
.pr-note--osm { background: var(--pr-note-osm); }
.pr-note--sticky { background: var(--pr-note-sticky); }
.pr-note--macro { background: var(--pr-note-macro); }
.pr-note--caps { background: var(--pr-note-caps); }
.pr-note--fork { background: var(--pr-note-fork); }

@keyframes noteAppear {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes noteGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 2px 16px rgba(255,255,255,0.3), 0 0 24px currentColor; }
}

/* Card-specific note positions and animations */

/* 1. Chords - simultaneous keys */
.pr-card[data-pr="chord"] .pr-note-1 { top: 2px; left: 10%; width: 60px; }
.pr-card[data-pr="chord"] .pr-note-2 { top: 24px; left: 10%; width: 60px; }
.pr-card[data-pr="chord"] .pr-note-3 { top: 46px; left: 10%; width: 60px; }
.pr-card[data-pr="chord"] .pr-note-out { top: 24px; left: 55%; width: 80px; }

.pr-card.in-view[data-pr="chord"] .pr-note-1,
.pr-card.in-view[data-pr="chord"] .pr-note-2,
.pr-card.in-view[data-pr="chord"] .pr-note-3 {
    animation: noteAppear 0.3s ease-out 0.3s forwards;
}
.pr-card.in-view[data-pr="chord"] .pr-note-out {
    animation: noteAppear 0.3s ease-out 0.8s forwards, noteGlow 0.6s ease-in-out 1s;
}

/* 2. Layers - stacked rows */
.pr-card[data-pr="layer"] .pr-note-base { top: 2px; left: 5%; width: 45px; }
.pr-card[data-pr="layer"] .pr-note-fn { top: 24px; left: 20%; width: 35px; }
.pr-card[data-pr="layer"] .pr-note-nav { top: 46px; left: 35%; width: 55px; }
.pr-card[data-pr="layer"] .pr-note-sym { top: 68px; left: 50%; width: 45px; }

.pr-card.in-view[data-pr="layer"] .pr-note-base { animation: noteAppear 0.25s ease-out 0.2s forwards; }
.pr-card.in-view[data-pr="layer"] .pr-note-fn { animation: noteAppear 0.25s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="layer"] .pr-note-nav { animation: noteAppear 0.25s ease-out 0.8s forwards; }
.pr-card.in-view[data-pr="layer"] .pr-note-sym { animation: noteAppear 0.25s ease-out 1.1s forwards; }

/* 3. Tap-Hold - short vs long note */
.pr-card[data-pr="tap-hold"] .pr-note-tap { top: 2px; left: 10%; width: 25px; }
.pr-card[data-pr="tap-hold"] .pr-note-hold { top: 46px; left: 10%; width: 120px; }
.pr-card[data-pr="tap-hold"] .pr-note-tap-out { top: 2px; left: 55%; width: 40px; }
.pr-card[data-pr="tap-hold"] .pr-note-hold-out { top: 46px; left: 65%; width: 50px; }

.pr-card.in-view[data-pr="tap-hold"] .pr-note-tap { animation: noteAppear 0.2s ease-out 0.3s forwards; }
.pr-card.in-view[data-pr="tap-hold"] .pr-note-tap-out { animation: noteAppear 0.2s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="tap-hold"] .pr-note-hold { animation: noteAppear 0.2s ease-out 0.8s forwards; }
.pr-card.in-view[data-pr="tap-hold"] .pr-note-hold-out { animation: noteAppear 0.2s ease-out 1.4s forwards; }

/* 4. Tap-Dance - rapid repeated taps */
.pr-card[data-pr="tap-dance"] .pr-note-t1 { top: 24px; left: 5%; width: 18px; }
.pr-card[data-pr="tap-dance"] .pr-note-t2 { top: 24px; left: 18%; width: 18px; }
.pr-card[data-pr="tap-dance"] .pr-note-t3 { top: 24px; left: 31%; width: 18px; }
.pr-card[data-pr="tap-dance"] .pr-note-out1 { top: 2px; left: 55%; width: 35px; }
.pr-card[data-pr="tap-dance"] .pr-note-out2 { top: 24px; left: 55%; width: 50px; }
.pr-card[data-pr="tap-dance"] .pr-note-out3 { top: 46px; left: 55%; width: 65px; }

.pr-card.in-view[data-pr="tap-dance"] .pr-note-t1 { animation: noteAppear 0.15s ease-out 0.2s forwards; }
.pr-card.in-view[data-pr="tap-dance"] .pr-note-t2 { animation: noteAppear 0.15s ease-out 0.4s forwards; }
.pr-card.in-view[data-pr="tap-dance"] .pr-note-t3 { animation: noteAppear 0.15s ease-out 0.6s forwards; }
.pr-card.in-view[data-pr="tap-dance"] .pr-note-out1 { animation: noteAppear 0.2s ease-out 0.35s forwards; }
.pr-card.in-view[data-pr="tap-dance"] .pr-note-out2 { animation: noteAppear 0.2s ease-out 0.55s forwards; }
.pr-card.in-view[data-pr="tap-dance"] .pr-note-out3 { animation: noteAppear 0.2s ease-out 0.75s forwards; }

/* 5. Leader Keys - sequence of notes */
.pr-card[data-pr="leader"] .pr-note-ldr { top: 24px; left: 5%; width: 30px; }
.pr-card[data-pr="leader"] .pr-note-seq1 { top: 24px; left: 25%; width: 22px; }
.pr-card[data-pr="leader"] .pr-note-seq2 { top: 24px; left: 40%; width: 22px; }
.pr-card[data-pr="leader"] .pr-note-action { top: 24px; left: 65%; width: 60px; }

.pr-card.in-view[data-pr="leader"] .pr-note-ldr { animation: noteAppear 0.2s ease-out 0.2s forwards, noteGlow 0.4s ease-in-out 0.3s; }
.pr-card.in-view[data-pr="leader"] .pr-note-seq1 { animation: noteAppear 0.15s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="leader"] .pr-note-seq2 { animation: noteAppear 0.15s ease-out 0.7s forwards; }
.pr-card.in-view[data-pr="leader"] .pr-note-action { animation: noteAppear 0.3s ease-out 1s forwards, noteGlow 0.5s ease-in-out 1.2s; }

/* 6. Sequences - chain of notes */
.pr-card[data-pr="seq"] .pr-note-s1 { top: 24px; left: 5%; width: 20px; }
.pr-card[data-pr="seq"] .pr-note-s2 { top: 24px; left: 18%; width: 20px; }
.pr-card[data-pr="seq"] .pr-note-s3 { top: 24px; left: 31%; width: 20px; }
.pr-card[data-pr="seq"] .pr-note-s4 { top: 24px; left: 44%; width: 20px; }
.pr-card[data-pr="seq"] .pr-note-expand { top: 24px; left: 70%; width: 50px; }

.pr-card.in-view[data-pr="seq"] .pr-note-s1 { animation: noteAppear 0.12s ease-out 0.2s forwards; }
.pr-card.in-view[data-pr="seq"] .pr-note-s2 { animation: noteAppear 0.12s ease-out 0.35s forwards; }
.pr-card.in-view[data-pr="seq"] .pr-note-s3 { animation: noteAppear 0.12s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="seq"] .pr-note-s4 { animation: noteAppear 0.12s ease-out 0.65s forwards; }
.pr-card.in-view[data-pr="seq"] .pr-note-expand { animation: noteAppear 0.3s ease-out 0.9s forwards, noteGlow 0.5s ease-in-out 1.1s; }

/* 7. One-Shot Modifiers */
.pr-card[data-pr="osm"] .pr-note-mod { top: 2px; left: 10%; width: 35px; }
.pr-card[data-pr="osm"] .pr-note-key { top: 46px; left: 30%; width: 25px; }
.pr-card[data-pr="osm"] .pr-note-combined { top: 24px; left: 60%; width: 55px; }

.pr-card.in-view[data-pr="osm"] .pr-note-mod { animation: noteAppear 0.2s ease-out 0.3s forwards; }
.pr-card.in-view[data-pr="osm"] .pr-note-key { animation: noteAppear 0.2s ease-out 0.6s forwards; }
.pr-card.in-view[data-pr="osm"] .pr-note-combined { animation: noteAppear 0.25s ease-out 0.9s forwards, noteGlow 0.4s ease-in-out 1.1s; }

/* 8. Sticky Keys */
.pr-card[data-pr="sticky"] .pr-note-stick { top: 2px; left: 10%; width: 25px; }
.pr-card[data-pr="sticky"] .pr-note-held { top: 24px; left: 10%; width: 100px; background: repeating-linear-gradient(90deg, var(--pr-note-sticky) 0px, var(--pr-note-sticky) 8px, transparent 8px, transparent 12px); }
.pr-card[data-pr="sticky"] .pr-note-k1 { top: 46px; left: 30%; width: 20px; }
.pr-card[data-pr="sticky"] .pr-note-k2 { top: 46px; left: 50%; width: 20px; }
.pr-card[data-pr="sticky"] .pr-note-k3 { top: 46px; left: 70%; width: 20px; }

.pr-card.in-view[data-pr="sticky"] .pr-note-stick { animation: noteAppear 0.2s ease-out 0.2s forwards; }
.pr-card.in-view[data-pr="sticky"] .pr-note-held { animation: noteAppear 0.3s ease-out 0.35s forwards; }
.pr-card.in-view[data-pr="sticky"] .pr-note-k1 { animation: noteAppear 0.15s ease-out 0.6s forwards; }
.pr-card.in-view[data-pr="sticky"] .pr-note-k2 { animation: noteAppear 0.15s ease-out 0.85s forwards; }
.pr-card.in-view[data-pr="sticky"] .pr-note-k3 { animation: noteAppear 0.15s ease-out 1.1s forwards; }

/* 9. Macros */
.pr-card[data-pr="macro"] .pr-note-trigger { top: 24px; left: 5%; width: 40px; }
.pr-card[data-pr="macro"] .pr-note-m1 { top: 2px; left: 45%; width: 18px; }
.pr-card[data-pr="macro"] .pr-note-m2 { top: 24px; left: 55%; width: 18px; }
.pr-card[data-pr="macro"] .pr-note-m3 { top: 46px; left: 65%; width: 18px; }
.pr-card[data-pr="macro"] .pr-note-m4 { top: 68px; left: 75%; width: 18px; }

.pr-card.in-view[data-pr="macro"] .pr-note-trigger { animation: noteAppear 0.25s ease-out 0.2s forwards, noteGlow 0.4s ease-in-out 0.3s; }
.pr-card.in-view[data-pr="macro"] .pr-note-m1 { animation: noteAppear 0.12s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="macro"] .pr-note-m2 { animation: noteAppear 0.12s ease-out 0.62s forwards; }
.pr-card.in-view[data-pr="macro"] .pr-note-m3 { animation: noteAppear 0.12s ease-out 0.74s forwards; }
.pr-card.in-view[data-pr="macro"] .pr-note-m4 { animation: noteAppear 0.12s ease-out 0.86s forwards; }

/* 10. Caps-Word */
.pr-card[data-pr="caps"] .pr-note-activate { top: 2px; left: 5%; width: 30px; }
.pr-card[data-pr="caps"] .pr-note-c1 { top: 24px; left: 20%; width: 16px; }
.pr-card[data-pr="caps"] .pr-note-c2 { top: 24px; left: 30%; width: 16px; }
.pr-card[data-pr="caps"] .pr-note-c3 { top: 24px; left: 40%; width: 16px; }
.pr-card[data-pr="caps"] .pr-note-c4 { top: 24px; left: 50%; width: 16px; }
.pr-card[data-pr="caps"] .pr-note-c5 { top: 24px; left: 60%; width: 16px; }
.pr-card[data-pr="caps"] .pr-note-space { top: 46px; left: 75%; width: 25px; }

.pr-card.in-view[data-pr="caps"] .pr-note-activate { animation: noteAppear 0.2s ease-out 0.2s forwards, noteGlow 0.4s ease-in-out 0.25s; }
.pr-card.in-view[data-pr="caps"] .pr-note-c1 { animation: noteAppear 0.1s ease-out 0.45s forwards; }
.pr-card.in-view[data-pr="caps"] .pr-note-c2 { animation: noteAppear 0.1s ease-out 0.55s forwards; }
.pr-card.in-view[data-pr="caps"] .pr-note-c3 { animation: noteAppear 0.1s ease-out 0.65s forwards; }
.pr-card.in-view[data-pr="caps"] .pr-note-c4 { animation: noteAppear 0.1s ease-out 0.75s forwards; }
.pr-card.in-view[data-pr="caps"] .pr-note-c5 { animation: noteAppear 0.1s ease-out 0.85s forwards; }
.pr-card.in-view[data-pr="caps"] .pr-note-space { animation: noteAppear 0.15s ease-out 1s forwards; }

/* 11. Fork/Switch */
.pr-card[data-pr="fork"] .pr-note-input { top: 24px; left: 5%; width: 25px; }
.pr-card[data-pr="fork"] .pr-note-check { top: 24px; left: 30%; width: 40px; }
.pr-card[data-pr="fork"] .pr-note-yes { top: 2px; left: 65%; width: 45px; }
.pr-card[data-pr="fork"] .pr-note-no { top: 46px; left: 65%; width: 35px; }
.pr-card[data-pr="fork"] .fork-arrow-up,
.pr-card[data-pr="fork"] .fork-arrow-down {
    position: absolute;
    left: 55%;
    font-size: 12px;
    opacity: 0;
}
.pr-card[data-pr="fork"] .fork-arrow-up { top: 6px; }
.pr-card[data-pr="fork"] .fork-arrow-down { top: 50px; }

.pr-card.in-view[data-pr="fork"] .pr-note-input { animation: noteAppear 0.2s ease-out 0.2s forwards; }
.pr-card.in-view[data-pr="fork"] .pr-note-check { animation: noteAppear 0.25s ease-out 0.5s forwards; }
.pr-card.in-view[data-pr="fork"] .fork-arrow-up,
.pr-card.in-view[data-pr="fork"] .fork-arrow-down { animation: noteAppear 0.15s ease-out 0.8s forwards; }
.pr-card.in-view[data-pr="fork"] .pr-note-yes { animation: noteAppear 0.2s ease-out 1s forwards; }
.pr-card.in-view[data-pr="fork"] .pr-note-no { animation: noteAppear 0.2s ease-out 1s forwards; }

/* Piano Roll reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pr-playhead {
        display: none;
    }
    .pr-note {
        opacity: 1 !important;
        transform: scale(1) !important;
        animation: none !important;
    }
}

/* ============================================
   DESIGN #3: RECIPE CARDS (Cookbook Style)
   ============================================ */

.recipe-section {
    background: linear-gradient(135deg, #FDF6E3 0%, #FAF3E0 100%);
    padding: 64px 24px;
    margin: 48px 0;
    border-radius: 16px;
    color: #333; /* Force dark text on light background */
}

.recipe-section h2 {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #2c3e50 !important;
    margin-bottom: 8px;
}

.recipe-section .section-subtitle {
    text-align: center;
    font-family: 'Lora', serif;
    font-style: italic;
    color: #555 !important;
    font-size: 1rem;
    margin-bottom: 48px;
}

.recipe-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.recipe-card {
    background-color: #FAFAF8;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #EAEAEA;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.recipe-card.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.recipe-header {
    padding: 20px 24px;
    background: #FDF6E3;
    border-bottom: 1px dashed #D4D4D4;
}

.recipe-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #2c3e50 !important;
    margin: 0 0 6px 0;
}

.recipe-tagline {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #555 !important;
    font-size: 0.9rem;
    margin: 0;
}

.recipe-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 24px;
    gap: 20px;
}

.recipe-col h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666 !important;
    margin: 0 0 12px 0;
    border-bottom: 2px solid #E07A5F;
    display: inline-block;
    padding-bottom: 4px;
}

.ingredient-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ingredient-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #444 !important;
}

.key-pill {
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
    border: 1px solid #ccc;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    color: #333 !important;
    box-shadow: 0 2px 0 #bbb;
    display: inline-block;
    transition: transform 0.1s;
}

.key-pill:active {
    transform: translateY(2px);
    box-shadow: none;
}

.method-text {
    font-size: 0.9rem;
    color: #444 !important;
    line-height: 1.5;
    margin: 0;
}

.recipe-yields {
    padding: 0 24px 24px;
    text-align: center;
}

.yield-box {
    background: #fff;
    border: 2px solid #333;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #222 !important;
}

.chef-tip {
    font-family: 'Caveat', cursive;
    color: #C65A45 !important;
    font-size: 1.1rem;
    background: #fff8f0;
    padding: 8px 12px;
    border-radius: 4px;
    transform: rotate(-1deg);
    display: inline-block;
}

/* Recipe Cards reduced motion */
@media (prefers-reduced-motion: reduce) {
    .recipe-card {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   DESIGN #4: COMIC BOOK PANELS
   ============================================ */

.comic-section {
    background-color: #f9f7f1;
    background-image: radial-gradient(#e0e0e0 15%, transparent 16%);
    background-size: 10px 10px;
    padding: 64px 24px;
    margin: 48px 0;
    border-radius: 16px;
}

.comic-section h2 {
    text-align: center;
    font-family: 'Bangers', cursive;
    font-size: 2.5rem;
    color: #E63946;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 8px;
}

.comic-section .section-subtitle {
    text-align: center;
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 48px;
}

.comic-strip {
    max-width: 1000px;
    margin: 0 auto 48px auto;
}

.comic-strip:last-child {
    margin-bottom: 0;
}

.comic-title {
    font-family: 'Bangers', cursive;
    font-size: 2rem;
    color: #E63946;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 16px;
    text-align: center;
}

.panels-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .panels-container {
        grid-template-columns: 1fr;
    }
}

.panel {
    background: #fff;
    border: 4px solid #000;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
    transition: transform 0.3s;
    opacity: 0;
    transform: translateX(-20px);
}

.panel.in-view {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel:hover {
    z-index: 10;
    transform: scale(1.02) rotate(1deg);
}

.caption-box {
    position: absolute;
    top: 0;
    left: 0;
    background: #F4D35E;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    z-index: 5;
}

.comic-key {
    width: 56px;
    height: 56px;
    background: #fff;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 1.3rem;
    box-shadow: 4px 4px 0 #000;
    margin: 4px;
}

.comic-key.pressed {
    transform: translateY(4px);
    box-shadow: 0 0 0 #000;
    background: #eee;
}

.comic-key.active {
    background: #E63946;
    color: #fff;
    border-color: #000;
}

.comic-key.wide {
    width: 90px;
}

.sfx {
    font-family: 'Bangers', cursive;
    position: absolute;
    font-size: 3rem;
    color: #E63946;
    text-shadow: 2px 2px 0 #000;
    transform: rotate(-15deg);
    z-index: 6;
    pointer-events: none;
    opacity: 0;
}

.sfx.in-view {
    opacity: 1;
    animation: comicPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes comicPop {
    0% { transform: scale(0) rotate(-15deg); }
    80% { transform: scale(1.2) rotate(-15deg); }
    100% { transform: scale(1) rotate(-15deg); }
}

.speech-bubble {
    background: #fff;
    border: 2px solid #000;
    border-radius: 20px;
    padding: 10px 16px;
    position: absolute;
    bottom: 16px;
    font-size: 0.85rem;
    text-align: center;
    max-width: 85%;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg) translateX(-50%);
}

.scene-setup, .scene-action {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.action-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(from 0deg, rgba(0,0,0,0) 0deg 20deg, rgba(255,255,0,0.2) 20deg 30deg);
    z-index: 0;
}

.comic-result {
    font-size: 4rem;
    font-weight: 900;
    color: #E63946;
}

.comic-key.faded {
    border: 3px dashed #000;
    opacity: 0.3;
}

/* Comic Panels reduced motion */
@media (prefers-reduced-motion: reduce) {
    .panel {
        opacity: 1;
        transform: none;
    }
    .sfx {
        opacity: 1;
        animation: none;
    }
}

/* ============================================
   DESIGN #5: CHAT BUBBLES (Messaging UI)
   ============================================ */

.chat-section {
    background: #f5f5f7;
    padding: 64px 24px;
    margin: 48px 0;
    border-radius: 16px;
}

.chat-section h2 {
    text-align: center;
    font-size: 1.75rem;
    color: #000;
    margin-bottom: 8px;
}

.chat-section .section-subtitle {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 48px;
}

.chat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.chat-ui-container {
    border: 1px solid #d1d1d6;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.chat-header {
    background: #f5f5f7;
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid #e5e5ea;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.chat-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
    background: #fff;
}

.chat-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95rem;
    position: relative;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
}

.chat-message.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.chat-message.user {
    align-self: flex-end;
    background-color: #007AFF;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.keyboard {
    align-self: flex-start;
    background-color: #E5E5EA;
    color: #000;
    border-bottom-left-radius: 4px;
}

.kbd-inline {
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85em;
    border: 1px solid rgba(255,255,255,0.3);
}

.chat-message.keyboard .kbd-inline {
    background: #fff;
    border: 1px solid #ccc;
}

.chat-status {
    font-size: 0.7rem;
    color: #8e8e93;
    margin-top: -6px;
    align-self: flex-end;
    opacity: 0;
}

.chat-status.in-view {
    opacity: 1;
    transition: opacity 0.5s ease 0.3s;
}

.typing-indicator {
    display: none;
    gap: 4px;
    padding: 12px 16px;
    background: #E5E5EA;
    border-radius: 18px;
    align-self: flex-start;
    width: fit-content;
    border-bottom-left-radius: 4px;
}

.typing-indicator.active {
    display: flex;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: #8e8e93;
    border-radius: 50%;
    animation: typingPulse 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingPulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Chat Bubbles reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chat-message {
        opacity: 1;
        transform: none;
    }
    .chat-status {
        opacity: 1;
    }
    .typing-indicator {
        display: none !important;
    }
}

/* ==============================================================
   DESIGN #6: MINIMAL GEOMETRIC (Apple-style)
   ============================================================== */

.geometric-section {
    padding: 80px 24px;
    background: linear-gradient(180deg, #FBFBFD 0%, #F5F5F7 100%);
    --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Compact version for docs/migration pages */
.geometric-section-compact {
    padding: 40px 0;
    background: transparent;
    border-radius: 16px;
    margin: 2rem 0;
}

.geometric-section-compact .geometric-grid {
    gap: 16px;
}

.geometric-section-compact .geo-card {
    padding: 16px;
}

.geometric-section-compact .geo-card svg {
    height: 100px;
}

.geometric-section-compact .geo-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.geometric-section-compact .geo-card p {
    font-size: 13px;
    line-height: 1.4;
}

.geometric-section h2 {
    text-align: center;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.geometric-section .section-subtitle {
    text-align: center;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 21px;
    color: #86868B;
    margin-bottom: 64px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.geometric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.geo-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
    position: relative;
    overflow: hidden;
}

.geo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.geo-card svg {
    display: block;
    width: 100%;
    height: 160px;
    margin-bottom: 24px;
}

.geo-card h3 {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.geo-card p {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    color: #86868B;
    line-height: 1.5;
    margin: 0;
}

/* SVG Element Styles */
.geo-key {
    fill: #F5F5F7;
    stroke: #D2D2D7;
    stroke-width: 2;
    transition: all 0.3s var(--ease-apple);
}

.geo-key.active {
    fill: #0071E3;
    stroke: #0077ED;
}

.geo-key-label {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    fill: #1D1D1F;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.3s var(--ease-apple);
}

.geo-key.active + .geo-key-label,
.geo-key.active ~ .geo-key-label {
    fill: #FFFFFF;
}

.geo-arrow {
    stroke: #0071E3;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.6s var(--ease-apple);
}

.geo-card.animating .geo-arrow {
    stroke-dashoffset: 0;
}

.geo-ripple {
    fill: none;
    stroke: #0071E3;
    stroke-width: 2;
    opacity: 0;
    transform-origin: center;
}

.geo-card.animating .geo-ripple {
    animation: geoRipple 1.2s var(--ease-apple) forwards;
}

@keyframes geoRipple {
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.geo-halo {
    fill: rgba(0, 113, 227, 0.1);
    opacity: 0;
    transition: opacity 0.4s var(--ease-apple);
}

.geo-card.animating .geo-halo {
    opacity: 1;
}

/* Specific card animations */
.geo-card[data-feature="tap-hold"] .geo-progress {
    stroke: #0071E3;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
}

.geo-card[data-feature="tap-hold"].animating .geo-progress {
    animation: geoProgress 0.8s var(--ease-apple) forwards;
}

@keyframes geoProgress {
    to { stroke-dashoffset: 0; }
}

.geo-card[data-feature="layers"] .geo-layer {
    fill: #F5F5F7;
    stroke: #D2D2D7;
    stroke-width: 1.5;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s var(--ease-apple);
}

.geo-card[data-feature="layers"].animating .geo-layer:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.geo-card[data-feature="layers"].animating .geo-layer:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.geo-card[data-feature="layers"].animating .geo-layer:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    fill: #0071E3;
    stroke: #0077ED;
    transition-delay: 0.2s;
}

.geo-card[data-feature="one-shot"] .geo-timer-ring {
    fill: none;
    stroke: #E8E8ED;
    stroke-width: 4;
}

.geo-card[data-feature="one-shot"] .geo-timer-fill {
    fill: none;
    stroke: #0071E3;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    transform: rotate(-90deg);
    transform-origin: center;
}

.geo-card[data-feature="one-shot"].animating .geo-timer-fill {
    animation: geoTimer 1s var(--ease-apple) forwards, geoTimerFade 0.3s 1s var(--ease-apple) forwards;
}

@keyframes geoTimer {
    to { stroke-dashoffset: 0; }
}

@keyframes geoTimerFade {
    to { stroke: #34C759; }
}

.geo-card[data-feature="combos"] .geo-plus {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 300;
    fill: #86868B;
    text-anchor: middle;
    dominant-baseline: central;
}

.geo-card[data-feature="combos"] .geo-equals {
    stroke: #0071E3;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0;
}

.geo-card[data-feature="combos"].animating .geo-equals {
    animation: geoEquals 0.4s 0.6s var(--ease-apple) forwards;
}

@keyframes geoEquals {
    to { opacity: 1; }
}

.geo-card[data-feature="caps-word"] .geo-text {
    font-family: 'SF Mono', SFMono-Regular, monospace;
    font-size: 16px;
    fill: #1D1D1F;
    text-anchor: middle;
}

.geo-card[data-feature="caps-word"].animating .geo-text {
    animation: geoCapsWord 2s steps(1) infinite;
}

@keyframes geoCapsWord {
    0%, 100% { fill: #1D1D1F; }
    50% { fill: #0071E3; }
}

.geo-card[data-feature="mouse-keys"] .geo-cursor {
    fill: #1D1D1F;
    transform: translate(80px, 80px);
    transition: transform 1.2s var(--ease-apple);
}

.geo-card[data-feature="mouse-keys"].animating .geo-cursor {
    transform: translate(160px, 100px);
}

.geo-card[data-feature="mouse-keys"] .geo-trail {
    stroke: #0071E3;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    opacity: 0.4;
}

.geo-card[data-feature="mouse-keys"].animating .geo-trail {
    animation: geoTrail 1.2s var(--ease-apple) forwards;
}

@keyframes geoTrail {
    to { stroke-dashoffset: 0; }
}

.geo-card[data-feature="sequences"] .geo-seq-key {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s var(--ease-apple);
}

.geo-card[data-feature="sequences"].animating .geo-seq-key:nth-child(1) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

.geo-card[data-feature="sequences"].animating .geo-seq-key:nth-child(2) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}

.geo-card[data-feature="sequences"].animating .geo-seq-key:nth-child(3) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.4s;
}

.geo-card[data-feature="sequences"].animating .geo-seq-key:nth-child(4) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.6s;
}

.geo-card[data-feature="macros"] .geo-macro-step {
    fill: #F5F5F7;
    stroke: #D2D2D7;
    stroke-width: 1.5;
    opacity: 0;
    transform: translateX(-20px);
}

.geo-card[data-feature="macros"].animating .geo-macro-step {
    animation: geoMacroStep 0.4s var(--ease-apple) forwards;
}

.geo-card[data-feature="macros"].animating .geo-macro-step:nth-child(1) { animation-delay: 0s; }
.geo-card[data-feature="macros"].animating .geo-macro-step:nth-child(2) { animation-delay: 0.15s; }
.geo-card[data-feature="macros"].animating .geo-macro-step:nth-child(3) { animation-delay: 0.3s; }
.geo-card[data-feature="macros"].animating .geo-macro-step:nth-child(4) { animation-delay: 0.45s; }

@keyframes geoMacroStep {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.geo-card[data-feature="app-specific"] .geo-app-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s var(--ease-apple);
}

.geo-card[data-feature="app-specific"].animating .geo-app-icon {
    opacity: 1;
    transform: scale(1);
}

.geo-card[data-feature="app-specific"] .geo-app-ring {
    fill: none;
    stroke: #0071E3;
    stroke-width: 2;
    stroke-dasharray: 4 4;
    opacity: 0;
}

.geo-card[data-feature="app-specific"].animating .geo-app-ring {
    animation: geoAppRing 0.6s 0.3s var(--ease-apple) forwards;
}

@keyframes geoAppRing {
    to { opacity: 1; }
}

.geo-card[data-feature="live-reload"] .geo-reload-arrow {
    fill: none;
    stroke: #0071E3;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
}

.geo-card[data-feature="live-reload"].animating .geo-reload-arrow {
    animation: geoReload 1s var(--ease-apple) infinite;
}

@keyframes geoReload {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Home Row Mods, Vim Nav, Custom Rules animations */

.geo-card[data-feature="home-row-mods"] .geo-hrm-dot {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s var(--ease-apple);
}

.geo-card[data-feature="home-row-mods"].animating .geo-hrm-dot:nth-child(5) { opacity: 1; transform: scale(1); transition-delay: 0.1s; }
.geo-card[data-feature="home-row-mods"].animating .geo-hrm-dot:nth-child(6) { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.geo-card[data-feature="home-row-mods"].animating .geo-hrm-dot:nth-child(7) { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
.geo-card[data-feature="home-row-mods"].animating .geo-hrm-dot:nth-child(8) { opacity: 1; transform: scale(1); transition-delay: 0.4s; }

.geo-card[data-feature="vim-nav"] text[fill="#0071E3"] {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s var(--ease-apple);
}

.geo-card[data-feature="vim-nav"].animating text[fill="#0071E3"]:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.geo-card[data-feature="vim-nav"].animating text[fill="#0071E3"]:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.geo-card[data-feature="vim-nav"].animating text[fill="#0071E3"]:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.geo-card[data-feature="vim-nav"].animating text[fill="#0071E3"]:nth-of-type(4) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.geo-card[data-feature="custom-rules"] rect[fill="#FF9500"],
.geo-card[data-feature="custom-rules"] rect[fill="#5856D6"] {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s var(--ease-apple);
}

.geo-card[data-feature="custom-rules"].animating rect[fill="#FF9500"] {
    opacity: 0.2;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.geo-card[data-feature="custom-rules"].animating rect[fill="#5856D6"] {
    opacity: 0.2;
    transform: translateX(0);
    transition-delay: 0.35s;
}

/* KeyPath-specific feature animations */

.geo-card[data-feature="launch-app"] .geo-app-icon rect {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s var(--ease-apple);
}

.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 0.1s; }
.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 0.25s; }
.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(5) { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
.geo-card[data-feature="launch-app"].animating .geo-app-icon rect:nth-child(6) { opacity: 1; transform: scale(1); transition-delay: 0.35s; }

.geo-card[data-feature="open-url"] .geo-app-icon {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s var(--ease-apple);
}

.geo-card[data-feature="open-url"].animating .geo-app-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}

.geo-card[data-feature="window-snap"] .geo-window-left {
    opacity: 0;
    transition: opacity 0.4s var(--ease-apple);
}

.geo-card[data-feature="window-snap"].animating .geo-window-left {
    opacity: 0.3;
}

.geo-card[data-feature="window-snap"] .geo-snap-arrows {
    opacity: 0;
    transition: opacity 0.3s var(--ease-apple);
}

.geo-card[data-feature="window-snap"].animating .geo-snap-arrows {
    opacity: 1;
    animation: geoSnapPulse 1.5s var(--ease-apple) infinite;
}

@keyframes geoSnapPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.geo-card[data-feature="multi-display"] .geo-moving-window {
    transform: translateX(0);
    transition: transform 0.8s var(--ease-apple);
}

.geo-card[data-feature="multi-display"].animating .geo-moving-window {
    transform: translateX(140px);
}

.geo-card[data-feature="spaces"] .geo-space-window {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.6s var(--ease-apple);
}

.geo-card[data-feature="spaces"].animating .geo-space-window {
    opacity: 0.8;
    transform: translateX(0);
    transition-delay: 0.3s;
}

.geo-card[data-feature="notify"] .geo-notification {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s var(--ease-apple);
}

.geo-card[data-feature="notify"].animating .geo-notification {
    opacity: 1;
    transform: translateY(0);
}

.geo-card[data-feature="deep-link"] .geo-external-apps rect,
.geo-card[data-feature="deep-link"] .geo-external-apps circle {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s var(--ease-apple);
}

.geo-card[data-feature="deep-link"].animating .geo-external-apps rect:nth-of-type(1),
.geo-card[data-feature="deep-link"].animating .geo-external-apps path:nth-of-type(1) { opacity: 1; transform: scale(1); transition-delay: 0s; }
.geo-card[data-feature="deep-link"].animating .geo-external-apps rect:nth-of-type(2),
.geo-card[data-feature="deep-link"].animating .geo-external-apps circle { opacity: 1; transform: scale(1); transition-delay: 0.1s; }
.geo-card[data-feature="deep-link"].animating .geo-external-apps rect:nth-of-type(3),
.geo-card[data-feature="deep-link"].animating .geo-external-apps text { opacity: 1; transform: scale(1); transition-delay: 0.2s; }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .geometric-section {
        background: linear-gradient(180deg, #1D1D1F 0%, #000000 100%);
    }

    .geometric-section h2 {
        color: #F5F5F7;
    }

    .geometric-section .section-subtitle {
        color: #86868B;
    }

    .geo-card {
        background: #2C2C2E;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .geo-card:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }

    .geo-card h3 {
        color: #F5F5F7;
    }

    .geo-key {
        fill: #3A3A3C;
        stroke: #48484A;
    }

    .geo-key-label {
        fill: #F5F5F7;
    }

    .geo-card[data-feature="one-shot"] .geo-timer-ring {
        stroke: #3A3A3C;
    }

    .geo-card[data-feature="layers"] .geo-layer {
        fill: #3A3A3C;
        stroke: #48484A;
    }

    .geo-card[data-feature="caps-word"] .geo-text {
        fill: #F5F5F7;
    }

    .geo-card[data-feature="mouse-keys"] .geo-cursor {
        fill: #F5F5F7;
    }

    .geo-card[data-feature="macros"] .geo-macro-step {
        fill: #3A3A3C;
        stroke: #48484A;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .geo-card {
        transition: none;
    }

    .geo-card:hover {
        transform: none;
    }

    .geo-card.animating .geo-arrow,
    .geo-card.animating .geo-ripple,
    .geo-card.animating .geo-progress,
    .geo-card.animating .geo-timer-fill,
    .geo-card.animating .geo-equals,
    .geo-card.animating .geo-cursor,
    .geo-card.animating .geo-trail,
    .geo-card.animating .geo-seq-key,
    .geo-card.animating .geo-macro-step,
    .geo-card.animating .geo-app-icon,
    .geo-card.animating .geo-app-ring,
    .geo-card.animating .geo-reload-arrow {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* ==========================================================================
   Home Row Mods Section
   ========================================================================== */

.hrm-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--color-background);
    position: relative;
    overflow: hidden;
}

/* Breathing gold glow for HRM section */
.hrm-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(255, 204, 0, 0.10), transparent);
    animation: hrm-glow-breathe 14s ease-in-out infinite;
    z-index: 0;
}

@keyframes hrm-glow-breathe {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.06);
    }
}

.hrm-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    max-width: 900px;
}

.hrm-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.hrm-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Keyboard Demo */
.hrm-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    margin-bottom: var(--spacing-3xl);
}

.hrm-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Output display - terminal style */
.hrm-output {
    background: #1C1C1E;
    border-radius: 8px;
    padding: 12px 20px;
    min-width: 240px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 20px;
    color: #34C759;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hrm-output-text {
    letter-spacing: 0.05em;
    transition: color 0.1s ease;
}

.hrm-output-cursor {
    animation: hrm-blink 1s step-end infinite;
    margin-left: 1px;
}

@keyframes hrm-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Shortcut triggered state - distinct from typing */
.hrm-output.shortcut {
    background: linear-gradient(135deg, #1a2a3a 0%, #1C1C1E 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(90, 200, 250, 0.15);
}

.hrm-output.shortcut .hrm-output-text {
    color: #5AC8FA;
    text-shadow: 0 0 10px rgba(90, 200, 250, 0.5);
}

/* Flash effect when shortcut is triggered */
.hrm-output.shortcut-flash {
    animation: hrm-shortcut-flash 0.3s ease-out;
}

@keyframes hrm-shortcut-flash {
    0% {
        background: linear-gradient(135deg, #2a4a6a 0%, #1a3a5a 100%);
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(90, 200, 250, 0.4);
    }
    100% {
        background: linear-gradient(135deg, #1a2a3a 0%, #1C1C1E 100%);
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(90, 200, 250, 0.15);
    }
}

/* Holding state - shows when modifiers are being held */
.hrm-output.holding {
    background: linear-gradient(135deg, #2a3a2a 0%, #1C1C1E 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 204, 0, 0.2);
}

.hrm-output.holding .hrm-output-text {
    color: #FFCC00;
    font-size: 24px;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
    animation: hrm-holding-pulse 0.8s ease-in-out infinite;
}

@keyframes hrm-holding-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Shortcut badge/label */
.hrm-output-badge {
    display: none;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5AC8FA;
    background: rgba(90, 200, 250, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(90, 200, 250, 0.3);
    flex-shrink: 0;
    white-space: nowrap;
}

.hrm-output.shortcut .hrm-output-badge {
    display: inline-block;
}

/* Hide badge while holding - only show when shortcut is triggered */
.hrm-output.shortcut.holding .hrm-output-badge {
    display: none;
}

.hrm-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #E8E8ED 0%, #D8D8DD 100%);
    border-radius: 12px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hrm-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.hrm-key {
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F2 100%);
    border: 1px solid #C8C8CA;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-text);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.08s ease-out;
    cursor: pointer;
    user-select: none;
}

.hrm-key:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8E8EA 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 3px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hrm-key:active {
    transform: translateY(2px);
}

.hrm-key-letter {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1;
    transition: all 0.08s ease-out;
}

.hrm-key-mod-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    opacity: 0.6;
    line-height: 1;
    transition: all 0.08s ease-out;
}

/* Key pressed state - quick tap */
.hrm-key.pressed {
    transform: translateY(2px);
    background: linear-gradient(180deg, #E8E8EA 0%, #DCDCDE 100%);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Key held state - modifier active */
.hrm-key.held {
    transform: translateY(2px);
    background: linear-gradient(180deg, #007AFF 0%, #0051D5 100%);
    border-color: #0051D5;
    box-shadow:
        0 0 12px rgba(0, 122, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hrm-key.held .hrm-key-letter {
    color: white;
    opacity: 0.6;
    transform: scale(0.85);
}

.hrm-key.held .hrm-key-mod-label {
    color: white;
    opacity: 1;
    font-size: 14px;
    font-weight: 600;
}

/* Demo mode label */
.hrm-demo-label {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrm-demo-mode {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hrm-demo-mode.visible {
    opacity: 1;
}

/* Benefits */
.hrm-explanation {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.hrm-benefit {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--spacing-md);
    align-items: center;
}

.hrm-benefit-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.hrm-benefit-icon svg {
    width: 20px;
    height: 20px;
}

.hrm-benefit-text h4 {
    font-family: var(--font-text);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.hrm-benefit-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Comparison Section */
.hrm-comparison {
    text-align: center;
}

.hrm-comparison h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.hrm-comparison-intro {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hrm-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.hrm-compare-card {
    background: var(--color-background-secondary);
    border-radius: 16px;
    padding: var(--spacing-lg);
    text-align: left;
    border: 1px solid var(--color-border-light);
}

.hrm-compare-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.hrm-compare-label {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.hrm-compare-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(0, 122, 255, 0.1);
    padding: 2px 8px;
    border-radius: 100px;
}

.hrm-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hrm-compare-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.hrm-compare-list svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.hrm-compare-con svg {
    color: var(--color-error);
}

.hrm-compare-pro svg {
    color: var(--color-success);
}

/* KeyPath card highlight */
.hrm-compare-keypath {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 122, 255, 0.02) 100%);
    border-color: rgba(0, 122, 255, 0.2);
}

.hrm-cta-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Learn more inline link */
.hrm-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.hrm-learn-more:hover {
    color: var(--color-primary);
}

.hrm-learn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Tooltip styles */
.hrm-has-tooltip {
    position: relative;
}

.hrm-has-tooltip > svg {
    flex-shrink: 0;
}

.hrm-tooltip-trigger {
    cursor: help;
    flex: 1;
}

.hrm-tooltip-trigger code {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
    background: rgba(0, 122, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--color-primary);
}

.hrm-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    width: 280px;
    padding: 12px;
    background: #1C1C1E;
    color: #F5F5F7;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.hrm-tooltip code {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 0.95em;
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    color: #5AC8FA;
}

.hrm-tooltip em {
    color: #FFD60A;
    font-style: normal;
    font-weight: 500;
}

.hrm-has-tooltip:hover .hrm-tooltip {
    display: block;
}

/* Tooltip arrow */
.hrm-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #1C1C1E;
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .hrm-keyboard {
        background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .hrm-key {
        background: linear-gradient(180deg, #3A3A3C 0%, #2C2C2E 100%);
        border-color: #48484A;
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .hrm-key-letter {
        color: #F5F5F7;
    }

    .hrm-key-mod-label {
        color: #98989D;
    }

    .hrm-key:hover {
        background: linear-gradient(180deg, #48484A 0%, #3A3A3C 100%);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .hrm-key.pressed {
        background: linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%);
    }

    .hrm-compare-card {
        background: #1C1C1E;
        border-color: #38383A;
    }

    .hrm-compare-keypath {
        background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 122, 255, 0.05) 100%);
        border-color: rgba(0, 122, 255, 0.3);
    }

    .hrm-compare-badge {
        background: rgba(0, 122, 255, 0.2);
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .hrm-section {
        padding: var(--spacing-2xl) var(--spacing-md);
        min-height: auto;
    }

    .hrm-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .hrm-comparison-grid {
        grid-template-columns: 1fr;
    }

    .hrm-key {
        width: 56px;
        height: 56px;
    }

    .hrm-key-letter {
        font-size: 18px;
    }

    .hrm-key-mod-label {
        font-size: 10px;
    }

    .hrm-output {
        min-width: 220px;
        font-size: 18px;
        padding: 10px 16px;
        gap: 8px;
    }

    .hrm-output-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .hrm-demo-mode {
        font-size: 13px;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .hrm-section {
        padding: var(--spacing-xl) var(--spacing-sm);
        min-height: auto;
    }

    /* Larger touch targets on mobile - minimum 44px */
    .hrm-key {
        width: 64px;
        height: 64px;
        border-radius: 10px;
    }

    .hrm-keyboard {
        padding: 12px 16px;
        gap: 8px;
    }

    .hrm-row {
        gap: 8px;
    }

    .hrm-key-letter {
        font-size: 20px;
    }

    .hrm-key-mod-label {
        font-size: 11px;
    }

    .hrm-output {
        min-width: 200px;
        min-height: 50px;
        font-size: 18px;
        padding: 12px 16px;
        border-radius: 10px;
        gap: 6px;
    }

    .hrm-output-badge {
        font-size: 8px;
        padding: 2px 5px;
        letter-spacing: 0.05em;
    }

    .hrm-output.holding .hrm-output-text {
        font-size: 24px;
    }

    .hrm-demo-mode {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hrm-benefit {
        gap: 12px;
    }

    .hrm-benefit-icon {
        width: 36px;
        height: 36px;
    }

    .hrm-benefit-text h4 {
        font-size: 15px;
    }

    .hrm-benefit-text p {
        font-size: 13px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hrm-output-cursor {
        animation: none;
        opacity: 1;
    }

    .hrm-output.holding .hrm-output-text {
        animation: none;
    }
}

/* ============================================
   DOJO EASTER EGG - Playing Card
   ============================================ */
.dojo-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease, visibility 0s 0.4s;
    perspective: 1500px;
}

.dojo-overlay.visible {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease, visibility 0s 0s;
}

.dojo-card {
    position: relative;
    width: min(85vw, 500px);
    aspect-ratio: 2.5 / 3.5;
    border-radius: 20px;
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 0 8px rgba(255, 255, 255, 0.05),
        0 50px 100px -20px rgba(0, 0, 0, 0.8),
        0 30px 60px -30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateY(-90deg) rotateX(20deg) scale(0.5);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.dojo-overlay.visible .dojo-card {
    transform: rotateY(0deg) rotateX(0deg) scale(1);
    opacity: 1;
}

.dojo-card::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    pointer-events: none;
}

.dojo-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dojo-card-corner {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: rgba(255, 215, 0, 0.8);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: var(--font-display);
}

.dojo-card-corner.top-left {
    top: 20px;
    left: 20px;
}

.dojo-card-corner.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: rotate(180deg);
}

.dojo-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-text);
    opacity: 0;
    transition: opacity 0.3s ease 0.6s;
}

.dojo-overlay.visible .dojo-hint {
    opacity: 1;
}

/* Shimmer effect on card */
.dojo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    animation: none;
}

.dojo-overlay.visible .dojo-card::after {
    animation: card-shimmer 2s ease-in-out 0.5s;
}

@keyframes card-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   HYPER KEY STYLING
   ============================================ */
.kb-key-hyper {
    position: relative;
    overflow: visible;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(147, 51, 234, 0.3) 0%,
        rgba(126, 34, 206, 0.4) 100%) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    cursor: url("../images/pointinghand.svg") 12 0, pointer;
}

.keyboard-hero-section:not(.hyper-pulse-stopped) .kb-key-hyper::before,
.keyboard-hero-section:not(.hyper-pulse-stopped) .kb-key-hyper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--kb-radius);
    border: none;
    background: rgba(168, 85, 247, 0.25);
    opacity: 0;
    pointer-events: none;
    animation: hyper-wave 3.6s ease-out infinite;
}

.keyboard-hero-section:not(.hyper-pulse-stopped) .kb-key-hyper::after {
    opacity: 0.9;
    animation-delay: 1.1s;
}

.kb-key-hyper .kb-label {
    font-size: 9px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(216, 180, 254, 0.9) !important;
}

.kb-key-hyper:hover,
.kb-key-hyper.kb-key-pressed {
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.6) 0%,
        rgba(147, 51, 234, 0.7) 100%) !important;
    box-shadow:
        0 0 20px rgba(168, 85, 247, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.kb-key-hyper.kb-key-pressed .kb-label {
    color: #fff !important;
}
@keyframes hyper-wave {
    0% {
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(168, 85, 247, 0.0),
            0 0 0 0 rgba(168, 85, 247, 0.0),
            0 0 0 0 rgba(168, 85, 247, 0.0);
    }
    8% {
        opacity: 1;
    }
    40% {
        opacity: 0.6;
        box-shadow:
            0 0 16px 18px rgba(178, 108, 255, 0.4),
            0 0 22px 28px rgba(168, 85, 247, 0.35),
            0 0 30px 40px rgba(115, 65, 205, 0.18);
    }
    100% {
        opacity: 0;
        box-shadow:
            0 0 0 18px rgba(168, 85, 247, 0.25),
            0 0 0 42px rgba(168, 85, 247, 0.12),
            0 0 0 68px rgba(115, 65, 205, 0.07);
    }
}

.keyboard-hero-section.hyper-pulse-stopped .kb-key-hyper::before,
.keyboard-hero-section.hyper-pulse-stopped .kb-key-hyper::after,
.kb-key-hyper:hover::before,
.kb-key-hyper:hover::after,
.kb-key-hyper.kb-key-pressed::before,
.kb-key-hyper.kb-key-pressed::after {
    animation: none;
    opacity: 0;
}
/* ============================================
   LAUNCHER LAYER ON KEYBOARD
   ============================================ */

/* Hide launcher icons by default */
.kb-launcher-icon,
.kb-launcher-img {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.kb-launcher-icon {
    font-size: 24px;
    line-height: 1;
}

.kb-launcher-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Keys with launcher mappings need relative positioning */
.kb-key[data-launcher] {
    position: relative;
}

/* When launcher mode is active, show icons and hide letters */
.css-keyboard.launcher-active .kb-key[data-launcher] .kb-primary,
.css-keyboard.launcher-active .kb-key[data-launcher] .kb-secondary {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.css-keyboard.launcher-active .kb-launcher-icon,
.css-keyboard.launcher-active .kb-launcher-img {
    display: block;
    animation: launcher-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes launcher-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Launcher active keys get a subtle purple glow */
.css-keyboard.launcher-active .kb-key[data-launcher] {
    background: linear-gradient(180deg,
        rgba(147, 51, 234, 0.15) 0%,
        rgba(126, 34, 206, 0.2) 100%);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow:
        0 0 12px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hyper key stays pressed while launcher is active */
.css-keyboard.launcher-active .kb-key-hyper {
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.6) 0%,
        rgba(147, 51, 234, 0.7) 100%) !important;
    box-shadow:
        0 0 20px rgba(168, 85, 247, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Keyboard should be fully bright when launcher is active */
.keyboard-hero-section .css-keyboard.launcher-active {
    opacity: 1 !important;
}

/* LinkedIn special styling */
.kb-key[data-launcher="linkedin"] .kb-launcher-icon {
    font-size: 16px;
    font-weight: 700;
    color: #0A66C2;
    font-family: var(--font-text);
}

/* X/Twitter special styling */
.kb-key[data-launcher="twitter"] .kb-launcher-icon {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

/* =========================================================================
   PARCHMENT THEME — Warm watercolor aesthetic for docs pages
   Scoped to .parchment-theme body class so it only applies when
   front matter includes `theme: parchment`.
   ========================================================================= */

/* --- CSS custom property overrides --- */
.parchment-theme {
    --color-primary: #8b5e3c;
    --color-primary-dark: #6b4226;
    --color-primary-light: #c49a6c;

    --color-background: #faf6f0;
    --color-background-secondary: #f5efe6;
    --color-background-tertiary: #efe8dd;

    --color-text: #3d3229;
    --color-text-secondary: #6b5d52;
    --color-text-tertiary: #8a7b6e;

    --color-border: rgba(139, 109, 75, 0.2);
    --color-border-light: rgba(139, 109, 75, 0.1);

    --color-success: #5a8a3c;
    --color-warning: #d4940a;
    --color-error: #b84233;
}

/* Force light mode for parchment pages — warm watercolor needs light bg */
@media (prefers-color-scheme: dark) {
    .parchment-theme {
        --color-primary: #8b5e3c;
        --color-primary-dark: #6b4226;
        --color-primary-light: #c49a6c;

        --color-background: #faf6f0;
        --color-background-secondary: #f5efe6;
        --color-background-tertiary: #efe8dd;

        --color-text: #3d3229;
        --color-text-secondary: #6b5d52;
        --color-text-tertiary: #8a7b6e;

        --color-border: rgba(139, 109, 75, 0.2);
        --color-border-light: rgba(139, 109, 75, 0.1);
    }
}

/* --- Parchment background --- */
.parchment-theme {
    background-color: #faf6f0;
}

/* --- Header and footer warm tones --- */
.parchment-theme .site-header {
    background: rgba(250, 246, 240, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(139, 109, 75, 0.15);
}

.parchment-theme .site-header .nav-link {
    color: #6b5d52;
}

.parchment-theme .site-header .nav-link:hover,
.parchment-theme .site-header .nav-link.active {
    color: #8b5e3c;
}

.parchment-theme .site-footer {
    background: #f0e8dc;
    border-top: 1px solid rgba(139, 109, 75, 0.15);
    color: #6b5d52;
}

.parchment-theme .site-footer a {
    color: #8b5e3c;
}

.parchment-theme .site-footer a:hover {
    color: #6b4226;
}

.parchment-theme .footer-title {
    color: #4a3728;
}

.parchment-theme .footer-heading {
    color: #4a3728;
}

.parchment-theme .footer-description {
    color: #8a7b6e;
}

.parchment-theme .footer-links a {
    color: #6b5d52;
}

.parchment-theme .footer-links a:hover {
    color: #8b5e3c;
}

.parchment-theme .footer-credits {
    border-top-color: rgba(139, 109, 75, 0.15);
}

.parchment-theme .footer-love {
    color: #8a7b6e;
}

.parchment-theme .footer-love a.footer-creator {
    color: #6b5d52;
}

.parchment-theme .footer-love a.footer-creator:hover {
    color: #8b5e3c;
}

.parchment-theme .footer-standing {
    color: #8a7b6e;
}

.parchment-theme .footer-standing a {
    color: #6b5d52;
}

.parchment-theme .footer-standing a:hover {
    color: #8b5e3c;
}

.parchment-theme .footer-copyright {
    color: #8a7b6e;
}

.parchment-theme .footer-copyright a {
    color: #6b5d52;
}

.parchment-theme .footer-bottom {
    border-top: none;
}

/* --- Serif typography for content --- */
.parchment-theme main .content-wrapper > section,
.parchment-theme .content {
    font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
    color: #3d3229;
}

.parchment-theme main .content-wrapper > section h1,
.parchment-theme main .content-wrapper > section h2,
.parchment-theme main .content-wrapper > section h3,
.parchment-theme main .content-wrapper > section h4,
.parchment-theme .content h1,
.parchment-theme .content h2,
.parchment-theme .content h3,
.parchment-theme .content h4 {
    font-family: 'Lora', 'Georgia', serif;
    color: #4a3728;
}

.parchment-theme main .content-wrapper > section h2,
.parchment-theme .content h2 {
    border-bottom-color: rgba(139, 109, 75, 0.15);
}

.parchment-theme main .content-wrapper > section a,
.parchment-theme .content a {
    color: #8b5e3c;
}

.parchment-theme main .content-wrapper > section a:hover,
.parchment-theme .content a:hover {
    color: #6b4226;
}

.parchment-theme main .content-wrapper > section strong,
.parchment-theme .content strong {
    color: #4a3728;
}

.parchment-theme main .content-wrapper > section p,
.parchment-theme main .content-wrapper > section li,
.parchment-theme .content p,
.parchment-theme .content li {
    color: #6b5d52;
}

.parchment-theme main .content-wrapper > section img,
.parchment-theme .content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 8px;
}

/* Screenshot captures need stable sizing/framing across all guides. */
.parchment-theme main .content-wrapper > section p > img[alt^="Screenshot"],
.parchment-theme .content p > img[alt^="Screenshot"] {
    border: 1px solid rgba(139, 109, 75, 0.2);
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.10);
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    margin-top: 1.1rem;
    margin-bottom: 0.6rem;
}

/* --- Code blocks --- */
.parchment-theme main .content-wrapper > section code,
.parchment-theme .content code {
    background: rgba(139, 109, 75, 0.08);
    color: #5a4234;
}

.parchment-theme main .content-wrapper > section pre,
.parchment-theme .content pre {
    background: rgba(139, 109, 75, 0.06);
    border: 1px solid rgba(139, 109, 75, 0.1);
}

.parchment-theme main .content-wrapper > section pre code,
.parchment-theme .content pre code {
    background: none;
    color: #3d3229;
}

/* --- Blockquotes --- */
.parchment-theme main .content-wrapper > section blockquote,
.parchment-theme .content blockquote {
    border-left-color: #c49a6c;
    background: rgba(139, 109, 75, 0.04);
    color: #6b5d52;
}

/* --- Callout boxes (warning / tip) --- */
.parchment-theme main .content-wrapper > section .callout,
.parchment-theme .content .callout {
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.parchment-theme main .content-wrapper > section .callout-warning,
.parchment-theme .content .callout-warning {
    background: rgba(217, 155, 40, 0.08);
    border-left: 4px solid #d4940a;
    color: #7a5c00;
}

.parchment-theme main .content-wrapper > section .callout-tip,
.parchment-theme .content .callout-tip {
    background: rgba(40, 140, 180, 0.08);
    border-left: 4px solid #2889a8;
    color: #1a6070;
}

/* --- Tables --- */
.parchment-theme main .content-wrapper > section table,
.parchment-theme .content table {
    border-collapse: collapse;
}

.parchment-theme main .content-wrapper > section th,
.parchment-theme .content th {
    background: rgba(139, 109, 75, 0.06);
    border-bottom-color: rgba(139, 109, 75, 0.15);
    color: #4a3728;
}

.parchment-theme main .content-wrapper > section td,
.parchment-theme .content td {
    border-bottom-color: rgba(139, 109, 75, 0.1);
    color: #6b5d52;
}

.parchment-theme main .content-wrapper > section tbody tr:hover,
.parchment-theme .content tbody tr:hover {
    background: rgba(139, 109, 75, 0.04);
}

/* --- Sidebar warm tones --- */
.parchment-theme .sidebar {
    background: #f5efe6;
    border-right-color: rgba(139, 109, 75, 0.12);
}

.parchment-theme .sidebar .nav-section-title {
    color: #4a3728;
}

.parchment-theme .sidebar .nav-link {
    color: #6b5d52;
}

.parchment-theme .sidebar .nav-link:hover {
    color: #8b5e3c;
    background: rgba(139, 109, 75, 0.06);
}

.parchment-theme .sidebar .nav-item.active .nav-link {
    color: #8b5e3c;
    background: rgba(139, 109, 75, 0.1);
    font-weight: 600;
}

/* --- Docs landing CTA buttons --- */
.parchment-theme .docs-hero-cta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

.parchment-theme main .content-wrapper > section a.docs-cta-primary,
.parchment-theme .content a.docs-cta-primary,
.parchment-theme .docs-cta-primary {
    background: #8b5e3c;
    color: #faf6f0 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--font-size-base);
}

.parchment-theme main .content-wrapper > section a.docs-cta-primary:hover,
.parchment-theme .content a.docs-cta-primary:hover,
.parchment-theme .docs-cta-primary:hover {
    background: #6b4226;
    color: #faf6f0 !important;
}

.parchment-theme .docs-cta-secondary {
    color: #8b5e3c;
    border-color: rgba(139, 109, 75, 0.3);
}

.parchment-theme .docs-cta-secondary:hover {
    background: rgba(139, 109, 75, 0.06);
    border-color: #8b5e3c;
}

/* --- Docs cards --- */
.parchment-theme .docs-card {
    background: #faf6f0;
    border-color: rgba(139, 109, 75, 0.15);
}

.parchment-theme .docs-card:hover {
    border-color: rgba(139, 109, 75, 0.3);
    box-shadow: 0 4px 16px rgba(74, 55, 40, 0.08);
}

.parchment-theme .docs-card h3 a {
    color: #4a3728;
}

.parchment-theme .docs-card p {
    color: #6b5d52;
}

.parchment-theme .docs-card-links a {
    color: #8b5e3c;
}

.parchment-theme .docs-card-links a:hover {
    color: #6b4226;
}

/* --- Article header image (watercolor banner) --- */
.article-header-image {
    margin: 0 0 1rem 0;
    width: 100%;
    overflow: hidden;
}

/* Higher-specificity rule prevents generic `.parchment-theme .content img` from
   reverting header banners back to intrinsic aspect ratio with side whitespace. */
.parchment-theme main .content-wrapper > section .article-header-image .article-header-img,
.parchment-theme .content .article-header-image .article-header-img {
    width: 100%;
    max-width: none;
    height: clamp(220px, 30vw, 420px);
    object-fit: cover;
    object-position: center 72%;
    display: block;
    margin: 0;
}

/* --- HR as watercolor divider --- */
.parchment-theme main .content-wrapper > section hr,
.parchment-theme .content hr {
    border: none;
    height: 36px;
    background: transparent;
    position: relative;
    margin: 2rem 0;
}

.parchment-theme main .content-wrapper > section hr::after,
.parchment-theme .content hr::after {
    content: '';
    display: block;
    width: 120px;
    height: 36px;
    margin: 0 auto;
    background: url('../../images/help/decor-divider.png') center/contain no-repeat;
}

/* --- Copy button warm styling --- */
.parchment-theme .copy-button {
    color: #8b5e3c;
    border-color: rgba(139, 109, 75, 0.2);
    background: rgba(250, 246, 240, 0.9);
}

.parchment-theme .copy-button:hover {
    background: rgba(139, 109, 75, 0.1);
    border-color: #8b5e3c;
}

/* --- Glossary popovers warm styling --- */
.parchment-theme .kp-term {
    color: #8b5e3c;
    border-bottom-color: rgba(139, 109, 75, 0.3);
}

.parchment-theme .kp-popover {
    background: #faf6f0;
    border-color: rgba(139, 109, 75, 0.2);
    box-shadow: 0 4px 20px rgba(74, 55, 40, 0.12);
}

.parchment-theme .kp-popover-title {
    color: #4a3728;
}

.parchment-theme .kp-popover-body {
    color: #6b5d52;
}

/* --- Mobile sidebar drawer --- */
@media (max-width: 768px) {
    .parchment-theme .sidebar {
        background: #f5efe6;
    }

    .parchment-theme .sidebar-backdrop {
        background: rgba(74, 55, 40, 0.3);
    }
}