.djdmm{--bg:#0F0E1A;--card:#16152A;--card2:#1C1B33;--line:rgba(245,240,232,.12);--text:#F5F0E8;--muted:rgba(245,240,232,.68);--accent:#5EE9C5;--cta:#FF3366;--ease:cubic-bezier(.2,.8,.2,1);
 position:relative;isolation:isolate;color:var(--text);font-family:Barlow,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;max-width:1200px;margin:0 auto;overflow-x:clip}
.djdmm *{box-sizing:border-box}
.djdmm h2,.djdmm h3,.djdmm h4{font-family:"Bricolage Grotesque",Barlow,sans-serif;color:var(--text);margin:0;letter-spacing:-.01em}
.djdmm a{color:var(--accent);text-decoration:none}
.djdmm a:hover{text-decoration:underline}
.djdmm button,.djdmm select{font:inherit;color:inherit;cursor:pointer}
.djdmm :where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.djdmm .mm-aura{position:absolute;inset:-40px 0 auto 0;height:440px;z-index:-1;pointer-events:none;filter:blur(40px);opacity:.55;
 background:radial-gradient(40% 50% at 20% 40%,rgba(94,233,197,.26),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:mmAura 18s ease-in-out infinite alternate}
@keyframes mmAura{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
@keyframes mmUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mmBars{0%,100%{height:30%}50%{height:100%}}
.djdmm.js-on .mm-r:not(.in){opacity:0}
.djdmm.js-on .mm-r.in{animation:mmUp .7s var(--ease) both;animation-delay:var(--d,0ms)}
/* head */
.djdmm .mm-head{padding:8px 0 6px}
.djdmm .mm-kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-weight:600}
.djdmm .mm-eq{display:inline-flex;gap:3px;height:16px;align-items:flex-end}
.djdmm .mm-eq i{width:3px;height:50%;background:var(--accent);border-radius:2px;animation:mmBars 1.1s ease-in-out infinite}
.djdmm .mm-eq i:nth-child(2){animation-delay:.2s}.djdmm .mm-eq i:nth-child(3){animation-delay:.45s}.djdmm .mm-eq i:nth-child(4){animation-delay:.1s}
.djdmm .mm-title{font-size:clamp(26px,4.2vw,44px);line-height:1.06;font-weight:800;max-width:900px}
.djdmm .mm-dek{color:var(--muted);max-width:760px;margin:14px 0 0;font-size:17px}
.djdmm .mm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0}
.djdmm .mm-stat{background:rgba(22,21,42,.75);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.djdmm .mm-stat b{display:block;font-family:"Space Mono",monospace;font-size:26px;line-height:1.1;color:var(--text)}
.djdmm .mm-stat span{font-size:13px;color:var(--muted)}
/* section heads */
.djdmm .mm-sh{font-size:clamp(20px,2.6vw,26px);font-weight:700;margin:0 0 14px}
/* sequencer */
.djdmm .mm-seq{margin:34px 0 0;background:linear-gradient(180deg,rgba(28,27,51,.95),rgba(22,21,42,.95));border:1px solid rgba(94,233,197,.28);border-radius:18px;padding:20px 20px 16px;box-shadow:0 30px 60px -40px rgba(94,233,197,.35)}
.djdmm .mm-seq-top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.djdmm .mm-seq h3{font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.1}
.djdmm .mm-seq-note{color:var(--muted);font-size:14.5px;margin:10px 0 0;max-width:720px}
.djdmm .mm-badge{display:inline-block;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#0F0E1A;background:#F2C94C;border-radius:6px;padding:2px 7px;margin-right:6px;vertical-align:1px}
.djdmm .mm-playbtn{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--cta);color:#fff;border:0;border-radius:999px;padding:13px 24px 13px 18px;font-weight:700;font-size:17px;box-shadow:0 10px 30px -12px var(--cta);transition:transform .15s,box-shadow .2s,background .2s}
.djdmm .mm-playbtn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--cta)}
.djdmm .mm-pi{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.djdmm .mm-playbtn[aria-pressed="true"]{background:#2a2946;box-shadow:0 0 0 2px var(--cta) inset}
.djdmm .mm-playbtn[aria-pressed="true"] .mm-pi{border:0;width:13px;height:13px;background:var(--cta);border-radius:2px}
.djdmm .mm-presets,.djdmm .mm-bassmode,.djdmm .mm-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.djdmm .mm-presets{margin:18px 0 14px}
.djdmm .mm-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.djdmm .mm-kit{display:inline-flex;gap:8px;flex-wrap:wrap}
.djdmm .mm-chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 13px;font-size:13.5px;line-height:1.2;color:var(--muted);transition:border-color .2s,color .2s,background .2s,transform .15s}
.djdmm .mm-chip:hover{transform:translateY(-1px);color:var(--text);border-color:rgba(94,233,197,.45)}
.djdmm .mm-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:rgba(94,233,197,.1)}
.djdmm .mm-clear{margin-left:auto;border-color:rgba(255,51,102,.4)}
.djdmm .mm-grid{display:grid;gap:6px;margin:4px 0 12px}
.djdmm .mm-trk{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center}
.djdmm .mm-tl-lab{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.djdmm .mm-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.djdmm .mm-st{position:relative;height:34px;border-radius:6px;border:1px solid rgba(245,240,232,.1);background:rgba(245,240,232,.05);padding:0;transition:background .12s,transform .1s,box-shadow .12s;font-family:"Space Mono",monospace;font-size:11px;color:#0F0E1A;font-weight:700}
.djdmm .mm-st:nth-child(4n+1){background:rgba(245,240,232,.09)}
.djdmm .mm-st:nth-child(4n+1):not(:first-child){margin-left:4px}
.djdmm .mm-st:hover{border-color:rgba(245,240,232,.35)}
.djdmm .mm-st.on{background:var(--tc);border-color:transparent;box-shadow:0 0 14px -4px var(--tc)}
.djdmm .mm-st.acc::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#0F0E1A}
.djdmm .mm-st.sl::before{content:"";position:absolute;left:3px;right:-6px;bottom:3px;height:3px;border-radius:2px;background:#0F0E1A;opacity:.7}
.djdmm .mm-st.hi{box-shadow:inset 0 3px 0 rgba(15,14,26,.55)}
.djdmm .mm-st.now{outline:2px solid rgba(245,240,232,.85);outline-offset:-1px}
.djdmm .mm-st.on.now{transform:scale(1.08)}
.djdmm .mm-bassmode{font-size:13px;color:var(--muted);margin:2px 0 14px}
.djdmm .mm-knobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;padding:14px;border-radius:12px;background:rgba(15,14,26,.55);border:1px solid var(--line)}
.djdmm .mm-k{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.djdmm .mm-k output{font-family:"Space Mono",monospace;color:var(--text)}
.djdmm .mm-k input[type=range]{width:100%;accent-color:var(--accent);height:22px;margin:0}
.djdmm .mm-k select{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text)}
.djdmm .mm-seq-foot{font-size:13.5px;color:var(--muted);margin:12px 0 0}
/* timeline */
.djdmm .mm-tlwrap{margin:40px 0 0}
.djdmm .mm-tl{position:relative;height:150px;margin:0 14px}
.djdmm .mm-tl-line{position:absolute;left:0;right:0;top:74px;height:2px;background:linear-gradient(90deg,rgba(94,233,197,.2),var(--accent),rgba(255,51,102,.6));transform-origin:left;transition:transform 1.2s var(--ease)}
.djdmm.js-on .mm-tlwrap:not(.in) .mm-tl-line{transform:scaleX(0)}
.djdmm .mm-tick{position:absolute;left:var(--x);top:140px;transform:translateX(-50%);font-family:"Space Mono",monospace;font-size:11px;color:rgba(245,240,232,.4)}
.djdmm .mm-tl-list{list-style:none;margin:0;padding:0}
.djdmm .mm-tl-list li{position:absolute;left:var(--x);top:0;height:150px;width:0}
.djdmm .mm-tl-list li::before{content:"";position:absolute;left:-6px;top:69px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(15,14,26,1),0 0 16px var(--c)}
.djdmm .mm-tl-a{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;padding:3px 7px;border-radius:8px;color:var(--text);transition:background .2s,transform .2s}
.djdmm .mm-tl-a:hover{background:rgba(245,240,232,.07);text-decoration:none}
.djdmm .mm-tl-list li:nth-child(odd) .mm-tl-a{bottom:88px}
.djdmm .mm-tl-list li:nth-child(even) .mm-tl-a{top:88px}
.djdmm .mm-tl-y{font-family:"Space Mono",monospace;font-size:11px;color:var(--c)}
.djdmm .mm-tl-n{font-size:13px;font-weight:600;line-height:1.15}
/* gallery */
.djdmm .mm-gallery{margin:40px 0 0}
.djdmm .mm-galhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px}
.djdmm .mm-galhead .mm-sh{margin:0 8px 0 0}
.djdmm .mm-count{margin:0 0 0 auto;font-size:13px;color:var(--muted)}
.djdmm .mm-count span{font-family:"Space Mono",monospace;color:var(--text)}
.djdmm .mm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.djdmm .mm-card{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.djdmm .mm-card:hover,.djdmm .mm-card:focus-within{transform:translateY(-4px);box-shadow:0 22px 44px -26px var(--c),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.djdmm .mm-card[hidden]{display:none}
.djdmm .mm-card.flash{box-shadow:0 0 0 2px var(--c),0 22px 44px -20px var(--c)}
.djdmm .mm-art{padding:14px 14px 4px;background:radial-gradient(80% 100% at 50% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
.djdmm .mm-art svg{display:block;width:100%;height:auto;max-height:190px}
.djdmm .mm-body{padding:8px 18px 16px;display:flex;flex-direction:column;flex:1}
.djdmm .mm-meta{display:flex;align-items:center;gap:10px}
.djdmm .mm-year{font-family:"Space Mono",monospace;font-size:20px;font-weight:700;color:var(--c)}
.djdmm .mm-type{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.djdmm .mm-name{font-size:22px;font-weight:800;line-height:1.15;margin:4px 0 2px}
.djdmm .mm-maker{margin:0;font-size:13.5px;color:var(--muted)}
.djdmm .mm-lede{margin:10px 0 10px;font-size:15.5px}
.djdmm .mm-dl{margin:0;display:grid;gap:10px}
.djdmm .mm-row dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);font-weight:700;margin:0 0 2px;display:flex;align-items:center;gap:7px}
.djdmm .mm-row dd{margin:0;font-size:14.5px;color:rgba(245,240,232,.86)}
.djdmm .mm-recs{margin:0;padding:0 0 0 16px}
.djdmm .mm-recs li{margin:0 0 2px}
.djdmm .mm-recs li::marker{color:var(--c)}
.djdmm .mm-genres{display:flex;flex-wrap:wrap;gap:6px}
.djdmm .mm-g{font-size:13px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:999px;padding:3px 10px;color:var(--text);transition:background .2s}
.djdmm .mm-g:hover{background:color-mix(in srgb,var(--c) 18%,transparent);text-decoration:none}
.djdmm .mm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.djdmm .mm-fact{background:rgba(15,14,26,.55);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.djdmm .mm-fact span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.djdmm .mm-fact b{font-size:14.5px;font-weight:600;line-height:1.35;display:block;margin-top:2px}
.djdmm .mm-now{background:rgba(94,233,197,.06);border:1px solid rgba(94,233,197,.2);border-radius:10px;padding:9px 11px}
.djdmm .mm-now dt{color:var(--accent)}
.djdmm .mm-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(94,233,197,.6);animation:mmBeat 1.8s ease-out infinite}
@keyframes mmBeat{0%{box-shadow:0 0 0 0 rgba(94,233,197,.55)}100%{box-shadow:0 0 0 8px rgba(94,233,197,0)}}
.djdmm .mm-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.djdmm .mm-vbtn{display:flex;align-items:center;gap:10px;text-align:left;background:rgba(255,51,102,.1);border:1px solid rgba(255,51,102,.35);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:600;transition:background .2s}
.djdmm .mm-vbtn:hover{background:rgba(255,51,102,.2)}
.djdmm .mm-vbtn small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.djdmm .mm-play{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cta);position:relative}
.djdmm .mm-play::after{content:"";position:absolute;left:11px;top:8px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.djdmm .mm-video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.djdmm .mm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.djdmm .mm-read{font-size:14px;font-weight:600}
.djdmm .mm-refs{font-size:12px;color:var(--muted)}
.djdmm .mm-ref{font-family:"Space Mono",monospace;font-size:11.5px;margin-left:2px}
/* plain + sources */
.djdmm .mm-plain{margin:44px 0 0}
.djdmm .mm-fb{border-bottom:1px solid var(--line)}
.djdmm .mm-fb summary{cursor:pointer;padding:10px 0;list-style:none;display:flex;align-items:center;gap:10px}
.djdmm .mm-fb summary::-webkit-details-marker{display:none}
.djdmm .mm-fb summary::before{content:"+";font-family:"Space Mono",monospace;color:var(--accent);width:14px}
.djdmm .mm-fb[open] summary::before{content:"-"}
.djdmm .mm-fb h4{font-size:16px;font-weight:600;display:inline}
.djdmm .mm-fb p{margin:0 0 8px 24px;font-size:14.5px;color:rgba(245,240,232,.84)}
.djdmm .mm-sources{margin:44px 0 10px}
.djdmm .mm-srcnote{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.djdmm .mm-srclist{margin:0;padding:0 0 0 22px;font-size:12.5px;color:var(--muted);columns:2;column-gap:28px}
.djdmm .mm-srclist li{break-inside:avoid;margin:0 0 6px;overflow-wrap:anywhere}
.djdmm .mm-srclist li:target{color:var(--text)}
.djdmm .mm-srclist span{display:block}
/* machine animation */
.djdmm .mm-art svg *{transform-box:fill-box;transform-origin:center}
.djdmm .mm-led{fill-opacity:.28}
.djdmm .mm-card.play .mm-led{animation:mmLed 1.6s linear infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes mmLed{0%,4%{fill-opacity:1}10%,100%{fill-opacity:.28}}
.djdmm .mm-card.play .mm-knob{animation:mmKnob 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.41s)}
@keyframes mmKnob{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(40deg)}}
.djdmm .mm-card.play .mm-spin{animation:mmSpin 1.8s linear infinite}
.djdmm .mm-card.play .mm-spin.mm-slow{animation-duration:3.2s}
@keyframes mmSpin{to{transform:rotate(360deg)}}
.djdmm .mm-card.play .mm-key{animation:mmKey 2.24s ease-out infinite;animation-delay:calc(var(--i)*.16s)}
@keyframes mmKey{0%,5%{fill:var(--c)}}
.djdmm .mm-card.play .mm-pad{animation:mmKey 1.6s ease-out infinite;animation-delay:calc(var(--i)*.1s)}
.djdmm .mm-card.play .mm-slide{animation:mmSlide 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.23s)}
@keyframes mmSlide{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.djdmm .mm-card.play .mm-clip{animation:mmClip 1.2s steps(2,jump-none) infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes mmClip{0%{opacity:1}100%{opacity:.35}}
.djdmm .mm-card.play .mm-step{animation:mmStep 1.6s linear infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes mmStep{0%,5%{fill:#fff}12%,100%{fill:var(--c)}}
.djdmm .mm-bar{transform-origin:left center}
.djdmm .mm-card.play .mm-bar{animation:mmBar 1.6s linear infinite}
@keyframes mmBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.djdmm .mm-card.play .mm-wave,.djdmm .mm-card.play .mm-lcd{stroke-dasharray:6 3;animation:mmDash 1s linear infinite}
@keyframes mmDash{to{stroke-dashoffset:-18}}
.djdmm .mm-card.play .mm-pitch{animation:mmSlide 3s ease-in-out infinite alternate}
.djdmm .mm-card.play .mm-arm{animation:mmArm 3.6s ease-in-out infinite alternate}
@keyframes mmArm{from{transform:rotate(0)}to{transform:rotate(2deg)}}
/* responsive */
@media (max-width:860px){
 .djdmm .mm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .djdmm .mm-knobs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .djdmm .mm-srclist{columns:1}
}
@media (max-width:640px){
 .djdmm{font-size:15.5px}
 .djdmm .mm-seq{padding:16px 12px 14px;border-radius:14px}
 .djdmm .mm-seq-top{flex-direction:column}
 .djdmm .mm-playbtn{align-self:stretch;justify-content:center}
 .djdmm .mm-trk{grid-template-columns:1fr;gap:3px}
 .djdmm .mm-steps{gap:2px}
 .djdmm .mm-st{height:30px;border-radius:4px;font-size:9px}
 .djdmm .mm-st:nth-child(4n+1):not(:first-child){margin-left:3px}
 .djdmm .mm-sep{display:none}
 .djdmm .mm-clear{margin-left:0}
 .djdmm .mm-cards{grid-template-columns:1fr}
 .djdmm .mm-tl{height:auto;margin:0}
 .djdmm .mm-tl-line,.djdmm .mm-tick{display:none}
 .djdmm .mm-tl-list{display:flex;flex-wrap:wrap;gap:8px}
 .djdmm .mm-tl-list li{position:static;height:auto;width:auto}
 .djdmm .mm-tl-list li::before{display:none}
 .djdmm .mm-tl-a,.djdmm .mm-tl-list li:nth-child(odd) .mm-tl-a,.djdmm .mm-tl-list li:nth-child(even) .mm-tl-a{position:static;transform:none;flex-direction:row;gap:6px;border:1px solid var(--line);border-left:3px solid var(--c);padding:5px 10px}
 .djdmm .mm-galhead .mm-count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
 .djdmm *,.djdmm *::before,.djdmm *::after{animation:none !important;transition:none !important}
 .djdmm.js-on .mm-r:not(.in){opacity:1}
 .djdmm.js-on .mm-tlwrap:not(.in) .mm-tl-line{transform:none}
}