/* Custom Styles & Persona 5 Kinetic Skews */
        body {
            background-color: #080010;
            color: #fff;
            overflow-x: clip;
            overflow-y: auto;
            font-family: 'Space Grotesk', sans-serif;
            user-select: text;
        }

        /* Scanline Overlay */
        .scanlines {
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%,
                rgba(0, 0, 0, 0.35) 50%
            ), linear-gradient(
                90deg,
                rgba(255, 0, 0, 0.03),
                rgba(0, 255, 0, 0.01),
                rgba(0, 0, 255, 0.03)
            );
            background-size: 100% 4px, 6px 100%;
            pointer-events: none;
        }

        /* Perspective Synth Grid Background */
        .grid-container {
            perspective: 450px;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 0;
        }

        .synth-grid {
            position: absolute;
            width: 300%;
            height: 300%;
            left: -100%;
            bottom: -50%;
            background-image:
                linear-gradient(to right, rgba(255, 113, 206, 0.3) 2px, transparent 2px),
                linear-gradient(to bottom, rgba(1, 205, 254, 0.3) 2px, transparent 2px);
            background-size: 50px 50px;
            transform: rotateX(75deg);
            animation: gridMove 8s linear infinite;
        }

        @keyframes gridMove {
            0% { transform: rotateX(75deg) translateY(0); }
            100% { transform: rotateX(75deg) translateY(50px); }
        }

        /* Persona 5 Polygon Skews */
        .skew-p5-left {
            transform: skewX(-12deg);
        }
        .skew-p5-right {
            transform: skewX(12deg);
        }
        .unskew {
            transform: skewX(12deg);
        }
        .unskew-right {
            transform: skewX(-12deg);
        }

        /* Dynamic Menu Item Hover Effects */
        .menu-btn {
            transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            cursor: pointer;
        }

        .menu-btn:hover {
            transform: skewX(-12deg) scale(1.06) translateX(15px);
            z-index: 30;
        }

        .menu-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.3s;
        }

        .menu-btn:hover::before {
            left: 100%;
        }

        /* Vaporwave Glitch Animation */
        .glitch-text {
            position: relative;
            display: inline-block;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            clip: rect(0, 0, 0, 0);
        }

        .glitch-text:hover::before {
            left: -2px;
            text-shadow: 2px 0 #ff71ce;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 0.8s infinite linear alternate-reverse;
        }

        .glitch-text:hover::after {
            left: 2px;
            text-shadow: -2px 0 #01cdfe;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim2 0.8s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim {
            0% { clip: rect(12px, 9999px, 52px, 0); }
            20% { clip: rect(65px, 9999px, 20px, 0); }
            40% { clip: rect(30px, 9999px, 85px, 0); }
            60% { clip: rect(90px, 9999px, 10px, 0); }
            80% { clip: rect(5px, 9999px, 60px, 0); }
            100% { clip: rect(45px, 9999px, 35px, 0); }
        }

        @keyframes glitch-anim2 {
            0% { clip: rect(85px, 9999px, 10px, 0); }
            20% { clip: rect(10px, 9999px, 65px, 0); }
            40% { clip: rect(50px, 9999px, 30px, 0); }
            60% { clip: rect(15px, 9999px, 95px, 0); }
            80% { clip: rect(75px, 9999px, 5px, 0); }
            100% { clip: rect(25px, 9999px, 50px, 0); }
        }

        /* Halftone Pattern Background for P5 Cards */
        .halftone {
            background-image: radial-gradient(#ff71ce 20%, transparent 20%), radial-gradient(#01cdfe 20%, transparent 20%);
            background-position: 0 0, 6px 6px;
            background-size: 12px 12px;
            opacity: 0.15;
        }

        /* Retro Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #120024;
        }
        ::-webkit-scrollbar-thumb {
            background: #ff71ce;
            border-radius: 3px;
        }

        /* Custom Clip Paths for Sharp P5 Polygons */
        .clip-polygon-1 {
            clip-path: polygon(0 0, 100% 5%, 95% 100%, 0% 90%);
        }
        .clip-polygon-2 {
            clip-path: polygon(5% 0, 100% 0%, 92% 100%, 0% 95%);
        }
        .clip-banner {
            clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
        }

        /* Retro Floating Stars */
        .star-dust {
            position: absolute;
            background-color: #fffb96;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            animation: floatStar 4s ease-in-out infinite alternate;
        }

        @keyframes floatStar {
            0% { transform: translateY(0px) rotate(0deg) scale(0.8); opacity: 0.3; }
            100% { transform: translateY(-15px) rotate(45deg) scale(1.1); opacity: 1; }
        }

        /* Usability refinements: keep the existing visual language. */
        html { scroll-padding-top: 24px; }
        body { min-height: 100svh; }
        main { padding: 12px 36px 64px !important; gap: 48px !important; }
        main > *, .track-info, .track-info > div:last-child { min-width: 0; }
        .site-header { gap: 20px; padding: 20px 28px; flex-wrap: wrap; }
        .calendar-badge { flex-shrink: 0; max-width: 100%; }
        .header-controls { margin-left: auto; }
        .menu-btn { display: block; width: 100%; text-align: left; user-select: none; }
        .menu-btn { overflow: hidden; }
        .menu-btn::before { pointer-events: none; z-index: 1; }
        .menu-btn[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 4px; }
        .menu-btn:active { transform: skewX(-12deg) translateX(3px) scale(.99); }
        button:focus-visible, a:focus-visible, #contentDisplay:focus-visible {
            outline: 3px solid #fffb96; outline-offset: 7px;
        }
        button:focus-visible { clip-path: none; }
        .menu-btn:focus-visible { outline: 3px dashed #fffb96; outline-offset: 8px; }
        .skip-link { position: fixed; top: 12px; left: 24px; z-index: 100; padding: 12px 18px;
            color: #080010; background: #fffb96; transform: translateY(-160%); }
        .skip-link:focus { transform: none; }
        #contentDisplay { scroll-margin-top: 24px; padding-bottom: 86px; }
        #panelTitle { overflow-wrap: anywhere; font-size: .8rem; }
        #dynamicInnerContent { min-height: 300px; }
        #dynamicInnerContent h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; }
        #dynamicInnerContent p { font-weight: 400; line-height: 1.65; }
        #dynamicInnerContent .text-gray-400 { color: #c4b7cf; }
        #dynamicInnerContent .text-xs { font-size: .78rem; }
        #dynamicInnerContent .grid > *, #dynamicInnerContent .flex > * { min-width: 0; }
        #dynamicInnerContent [class*="justify-between"] { gap: 10px; }
        #dynamicInnerContent .font-retro { overflow-wrap: anywhere; }
        .panel-footer { display: flex; flex-wrap: wrap; gap: 8px 16px; line-height: 1.4; }
        #characterCard { position: absolute; bottom: -34px; right: -12px; margin: 0; }
        #characterCard > div { width: 224px; max-width: calc(100vw - 56px); }
        #audioPlayer { margin-top: auto; padding: 18px 28px; }
        .track-info { flex: 1 1 auto; }
        .track-info .record-disc { flex-shrink: 0; }
        #trackName { overflow-wrap: anywhere; line-height: 1.4; }
        #audioStatus { letter-spacing: .08em; margin-bottom: 3px; }
        .player-controls { flex-shrink: 0; }
        #soundToggle, #nextTrackBtn, #playSynthBtn { min-width: 44px; min-height: 44px; }
        #playSynthBtn { min-width: 150px; padding-right: 26px; }
        .record-disc .animate-spin { animation-play-state: paused; }
        body[data-audio-playing="true"] .record-disc .animate-spin { animation-play-state: running; }
        #audioPlayer .hidden.lg\:block { max-width: 200px; }
        @media (hover: none) {
            .menu-btn:hover { transform: skewX(-12deg); }
            .glitch-text::before, .glitch-text::after { display: none; }
        }
        @media (max-width: 1023px) {
            main { max-width: 720px; padding: 24px 28px 68px !important; gap: 36px !important; }
            .menu-nav { padding-left: 4px !important; }
            .panel-column { padding: 0 4px; }
            #audioPlayer > div { align-items: stretch; }
            .player-controls { justify-content: flex-end; }
        }
        @media (max-width: 639px) {
            .site-header { padding: 18px 24px 8px; gap: 16px; }
            .calendar-badge .text-lg { white-space: nowrap; }
            .calendar-badge .unskew { padding-left: 10px; padding-right: 10px; gap: 8px; }
            .calendar-badge .unskew > * { margin-left: 0 !important; }
            .header-controls { width: 100%; justify-content: space-between; }
            .system-indicator { padding-left: 10px; padding-right: 10px; }
            .system-indicator .text-lg { font-size: 1rem; letter-spacing: .08em; }
            .menu-btn > span { padding-left: 18px; padding-right: 16px; font-size: 1.35rem; }
            .menu-btn .font-jp { font-size: .7rem; }
            .menu-nav > div:first-child { font-size: .6rem; letter-spacing: .08em; max-width: 100%; }
            #contentDisplay { padding: 20px 20px 88px; box-shadow: 7px 7px 0 #01cdfe; }
            #contentDisplay > div:nth-child(2) { margin: -20px -20px 20px; }
            #dynamicInnerContent { min-height: 0; }
            #dynamicInnerContent .grid { grid-template-columns: minmax(0, 1fr); }
            #dynamicInnerContent [class*="justify-between"] { flex-wrap: wrap; }
            #dynamicInnerContent .font-retro { font-size: 1rem; }
            #characterCard { right: -4px; }
            #audioPlayer { padding: 20px 24px; }
            .track-info { align-items: flex-start; gap: 12px; }
            .track-info > * { margin-left: 0 !important; }
            .track-info .space-x-2 { flex-wrap: wrap; gap: 6px; }
            .track-info .space-x-2 > * { margin-left: 0 !important; }
            .player-controls { justify-content: flex-start; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
            .menu-btn:hover { transform: skewX(-12deg); }
        }