:root{--font-display:"Space Grotesk", system-ui, -apple-system, sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--bg:#05060a;--bg-deep:#03040a;--ink:#eaeefb;--ink-dim:#eaeefba8;--ink-faint:#eaeefb66;--ink-ghost:#eaeefb29;--line:#96b4ff24;--line-bright:#96b4ff52;--panel:#0b0f1ba8;--panel-solid:#090c16eb;--panel-border:#96b4ff29;--glass-blur:22px;--accent:#8ea2ff;--radius:16px;--radius-sm:11px;--radius-pill:999px;--ease:cubic-bezier(.22, .61, .36, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--shadow-panel:0 24px 70px -18px #000000bf, 0 0 0 1px var(--panel-border) inset}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--ink);background:var(--bg-deep);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;background-image:radial-gradient(120% 90% at 50% -10%,#0b1024 0%,#0000 55%),radial-gradient(90% 70% at 100% 110%,#120a24 0%,#0000 60%);overflow:hidden}#root{isolation:isolate;position:relative}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;font-weight:600;line-height:1.08}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}a{color:inherit}::selection{color:#fff;background:#78c8ff47}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}*{scrollbar-width:thin;scrollbar-color:#96b4ff47 transparent}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#96b4ff38 padding-box padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#96b4ff66 padding-box padding-box}.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-in{0%{opacity:0;transform:translate(24px)scale(.985)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes soft-pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.app{position:fixed;inset:0}.atlas-canvas{touch-action:none;display:block;position:absolute;inset:0}.star-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-bright);white-space:nowrap;-webkit-user-select:none;user-select:none;background:#070a14b8;border-radius:11px;flex-direction:column;align-items:center;gap:1px;padding:6px 11px;display:flex;transform:translateY(-150%);box-shadow:0 10px 32px -12px #000c}.star-label__name{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);font-size:13px;font-weight:600}.star-label__fam{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;font-size:9.5px}.star-name{font-family:var(--font-display);letter-spacing:.01em;white-space:nowrap;-webkit-user-select:none;user-select:none;text-shadow:0 1px 3px #02040af2,0 0 14px #02040ad9;will-change:opacity;font-size:11px;font-weight:500;transform:translateY(122%)}.brand{z-index:12;align-items:center;gap:12px;padding:6px;display:flex;position:fixed;top:20px;left:22px}.brand__mark{border:1px solid var(--line-bright);background:radial-gradient(circle at 50% 38%,#22d3ee8c,#22d3ee00 70%),#0a0e1ab3;border-radius:11px;place-items:center;width:36px;height:36px;display:grid}.brand__star{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:#eafdff;width:11px;height:11px;box-shadow:0 0 12px 2px #78e6ffd9}.brand__text{text-align:left;flex-direction:column;line-height:1;display:flex}.brand__title{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);font-size:18px;font-weight:600}.brand__tag{color:var(--ink-faint);letter-spacing:.02em;margin-top:4px;font-size:10.5px}.brand:hover .brand__title{color:#fff}.search{z-index:16;position:fixed;top:20px;left:50%;transform:translate(-50%)}.search__trigger{background:var(--panel);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--panel-border);color:var(--ink-dim);transition:.2s var(--ease);border-radius:999px;align-items:center;gap:9px;padding:9px 13px;font-size:13px;display:flex}.search__trigger:hover{color:var(--ink);border-color:var(--line-bright)}.search__trigger kbd{font-family:var(--font-mono);border:1px solid var(--line);color:var(--ink-faint);border-radius:6px;padding:1px 6px;font-size:10px}.search__panel{background:var(--panel-solid);width:min(92vw,364px);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--panel-border);box-shadow:var(--shadow-panel);animation:rise-in .18s var(--ease-out);border-radius:14px;overflow:hidden}.search__field{color:var(--ink-dim);align-items:center;gap:10px;padding:12px 13px;display:flex}.search__field input{min-width:0;color:var(--ink);font-size:15px;font-family:var(--font-body);background:0 0;border:none;outline:none;flex:1}.search__field input::placeholder{color:var(--ink-faint)}.search__close{font-family:var(--font-mono);color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:10px}.search__results{border-top:1px solid var(--line);max-height:320px;list-style:none;overflow:auto}.search__results button{text-align:left;width:100%;color:var(--ink-dim);align-items:center;gap:10px;padding:10px 14px;transition:all .14s;display:flex}.search__results button:hover{color:var(--ink);background:#96b4ff14}.search__dot{border-radius:50%;width:8px;height:8px}.search__name{flex:1}.search__results em{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-style:normal}.viewtoggle{z-index:14;background:var(--panel);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--panel-border);border-radius:999px;gap:2px;padding:3px;display:flex;position:fixed;top:22px;right:22px}.viewtoggle button{color:var(--ink-faint);transition:.18s var(--ease);border-radius:999px;padding:6px 14px;font-size:12.5px}.viewtoggle button:hover:not(:disabled){color:var(--ink-dim)}.viewtoggle button.is-on{color:var(--ink);background:#96b4ff24}.viewtoggle button:disabled{opacity:.4;cursor:not-allowed}.dock{z-index:12;flex-direction:column;align-items:flex-start;gap:18px;display:flex;position:fixed;bottom:22px;left:24px}.labels{width:176px}.labels__title{letter-spacing:.18em;color:var(--ink-faint);margin:0 0 10px 2px;font-size:10px;display:block}.labels__range{appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;display:block}.labels__range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) 0 var(--p,0%), #96b4ff2e var(--p,0%) 100%);border-radius:999px;height:4px}.labels__range::-webkit-slider-thumb{appearance:none;width:13px;height:13px;transition:box-shadow .18s var(--ease);background:#eafdff;border:2px solid #0a0e1a;border-radius:50%;margin-top:-4.5px;box-shadow:0 0 10px 1px #78e6ffbf}.labels__range::-moz-range-track{background:#96b4ff2e;border-radius:999px;height:4px}.labels__range::-moz-range-progress{background:var(--accent);border-radius:999px;height:4px}.labels__range::-moz-range-thumb{background:#eafdff;border:2px solid #0a0e1a;border-radius:50%;width:13px;height:13px;box-shadow:0 0 10px 1px #78e6ffbf}.labels__range:focus-visible{outline:none}.labels__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #8ea2ff52,0 0 10px 1px #78e6ffcc}.labels__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #8ea2ff52,0 0 10px 1px #78e6ffcc}.labels__ticks{justify-content:space-between;margin-top:4px;display:flex}.labels__tick{color:var(--ink-faint);transition:color .16s var(--ease);padding:2px 0;font-size:10.5px;line-height:1}.labels__tick:nth-child(2){text-align:center}.labels__tick:last-child{text-align:right}.labels__tick:hover{color:var(--ink-dim)}.labels__tick.is-on{color:var(--ink)}.legend{max-width:min(48vw,360px)}.legend__title{letter-spacing:.18em;color:var(--ink-faint);margin:0 0 9px 4px;font-size:10px;display:block}.legend__items{flex-wrap:wrap;gap:6px;display:flex}.legend__item{background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);color:var(--ink-dim);transition:.18s var(--ease);border-radius:999px;align-items:center;gap:7px;padding:6px 12px 6px 9px;font-size:12px;display:flex}.legend__item:hover{color:var(--ink);border-color:color-mix(in srgb, var(--c) 55%, transparent)}.legend__item.is-active{color:var(--ink);border-color:var(--c);background:color-mix(in srgb, var(--c) 16%, var(--panel));box-shadow:0 0 18px -6px var(--c)}.legend__item.is-dim{opacity:.42}.legend__dot{width:9px;height:9px;box-shadow:0 0 8px 1px var(--c);border-radius:50%}.hint{z-index:11;color:var(--ink-faint);letter-spacing:.02em;pointer-events:none;animation:fade-in .9s var(--ease) both;align-items:center;gap:12px;font-size:11.5px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.hint i{background:var(--ink-ghost);border-radius:50%;width:3px;height:3px}.panel{z-index:20;background:var(--panel-solid);width:min(94vw,392px);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow-panel);animation:panel-in .34s var(--ease-out);flex-direction:column;display:flex;position:fixed;top:18px;bottom:18px;right:18px;overflow:hidden}.panel:before{content:"";background:linear-gradient(180deg, color-mix(in srgb, var(--fam) 24%, transparent), transparent);opacity:.7;pointer-events:none;height:150px;position:absolute;inset:0 0 auto}.panel__close{z-index:3;width:32px;height:32px;color:var(--ink-dim);border:1px solid var(--line);background:#14182699;border-radius:9px;place-items:center;transition:all .18s;display:grid;position:absolute;top:14px;right:14px}.panel__close:hover{color:var(--ink);background:#202638d9}.panel__scroll{padding:26px 24px 30px;position:relative;overflow-y:auto}.panel__meta{align-items:center;gap:10px;margin-bottom:13px;display:flex}.fam-chip{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid color-mix(in srgb, var(--fam) 42%, transparent);background:color-mix(in srgb, var(--fam) 12%, transparent);border-radius:999px;align-items:center;gap:7px;padding:5px 11px 5px 9px;font-size:11px;display:inline-flex}.fam-chip__dot{width:8px;height:8px;box-shadow:0 0 8px 1px var(--fam);border-radius:50%}.panel__bpm{color:var(--ink-faint);letter-spacing:.04em;font-size:11px}.panel__name{letter-spacing:-.02em;font-size:30px;font-weight:600;line-height:1.05}.panel__range{color:var(--ink-faint);letter-spacing:.03em;margin-top:9px;font-size:10.5px}.panel__unique{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);margin-top:18px;font-size:16.5px;font-weight:400;line-height:1.45}.panel__block{margin-top:22px}.panel__label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--fam) 65%, var(--ink-faint));margin-bottom:10px;font-size:10.5px}.panel__badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);vertical-align:middle;border-radius:999px;margin-left:6px;padding:2px 6px;font-size:9px;font-weight:500}.panel__signature,.panel__history{color:var(--ink-dim);font-size:13.5px;line-height:1.55}.panel__learn{white-space:nowrap;font-family:var(--font-mono);letter-spacing:.04em;color:color-mix(in srgb, var(--fam) 72%, var(--ink-dim));transition:.18s var(--ease);border-bottom:1px solid #0000;align-items:center;gap:5px;margin-top:11px;padding-bottom:1px;font-size:11px;text-decoration:none;display:inline-flex}.panel__learn:hover{color:var(--fam);border-bottom-color:color-mix(in srgb, var(--fam) 55%, transparent)}.panel__learn svg{opacity:.85;transition:transform .18s var(--ease)}.panel__learn:hover svg{transform:translate(1px,-1px)}.panel__tracks{flex-direction:column;gap:8px;display:flex}.panel__note{color:var(--ink-faint);margin-top:9px;font-size:11.5px;line-height:1.45}.spotify-embed{border:0;border-radius:12px;width:100%;display:block}.spotify-fallback{border:1px solid var(--line);color:var(--ink-dim);background:#14182680;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:13px;text-decoration:none;display:flex}.spotify-fallback__cta{color:var(--accent);white-space:nowrap}.synth-btn{font-family:var(--font-display);color:var(--ink);background:color-mix(in srgb, var(--syn) 15%, #14182699);border:1px solid color-mix(in srgb, var(--syn) 45%, transparent);transition:.18s var(--ease);border-radius:11px;align-items:center;gap:10px;padding:11px 16px;font-size:13.5px;font-weight:500;display:inline-flex}.synth-btn:hover{background:color-mix(in srgb, var(--syn) 26%, #14182699);box-shadow:0 0 22px -6px var(--syn)}.synth-btn.is-playing{border-color:var(--syn);box-shadow:0 0 26px -6px var(--syn)}.synth-btn__icon{width:18px;height:16px;color:var(--syn);place-items:center;display:grid}.eq{align-items:flex-end;gap:2px;height:14px;display:flex}.eq i{background:var(--syn);transform-origin:bottom;border-radius:2px;width:2.5px;animation:.9s ease-in-out infinite eqbar}.eq i:first-child{height:45%;animation-delay:0s}.eq i:nth-child(2){height:85%;animation-delay:.15s}.eq i:nth-child(3){height:60%;animation-delay:.3s}.eq i:nth-child(4){height:100%;animation-delay:.45s}@keyframes eqbar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.synth-spinner{border:2px solid color-mix(in srgb, var(--syn) 35%, transparent);border-top-color:var(--syn);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}.panel__related{flex-wrap:wrap;gap:7px;display:flex}.related-chip{color:var(--ink-dim);border:1px solid var(--line);transition:.18s var(--ease);background:#14182666;border-radius:999px;align-items:center;gap:7px;padding:7px 12px;font-size:12.5px;display:inline-flex}.related-chip:hover{color:var(--ink);border-color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);transform:translateY(-1px)}.related-chip__dot{background:var(--c);width:7px;height:7px;box-shadow:0 0 7px var(--c);border-radius:50%}.intro{z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .5s var(--ease) both;background:radial-gradient(circle at 50% 45%,#05060c59,#03040ad1);place-items:center;padding:24px;display:grid;position:fixed;inset:0}.intro__card{text-align:center;max-width:540px;animation:rise-in .6s var(--ease-out) both}.intro__kicker{letter-spacing:.42em;color:var(--accent);font-size:11px}.intro__title{letter-spacing:-.02em;background:linear-gradient(#fff,#aab6e8);color:#0000;-webkit-background-clip:text;background-clip:text;margin-top:16px;font-size:clamp(28px,5vw,43px)}.intro__lead{color:var(--ink-dim);max-width:450px;margin:18px auto 0;font-size:16px;line-height:1.55}.intro__controls{color:var(--ink-faint);flex-wrap:wrap;justify-content:center;gap:20px;margin-top:26px;font-size:13.5px;list-style:none;display:flex}.intro__controls b{color:var(--ink);font-weight:600}.intro__cta{font-family:var(--font-display);color:#05060a;transition:.2s var(--ease);background:linear-gradient(#bdecff,#69d6f5);border-radius:999px;margin-top:30px;padding:13px 28px;font-size:15px;font-weight:500;box-shadow:0 0 40px -8px #69d6f599}.intro__cta:hover{transform:translateY(-1px);box-shadow:0 0 52px -6px #69d6f5d9}.genrelist{z-index:5;position:fixed;inset:0;overflow-y:auto}.genrelist__inner{max-width:1080px;margin:0 auto;padding:112px 24px 80px}.genrelist__title{letter-spacing:-.02em;background:linear-gradient(#fff,#9fb0ea);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(32px,6vw,52px)}.genrelist__lead{color:var(--ink-dim);max-width:620px;margin-top:16px;font-size:17px;line-height:1.5}.famgroup{margin-top:46px}.famgroup__title{letter-spacing:-.01em;flex-wrap:wrap;align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.famgroup__dot{border-radius:50%;width:11px;height:11px;box-shadow:0 0 12px 1px}.famgroup__blurb{font-family:var(--font-body);color:var(--ink-faint);letter-spacing:0;font-size:13px;font-weight:400}.famgroup__grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:18px;display:grid}.gcard{text-align:left;border:1px solid var(--line);transition:.18s var(--ease);background:#0c101c8c;border-radius:14px;flex-direction:column;gap:8px;padding:16px 18px;display:flex}.gcard:hover{border-color:var(--c);background:color-mix(in srgb, var(--c) 9%, #0c101c8c);box-shadow:0 12px 30px -16px var(--c);transform:translateY(-2px)}.gcard__top{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.gcard__name{font-family:var(--font-display);color:var(--ink);font-size:16px;font-weight:600}.gcard__bpm{color:var(--c);font-size:12px}.gcard__unique{color:var(--ink-dim);font-size:13px;line-height:1.5}.genrelist__foot{border-top:1px solid var(--line);color:var(--ink-faint);max-width:680px;margin-top:56px;padding-top:22px;font-size:12.5px}.atlas-loading{z-index:4;flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex;position:fixed;inset:0}.atlas-loading__star{background:#bff7ff;border-radius:50%;width:14px;height:14px;animation:1.3s ease-in-out infinite soft-pulse;box-shadow:0 0 26px 7px #78e6ffb3}.atlas-loading__text{letter-spacing:.3em;color:var(--ink-faint);font-size:10px}@media (width<=680px){.panel{width:100%;max-height:80vh;animation:rise-in .3s var(--ease-out);border-radius:18px 18px 0 0;inset:auto 0 0}.brand__tag,.dock,.hint{display:none}.genrelist__inner{padding-top:92px}}@media (width<=560px){.brand__text{display:none}.search__trigger{padding:9px}.search__trigger span,.search__trigger kbd{display:none}.viewtoggle button{padding:6px 12px}}.artist-overlay{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:artist-fade .28s var(--ease-out);background:radial-gradient(120% 90% at 50% 0,#0a0e1cb8,#03040aeb);place-items:start center;padding:clamp(16px,5vh,64px) 18px;display:grid;position:fixed;inset:0;overflow-y:auto}@keyframes artist-fade{0%{opacity:0}to{opacity:1}}.artist-page{background:var(--panel-solid);border:1px solid var(--panel-border);border-radius:var(--radius);width:min(880px,100%);box-shadow:var(--shadow-panel);animation:panel-in .34s var(--ease-out);position:relative;overflow:hidden}.artist-page--empty{text-align:center;justify-items:center;gap:16px;padding:56px 24px;display:grid}.artist-empty__msg{color:var(--ink-dim)}.artist-page__close{top:16px;right:16px}.artist-page__scroll{padding:32px clamp(20px,4vw,40px) 36px}.artist-head{border-bottom:1px solid var(--line);padding-bottom:22px}.artist-head__kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-size:10.5px}.artist-head__name{font-family:var(--font-display);letter-spacing:-.02em;margin-top:8px;font-size:clamp(30px,5vw,46px);font-weight:600;line-height:1.04}.artist-head__blurb{font-family:var(--font-display);color:var(--ink-dim);max-width:58ch;margin-top:14px;font-size:16px;font-weight:400;line-height:1.5}.artist-head__genres{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.artist-head__raw{color:var(--ink-faint);letter-spacing:.02em;margin-top:13px;font-size:11px}.artist-head__spotify{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);transition:.18s var(--ease);background:#14182666;border-radius:999px;align-items:center;margin-top:16px;padding:7px 13px;font-size:11px;display:inline-flex}.artist-head__spotify:hover{color:var(--ink);background:#1db95424;border-color:#1db954}.artist-tracks{flex-direction:column;gap:16px;display:flex}.artist-track{flex-direction:column;gap:9px;display:flex}.artist-track__genres{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.artist-track__raw{color:var(--ink-faint);letter-spacing:.02em;font-size:10.5px}@media (width<=560px){.artist-page__scroll{padding:28px 16px}.artist-head__blurb{font-size:14.5px}}
