@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-canvas: #0c0f0d;--bg-sidebar: #111412;--bg-surface: #151916;--bg-surface-hover: #1c221e;--bg-surface-active: #242c26;--bg-elevated: #1a201c;--border-subtle: #202621;--border-muted: #29322b;--border-strong: #3b473e;--text-primary: #f2f5f1;--text-secondary: #9aa89d;--text-tertiary: #6b786e;--accent-base: #c2e6b0;--accent-hover: #d5f4c4;--accent-active: #b0d89c;--accent-contrast: #111812;--danger-base: #e06c75;--danger-surface: #381a1e;--danger-border: #632d34;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 22px;--radius-full: 9999px;--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--shadow-card: 0 4px 20px rgba(0, 0, 0, .4);--shadow-overlay: 0 24px 64px rgba(0, 0, 0, .7)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-canvas);color:var(--text-primary);min-width:320px;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--accent-base);color:var(--accent-contrast)}button,input{font-family:inherit;color:inherit}button{cursor:pointer;border:none;background:none}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-base);outline-offset:2px}.shell{min-height:100vh;display:flex}.sidebar{position:fixed;top:0;bottom:0;left:0;width:256px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:28px 16px 20px;z-index:20;transition:width .2s ease}.has-player .sidebar{bottom:88px}.brand{display:flex;align-items:center;gap:12px;padding:0 8px;margin-bottom:36px}.brand-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent-base);color:var(--accent-contrast);display:grid;place-items:center}.brand span{font-size:19px;font-weight:800;letter-spacing:-.03em}.brand-accent{color:var(--accent-base)}.nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-tertiary);padding:0 12px;margin-bottom:8px}.navigation{display:flex;flex-direction:column;gap:4px}.navigation button{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text-secondary);transition:background .15s ease,color .15s ease}.navigation button:hover{background-color:var(--bg-surface-hover);color:var(--text-primary)}.navigation .nav-active{background-color:var(--bg-surface-active);color:var(--accent-base)}.sidebar-bottom{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-tertiary)}.sidebar-bottom span{margin-left:auto;color:var(--accent-base)}.content{margin-left:256px;flex:1;padding:32px clamp(24px,4.5vw,64px) 160px;max-width:1560px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.topbar-location{font-size:13px;font-weight:600;color:var(--text-secondary)}.topbar-separator{color:var(--text-tertiary);margin:0 8px}.avatar{width:36px;height:36px;border-radius:var(--radius-full);background-color:var(--bg-surface);border:1px solid var(--border-muted);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--accent-base)}.hero{position:relative;background:radial-gradient(circle at 90% 20%,#1f2b21,#131814 60%);border:1px solid var(--border-muted);border-radius:var(--radius-lg);padding:clamp(32px,4vw,56px);display:flex;justify-content:space-between;align-items:center;overflow:hidden;box-shadow:var(--shadow-card)}.hero-copy{position:relative;z-index:2;max-width:600px}.hero-caption{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--accent-base);text-transform:uppercase}.hero h1{font-size:clamp(36px,4.2vw,58px);font-weight:800;line-height:1.05;letter-spacing:-.04em;margin:14px 0 16px}.hero h1 em{font-style:normal;color:var(--accent-base)}.hero p{color:var(--text-secondary);font-size:15px;line-height:1.6;margin-bottom:28px}.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.hero-art{display:flex;align-items:center;justify-content:center}.vinyl{width:220px;height:220px;border-radius:var(--radius-full);background:repeating-radial-gradient(circle at center,#111512 0,#111512 3px,#1a221b,#1a221b,#111512 6px,#111512 8px);box-shadow:0 16px 40px #0009,inset 0 0 0 6px #1b241d;display:grid;place-items:center;animation:spin 20s linear infinite paused}.has-player .vinyl{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}.vinyl-center{width:76px;height:76px;border-radius:var(--radius-full);background:var(--accent-base);color:var(--accent-contrast);display:grid;place-items:center;border:4px solid #19221b}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;transition:all .15s ease}.primary{background-color:var(--accent-base);color:var(--accent-contrast)}.primary:hover:not(:disabled){background-color:var(--accent-hover);transform:translateY(-1px)}.secondary{background-color:var(--bg-surface);border:1px solid var(--border-muted);color:var(--text-primary)}.secondary:hover:not(:disabled){background-color:var(--bg-surface-hover);border-color:var(--border-strong)}.hero-link{font-size:14px;font-weight:600;color:var(--text-secondary);transition:color .15s ease}.hero-link:hover{color:var(--accent-base)}.collection-strip{display:flex;align-items:center;gap:20px;margin:32px 0 20px;font-size:13px;color:var(--text-secondary)}.collection-strip strong{color:var(--text-primary);font-weight:700}.collection-strip i{width:4px;height:4px;background-color:var(--border-strong);border-radius:var(--radius-full)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:36px 0 16px}.section-head h2{font-size:20px;font-weight:700;letter-spacing:-.02em}.text-button{color:var(--accent-base);font-size:13px;font-weight:600;transition:opacity .15s ease}.text-button:hover{text-decoration:underline}.text-button.danger{color:var(--danger-base)}.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:20px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-base)}.page-head h1{font-size:clamp(30px,3.8vw,44px);font-weight:800;letter-spacing:-.035em;margin:4px 0 6px}.page-head p{color:var(--text-secondary);font-size:14px}.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;font-size:13px;color:var(--text-secondary)}.search{display:flex;align-items:center;gap:10px;background-color:var(--bg-surface);border:1px solid var(--border-muted);padding:10px 14px;border-radius:var(--radius-sm);width:100%;max-width:360px;color:var(--text-secondary)}.search input{background:none;border:none;outline:none;width:100%;font-size:13px;color:var(--text-primary)}.search input::placeholder{color:var(--text-tertiary)}.tracks{display:flex;flex-direction:column;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.track{display:grid;grid-template-columns:36px 44px 1fr 40px auto;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--border-subtle);transition:background .15s ease}.track:last-child{border-bottom:none}.track:hover{background-color:var(--bg-surface-hover)}.active-track{background-color:var(--bg-surface-active)}.track-index{font-size:13px;font-family:var(--font-mono);color:var(--text-tertiary);text-align:center}.track-cover{width:44px;height:44px;border-radius:var(--radius-xs);background-color:var(--bg-elevated);border:1px solid var(--border-muted);display:grid;place-items:center;overflow:hidden;color:var(--accent-base)}.cover-photo{width:100%;height:100%;object-fit:cover}.track-title{display:flex;flex-direction:column;text-align:left;min-width:0}.track-title strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-title small{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.track-actions{display:flex;align-items:center;gap:4px}.icon-btn{width:32px;height:32px;border-radius:var(--radius-xs);display:grid;place-items:center;color:var(--text-secondary);transition:color .15s ease,background .15s ease}.icon-btn:hover{color:var(--text-primary);background-color:var(--bg-surface-active)}.icon-btn.toggled{color:var(--accent-base)}.playlist-grid,.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}.playlist-card,.artist-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;transition:border-color .15s ease,transform .15s ease}.playlist-card:hover,.artist-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.playlist-selected{border-color:var(--accent-base)}.playlist-art{width:100%;aspect-ratio:1;border-radius:var(--radius-sm);background-color:var(--bg-elevated);display:grid;place-items:center;color:var(--accent-base)}.artist-card{align-items:center;text-align:center}.artist-avatar{width:90px;height:90px;border-radius:var(--radius-full);background-color:var(--bg-elevated);border:1px solid var(--border-muted);display:grid;place-items:center;overflow:hidden;color:var(--accent-base);margin:6px 0}.artist-avatar img{width:100%;height:100%;object-fit:cover}.artist-section{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px;margin-bottom:28px}.artist-heading{display:flex;align-items:center;gap:16px;margin-bottom:18px}.artist-heading-text{flex:1;min-width:0}.artist-heading-text h2{font-size:20px;font-weight:700}.artist-heading-text span{font-size:13px;color:var(--text-secondary)}.empty{padding:48px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--accent-base);background-color:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--radius-md)}.empty h3{color:var(--text-primary);font-size:18px}.empty p{color:var(--text-secondary);font-size:14px;max-width:320px}.player{position:fixed;bottom:0;left:0;right:0;height:88px;background-color:var(--bg-sidebar);border-top:1px solid var(--border-muted);display:grid;grid-template-columns:280px 1fr 240px;align-items:center;padding:0 24px;z-index:30}.now-playing{display:flex;align-items:center;gap:14px;min-width:0}.now-cover{width:52px;height:52px;border-radius:var(--radius-xs);background-color:var(--bg-surface);border:1px solid var(--border-muted);display:grid;place-items:center;overflow:hidden;color:var(--accent-base);flex-shrink:0}.now-text{display:flex;flex-direction:column;min-width:0}.now-text strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-text small{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.player-center{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:560px;margin:0 auto}.player-buttons{display:flex;align-items:center;gap:16px}.play-main{width:38px;height:38px;border-radius:var(--radius-full);background-color:var(--accent-base);color:var(--accent-contrast);display:grid;place-items:center;transition:transform .15s ease,background .15s ease}.play-main:hover{background-color:var(--accent-hover);transform:scale(1.05)}.seek{width:100%;display:flex;align-items:center;gap:10px;font-size:11px;font-family:var(--font-mono);color:var(--text-tertiary)}.seek input,.volume input{flex:1;accent-color:var(--accent-base);height:4px;cursor:pointer}.volume{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--text-secondary)}.volume input{width:100px}.mc-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#050706bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:20px}.mc-modal{width:100%;max-width:480px;background-color:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-overlay)}.mc-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.mc-modal-symbol{width:44px;height:44px;border-radius:var(--radius-sm);background-color:var(--bg-surface-active);color:var(--accent-base);display:grid;place-items:center}.mc-modal h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}.mc-modal-copy{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:20px}.mc-field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:16px}.mc-field input{background-color:var(--bg-canvas);border:1px solid var(--border-muted);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;color:var(--text-primary);outline:none}.mc-field input:focus{border-color:var(--accent-base)}.mc-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.mc-danger-button{background-color:var(--danger-surface);border:1px solid var(--danger-border);color:#ffc9ce;padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:700}.mc-danger-button:hover{background-color:#4a2126}.mc-toast{position:fixed;bottom:108px;right:24px;z-index:60;background-color:var(--bg-elevated);border:1px solid var(--border-strong);padding:12px 18px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-overlay);font-size:13px}.mc-toast svg{color:var(--accent-base)}.mc-toast-error{border-color:var(--danger-border);background-color:var(--danger-surface)}.mc-toast-error svg{color:var(--danger-base)}.hidden-input{display:none}@media(max-width:860px){.sidebar{width:72px;padding:24px 8px;align-items:center}.brand span,.nav-label,.navigation button span,.sidebar-bottom{display:none}.content{margin-left:72px}.hero-art{display:none}}@media(max-width:640px){.sidebar{top:auto;bottom:0;width:100%;height:60px;border-right:none;border-top:1px solid var(--border-muted);flex-direction:row;padding:0;justify-content:space-around}.brand{display:none}.navigation{flex-direction:row;width:100%;justify-content:space-around}.content{margin-left:0;padding:20px 16px 180px}.player{grid-template-columns:1fr;height:120px;padding:12px 16px;bottom:60px}.volume,.optional{display:none}.track{grid-template-columns:24px 38px 1fr auto;gap:10px;padding:8px 10px}}