.djdtl{--bg:#0F0E1A;--card:#16152A;--card2:#1C1B33;--line:rgba(245,240,232,.12);--text:#F5F0E8;--muted:rgba(245,240,232,.7);--accent:#5EE9C5;--cta:#FF3366;
 position:relative;color:var(--text);font-family:Barlow,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;max-width:1120px;margin:0 auto;isolation:isolate}
.djdtl *{box-sizing:border-box}
.djdtl h2,.djdtl h3,.djdtl h4{font-family:"Bricolage Grotesque",Barlow,sans-serif;color:var(--text);margin:0;letter-spacing:-.01em}
.djdtl button{font:inherit;cursor:pointer;color:inherit}
.djdtl-aura{position:absolute;inset:-40px -10px auto;height:420px;z-index:-1;pointer-events:none;filter:blur(40px);opacity:.55;
 background:radial-gradient(40% 50% at 20% 40%,rgba(94,233,197,.28),transparent 70%),radial-gradient(35% 45% at 80% 30%,rgba(255,51,102,.18),transparent 70%),radial-gradient(30% 40% at 55% 70%,rgba(160,120,255,.16),transparent 70%);
 animation:djdtlAura 18s ease-in-out infinite alternate}
@keyframes djdtlAura{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
@keyframes djdtlUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes djdtlGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes djdtlSpin{to{transform:rotate(360deg)}}
@keyframes djdtlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes djdtlBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes djdtlEq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes djdtlBars{0%,100%{height:30%}50%{height:100%}}
.djdtl-head{animation:djdtlUp .7s ease both}
.djdtl-kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.djdtl-eqlogo{display:inline-flex;gap:3px;height:16px;align-items:flex-end}
.djdtl-eqlogo i{width:3px;background:var(--accent);border-radius:2px;animation:djdtlBars 1.1s ease-in-out infinite}
.djdtl-eqlogo i:nth-child(2){animation-delay:.2s}.djdtl-eqlogo i:nth-child(3){animation-delay:.45s}.djdtl-eqlogo i:nth-child(4){animation-delay:.1s}
.djdtl-title{font-size:clamp(28px,4.6vw,48px);line-height:1.05;font-weight:800}
.djdtl-dek{color:var(--muted);max-width:680px;margin:12px 0 0;font-size:17px}
.djdtl-stats{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;font-size:14px;color:var(--muted)}
.djdtl-stats b{font-family:"Space Mono",monospace;color:var(--text);font-size:18px;margin-right:6px}
/* decade chart */
.djdtl-chart{margin:26px 0 8px;background:rgba(22,21,42,.7);border:1px solid var(--line);border-radius:14px;padding:16px 16px 10px}
.djdtl-chart h4{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}
.djdtl-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.djdtl-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;background:none;border:0;padding:0}
.djdtl-bar span.col{width:100%;max-width:56px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),rgba(94,233,197,.25));transform-origin:bottom;animation:djdtlGrow .9s cubic-bezier(.2,.8,.2,1) both;transition:filter .2s,transform .2s}
.djdtl-bar:hover span.col,.djdtl-bar:focus span.col{filter:brightness(1.25);transform:scaleY(1.04)}
.djdtl-bar small{font-family:"Space Mono",monospace;font-size:11px;color:var(--muted);margin-top:6px}
.djdtl-bar em{font-style:normal;font-size:12px;color:var(--text);margin-bottom:4px;opacity:0;transition:opacity .2s}
.djdtl-bar:hover em,.djdtl-bar:focus em{opacity:1}
/* controls */
.djdtl-controls{position:sticky;top:0;z-index:5;background:rgba(15,14,26,.92);backdrop-filter:blur(6px);padding:12px 0;margin:10px 0 6px;border-bottom:1px solid var(--line)}
.djdtl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.djdtl-row+.djdtl-row{margin-top:8px}
.djdtl-chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;line-height:1.2;display:inline-flex;align-items:center;gap:7px;color:var(--muted);transition:border-color .2s,color .2s,background .2s,transform .15s}
.djdtl-chip:hover{transform:translateY(-1px);color:var(--text)}
.djdtl-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:rgba(94,233,197,.09)}
.djdtl-chip .dot{width:8px;height:8px;border-radius:50%}
.djdtl-chip.start{border-color:rgba(255,51,102,.5);color:var(--text)}
.djdtl-chip.start[aria-pressed="true"]{background:rgba(255,51,102,.14);border-color:var(--cta)}
.djdtl-search{flex:1 1 220px;max-width:340px;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;font:inherit;font-size:15px}
.djdtl-search:focus,.djdtl-chip:focus-visible,.djdtl-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.djdtl-count{font-size:13px;color:var(--muted);margin-left:auto}
.djdtl-families{max-height:0;overflow:hidden;transition:max-height .35s ease}
.djdtl-families.open{max-height:260px}
/* legend */
.djdtl-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin:14px 0 4px}
.djdtl-legend span{display:inline-flex;align-items:center;gap:6px}
.djdtl-legend svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.6}
/* rail */
.djdtl-rail{position:relative;padding-left:26px;margin-top:10px}
.djdtl-rail::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)}
.djdtl-progress{position:absolute;left:8px;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--accent),var(--cta));transition:height .15s linear}
.djdtl-era{position:relative;margin:34px 0 14px}
.djdtl-era::before{content:"";position:absolute;left:-24px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(94,233,197,.12)}
.djdtl-era h3{font-family:"Space Mono",monospace;font-size:22px;color:var(--accent);font-weight:400;letter-spacing:.04em}
.djdtl-era p{color:var(--muted);margin:4px 0 0;max-width:720px;font-size:15px}
.djdtl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-items:start}
/* card */
.djdtl-card{position:relative;text-align:left;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;min-height:150px;
 opacity:0;transform:translateY(16px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .5s ease}
.djdtl-card.in{opacity:1;transform:none}
.djdtl-card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:inset 3px 0 0 var(--fam)}
.djdtl-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--fam) 55%,transparent);box-shadow:0 14px 28px -14px var(--fam)}
.djdtl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.djdtl-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fam) 14%,transparent);border:1px solid color-mix(in srgb,var(--fam) 35%,transparent)}
.djdtl-ico svg{width:24px;height:24px;stroke:var(--text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.djdtl-ico svg *{transform-box:fill-box;transform-origin:center}
.djdtl-card:hover .spin,.djdtl-card.open .spin{animation:djdtlSpin 3s linear infinite}
.djdtl-card:hover .pulse,.djdtl-card.open .pulse{animation:djdtlPulse 1s ease-in-out infinite}
.djdtl-card:hover .blink,.djdtl-card.open .blink{animation:djdtlBlink .8s steps(2) infinite}
.djdtl-card:hover .blink.d2{animation-delay:.4s}
.djdtl-card:hover .eq,.djdtl-card.open .eq{animation:djdtlEq .6s ease-in-out infinite}
.djdtl-yr{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--muted)}
.djdtl-card h4{font-size:18px;line-height:1.2;font-weight:800}
.djdtl-meta{display:block;font-size:13px;color:var(--muted);line-height:1.35}.djdtl-meta.aka{font-style:italic;font-size:12.5px}
.djdtl-bpm{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-family:"Space Mono",monospace}
.djdtl-bpm .meter{flex:1;height:4px;border-radius:4px;background:rgba(245,240,232,.08);overflow:hidden}
.djdtl-bpm .meter i{display:block;height:100%;width:0;background:var(--fam);border-radius:4px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.djdtl-card.in .djdtl-bpm .meter i{width:var(--w)}
.djdtl-hear{font-size:14px;color:var(--text);opacity:.88;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.djdtl-card.open .djdtl-hear{-webkit-line-clamp:unset;display:block}
.djdtl-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.djdtl-card.open .djdtl-more{grid-template-rows:1fr}
.djdtl-more>div{overflow:hidden}
.djdtl-more h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:12px 0 4px;font-weight:600}
.djdtl-more p{margin:0;font-size:14px;color:var(--muted)}
.djdtl-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.djdtl-btn{border:1px solid var(--line);background:rgba(245,240,232,.03);border-radius:999px;padding:5px 11px;font-size:12.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;transition:border-color .2s,background .2s}
.djdtl-btn:hover{border-color:var(--accent);background:rgba(94,233,197,.08)}
.djdtl-btn.play{border-color:color-mix(in srgb,var(--fam) 60%,transparent)}
.djdtl-btn.play svg{width:12px;height:12px;fill:currentColor}
.djdtl-yt{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-top:10px;background:#000;animation:djdtlUp .4s ease both}
.djdtl-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.djdtl-yt .cap{position:absolute;left:0;right:0;bottom:0}
.djdtl-track{font-size:13px;color:var(--muted);margin-top:8px}
.djdtl-track b{color:var(--text);font-weight:600}
.djdtl-empty{color:var(--muted);padding:30px 0}
.djdtl-note{color:var(--muted);font-size:13px;margin:28px 0 0}
.djdtl-static{max-width:1120px;margin:30px auto 0;color:rgba(245,240,232,.75);font-size:14px}
.djdtl-static summary{cursor:pointer;color:#5EE9C5}
.djdtl-static h3{font-size:16px;margin:14px 0 4px;color:#F5F0E8}
.djdtl-static a{color:#5EE9C5}
@media (max-width:640px){.djdtl-grid{grid-template-columns:1fr}.djdtl-rail{padding-left:20px}.djdtl-rail::before,.djdtl-progress{left:5px}.djdtl-era::before{left:-21px}.djdtl-bars{height:90px;gap:5px}.djdtl-count{margin-left:0}}
@media (prefers-reduced-motion:reduce){.djdtl *,.djdtl-aura{animation:none !important;transition:none !important}.djdtl-card{opacity:1;transform:none}}

.djdtl-labels{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.djdtl-lab{font:inherit;font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);border-radius:8px;padding:4px 9px;display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left;transition:border-color .15s,transform .15s,background .15s}
.djdtl-lab small{font-size:10.5px;color:var(--muted);font-family:"Space Mono",monospace}
.djdtl-lab:hover,.djdtl-lab:focus-visible{border-color:var(--fam);transform:translateY(-1px);background:rgba(255,255,255,.06)}
.djdtl-line{display:grid;grid-template-columns:1fr;gap:2px}
.djdtl-go{font:inherit;font-size:12.5px;cursor:pointer;display:inline-block;margin:0 6px 6px 0;border:1px solid var(--line);background:transparent;color:var(--fam);border-radius:999px;padding:3px 10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:background .15s,transform .15s}
.djdtl-go:hover,.djdtl-go:focus-visible{background:rgba(255,255,255,.07);transform:translateX(2px)}
.djdtl-card.flash{animation:djdtlFlash 1.6s ease}
@keyframes djdtlFlash{0%,100%{box-shadow:0 0 0 0 transparent}25%,60%{box-shadow:0 0 0 3px var(--fam),0 0 34px -6px var(--fam)}}
@media (max-width:600px){.djdtl-line{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.djdtl-card.flash{animation:none;outline:2px solid var(--fam)}}