.boombox{position:relative;margin:34px 14px 12px;padding:14px;border:3px solid #666973;border-radius:13px;background:repeating-linear-gradient(0deg,#bfc1c8 0px,#c7cad0 2px,#b9bcc4 3px);box-shadow:inset 0 2px 2px #fff,0 10px 20px #0007;color:#20212b;isolation:isolate}.boom-handle{position:absolute;top:-26px;left:20%;width:60%;height:26px;border:9px solid #262733;border-bottom:0;border-radius:10px 10px 0 0;z-index:-1}.boom-top{display:flex;justify-content:space-between;font:bold 9px monospace;letter-spacing:1px;margin-bottom:9px}.boom-dial{border:4px ridge #797b86;background:linear-gradient(110deg,#092c33,#071419);color:#88ffde;padding:9px 8px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;overflow:hidden;box-shadow:inset 0 3px 8px #000}.boom-dial b{font:900 25px monospace;letter-spacing:4px;text-shadow:0 0 8px #35e9bd}.boom-dial span{white-space:nowrap;overflow:hidden;color:#73b7ad;font:16px monospace;letter-spacing:2px;border-bottom:2px solid #f14679}.boom-dial small{grid-column:1/-1;font:8px monospace;letter-spacing:2px}.boom-hardware{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:9px;align-items:center;margin:12px 0}.boom-speaker{aspect-ratio:1;border:4px solid #393b44;border-radius:50%;background:repeating-radial-gradient(circle,#22232c 0px,#101118 2px,#363740 3px,#11121a 4px);box-shadow:0 2px 2px #fff9,inset 0 0 8px #000;display:grid;place-items:center}.boom-speaker span{width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 35% 25%,#71757d,#1c1d25 70%);border:4px solid #11131b;box-shadow:0 0 0 7px #252630}.boom-deck{min-width:0;text-align:center}.boom-tape{padding:7px 5px 3px;border:3px ridge #6a6c76;border-radius:5px;background:#22242d;box-shadow:inset 0 2px 6px #000}.tape-label{padding:5px 1px;background:linear-gradient(#f5d69a 60%,#ef509b 60%,#ef509b 80%,#41c7de 80%);font:900 10px monospace;color:#252332}.tape-label small{display:block;font-size:7px;margin-top:2px}.tape-window{position:relative;display:flex;justify-content:space-between;align-items:center;background:#090d14;border:2px solid #555967;border-radius:8px;margin:6px 2px;padding:5px}.tape-reel{display:block;flex:0 0 29px;height:29px;border:5px solid #675649;border-radius:50%;background:repeating-conic-gradient(#d5d7d5 0deg 35deg,#33353e 35deg 60deg);box-shadow:0 0 0 1px #a69b88;animation:wrnd-reel 2s linear infinite;animation-play-state:paused;z-index:1}.tape-line{position:absolute;left:14%;right:14%;height:1px;bottom:6px;background:#9c7a56}.boombox.is-playing .tape-reel{animation-play-state:running}.tape-bottom{color:#b4b4b9;font:9px monospace}.boom-deck .playbutton{display:block;width:100%;margin:8px 0 5px;padding:10px 2px;border:2px outset #f9fafb;border-radius:3px;background:linear-gradient(#f5f5f7,#a9aeb9);color:#191d27;font:900 11px monospace;cursor:pointer;box-shadow:0 3px 0 #4f525e}.boom-deck .playbutton:active{transform:translateY(2px);box-shadow:none}.boom-deck .playbutton:focus-visible{outline:3px solid #ff2b96;outline-offset:3px}#boom-status{font:7px monospace;letter-spacing:1px}.boom-stickers{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:4px 0 10px}.boom-stickers span{padding:4px 5px;border:2px solid white;background:#14141e;color:#fff;font:900 9px/1.1 Arial;box-shadow:1px 2px 2px #0006;transform:rotate(-7deg)}.boom-stickers span:nth-child(2){background:#732d9c;transform:rotate(8deg)}.boom-stickers span:nth-child(3){background:#ef277f;transform:rotate(-4deg)}.boom-stickers span:nth-child(4){background:#e8c638;color:#202134;transform:rotate(5deg)}.boom-stickers span:nth-child(5){background:#b3212d;transform:rotate(-5deg)}.boom-volume{display:flex;justify-content:center;align-items:center;gap:12px;font:900 9px monospace}.boom-volume input{width:45%;accent-color:#303540;min-height:24px}.boom-info{display:grid;grid-template-columns:64px 1fr;align-items:start;gap:12px;padding:6px 20px 20px}.boom-info .album{width:64px}.boom-info .onair-show span{margin-top:0!important}.boom-info .trackstatus{margin-top:12px}@keyframes wrnd-reel{to{transform:rotate(360deg)}}@media(max-width:380px){.boombox{margin-inline:7px;padding:9px}.boom-hardware{gap:5px}.tape-reel{flex-basis:23px;height:23px;border-width:4px}.boom-stickers span{font-size:8px}.boom-top{font-size:7px}}@media(prefers-reduced-motion:reduce){.tape-reel{animation:none}}
/* 1984 portable stereo: brushed alloy, injection-moulded casing and smoked glass. */
.boombox{margin-top:52px;padding:17px 13px 14px;border:5px ridge #56575a;border-radius:6px;background:linear-gradient(108deg,#fff5,transparent 28%,#0002 68%,#fff3),repeating-linear-gradient(0deg,#afb0ad 0,#c5c6c2 .6px,#b9bab7 1.2px,#c8c9c4 2px);box-shadow:inset 0 2px 0 #fff9,inset 0 -5px 5px #0006,4px 7px 0 #27282c,8px 16px 22px #0009;color:#232522}.boom-handle{top:-36px;left:18%;width:64%;height:33px;border:11px ridge #343638;border-bottom:0;border-radius:5px 5px 0 0;background:transparent;box-shadow:0 -1px 0 #777}.boom-antenna{position:absolute;width:60%;height:5px;background:linear-gradient(#656969,#f2f3f1 40%,#656969 80%);border:1px solid #797b79;right:3%;top:-13px;transform:rotate(-13deg);transform-origin:right center;box-shadow:1px 2px 2px #0008;z-index:-2}.boom-antenna:before{content:'';position:absolute;left:-4px;top:-2px;width:7px;height:7px;border-radius:50%;background:#ccc;border:1px solid #666}.case-screw{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(45deg,#222 42%,#aaa 43%,#ddd 56%,#222 57%);box-shadow:0 0 0 1px #bbb8}.screw-tl{top:5px;left:4px}.screw-tr{top:5px;right:4px}.screw-bl{bottom:5px;left:4px}.screw-br{bottom:5px;right:4px}.boom-top{font:6px Arial;letter-spacing:.7px;align-items:baseline;margin:0 0 9px}.boom-top b{font:bold italic 11px Arial;margin-right:3px}.boom-top>span:last-child{font-weight:900;font-size:9px}.boom-dial{display:flex;gap:10px;background:linear-gradient(165deg,#b8c6b52b 0%,transparent 44%,#ffffff13 45%,transparent 60%),#17201c;border:3px ridge #454b49;padding:8px 6px;box-shadow:inset 0 4px 6px #000b,0 1px 0 #fff9;color:#e4dec1;min-width:0}.dial-brand{flex:0 0 29%;border-right:1px solid #9ba18c;padding-right:3px;display:flex;flex-direction:column;justify-content:center}.boom-dial b{font:900 italic clamp(18px,2vw,26px) Arial;letter-spacing:2px;color:#f3d99d;text-shadow:0 0 7px #f9c06b55}.boom-dial small{font:6px Arial;letter-spacing:1px;color:#d4cbb1;margin-top:3px}.dial-scale{position:relative;flex:1;min-width:0}.boom-dial .dial-numbers{display:flex;justify-content:space-between;gap:1px}.boom-dial .dial-numbers span{font:6px Arial;letter-spacing:0;border:0;color:#e5dfc9}.dial-ticks{height:14px;margin:3px 0;background:repeating-linear-gradient(90deg,#d3d0b8 0 1px,transparent 1px 5px);border-top:1px solid #d3d0b8;border-bottom:1px solid #7d846c}.dial-needle{position:absolute;left:53%;width:2px;top:0;bottom:0;background:#ed6938;box-shadow:0 0 3px #e66030}.boom-controls{height:35px;display:flex;align-items:center;gap:12px;padding:5px 4px 0}.boom-eq{display:flex;gap:6px;position:relative;height:20px;padding-bottom:6px;flex:1}.boom-eq i{position:relative;display:block;width:4px;height:16px;background:#272a28;border:1px inset #777}.boom-eq i:after{content:'';position:absolute;top:4px;left:-3px;width:8px;height:4px;background:linear-gradient(#eee,#555);border:1px solid #333}.boom-eq i:nth-child(2n):after{top:8px}.boom-eq i:nth-child(3):after{top:1px}.boom-eq small{position:absolute;bottom:-3px;font:5px Arial;letter-spacing:.6px;white-space:nowrap}.boom-vu{padding:3px 6px;background:#19211c;border:2px inset #777;display:flex;flex-direction:column;font:6px monospace;color:#849b66;letter-spacing:1px}.boom-vu b{color:#966447}.boombox.is-playing .boom-vu{color:#c5ec7b;text-shadow:0 0 4px #b4e86c}.boom-knob{width:23px;height:23px;border:3px ridge #b0b3af;border-radius:50%;background:conic-gradient(#ddd,#60655e,#eee,#777,#ddd);box-shadow:1px 2px 2px #0008}.boom-knob:after{content:'';display:block;height:7px;width:2px;background:#333;margin:0 auto}.boom-hardware{grid-template-columns:1fr 1.05fr 1fr;gap:7px;margin:9px 0}.speaker-cabinet{position:relative;padding:7px 4px 8px;background:linear-gradient(130deg,#363938,#151716);border:3px ridge #6f716d;border-radius:3px;box-shadow:0 1px 0 #fff7;text-align:center;min-width:0}.boom-tweeter{width:29%;aspect-ratio:1;border:3px ridge #62645e;background:radial-gradient(circle,#55584f,#101310 50%,#343a32 52%,#101310 65%);border-radius:50%;margin:0 auto 6px}.boom-speaker{position:relative;border:5px ridge #5d615a;box-shadow:0 1px 1px #b6b9ad,0 0 0 2px #111,inset 0 0 6px #000;background:repeating-radial-gradient(circle,#272b25 0px,#111610 2px,#3e4438 3px,#171c15 4px)}.boom-speaker:after{content:'';position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,#000b .65px,transparent 1px);background-size:3px 3px;box-shadow:inset 0 0 7px #0009;pointer-events:none}.boom-speaker span{border:3px solid #181e15;background:radial-gradient(circle at 40% 30%,#707464,#242b1d 65%,#141b11);box-shadow:0 0 0 5px #1a2116}.speaker-cabinet>small{display:block;font:4.5px Arial;letter-spacing:.25px;color:#b1b5a7;margin-top:7px;white-space:nowrap}.boom-tape{background:linear-gradient(120deg,#62645e44,transparent 40%,#ddd1 44%,transparent 70%),#1d201e;padding:6px 4px 3px;border:3px ridge #646b60;border-radius:2px;box-shadow:inset 0 2px 6px #000,0 1px 1px #fffa}.tape-label{background:linear-gradient(#d5caa9 0 55%,#a74028 55% 65%,#c07b35 65% 75%,#d1ac5b 75% 85%,#ddd1ab 85%);padding:4px 1px 6px;font:bold italic 8px monospace;border-radius:2px}.tape-label small{font:5px monospace;margin-top:3px}.tape-window{border:2px inset #666d60;border-radius:12px;background:linear-gradient(130deg,#9a9f8222,transparent 55%),#151912;padding:4px 2px;gap:4px;margin:5px 1px}.tape-reel{flex-basis:25px;height:25px;border:5px solid #453424;box-shadow:0 0 0 1px #6e6957,inset 0 0 0 1px #aaa88f;background:repeating-conic-gradient(#d5d2b8 0 35deg,#525443 35deg 60deg)}.tape-reel:after{content:'';display:block;width:5px;height:5px;background:#20241b;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tape-reel{position:relative}.tape-bottom{font-size:7px;color:#858d7d}.deck-caption{font:4px Arial;letter-spacing:.6px;color:#bfc3b4;margin-top:4px}.boom-deck .playbutton{font-size:9px;background:linear-gradient(90deg,#9c9e96,#e2e3d7 20%,#c6c8bb 75%,#858a7d);border:2px outset #c9ccbe;min-height:32px;margin-top:6px;box-shadow:0 3px 0 #292e24,inset 0 1px 0 white;border-radius:1px}.boombox.is-playing .playbutton{box-shadow:0 1px 0 #292e24,inset 0 2px 3px #0006}.transport-keys{display:flex;margin:5px 0 7px;gap:2px}.transport-keys i{flex:1;font:5px Arial;font-style:normal;padding:5px 0;background:linear-gradient(#d4d5ca,#868b7d);color:#252a22;border:1px outset #c8cabb;box-shadow:0 2px 0 #353b2e}.transport-keys i:first-child{color:#b32b21}#boom-status{font-size:5px;letter-spacing:.5px}.boom-stickers{padding:7px 4px 8px;gap:6px;justify-content:space-around;align-items:center}.boom-stickers span{position:relative;background:linear-gradient(130deg,#ffffff15,transparent),#14141b;border:2px solid #d6d4c5;font:bold italic 8px Arial;padding:5px 4px;box-shadow:1px 2px 2px #0007;clip-path:polygon(1% 0,100% 2%,98% 93%,91% 100%,0 97%)}.boom-stickers span:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 6px,#ffffff18 6.5px 7px,transparent 7.5px 17px);pointer-events:none}.boom-stickers span:nth-child(2){font-family:Georgia;font-style:italic;font-size:12px;color:#edc9f3;background:#4c256d;transform:rotate(9deg)}.boom-stickers span:nth-child(3){letter-spacing:1px;background:#b42d66;transform:rotate(-9deg)}.boom-stickers span:nth-child(4){background:#273b70;color:#e2d4ad;font-family:Georgia}.boom-stickers span:nth-child(5){background:#a83d2b;font-family:Georgia}.boom-volume{font-size:7px;letter-spacing:1px;border-top:1px solid #6667;padding-top:6px}.boom-volume input{accent-color:#464c3c;min-height:22px}
@media(max-width:380px){.boombox{padding:15px 9px 12px;margin-inline:7px}.boom-top b{font-size:9px}.boom-top{font-size:5px}.boom-top>span:last-child{font-size:7px}.boom-stickers{gap:4px}.boom-stickers span{font-size:7px;padding:4px 3px}.boom-stickers span:nth-child(2){font-size:10px}.tape-reel{flex-basis:20px;height:20px;border-width:4px}.boom-hardware{gap:4px}.speaker-cabinet{padding-inline:3px}.boom-deck .playbutton{font-size:8px}.dial-brand{flex-basis:28%}}

/* Playback-driven speaker excursion and outgoing sound rings. */
.boom-speaker:before{content:'';position:absolute;inset:9%;border:2px solid #d5e4b9;border-radius:50%;opacity:0;pointer-events:none;z-index:2}
.boombox.is-playing:not(.is-silent) .boom-speaker{animation:wrnd-speaker-thump .68s ease-in-out infinite}
.boombox.is-playing:not(.is-silent) .boom-speaker span{animation:wrnd-cone-thump .34s ease-in-out infinite}
.boombox.is-playing:not(.is-silent) .boom-speaker:before{animation:wrnd-sound-wave 1.36s ease-out infinite}
.boombox.is-playing:not(.is-silent) .speaker-cabinet:last-child .boom-speaker:before{animation-delay:.34s}
@keyframes wrnd-speaker-thump{0%,45%,100%{transform:scale(1)}12%,60%{transform:scale(1.035)}25%,76%{transform:scale(.99)}}
@keyframes wrnd-cone-thump{0%,100%{transform:scale(1)}35%{transform:scale(1.16)}65%{transform:scale(.97)}}
@keyframes wrnd-sound-wave{0%{transform:scale(.85);opacity:0}15%{opacity:.42}100%{transform:scale(1.28);opacity:0}}
@media(prefers-reduced-motion:reduce){.boombox .boom-speaker,.boombox .boom-speaker span,.boombox .boom-speaker:before{animation:none!important}}
/* 1980s digital readout in Throwbacks navy, cyan and pink. */
#player .boom-info{margin:16px 14px 18px;padding:14px;gap:14px;border:4px ridge #343773;border-radius:3px;background:linear-gradient(120deg,#20dcff12,transparent 42%,#ff2b960c 43%,transparent 65%),repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px),#0b102f;box-shadow:inset 0 3px 12px #000,0 1px 0 #20dcff55}
#player .boom-info>div{min-width:0}#player .boom-info .album{border:2px inset #343773;border-radius:2px;overflow:hidden}
#player .boom-info .onair-show,#player .boom-info .trackstatus{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.065em;line-height:1.4}
#player .boom-info .onair-show span{color:#aeb9df!important;font:700 9px/1.4 'Courier New',monospace!important;letter-spacing:.18em!important}
#player #current-show-name{color:#ff58ba;font:700 14px/1.4 'Courier New',monospace!important;text-shadow:0 0 5px #ff2b9688;overflow-wrap:anywhere}
#player #current-show-time{color:#c9c5df!important;font:10px/1.5 'Courier New',monospace!important;letter-spacing:.025em;overflow-wrap:anywhere}
#player .boom-info .trackstatus{margin-top:12px;padding-top:10px;border-top:1px solid #20dcff40}
#player .boom-info .trackstatus>span{display:block;color:#aeb9df;font:700 9px/1.5 'Courier New',monospace;letter-spacing:.2em}
#player #now-playing-title{display:block;margin-top:4px;color:#20dcff;font:700 clamp(15px,2vw,21px)/1.3 'Courier New',monospace;letter-spacing:.06em;text-shadow:0 0 3px #20dcffaa,0 0 10px #20dcff55;overflow-wrap:anywhere}
#player #now-playing-artist{display:block;margin-top:5px;color:#e4eaff;font:700 12px/1.5 'Courier New',monospace;letter-spacing:.08em;text-shadow:0 0 5px #768dff66;overflow-wrap:anywhere}
#player .boom-info .player-advertise{margin-top:12px;padding-top:8px;border-top:1px solid #20dcff25;font:10px/1.6 'Courier New',monospace;color:#c9c5df}#player .boom-info .player-advertise a{color:#c9c5df}
#player>.paneltitle{font-family:'Courier New',monospace;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:420px){#player .boom-info{margin-inline:9px;padding:10px;gap:10px;grid-template-columns:48px minmax(0,1fr)}#player .boom-info .album{width:48px}#player #now-playing-title{font-size:16px}}

/* Allow complete song and artist metadata to wrap within the digital display. */
#player #now-playing-title,#player #now-playing-artist{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:100%;height:auto;max-height:none}