@keyframes flicker {
            0%, 97%, 100% { opacity: 1; }
            98% { opacity: 0.95; }
            99% { opacity: 0.98; }
        }

        @keyframes glitch-skew {
            0%, 100% { transform: skew(0deg); }
            20% { transform: skew(-0.3deg); }
            40% { transform: skew(0.3deg); }
            60% { transform: skew(-0.2deg); }
            80% { transform: skew(0.1deg); }
        }

        @keyframes rgb-shift {
            0%, 100% { text-shadow: -1px 0 var(--purple), 1px 0 var(--blue); }
            25% { text-shadow: -2px 0 var(--purple), 2px 0 var(--blue); }
            50% { text-shadow: -1px 0 var(--blue), 1px 0 var(--purple); }
            75% { text-shadow: 0 0 var(--purple), 0 0 var(--blue); }
        }

        @keyframes scan {
            0% { top: -100%; }
            100% { top: 100%; }
        }

        @keyframes cursor-blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes glow-pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.6; }
        }

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

        /* Chum Color Palette */
        :root {
            --bg: #282c34;
            --bg-darker: #21242b;
            --bg-lighter: #2e3440;
            --bg-selection: #3f444a;

            --fg: #bbc2cf;
            --fg-dim: #5B6268;
            --fg-bright: #dfdfdf;
            --fg-content: #f5f7fa;

            --red: #ff6c6b;
            --orange: #da8548;
            --yellow: #ECBE7B;
            --green: #98be65;
            --aqua: #46D9FF;
            --blue: #51afef;
            --purple: #c678dd;

            --border: #3f444a;
            --border-bright: #5B6268;
        }

        html {
            font-size: 16px;
        }

        body {
            background: var(--bg-darker);
            color: var(--fg);
            font-family: 'IBM Plex Mono', monospace;
            line-height: 1.7;
            min-height: 100vh;
            overflow-x: hidden;
            animation: flicker 10s infinite;
        }

        /* CRT Effects */
        .crt-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
        }

        .crt-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 0, 0, 0.15) 2px,
                rgba(0, 0, 0, 0.15) 4px
            );
        }

        .crt-overlay::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse at center,
                transparent 0%,
                transparent 65%,
                rgba(0, 0, 0, 0.3) 100%
            );
        }

        .scan-line {
            position: fixed;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(
                to bottom,
                transparent,
                rgba(70, 217, 255, 0.08),
                transparent
            );
            animation: scan 8s linear infinite;
            pointer-events: none;
            z-index: 9998;
        }

        /* Terminal Frame */
        .terminal-frame {
            max-width: 960px;
            margin: 0 auto;
            padding: 24px;
        }

        /* Header */
        .header {
            position: relative;
            padding: 24px;
            background: var(--bg-darker);
            border: 1px solid var(--border);
            border-bottom: none;
            overflow: hidden;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent,
                var(--blue) 30%,
                var(--aqua) 50%,
                var(--blue) 70%,
                transparent
            );
            animation: glow-pulse 3s ease-in-out infinite;
        }

        .ascii-logo {
            text-align: center;
            animation: glitch-skew 12s infinite;
        }

        .ascii-logo pre {
            display: inline-block;
            font-size: 0.55rem;
            line-height: 1.1;
            color: var(--blue);
            margin: 0;
            text-align: left;
        }

        .ascii-2001 {
            margin-top: 8px;
        }

        .ascii-2001 pre {
            color: var(--purple);
            text-shadow:
                -1px 0 var(--blue),
                1px 0 var(--purple);
            animation: rgb-shift 6s infinite;
        }

        .tagline {
            text-align: center;
            margin-top: 20px;
            font-size: 1rem;
            color: var(--fg);
            letter-spacing: 0.02em;
            font-style: italic;
        }

        .tagline span {
            color: var(--fg-dim);
        }

        .status-bar {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 20px;
            font-size: 1rem;
            color: var(--fg-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--aqua);
        }

        .status-dot.warn {
            background: var(--yellow);
        }

        .status-dot.error {
            background: var(--red);
        }

        /* Navigation */
        .nav-panel {
            background: var(--bg-darker);
            border: 1px solid var(--border);
            border-top: none;
            padding: 16px 24px;
        }

        .nav-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px dashed var(--border);
            font-size: 1rem;
        }

        .nav-label {
            color: var(--purple);
            font-weight: 500;
        }

        .nav-path {
            color: var(--aqua);
        }

        .nav-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            align-items: flex-start;
        }

        .nav-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg-dim);
            padding: 8px 14px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.15s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .nav-btn:hover {
            color: var(--fg-bright);
            border-color: var(--blue);
            background: var(--bg-selection);
        }

        .nav-btn.active {
            color: var(--bg);
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 0 12px rgba(70, 217, 255, 0.3);
        }

        .nav-btn[data-section="home"] {
            border-color: var(--purple);
            color: var(--purple);
        }

        .nav-btn[data-section="home"]:hover {
            background: rgba(198, 120, 221, 0.1);
            border-color: var(--purple);
        }

        .nav-btn[data-section="home"].active {
            background: var(--purple);
            color: var(--bg);
        }

        /* README button special styling */
        #readme-trigger {
            border-color: var(--aqua);
            color: var(--aqua);
        }

        #readme-trigger:hover {
            background: rgba(70, 217, 255, 0.1);
            border-color: var(--aqua);
            color: var(--fg-bright);
        }

        #readme-trigger.active {
            background: var(--aqua);
            color: var(--bg);
            border-color: var(--aqua);
            box-shadow: 0 0 12px rgba(70, 217, 255, 0.3);
        }

        #concept-art-trigger,
        #spec-trigger,
        #devlog-trigger,
        #story-trigger,
        #map-trigger {
            border-color: var(--aqua);
            color: var(--aqua);
        }

        #concept-art-trigger:hover,
        #spec-trigger:hover,
        #devlog-trigger:hover,
        #story-trigger:hover,
        #map-trigger:hover {
            background: rgba(70, 217, 255, 0.1);
            border-color: var(--aqua);
            color: var(--fg-bright);
        }

        #concept-art-trigger.active,
        #spec-trigger.active,
        #devlog-trigger.active,
        #story-trigger.active,
        #map-trigger.active {
            background: var(--aqua);
            color: var(--bg);
            border-color: var(--aqua);
            box-shadow: 0 0 12px rgba(70, 217, 255, 0.3);
        }

        /* Content area menu overlay */
        .content-menu {
            display: none;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-content: flex-start;
            padding: 15px 20px 20px 20px;
            margin: 0;
            filter: url(#pixelate-heavy);
        }

        .content-menu.open {
            display: flex;
            animation: pixelate-in 0.15s steps(4) forwards;
        }

        .content-menu .menu-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg-dim);
            padding: 6px 12px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.15s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 100px;
        }

        .content-menu .menu-btn .menu-text {
            color: var(--fg);
        }

        .content-menu .menu-btn:hover {
            color: var(--fg-bright);
            border-color: var(--aqua);
            background: var(--bg-selection);
            box-shadow: 0 0 15px rgba(70, 217, 255, 0.2);
        }

        .content-menu .menu-btn:hover .menu-text {
            color: inherit;
        }

        .content-menu .menu-btn.active {
            color: var(--bg);
            background: var(--aqua);
            border-color: var(--aqua);
        }

        .content-menu .menu-btn.active .menu-text {
            color: var(--bg-darker);
        }

        .readme-preview,
        .fragment-content {
            white-space: pre-wrap;
            word-wrap: break-word;
            color: var(--fg-content);
            font-size: 1.25rem;
            line-height: 1.8;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
        }

        .content-menu-header {
            width: 100%;
            text-align: center;
            color: var(--purple);
            font-size: 1rem;
            letter-spacing: 0.2em;
            margin: 0 0 15px 0;
            padding: 0 0 10px 0;
            border-bottom: 1px dashed var(--border);
            line-height: 1.8;
        }

        @keyframes pixelate-in {
            0% { opacity: 1; filter: url(#pixelate-heavy); }
            33% { opacity: 1; filter: url(#pixelate-medium); }
            66% { opacity: 1; filter: url(#pixelate-light); }
            100% { opacity: 1; filter: none; }
        }

        /* Content Area */
        .content-panel {
            background: var(--bg-darker);
            border: 1px solid var(--border);
            border-top: none;
            min-height: 500px;
        }

        .content-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 24px;
            background: var(--bg-lighter);
            border-bottom: 1px solid var(--border);
            font-size: 1rem;
        }

        .content-title {
            color: var(--blue);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        .content-meta {
            color: var(--green);
        }

        .content-body {
            padding: 28px;
        }

        #content-inner {
            white-space: pre-wrap;
            word-wrap: break-word;
            color: var(--fg-content);
            font-size: 1.25rem;
            line-height: 1.8;
        }

        #content-inner.pixelate-in {
            animation: pixelate-in 0.15s steps(4) forwards;
        }

        #content-inner.loading {
            color: var(--fg-dim);
        }

        #content-inner.loading::after {
            content: '_';
            color: var(--yellow);
            animation: cursor-blink 0.6s infinite;
        }

        .ps1-cursor {
            display: inline-block;
            width: 0.6em;
            height: 1.1em;
            background: var(--aqua);
            vertical-align: text-bottom;
            animation: cursor-blink 1s infinite;
        }

        /* Syntax Highlighting */
        .section-marker {
            color: var(--purple);
            font-weight: 600;
        }

        .divider-line {
            color: var(--fg-dim);
            display: block;
            overflow: hidden;
            white-space: nowrap;
        }

        .header-line {
            color: var(--purple);
        }

        .emphasis-text {
            color: var(--aqua);
        }

        .keyword {
            color: var(--purple);
            font-weight: 500;
        }

        .string-text {
            color: var(--green);
        }

        .number-text {
            color: var(--orange);
        }

        .comment-text {
            color: var(--fg-dim);
            font-style: italic;
        }

        .special-text {
            color: var(--aqua);
        }

        .warning-text {
            color: var(--orange);
        }

        .error-text {
            color: var(--red);
        }

        .link-text {
            color: var(--blue);
            text-decoration: underline;
        }

        /* Footer */
        .footer {
            background: var(--bg-darker);
            border: 1px solid var(--border);
            border-top: none;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 1rem;
        }

        .footer-left {
            color: var(--blue);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .footer-right {
            color: var(--fg-dim);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .footer-center {
            color: var(--green);
            font-style: italic;
        }

        .eof-marker {
            color: var(--red);
            font-weight: 600;
        }

        .node-marker {
            color: var(--green);
        }

        .footer-bottom {
            background: var(--bg-darker);
            border: 1px solid var(--border);
            border-top: none;
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1rem;
        }

        .copyright {
            color: var(--fg-dim);
        }

        .back-to-top {
            color: var(--aqua);
            text-decoration: none;
            transition: color 0.15s ease;
        }

        .back-to-top:hover {
            color: var(--fg-bright);
        }

        .bottom-social {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            padding: 24px;
            z-index: 10000;
        }

        .social-link {
            display: flex;
            opacity: 0.6;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .social-link:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .social-link img {
            width: 48px;
            height: 48px;
            image-rendering: pixelated;
        }

        .top-social {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            padding: 24px;
            z-index: 10000;
        }


        /* Corruption Lines */
        .corruption-line {
            position: fixed;
            background: linear-gradient(
                90deg,
                transparent,
                var(--aqua),
                var(--purple),
                transparent
            );
            height: 1px;
            opacity: 0;
            pointer-events: none;
            z-index: 9997;
            animation: corruption-flash 20s infinite;
        }

        .corruption-line:nth-child(1) { top: 15%; left: 0; right: 40%; animation-delay: 0s; }
        .corruption-line:nth-child(2) { top: 50%; left: 30%; right: 0; animation-delay: 7s; }
        .corruption-line:nth-child(3) { top: 80%; left: 0; right: 25%; animation-delay: 14s; }

        @keyframes corruption-flash {
            0%, 97%, 100% { opacity: 0; }
            98% { opacity: 0.5; }
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            html { font-size: 15px; }
            .terminal-frame { padding: 12px; }
            .header { padding: 16px; }
            .ascii-logo pre { font-size: 0.35rem; }
            .status-bar { flex-direction: column; gap: 0.5rem; }
            .nav-panel { padding: 12px 16px; }
            .nav-btn { padding: 6px 10px; font-size: 1rem; }
            .content-body { padding: 20px; }
            #content-inner { font-size: 1.25rem; }
            .footer { flex-direction: column; text-align: center; }
        }

        @media (max-width: 480px) {
            .ascii-logo pre { font-size: 0.28rem; }
            .ascii-2001 pre { font-size: 0.4rem; }
        }

        /* Gallery */
        .home-hero {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .home-content {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        @media (max-width: 768px) {
            .home-content {
                white-space: pre;
                overflow: hidden;
            }
        }

        .hero-image {
            max-width: 100%;
            height: auto;
            border: 2px solid var(--border);
            box-shadow: 0 0 30px rgba(70, 217, 255, 0.2);
            transition: all 0.3s ease;
            image-rendering: pixelated;
        }

        .hero-image:hover {
            border-color: var(--aqua);
            box-shadow: 0 0 40px rgba(70, 217, 255, 0.4);
        }

        .concept-art-header {
            text-align: center;
            color: var(--purple);
            font-size: 1rem;
            letter-spacing: 0.2em;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed var(--border);
        }

        .concept-art-intro {
            white-space: pre-wrap;
            color: var(--fg-content);
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
            line-height: 1.8;
        }

        .concept-grid {
            margin-top: 0;
        }

        .gallery-main {
            text-align: center;
            margin-bottom: 0;
        }

        .gallery-main-image {
            max-width: 100%;
            height: auto;
            border: 2px solid var(--border);
            box-shadow: 0 0 30px rgba(70, 217, 255, 0.2);
            image-rendering: pixelated;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .gallery-main-image:hover {
            border-color: var(--aqua);
            box-shadow: 0 0 40px rgba(70, 217, 255, 0.4);
        }

        .gallery-main-caption {
            display: block;
            text-align: center;
            margin: 8px 0 0 0;
            color: var(--aqua);
            font-size: 1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .gallery-thumbnails {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 15px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .gallery-thumb {
            position: relative;
            width: 160px;
            height: 100px;
            overflow: hidden;
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.15s ease;
            opacity: 0.6;
            flex-shrink: 0;
        }

        .gallery-thumb:hover {
            opacity: 1;
            border-color: var(--aqua);
        }

        .gallery-thumb.active {
            opacity: 1;
            border-color: var(--aqua);
            box-shadow: 0 0 10px rgba(70, 217, 255, 0.3);
        }

        .gallery-thumb img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            .gallery-thumb {
                width: 80px;
                height: 50px;
            }
            .gallery-thumbnails {
                gap: 8px;
                flex-wrap: wrap;
            }
        }

        @media (max-width: 768px) {
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            cursor: pointer;
            animation: fade-in 0.2s ease;
        }

        .lightbox.open {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            cursor: default;
        }

        .lightbox-content.maximized {
            max-width: 100vw;
            max-height: 100vh;
        }

        .lightbox-content img {
            max-width: 100%;
            max-height: 85vh;
            image-rendering: pixelated;
            border: 2px solid var(--aqua);
            box-shadow: 0 0 50px rgba(70, 217, 255, 0.4);
            cursor: pointer;
        }

        .lightbox-content.maximized img {
            max-height: 100vh;
            border: none;
        }

        .lightbox-controls {
            position: absolute;
            top: -40px;
            right: 0;
            display: flex;
            gap: 10px;
        }

        .lightbox-btn {
            background: var(--bg-darker);
            border: 1px solid var(--aqua);
            color: var(--aqua);
            padding: 8px 12px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.15s ease;
        }

        .lightbox-btn:hover {
            background: var(--aqua);
            color: var(--bg);
        }

        .lightbox-caption {
            text-align: center;
            color: var(--fg-dim);
            margin-top: 15px;
            font-size: 1rem;
            letter-spacing: 0.1em;
        }

        .lightbox-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--fg-dim);
            font-size: 1rem;
            letter-spacing: 0.1em;
        }

        .lightbox-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-darker);
            border: 1px solid var(--aqua);
            color: var(--aqua);
            font-size: 2rem;
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.15s ease;
            z-index: 10001;
            opacity: 0.7;
        }

        .lightbox-arrow:hover {
            background: var(--aqua);
            color: var(--bg);
            opacity: 1;
        }

        .lightbox-prev {
            left: 20px;
        }

        .lightbox-next {
            right: 20px;
        }

        @media (max-width: 768px) {
            .lightbox-arrow {
                padding: 10px 15px;
                font-size: 1.25rem;
            }
            .lightbox-prev { left: 10px; }
            .lightbox-next { right: 10px; }
        }

        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Selection */
        ::selection {
            background: var(--blue);
            color: var(--bg);
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: var(--bg-darker); }
        ::-webkit-scrollbar-thumb { background: var(--border); }
        ::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

        /* Read More Button */
        .read-more-btn {
            display: block;
            margin: 20px auto;
            padding: 12px 24px;
            background: transparent;
            border: 1px solid var(--aqua);
            color: var(--aqua);
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transition: all 0.15s ease;
        }

        .read-more-btn:hover {
            background: var(--aqua);
            color: var(--bg);
            box-shadow: 0 0 15px rgba(70, 217, 255, 0.3);
        }

        .home-content-hidden {
            display: none;
        }

        .steam-wishlist {
            display: flex;
            opacity: 0.8;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .steam-wishlist:hover {
            opacity: 1;
            transform: scale(1.02);
        }

        .steam-wishlist img {
            width: 180px;
            height: auto;
            filter: invert(1);
        }

        .top-social .steam-wishlist img {
            width: 140px;
        }

        /* Story Jump Menu */
        .story-jump-menu {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .jump-menu-header {
            text-align: center;
            color: var(--purple);
            font-size: 1rem;
            letter-spacing: 0.2em;
            margin-bottom: 15px;
        }

        .jump-menu-links {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .jump-link {
            color: var(--fg);
            text-decoration: none;
            padding: 4px 0;
            transition: all 0.15s ease;
            font-size: 1rem;
        }

        .jump-link:hover {
            color: var(--fg-bright);
        }

        .jump-link .jump-code {
            color: var(--purple);
            margin-right: 8px;
        }

        .jump-link:hover .jump-code {
            color: var(--aqua);
        }

        .section-anchor {
            display: block;
            position: relative;
            top: -80px;
            visibility: hidden;
        }

        /* Music Player */
        .music-player {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 320px;
            background: var(--bg-darker);
            border: 1px solid var(--border);
            z-index: 10001;
            box-shadow: 0 0 20px rgba(70, 217, 255, 0.3);
            user-select: none;
        }

        .music-player.dragging {
            box-shadow: 0 0 30px rgba(70, 217, 255, 0.5);
            border-color: var(--aqua);
        }

        .player-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-lighter);
            border-bottom: 1px solid var(--border);
            cursor: move;
        }

        .player-header:active {
            cursor: grabbing;
        }

        .player-title {
            color: var(--purple);
            font-size: 1rem;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        .player-toggle {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--aqua);
            padding: 2px 8px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .player-toggle:hover {
            border-color: var(--aqua);
            background: rgba(70, 217, 255, 0.1);
        }

        .player-body {
            padding: 12px;
            max-height: 400px;
            overflow-y: auto;
        }

        .player-body.collapsed {
            display: none;
        }

        .track-info {
            margin-bottom: 12px;
        }

        .track-name {
            color: var(--aqua);
            font-size: 1rem;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .track-time {
            color: var(--fg-dim);
            font-size: 1rem;
        }

        .player-controls {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .control-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg);
            padding: 8px 16px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .control-btn:hover {
            border-color: var(--aqua);
            color: var(--aqua);
            background: rgba(70, 217, 255, 0.1);
        }

        .control-btn.play-btn {
            border-color: var(--aqua);
            color: var(--aqua);
        }

        .control-btn.play-btn:hover {
            background: var(--aqua);
            color: var(--bg);
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: var(--border);
            margin-bottom: 12px;
            cursor: pointer;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: var(--aqua);
            width: 0%;
            transition: width 0.1s linear;
        }

        .volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .volume-label {
            color: var(--fg-dim);
            font-size: 1rem;
        }

        .volume-slider {
            flex: 1;
            height: 4px;
            background: var(--border);
            outline: none;
            cursor: pointer;
        }

        .volume-slider::-webkit-slider-thumb {
            appearance: none;
            width: 12px;
            height: 12px;
            background: var(--aqua);
            cursor: pointer;
        }

        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: var(--aqua);
            border: none;
            cursor: pointer;
        }

        .volume-value {
            color: var(--green);
            font-size: 1rem;
            min-width: 40px;
            text-align: right;
        }

        .playlist-header {
            color: var(--purple);
            font-size: 0.7rem;
            margin-bottom: 8px;
            letter-spacing: 0.1em;
        }

        .playlist-tracks {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .playlist-track {
            padding: 6px 8px;
            border: 1px solid var(--border);
            color: var(--fg);
            font-size: 0.7rem;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .playlist-track:hover {
            border-color: var(--aqua);
            background: rgba(70, 217, 255, 0.1);
            color: var(--fg-bright);
        }

        .playlist-track.active {
            border-color: var(--aqua);
            background: rgba(70, 217, 255, 0.2);
            color: var(--aqua);
        }

        @media (max-width: 768px) {
            .music-player {
                display: none;
            }
        }