:root{--bg: #0a0a0f;--bg-elevated: #12121a;--fg: #e8e8ed;--muted: #7a7a8a;--accent: #00d4aa;--accent-dim: #00d4aa33;--border: #2a2a3a;--card: #16161f;--player-bg: #0d0d14}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg-elevated);position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.25rem;color:var(--accent)}.nav-link{color:var(--muted);text-decoration:none;font-size:.875rem;transition:color .2s}.nav-link:hover{color:var(--accent)}.main{flex:1;padding:2rem 1.5rem;max-width:900px;margin:0 auto;width:100%}.main>h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.1;margin-bottom:.5rem;background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--muted);margin-bottom:2.5rem;font-size:1rem;line-height:1.6}.genres{display:flex;flex-direction:column;gap:3rem}.genre-section{animation:fadeIn .6s ease-out backwards}.genre-section:nth-child(1){animation-delay:.1s}.genre-section:nth-child(2){animation-delay:.2s}.genre-section:nth-child(3){animation-delay:.3s}.genre-section:nth-child(4){animation-delay:.4s}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.genre-header{margin-bottom:1rem}.genre-header h2{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.genre-header p{color:var(--muted);font-size:.875rem}.tracks{display:flex;flex-direction:column;gap:.5rem}.track-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:12px;transition:all .2s;cursor:pointer}.track-row:hover{border-color:var(--accent);background:var(--bg-elevated);transform:translate(4px)}.track-art-small{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}.track-info{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}.track-title{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875rem;margin-left:1rem;flex-shrink:0}.sobre-page{max-width:700px;margin:0 auto;padding:3rem 1.5rem}.sobre-header{margin-bottom:3rem;text-align:center}.sobre-header h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sobre-content{display:flex;flex-direction:column;gap:2.5rem}.sobre-content section{animation:fadeIn .6s ease-out backwards}.sobre-content section:nth-child(1){animation-delay:.1s}.sobre-content section:nth-child(2){animation-delay:.2s}.sobre-content section:nth-child(3){animation-delay:.3s}.sobre-content section:nth-child(4){animation-delay:.4s}.sobre-content section:nth-child(5){animation-delay:.5s}.sobre-content h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem;color:var(--accent)}.sobre-content p{color:var(--muted);line-height:1.7;margin-bottom:1rem}.sobre-content ul{list-style:none;display:flex;flex-direction:column;gap:.75rem}.sobre-content li{padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:12px;line-height:1.6}.sobre-content strong{color:var(--fg)}.sobre-footer{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.875rem}.player-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--player-bg);border-top:1px solid var(--border);gap:1rem;flex-wrap:wrap}.now-playing{display:flex;align-items:center;gap:.75rem;flex:1;min-width:200px}.track-art{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}.track-info{display:flex;flex-direction:column;min-width:0}.track-info strong{font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info span{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-container{display:flex;align-items:center;gap:.5rem;flex:2;max-width:500px}.progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;cursor:pointer;position:relative}.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .1s linear}.progress-bar:hover .progress-fill:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--accent);border-radius:50%;opacity:0;transition:opacity .2s}.progress-bar:hover .progress-fill:after{opacity:1}.time-display{display:flex;gap:.5rem;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:80px;justify-content:flex-end}.controls{display:flex;align-items:center;gap:.75rem}.controls button{background:transparent;border:none;color:var(--fg);font-size:1.125rem;cursor:pointer;padding:.375rem;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s}.controls button:hover:not(:disabled){background:var(--accent-dim);color:var(--accent)}.controls button:disabled{opacity:.3;cursor:not-allowed}.play-btn{width:44px!important;height:44px!important;font-size:1.25rem!important;background:var(--accent)!important;color:var(--bg)!important}.play-btn:hover{background:#00e8bb!important;transform:scale(1.05)}.spatial-toggle{display:flex;align-items:center;gap:.5rem;padding:0 .5rem}.spatial-toggle label{position:relative;width:44px;height:24px;cursor:pointer}.spatial-toggle input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:var(--border);border-radius:24px;transition:.3s}.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--muted);border-radius:50%;transition:.3s}input:checked+.slider{background:var(--accent)}input:checked+.slider:before{transform:translate(20px);background:var(--bg)}.spatial-label{font-size:.75rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-control input[type=range]{width:80px;accent-color:var(--accent)}@media(max-width:640px){.header{padding:.75rem 1rem}.main{padding:1.5rem 1rem}.player-bar{padding:.5rem 1rem;gap:.5rem;flex-direction:column;align-items:stretch}.now-playing{order:1;min-width:0}.progress-container{order:3;max-width:none}.controls{order:2;justify-content:center}.spatial-toggle{order:4;justify-content:center}.volume-control{order:5;justify-content:center}.time-display{display:none}}