.drrroom{width:min(1000px,94vw);max-width:94vw;max-height:94dvh;padding:0;border:1px solid var(--rr-accent);border-radius:22px;background:var(--rr-bg);color:var(--rr-text);overflow:auto;box-shadow:0 0 85px #000c;font-family:Arial,sans-serif}
.drrroom::backdrop{background:#06020de6;backdrop-filter:blur(9px)}
.drrroom .drrroom-panel{position:relative;padding:36px 40px 28px;overflow:hidden;background:radial-gradient(ellipse at 70% 30%,color-mix(in srgb,var(--rr-accent) 19%,transparent),transparent 65%)}
.drrroom .drrroom-close{position:absolute;right:16px;top:14px;width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;color:var(--rr-text);background:#0006;font:28px/1 Arial;cursor:pointer;z-index:10}
.drrroom .drrroom-close:focus-visible,.drrroom .drrroom-listen:focus-visible{outline:3px solid var(--rr-text);outline-offset:4px}
.drrroom .drrroom-eyebrow{font:700 10px/1.5 Arial;letter-spacing:.23em;color:var(--rr-accent);margin:0 45px 12px 0}
.drrroom .drrroom-title{font:900 clamp(30px,5vw,60px)/1.05 Arial;margin:0 45px 12px 0;overflow-wrap:anywhere;color:var(--rr-text)}
.drrroom .drrroom-stage{height:365px;position:relative;isolation:isolate;margin-top:15px}
.drrroom .drrroom-album{position:absolute;left:8%;top:5%;width:29%;aspect-ratio:1;z-index:3}
.drrroom .drrroom-sleeve{position:absolute;inset:0;box-shadow:0 15px 40px #000b;border:1px solid #ffffff44;z-index:3;background:#171021}
.drrroom .drrroom-sleeve>img,.drrroom .drrroom-label>img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;transform:none}
.drrroom .drrroom-sleeve>.type-cover{width:100%;height:100%;font-size:20px}
.drrroom .drrroom-vinyl{position:absolute;inset:3%;left:65%;width:94%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(transparent 0 3px,#ffffff19 4px,transparent 5px 7px),conic-gradient(#0a0a10,#66616d 8%,#131218 18%,#040409 48%,#77707d 57%,#14131b 66%,#0a0a10);box-shadow:0 0 25px color-mix(in srgb,var(--rr-accent) 60%,transparent);border:2px solid #4b4154;display:grid;place-items:center;animation:rr-rotate var(--rr-spin) linear infinite,rr-disc-out var(--rr-open) ease-out}
.drrroom .drrroom-label{width:32%;height:32%;border-radius:50%;overflow:hidden;position:relative;background:var(--rr-accent)}
.drrroom .drrroom-label:after{content:'';position:absolute;inset:44%;background:#09080e;border:1px solid #ddd;border-radius:50%}
.drrroom .drrroom-label .type-cover{height:100%;font-size:5px;padding:3px}.drrroom .drrroom-label .type-cover strong{font:8px Arial}
.drrroom .drrroom-fallback{display:grid;place-items:center;width:100%;height:100%;font-weight:900;background:var(--rr-accent)}
.drrroom .drrroom-deck{position:absolute;left:3%;top:65%;width:54%;height:28%;background:linear-gradient(155deg,#39303f,#131015 65%);border:2px solid #695677;border-bottom:12px solid #08070c;transform:skewX(-13deg);border-radius:12px;box-shadow:0 14px 30px #0009;z-index:1}
.drrroom .drrroom-deck-ring{position:absolute;width:60%;height:80%;left:14%;top:0;border:3px solid var(--rr-accent);border-radius:50%;box-shadow:inset 0 0 18px var(--rr-accent),0 0 12px var(--rr-accent)}
.drrroom .drrroom-arm{position:absolute;right:10%;top:-45%;width:8px;height:105%;background:linear-gradient(90deg,#eee,#807083,#24202a);transform:rotate(35deg);transform-origin:50% 85%;border-radius:6px;box-shadow:3px 4px 4px #0009}
.drrroom .drrroom-arm:after{content:'';position:absolute;top:0;left:-4px;width:17px;height:30px;background:#282033;border:1px solid var(--rr-accent)}
.drrroom .drrroom-brand{position:absolute;bottom:6px;right:6%;color:#cbbbd7;font:900 9px Arial;letter-spacing:.1em}
.drrroom .drrroom-power{position:absolute;bottom:10px;left:5%;width:9px;height:9px;border-radius:50%;background:var(--rr-accent);box-shadow:0 0 9px var(--rr-accent)}
.drrroom .drrroom-mascot{position:absolute;right:-2%;bottom:0;width:43%;aspect-ratio:1;z-index:4;pointer-events:none;animation:rr-arrive var(--rr-open) ease-out both}
.drrroom .drrroom-mascot[hidden]{display:none}
.drrroom .drrroom-sprite{width:100%;height:100%;background-repeat:no-repeat;background-size:600% 100%;animation:rr-goat var(--rr-cycle) steps(6,end) infinite}
.drrroom .drrroom-custom{display:block;width:100%;height:100%;object-fit:contain}
.drrroom .drrroom-smoke{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--rr-density);overflow:hidden}
.drrroom .drrroom-smoke i{position:absolute;left:calc(15% + var(--i)*7%);bottom:0;width:23%;height:50%;border-radius:50%;background:radial-gradient(ellipse,var(--rr-smoke),transparent 67%);filter:blur(9px);opacity:0;animation:rr-smoke 4s ease-out infinite;animation-delay:calc(var(--i)*-.43s)}
.drrroom .drrroom-actions{position:relative;z-index:5;display:flex;align-items:center;gap:24px;justify-content:space-between;margin-top:16px}
.drrroom .drrroom-listen{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff66;background:var(--rr-accent);color:#fff;text-shadow:0 1px 3px #000;font:800 14px/1.4 Arial;text-decoration:none;padding:17px 30px;border-radius:8px}
.drrroom .drrroom-listen:hover{filter:brightness(1.2)}
.drrroom .drrroom-hint{font:10px/1.5 Arial;letter-spacing:.12em;opacity:.6}
@keyframes rr-rotate{to{rotate:360deg}}@keyframes rr-disc-out{from{translate:-65% 0}to{translate:0 0}}
@keyframes rr-goat{to{background-position:120% 0}}
@keyframes rr-arrive{from{opacity:0;transform:translateX(65px) scale(.8)}to{opacity:1;transform:none}}
@keyframes rr-smoke{0%{opacity:0;transform:translate(0,20%) scale(.5)}25%{opacity:.7}100%{opacity:0;transform:translate(-30%,-120%) scale(1.7)}}
@media(max-width:650px){.drrroom .drrroom-panel{padding:28px 20px 22px}.drrroom .drrroom-stage{height:390px}.drrroom .drrroom-album{width:46%;left:3%;top:5%}.drrroom .drrroom-mascot{width:66%;right:-13%;bottom:0}.drrroom .drrroom-deck{width:74%;left:0;top:47%;height:18%}.drrroom .drrroom-actions{display:block}.drrroom .drrroom-listen{display:flex;width:100%;padding-inline:12px}.drrroom .drrroom-hint{text-align:center;margin:15px 0 0}}
@media(prefers-reduced-motion:reduce){.drrroom .drrroom-vinyl,.drrroom .drrroom-mascot,.drrroom .drrroom-sprite,.drrroom .drrroom-smoke i{animation:none!important}.drrroom .drrroom-smoke{display:none}}

/* Illustrated animation revision */
.drrroom .drrroom-panel{isolation:isolate}
.drrroom .drrroom-energy{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--rr-energy)}
.drrroom .drrroom-energy svg{width:100%;height:100%;filter:drop-shadow(0 0 5px var(--rr-bolt))}
.drrroom .drrroom-energy path{stroke:var(--rr-bolt);stroke-width:1.2;fill:none;stroke-dasharray:25 160 4 300;animation:rr-energy 8s linear infinite}
.drrroom .drrroom-smoke{z-index:-1;inset:0}
.drrroom .drrroom-smoke i{animation-duration:var(--rr-cloud-speed)}
.drrroom .drrroom-stage{height:410px}
.drrroom .drrroom-album{width:25%;top:0;left:6%}
.drrroom .drrroom-illustrated-deck{position:absolute;left:0;bottom:-7%;width:56%;aspect-ratio:1;z-index:1;pointer-events:none;filter:hue-rotate(var(--rr-deck-hue))}
.drrroom .drrroom-frames{display:block;width:100%;height:100%;object-fit:contain}
.drrroom .drrroom-mascot{width:45%;bottom:0;right:-2%}
@keyframes rr-energy{to{stroke-dashoffset:-978}}
@media(max-width:650px){.drrroom .drrroom-stage{height:450px}.drrroom .drrroom-album{width:43%;left:0;top:0}.drrroom .drrroom-illustrated-deck{width:80%;left:-8%;bottom:5%}.drrroom .drrroom-mascot{width:62%;right:-12%;bottom:0}}
@media(prefers-reduced-motion:reduce){.drrroom .drrroom-energy path{animation:none!important}}

/* 1.2 holographic projection, native-resolution mascot */
.drrroom .drrroom-description{position:relative;z-index:1;font:500 15px/1.5 Arial;letter-spacing:.12em;color:var(--rr-text);opacity:.8;margin:10px 0 16px}
.drrroom .drrroom-vinyl{border:2px solid var(--rr-holo);background:repeating-radial-gradient(transparent 0 5px,color-mix(in srgb,var(--rr-holo) 48%,transparent) 6px,transparent 7px 11px),conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--rr-holo) 45%,transparent) 12%,transparent 22%,transparent 49%,color-mix(in srgb,var(--rr-holo) 55%,transparent) 62%,transparent 74%);box-shadow:0 0 28px color-mix(in srgb,var(--rr-holo) 65%,transparent),inset 0 0 28px color-mix(in srgb,var(--rr-holo) 40%,transparent);opacity:calc(.35 + var(--rr-holo-brightness)*.65)}
.drrroom .drrroom-vinyl:after{content:'';position:absolute;inset:9%;border-radius:50%;border:1px dashed var(--rr-holo);box-shadow:0 0 0 14px #ffffff08}
.drrroom .drrroom-label{box-shadow:0 0 20px var(--rr-holo)}
.drrroom .drrroom-album{top:12%;left:5%;width:29%}
.drrroom .drrroom-projector{position:absolute;width:59%;height:78%;left:1%;bottom:3%;z-index:1;pointer-events:none;opacity:calc(.2 + var(--rr-holo-brightness)*.8)}
.drrroom .drrroom-platform{position:absolute;bottom:0;left:5%;width:90%;height:20%;border:2px solid var(--rr-holo);border-radius:50%;box-shadow:0 0 22px var(--rr-holo),inset 0 0 28px var(--rr-holo);background:radial-gradient(ellipse,color-mix(in srgb,var(--rr-holo) 30%,transparent),transparent 60%)}
.drrroom .drrroom-platform:after{content:'';position:absolute;inset:12%;border:1px dashed var(--rr-holo);border-radius:50%;animation:rr-holo-breathe 3s ease-in-out infinite alternate}
.drrroom .drrroom-beam{position:absolute;inset:0 5% 7%;background:linear-gradient(0deg,color-mix(in srgb,var(--rr-holo) 32%,transparent),transparent 85%);clip-path:polygon(8% 0,92% 0,75% 100%,25% 100%);mask-image:repeating-linear-gradient(0deg,#000 0 1px,#0007 2px 5px);animation:rr-holo-breathe 3s ease-in-out infinite alternate}
.drrroom .drrroom-holo-label{position:absolute;bottom:-22px;left:0;right:0;text-align:center;color:var(--rr-holo);font:8px Arial;letter-spacing:.28em}
.drrroom .drrroom-frames{image-rendering:auto;filter:none}
@keyframes rr-holo-breathe{to{opacity:.6;translate:0 -3px}}
@media(max-width:650px){.drrroom .drrroom-album{top:2%;width:45%;left:0}.drrroom .drrroom-projector{width:85%;height:55%;bottom:26%;left:-5%}.drrroom .drrroom-mascot{width:66%;bottom:0;right:-8%}.drrroom .drrroom-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){.drrroom .drrroom-platform:after,.drrroom .drrroom-beam{animation:none}}

/* 1.3: borderless room over the blurred live page */
.drrroom{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;isolation:isolate;overflow:auto}
.drrroom::backdrop{background:color-mix(in srgb,var(--rr-bg) 62%,transparent);backdrop-filter:blur(var(--rr-blur,12px));-webkit-backdrop-filter:blur(var(--rr-blur,12px))}
.drrroom .drrroom-panel{width:min(1000px,100%);box-sizing:border-box;min-height:640px;margin:max(20px,calc((100dvh - 680px)/2)) auto;overflow:visible;background:none;isolation:auto;z-index:1}
.drrroom .drrroom-vinyl{border:2px solid #29292d;opacity:1;background:repeating-radial-gradient(transparent 0 3px,#ffffff10 4px,transparent 5px 7px),conic-gradient(#050506,#333338 8%,#101012 18%,#030304 48%,#39393f 57%,#101012 66%,#050506);box-shadow:0 12px 38px #000b}
.drrroom .drrroom-vinyl:after{display:none}.drrroom .drrroom-label{box-shadow:none}
.drrroom .drrroom-smoke,.drrroom .drrroom-energy{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.drrroom .drrroom-smoke i{width:65vw;height:65vh;left:calc(-35% + var(--i)*15%);bottom:-25%;filter:blur(26px);background:radial-gradient(ellipse,color-mix(in srgb,var(--rr-smoke) 36%,#74747d),#18151d55 45%,transparent 70%);animation-name:rr-storm-cloud;animation-timing-function:linear}
.drrroom .drrroom-smoke i:nth-child(3n){background:radial-gradient(ellipse,#08060ee6,transparent 68%)}
.drrroom .drrroom-energy path{stroke-width:1.4;stroke-dasharray:none;animation:rr-storm-bolt 7s linear infinite;opacity:0}
.drrroom .drrroom-storm-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 25%,color-mix(in srgb,var(--rr-bolt) 28%,#bbc0d2),transparent 65%);opacity:0;animation:rr-storm-flash 9s linear infinite}
.drrroom .drrroom-eyebrow,.drrroom .drrroom-title{position:relative;z-index:1}
@keyframes rr-storm-cloud{0%{opacity:0;transform:translate(-10%,20%) scale(.9)}20%{opacity:.65}75%{opacity:.5}100%{opacity:0;transform:translate(25%,-65%) scale(1.65)}}
@keyframes rr-storm-bolt{0%,65%,69%,100%{opacity:0}66%{opacity:.55}68%{opacity:.12}}
@keyframes rr-storm-flash{0%,61%,65%,100%{opacity:0}62%{opacity:.16}64%{opacity:.05}}
@media(max-width:650px){.drrroom .drrroom-panel{margin:0 auto;min-height:100dvh;padding:65px 24px 30px}.drrroom .drrroom-close{top:14px}.drrroom .drrroom-smoke i{width:100vw}}
@media(prefers-reduced-motion:reduce){.drrroom .drrroom-storm-flash{animation:none}.drrroom .drrroom-energy{display:none}}
.drrroom{overflow-x:hidden}.drrroom .drrroom-panel{overflow:hidden}

/* 1.4: independent cover notes and electrical arcs */
.drrroom .drrroom-cover-fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.drrroom .drrroom-note{position:absolute;bottom:12%;font:700 clamp(20px,3vw,34px)/1 Georgia,serif;color:var(--rr-note-color);text-shadow:0 0 12px currentColor;opacity:0;animation:rr-cover-notes var(--rr-note-time) linear infinite;will-change:transform,opacity}
.drrroom .drrroom-cover-lightning{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;filter:drop-shadow(0 0 4px var(--rr-cover-bolt));opacity:var(--rr-cover-energy)}
.drrroom .drrroom-cover-lightning path{fill:none;stroke:var(--rr-cover-bolt);stroke-width:.65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 4 12 6;animation:rr-cover-arc 3.5s linear infinite}
@keyframes rr-cover-notes{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.7)}15%,70%{opacity:var(--rr-note-alpha)}100%{opacity:0;transform:translate(var(--drift),-190px) rotate(15deg) scale(1.1)}}
@keyframes rr-cover-arc{0%,100%{opacity:.25;stroke-dashoffset:0}45%{opacity:.85}75%{opacity:.4}99%{stroke-dashoffset:-60}}
@media(prefers-reduced-motion:reduce){.drrroom .drrroom-cover-fx{display:none}}