@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--color-bg-base:#000;--color-surface:#ffffff0d;--color-surface-hover:#ffffff1a;--color-surface-active:#ffffff26;--color-border:#ffffff14;--color-accent-1:#9b4dff;--color-accent-2:#ff2a85;--color-accent-3:#ff6b00;--gradient-primary:linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);--gradient-secondary:linear-gradient(135deg, var(--color-accent-2) 0%, var(--color-accent-3) 100%);--color-text-primary:#fff;--color-text-secondary:#ffffffb3;--color-text-muted:#fff6;--font-sans:"Outfit", system-ui, -apple-system, sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--transition-fast:.15s ease-out;--transition-normal:.3s cubic-bezier(.2, .8, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1);--bottom-nav-height:64px;--player-pill-height:64px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none;width:100vw;height:100vh;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex}.glass{background:var(--color-surface);-webkit-backdrop-filter:blur(40px);border:1px solid var(--color-border)}.app-layout{flex:1;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.sidebar{border-right:1px solid var(--color-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#0009;flex-direction:column;width:260px;padding:32px 24px;display:none}@media (width>=769px){.sidebar{display:flex}}.brand{align-items:center;gap:12px;margin-bottom:48px;padding-left:8px;display:flex}.brand-icon{color:var(--color-accent-2);filter:drop-shadow(0 0 12px #ff2a8599)}.brand-name{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.nav-menu{flex-direction:column;gap:8px;list-style:none;display:flex}.nav-item{border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-normal);align-items:center;gap:16px;padding:12px 16px;font-weight:500;display:flex;position:relative}.nav-item:hover,.nav-item.active{color:var(--color-text-primary);background:var(--color-surface-hover)}.nav-item.active:before{content:"";background:var(--gradient-primary);border-radius:0 4px 4px 0;width:4px;height:20px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.bottom-nav{height:var(--bottom-nav-height);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--color-border);z-index:50;padding-bottom:env(safe-area-inset-bottom);background:#0f0f0fd9;justify-content:space-around;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}@media (width>=769px){.bottom-nav{display:none}}.bottom-nav-item{color:var(--color-text-muted);cursor:pointer;width:100%;height:100%;transition:color var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.7rem;font-weight:500;display:flex}.bottom-nav-item.active{color:var(--color-text-primary)}.bottom-nav-item svg{transition:transform var(--transition-fast)}.bottom-nav-item.active svg{color:var(--color-accent-2);filter:drop-shadow(0 0 8px #ff2a8566);transform:scale(1.1)}.main-view{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.scrollable-content{padding:24px 24px calc(var(--bottom-nav-height) + var(--player-pill-height) + 40px) 24px;flex:1;overflow-y:auto}@media (width>=769px){.scrollable-content{padding:40px 48px 120px}}.view-header{margin-bottom:24px}.view-title{letter-spacing:-.02em;font-size:2rem;font-weight:700}.moodboard-container{cursor:grab;background:radial-gradient(circle,#8a2be214,#0000 60%);flex:1;width:100%;height:100%;position:relative;overflow:hidden}.moodboard-container:active{cursor:grabbing}.moodboard-canvas{transform-origin:0 0;width:100%;height:100%;transition:transform .1s ease-out;position:absolute}.moodboard-grid{background-image:linear-gradient(var(--color-surface-hover) 1px, transparent 1px), linear-gradient(90deg, var(--color-surface-hover) 1px, transparent 1px);pointer-events:none;opacity:.3;background-position:50%;background-size:50px 50px;position:absolute;inset:-100%}.axis-label{color:var(--color-text-secondary);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;text-shadow:0 0 8px #000c;font-size:.75rem;font-weight:600;position:absolute}.axis-y-top{top:20px;left:50%;transform:translate(-50%)}.axis-y-bottom{bottom:20px;left:50%;transform:translate(-50%)}.axis-x-left{top:50%;left:20px;transform:translateY(-50%)rotate(-90deg)}.axis-x-right{top:50%;right:20px;transform:translateY(-50%)rotate(90deg)}.track-node{border:2px solid var(--color-border);cursor:pointer;z-index:10;background-position:50%;background-size:cover;border-radius:50%;width:48px;height:48px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000080}.track-node:hover{border-color:var(--color-text-primary);z-index:20;transform:translate(-50%,-50%)scale(1.2)}.track-node.active{border-color:var(--color-accent-2);z-index:30;animation:2s infinite pulse-node;transform:translate(-50%,-50%)scale(1.4);box-shadow:0 0 24px #ff2a8599}@keyframes pulse-node{0%{box-shadow:0 0 #ff2a8566}70%{box-shadow:0 0 0 15px #ff2a8500}to{box-shadow:0 0 #ff2a8500}}.constellation-lines{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.tree-line{stroke:var(--color-accent-1);stroke-width:2px;stroke-dasharray:8 4;opacity:.6;animation:20s linear infinite dash-flow}@keyframes dash-flow{to{stroke-dashoffset:-1000px}}.player-container{bottom:calc(var(--bottom-nav-height) + 16px);height:var(--player-pill-height);border-radius:var(--radius-full);z-index:40;cursor:pointer;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;display:flex;position:absolute;left:16px;right:16px;box-shadow:0 8px 32px #00000080}@media (width>=769px){.player-container{border-top:1px solid var(--color-border);cursor:default;background:#06050ad9;border-radius:0;grid-template-columns:300px 1fr 300px;height:96px;padding:0 32px;display:grid;bottom:0;left:0;right:0}}.player-info{align-items:center;gap:12px;display:flex;overflow:hidden}.player-art{background:var(--color-surface-hover);border-radius:50%;flex-shrink:0;width:48px;height:48px;animation:10s linear infinite paused spin;overflow:hidden}.player-art.playing{animation-play-state:running}@media (width>=769px){.player-art{border-radius:12px;width:64px;height:64px;animation:none}}.player-art img{object-fit:cover;width:100%;height:100%}.player-text{white-space:nowrap;flex-direction:column;display:flex;overflow:hidden}.player-title{text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.player-artist{color:var(--color-text-secondary);text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.player-mobile-controls{align-items:center;display:flex}@media (width>=769px){.player-mobile-controls{display:none}}.btn-play-pill{width:48px;height:48px;color:var(--color-text-primary);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.player-desktop-controls{flex-direction:column;align-items:center;gap:12px;display:none}@media (width>=769px){.player-desktop-controls{display:flex}}.control-buttons{align-items:center;gap:24px;display:flex}.btn-icon{color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--color-text-primary);transform:scale(1.1)}.btn-play-desktop{background:var(--color-text-primary);width:44px;height:44px;color:var(--color-bg-base);border-radius:50%}.btn-play-desktop:hover{background:#fff;transform:scale(1.05)}.progress-container{width:100%;max-width:500px;color:var(--color-text-muted);align-items:center;gap:12px;font-size:.75rem;display:flex}.progress-bar{background:var(--color-surface-active);cursor:pointer;border-radius:2px;flex:1;height:4px;position:relative}.progress-fill{background:var(--color-text-primary);border-radius:2px;height:100%;position:absolute;top:0;left:0}.progress-bar:hover .progress-fill{background:var(--color-accent-2)}.player-actions{justify-content:flex-end;align-items:center;gap:16px;display:none}@media (width>=769px){.player-actions{display:flex}}.fullscreen-player{background:var(--color-bg-base);z-index:100;padding:24px;padding-top:env(safe-area-inset-top);flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;inset:0;transform:translateY(100%)}.fullscreen-player.open{transform:translateY(0)}.fp-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.fp-art-container{aspect-ratio:1;border-radius:var(--radius-lg);width:100%;margin-bottom:32px;overflow:hidden;box-shadow:0 24px 48px #00000080}.fp-art-container img{object-fit:cover;width:100%;height:100%}.fp-info{margin-bottom:32px}.fp-title{margin-bottom:4px;font-size:1.5rem;font-weight:700}.fp-artist{color:var(--color-text-secondary);font-size:1.1rem}.fp-progress{margin-bottom:32px}.fp-controls{justify-content:space-between;align-items:center;margin-bottom:48px;display:flex}.fp-btn-play{background:var(--color-text-primary);width:72px;height:72px;color:var(--color-bg-base);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.track-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;display:grid}@media (width>=769px){.track-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}}.track-card{border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast)}.track-card:hover{transform:translateY(-4px)}.track-card-art{aspect-ratio:1;border-radius:var(--radius-md);background:var(--color-surface);width:100%;margin-bottom:12px;overflow:hidden}.track-card-art img{object-fit:cover;width:100%;height:100%}.track-card-title{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.track-card-artist{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}