/* Full-size circular wheel, inspired by the existing published Soundly wheel. */
.classic-wheel-demo{position:relative;margin:42px auto 0;padding:20px 18px 24px;max-width:1100px;min-width:0;border:1px solid #4e2330;border-radius:24px;background:radial-gradient(ellipse at 50% 38%,#3d0a19 0%,#190810 47%,#0d080d 78%);box-shadow:0 30px 110px #0008;overflow:hidden;scroll-margin-top:90px}
.classic-wheel-demo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 43%,transparent 16%,#0402078a 84%);pointer-events:none}
#classic-wheel-app,.classic-search{position:relative;z-index:1}
.classic-wheel-heading{display:flex;justify-content:center;align-items:center;gap:18px;min-height:40px;color:#ff7594;font:700 10px Space,system-ui,sans-serif;letter-spacing:.18em}
.classic-wheel-heading button,.classic-side-controls button{display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid #ffffff26;border-radius:50%;background:#120910;color:#b59daa;transition:background-color .2s,border-color .2s,transform .2s}
.classic-wheel-heading button:hover,.classic-side-controls button:hover{background:#4a1728;border-color:#ff5378;color:white;transform:scale(1.08)}
.classic-wheel-heading svg,.classic-side-controls svg{width:15px;height:15px}
.classic-wheel-body{position:relative;display:grid;grid-template-columns:38px minmax(0,500px) 38px;justify-content:center;align-items:center;gap:8px;margin-top:9px}
.classic-side-controls{display:flex;flex-direction:column;gap:10px;align-items:center;z-index:2}
.classic-side-controls button[aria-pressed=true]{color:#ff4b70;border-color:#ff4b70;background:#4d1325}
.classic-wheel-scene{position:relative;width:min(500px,100%);aspect-ratio:1;margin:auto;outline:none;direction:ltr}
.classic-wheel-scene:focus-visible{outline:2px solid #ff6b87;outline-offset:6px;border-radius:50%}
.classic-wheel-base{position:absolute;inset:1.25%;border-radius:50%;border:1px solid #98546b77;background:radial-gradient(circle at center,#100b11 0 23%,#2b0b18 24%,#120711 43%,#260a16 67%,#13070e 84%,#270a17 100%);box-shadow:inset 0 0 55px #000c,0 0 24px #ff225526}
.classic-wheel-dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.classic-wheel-dial circle{fill:none;stroke:#b8658055;stroke-width:1}.classic-wheel-dial circle:nth-child(2){stroke:#bd678333}.classic-wheel-dial line{stroke:#ac5a7640;stroke-width:1}
.classic-slot{position:absolute;left:var(--slot-x);top:var(--slot-y);transform:translate(-50%,-50%);z-index:2;width:20%;min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#e9c3ce;text-align:center;opacity:var(--slot-opacity);transition:opacity .2s,filter .2s}
.classic-slot:hover,.classic-slot:focus-visible{opacity:1;filter:brightness(1.24)}
.classic-slot:focus-visible{outline:2px solid #ff6f8b;outline-offset:2px;border-radius:9px}
.classic-album{display:grid;place-items:center;width:52%;aspect-ratio:1;border:2px solid #8b7f8999;border-radius:50%;background:radial-gradient(circle at 35% 25%,#3c353d 0%,#242128 43%,#111015 100%);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -8px 13px #0007,0 4px 14px #0009;color:#e9dce2}
.classic-album svg{width:46%;height:46%;filter:drop-shadow(0 1px 3px #0009)}
.classic-slot.is-active{z-index:4;filter:brightness(1.22)}
.classic-slot.is-active .classic-album{border-color:#ff5575;background:radial-gradient(circle at 35% 25%,#5b2d3a 0%,#301c27 46%,#151015 100%);color:#fff5f7;box-shadow:0 0 0 4px #ff27502b,0 0 17px #ff174da8,inset 0 1px 0 #ffffff50,inset 0 -8px 13px #0007}
.classic-slot.is-off .classic-album{background:#1b0710;color:#f44a70}
.classic-slot-title{max-width:100%;padding:2px 5px;border-radius:9px;background:#150911d9;font:10px/1.15 Space,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classic-slot.is-active .classic-slot-title{color:#ff8aa4;border:1px solid #d92e5688}
.classic-slot-artist{max-width:96%;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a57e89}
.classic-wheel-hub{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:33%;height:33%;border:2px solid #78606b;border-radius:50%;background:radial-gradient(circle at 35% 25%,#30242c,#161318 63%,#0d0b0e);box-shadow:0 9px 32px #000c,inset 0 0 30px #0008;display:grid;grid-template-columns:1fr 44% 1fr;grid-template-rows:17% 49% 15% 15%;align-items:center;justify-items:center;padding:7% 5% 3%;text-align:center;color:#fff}
.classic-wheel-index{grid-column:1/-1;grid-row:1;padding:2px 8px;border:1px solid #e926534f;border-radius:15px;background:#0d0b0e;font:8px Space;color:#ff4669}
.classic-wheel-hub button{border:0;background:none;color:#a997a0;display:grid;place-items:center}
.classic-wheel-hub button svg{width:15px;height:15px}
.classic-hub-prev{grid-column:1;grid-row:2}.classic-hub-next{grid-column:3;grid-row:2}
.classic-wheel-hub .classic-hub-play{grid-column:2;grid-row:2;width:100%;aspect-ratio:1;border:1px solid #786774;border-radius:50%;background:radial-gradient(circle at 34% 26%,#49323c,#1c171d 72%);color:white;box-shadow:0 5px 15px #000b,inset 0 1px #ffffff20}
.classic-wheel-hub .classic-hub-play:hover{transform:scale(1.06);border-color:#ff6c8e}
.classic-hub-play svg{width:25px!important;height:25px!important;fill:currentColor;stroke:none}
.classic-wheel-hub strong{grid-column:1/-1;grid-row:3;max-width:100%;font-size:10px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classic-wheel-hub small{grid-column:1/-1;grid-row:4;max-width:100%;font-size:7px;color:#b69daa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classic-wheel-footer{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:5px;font-size:10px;color:#ad8794}
.classic-wheel-hotkey{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid #b41b475e;border-radius:12px;background:#10080e}
.classic-wheel-hotkey kbd{padding:3px 7px;border:1px solid #ffffff4c;border-radius:4px;color:white;font:700 9px Space}
.classic-wheel-status{min-width:160px;text-align:center;color:#ed9cac}
.classic-wheel-disclaimer{font-size:9px;text-align:center;margin:10px 0 0;color:#8d7881}
.classic-search{max-width:780px;margin:23px auto 3px;padding:18px;border:1px solid #7845577d;border-radius:15px;background:#120d12db}
.classic-search label{display:block;margin-bottom:10px;color:#cdb7c0;font-size:11px}
.classic-search-row{display:flex;align-items:center;gap:9px;border:1px solid #705766;border-radius:9px;padding:0 12px;background:#1b151b}
.classic-search-row svg{width:16px;height:16px;color:#9c7d8c;flex:none}
.classic-search-row input{width:100%;min-height:44px;border:0;outline:0;color:#f6e6ec;background:none;font-size:13px}
.classic-search-row:focus-within{border-color:#ee3f6c;box-shadow:0 0 0 2px #ee3f6c39}
.classic-search-results:not(:empty){display:grid;gap:4px;margin-top:9px;max-height:260px;overflow:auto}
.classic-search-result{width:100%;display:flex;align-items:center;gap:10px;text-align:start;padding:7px;border:1px solid transparent;border-radius:8px;background:#241821;color:#f1e3e8}
.classic-search-result:hover,.classic-search-result:focus-visible{border-color:#eb476f;background:#3a1c2a}
.classic-result-art{width:35px;height:35px;display:grid;place-items:center;border:1px solid #80727d88;border-radius:6px;background:radial-gradient(circle at 35% 28%,#3c353d,#151218 78%);color:#e9dce2;flex:none}
.classic-result-art svg{width:16px;height:16px}
.classic-search-result>span:nth-child(2){flex:1;min-width:0}.classic-search-result strong,.classic-search-result small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.classic-search-result strong{font-size:11px}.classic-search-result small{font-size:9px;color:#ae9aa5}.classic-search-result>.icon{width:14px;height:14px;color:#fa6687}
.classic-search-note,.classic-search-empty{font-size:9px;color:#9f8390;line-height:1.6;margin:10px 0 0}

/* One glass reflection for both pricing cards; no reveal/pointer-media gate. */
.pricing .plan{overflow:hidden}
.pricing .plan::after{content:"";position:absolute;z-index:1;top:-100%;bottom:auto;left:-100%;width:300%;height:300%;background:linear-gradient(45deg,transparent 47%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.42) 49%,#fff 50%,rgba(255,255,255,.42) 51%,rgba(255,255,255,.08) 52%,transparent 53%);box-shadow:none;filter:brightness(1.12) blur(1.2px);mix-blend-mode:screen;opacity:0;pointer-events:none;transform:translate3d(-20%,20%,0);will-change:transform}
.pricing .plan>*{position:relative;z-index:2}
/* 1.1s accelerating out, 1s hidden, 1.1s accelerating back, 1s hidden. */
@keyframes pricingGlassSweep{
 0%{transform:translate3d(-20%,20%,0);animation-timing-function:cubic-bezier(.8,0,1,1)}
 26.1905%{transform:translate3d(20%,-20%,0)}
 50%{transform:translate3d(20%,-20%,0);animation-timing-function:cubic-bezier(.8,0,1,1)}
 76.1905%{transform:translate3d(-20%,20%,0)}
 100%{transform:translate3d(-20%,20%,0)}
}
.pricing .plan:hover{border-color:#ff7594;box-shadow:0 0 0 2px rgba(255,117,148,.28),0 22px 58px rgba(0,0,0,.38)}
.pricing .plan:hover::after{opacity:1;animation:pricingGlassSweep 4.2s linear infinite}
@media(hover:hover) and (pointer:fine){.pricing .plan.reveal.visible:hover{transform:translate3d(0,-11px,0) scale(1.02);border-color:#ef3c67a0;box-shadow:0 26px 75px #000b,0 0 27px #ef36512a}}
/* The pricing reflection is deliberately previewed even when the OS requests reduced motion. */
@media(prefers-reduced-motion:reduce){
 .pricing .plan{transition-duration:260ms!important}
 .pricing .plan.reveal.visible:hover{transform:translate3d(0,-11px,0) scale(1.02)!important}
 .pricing .plan:hover::after{opacity:1!important;animation:pricingGlassSweep 4.2s linear infinite!important}
}

/* All published plugin options, recast in the redesign system. */
.plugins-page .subpage-heading{max-width:900px}
.plugin-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.plugin-catalog-card{display:flex;flex-direction:column;min-width:0;padding:21px;border:1px solid var(--line2);border-radius:17px;background:linear-gradient(145deg,#1d171d,#111014 65%);transition:transform 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease)}
.plugin-catalog-card:hover{transform:translateY(-4px);border-color:#ef456b80;box-shadow:0 15px 35px #0007}
.plugin-catalog-art{height:100px;display:grid;place-items:center;border:1px solid #ffffff22;border-radius:11px;margin-bottom:17px;background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--plugin-color),transparent 55%),transparent 72%),#1b161b}
.plugin-catalog-art svg{width:34px;height:34px;color:var(--plugin-color);filter:drop-shadow(0 0 9px var(--plugin-color))}
.plugin-catalog-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plugin-catalog-title h2{font-size:16px;letter-spacing:-.03em}
.plugin-catalog-badge{flex:none;padding:4px 7px;border-radius:99px;font:700 8px Space,system-ui,sans-serif;letter-spacing:.06em}
.plugin-catalog-badge.free{background:#eb1746;color:white}.plugin-catalog-badge.pro{background:#f2c579;color:#3b2600}.plugin-catalog-badge.soon{background:#b8a7ff;color:#241a3d}
.plugin-catalog-card p{font-size:11px;line-height:1.75;margin:11px 0 18px;flex:1}
.plugin-catalog-card .btn{width:100%;min-height:39px;font-size:10px}
.plugin-catalog-note{display:none;margin-top:12px;padding:9px;border:1px solid #ef365144;border-radius:8px;background:#eb174611;color:#eeb1c0;font-size:10px;line-height:1.6}
.plugin-catalog-note.show{display:block}.plugin-catalog-note a,.plugin-request-status a{color:#ff7b9c;text-decoration:underline}
.plugin-request{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;margin-top:70px;padding-top:65px;border-top:1px solid var(--line)}
.plugin-request h2{font-size:clamp(28px,3vw,38px);margin:15px 0 10px}.plugin-request p{max-width:420px;font-size:12px;line-height:1.85}
.plugin-request-form .btn{width:100%;margin-top:3px}.plugin-request-status{min-height:20px;color:#ed9cac;margin-top:10px!important}

@media(max-width:800px){.plugin-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.plugin-request{grid-template-columns:1fr;gap:27px}.classic-wheel-body{grid-template-columns:30px minmax(0,500px) 30px;gap:3px}.classic-side-controls button{width:26px;height:26px}}
@media(max-width:600px){.classic-wheel-demo{margin-top:30px;padding:13px 6px 20px;border-radius:18px}.classic-wheel-body{display:block;margin-top:4px}.classic-wheel-scene{width:min(500px,calc(100vw - 48px))}.classic-side-controls{position:absolute;top:47%;gap:6px}.classic-side-controls.left{left:1px}.classic-side-controls.right{right:1px}.classic-side-controls button{width:25px;height:25px}.classic-slot-title{font-size:7px;max-width:90%}.classic-slot-artist{font-size:6px;max-width:80%}.classic-wheel-hub strong{font-size:8px}.classic-wheel-hub small{font-size:6px}.classic-wheel-footer{flex-direction:column;gap:8px;margin-top:10px}.classic-wheel-status{min-width:0}.classic-search{margin:20px 9px 0;padding:14px}.classic-search label{font-size:10px;line-height:1.5}.plugin-catalog{grid-template-columns:1fr}.plugin-request{margin-top:50px;padding-top:45px}}
@media(max-width:380px){.classic-side-controls button{width:23px;height:23px}.classic-side-controls svg{width:12px;height:12px}.classic-slot-title{font-size:6px}.classic-album{border-width:1px}.classic-wheel-index{font-size:6px;padding:1px 4px}.classic-wheel-hub{padding-top:6%}.classic-wheel-hub button svg{width:11px;height:11px}.classic-hub-play svg{width:16px!important;height:16px!important}}
@media(prefers-reduced-motion:reduce){.plugin-catalog-card:hover{transform:none}.classic-slot,.plugin-catalog-card{transition:none}}

/* Cinematic hero: copy and search beside the wheel, with no outer red card. */
.hero>.wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-areas:"heading wheel" "search wheel" "strip strip";column-gap:clamp(22px,3.5vw,54px);align-items:center}
.hero-heading{grid-area:heading;display:block;align-self:end;margin:0;min-width:0}
.hero h1{font-size:clamp(46px,5.1vw,72px);line-height:1.07}
.hero-intro{max-width:460px;margin-top:24px;padding:0}
.hero-intro p{max-width:390px}
.classic-wheel-demo{display:contents;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.classic-wheel-demo::before{content:none}
.classic-wheel-frame{grid-area:wheel;min-width:0;scroll-margin-top:95px}
.classic-search{grid-area:search;align-self:start;min-width:0;max-width:none;margin:22px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.classic-search-note{max-width:420px}
.use-strip{grid-area:strip;margin-top:26px}
.classic-album{overflow:hidden}
.classic-album img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.classic-result-art{overflow:hidden}
.classic-result-art img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1050px){.hero>.wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:15px}.hero h1{font-size:clamp(40px,5.3vw,59px)}.classic-wheel-body{grid-template-columns:28px minmax(0,500px) 28px;gap:3px}.classic-side-controls button{width:25px;height:25px}}
@media(max-width:760px){.hero>.wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "wheel" "search" "strip"}.hero-heading{align-self:auto;text-align:center}.hero-heading .eyebrow{justify-content:center}.hero h1{font-size:clamp(42px,8.5vw,62px);max-width:none}.hero-intro{margin:19px auto 0}.hero-intro p{max-width:none}.hero-intro .actions,.system-note{justify-content:center}.classic-wheel-frame{margin-top:24px}.classic-search{margin:14px auto 0;width:min(100%,520px)}.use-strip{margin-top:18px}}
@media(max-width:600px){.classic-wheel-scene{width:min(500px,calc(100vw - 48px))}.classic-search{padding:0;margin:14px auto 0}.classic-wheel-body{display:block}.classic-wheel-footer{flex-direction:column}}
@media(max-width:390px){.classic-wheel-scene{width:min(500px,calc(100vw - 42px))}}