/* Base Styles */
        html { scroll-behavior: smooth; background-color: #518285; min-height: 100%; }
        .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        :focus-visible { outline: 2px solid #86d8dd; outline-offset: 2px; }
        a {
            color: #ffffff;
            font-weight: 900;
        }

        a:visited {
            color: rgb(151, 244, 244);
        }  

        html {
            height: 100%;
            min-height: 100%;
        }

        body {
            height: auto;
            min-height: 100vh;
            background-color: #518285;
            background-image: radial-gradient(ellipse at center, #86d8dd 0%, #86d8dd 30%, #518285 70%, #518285 100%), url(gridnew.png);
            background-size: 100vw 300vh, 60px 60px;
            background-blend-mode: overlay;
            background-repeat: no-repeat, repeat;
            background-attachment: scroll, scroll;
            background-position: center top, 0 0;
            display: block;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        /* Full-page inset rounded border overlay */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 18px;
            border: 10px solid #000000;
            box-shadow: inset 0 0 0 2px #000000, inset 0 0 24px rgba(0, 0, 0, 0.8);
            pointer-events: none;
            z-index: 2;
        }

        /* Typography */
        h1, h2, h3, h4, p, a, th, td {
            font-family: 'Rombyte';
            src: url('rombyte.ttf') format('truetype');
            text-shadow: 0px 1px 1px rgba(47, 47, 47, 0.7);
            opacity: 0.7;
        }

        /* Override opacity for tracklist links to improve readability */
        #tracklist td a {
            opacity: 1 !important;
            color: #ffffff !important;
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.6) !important;
            font-weight: 600 !important;
        }

        #tracklist td a:hover {
            color: #86d8dd !important;
            text-shadow: 0px 2px 6px rgba(134, 216, 221, 0.6), 0px 1px 3px rgba(0, 0, 0, 0.8) !important;
        }

        h1, h2, h3, h4 {
            padding: 0;
            margin: 0;
        }

        /* Font Faces */
        @font-face {
            font-family: 'Rombyte';
            src: url('rombyte.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Ari';
            src: url('ari.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* Layout Containers */
        #frame-container {
            min-height: 100dvh;
            background-color: transparent;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
            max-width: none;
            width: 100%;
            box-sizing: border-box;
            padding: 16px; /* keep content off the border overlay */
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
            padding-bottom: calc(16px + constant(safe-area-inset-bottom));
        }

        /* Extra bottom clearance for iOS Safari bottom toolbar on small screens */
        @supports (-webkit-touch-callout: none) {
            @media (max-width: 600px) {
                #frame-container {
                    padding-bottom: calc(16px + 44px);
                }
                html { scroll-padding-bottom: 44px; }
                #main { padding-bottom: 44px; }
                /* Extend background further on iPhone to prevent cutoff */
                body {
                    background-size: 100vw 500vh, 60px 60px;
                }
            }
            /* On iOS Safari, avoid fixed backgrounds to prevent toolbar translucency showing page */
            body { background-attachment: scroll, scroll; }
            /* Solid guard behind iOS Safari bottom toolbar - taller to account for scroll physics */
            .ios-toolbar-guard {
                position: fixed;
                left: 0;
                right: 0;
                bottom: -8px;
                height: 42px;
                background: #000000;
                z-index: 9999;
                pointer-events: none;
                display: block;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        }

        #main {
            background: none;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            min-height: 100dvh;
            padding-bottom: calc(24px + env(safe-area-inset-bottom));
            padding-bottom: calc(24px + constant(safe-area-inset-bottom));
        }

        /* Left Panel Styles */
        #left {
            width: 50%;
            max-width: 400px;
            padding: 2rem;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        #left::-webkit-scrollbar {
            display: none;
        }

        /* Right Panel Styles */
        #right {
            flex: 1;
            gap: 40px;
            padding: 50px 50px 0 50px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

        /* Header Elements */
        #name {
            margin: 0;
            padding: 0;
        }

        #title {
            font-family: Rombyte, monospace;
            transform: translate(-3px, 10px);
            margin-top: 10px;
        }

        /* Button Styles */
        
        
        .button2:hover {
            color: #ffffff;
            box-shadow: 0 12px 16px 0 rgba(34, 34, 34, 0.24),0 17px 50px 0 rgba(0,0,0,0.19);
            font-size: 19px;
            background-color: rgba(135, 206, 250, 0.3);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            background-image: radial-gradient(circle at center, #86d8dd, #518285), url(gridnew.png);
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 720px;
        }


        .modal-content p ul li {
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        .modal-content h2, h3, h4, h5, h6 {
            font-family: 'Rombyte';
            src: url('rombyte.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .close {
            color: #4d4c4c;
            float: right;
            font-size: 48px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: rgb(34, 34, 34);
            text-decoration: none;
            cursor: pointer;
        }


        #title {
            font-family: 'Rombyte';
            src: url('rombyte.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            margin-top: 10px;
            color: #ffffff;
        }

        #desc {
            font-family: Ari, monospace;
            font-size: 24px;
            font-weight: 400;
            margin-top: 40px;
            padding-left: 0;
            padding-right: 0;
            width: calc(100% - 24px);
            box-sizing: border-box;
        }

        /* Add padding to the mobile intro paragraph */
        #mobile-intro p {
            padding-left: 24px;
            padding-right: 24px;
        }

        @media (max-width: 1100px) {
            #desc { padding-left: 0; padding-right: 0; width: calc(100% - 20px); }
            section#mobile-intro { 
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
                padding-top: 1.5rem !important;
                padding-bottom: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
            #mobile-intro header { 
                padding-left: 0; 
                padding-right: 0; 
            }
            #mobile-intro section {
                padding-left: 0;
                padding-right: 0;
            }
            #mobile-intro p { 
                padding-left: 0; 
                padding-right: 0; 
                width: 100%;
                margin-top: 10px;
                margin-bottom: 0;
                box-sizing: border-box;
                text-align: justify;
            }
        }

        .opening {
            font-family: Rombyte, monospace;
            font-size: 10px!important;
            opacity: 0.7;
        }

        .service {
            font-family: Ari, monospace;
            font-size: 20px!important;
            opacity: 0.7;
        }

        .info img {
            height: 35px;
            width:35px;
            opacity: 0.7;
            filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.5));
            display: none;
        }

        .infodesktop img {
            height: 40px;
            width:40px;
            opacity: 0.7;
            filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.5));
            cursor: default;
        }

        #battery img {
            height: 46px;
            transform: rotate(90deg);
            width: 46px;
            opacity: 0.7;
            filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.5));
        }

        #battery {
            display: flex;
            font-family: Rombyte, monospace;
            align-items: center;
            gap: 10px;
        }

        #songlist { 
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        #songlist::-webkit-scrollbar {
            display: none;  /* Chrome, Safari and Opera */
        }

        #resume-links p {
            margin: 0;
            padding: 0;
            width: calc(100% - 24px);
            box-sizing: border-box;
        }
        
        #resume-links p + p {
            margin-top: 6px;
        }
        
        #resume-links .button {
            margin: 0;
        }

        .button {
            background-color: #1a3a3d; /* Darker background for better contrast */
            border: 3px solid #86d8dd; /* Bright cyan border to stand out */
            color: #ffffff; /* White text for maximum contrast */
            padding: 10px 14px;
            text-align: left;
            font-family: 'Rombyte';
            font-weight: bold;
            font-style: normal;
            font-size: 18px;
            text-decoration: none;
            margin: 20px 6; /* Changed from 10px 6px */
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            width: 100%; /* Fill parent p tag which has calc(100% - 24px) */
            display: flex; /* Align icon + text */
            align-items: center; /* center vertically */
            justify-content: flex-start; /* left align content */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Add shadow for depth */
            opacity: 1 !important; /* Override global opacity for better visibility */
            box-sizing: border-box;
        }

        .button2 {
            background-color: #1a3a3d; /* Match base button style */
            border: 3px solid #86d8dd;
            color: #ffffff;
            opacity: 1 !important; /* Ensure full opacity */
        }

        .button2:hover {
            color: #ffffff;
            box-shadow: 0 6px 12px rgba(134, 216, 221, 0.5), 0 4px 8px rgba(0,0,0,0.3);
            text-align: left;
            font-family: 'Rombyte';
            font-weight: bold;
            font-style: normal;
            font-size: 19px;
            text-decoration: none;
            background-color: #86d8dd; /* Bright cyan background on hover */
            border-color: #ffffff; /* White border on hover */
        }

        .carousel { margin-top: 20px; }
        .carousel img {
            max-width: 100%;
            height: 400px;
            width: auto;
            object-fit: contain;
            display: none;
        }
        .carousel img.active { display: block; }
        .carousel-nav { text-align: center; margin-top: 10px; }
        .carousel-nav button { margin: 0 5px; }

        @media (max-width: 1100px) {
            .music-links a {
                padding: 4px 6px!important;
            }

            /* Stop centering entire page so mobile intro can appear above */
            body { display: block; }

            .infodesktop {
                display: none;
            }

            .info img {
                display: block;
            }
            .opening {
                display: none;
            }
            .music-links img {
                margin-right: 4px!important;
            }

            .service {
                font-size: 11px!important;
            }

            #player {
                min-height: auto !important;
                height: auto !important;
                top: 0 !important;
                z-index: 500 !important;
                flex-direction: column; /* stack vertically on mobile */
                align-items: stretch;
                overflow: hidden;
            }
            /* Smaller song title on mobile */
            #songTitle { font-size: 18px; line-height: 1.2; }
            #songTitle a { font-size: inherit; }
            .cover-art { 
                flex: 0 0 auto !important; 
                width: 100% !important; 
                max-width: 100% !important;
                height: auto !important;
                min-height: auto !important;
                display: flex !important;
                flex-direction: row !important; /* Keep side-by-side layout on mobile */
                justify-content: center !important;
                align-items: center !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .cover-art img, .cover-art video { 
                width: 50% !important; /* Each takes half the width */
                max-width: 50% !important;
                height: auto !important; 
                max-height: 300px !important; 
                object-fit: contain !important;
                margin: 0 !important;
                display: block !important;
                flex: 0 0 50% !important; /* Each occupies exactly 50% */
            }
            .song-info { 
                flex: 0 0 auto;
                width: 100%;
                min-width: 0; 
                padding: 10px 1.5rem !important; /* Reduced vertical padding */
                text-align: left !important;
                align-items: flex-start !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-start !important;
                margin: 0 !important;
            }
            .song-info, .song-info h2, .song-info p, #songTitle a { 
                overflow-wrap: anywhere; 
                word-break: break-word; 
            }
            .song-info h2, .song-info p {
                text-align: left !important;
                width: 100% !important;
            }
            #desc {
                font-size: 19px;
                margin-top: 16px;
                margin-bottom: 8px;
            }

            #title {
                font-size: 25px;
            }
            #main {
                flex-direction: column;
                height: fit-content;
                box-sizing: border-box;
            }

            /* Reorder columns so Professional Experience appears before sidebar on narrow screens */
            #right { 
                order: 1;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                margin-top: 0;
            }
            /* Maximize hero section width on mobile */
            @media (max-width: 480px) {
                #right { 
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }
                #player {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                }
            }
            #left { order: 2; }
            
            /* Match padding on player and tracklist to mobile-intro header */
            #player {
                padding-left: 0;
                padding-right: 0;
                margin-top: 0;
            }
            .song-info {
                display: none;
            }
            #songlist, #tracklist {
                padding-left: 0;
                padding-right: 0;
            }
            #tracklist th, #tracklist td {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                padding-top: 6px;
                padding-bottom: 6px;
                font-size: 16px;
            }
            #tracklist th {
                font-size: 16px;
            }
            #tracklist td.year-range {
                font-size: 8px;
                width: 35px;
                min-width: 35px;
                max-width: 35px;
                padding: 6px 4px;
            }
            .song-info {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            /* Mobile intro appears first on narrow screens */
            section#mobile-intro { order: 0; display: block !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; padding-top: 1.5rem !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

            /* Hide original banner + description inside sidebar on mobile to avoid duplication */
            #left #banner,
            #left #desc-section { display: none; }

            

            #battery {display:none;}

            tr td:first-child {
                min-width: 75px;
            }

            #left {
                width: 100%;
                max-width: 100%;
                padding: 1rem;
                height: auto;
                overflow-y: visible;
                margin-bottom: 20px;
                box-sizing: border-box;
            }

            #frame-container {
                height: auto;
                min-height: 100vh;
                overflow: visible;
            }

            #main {
                flex-direction: column;
                height: auto;
                min-height: auto;
                overflow: visible;
                padding-bottom: 20px;
            }

            body {
                height: auto;
                min-height: 100vh;
                overflow-y: auto;
            }

            html, body {
                height: auto;
                margin-bottom: 0px;
                margin-top: 0px;
            }

            /* Center utility sections on mobile */
            #left { display: flex; flex-direction: column; align-items: flex-start; padding-left: 1.5rem; padding-right: 1rem; }
            #resume-links, #tools-section, #footer { width: 100%; margin: 0; text-align: left; }
            #resume-links p {
                width: 100%;
                box-sizing: border-box;
            }
            #resume-links .button { width: 100%; margin: 20px 6; justify-content: flex-start; }
            #resume-links .pdf-icon { margin-right: 8px; }
            #tools-section h4 { margin: 12px 0; }
            #tools-section ul { list-style-position: inside; padding-left: 0; margin: 0; text-align: left; }
            #footer h4 { margin: 12px 0; text-align: left; }
            #footer p { text-align: left; }
            #contactForm {
                width: 100% !important;
                box-sizing: border-box;
            }
        } 

        a {
            text-decoration: none;
        }

        /* Mobile intro is hidden by default (shown on narrow screens) */
        #mobile-intro { 
            display: none; 
            background: none; /* inherit unified body background */
            margin-bottom: 0.5rem; /* Reduced spacing below intro */
        }

        .pdf-icon {
            width: 22px;
            height: 22px;
            margin-right: 10px;
            vertical-align: middle;
        }

        

        #player {
            display: flex;
            min-height: auto;
            height: auto;
            background-color: black;
            color: #86d8dd;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-image: url(grid-inverted.png);
            background-size: 60px 60px;
            position: relative; 
            cursor: default; 
            align-items: stretch; /* Stretch both sections to same height */
        }

        .cover-art {
            flex: 1;
            max-width: 600px; /* Wider to accommodate both image and video side-by-side */
            position: relative;
            background-color: #000;
            display: flex;
            flex-direction: row; /* Display image and video side-by-side */
            justify-content: center;
            align-items: center;
            gap: 0; /* No gap between image and video */
            padding: 0;
            margin: 0;
        }

        .cover-art img, .cover-art video {
            width: 50%; /* Each takes half the width */
            height: auto;
            max-height: 300px;
            display: block;
            position: relative;
            filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.5));
            z-index: 1;
            cursor: pointer;
            object-fit: contain;
            margin: 0;
            flex: 0 0 50%; /* Each occupies exactly 50% of the container */
        }

        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(grid-inverted.png);
            background-size: 41px;
            mix-blend-mode: difference;
            background-color: black;
            z-index: 7;
            pointer-events: none;
        }

        .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10; 
        }

        #player:hover .play-overlay {
            opacity: 1;
        }

        .play-overlay img {
            width: 48px;
            height: 48px;
        }

        .play-icon, .pause-icon {
            width: 48px;
            height: 48px;
        }

        .song-info {
            flex: 1;
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Top align */
            align-items: flex-start; /* Left align */
            text-align: left; /* Left align text */
            margin: 0;
        }

        .song-info h2 {
            font-family: 'Rombyte', monospace;
            font-size: 24px;
            margin-bottom: 10px;
            text-align: left;
            width: 100%;
        }

        .song-info p {
            font-family: 'Ari', monospace;
            font-size: 18px;
            margin: 5px 0;
            text-align: left;
            width: 100%;
        }

        #musicLinks {
            margin-top: 10px;
            font-size: 16px;
        }

        #musicLinks a {
            color: #86d8dd;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        #musicLinks a:hover {
            opacity: 0.8;
        }

        .music-links {
            display: flex;
            z-index: 5618;
            gap: 10px;
            margin-top: 10px;
        }

        .music-links a {
            display: flex;
            align-items: center;
            background-color: rgba(127, 156, 104, 0.2);
            padding: 8px 12px;
            text-decoration: none;
            color: #9fdd86;
            transition: background-color 0.3s ease;
        }

        .music-links a:hover {
            background-color: rgba(29, 246, 148, 0.894);
        }

        .music-links img {
            width: 24px;
            height: 24px;
            filter: invert(77%) sepia(8%) saturate(1558%) hue-rotate(50deg) brightness(75%) contrast(79%);
            margin-right: 10px;
        }

        .link-text {
            display: flex;
            flex-direction: column;
        }

        .link-text span:first-child {
            font-size: 12px;
            opacity: 0.8;
        }

        .link-text span:last-child {
            font-weight: bold;
        }

        #tracklist {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Ari', monospace;
        }

        #tracklist th, #tracklist td {
            padding: 10px;
            text-align: left;
            border-bottom: 3px solid rgba(40,40,40,0.7);
            font-size: 20px;
        }

        #tracklist th {
            font-family: 'Rombyte', monospace;
            font-weight: bold;
        }

        #tracklist td {
            font-weight: 600;
        }

        #tracklist td.year-range {
            font-size: 10px;
            font-weight: normal;
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            padding: 10px 8px;
            text-align: center;
            line-height: 1.2;
            white-space: normal;
        }

        #tracklist tbody tr {
            transition: background-color 0.3s ease;
        }

        #tracklist tbody tr:hover {
            background-color: rgba(112, 152, 205, 0.1);
        }

        .date-header td {
            font-family: 'Rombyte', monospace;
            font-size: 16px!important;
            padding: 20px 10px 10px;
            border-bottom: none;
            color: #000;
        }

        #tracklist tbody tr:not(.date-header) {
            transition: background-color 0.3s ease;
        }

        #tracklist tbody tr:not(.date-header):hover {
            background-color: rgba(135, 206, 250, 0.3);
        }

        /* Add this new rule to ensure only links have a pointer cursor */
        #tracklist tbody tr td:not(:last-child) {
            cursor: default;
        }

        #tracklist tbody tr td:last-child a {
            cursor: default;
        }

        .hover-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: #86d8dd;
            padding: 10px 20px;
            border-radius: 4px;
            font-family: 'Rombyte', monospace;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 2;
            pointer-events: none;
        }

        .cover-art:hover .hover-text {
            opacity: 1;
        }

        /* Add an additional breakpoint for very small screens */
        @media (max-width: 480px) {
            #desc {
                font-size: 16px; /* Even smaller font size for very small screens */
            }
            /* Stack player vertically with larger image/video */
            #player { 
                flex-direction: column !important; 
                align-items: stretch;
                min-height: auto;
            }
            .cover-art { 
                flex: 0 0 auto; 
                width: 100%;
                max-width: 100%;
                height: auto;
                min-height: auto;
                display: flex;
                flex-direction: row; /* Keep side-by-side layout */
                padding: 0;
                margin: 0;
            }
            .cover-art img, .cover-art video { 
                width: 50%;
                max-width: 50%;
                height: auto;
                max-height: 300px;
                object-fit: contain;
                flex: 0 0 50%;
            }
            .song-info { 
                flex: 0 0 auto;
                width: 100%;
                padding: 10px 1.5rem !important; /* Reduced vertical padding */
                text-align: left !important;
                align-items: flex-start !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-start !important;
                margin: 0;
            }
            #songTitle { font-size: 18px; line-height: 1.2; }
            #songTitle a { font-size: inherit; }
        }

        /* Ensure mobile-intro is visible on small screens (placed last to win cascade) */
        @media (max-width: 1100px) {
            #mobile-intro { display: block !important; order: 0; padding-left: 1.5rem !important; padding-right: 1.5rem !important; padding-top: 1.5rem !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
            #mobile-intro header { padding-left: 0 !important; padding-right: 0 !important; }
            #mobile-intro section {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            #mobile-intro p {
                margin-top: 10px !important;
                margin-bottom: 0 !important;
                text-align: justify !important;
            }
            #left #banner, #left #desc-section { display: none !important; }
        }
        /* Sticky Header */
        #site-header {
            position: sticky;
            top: 0;
            z-index: 2000;
            background-color: #000000;
            /* Worn black plastic effect: subtle highlight + vertical sheen + fine texture */
            background-image:
                radial-gradient(120% 50% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.15) 100%),
                url('grid-inverted.png');
            background-size: 100% 100%, 100% 100%, 40px 40px;
            background-repeat: no-repeat, no-repeat, repeat;
            background-blend-mode: screen, normal, multiply;
            border-bottom: 1px solid rgba(255,255,255,0.10);
        }
        #site-header .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
        }
        .header-logo { display: inline-flex; align-items: center; gap: 8px; }
        .logo-placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px; height: 32px;
            border: 2px solid rgba(255,255,255,0.7);
            color: rgba(255,255,255,0.9);
            font-family: 'Rombyte';
            font-size: 16px;
        }
        .header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
        .header-logo img { 
            height: 40px; 
            width: auto; 
            display: block; 
            position: relative;
        }
        /* Pulsing rainbow glow effect for header logo */
        .header-logo {
            position: relative;
            display: inline-block;
            width: fit-content;
            height: fit-content;
        }
        .header-logo img {
            position: relative;
            z-index: 1;
            display: block;
            filter: drop-shadow(0 0 12px rgba(135, 206, 250, 0.8));
            animation: rainbowGlow 4s ease-in-out infinite;
        }
        .header-logo::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at center,
                rgba(255, 0, 0, 0.8),
                rgba(255, 127, 0, 0.8),
                rgba(255, 255, 0, 0.8),
                rgba(0, 255, 0, 0.8),
                rgba(0, 127, 255, 0.8),
                rgba(0, 0, 255, 0.8),
                rgba(127, 0, 255, 0.8),
                rgba(255, 0, 127, 0.8),
                transparent
            );
            background-size: 200% 200%;
            animation: rainbowPulse 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
            mix-blend-mode: screen;
            opacity: 1;
            -webkit-mask-image: url(pblogo.svg);
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-image: url(pblogo.svg);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }
        @keyframes rainbowGlow {
            0%, 100% { 
                filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.9));
            }
            14% { 
                filter: drop-shadow(0 0 14px rgba(255, 127, 0, 0.9));
            }
            28% { 
                filter: drop-shadow(0 0 14px rgba(255, 255, 0, 0.9));
            }
            42% { 
                filter: drop-shadow(0 0 14px rgba(0, 255, 0, 0.9));
            }
            56% { 
                filter: drop-shadow(0 0 14px rgba(0, 127, 255, 0.9));
            }
            70% { 
                filter: drop-shadow(0 0 14px rgba(0, 0, 255, 0.9));
            }
            84% { 
                filter: drop-shadow(0 0 14px rgba(127, 0, 255, 0.9));
            }
        }
        @keyframes rainbowPulse {
            0%, 100% { 
                background-position: 0% 50%;
                opacity: 0.8;
                transform: scale(1);
            }
            50% { 
                background-position: 100% 50%;
                opacity: 1;
                transform: scale(1.1);
            }
        }
        .header-nav a { color: #ffffff; text-decoration: none; font-family: Ari, monospace; font-size: 16px; opacity: 0.9; }
        .header-nav a:hover { opacity: 1; }
        .header-nav { display: none; }

        .hamburger { 
            width: 40px; height: 40px; 
            background: transparent; 
            border: 1px solid rgba(255,255,255,0.25);
            display: inline-flex; align-items: center; justify-content: center;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }
        .hamburger span { display: block; width: 22px; height: 2px; background: #ffffff; border-radius: 2px; }

        .mobile-menu { background-color: rgba(0,0,0,0.85); border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 12px rgba(0,0,0,0.35); }
        /* Make the mobile menu drop under the header on all sizes */
        #site-header { position: sticky; }
        #site-header .mobile-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 3000;
            padding: 8px 0;
        }
        .mobile-menu ul { list-style: none; margin: 0; padding: 8px 12px; }
        .mobile-menu li { margin: 6px 0; }
        .mobile-menu a { color: #fff; text-decoration: none; font-family: Ari, monospace; font-size: 18px; }

        /* Responsive behavior */
        @media (max-width: 1100px) {
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
        }
        /* Final strongest mobile overrides */
        @media (max-width: 480px) {
            /* Maximize hero section width on mobile portrait */
            #right { padding-left: 0 !important; padding-right: 0 !important; }
            #player { 
                flex-direction: column !important; 
                align-items: stretch; 
                min-height: auto !important; 
                height: auto !important; 
                padding-left: 0 !important; 
                padding-right: 0 !important; 
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            .cover-art { 
                flex: 0 0 auto !important; 
                width: 100% !important; 
                max-width: 100% !important; 
                height: auto !important; 
                min-height: auto !important; 
                display: flex !important; 
                flex-direction: row !important; 
                justify-content: center !important; 
                align-items: center !important; 
                margin: 0 !important;
                padding: 0 !important;
            }
            .cover-art img, .cover-art video { width: 50% !important; max-width: 50% !important; height: auto !important; max-height: 300px !important; object-fit: contain !important; margin: 0 !important; display: block !important; flex: 0 0 50% !important; }
            .song-info { 
                flex: 0 0 auto !important; 
                width: 100% !important; 
                padding: 10px 1.5rem !important; /* Reduced vertical padding */
                text-align: left !important; 
                align-items: flex-start !important; 
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-start !important;
                margin: 0 !important;
            }
            .song-info h2, .song-info p {
                text-align: left !important;
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            #songTitle { font-size: 18px !important; line-height: 1.2 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: left !important; }
            #songTitle a { text-align: left !important; display: inline-block !important; }
            #artistName, #releaseDate { text-align: left !important; }
            #songTitle a { font-size: inherit !important; }
            #right { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
            #mobile-intro { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
            #tracklist th, #tracklist td { padding-left: 0.25rem !important; padding-right: 0.25rem !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 13px !important; }
            #tracklist th { font-size: 13px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
            #tracklist td.year-range {
                font-size: 8px !important;
                width: 30px !important;
                min-width: 30px !important;
                max-width: 30px !important;
                padding: 4px 2px !important;
            }
        }
        /* Tools section link color normalization */
        #tools-section a, #tools-section a:visited { color: #ffffff; }