@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Fira Code', 'JetBrains Mono', monospace;
            background: #0d1117;
            color: #c9d1d9;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }
        
        /* Neural network background */
        .neural-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(135deg, rgba(13, 17, 23, 0.85) 0%, rgba(22, 27, 34, 0.9) 100%),
                url('island.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            z-index: -2;
        }
        
        .matrix-rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.02;
            font-family: 'Fira Code', monospace;
            font-size: 12px;
            color: #58a6ff;
            overflow: hidden;
        }
        
        /* VSCode-style window */
        .vscode-window {
            margin: 20px;
            background: #1e1e1e;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(88, 166, 255, 0.15);
            border: 1px solid #30363d;
            min-height: calc(100vh - 40px);
        }
        
        /* Title bar */
        .title-bar {
            background: #2d2d30;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            border-bottom: 1px solid #3e3e42;
            border-radius: 8px 8px 0 0;
        }
        
        .window-controls {
            display: flex;
            gap: 8px;
        }
        
        .control-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .close { background: #ff5f56; }
        .minimize { background: #ffbd2e; }
        .maximize { background: #27ca3f; }
        
        .window-title {
            font-size: 13px;
            color: #cccccc;
            font-weight: 400;
        }
        
        /* Navigation breadcrumb */
        .breadcrumb {
            background: #252526;
            padding: 10px 20px;
            border-bottom: 1px solid #3e3e42;
            font-size: 13px;
        }
        
        .breadcrumb a {
            color: #58a6ff;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        .breadcrumb span {
            color: #7d8590;
            margin: 0 8px;
        }
        
        /* Main content */
        .episode-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            gap: 30px;
            padding: 30px;
        }
        
        /* Episode content */
        .episode-main {
            flex: 1;
            max-width: 800px;
        }
        
        /* Episode header */
        .episode-main .episode-header {
            margin-bottom: 30px;
            display: block;
        }
        
        .episode-main .episode-number {
            background: #58a6ff;
            color: #0d1117;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 15px;
        }
        
        .episode-main .episode-title {
            font-size: 36px;
            font-weight: 700;
            color: #c9d1d9;
            margin-bottom: 10px;
            line-height: 1.2;
        }
        
        .episode-main .episode-byline {
            color: #7d8590;
            font-size: 16px;
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .episode-main .paper-reference {
            color: #58a6ff;
            font-size: 16px;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .episode-main .episode-description {
            font-size: 18px;
            color: #7d8590;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .listen-first {
            background: #252526;
            border: 1px solid #3e3e42;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 30px;
            font-size: 14px;
            color: #dcdcaa;
            text-align: center;
        }

        .episode-artwork {
            width: 80px;
            height: 80px;
            border-radius: 2px;
            border: 2px solid #58a6ff;
            box-shadow: 0 0 15px rgba(88, 166, 255, 0.3);
        }


        
        /* Audio player */
        .audio-player {
            background: #252526;
            border: 1px solid #3e3e42;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }
        
        .audio-player:hover {
            border-color: #58a6ff;
            box-shadow: 0 8px 25px rgba(88, 166, 255, 0.15);
        }

        .artist-headshot{
            width: 100px !important;
            height: 100px !important;
            border-radius: 2px;
            border: 2px solid #58a6ff;
            box-shadow: 0 0 15px rgba(88, 166, 255, 0.3);
            object-fit: cover;
            display: block;
            flex-shrink: 0;
            max-width: 100px;
            max-height: 100px;
        }
        
        .player-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .episode-artwork {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            border: 2px solid #58a6ff;
            box-shadow: 0 0 15px rgba(88, 166, 255, 0.3);
        }
        
        .player-info h3 {
            color: #c9d1d9;
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .player-info p {
            color: #7d8590;
            font-size: 14px;
        }
        
        .audio-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .play-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #58a6ff;
            border: none;
            color: #0d1117;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .play-btn:hover {
            background: #4493f8;
            transform: scale(1.05);
        }
        
        .time-display {
            color: #7d8590;
            font-size: 14px;
            font-family: 'Fira Code', monospace;
        }
        
        .progress-bar {
            flex: 1;
            height: 6px;
            background: #3e3e42;
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }
        
        .progress-fill {
            height: 100%;
            background: #58a6ff;
            border-radius: 3px;
            width: 15%;
            position: relative;
        }
        
        .progress-handle {
            position: absolute;
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: #58a6ff;
            border-radius: 50%;
            cursor: pointer;
        }
        
        /* Interlude styling */
        .interlude {
            background: #161b22;
            border-left: 4px solid #58a6ff;
            border: 1px solid #30363d;
            border-left: 4px solid #58a6ff;
            border-radius: 8px;
            padding: 25px;
            margin: 30px 0;
            font-style: italic;
            color: #c9d1d9;
            transition: all 0.3s ease;
        }
        
        .interlude:hover {
            border-color: #58a6ff;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(88, 166, 255, 0.15);
            background: rgba(88, 166, 255, 0.05);
        }
        
        .interlude-title {
            color: #58a6ff;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .interlude-quote {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        /* Episode content sections */
        .content-section {
            margin-bottom: 40px;
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        .content-section:hover {
            border-color: #58a6ff;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(88, 166, 255, 0.15);
        }
        
        .section-title {
            color: #58a6ff;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-content {
            color: #c9d1d9;
            line-height: 1.7;
            font-size: 16px;
        }
        
        .section-content p {
            margin-bottom: 15px;
        }
        
        .section-content ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }
        
        .section-content li {
            margin-bottom: 8px;
        }
        
        /* Story verses */
        .story-verse {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .story-verse p {
            margin-bottom: 8px;
        }
        
        .story-emphasis {
            color: #dcdcaa;
            font-weight: 500;
        }
        
        /* Sound effect notation */
        .sound-effect {
            color: #7d8590;
            font-style: italic;
            font-size: 14px;
            margin: 15px 0;
            padding-left: 20px;
            border-left: 2px solid #3e3e42;
        }
        
        /* Sidebar */
        .episode-sidebar {
            width: 300px;
            flex-shrink: 0;
        }
        
        .sidebar-section {
            background: #252526;
            border: 1px solid #3e3e42;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .sidebar-section:hover {
            border-color: #58a6ff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(88, 166, 255, 0.15);
        }
        
        .sidebar-title {
            color: #58a6ff;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .episode-meta {
            list-style: none;
        }
        
        .episode-meta li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(62, 62, 66, 0.5);
        }
        
        .episode-meta li:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        
        .meta-label {
            color: #7d8590;
            font-weight: 500;
        }
        
        .meta-value {
            color: #c9d1d9;
            font-weight: 600;
        }
        
        /* Subscribe buttons */
        .subscribe-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .subscribe-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: transparent;
            border: 1px solid #3e3e42;
            border-radius: 6px;
            color: #c9d1d9;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .subscribe-btn:hover {
            border-color: #58a6ff;
            background: rgba(88, 166, 255, 0.1);
            transform: translateX(5px);
        }
        
        .subscribe-btn i {
            color: #58a6ff;
            font-size: 16px;
        }
        
        /* Share buttons */
        .share-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .share-btn {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #3e3e42;
            background: transparent;
            color: #7d8590;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .share-btn:hover {
            border-color: #58a6ff;
            color: #58a6ff;
            background: rgba(88, 166, 255, 0.1);
            transform: translateY(-2px);
        }
        
        /* LLM-Friendly Boxes */

        .llm-box {
            background: #161b22;
            border: 1px solid #30363d;
            border-left: 4px solid #7ee787;
            border-radius: 8px;
            padding: 25px;
            margin: 30px 0;
            color: #c9d1d9;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .llm-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(126, 231, 135, 0.2);
            border-color: #7ee787;
            background: rgba(126, 231, 135, 0.05);
        }

        .llm-box:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #58a6ff, #7ee787);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .llm-box:hover:before {
            opacity: 1;
        }

        .llm-box-title {
            color: #7ee787;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .llm-box-content {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 0;
            font-style: italic;
        }

        .llm-box:hover:before {
            opacity: 1;
        }

        .atomic-answer {
            background: #0c0c0c;
            border: 1px solid #3e3e42;
            border-radius: 8px;
            padding: 15px;
            margin: 30px 0;
            font-family: 'Fira Code', monospace;
        }

        .atomic-answer .prompt {
            color: #58a6ff;
        }

        .atomic-answer .command {
            color: #f85149;
        }

        .atomic-answer .output {
            color: #7ee787;
            margin-left: 0;
            white-space: pre-wrap;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .vscode-window {
                margin: 10px;
            }
            
            .episode-container {
                flex-direction: column;
                padding: 20px;
                gap: 20px;
            }
            
            .episode-sidebar {
                width: 100%;
            }
            
            .episode-title {
                font-size: 28px;
            }
            
            .audio-controls {
                flex-wrap: wrap;
            }
        }

/* Episodes Index Page Styles */
.episodes-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: 48px;
    font-weight: 700;
    color: #c9d1d9;
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 20px;
    color: #7d8590;
    margin-bottom: 15px;
}

.episode-count {
    color: #58a6ff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.sort-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sort-btn {
    background: #252526;
    border: 1px solid #3e3e42;
    color: #c9d1d9;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Fira Code', monospace;
    transition: all 0.3s ease;
}

.sort-btn:hover {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.1);
}

.sort-btn.active {
    background: #58a6ff;
    color: #0d1117;
    border-color: #58a6ff;
}

.search-box {
    background: #252526;
    border: 1px solid #3e3e42;
    color: #c9d1d9;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Fira Code', monospace;
    min-width: 300px;
    transition: all 0.3s ease;
}

.search-box:focus {
    outline: none;
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.05);
}

.search-box::placeholder {
    color: #7d8590;
}

.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.episode-card {
    background: #252526;
    border: 1px solid #3e3e42;
    border-radius: 8px;
    padding: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    display: block;
}

.episode-card:hover {
    border-color: #58a6ff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(88, 166, 255, 0.2);
}

.episode-artwork {
    font-size: 64px;
    text-align: center;
    margin-bottom: 20px;
}

.episode-info {
    position: relative;
}

.episode-card .episode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.episode-card .episode-number {
    background: #58a6ff;
    color: #0d1117;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.episode-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-available {
    background: rgba(126, 231, 135, 0.2);
    color: #7ee787;
}

.status-coming-soon {
    background: rgba(255, 191, 0, 0.2);
    color: #ffbf00;
}

.episode-title {
    font-size: 24px;
    font-weight: 600;
    color: #c9d1d9;
    margin-bottom: 10px;
    line-height: 1.3;
}

.episode-paper {
    font-size: 13px;
    color: #58a6ff;
    margin-bottom: 15px;
    font-style: italic;
}

.episode-description {
    font-size: 14px;
    color: #7d8590;
    line-height: 1.6;
    margin-bottom: 20px;
}

.episode-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #7d8590;
}

.meta-item i {
    color: #58a6ff;
}

.episode-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tag {
    background: rgba(88, 166, 255, 0.1);
    color: #58a6ff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(88, 166, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag:hover {
    background: rgba(88, 166, 255, 0.2);
    border-color: #58a6ff;
}

.tag.active {
    background: #58a6ff;
    color: #0d1117;
    border-color: #58a6ff;
}

.episode-play-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* Site Player */
.site-player-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #252526;
    border-top: 1px solid #3e3e42;
    padding: 10px 20px;
    z-index: 1000;
}

#site-player {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-title {
        font-size: 36px;
    }
    
    .episodes-grid {
        grid-template-columns: 1fr;
    }
    
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        min-width: 100%;
    }
}