:root {
            --metal-silver: linear-gradient(180deg, #f0f0f0 0%, #d1d1d1 45%, #a8a8a8 55%, #c2c2c2 100%);
            --bezel-shadow: inset 0 2px 3px rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.3);
            --lcd-bg: #0d0d0d;
            --btn-gray: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%);
            --drawer-bg: #222222;
        }

        body {
            background-color: #050505;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: 'Inter', -apple-system, sans-serif;
        }

        .container {
            display: flex;
            align-items: center;
            perspective: 1000px;
        }

        .player-body {
            width: 720px;
            height: 220px;
            background: var(--metal-silver);
            border-radius: 110px 15px 15px 110px;
            display: grid;
            grid-template-columns: 200px 1fr 140px 60px;
            align-items: center;
            padding: 10px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
            border: 1px solid #999;
            z-index: 10;
            position: relative;
        }

        .nav-wheel {
            width: 170px;
            height: 170px;
            background: #7a7a7a;
            border-radius: 50%;
            margin-left: 10px;
            display: grid;
            grid-template-areas: ". up ." "left center right" ". down .";
            place-items: center;
            box-shadow: inset 0 5px 15px rgba(0,0,0,0.4), 0 2px 2px rgba(255,255,255,0.2);
            position: relative;
        }

        .nav-wheel i { color: #ccc; font-size: 1.2rem; cursor: pointer; }
        .nav-wheel i:hover { color: white; }

        .enter-btn {
            grid-area: center;
            width: 85px;
            height: 85px;
            background: var(--btn-gray);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: #333;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 white;
            cursor: pointer;
            border: none;
            font-size: 0.9rem;
        }
        .enter-btn:active { transform: scale(0.97); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

        .center-section {
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .lcd-screen {
            background: var(--lcd-bg);
            border-radius: 8px;
            padding: 15px;
            border: 3px solid #888;
            box-shadow: inset 0 0 10px black;
            display: flex;
            gap: 15px;
        }

        .album-art {
            width: 90px;
            height: 60px;
            background: #222;
            border-radius: 4px;
            background-size: cover;
            border: 1px solid #444;
        }

        .track-metadata { color: #00d4ff; font-family: monospace; font-size: 0.85rem; line-height: 1.4; }
        .timestamp { color: #666; font-size: 0.75rem; margin-top: 5px; }

        .playback-controls {
            display: flex;
            justify-content: space-around;
            color: #444;
            font-size: 1.1rem;
        }
        .playback-controls i { cursor: pointer; }
        .playback-controls i:hover { color: #000; }

        .btn-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 80px;
        }

        .silver-btn {
            background: var(--btn-gray);
            border: 1px solid #aaa;
            padding: 10px;
            border-radius: 6px;
            font-weight: 600;
            color: #444;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
        }

        .vol-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            border-left: 1px solid #999;
            padding-left: 10px;
        }

        input[type=range] {
            writing-mode: bt-lr;
            appearance: slider-vertical;
            width: 8px;
            height: 100px;
        }

        .drawer {
            width: 250px;
            height: 200px;
            background: #1a1a1a;
            border-radius: 0 15px 15px 0;
            margin-left: -65px;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 5;
            padding: 20px;
            box-shadow: inset 10px 0 20px black;
            border: 1px solid #333;
            overflow: hidden;
        }

        .drawer-header { color: #888; font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px;}

        .playlist-scroll {
            height: 140px;
            overflow-y: auto;
        }

        .track-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            color: #eee;
            font-size: 0.75rem;
            cursor: pointer;
            border-radius: 4px;
        }

        .track-item:hover { background: #333; }
        .track-item i { color: #00d4ff; font-size: 0.6rem; }

        .title-container {
            overflow: hidden;
            white-space: nowrap;
            width: 250px;
            position: relative;
        }

        #title {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 10s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        .title-container:hover #title {
            animation-play-state: paused;
        }