:root{--bg: #06060d;--ink: #e8e6f0;--ink-dim: #8e8ca3;--ink-faint: #4d4b62;--line: rgba(160, 160, 200, .18);--panel: rgba(10, 10, 20, .72);--accent: #ff7a3d;--accent-soft: rgba(255, 122, 61, .22);--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--src-spotify: #1ed760;--src-fact: #58b8ff;--src-interp: #ffb84d;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}button,input{font:inherit;color:inherit}a{color:var(--ink);text-decoration:none}a:hover{color:var(--accent)}[hidden]{display:none!important}#stage{position:fixed;inset:0}#stage canvas{display:block}#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;left:0;top:0;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink);white-space:nowrap;transform:translate(-50%,-100%);text-shadow:0 0 6px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,1);will-change:transform,opacity;opacity:.85;pointer-events:none}.label.big{font-size:13px;font-weight:600;text-shadow:0 0 10px color-mix(in srgb,var(--fam, #fff) 70%,transparent),0 0 6px rgba(0,0,0,.9)}.label.hot{color:#fff;font-size:14px;font-weight:600;opacity:1;text-shadow:0 0 14px var(--fam, #fff),0 0 4px rgba(0,0,0,1)}.label.dim{opacity:.35}.label.sector{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fam, var(--ink-dim));opacity:.62;pointer-events:auto;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .3s}.label.sector:hover,.label.sector.active{opacity:1;text-shadow:0 0 12px var(--fam)}#hud-top{position:fixed;top:0;left:0;right:0;padding:14px 18px;display:flex;align-items:flex-start;gap:22px;pointer-events:none;z-index:5}#hud-top>*{pointer-events:auto}.brand-mark{font:700 20px/1 var(--sans);letter-spacing:.32em;background:linear-gradient(90deg,#ff7a3d,#ff4fa0 30%,#b06bff,#58b8ff 80%,#3df2c8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}.brand-sub{font:400 11px/1.4 var(--mono);color:var(--ink-dim);margin-top:6px;letter-spacing:.04em}.modes{display:flex;gap:4px;margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px;backdrop-filter:blur(10px)}.mode{background:transparent;border:0;border-radius:4px;padding:7px 11px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);cursor:pointer}.mode:hover{color:var(--ink)}.mode.active{background:var(--accent-soft);color:#fff;box-shadow:inset 0 0 0 1px var(--accent)}.search{position:relative;width:260px}#search{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 12px;font:400 12px/1 var(--mono);outline:none;backdrop-filter:blur(10px)}#search:focus{border-color:var(--accent)}#search-results{position:absolute;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;background:#0a0a14f2;border:1px solid var(--line);border-radius:6px;max-height:50vh;overflow:auto}#search-results li{padding:7px 9px;font:400 12px/1.3 var(--mono);cursor:pointer;border-radius:4px;display:flex;gap:8px;align-items:baseline}#search-results li:hover,#search-results li.active{background:var(--accent-soft)}#search-results .kind{color:var(--ink-faint);font-size:10px;text-transform:uppercase;letter-spacing:.1em}#search-results .sub{color:var(--ink-dim);margin-left:auto;font-size:10px}#legend{position:fixed;left:18px;top:92px;bottom:70px;width:236px;z-index:4;display:flex;flex-direction:column;gap:6px;overflow:auto;padding:10px 12px;scrollbar-width:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(12px)}#legend::-webkit-scrollbar{display:none}.panel-title{font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:6px 0 4px;display:flex;align-items:center;gap:8px}.panel-title .hint{letter-spacing:.04em;text-transform:none;color:var(--ink-faint);margin-left:auto}.traits-title{margin-top:14px}#floor{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;cursor:pointer;margin:4px 0 8px;background:linear-gradient(to right,var(--accent) var(--fill, 0%),rgba(255,255,255,.15) var(--fill, 0%))}#floor::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0}#floor::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}#families{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.realm{font:500 9px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin:8px 0 3px 2px}.realm:first-child{margin-top:0}.family{position:relative;display:flex;align-items:center;gap:9px;padding:4px 8px;border-radius:5px;cursor:pointer;font:400 11.5px/1.2 var(--mono);border:1px solid transparent;overflow:hidden;transition:background .2s,opacity .3s,transform .2s}.family .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--fam);opacity:.45;border-radius:2px;transition:width .6s cubic-bezier(.2,.8,.2,1)}.family:hover{background:color-mix(in srgb,var(--fam) 12%,transparent);transform:translate(2px)}.family.active{background:color-mix(in srgb,var(--fam) 22%,transparent);border-color:var(--fam);color:#fff}.family.muted{opacity:.38}.family .swatch{color:var(--fam);background:var(--fam)}.swatch{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor,0 0 2px currentColor;flex:none}.family.active .swatch{animation:beat 1.4s ease-in-out infinite}@keyframes beat{0%,to{transform:scale(1)}50%{transform:scale(1.45)}}.family .n{margin-left:auto;color:var(--ink-dim);font-size:10px}#traits .group{margin-bottom:8px}#traits .group-name{font:400 10px/1 var(--mono);color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;margin:6px 0 4px}.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{background:#ffffff0a;border:1px solid var(--line);border-radius:999px;padding:4px 9px;font:400 10.5px/1 var(--mono);color:var(--ink-dim);cursor:pointer;display:inline-flex;gap:6px;align-items:center}.chip:hover{color:var(--ink);border-color:var(--ink-dim)}.chip.active{background:var(--accent-soft);border-color:var(--accent);color:#fff}.chip .n{color:var(--ink-faint);font-size:9px}.chip.active .n{color:var(--ink-dim)}@keyframes slideIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}#detail:not([hidden]){animation:slideIn .35s cubic-bezier(.2,.8,.2,1)}#legend{animation:rise .6s .4s both}#hud-top,#hud-bottom{animation:rise .6s .2s both}.conn,.track{animation:rise .35s both}#detail{position:fixed;right:18px;top:92px;bottom:70px;width:360px;z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(14px);overflow:auto;padding:18px 18px 22px;scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent}#detail-close{position:absolute;top:8px;right:8px}.icon-btn{background:transparent;border:1px solid var(--line);border-radius:5px;width:28px;height:28px;cursor:pointer;color:var(--ink-dim);display:inline-grid;place-items:center}.icon-btn:hover{color:#fff;border-color:var(--ink-dim)}.link-btn{background:none;border:0;padding:0;color:var(--ink-dim);cursor:pointer;font:inherit;text-decoration:underline dotted;text-underline-offset:3px}.link-btn:hover{color:var(--accent)}.d-family{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;margin-bottom:8px}.d-name{font:700 22px/1.1 var(--sans);margin:0 26px 6px 0}.d-meta{font:400 11px/1.4 var(--mono);color:var(--ink-dim);margin-bottom:12px}.d-blurb{font-size:13.5px;line-height:1.5;margin:0 0 12px}.d-section{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin:18px 0 8px;display:flex;align-items:center;gap:8px}.d-section .n{color:var(--ink-faint);letter-spacing:0}.tracks{list-style:none;margin:0;padding:0}.track{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}.track .play{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink);font-size:9px;display:grid;place-items:center;flex:none}.track .play:hover,.track.playing .play{background:var(--accent);border-color:var(--accent);color:#000}.track .t-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track .t-album{color:var(--ink-faint);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track .t-dur{font:400 10.5px/1 var(--mono);color:var(--ink-dim);flex:none}.track .t-flag{font:400 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--src-spotify);border:1px solid currentColor;border-radius:3px;padding:2px 4px;flex:none}.conns{list-style:none;margin:0;padding:0}.conn{padding:7px 8px;margin:0 -8px;border-radius:6px;cursor:pointer}.conn:hover,.conn.active{background:#ffffff0d}.conn-head{display:flex;align-items:center;gap:8px;font-size:13px}.conn-head .w{margin-left:auto;font:400 10px/1 var(--mono);color:var(--ink-faint)}.conn-reasons{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px}.reason{font:400 10px/1.2 var(--mono);padding:3px 6px;border-radius:3px;border:1px solid;opacity:.9}.reason.spotify{color:var(--src-spotify)}.reason.fact{color:var(--src-fact)}.reason.interpretation{color:var(--src-interp)}.reason.lineage{color:var(--src-fact)}.src-spotify{color:var(--src-spotify)}.src-fact{color:var(--src-fact)}.src-interp{color:var(--src-interp)}.facts{margin:0;padding:0 0 0 16px;font-size:12.5px;line-height:1.5;color:var(--ink)}.facts li{margin-bottom:4px}.facts .tag{font:400 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-left:6px}.d-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.btn{background:#ffffff0d;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.btn:hover{border-color:var(--accent);color:#fff}.btn.primary{background:var(--accent-soft);border-color:var(--accent);color:#fff}.muted{color:var(--ink-dim)}.confidence{font:400 10px/1.4 var(--mono);color:var(--ink-faint);margin-top:14px}.hop{display:grid;grid-template-columns:18px 1fr;gap:8px;margin-bottom:10px}.hop .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;box-shadow:0 0 8px currentColor}.hop .hop-name{font-weight:700;font-size:14px;cursor:pointer}.hop .hop-name:hover{color:var(--accent)}.hop .hop-via{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:10px 0 2px}#bridge-bar{position:fixed;left:50%;top:70px;transform:translate(-50%);z-index:6;background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:12px;font:400 12px/1 var(--mono);backdrop-filter:blur(10px)}.bridge-label{letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:var(--accent)}.bridge-slot{padding:6px 10px;border:1px dashed var(--ink-faint);border-radius:5px;color:var(--ink-dim);min-width:120px;text-align:center}.bridge-slot.filled{border-style:solid;border-color:var(--ink-dim);color:#fff}.bridge-arrow{color:var(--ink-faint)}#player{position:fixed;left:50%;bottom:62px;transform:translate(-50%);z-index:6;width:min(640px,calc(100vw - 36px));background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto auto;gap:6px 12px;align-items:center;backdrop-filter:blur(12px)}.player-vol{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:6px}#player-mute{width:26px;height:26px;font-size:12px;border:0}#player-volume{-webkit-appearance:none;appearance:none;width:84px;height:4px;border-radius:2px;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--fill, 50%),rgba(255,255,255,.15) var(--fill, 50%))}#player-volume::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0}#player-volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}#player-volume:focus-visible{outline:1px solid var(--accent);outline-offset:4px}#player-toggle{width:34px;height:34px;border-radius:50%;background:var(--accent);border-color:var(--accent);color:#000;font-size:12px;grid-row:span 2}.player-meta{min-width:0}#player-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#player-artist{font:400 10.5px/1.3 var(--mono);color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-bar{grid-column:2;height:3px;background:#ffffff1a;border-radius:2px;overflow:hidden}#player-progress{height:100%;width:0;background:var(--accent)}#player-spotify{grid-column:4;grid-row:1 / span 2;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--src-spotify)}#player.no-preview #player-toggle{opacity:.35}#hud-bottom{position:fixed;left:0;right:0;bottom:0;padding:14px 18px;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}#hud-bottom>*{pointer-events:auto}.stamp{display:flex;gap:18px;align-items:center;font:400 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--ink-dim);background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:5px}.stamp .link-btn{letter-spacing:.06em;text-transform:lowercase}.credits{font:400 11px/1 var(--mono);color:var(--ink-dim);display:flex;gap:10px;align-items:center}.credits a{color:var(--ink-dim)}.credits a:hover{color:var(--accent)}.sep{color:var(--ink-faint)}#about{position:fixed;inset:0;z-index:20;background:#04040ab8;display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}.about-card{position:relative;max-width:560px;background:#0d0d18;border:1px solid var(--line);border-radius:10px;padding:28px 30px;font-size:14px;line-height:1.6}.about-card h2{margin:0 0 12px;font-size:18px;letter-spacing:.08em;text-transform:uppercase}.about-card p{margin:0 0 12px}#about-close{position:absolute;top:10px;right:10px}#loading{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-content:center;gap:16px;justify-items:center;font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);transition:opacity .6s}#loading.done{opacity:0;pointer-events:none}.loading-ring{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink-faint);border-top-color:var(--accent);animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#tooltip{position:fixed;z-index:7;pointer-events:none;background:#0a0a14eb;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:400 11px/1.4 var(--mono);max-width:260px;transform:translate(14px,14px)}#tooltip b{font-family:var(--sans);font-size:13px}#tooltip .tt-sub{color:var(--ink-dim)}@media(max-width:900px){#hud-top{flex-wrap:wrap;gap:10px}.modes{margin-left:0;order:3;width:100%;justify-content:space-between}.search{width:100%;order:2}#legend{display:none}#detail{inset:auto 10px 60px;width:auto;max-height:55vh}#player{bottom:auto;top:150px}#hud-bottom{flex-direction:column;align-items:flex-start;gap:8px}}.axis-fams{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 2px}.axis-fam{font:500 10px/1 var(--mono);padding:3px 7px;border-radius:999px;color:var(--fam);border:1px solid color-mix(in srgb,var(--fam) 55%,transparent);background:color-mix(in srgb,var(--fam) 12%,transparent)}.axis-fam b{color:var(--ink);font-weight:600;margin-left:2px}.axis-join{color:var(--ink-faint);font-size:10px}.growing{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:4px 10px 4px 8px;border-radius:999px;background:#3df2c814;border:1px solid rgba(61,242,200,.35);font:500 10px/1 var(--mono);letter-spacing:.06em;color:#9ff5df}.growing .pulse{width:7px;height:7px;border-radius:50%;background:#3df2c8;box-shadow:0 0 #3df2c8b3;animation:pulse-ring 1.8s ease-out infinite}@keyframes pulse-ring{0%{box-shadow:0 0 #3df2c8b3}to{box-shadow:0 0 0 9px #3df2c800}}.growing-bar{width:70px;height:3px;border-radius:2px;background:#ffffff1f;overflow:hidden}#growing-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#3df2c8,#58b8ff);transition:width 1.6s cubic-bezier(.2,.8,.2,1) .8s}@media(prefers-reduced-motion:reduce){.growing .pulse{animation:none}}