/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #333 var(--bg-primary);
}

:root {
    /* Colors - Default to darker dark mode */
    --bg-primary: #1b1a19;
    --bg-secondary: #1b1a19;
    --bg-card: #1a1a1a;
    --bg-card-hover: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --accent: #6b7a8f;
    --accent-hover: #7d8ca1;
    --border: #1a1a1a;
    --success: #10b981;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Transitions */
    --transition: all 0.2s ease;
}

html {
    color-scheme: dark;
    /* Match the body so the canvas below content isn't the UA gray-blue */
    background-color: var(--bg-primary);
    /* Stop rubber-band/toolbar-toggle jitter at the top and bottom of the page */
    overscroll-behavior-y: none;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overscroll-behavior-y: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

/* Mobile WebKit paints a permanent gutter from the global thin scrollbar rules.
   Hide the painted bar. Do not lock overflow; the page still scrolls. */
@media (max-width: 768px) {
    * {
        scrollbar-width: none;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Theme Switcher */
.theme-switcher {
    position: relative;
    margin-left: var(--spacing-md);
    order: 2;
}

.theme-switcher-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.theme-switcher-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
    transform: scale(1.05);
}

.theme-switcher-btn svg {
    width: 20px;
    height: 20px;
}

.theme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border);
}

.theme-option:last-child {
    border-bottom: none;
}

.theme-option:hover {
    background: var(--bg-card-hover);
    color: var(--accent);
}

.theme-option.active {
    background: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
}

.theme-option.active:hover {
    background: var(--accent-hover);
}

@media (max-width: 768px) {
    .theme-switcher {
        margin-left: 8px;
        margin-right: 0;
    }
    
    .theme-switcher-btn {
        padding: 6px 10px;
    }
    
    .theme-dropdown {
        right: -10px;
    }
    
    .nav-right {
        gap: 8px;
    }
    
    .search-container {
        margin: 0;
    }
}

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

/* Navigation + Sidebar */
:root {
    --sidebar-expanded-width: 240px;
    --sidebar-collapsed-width: 56px;
    --sidebar-current-width: 0px;
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    padding: var(--spacing-sm) 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, left 0.22s ease;
    opacity: 0.95;
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 1;
}

.logo-dropdown-group {
    position: relative;
    display: flex;
    align-items: center;
}

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

.nav-logo-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.nav-logo-btn:hover {
    background-color: var(--bg-card);
}

.nav-logo-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-logo {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.nav-logo-btn:hover .nav-logo {
    color: var(--accent);
}

.logo-arrow {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    transition: var(--transition);
    display: inline-block;
}

.logo-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top left;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 2px 0;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.logo-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1090;
}

body.has-sidebar-nav {
    --sidebar-current-width: var(--sidebar-expanded-width);
    transition: padding-left 0.25s ease;
}

body.has-sidebar-nav.sidebar-collapsed {
    --sidebar-current-width: var(--sidebar-collapsed-width);
}

/* ---- Desktop sidebar (≥ 769px) ---- */
@media (min-width: 769px) {
    body.has-sidebar-nav {
        padding-left: var(--sidebar-current-width);
    }

    body.has-sidebar-nav .nav {
        left: 0;
        right: 0;
    }

    /* Sidebar container */
    body.has-sidebar-nav .logo-dropdown-group {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-current-width);
        height: 100vh;
        background: #1b1a19;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        z-index: 1100;
        padding: 16px 14px 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        transition: width 0.25s ease;
        overflow: hidden;
    }

    /* The original trigger button is hidden on desktop — replaced by sidebar-brand-row */
    body.has-sidebar-nav .nav-logo-btn {
        display: none;
    }

    /* Brand header row (injected by JS) */
    body.has-sidebar-nav .sidebar-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 2px 2px 6px;
        margin-bottom: 16px;
        flex-shrink: 0;
        min-height: 36px;
    }

    body.has-sidebar-nav .sidebar-brand-name {
        font-size: 0.92rem;
        font-weight: 600;
        color: #e5e5e5;
        white-space: nowrap;
        overflow: hidden;
        opacity: 1;
        transition: opacity 0.18s ease, width 0.18s ease;
    }

    /* Panel toggle button */
    body.has-sidebar-nav .sidebar-toggle-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.38);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s ease, color 0.15s ease;
    }

    body.has-sidebar-nav .sidebar-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.78);
    }

    body.has-sidebar-nav .sidebar-toggle-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Section header label (injected by JS) */
    body.has-sidebar-nav .sidebar-section-head {
        font-size: 0.67rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        padding: 0 4px 8px 8px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        opacity: 1;
        transition: opacity 0.15s ease;
        flex-shrink: 0;
    }

    /* Nav list: static, full width */
    body.has-sidebar-nav .logo-dropdown {
        position: static;
        top: auto;
        left: auto;
        min-width: 0;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        padding: 0 4px;
    }

    body.has-sidebar-nav .logo-dropdown::-webkit-scrollbar {
        display: none;
    }

    /* Nav items — Edgevanta .side-btn style */
    body.has-sidebar-nav .menu-item {
        border: 1px solid transparent;
        border-radius: 9px;
        padding: 0.5rem 0.75rem;
        color: rgba(229, 229, 229, 0.6);
        background: transparent;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.4;
        text-decoration: none;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }

    body.has-sidebar-nav .menu-item:hover {
        color: #e5e5e5;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
    }

    body.has-sidebar-nav .menu-item.active {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.08);
        font-weight: 500;
    }

    body.has-sidebar-nav .menu-item:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Mobile-only drawer elements hidden on desktop */
    body.has-sidebar-nav .sidebar-drawer-header,
    body.has-sidebar-nav .sidebar-drawer-section-head {
        display: none;
    }

    /* ---- Collapsed state ---- */
    body.has-sidebar-nav.sidebar-collapsed .sidebar-brand-name {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    body.has-sidebar-nav.sidebar-collapsed .sidebar-brand-row {
        justify-content: center;
        padding: 2px;
    }

    body.has-sidebar-nav.sidebar-collapsed .sidebar-section-head {
        opacity: 0;
        pointer-events: none;
    }

    /* Collapsed: tighten container padding so icons aren't clipped */
    body.has-sidebar-nav.sidebar-collapsed .logo-dropdown-group {
        padding-left: 8px;
        padding-right: 8px;
    }

    body.has-sidebar-nav.sidebar-collapsed .logo-dropdown {
        padding: 0;
        align-items: center;
    }

    /* Collapsed: bare icons only — no containers, no backgrounds */
    body.has-sidebar-nav.sidebar-collapsed .menu-item {
        width: 100%;
        height: 34px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        color: transparent;
        border: none;
        background: none;
        border-radius: 0;
        overflow: visible;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    body.has-sidebar-nav.sidebar-collapsed .menu-item:hover,
    body.has-sidebar-nav.sidebar-collapsed .menu-item.active {
        background: none;
        border: none;
    }

    body.has-sidebar-nav.sidebar-collapsed .menu-item::before {
        content: "";
        width: 18px;
        height: 18px;
        display: block;
        flex-shrink: 0;
        background-color: rgba(255, 255, 255, 0.35);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background-color 0.15s ease;
    }

    body.has-sidebar-nav.sidebar-collapsed .menu-item:hover::before {
        background-color: rgba(255, 255, 255, 0.85);
    }

    body.has-sidebar-nav.sidebar-collapsed .menu-item.active::before {
        background-color: #ffffff;
    }

    /* Stroke-based Lucide icons via data-nav-icon */

    /* Home — house with door */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="home"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
    }

    /* Wiki — open book */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="wiki"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
    }

    /* Blog — pencil on document */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="blog"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    }

    /* Games — trophy */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="games"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E");
    }

    /* Tools — wrench */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="tools"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    }

    /* More — layout grid */
    body.has-sidebar-nav.sidebar-collapsed .menu-item[data-nav-icon="more"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
    }
}

/* ---- Mobile drawer (≤ 768px) ---- */
@media (max-width: 768px) {
    body.has-sidebar-nav {
        padding-left: 0;
    }

    /* Keep the trigger button in the topnav */
    body.has-sidebar-nav .logo-dropdown-group {
        position: relative;
        width: auto;
        height: auto;
        background: transparent;
        border-right: none;
        z-index: auto;
        padding: 0;
        transition: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    body.has-sidebar-nav .nav-logo-btn {
        display: flex;
        width: auto;
        padding: var(--spacing-xs) var(--spacing-sm);
        border: none;
        border-radius: var(--radius-sm);
        min-height: auto;
    }

    body.has-sidebar-nav .nav-logo-btn .logo-arrow {
        display: none;
    }

    /* Desktop-only sidebar elements hidden on mobile */
    body.has-sidebar-nav .sidebar-brand-row,
    body.has-sidebar-nav .sidebar-section-head {
        display: none;
    }

    /* Drawer panel */
    body.has-sidebar-nav .logo-dropdown {
        position: fixed;
        top: 18px;
        left: 18px;
        width: min(calc(100vw - 36px), 272px);
        max-height: calc(100dvh - 36px);
        background: #1b1a19;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
        z-index: 1101;
        padding: 0 0 14px;
        opacity: 1;
        visibility: visible;
        transform: translateX(calc(-100% - 18px));
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }

    /* Drawer header (injected by JS) */
    body.has-sidebar-nav .sidebar-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 18px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        flex-shrink: 0;
    }

    body.has-sidebar-nav .sidebar-drawer-brand {
        font-size: 0.95rem;
        font-weight: 600;
        color: #e5e5e5;
        letter-spacing: -0.01em;
    }

    body.has-sidebar-nav .sidebar-close-btn {
        width: 30px;
        height: 30px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.38);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s ease, color 0.15s ease;
    }

    body.has-sidebar-nav .sidebar-close-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.82);
    }

    /* Section head inside drawer (injected by JS) */
    body.has-sidebar-nav .sidebar-drawer-section-head {
        font-size: 0.67rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        padding: 14px 18px 8px;
        margin: 0;
        flex-shrink: 0;
    }

    /* Drawer nav list — no borders, background highlight only */
    body.has-sidebar-nav .logo-dropdown .menu-item {
        border: none;
        border-radius: 9px;
        padding: 0.55rem 0.85rem;
        color: rgba(229, 229, 229, 0.65);
        background: transparent;
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.4;
        text-decoration: none;
        display: block;
        margin: 0 12px;
        width: calc(100% - 24px);
        white-space: nowrap;
        transition: color 0.15s ease, background 0.15s ease;
    }

    body.has-sidebar-nav .logo-dropdown .menu-item:hover {
        color: #e5e5e5;
        background: rgba(255, 255, 255, 0.07);
    }

    body.has-sidebar-nav .logo-dropdown .menu-item.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        font-weight: 500;
    }

    /* Open state */
    body.has-sidebar-nav.sidebar-mobile-open .logo-dropdown {
        transform: translateX(0);
    }

    body.has-sidebar-nav.sidebar-mobile-open .nav {
        z-index: 1102;
    }

    body.has-sidebar-nav.sidebar-mobile-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.has-sidebar-nav.sidebar-mobile-open {
        overflow: hidden;
    }
}

.menu-item:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Base .menu-item styles (used outside sidebar context) */
.menu-item {
    display: block;
    padding: 6px var(--spacing-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background-color: var(--bg-card-hover);
    color: var(--accent);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) 0;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-2xl);
    color: var(--accent);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-links {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--text-primary);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Apps Section */
.apps-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

/* Animations Header */
.animations-header {
    padding: calc(var(--spacing-2xl) + 60px) 0 var(--spacing-md) 0;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
    text-align: center;
}

.animations-header-content {
    max-width: 800px;
    margin: 0 auto;
}

.animations-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.animations-subtitle {
    font-size: var(--font-size-2xl);
    color: var(--accent);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.animations-description {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
    margin-bottom: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Animations Grid Section */
.animations-grid-section {
    padding: var(--spacing-md) 0 var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

/* Animations Grid */
.animations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.animation-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.animation-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.animation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.animation-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.animation-platform {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.animation-description {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    font-size: var(--font-size-sm);
}

.animation-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Metrics Summary */
.metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.metric-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border);
}

.metric-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-total {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent);
}

.metric-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-name {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.metric-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.metric-bar {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    min-width: 2px;
}

.metric-bar.revenue-bar {
    background: var(--success);
}

.metric-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.app-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition);
}

.app-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.app-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.app-platform {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-description {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.app-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.tech-tag {
    font-size: var(--font-size-xs);
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.app-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
}

.app-link:hover {
    color: var(--accent-hover);
    transform: translateY(-2px);
}

.app-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Development Section */
.dev-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-primary);
}

.dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.dev-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition);
}

.dev-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--success);
    transform: translateY(-2px);
}

.dev-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.dev-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.dev-status {
    font-size: var(--font-size-xs);
    color: var(--success);
    background-color: rgba(16, 185, 129, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(16, 185, 129, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dev-description {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.dev-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.feature {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.dev-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.dev-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dev-link {
    color: var(--success);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
}

.dev-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

/* Tech Stack Section */
.tech-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.tech-category {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.tech-category-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--accent);
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.tech-item {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* Contact Section */
.contact-section {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
}

/* Homepage quick-links dock (fixed bottom bar) */
:root {
    --home-dock-height: 72px;
    --nav-bar-height: 88px;
}

.home-chat-section {
    padding-top: var(--nav-bar-height) !important;
    padding-bottom: 28px !important;
    background-color: var(--bg-primary);
}

body.home-page .home-chat-section .container {
    padding-top: 0;
}

/* Seamless homepage: explorer fills the space between nav and dock */
body.home-page,
body.home-page .home-chat-section {
    background-color: #1b1a19;
}

body.home-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

body.home-page .nav {
    z-index: 1000;
    border-bottom-color: transparent;
    background: #1b1a19;
    /* No blur: a backdrop-filter would make the nav the containing block for the
       fixed sidebar inside it, dragging the sidebar along when the nav shifts. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
}

/* Header shares the explorer's column: start right of the sidebar so the
   search button lines up with the explorer's right edge. */
@media (min-width: 769px) {
    body.home-page.has-sidebar-nav .nav {
        left: var(--sidebar-current-width);
    }
}

/* Collapsed search: drop the hidden close button from layout so the search
   button sits flush with the explorer's right edge. */
body.home-page .search-bar:not(.expanded) .search-close-btn {
    display: none;
}

body.home-page .nav-content {
    max-width: min(1120px, calc(100% - 32px));
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.home-page .home-chat-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #1b1a19 !important;
    padding-bottom: calc(var(--home-dock-height) + 18px) !important;
}

body.home-page .home-chat-section .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(1120px, calc(100% - 32px));
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
}

body.home-page .search-chat-container {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    background: #1b1a19;
}

body.home-page .chat-input-container {
    background: #1b1a19;
}

body.home-page .chat-messages {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

body.home-page .home-bottom-dock {
    background: rgba(27, 26, 25, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Archive visual gallery (space + science) */
.archive-gallery,
.home-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.archive-gallery-inner,
.home-gallery-inner {
    max-width: 900px;
    margin: 0 auto;
}

.archive-gallery-grid,
.home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.gallery-tile {
    position: relative;
    margin: 0;
    height: clamp(160px, 22vh, 230px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1b1a19;
}

.gallery-tile-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.92;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.gallery-tile:hover img {
    transform: scale(1.06);
    opacity: 1;
}

.gallery-tile figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.gallery-tile .tile-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.gallery-tile .tile-sub {
    font-size: 0.66rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 768px) {
    body.home-page .nav-content,
    body.home-page .home-chat-section .container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .archive-gallery-grid,
    .home-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery-tile {
        height: clamp(140px, 26vw, 180px);
    }
}

.home-bottom-dock {
    position: fixed;
    left: calc(var(--sidebar-current-width) + 12px);
    right: 12px;
    bottom: 10px;
    z-index: 980;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(27, 26, 25, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.35);
}

.home-bottom-dock .contact-section-inner {
    padding: 8px 10px;
}

.home-bottom-dock .contact-links {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.home-bottom-dock .contact-links::-webkit-scrollbar {
    display: none;
}

.home-bottom-dock .contact-btn {
    min-height: 32px;
    padding: 0.42rem 0.72rem;
    border-radius: 10px;
    font-size: 0.74rem;
    white-space: nowrap;
    opacity: 1;
    transform: none;
    animation: none;
}

.home-bottom-dock .contact-btn:hover,
.home-bottom-dock .contact-btn:focus-visible,
.home-bottom-dock .contact-btn:active,
.home-bottom-dock .contact-btn[aria-current="page"] {
    transform: none;
    box-shadow: 0 0 0 1px rgba(125, 140, 161, 0.45) inset;
    background: rgba(107, 122, 143, 0.12);
    border-color: rgba(125, 140, 161, 0.9);
}

.contact-section-inner {
    width: 100%;
    padding: 52px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 900px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(107, 122, 143, 0.55);
    border-radius: 14px;
    color: #d5dde8;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, opacity 0.5s ease;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.015) inset;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    animation: contactButtonIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact-btn:hover {
    background: rgba(107, 122, 143, 0.12);
    color: #ffffff;
    border-color: rgba(125, 140, 161, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.contact-btn:focus-visible {
    outline: none;
    border-color: rgba(125, 140, 161, 1);
    box-shadow: 0 0 0 3px rgba(107, 122, 143, 0.2);
}

.contact-btn:nth-child(1) { animation-delay: 0.02s; }
.contact-btn:nth-child(2) { animation-delay: 0.08s; }
.contact-btn:nth-child(3) { animation-delay: 0.14s; }
.contact-btn:nth-child(4) { animation-delay: 0.20s; }
.contact-btn:nth-child(5) { animation-delay: 0.26s; }

.contact-btn-brand {
    background: rgba(107, 122, 143, 0.09);
    border-color: rgba(125, 140, 161, 0.75);
}

@keyframes contactButtonIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Footer */
.footer {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-text {
    color: #5A7FA0;
    font-size: var(--font-size-sm);
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.footer-links a {
    color: #5A7FA0;
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

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

.footer-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5A7FA0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: var(--transition);
}

.footer-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg-card);
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --home-dock-height: 0px;
    }

    .home-bottom-dock {
        display: none;
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
    
    .hero-stats {
        gap: var(--spacing-lg);
    }
    
    .home-stats {
        gap: var(--spacing-md);
        flex-wrap: nowrap;
        justify-content: center;
    }
    
    .home-stat {
        min-width: 70px;
        flex: 0 1 auto;
    }
    
    .home-stat .stat-number {
        font-size: var(--font-size-2xl);
    }
    
    .home-stat .stat-label {
        font-size: 10px;
    }
    
    .stat-number {
        font-size: var(--font-size-3xl);
    }
    
    .stat-label {
        font-size: var(--font-size-xs);
        text-align: center;
        line-height: 1.2;
    }
    
    .metrics-container {
        grid-template-columns: 1fr;
    }
    
    .apps-grid,
    .dev-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }

    .contact-section-inner {
        padding: 42px 16px 46px;
    }

    .contact-links {
        gap: 8px;
    }

    .contact-btn {
        min-height: 40px;
        padding: 0.58rem 0.88rem;
        font-size: 0.79rem;
        border-radius: 13px;
    }
}

@media (max-width: 640px) {
    .contact-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        gap: 10px;
    }

    .contact-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.7rem 0.85rem;
        text-align: center;
        line-height: 1.3;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-links {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .home-stats {
        gap: var(--spacing-md);
        flex-direction: row;
        justify-content: center;
        flex-wrap: nowrap;
    }
    
    .home-stat {
        min-width: auto;
        flex: 0 1 auto;
        padding: 0 var(--spacing-xs);
    }
    
    .home-stat .stat-number {
        font-size: var(--font-size-xl);
    }
    
    .home-stat .stat-label {
        font-size: 9px;
    }
    
    .stat-number {
        font-size: var(--font-size-2xl);
    }
    
    .stat-label {
        font-size: var(--font-size-xs);
    }

    .contact-btn {
        min-height: 42px;
        padding: 0.68rem 0.78rem;
        font-size: 0.75rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .contact-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Home Page Styles */
.bold-subtitle {
    font-weight: 700;
    font-size: var(--font-size-5xl);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

.home-description {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.home-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.home-link-item {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.home-link-item .list-item-content:hover {
    background-color: var(--bg-card-hover);
}

/* Blog Styles */
.blog-header {
    padding: calc(var(--spacing-xl) + 110px) 0 var(--spacing-md) 0;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
    text-align: center;
}


.blog-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
}

.blog-subtitle.bold-subtitle {
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

.blog-section {
    padding: var(--spacing-sm) 0;
    background-color: var(--bg-secondary);
}

/* Currently Reading Section */
.currently-reading {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: var(--spacing-sm);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.currently-reading:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reading-header {
    padding: var(--spacing-xs) var(--spacing-sm);
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border);
}

.reading-header:hover {
    background-color: var(--bg-card-hover);
}

.reading-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.reading-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.reading-book-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.reading-badge {
    background: var(--accent);
    color: var(--text-primary);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.reading-content {
    padding: var(--spacing-sm) var(--spacing-md);
    overflow: hidden;
}

.currently-reading.collapsed .reading-content {
    display: none;
}

.book-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.book-author {
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 0;
    font-style: italic;
}

.reading-thoughts {
    margin: 0;
}

.thoughts-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.thoughts-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .reading-header {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .reading-content {
        padding: var(--spacing-sm);
    }
    
    .book-title {
        font-size: var(--font-size-sm);
    }
    
    .book-author {
        font-size: 10px;
    }
    
    .reading-book-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

.blog-list {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.blog-list-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    transition: var(--transition);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.blog-list-item:first-child {
    border-top: 1px solid var(--border);
}

.blog-list-item:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.blog-list-button {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.list-item-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.list-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    min-width: 0;
}

.list-date {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
    opacity: 0.85;
}

.list-category {
    font-size: var(--font-size-xs);
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.15);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(59, 130, 246, 0.3);
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.blog-list-item:hover .list-category {
    background-color: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.list-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.list-excerpt {
    display: none;
}

.list-arrow {
    font-size: var(--font-size-lg);
    color: var(--accent);
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.7;
    font-weight: 300;
}

.home-link-item:hover .list-arrow {
    transform: translateY(-2px);
    opacity: 1;
}

.blog-dropdown-content {
    display: none;
    padding: var(--spacing-lg);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.blog-post-full {
    line-height: 1.7;
}

.blog-post-full h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    padding-top: var(--spacing-lg);
}

.blog-post-full h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

.blog-post-full h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--accent);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.blog-post-full p {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.blog-post-full ul {
    color: var(--text-primary);
    margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
}

.blog-post-full li {
    margin-bottom: var(--spacing-xs);
}

.blog-post-full strong {
    color: var(--accent);
    font-weight: 600;
}

.blog-post-full strong a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

/* General blog post links */
.blog-post-full a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.blog-post-full a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.blog-post-full hr {
    border: none;
    height: 1px;
    background-color: var(--border);
    margin: var(--spacing-xl) 0;
}

.blog-post-full em {
    color: var(--text-tertiary);
    font-style: italic;
}

.mission-content {
    line-height: 1.7;
}

.mission-content p {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.mission-content a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.mission-content a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.coming-soon-content {
    text-align: center;
    padding: var(--spacing-lg);
}

.coming-soon-content p {
    color: var(--text-tertiary);
    font-style: italic;
}

.blog-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
}

.blog-post-date {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-post-category {
    font-size: var(--font-size-xs);
    color: var(--accent);
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.blog-post-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.blog-post-excerpt {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.blog-post-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
}

.blog-post-link:hover {
    color: var(--accent-hover);
    transform: translateY(-2px);
}

/* Individual Blog Post Styles */
.blog-post-header-section {
    padding: calc(var(--spacing-2xl) + 60px) 0 var(--spacing-xl) 0;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
    text-align: center;
}

.blog-post-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.blog-post-main-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.blog-post-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
    max-width: 600px;
    margin: 0 auto;
}

.blog-post-content {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

.blog-post-body {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    line-height: 1.7;
}

.blog-post-body h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    padding-top: var(--spacing-lg);
}

.blog-post-body h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

.blog-post-body h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--accent);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.blog-post-body p {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.blog-post-body ul {
    color: var(--text-primary);
    margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
}

.blog-post-body li {
    margin-bottom: var(--spacing-xs);
}

.blog-post-body strong {
    color: var(--accent);
    font-weight: 600;
}

.blog-post-body hr {
    border: none;
    height: 1px;
    background-color: var(--border);
    margin: var(--spacing-xl) 0;
}

.blog-post-body em {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Global Mobile Utilities - Apply to ALL pages */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Button groups stack vertically */
    .button-group,
    .action-buttons,
    .controls {
        flex-direction: column !important;
        width: 100%;
    }
    
    .button-group > *,
    .action-buttons > *,
    .controls > * {
        width: 100%;
        text-align: center;
    }
    
    /* Headers and text sizing */
    h1 {
        font-size: var(--font-size-2xl);
    }
    
    h2 {
        font-size: var(--font-size-xl);
    }
    
    h3 {
        font-size: var(--font-size-lg);
    }
    
    /* Reduce padding on cards/sections */
    .card,
    .section,
    .content-block {
        padding: var(--spacing-md);
    }
    
    /* Images and media */
    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }
    
    /* Fixed/absolute positioned elements */
    .back-button,
    .nav-button {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: var(--font-size-sm);
    }
    
    .blog-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-md);
    }
    
    .blog-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xl);
    }
    
    .blog-subtitle.bold-subtitle {
        font-size: var(--font-size-3xl);
    }
    
    .blog-list {
        max-width: 100%;
    }
    
    .list-item-content {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "header arrow"
            "title title";
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-xs);
    }
    
    .list-item-header {
        grid-area: header;
        min-width: 0;
        gap: var(--spacing-xs);
    }

    .list-title {
        grid-area: title;
        font-size: var(--font-size-sm);
        line-height: 1.3;
    }

    .list-arrow {
        grid-area: arrow;
        font-size: var(--font-size-base);
        align-self: start;
        margin-top: 2px;
    }
    
    .list-date {
        font-size: 10px;
        min-width: auto;
        text-align: left;
    }
    
    .blog-list-item {
        margin-bottom: var(--spacing-xs);
    }
    
    .blog-dropdown-content {
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl) var(--spacing-md);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .blog-post-full h2 {
        font-size: var(--font-size-xl);
    }
    
    .blog-post-full h3 {
        font-size: var(--font-size-lg);
    }
    
    .mission-content p {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .blog-header {
        padding: calc(var(--spacing-xl) + 60px) 0 var(--spacing-lg) 0;
    }
    
    .blog-title {
        font-size: var(--font-size-2xl);
    }
    
    .blog-subtitle {
        font-size: var(--font-size-sm);
        padding: 0 var(--spacing-sm);
    }
    
    .blog-subtitle.bold-subtitle {
        font-size: var(--font-size-2xl);
        padding: 0 var(--spacing-sm);
    }
    
    .blog-section {
        padding: var(--spacing-md) 0;
    }
    
    .list-item-content {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    
    .list-item-header {
        gap: var(--spacing-xs);
    }
    
    .list-date {
        font-size: 9px;
    }
    
    .list-category {
        font-size: 9px;
        padding: 0.15rem 0.4rem;
    }
    
    .list-title {
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }
    
    .list-arrow {
        font-size: var(--font-size-sm);
    }
    
    .blog-list-item {
        margin-bottom: var(--spacing-xs);
    }
}

/* Resume Styles */
.resume-header {
    padding: calc(var(--spacing-2xl) + 60px) 0 var(--spacing-lg) 0;
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
    text-align: center;
}

.resume-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.download-pdf-btn {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: underline;
}

.download-pdf-btn:hover {
    color: var(--accent-hover);
}

.resume-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-secondary);
}

.resume-content {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    position: relative;
}

.resume-header-info {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border);
}

.resume-name {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.resume-contact,
.resume-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xs);
}

.resume-links a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.resume-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.resume-section-block {
    margin-bottom: var(--spacing-xl);
}

.resume-section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border);
}

.competency-group p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    line-height: 1.6;
}

.competency-group strong {
    color: var(--accent);
}

.experience-item {
    margin-bottom: var(--spacing-lg);
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
}

.experience-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.experience-date {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-weight: 500;
}

.experience-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-style: italic;
    margin-bottom: var(--spacing-sm);
}

.experience-subtitle a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.experience-subtitle a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.experience-list {
    margin-left: var(--spacing-lg);
    color: var(--text-primary);
}

.experience-list li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
}

.achievements-list {
    margin-left: var(--spacing-lg);
    color: var(--text-primary);
}

.achievements-list li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.achievements-list strong {
    color: var(--accent);
}

/* Photo Gallery Styles */
.photo-search {
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.photo-search-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.photo-search input[type="search"] {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.photo-search input[type="search"]:focus,
.photo-search input[type="search"]:focus-visible {
    outline: 0;
    outline-color: transparent;
    outline-offset: 0;
    border-color: #3f3e3a;
    background: #2f2e2a;
    box-shadow: none;
}

.photo-search-help {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.photo-search-empty {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: none;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.photo-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    transition: var(--transition);
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform, opacity, filter;
}

.photo-item:hover {
    opacity: 0.9;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    will-change: transform;
}

.photo-item img.lazy {
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

.photo-item:hover .photo-caption {
    opacity: 1;
}

/* Enhanced photo item for 3D effects */
.photo-item-lazy {
    opacity: 0;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--text-primary);
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
    user-select: none;
}

.lightbox-close:hover {
    color: var(--accent);
}

/* Responsive Photo Grid */
/* Scrolling Bar Section */
.scrolling-bar-section {
    padding: 20px 0;
    background: transparent;
    border: none;
    overflow: visible !important; /* Force visible to prevent clipping */
    position: relative; /* Changed from fixed to relative */
    margin-top: 60px; /* Added margin to clear the fixed nav */
    z-index: 990; /* Lower than nav */
    min-height: 50px;
    display: flex;
    align-items: center;
    pointer-events: none;
    /* Constrained to container width - no negative margins */
    max-width: 100%;
    width: 100%;
}

.scrolling-bar-container {
    width: 100%;
    max-width: 100%;
    overflow: visible; /* Critical: must be visible for hover effects */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px; /* Padding for hover effects, but constrained to page width */
    pointer-events: auto; /* Re-enable clicks on the bar content */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}

/* Fade effect using overlays instead of mask (won't clip hover effects) */
.scrolling-bar-container::before,
.scrolling-bar-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px; /* Match container padding */
    pointer-events: none;
    z-index: 10;
}

.scrolling-bar-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary), transparent);
}

.scrolling-bar-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary), transparent);
}

.scrolling-bar-content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 16px; /* Increased gap */
    animation: scroll 60s linear infinite; /* Slower, smoother scroll */
    width: fit-content;
    will-change: transform;
    height: 100%;
    overflow: visible !important; /* Ensure hover effects aren't clipped */
    position: relative;
}

.scrolling-bar-content:hover {
    animation-play-state: paused;
}

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

.scrolling-bar-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px; /* Larger, pill-like padding */
    background: rgba(27, 26, 25, 0.8); /* Semi-transparent dark */
    backdrop-filter: blur(8px); /* Glass effect */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 9999px; /* Full pill shape */
    color: var(--text-tertiary);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    min-height: auto;
    line-height: 1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Default z-index */
}

.scrolling-bar-item:hover {
    background: var(--bg-card);
    border-color: #5A7FA0; /* Matte blue accent */
    color: #ffffff;
    transform: translateY(2px) scale(1.01); /* Slightly reduced scale to minimize clipping */
    box-shadow: 0 6px 12px rgba(90, 127, 160, 0.15); /* Matte blue glow */
    z-index: 100; /* Higher z-index to ensure it's above everything */
    position: relative; /* Ensure it creates new stacking context */
}

.scrolling-text {
    font-size: var(--font-size-xs);
    white-space: nowrap;
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--bg-card);
    margin: 10% auto;
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-close {
    color: var(--text-tertiary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
    position: absolute;
    right: var(--spacing-md);
    top: var(--spacing-md);
}

.modal-close:hover,
.modal-close:focus {
    color: var(--text-primary);
}

.modal-content h2 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
    
    .scrolling-bar-item {
        padding: 3px var(--spacing-xs);
        font-size: 10px;
        min-height: 26px;
    }
    
    .scrolling-text {
        font-size: 10px;
    }
    
    .modal-content {
        margin: 20% auto;
        padding: var(--spacing-md);
        width: 95%;
    }
    
    .lightbox img {
        max-width: 95%;
        max-height: 85vh;
    }
    
    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .photo-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    .lightbox {
        padding: var(--spacing-sm);
    }
    
    .lightbox img {
        max-width: 98%;
        max-height: 80vh;
    }
}

.book-content {
    line-height: 1.7;
}

.book-content p {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

/* Print Styles for PDF */
.screen-only {
    display: block;
}

@media print {
    @page {
        margin: 0.5in;
    }
    
    .nav,
    .footer,
    .screen-only,
    .download-pdf-btn {
        display: none !important;
    }
    
    body {
        background-color: white !important;
        margin: 0;
        padding: 0;
    }
    
    html, body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .resume-header {
        display: none;
    }
    
    .resume-section {
        background-color: white !important;
        padding: 30px 40px !important;
    }
    
    .resume-content {
        background-color: white !important;
        border: none !important;
        box-shadow: none;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .resume-header-info {
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
        border-bottom: 2px solid #000 !important;
    }
    
    .resume-name {
        color: #000 !important;
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .resume-contact,
    .resume-links {
        color: #000 !important;
        font-size: 11px !important;
    }
    
    .resume-links a {
        color: #6b7a8f !important;
        text-decoration: none !important;
    }
    
    .resume-section-block {
        margin-bottom: 20px !important;
        page-break-inside: avoid;
    }
    
    .resume-section-title {
        color: #6b7a8f !important;
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        page-break-after: avoid;
    }
    
    .competency-group p {
        color: #000 !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
        line-height: 1.5 !important;
    }
    
    .competency-group strong {
        color: #6b7a8f !important;
    }
    
    .experience-item {
        margin-bottom: 16px !important;
        page-break-inside: avoid;
    }
    
    .experience-header {
        margin-bottom: 4px !important;
    }
    
    .experience-header h3 {
        color: #000 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    .experience-date {
        color: #666 !important;
        font-size: 11px !important;
    }
    
    .experience-subtitle {
        color: #333 !important;
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }
    
    .experience-subtitle a {
        color: #6b7a8f !important;
        text-decoration: none !important;
    }
    
    .experience-list {
        margin-left: 18px !important;
        color: #000 !important;
    }
    
    .experience-list li {
        margin-bottom: 4px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }
    
    .achievements-list {
        margin-left: 18px !important;
        color: #000 !important;
    }
    
    .achievements-list li {
        margin-bottom: 6px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }
    
    .achievements-list strong {
        color: #6b7a8f !important;
    }
    
    /* Ensure all text is black */
    p, span, div {
        color: #000 !important;
    }
    
    a {
        color: #6b7a8f !important;
    }
}

/* Search/Chat Interface - Professional Minimal Design */
.search-chat-container {
    max-width: 750px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 2px solid #4a5c6a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(74, 92, 106, 0.2);
}

.chat-messages {
    padding: var(--spacing-md);
    min-height: 300px;
    max-height: min(560px, calc(100vh - 320px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.chat-message {
    display: flex;
    animation: chatFadeIn 0.34s cubic-bezier(0.2, 0.75, 0.2, 1);
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message-content {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-message.user .chat-message-content {
    background: #4a5c6a;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.assistant .chat-message-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
}

.chat-message.assistant .chat-message-content a {
    color: #6b8a9e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-message.assistant .chat-message-content a:hover {
    color: #8aa8bc;
}

/* Chat images */
.chat-image-container {
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

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

/* Chat embeds (Spotify, etc.) */
.chat-embed-container {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
}

.chat-embed-container.spotify-embed iframe {
    display: block;
}

/* Loading dots */
.chat-message-content.loading {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.chat-message-content.loading span {
    width: 6px;
    height: 6px;
    background: var(--text-tertiary);
    border-radius: 50%;
    animation: chatPulse 1.2s ease-in-out infinite;
}

.chat-message-content.loading span:nth-child(2) { animation-delay: 0.15s; }
.chat-message-content.loading span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.chat-input {
    flex: 1;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    transition: border-color 0.2s;
}

.chat-input:focus,
.chat-input:focus-visible {
    outline: 0;
    outline-color: transparent;
    outline-offset: 0;
    border-color: #3f3e3a;
    background: #2f2e2a;
    box-shadow: none;
}

.chat-input::placeholder {
    color: var(--text-tertiary);
}

/* Slash (/) + mention (@) command palette for the chat input.
   Rendered fixed and attached to <body> (positioned via JS) so it can never be
   clipped by the chat container's overflow: hidden. */
.chat-cmd-menu {
    position: fixed;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    background: var(--bg-card);
    border: 1px solid #4a5c6a;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.chat-cmd-menu[hidden] {
    display: none;
}

.chat-cmd-header {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border);
}

.chat-cmd-list {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4a5c6a transparent;
}

.chat-cmd-list::-webkit-scrollbar {
    width: 8px;
}

.chat-cmd-list::-webkit-scrollbar-track {
    background: transparent;
}

.chat-cmd-list::-webkit-scrollbar-thumb {
    background: #4a5c6a;
    border-radius: 8px;
}

.chat-cmd-list::-webkit-scrollbar-thumb:hover {
    background: #5d7282;
}

.chat-cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
}

.chat-cmd-item.active {
    background: rgba(74, 92, 106, 0.28);
}

.chat-cmd-icon {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.chat-cmd-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.chat-cmd-title {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-cmd-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-cmd-tag {
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
}

.chat-cmd-empty {
    padding: 14px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.chat-send-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    background: #4a5c6a;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: #5a6d7a;
    transform: scale(1.05);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

.chat-send-btn svg {
    width: 18px;
    height: 18px;
}

/* Microphone Button */
.chat-mic-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid #4a5c6a;
    border-radius: 50%;
    color: #4a5c6a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-mic-btn:hover {
    background: rgba(74, 92, 106, 0.1);
    border-color: #5a6d7a;
    color: #5a6d7a;
}

.chat-mic-btn.listening {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    animation: pulse-mic 1.5s infinite;
}

.chat-mic-btn.listening:hover {
    background: #dc2626;
    border-color: #dc2626;
}

@keyframes pulse-mic {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.chat-mic-btn svg {
    width: 18px;
    height: 18px;
}

.chat-mic-btn.unsupported {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-mic-btn.voice-mode {
    border-color: #5b8a9a;
    color: #7eb8c9;
}

.chat-mic-btn.thinking {
    border-color: #6a7a8f;
    color: #8a9aaa;
    animation: none;
}

/* Mic button: pulsing red ring while recording (Web Speech API STT) */
.chat-mic-btn.voice-listening {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    animation: pulse-mic 1.2s ease-in-out infinite;
}

/* Quick Actions Button & Menu (commented out - unused)
.chat-actions-wrapper {
    position: relative;
}

.chat-actions-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid #4a5c6a;
    border-radius: 50%;
    color: #4a5c6a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-actions-btn:hover {
    background: rgba(74, 92, 106, 0.1);
    border-color: #5a6d7a;
    color: #5a6d7a;
}

.chat-actions-btn.active {
    background: rgba(74, 92, 106, 0.15);
    border-color: #5a6d7a;
    color: #5a6d7a;
}

.chat-actions-btn svg {
    width: 18px;
    height: 18px;
}

.chat-actions-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 8px 0;
    width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.chat-actions-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.actions-menu-header {
    padding: 8px 14px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}

.actions-menu-divider {
    height: 1px;
    background: #333;
    margin: 6px 0;
}

.action-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    font-family: inherit;
    white-space: nowrap;
}

.action-item:hover {
    background: #252525;
}
*/

/* Blog Creator Modal */
.blog-creator-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.blog-creator-modal.active {
    display: flex;
}

.blog-creator-content {
    background: #1b1a19;
    border: 1px solid #333;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.blog-creator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #222;
}

.blog-creator-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.blog-creator-close {
    background: transparent;
    border: none;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.blog-creator-close:hover {
    color: #fff;
}

.blog-creator-body {
    padding: 24px;
}

.blog-field {
    margin-bottom: 20px;
}

.blog-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    margin-bottom: 8px;
}

.blog-field input,
.blog-field select,
.blog-field textarea {
    width: 100%;
    padding: 12px 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
}

.blog-field input:focus,
.blog-field select:focus,
.blog-field textarea:focus {
    outline: none;
    border-color: #f59e0b;
}

.blog-field textarea {
    resize: vertical;
    line-height: 1.6;
}

.blog-creator-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.blog-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.blog-btn.secondary {
    background: transparent;
    border: 1px solid #333;
    color: #888;
}

.blog-btn.secondary:hover {
    border-color: #666;
    color: #fff;
}

.blog-btn.primary {
    background: var(--accent);
    border: none;
    color: #fff;
    font-weight: 600;
}

.blog-btn.primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.blog-output {
    margin: 24px;
    margin-top: 0;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

.blog-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    font-size: 13px;
    color: #888;
}

.copy-btn {
    background: #22c55e;
    border: none;
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.copy-btn:hover {
    background: #16a34a;
}

.blog-output pre {
    padding: 16px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    color: #a0a0a0;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
}

.blog-output-note {
    padding: 12px 16px;
    margin: 0;
    font-size: 12px;
    color: #666;
    background: #1a1a1a;
    border-top: 1px solid #333;
}

.blog-output-note code {
    background: #333;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent);
}

/* Inline source links */
.chat-inline-sources {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.chat-source-link {
    display: inline-block;
    font-size: 12px;
    color: #4a5c6a;
    text-decoration: none;
    padding: 4px 10px;
    background: rgba(74, 92, 106, 0.15);
    border: 1px solid #4a5c6a;
    border-radius: 12px;
    margin-right: 6px;
    margin-top: 4px;
    transition: all 0.2s;
}

.chat-source-link:hover {
    background: rgba(74, 92, 106, 0.25);
    transform: translateX(2px);
}

/* Suggested question chips */
@keyframes chipPop {
    0% {
        opacity: 0;
        transform: scale(0.75) translateY(6px);
    }
    70% {
        transform: scale(1.04) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.chat-suggestion-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family);
    opacity: 0;
    animation: chipPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chat-suggestion-chip:hover {
    border-color: #4a5c6a;
    color: #4a5c6a;
    background: rgba(74, 92, 106, 0.1);
}

/* Home view welcome line: quiet intro, no chat bubble */
.chat-message.chat-welcome .chat-message-content {
    max-width: none;
    padding: 6px 2px 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 15px;
    color: var(--text-secondary);
}

/* Home view: discovery cards. Every card shares one anatomy:
   media slot (photo or glyph), eyebrow + label, trailing arrow. */
.chat-suggestions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    padding: 2px 0 6px;
}

.chat-suggestions-list .chat-suggestion-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 74px;
    padding: 12px 14px 12px 12px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.chat-suggestions-list .chat-suggestion-chip:hover,
.chat-suggestions-list .chat-suggestion-chip:focus-visible {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.chat-suggestions-list .chat-suggestion-chip:focus-visible {
    outline: none;
}

.chat-suggestions-list .chat-suggestion-chip:active {
    transform: translateY(0);
}

.chat-suggestion-media {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(229, 229, 229, 0.72);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.chat-suggestion-chip:hover .chat-suggestion-media {
    color: #e5e5e5;
    background: rgba(255, 255, 255, 0.08);
}

.chat-suggestion-media svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-suggestion-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1a1a;
}

.chat-suggestion-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.chat-suggestion-kind {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.chat-suggestion-label {
    font-size: 14.5px;
    line-height: 1.35;
    color: #e5e5e5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-suggestion-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.chat-suggestion-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-suggestion-chip:hover .chat-suggestion-arrow {
    opacity: 1;
    color: #e5e5e5;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .search-chat-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: 16px;
    }

    .chat-messages {
        max-height: min(480px, calc(100vh - 240px));
        max-height: min(480px, calc(100svh - 240px));
        min-height: 48vh;
        min-height: 48svh;
        padding: 12px;
        gap: 10px;
    }

    .home-chat-section .chat-messages {
        max-height: none;
        min-height: 0;
    }

    .chat-message-content {
        font-size: 14px;
        max-width: 88%;
        padding: 9px 13px;
    }

    .chat-input {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 11px 16px;
    }

    .chat-input-container {
        padding: 10px 12px;
        gap: 8px;
    }

    .chat-image-container {
        max-width: 100%;
    }

    .chat-suggestions {
        gap: 8px;
        padding: 6px 0;
    }

    .chat-suggestions-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .chat-suggestions-list .chat-suggestion-chip {
        min-height: 66px;
        padding: 10px 12px 10px 10px;
        gap: 12px;
    }

    .chat-suggestion-media {
        width: 42px;
        height: 42px;
    }

    .chat-suggestion-label {
        font-size: 14px;
    }
    
    /* Smaller buttons on mobile */
    .chat-mic-btn,
    .chat-send-btn {
        width: 44px;  /* larger tap target on mobile */
        height: 44px;
        flex-shrink: 0;
    }

    .chat-mic-btn svg,
    .chat-send-btn svg {
        width: 18px;
        height: 18px;
    }

    .chat-input {
        padding: 10px 14px;
    }

    /* Chat section: full-width on mobile with minimal side padding */
    .blog-section .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --- GEMINI 3 UPGRADES --- */

/* 2. Blueprint Scroll Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Technical "blueprint" ease */
    will-change: transform, opacity;
}

.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Tactile Book Card Enhancements */
.currently-reading {
    /* Essential for 3D effect */
    transform-style: preserve-3d;
    perspective: 1000px;
}

.currently-reading .reading-header {
    /* Float the text slightly above the card */
    transform: translateZ(20px);
    transition: transform 0.3s ease;
}

.currently-reading .reading-book-info,
.currently-reading .reading-badge {
    /* Make specific elements pop more */
    transform: translateZ(10px);
}

/* Global Search Styles */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search Bar - Collapsed state shows just the button */
.search-bar {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* The toggle button - main visible element when collapsed */
.search-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.search-toggle-btn:hover {
    background: var(--bg-card-hover);
    transform: scale(1.05);
}

.search-toggle-btn svg {
    width: 18px;
    height: 18px;
}

/* Expanded state - search bar appears */
.search-bar.expanded {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0 16px;
    min-width: 320px;
    height: 46px;
    animation: searchExpand 0.3s ease forwards;
}

.search-bar.expanded .search-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px;
    transform: none;
}

.search-bar.expanded .search-toggle-btn:hover {
    background: transparent;
    transform: none;
}

@keyframes searchExpand {
    from {
        opacity: 0.8;
        min-width: 44px;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        min-width: 320px;
        transform: scale(1);
    }
}

/* Collapse animation class */
.search-bar.collapsing {
    animation: searchCollapse 0.25s ease forwards;
}

@keyframes searchCollapse {
    from {
        opacity: 1;
        min-width: 320px;
        transform: scale(1);
    }
    to {
        opacity: 0;
        min-width: 44px;
        transform: scale(0.95);
    }
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 0;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    outline: none;
    outline-offset: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    width: 0;
    min-width: 0;
}

.search-input:focus,
.search-input:focus-visible {
    outline: 0;
    outline-color: transparent;
    outline-offset: 0;
    box-shadow: none;
}

.search-bar.expanded .search-input {
    opacity: 1;
    transform: translateX(0);
    width: auto;
    min-width: 200px;
}

.search-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(10px);
    flex-shrink: 0;
}

.search-bar.expanded .search-close-btn {
    opacity: 1;
    transform: translateX(0);
}

.search-close-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #1b1a19;
    border: 1px solid #222;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: min(70vh, 560px);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.search-results-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-results {
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #222;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s ease;
    min-height: 32px;
}

.search-result-item:hover,
.search-result-item.selected {
    background: #1a1a1a;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.search-result-title {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.search-result-category {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.search-result-arrow {
    font-size: 0.8rem;
    color: #666;
    margin-left: 8px;
    transition: color 0.15s ease;
}

.search-result-item:hover .search-result-arrow {
    color: var(--text-primary);
}

.search-result-highlight {
    color: #e5e5e5;
    font-weight: 500;
}

.search-no-results {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.search-results-meta {
    padding: 10px 12px 4px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
}

.search-results-hint {
    padding: 0 12px 10px;
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
}

.search-result-group {
    padding-bottom: 8px;
}

.search-result-group-label {
    margin: 0;
    padding: 10px 12px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}

.search-result-group-label span {
    font-weight: 500;
    color: #666;
}



.search-loading {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.search-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
    margin-left: var(--spacing-sm);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .search-bar.expanded {
        min-width: 250px;
    }

    .search-results-dropdown {
        max-height: min(70vh, 560px);
    }

    .search-results {
        max-height: min(70vh, 560px);
    }

    .search-result-item {
        padding: 8px 12px;
    }
}

@media (max-width: 768px) {
    .search-input {
        font-size: 16px;
        padding: 14px 0;
    }

    .search-bar {
        min-height: 48px;
    }

    .search-toggle-btn {
        padding: 6px 10px;
    }

    .search-close-btn {
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Full-screen search: flex column so results keep a real height */
    .nav.search-active {
        opacity: 1;
        background: #1b1a19;
        border-bottom-color: #222;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        height: 100dvh;
        height: 100svh;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .nav.search-active .nav-left {
        display: none;
    }

    .nav.search-active .nav-content,
    .nav.search-active .nav-right,
    .nav.search-active .search-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        max-width: none;
        min-height: 0;
        height: auto;
        position: relative;
    }

    .nav.search-active .nav-content {
        padding: env(safe-area-inset-top, 0px) 0 0;
        box-sizing: border-box;
    }

    .nav.search-active .search-container {
        background: #1b1a19;
        align-items: stretch;
    }

    .nav.search-active .search-bar {
        width: 100%;
        height: 56px;
        min-width: 100%;
        flex: 0 0 56px;
        border-radius: 0;
        background: #1b1a19;
        border: none;
        border-bottom: 1px solid #222;
        padding: 0 8px;
        display: flex;
        align-items: center;
    }

    .nav.search-active .search-bar .search-input {
        font-size: 16px;
        padding: 0 12px;
        flex: 1;
        opacity: 1;
        transform: none;
        width: auto;
        min-width: 0;
    }

    .nav.search-active .search-toggle-btn {
        background: transparent;
        border: none;
        flex-shrink: 0;
        pointer-events: none;
    }

    .nav.search-active .search-close-btn {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        flex-shrink: 0;
    }

    .nav.search-active .search-results-dropdown {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        flex: 1;
        max-height: none;
        height: auto;
        min-height: 0;
        z-index: 1;
        border-radius: 0;
        background: #1b1a19;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        overflow: hidden;
    }

    .nav.search-active .search-results {
        max-height: none;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .nav.search-active .search-result-item {
        min-height: 48px;
        padding: 12px 16px;
    }

    .nav.search-active .search-result-title {
        font-size: 1rem;
    }

    body.search-open {
        overflow: hidden;
    }

    body.search-open .home-chat-section,
    body.search-open .home-bottom-dock {
        visibility: hidden;
        pointer-events: none;
    }

    .search-container.search-active {
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: #1b1a19;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        min-height: 0;
        height: 100dvh;
        height: 100svh;
        padding: env(safe-area-inset-top, 0px) 0 0;
        box-sizing: border-box;
    }

    .search-container.search-active .search-bar {
        width: 100%;
        height: 56px;
        min-width: 100%;
        flex: 0 0 56px;
        border-radius: 0;
        background: #1b1a19;
        border: none;
        border-bottom: 1px solid #222;
        padding: 0 8px;
        display: flex;
        align-items: center;
    }

    .search-container.search-active .search-bar .search-input {
        font-size: 16px;
        padding: 0 12px;
        flex: 1;
        opacity: 1;
        transform: none;
        width: auto;
        min-width: 0;
    }

    .search-container.search-active .search-toggle-btn {
        background: transparent;
        border: none;
        flex-shrink: 0;
        pointer-events: none;
    }

    .search-container.search-active .search-close-btn {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        flex-shrink: 0;
    }

    .search-container.search-active .search-results-dropdown {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        flex: 1;
        max-height: none;
        height: auto;
        min-height: 0;
        z-index: 1;
        border-radius: 0;
        background: #1b1a19;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        overflow: hidden;
    }

    .search-container.search-active .search-results {
        max-height: none;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}


/* Construction Takeoff plugin documentation */
body.ct-plugin{font:16px/1.55 system-ui,sans-serif;background:#1b1a19;color:#e5e5e5;margin:0}
.ct-plugin main{max-width:820px;margin:auto;padding:28px 20px}
.ct-plugin a{color:#a9caed}
.ct-plugin nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.ct-plugin h1{font-size:28px;margin:20px 0 8px}
.ct-plugin h2{font-size:19px;margin:22px 0 8px}
.ct-plugin p{margin:8px 0}
.ct-plugin li{margin:6px 0}
.ct-plugin details{border-top:1px solid #454545;padding:10px 0}
.ct-plugin summary{cursor:pointer;font-weight:600;min-height:28px}
.ct-plugin pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#252525;border-radius:4px;font-size:13px}
.ct-plugin small{color:#b6b6b6}
.ct-plugin a:focus-visible,.ct-plugin summary:focus-visible{outline:2px solid #a9caed;outline-offset:4px}
.ct-plugin footer{border-top:1px solid #454545;margin-top:24px;padding-top:12px}

/* Construction Takeoff public video library. */
body.ct-library { --accent: #a9caed; --border: #353b43; --bg-card: #22252a; color: var(--text-primary); }
.ct-library main { max-width: 1180px; padding: 22px 24px 32px; }
.ct-library .ct-skip { position: absolute; top: -100px; left: 20px; background: var(--bg-card); padding: 12px; z-index: 20; }
.ct-library .ct-skip:focus { top: 8px; }
.ct-library .ct-topnav { align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ct-library .ct-topnav a:first-child { color: var(--text-primary); font-weight: 650; margin-right: auto; }
.ct-library .ct-intro { padding: 26px 0 22px; }
.ct-library .ct-eyebrow { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.ct-library h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.035em; margin: 10px 0; }
.ct-library .ct-intro > p:not(.ct-eyebrow) { max-width: 730px; color: var(--text-secondary); font-size: 15px; }
.ct-library .ct-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 16px 0; font-size: 13px; }
.ct-library .ct-action { display: inline-flex; align-items: center; gap: 16px; padding: 9px 13px; background: #20364c; border: 1px solid #426180; border-radius: 5px; color: #d9ebff; font-size: 13px; font-weight: 600; text-decoration: none; }
.ct-library .ct-action:hover { background: #294761; }
.ct-library .ct-intro .ct-release { font-size: 12px !important; max-width: none !important; }
.ct-library section { scroll-margin-top: 20px; margin-top: 12px; }
.ct-library .ct-section-heading { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.ct-library .ct-section-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.ct-library .ct-section-heading span { font-size: 12px; color: var(--text-secondary); }
.ct-library .ct-watch-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(285px, 1fr); gap: 20px; align-items: start; }
.ct-library .ct-stage { min-width: 0; }
.ct-library video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 6px; background: #0c1016; }
.ct-library .ct-video-copy h3 { margin: 12px 0 4px; font-size: 16px; }
.ct-library .ct-video-copy p { font-size: 13px; color: var(--text-secondary); margin: 4px 0; }
.ct-library .ct-video-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; margin: 12px 0; }
.ct-library .ct-video-links span { margin-left: auto; color: var(--text-secondary); }
.ct-library .ct-transcript { padding: 8px 0; font-size: 12px; }
.ct-library .ct-transcript summary { font-weight: 400; min-height: 24px; }
.ct-library .ct-playlist { display: block; padding: 0; min-width: 0; }
.ct-library .ct-playlist h3 { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin: 0 0 5px; }
.ct-library .ct-playlist h3:not(:first-child) { margin-top: 18px; }
.ct-library .ct-clip { display: grid; grid-template-columns: 14px minmax(0, 1fr) 25px; align-items: center; gap: 8px; font-size: 12px; line-height: 1.35; min-height: 39px; padding: 7px 8px; border-radius: 4px; border: 1px solid transparent; color: var(--text-primary); text-decoration: none; }
.ct-library .ct-clip:hover { background: var(--bg-card); }
.ct-library .ct-clip[aria-current="true"] { background: #20364c; border-color: #426180; color: #d9ebff; }
.ct-library .ct-clip small { font-size: 11px; margin: 0; text-align: right; color: var(--text-secondary); }
.ct-library #ct-video-error { color: #ffcf97; font-size: 13px; }
.ct-library #guides, .ct-library #screenshots { margin-top: 32px; }
.ct-library .ct-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; align-items: start; }
.ct-library .ct-guides details { padding: 0; scroll-margin-top: 20px; }
.ct-library .ct-guides summary { font-size: 13px; padding: 12px 0; min-height: 44px; }
.ct-library .ct-guides p { font-size: 13px; margin: 0 0 12px; }
.ct-library .ct-muted { color: var(--text-secondary); }
.ct-library .ct-screenshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ct-library figure { margin: 0; min-width: 0; }
.ct-library figure > a { display: block; }
.ct-library figure img { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; border: 1px solid var(--border); border-radius: 5px; }
.ct-library figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11px; color: var(--text-secondary); }
.ct-library figcaption a { white-space: nowrap; }
.ct-library .ct-demo { display: flex; gap: 24px; align-items: center; margin-top: 30px; padding: 18px 0; border-top: 1px solid var(--border); }
.ct-library .ct-demo h2 { margin: 0; font-size: 18px; }
.ct-library .ct-demo p { max-width: 710px; font-size: 13px; color: var(--text-secondary); }
.ct-library .ct-demo .ct-action { flex-shrink: 0; }
.ct-library footer { margin-top: 0; font-size: 12px; border-color: var(--border); }
.ct-library footer small { font-size: 11px; }
.ct-library a:focus-visible, .ct-library video:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 820px) {
    .ct-library .ct-watch-layout { grid-template-columns: 1fr; }
    .ct-library .ct-playlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
    .ct-library .ct-playlist h3 { grid-column: 1 / -1; }
    .ct-library .ct-demo { align-items: start; flex-direction: column; gap: 8px; }
}
@media (max-width: 540px) {
    .ct-library main { padding: 16px; }
    .ct-library .ct-topnav { gap: 13px; font-size: 12px; }
    .ct-library .ct-intro { padding-top: 20px; }
    .ct-library .ct-playlist, .ct-library .ct-guides { grid-template-columns: 1fr; }
    .ct-library .ct-screenshots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ct-library figcaption { flex-direction: column; gap: 3px; }
    .ct-library .ct-section-heading { gap: 4px; }
    .ct-library .ct-video-links span { margin-left: 0; }
}