body{margin:0;min-width:320px;min-height:100vh;width:100%}#root{width:100%;min-height:100vh}.retro-window{background:linear-gradient(180deg,silver,#a0a0a0);border:2px outset #c0c0c0;box-shadow:2px 2px 4px #0000004d;font-family:"MS Sans Serif",monospace,sans-serif;font-size:11px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.retro-title-bar{background:linear-gradient(90deg,#0054e3,#09f);color:#fff;padding:2px 4px;display:flex;align-items:center;justify-content:space-between;cursor:move;font-weight:700;font-size:11px;border-bottom:1px solid #808080;image-rendering:pixelated;font-family:"MS Sans Serif",monospace,sans-serif}.retro-title-text{display:flex;align-items:center;gap:4px}.retro-window-controls{display:flex;gap:2px}.retro-button{background:linear-gradient(180deg,#e0e0e0,silver);border:1px outset #c0c0c0;padding:2px 6px;font-size:11px;font-family:"MS Sans Serif",monospace,sans-serif;cursor:pointer;min-width:16px;min-height:16px;display:flex;align-items:center;justify-content:center;image-rendering:pixelated}.retro-button:hover{background:linear-gradient(180deg,#f0f0f0,#d0d0d0)}.retro-button:active{border:1px inset #c0c0c0;background:linear-gradient(180deg,silver,#e0e0e0)}.retro-button.close-button:hover{background:linear-gradient(180deg,#ff6b6b,#ff5252);color:#fff}.media-player-content{padding:0;background:#f0f0f0;border-top:1px solid #ffffff}.youtube-container{background:#000;border:1px inset #c0c0c0;margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.youtube-container iframe{pointer-events:none}.player-controls{display:flex;align-items:center;gap:4px;padding:4px;background:linear-gradient(180deg,#e8e8e8,#d0d0d0);border:1px inset #c0c0c0}.control-button{background:linear-gradient(180deg,#e0e0e0,silver);border:1px outset #c0c0c0;padding:4px 8px;font-size:10px;cursor:pointer;font-family:"MS Sans Serif",monospace,sans-serif;image-rendering:pixelated}.control-button:hover{background:linear-gradient(180deg,#f0f0f0,#d0d0d0)}.control-button:active{border:1px inset #c0c0c0;background:linear-gradient(180deg,silver,#e0e0e0)}.control-button:disabled{background:linear-gradient(180deg,#e0e0e0,#d0d0d0);color:gray;cursor:not-allowed}.volume-control{display:flex;align-items:center;gap:4px;margin-left:auto}.volume-slider{width:60px;height:4px;background:silver;border:1px inset #808080;appearance:none;outline:none}.volume-slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:linear-gradient(180deg,#e0e0e0,silver);border:1px outset #c0c0c0;cursor:pointer}.track-info{padding:6px;background:#fff;border:1px inset #c0c0c0;margin:0;font-size:10px;min-height:32px;display:flex;align-items:center}.track-shelf{display:flex;flex-direction:column;gap:2px;padding:4px;background:linear-gradient(180deg,#f8f8f8,#e8e8e8);border:1px inset #c0c0c0;overflow-y:auto;max-height:400px;min-width:200px;margin:0}.track-spine{width:180px;height:32px;background:linear-gradient(180deg,#e0e0e0,silver);border:1px outset #c0c0c0;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;font-size:10px;font-weight:700;padding:4px 8px;transition:all .2s ease;flex-shrink:0;font-family:"MS Sans Serif",monospace,sans-serif;image-rendering:pixelated}.track-spine:hover{background:linear-gradient(180deg,#f0f0f0,#d0d0d0);transform:translateY(-1px)}.track-spine.selected{background:linear-gradient(180deg,gold,#ffb300);border:1px outset #ffd700}