:root{--bg: #0d0d0d;--panel: #161616;--panel-border: #2a2a2a;--text: #eaeaea;--dim: #888;--accent: #1db954;--accent-dark: #0a7c34}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 -apple-system,system-ui,sans-serif}#app{display:grid;grid-template-columns:320px 1fr;height:100vh}#menu-toggle{display:none;position:fixed;top:12px;left:12px;z-index:200;width:40px;height:40px;padding:0;background:#000c;border:1px solid #333;border-radius:6px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}#menu-toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;transition:transform .2s,opacity .2s}#menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}#menu-toggle.open span:nth-child(2){opacity:0}#menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-backdrop{display:none;position:fixed;inset:0;z-index:150;background:#00000080}#panel{background:var(--panel);border-right:1px solid var(--panel-border);padding:16px;overflow-y:auto;min-height:0}#panel header h1{margin:0 0 4px;font-size:20px}#panel .tag{margin:0 0 16px;color:var(--dim);font-size:12px}#panel .info-asterisk{color:var(--accent);cursor:help;font-weight:600;text-decoration:underline dotted;position:relative}#panel .info-tooltip{display:none;position:fixed;background:#000;color:var(--text);border:1px solid #333;border-radius:4px;padding:6px 10px;font-size:11px;font-weight:400;white-space:normal;width:220px;z-index:999;line-height:1.4;text-decoration:none;top:60px;left:16px}#panel .info-asterisk:hover .info-tooltip{display:block}#panel section{margin-bottom:16px}#panel label{display:block;margin-bottom:6px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}#panel .row{display:flex;gap:12px}#panel .row>div{flex:1}input,select,button{width:100%;padding:6px 8px;background:#1f1f1f;color:var(--text);border:1px solid #333;border-radius:4px;font:inherit}button{cursor:pointer}button:hover{background:#262626}button.primary{background:var(--accent);border-color:var(--accent-dark);color:#000;font-weight:600}button.primary:hover{background:#1ed760}button.primary:disabled{opacity:.5;cursor:not-allowed}button.secondary{font-size:11px;color:var(--dim)}button.danger{background:#2a0a0a;border-color:#c62828;color:#ff5252;font-size:11px}button.danger:hover{background:#c62828;color:#fff}button.danger.confirm{background:#c62828;color:#fff;font-weight:600}.cache-panel{border:1px solid var(--panel-border);border-radius:4px;padding:8px}.cache-panel.hidden{display:none}.cache-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.cache-seeds{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}.cache-seed-item{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:2px 0}.cache-seed-item button{width:auto;padding:1px 6px;font-size:10px;color:#ff5252;border-color:#444}.search-row{display:flex;gap:6px}.search-row input{flex:1}.search-row button{width:auto}.results,.seeds{list-style:none;margin:8px 0 0;padding:0}.results li,.seeds li{padding:6px 8px;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}.results li:hover{background:#1f1f1f}.results li .dim,.seeds li .dim{color:var(--dim);font-size:11px}.seeds li{background:#1f1f1f;margin-bottom:4px;cursor:default}.seeds li button{width:auto;padding:2px 6px;font-size:11px}.seeds li .seed-name{color:var(--accent)}.actions{display:flex;gap:8px}.actions button{flex:1}.actions .pick-btn{flex:0 0 auto;width:32px;padding:4px 0;font-size:16px;line-height:1}.actions .pick-btn.primary{background:var(--accent);color:#000}.status{font-size:12px;min-height:1em}#graph{position:relative;overflow:hidden}#graph svg{display:block}#graph-canvas{position:absolute;inset:0;z-index:1}#graph-canvas canvas{display:block;touch-action:none}.graph-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#0d0d0d;transition:opacity .3s}.graph-overlay.hidden{opacity:0;pointer-events:none}.graph-overlay-content{text-align:center}.graph-overlay-content h2{font-size:28px;letter-spacing:.1em;margin:0 0 8px;color:var(--text)}.graph-overlay-content p{color:var(--dim);margin:0;font-size:14px}.tooltip{background:#000;border:1px solid #333;border-radius:4px;padding:6px 8px;font-size:12px;max-width:320px;max-height:400px;overflow-y:auto}.tooltip .dim{color:var(--dim)}.tooltip a.link{color:var(--accent);text-decoration:none;margin-right:6px;pointer-events:auto}.tooltip a.link:hover{text-decoration:underline}.info-panel{position:absolute;top:16px;right:16px;background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:16px;width:340px;max-height:calc(100vh - 32px);overflow-y:auto;z-index:20;box-shadow:0 4px 20px #00000080}.info-panel.hidden{display:none}.info-panel .info-close{position:absolute;top:8px;right:8px;width:auto;padding:2px 8px;font-size:18px;color:var(--dim);border:none;background:transparent}.info-panel .info-close:hover{color:var(--text);background:#262626}.info-panel h2{margin:0 0 8px;font-size:16px}.info-panel .dim{color:var(--dim);font-size:12px}.info-panel .section-label{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}.info-panel .item{padding:4px 0;font-size:13px;line-height:1.5}.info-panel a{color:var(--accent);text-decoration:none}.info-panel a:hover{text-decoration:underline}.info-panel .play-link{display:inline-block;width:20px;text-align:center;margin-right:4px;color:red}.info-panel a:hover .play-link{opacity:.7}.status-tag{font-size:10px;padding:1px 5px;border-radius:3px;background:#ffffff0f;color:var(--dim);border:1px solid #333;white-space:nowrap}.legend{position:absolute;bottom:16px;left:16px;background:#000000b3;border:1px solid #333;border-radius:4px;padding:8px 10px;font-size:11px;z-index:10;pointer-events:none}.legend-item{display:flex;align-items:center;gap:6px;margin:2px 0}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%}.legend .dot.seed{background:#1db954;border:1px solid #0a7c34}.legend .dot.shared{background:#f5a623;border:1px solid #b4730a}.legend .dot.collab{background:#fff;border:1px solid #333}.legend .gradient-bar{display:inline-block;width:40px;height:4px;border-radius:2px;background:linear-gradient(to right,#2a6db5,#00e5ff)}.legend .legend-hint{margin-top:4px;font-size:10px;max-width:200px;line-height:1.4}.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:6px;background:#000000b3;border:1px solid #333;border-radius:4px;padding:6px 8px;z-index:10}.progress-bar{display:flex;align-items:center;gap:8px;padding:0 8px;min-width:200px;max-width:400px;overflow:hidden}.progress-bar.hidden{display:none}.progress-fill{height:4px;min-width:40px;flex:1;background:#333;border-radius:2px;overflow:hidden;position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:var(--accent);border-radius:2px;width:var(--progress, 0%);transition:width .3s ease}.progress-text{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.share-btn{position:absolute;top:16px;left:16px;width:auto!important;padding:6px 12px;background:#000000b3!important;border:1px solid #333;border-radius:4px;cursor:pointer;z-index:10;font-size:12px;line-height:1;color:var(--text)!important;transition:border-color .15s}button.share-btn:hover{border-color:var(--accent);background:#000000b3!important}button.share-btn.copied{border-color:var(--accent)!important;color:var(--accent)!important}button.build-graph-btn{position:absolute;top:16px;left:100px;width:auto!important;padding:6px 12px;background:var(--accent)!important;border:1px solid var(--accent-dark);border-radius:4px;cursor:pointer;z-index:10;font-size:12px;line-height:1;font-weight:600;color:#000!important}button.build-graph-btn:hover{background:#1ed760!important}button.build-graph-btn:disabled{opacity:.5;cursor:not-allowed}.zoom-controls button.secondary{width:auto;padding:0 8px;font-size:12px}.divider{border:none;border-top:1px solid var(--panel-border);margin:16px 0}.panel-title{font-size:14px;margin:0;color:var(--text)}.path-inputs{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.select{background:var(--panel);color:var(--text);border:1px solid var(--panel-border);border-radius:4px;padding:6px 8px;font-size:13px;width:100%}.timeline-controls{display:flex;align-items:center;gap:8px;margin-bottom:6px}.timeline-slider{flex:1;accent-color:var(--accent)}.path-chain{margin-top:8px}.timeline-panel{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;align-items:stretch;gap:4px;background:#000c;border:1px solid #333;border-radius:4px;padding:8px;z-index:10;width:70px}.timeline-header{font-size:10px;color:var(--dim);text-align:center;width:100%;display:block;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.timeline-scroll{height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#555 transparent;cursor:pointer}.timeline-scroll::-webkit-scrollbar{width:4px}.timeline-scroll::-webkit-scrollbar-thumb{background:#555;border-radius:2px}.timeline-list{display:flex;flex-direction:column}.timeline-year{padding:3px 8px;font-size:12px;text-align:center;color:var(--text);font-variant-numeric:tabular-nums;border-radius:3px;transition:background .1s}.timeline-year:hover{background:#ffffff1a}.timeline-year.active{background:var(--accent);color:#000;font-weight:600}.timeline-current{font-size:11px;font-weight:600;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums;padding:4px 0;border-top:1px solid #333;line-height:1.3}.timeline-mode{display:flex;align-items:center;gap:4px;justify-content:center;font-size:11px;color:var(--text);cursor:pointer;padding:2px 0}.timeline-mode input{accent-color:var(--accent);margin:0}.info-panel .genres{margin:4px 0}.info-panel .genre-tag{display:inline-block;padding:2px 6px;margin:2px 2px 0 0;background:#1f1f1f;border-radius:3px;font-size:11px;color:var(--text)}@media (max-width: 768px){#menu-toggle{display:flex}#app{grid-template-columns:1fr}#panel{position:fixed;top:0;left:0;bottom:0;width:85%;max-width:340px;z-index:160;transform:translate(-100%);transition:transform .25s ease;padding-top:60px}#panel.open{transform:translate(0)}.menu-backdrop.open{display:block}#graph{padding-top:0}.zoom-controls{position:fixed;bottom:12px;right:12px;left:auto}.zoom-controls #zoom-fit{display:none}.zoom-controls:not(:has(#progress-bar:not(.hidden))){display:none}.progress-bar{min-width:120px}button.share-btn{position:fixed;top:12px;right:12px;left:auto}button.build-graph-btn{position:fixed;top:52px;right:12px;left:auto}.timeline-panel{position:fixed;top:100px;right:12px;bottom:auto;width:52px;padding:4px;gap:2px}.timeline-scroll{height:80px}.timeline-header{font-size:8px;margin-bottom:1px;letter-spacing:0}.timeline-year{font-size:10px;padding:1px 2px}.timeline-current{font-size:9px;padding:2px 0}.timeline-mode{font-size:9px;gap:2px;padding:1px 0;justify-content:center}.timeline-mode input{width:12px;height:12px}.info-panel{width:auto;left:8px;right:8px;top:56px;max-height:calc(100vh - 64px);padding:12px}.legend{display:none}}