*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#000;display:flex;align-items:center;justify-content:center;min-height:100vh}.app-wrap{display:flex;flex-direction:column;gap:10px}.frame{display:flex;flex-direction:column;gap:10px;width:457px}.top-outer{background:linear-gradient(to bottom,#e4e7e9,#a1a6ad);border-radius:12px;padding-top:1px}.top-inner{background:#ccd0d3;border:1px solid #e4e7e9;border-radius:9px;display:flex;align-items:flex-start;gap:10px;padding:36px 37px 36px 48px;position:relative;overflow:hidden;width:457px}.top-inner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 -35px 24px #f6f8fa80,inset 14px 0 24px #b7bdc2,inset -14px 0 24px #b7bdc2,inset 0 14px 24px #b7bdc2,inset 0 -14px 32px #b3b9be;pointer-events:none}.bottom-panel{background:#ccd0d3;border:1px solid #e4e7e9;border-radius:9px;display:flex;align-items:flex-start;padding:28px 37px 28px 48px;position:relative;overflow:hidden;width:457px}.bottom-panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 14px 0 24px #b7bdc2,inset -14px 0 24px #b7bdc2,inset 0 14px 24px #b7bdc2,inset 0 -6px 24px #f6f8fa80,inset 0 -14px 32px #b3b9be;pointer-events:none}.knobs-row{flex:1;min-width:0;display:flex;align-items:center;gap:38px;filter:drop-shadow(0px -1px .65px #c2c9cb)}.slider-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.slider-h{height:67px;width:100%;position:relative}.slider-track{position:absolute;top:50%;left:0;transform:translateY(-50%);width:153px;border-radius:2000px;padding:2.5px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.slider-track:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(179.23deg,#7d858f 34.25%,#9fa6b1 39.567%,#6d757d 50.826%,#a3a9af 58.645%,#d8dbdf 68.653%)}.slider-track:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 -.8px 1.6px #ffffff40}.slider-groove{position:relative;border-radius:200px;width:100%;padding:6px;display:flex;align-items:flex-start;justify-content:flex-end;overflow:visible}.slider-groove:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#434950,#6a747c)}.slider-groove:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset -19px 5px 26.7px #00000026,inset 0 2px 8.4px #000}.slider-thumb{position:relative;border-radius:200px;width:78px;height:44px;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px;overflow:hidden;flex-shrink:0;box-shadow:-3px 2px 18.8px #00000080,0 2px 2.5px #000000bf,0 4px 6.5px #00000080;cursor:grab}.slider-thumb:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#cbcfd2,#c9d0d2)}.slider-thumb:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 2px 1px #f7faff,inset 0 -2px 1px #898e95}.slider-thumb:active{cursor:grabbing}.grip-bar{position:relative;width:8px;height:28px;border-radius:100px;flex-shrink:0;box-shadow:0 1px 2.5px #00000026}.grip-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:#ced2d6}.grip-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 2px 5.6px #e3e7eb,inset 0 -2px 1.8px #5d6369}.knob-outer{flex-shrink:0;border-radius:100px;padding:.8px;background:linear-gradient(to bottom,#d0d4d7,#c9cfd4)}.knob-ring{border-radius:2000px;padding:3px;position:relative}.knob-ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:#181e23}.knob-ring:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset .2px -.2px .4px #b9bfc6,inset -.2px -.2px .4px #b9bfc6,inset -.3px .3px .2px #d0d4d7,inset .3px .3px .2px #d0d4d7}.knob-face{position:relative;border-radius:200px;padding:16px;display:flex;align-items:flex-start;justify-content:flex-end;overflow:hidden}.knob-face:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#e8eaec,#9aa0a3)}.knob-face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 -1px 1px #b7bcc6,inset 0 1px 1px #f7faff,inset -19px 5px 26.7px #e3e4e8,inset 0 2px 8.4px #a4acb2}.knob-cap{position:relative;border-radius:200px;width:62px;height:61px;display:flex;align-items:center;justify-content:center;padding:2px;overflow:hidden;flex-shrink:0;box-shadow:0 -6px 6.5px #fafafa,0 8px 6.9px #606974,0 4px 7.8px #606974}.knob-cap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(var(--cap-grad-angle, 180deg),#cbcfd2,#b3b9be)}.knob-cap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 1px 2px 1px #f7faff,inset -1px 2px 1px #f7faff,inset 0 -2px 1px #9a9fa6}.knob-surface{flex:1;height:100%;min-width:0;border-radius:100px;border:.4px solid #f5f7fd;position:relative}.knob-surface-dot{flex:1;height:100%;min-width:0;border-radius:100px;border:.4px solid #f5f7fd;position:relative;overflow:hidden;padding:10px;display:flex;align-items:flex-start}.knob-indicator{position:absolute;left:20.2px;top:47.36px;width:5px;height:5px;border-radius:50%;border:.4px solid #f5f7fd;transform:scaleY(-1)}.knob-indicator:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:#9fa5ac}.knob-indicator:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 2px 1.1px #00000080}.speaker-wrap{flex-shrink:0;border-radius:100px;padding:10px;position:relative}.speaker-wrap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:#c5c9cc}.speaker-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 4px 4px #fcfbfc,inset 0 .2px 4.2px #f2f7f980}.speaker-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:100px;box-shadow:0 13px 11px #747f89,0 27px 64.8px #747f89,0 -6px 6.5px #fafafa,0 -38px 25.8px #fafafa80;pointer-events:none}.speaker-ring{position:relative;border-radius:100px;padding:1px;display:flex;align-items:center;justify-content:center}.speaker-ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#acacac,#f3f5f7)}.speaker-ring:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 -1px 6.5px #fcfffe}.speaker-face{position:relative;border-radius:200px;width:74px;height:74px;flex-shrink:0;overflow:hidden}.speaker-face:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#d0d5d8 21.154%,#8d929a)}.speaker-face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3.0' height='5.1962' viewBox='0 0 3.0 5.1962'%3E%3Cpath d='M1.5000,1.6481L2.3227,2.1231L2.3227,3.0731L1.5000,3.5481L0.6773,3.0731L0.6773,2.1231Z' fill='%232d2d2d'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3.0' height='5.1962' viewBox='0 0 3.0 5.1962'%3E%3Cpath d='M1.5000,1.6481L2.3227,2.1231L2.3227,3.0731L1.5000,3.5481L0.6773,3.0731L0.6773,2.1231Z' fill='%232d2d2d'/%3E%3C/svg%3E");background-size:3px 5.1962px,3px 5.1962px;background-position:0 0,1.5px 2.5981px;background-repeat:repeat,repeat}.speaker-inset{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 1px 2px 6px #788089,inset -1px 2px 6px #788089,inset 0 -1px 4px #f4f6f8;pointer-events:none}.dot-grid{flex-shrink:0;width:71.84px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.dot-row{display:flex;gap:10px;align-items:center;width:100%}.dot{flex-shrink:0;width:17.28px;height:17.28px;border-radius:50%;padding:1.44px;position:relative}.dot-row:nth-child(1) .dot{background:linear-gradient(178.063deg,#717881 34.25%,#9fa6b1 39.567%,#6d757d 50.826%,#a3a9af 58.645%,#d2d6d9 68.653%)}.dot-row:nth-child(2) .dot,.dot-row:nth-child(3) .dot{background:linear-gradient(178.063deg,#717881 34.25%,#9fa6b1 39.567%,#6d757d 50.826%,#a3a9af 58.645%,#e2e7eb 68.653%)}.dot-inner{width:100%;height:100%;border-radius:50%;position:relative}.dot-inner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#434950,#6a747c)}.dot-inner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 4px 2.5px #00000080,inset 0 2.88px 12.096px #000}.dot{cursor:pointer}.dot.pressed .dot-inner:before{background:linear-gradient(to bottom,#6090e0,#3060c0)}.dot.pressed .dot-inner:after{box-shadow:inset 0 4px 2.5px #0000004d,inset 0 2.88px 10px #3c64ff80,0 0 10px #5082ffb3,0 0 20px #5082ff59}.song-outer{width:457px;background:linear-gradient(to bottom,#e4e7e9,#a1a6ad);border-radius:12px;padding-top:1px}.song-inner{background:#ccd0d3;border:1px solid #e4e7e9;border-radius:9px;padding:16px 20px 14px;position:relative;overflow:hidden;box-shadow:inset 14px 0 24px #b7bdc2,inset -14px 0 24px #b7bdc2,inset 0 14px 24px #b7bdc2,inset 0 -14px 32px #b3b9be}.display-screen{background:#06090a;border-radius:6px;padding:12px 14px 10px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #000000d9,inset 0 0 0 1px #000000b3,0 1px #ffffff1f}.display-screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 3px);pointer-events:none;border-radius:inherit}.display-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}canvas#viz{display:block;flex-shrink:0;border-radius:3px;image-rendering:pixelated}.display-info{flex:1;min-width:0}.display-track-name{font-family:Courier New,monospace;font-size:13px;font-weight:700;color:#6de8c0;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display-artist{font-family:Courier New,monospace;font-size:9px;color:#2e7a62;letter-spacing:.3px;margin-top:3px}.display-time{font-family:Courier New,monospace;font-size:20px;font-weight:700;color:#4dc4a0;margin-top:6px;letter-spacing:2px}.display-status{font-family:Courier New,monospace;font-size:8px;color:#1a4a3a;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}.display-status.playing{color:#6de8c0}.song-list{border-top:1px solid #122018;padding-top:8px;margin-top:2px}.song-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background .12s}.song-item:hover{background:#40c8a012}.song-item.active{background:#40c8a01f}.song-num{font-family:Courier New,monospace;font-size:9px;color:#1e5040;width:18px;flex-shrink:0}.song-play-ind{font-size:9px;color:#6de8c0;width:12px;flex-shrink:0;text-align:center}.song-title{font-family:Courier New,monospace;font-size:11px;color:#3aaa88;flex:1;letter-spacing:.3px}.song-item.active .song-title{color:#6de8c0;font-weight:700}.song-artist-sm{font-family:Courier New,monospace;font-size:9px;color:#1e5040;flex-shrink:0}.song-dur{font-family:Courier New,monospace;font-size:9px;color:#1e5040;width:30px;text-align:right;flex-shrink:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}@keyframes thumbSlide{0%{transform:translate(-55px)}65%{transform:translate(3px)}82%{transform:translate(-1.5px)}to{transform:translate(0)}}@keyframes dotPop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes knobIn{0%{opacity:0;transform:scale(.6) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes speakerIn{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}.song-outer,.top-outer{animation:fadeDown .55s cubic-bezier(.34,1.56,.64,1) both}.bottom-panel{animation:fadeUp .55s .1s cubic-bezier(.34,1.56,.64,1) both}.dot-row:nth-child(1) .dot:nth-child(1){animation:dotPop .38s .3s both}.dot-row:nth-child(1) .dot:nth-child(2){animation:dotPop .38s .38s both}.dot-row:nth-child(1) .dot:nth-child(3){animation:dotPop .38s .46s both}.dot-row:nth-child(2) .dot:nth-child(1){animation:dotPop .38s .54s both}.dot-row:nth-child(2) .dot:nth-child(2){animation:dotPop .38s .62s both}.dot-row:nth-child(2) .dot:nth-child(3){animation:dotPop .38s .7s both}.dot-row:nth-child(3) .dot:nth-child(1){animation:dotPop .38s .78s both}.dot-row:nth-child(3) .dot:nth-child(2){animation:dotPop .38s .86s both}.dot-row:nth-child(3) .dot:nth-child(3){animation:dotPop .38s .94s both}.knob-outer:nth-child(1){animation:knobIn .5s .55s cubic-bezier(.34,1.56,.64,1) both}.knob-outer:nth-child(2){animation:knobIn .5s .68s cubic-bezier(.34,1.56,.64,1) both}.speaker-wrap{animation:speakerIn .5s .8s cubic-bezier(.34,1.56,.64,1) both}