@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&display=swap";html,body{height:100%;margin:0;font-family:Inter,sans-serif}body{overflow:hidden}.prompt-dj{width:100%;height:100%;position:relative}#background{z-index:-2;background:#000;width:100%;height:100%;position:absolute;top:0;left:0}.now-playing{z-index:5;padding:clamp(16px, 4vw, 26px) clamp(16px, 4.5vw, 32px) calc(clamp(16px, 4vw, 26px) + env(safe-area-inset-bottom,0px));background:linear-gradient(#0000,#04040a8c 28%,#04040aeb);align-items:center;gap:clamp(14px,3.5vw,22px);display:flex;position:fixed;bottom:0;left:0;right:0}.now-playing:before{content:"";z-index:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:78%;position:absolute;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#0000,#000 45%);mask-image:linear-gradient(#0000,#000 45%)}.now-playing>*{z-index:1;position:relative}.np-meta{flex:1;min-width:0}.np-title{letter-spacing:-.02em;color:#fff;white-space:nowrap;text-overflow:ellipsis;font-family:Bricolage Grotesque,system-ui,sans-serif;font-size:clamp(20px,5.5vw,34px);font-weight:800;line-height:1.15;overflow:hidden}.np-byline{color:#ffffff9e;white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-family:Inter,sans-serif;font-size:clamp(12px,3.2vw,16px);font-weight:500;overflow:hidden}.np-actions{align-items:center;gap:clamp(6px,1.6vw,12px);display:flex}.np-btn{color:#ffffffd9;cursor:pointer;background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;width:clamp(40px,11vw,52px);height:clamp(40px,11vw,52px);padding:0;transition:background .15s,color .15s,transform .15s;display:flex}.np-btn:hover{color:#fff;background:#ffffff29;transform:scale(1.05)}.np-btn svg{width:46%;height:46%}.loading-text{color:#ffffffb3;justify-content:center;align-items:center;font-family:Inter,sans-serif;font-size:16px;display:flex;position:absolute;inset:0}.play-pause-button{color:#0b0b10;cursor:pointer;background:#fff;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:clamp(56px,15vw,76px);height:clamp(56px,15vw,76px);padding:0;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 6px 20px #00000073}.play-pause-button:hover{transform:scale(1.05);box-shadow:0 8px 26px #00000080}.play-pause-button svg{width:100%;height:100%;transform:scale(1.5)}.play-pause-button .loader{stroke:currentColor;stroke-width:3px;stroke-linecap:round;transform-origin:50%;transform-box:fill-box;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.toast{color:#fff;z-index:11;background-color:#000;border-radius:5px;justify-content:space-between;align-items:center;gap:15px;min-width:200px;max-width:80vw;padding:15px;line-height:1.6;transition:transform .5s cubic-bezier(.19,1,.22,1);display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast button{aspect-ratio:1;color:#000;cursor:pointer;border:none;border-radius:100px}.toast:not(.showing){transition-duration:1s;transform:translate(-50%,-200%)}.style-menu{z-index:10;position:relative}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;opacity:0;visibility:hidden;background:#0009;justify-content:center;align-items:stretch;transition:opacity .25s,visibility .25s;display:flex;position:fixed;inset:0}.overlay.visible{opacity:1;visibility:visible}@media (width>=1024px){.overlay{align-items:center;padding:32px}}.menu-content{-webkit-overflow-scrolling:touch;width:100%;min-height:100%;padding:clamp(28px, 7vw, 44px) clamp(24px, 6vw, 44px) calc(clamp(28px, 7vw, 44px) + env(safe-area-inset-bottom,0px));text-align:left;background:#0a0a0f;flex-direction:column;transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;position:relative;overflow-y:auto;transform:translateY(14px)}.overlay.visible .menu-content{transform:none}@media (width>=1024px){.menu-content{border:1px solid #ffffff1a;border-radius:28px;width:min(620px,100%);max-height:86vh}}.menu-close{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:clamp(46px,11vw,54px);height:clamp(46px,11vw,54px);font-size:clamp(24px,6vw,28px);line-height:1;transition:background .15s;display:flex;position:absolute;top:clamp(22px,5vw,36px);right:clamp(20px,5vw,36px)}.menu-close:hover{background:#fff3}.menu-title{letter-spacing:-.025em;color:#fff;margin:4px 0 clamp(20px,5vw,30px);font-family:Bricolage Grotesque,system-ui,sans-serif;font-size:clamp(30px,8vw,46px);font-weight:800;line-height:1.05}.style-grid{border-top:1px solid #ffffff1a;flex-direction:column;flex:1;justify-content:safe center;display:flex}.style-button{color:#fff;cursor:pointer;border-bottom:1px solid #ffffff1a;flex-direction:column;gap:8px;padding:clamp(20px,4vw,30px) 0;text-decoration:none;display:flex}.style-name{letter-spacing:-.015em;font-family:Bricolage Grotesque,system-ui,sans-serif;font-size:clamp(21px,5.6vw,32px);font-weight:700;line-height:1.15;transition:color .15s}.style-button:hover .style-name{color:#b9adff}.style-desc{color:#ffffffb8;font-size:clamp(14px,3.8vw,19px);line-height:1.45}.style-button.current .style-name{color:#b9adff;align-items:center;gap:12px;display:flex}.style-button.current .style-name:before{content:"";background:#8a7bff;border-radius:50%;flex:none;width:.45em;height:.45em}.style-button.current .style-desc{color:#ffffffd9}