:root {
    --bg-color: #0d1117;
    --text-color: #e6edf3;
    --primary-color: #58a6ff;
    --secondary-color: #8b949e;
    --glass-bg: rgba(22, 27, 34, 0.7);
    --glass-border: rgba(240, 246, 252, 0.1);
    --accent-glow: rgba(88, 166, 255, 0.15);
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="light"] {
    --bg-color: #ffffff;
    --text-color: #24292f;
    --primary-color: #0969da;
    --secondary-color: #57606a;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(27, 31, 35, 0.15);
    --accent-glow: rgba(9, 105, 218, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Cursor */
.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
}

.cursor-follower {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}

/* Glassmorphism Utilities */
.glass-nav,
.glass-card,
.glass-footer,
.glass-container {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.glass-nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    overflow: visible;
    /* Ensure nothing is clipped */
}

.glass-card {
    border-radius: 16px;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 var(--accent-glow);
    border-color: var(--primary-color);
}

/* Navigation */
.logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color);
    letter-spacing: -1px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

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

.theme-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: rotate(15deg);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-content {
    max-width: 600px;
    z-index: 1;
}

.greeting {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--text-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero h2 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-bottom: 2.5rem;
    max-width: 480px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--accent-glow);
    filter: brightness(1.1);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--text-color);
    margin-left: 1rem;
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Social Links */
.social-links {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: var(--secondary-color);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* Hero Visuals */
.hero-visual {
    position: relative;
    width: 400px;
    height: 400px;
}

.float {
    position: absolute;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    animation: float 6s ease-in-out infinite;
}

.float i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.float:nth-child(1) {
    top: 20%;
    left: 0;
}

.float:nth-child(2) {
    top: 50%;
    right: -20px;
}

.float:nth-child(3) {
    bottom: 10%;
    left: 20%;
}

.delay-1 {
    animation-delay: -2s;
}

.delay-2 {
    animation-delay: -4s;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Stats Section */
.stats-section {
    padding: 2rem 10%;
    margin-top: -50px;
    z-index: 10;
    position: relative;
}

.glass-container {
    padding: 1.5rem 3rem;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.visitor-counter,
.status-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visitor-counter i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

#visitor-count {
    font-size: 1.8rem;
    font-weight: 700;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #2ea043;
    border-radius: 50%;
    box-shadow: 0 0 10px #2ea043;
    margin-bottom: 0.5rem;
}

a.status-indicator {
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease;
    cursor: pointer;
}

a.status-indicator:hover {
    transform: translateY(-2px);
}

a.status-indicator:hover .dot {
    box-shadow: 0 0 15px #2ea043, 0 0 30px #2ea043;
}



/* Sections */
.section {
    padding: 6rem 10%;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* About Grid */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
}

.about-image {
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    color: var(--secondary-color);
}

.profile-placeholder i {
    font-size: 8rem;
    opacity: 0.5;
}

.certifications {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.cert-badge {
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.skill-category h3 {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--primary-color);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tags span {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.tags span:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.project-header i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.project-tech {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.project-tech span {
    border: 1px solid var(--secondary-color);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
}

.btn-sm {
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-sm:hover {
    color: var(--primary-color);
}

/* Modern Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--secondary-color);
    opacity: 0.3;
}

.timeline-item {
    margin-bottom: 2rem;
    margin-left: 50px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 24px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid var(--bg-color);
}

.timeline-date {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Contact */
.contact-container {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.big-btn {
    margin-top: 2rem;
    padding: 1rem 3rem;
    font-size: 1.1rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 5%;
    color: var(--secondary-color);
}

.footer-links {
    margin-top: 0.5rem;
}

.footer-links a {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

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

/* Responsive */
/* Mobile Responsive Updates */
.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    margin-left: auto;
    /* Push to right if needed, but flex handles it */
    padding: 0.5rem;
    z-index: 2000;
}

.nav-controls {
    z-index: 2001;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 768px) {
    .glass-nav {
        padding: 1rem 1.5rem;
        justify-content: space-between;
        /* Ensure spacing */
    }

    .mobile-menu-btn {
        display: block;
        order: 3;
        /* Logo(1) - Controls(2) - Menu(3) */
        position: relative;
        z-index: 1002;
    }

    .logo {
        order: 1;
    }

    .nav-controls {
        order: 2;
        margin-left: auto;
        /* Push controls to right, next to menu btn */
        margin-right: 1rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
        border-bottom: 1px solid var(--glass-border);
        text-align: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        z-index: 1001;
    }

    .nav-links.mobile-active {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 8rem 5% 4rem;
    }

    .hero-content {
        margin-bottom: 3rem;
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero-visual {
        width: 320px;
        height: 320px;
        margin: 0 auto;
    }

    .float {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }

    .float:nth-child(1) {
        top: 0;
        left: 0;
    }

    .float:nth-child(2) {
        top: 40%;
        right: -10px;
    }

    .float:nth-child(3) {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        height: 300px;
        margin-bottom: 2rem;
    }

    .about-actions {
        justify-content: center;
        display: flex;
    }

    .certifications {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-section {
        margin-top: 0;
        padding: 2rem 5%;
    }

    .glass-container {
        flex-direction: column;
        gap: 2.5rem;
        padding: 2rem;
    }

    .projects-grid,
    .skills-grid {
        gap: 2.5rem;
    }

    .timeline-item {
        margin-bottom: 3rem;
    }

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

    .back-nav {
        left: 1rem;
        top: 1rem;
    }

    .section {
        padding: 6rem 5%;
    }

    .timeline::before {
        left: 10px;
    }

    .timeline-item {
        margin-left: 30px;
    }

    .timeline-item::before {
        left: -28px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    /* .gallery-grid handled by main definition for responsiveness */
}

/* Modal Styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 2000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8);
    /* Black w/ opacity */
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--bg-color);
    margin: 5% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid var(--glass-border);
    width: 80%;
    /* Could be more or less, depending on screen size */
    max-width: 1000px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close-modal {
    color: var(--secondary-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

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

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2005;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2006;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

/* Lightbox Navigation */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2007;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--primary-color);
}

/* Amazon Photos / Google Photos Style Masonry Layout */
.gallery-grid {
    display: block;
    /* Masonry uses columns, not grid */
    column-count: 5;
    column-gap: 16px;
    padding-bottom: 40px;
    margin-top: 30px;
}

.gallery-item {
    break-inside: avoid;
    /* Prevent images from splitting across columns */
    margin-bottom: 16px;
    /* Vertical gap */
    border-radius: 8px;
    /* Slightly rounder, softer look */
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    /* Clean, minimal look - removed dark box background */
    background: transparent;
    border: none;
    box-shadow: none;
    /* Flat by default like Google Photos */
    transition: filter 0.2s ease, transform 0.2s ease;
}

.gallery-item img {
    width: 100%;
    height: auto;
    /* Maintain natural aspect ratio */
    display: block;
    /* Remove bottom whitespace */
    transition: transform 0.4s ease;
    border-radius: 8px;
}

/* Hover Effect - Subtle lift */
.gallery-item:hover {
    transform: translateY(-2px);
    z-index: 2;
    /* Bring to front */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Add shadow only on hover */
}

.gallery-item:hover img {
    filter: brightness(1.05);
    /* Slight brighten */
}

/* Responsive Columns */
@media (max-width: 1200px) {
    .gallery-grid {
        column-count: 4;
    }
}

@media (max-width: 900px) {
    .gallery-grid {
        column-count: 3;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        column-count: 2;
        column-gap: 8px;
    }

    .gallery-item {
        margin-bottom: 8px;
    }
}

/* Loader */
.gallery-loader {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--secondary-color);
    padding: 3rem;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Profile Image */
.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* YAML Skills Code Block */
.code-block-container {
    background: #1e1e1e !important;
    /* Dark editor background */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: 'Fira Code', 'Consolas', monospace;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.code-header {
    background: #2d2d2d;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.code-header .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.code-header .dot.red {
    background: #ff5f56;
}

.code-header .dot.yellow {
    background: #ffbd2e;
}

.code-header .dot.green {
    background: #27c93f;
}

.code-header .filename {
    margin-left: 10px;
    color: #aeaeae;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.code-block-container pre {
    margin: 0;
    padding: 20px;
    color: #d4d4d4;
    overflow-x: auto;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Rudimentary YAML Syntax Highlighting (if no library) */
/* Ideally, we'd use PrismJS, but we can do some basic coloring via CSS logic if spans were added.
   For now, we rely on the clean monospaced look, but let's assume we might add spans later or if the user wants auto-highlighting.
   Since we pasted raw text, let's give it a nice base color. */
code {
    color: #e6e6e6;
}

/* Mini Terminal Cards Design */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 0 1rem;
}

/* Terminal Card - Default Dark Mode */
.terminal-card {
    background: #161b22;
    /* Solid Dark BG for contrast in Dark Mode */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

/* Light Mode Overrides for Terminal - Natural Blend */
[data-theme="light"] .terminal-card {
    background: rgba(255, 255, 255, 0.9);
    /* Light/White BG */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.terminal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-color);
}

[data-theme="light"] .terminal-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.terminal-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .terminal-header {
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.terminal-dots {
    display: flex;
    gap: 6px;
    margin-right: 12px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-title {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #888;
}

.terminal-body {
    padding: 15px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    text-align: left;
}

/* YAML Syntax Highlighting - Dark Mode Defaults */
.yaml-key {
    color: #58a6ff;
    /* Light Blue */
    display: block;
    margin-bottom: 5px;
}

/* Light Mode Overrides for YAML */
[data-theme="light"] .yaml-key {
    color: #0d47a1;
    /* Darker Blue for Light Mode */
}

.yaml-list {
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 10px;
}

[data-theme="light"] .yaml-list {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.yaml-item {
    display: block;
    color: #8b949e;
    /* Light Grey */
    margin-bottom: 2px;
}

[data-theme="light"] .yaml-item {
    color: #555;
    /* Darker Grey */
}

.yaml-val {
    color: #e6edf3;
    /* White/Light Text */
}

[data-theme="light"] .yaml-val {
    color: #1f2328;
    /* Dark/Black Text */
    font-weight: 500;
}