.soundtrack{padding:64px 7% 70px;background:radial-gradient(ellipse at 50% 45%,#22333b 0%,#0c1b24 48%,#07131b 80%);border-top:1px solid #d0aa6b23;overflow:hidden}
.soundtrack-inner{max-width:1000px;margin:auto}
.soundtrack-intro{display:flex;align-items:center;justify-content:center;gap:28px;margin:0 auto 65px}
.soundtrack-cover{width:112px;flex:none;height:auto;box-shadow:0 8px 25px #0008;transform:rotate(-3deg);border:1px solid #c6aa7455}
.soundtrack-intro h2{font-size:42px;letter-spacing:-.035em;line-height:1.12;margin:10px 0 13px}
.soundtrack-intro p:not(.eyebrow){font-size:17px;color:#d1d2c8;line-height:1.6}
.boombox{position:relative;border:1px solid #919b9c;border-top:3px solid #d7dbd7;border-radius:15px 15px 12px 12px;background:linear-gradient(180deg,#8e9596 0%,#c8ceca 2%,#aeb6b4 5%,#727e80 50%,#bac0b9 94%,#808e90 100%);box-shadow:0 26px 45px #0009,inset 2px 0 1px #f5f5de66,inset -2px 0 1px #121c2388;padding:0 23px 0;color:#172228;font-family:Arial,sans-serif;isolation:isolate}
.boombox:before,.boombox:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#39484d,#c3ccc8,#27343b);box-shadow:0 0 0 2px #606b6d;top:17px}
.boombox:before{left:12px}.boombox:after{right:12px}
.boombox-handle{position:absolute;z-index:-1;left:22%;right:22%;height:43px;top:-44px;border:12px solid #303c42;border-bottom:0;border-radius:15px 15px 0 0;box-shadow:inset 0 2px 2px #9faeaf,0 -2px 1px #78868c;transform:perspective(600px) rotateX(-6deg)}
.boombox-top{height:59px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #51626780;box-shadow:0 1px 0 #eff0dd66;gap:20px}
.boombox-brand{font-family:var(--sans);font-size:22px;letter-spacing:.15em;font-weight:700;text-shadow:0 1px 0 #e9eedc99}
.boombox-brand small{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.18em;display:inline-block;margin-left:9px;font-weight:400}
.boombox-model{font-size:8px;letter-spacing:.16em;color:#27383e}
.boombox-model b{margin-left:12px;background:#263a40;color:#dce2cf;padding:4px 6px;font-size:10px;font-weight:400;letter-spacing:.08em}
.boombox-body{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:23px;padding:22px 0 17px;align-items:center}
.speaker{position:relative;min-width:0;aspect-ratio:.8;border:4px solid #27363c;border-radius:9px;background:radial-gradient(circle,#0009 .7px,transparent 1.4px) 0 0/4px 4px,linear-gradient(145deg,#35434a,#101b21);box-shadow:inset 2px 2px 4px #0008,0 1px 0 #ecf0dd66;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;overflow:hidden}
.speaker-tweeter{width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#3f4b50 0%,#1a252c 38%,#071017 41%,#354249 47%,#17242b 53%,#050d13 65%,#33444b 70%,#111c23 74%);box-shadow:0 0 0 2px #020c11,0 0 0 3px #56656b55}
.speaker-cone{position:relative;width:85%;aspect-ratio:1;border-radius:50%;border:5px solid #101c23;background:radial-gradient(circle,#18252d 0%,#3a464c 20%,#111c24 21%,#506068 23%,#18262f 27%,#35464f 35%,#15232c 47%,#53646a 52%,#08141c 54%,#334149 61%,#0a151d 64%,#28373e 69%,#111d24 72%,#39484e 75%);box-shadow:0 0 0 2px #47575c,inset 0 0 14px #000b,0 5px 12px #0008}
.speaker-cone:after{content:'';position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,#000a .8px,transparent 1.1px) 0 0/3px 3px;opacity:.6}
.speaker-cone i{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#657177,#28343c 48%,#101b22 75%);box-shadow:1px 4px 7px #000b;border:1px solid #66747688}
.speaker>span{position:absolute;bottom:11px;color:#b1b9b8;font-size:6px;letter-spacing:.26em}
.tape-deck{min-width:0}
.tape-display{height:103px;border:5px solid #23343a;border-radius:5px;background:linear-gradient(135deg,#203526,#14241c 70%);box-shadow:inset 0 3px 9px #0009,0 1px 0 #ecf0dd77;padding:10px 12px 9px;color:#d1e4a4;text-shadow:0 0 9px #a8d17c33;font-family:'Courier New',monospace;position:relative}
.tape-display:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0px,transparent 2px,#00000014 3px);opacity:.7}
.display-topline,.display-bottomline{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:9px;line-height:1.3;letter-spacing:.04em;position:relative;z-index:1}
.display-stereo{font-size:8px;color:#a5b884}.display-stereo i{font-style:normal;letter-spacing:1px}
.display-title{font-size:16px;font-weight:700;line-height:1.25;height:40px;display:flex;align-items:center;overflow:hidden;letter-spacing:-.025em;position:relative;z-index:1;overflow-wrap:anywhere}
.display-bottomline{font-size:10px}.display-bottomline>span:last-child{white-space:nowrap}.display-time-divider{opacity:.5}
#soundtrack-state{font-size:8px;letter-spacing:.08em}
.cassette-door{position:relative;margin-top:12px;padding:13px 16px 9px;border:5px solid #26343c;border-radius:5px 5px 9px 9px;background:linear-gradient(155deg,#1d2a32,#101b22 60%,#344047);box-shadow:inset 1px 1px 1px #67777a66,0 1px 0 #e2e8d366}
.cassette-label{position:relative;background:linear-gradient(150deg,#dac59d,#bda57b);color:#332d27;text-align:left;padding:6px 11px 5px;border-radius:4px 4px 0 0;border-bottom:3px solid #a34d3b;line-height:1.2;box-shadow:inset 0 0 5px #70583255}
.cassette-label>span{font-family:var(--serif);font-size:15px;letter-spacing:.035em;display:block;padding-right:16px}
.cassette-label b{position:absolute;right:9px;top:6px;font-size:17px;font-weight:400}
.cassette-label small{font-size:5px;letter-spacing:.15em;display:block;margin-top:2px}
.cassette-window{height:57px;position:relative;display:flex;align-items:center;justify-content:space-between;background:#aab6a566;border:2px solid #080f12;margin:0 10px;padding:0 15px;box-shadow:inset 0 4px 10px #0008}
.tape-reel{position:relative;z-index:1;width:37px;height:37px;border-radius:50%;border:6px solid #b1ac95;background:repeating-conic-gradient(#29343a 0deg 30deg,#d9d0ad 30deg 60deg);box-shadow:0 0 0 3px #20262b,0 0 0 7px #0a1217;animation:spin-tape 2.5s linear infinite;animation-play-state:paused;flex:none}
.tape-reel i{position:absolute;inset:6px;background:#121d22;border:2px solid #c6c2ac;border-radius:50%}
.tape-band{position:absolute;height:26px;left:18%;right:18%;background:linear-gradient(#342921,#15191a);opacity:.9}
.cassette-base{display:flex;align-items:center;justify-content:space-around;margin:8px 18px 0;color:#879196;font-size:13px;height:11px}
.cassette-base i{width:5px;height:5px;background:#060e13;border-radius:50%;box-shadow:0 0 0 1px #536369}
.transport-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:12px;background:#27363a;border:2px solid #3e4f53;border-radius:3px;padding:3px 3px 6px;box-shadow:0 2px 0 #eff0d966}
.transport-controls button{min-width:0;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 4px;background:linear-gradient(#c6cdca,#a4afae 50%,#7d8e91);border:1px solid #dfe5d3;border-bottom:3px solid #475b62;border-radius:2px;color:#192b32;box-shadow:0 2px 1px #0009;transition:background .15s,transform .15s}
.transport-controls button:hover{background:linear-gradient(#e1e5d7,#c0c9c0)}
.transport-controls button:active{transform:translateY(2px);box-shadow:none;border-bottom-width:1px}
.transport-controls button>span{font-family:Arial,sans-serif;font-size:19px;line-height:1}
.transport-controls small{font-family:Arial,sans-serif;font-size:6px;letter-spacing:.12em;font-weight:700}
.transport-controls .transport-play{background:linear-gradient(#dec695,#bca16a 50%,#9d824e);border-color:#e6d4a8;border-bottom-color:#6c5935}
.transport-controls .transport-play:hover{background:linear-gradient(#ead5a7,#c5af80)}
.boombox-bottom{height:42px;border-top:1px solid #51626780;box-shadow:inset 0 1px 0 #eff0dd66;display:flex;align-items:center;justify-content:space-between;gap:15px}
.boombox-spec{font-size:7px;letter-spacing:.14em}.boombox-spec i{font-style:normal;margin:0 8px}
.volume-control{display:flex;align-items:center;gap:11px;font-size:7px;letter-spacing:.12em}
.volume-control input{width:100px;accent-color:#34494b;cursor:pointer;height:20px}
.boombox-foot{position:absolute;bottom:-9px;width:80px;height:9px;background:linear-gradient(#15262e,#071219);border-radius:0 0 4px 4px;z-index:-1}.foot-left{left:8%}.foot-right{right:8%}
.is-playing .tape-reel{animation-play-state:running}
.is-playing .display-stereo i{animation:tape-signal 1s steps(2,end) infinite}
.soundtrack-progress{display:flex;align-items:center;gap:20px;max-width:790px;margin:30px auto 0;padding:0 12px}
.soundtrack-progress>label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.soundtrack-progress>input{flex:1;min-width:0;accent-color:var(--gold);cursor:pointer;height:28px}
.soundtrack-progress>span{font-family:var(--sans);font-size:7px;letter-spacing:.18em;color:#b9b7a8;white-space:nowrap}
.soundtrack-playlist{max-width:790px;margin:14px auto 0;border-top:1px solid #d0aa6b35;border-bottom:1px solid #d0aa6b35}
.soundtrack-playlist summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px;list-style:none;padding:17px 4px;color:var(--gold);font-size:19px}
.soundtrack-playlist summary::-webkit-details-marker{display:none}
.playlist-count{font-family:var(--sans);font-size:8px;letter-spacing:.15em;color:#b9b7a8;display:flex;align-items:center;gap:18px}
.playlist-count i{font-size:20px;font-style:normal;transition:transform .2s}
.soundtrack-playlist[open] .playlist-count i{transform:rotate(45deg)}
.soundtrack-tracks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:0;padding:0 0 12px;counter-reset:none}
.soundtrack-track{display:flex;align-items:center;width:100%;gap:12px;padding:13px 9px;text-align:left;border-top:1px solid #d0aa6b1f;color:#dad8cc;border-radius:2px;line-height:1.35;min-height:48px}
.soundtrack-track:hover{background:#d9af7410;color:#f2d8ae}
.soundtrack-track[aria-current=true]{background:#d9af741b;color:#edd2a5}
.track-number,.track-duration{font-family:'Courier New',monospace;font-size:11px;color:#a99b82;flex:none}
.track-name{font-size:15px;flex:1}.track-duration{margin-left:auto}
#soundtrack-audio{width:100%;max-width:790px;margin:18px auto;display:block}.js #soundtrack-audio{display:none}
@keyframes spin-tape{to{transform:rotate(360deg)}}
@keyframes tape-signal{50%{opacity:.35}}
@media(max-width:1000px){.boombox{padding:0 18px}.boombox-body{gap:17px;grid-template-columns:1fr 1.6fr 1fr}.display-title{font-size:14px}.display-topline{font-size:8px}.display-stereo{font-size:7px}.tape-display{padding-left:9px;padding-right:9px}.cassette-door{padding-left:9px;padding-right:9px}.cassette-window{padding-left:12px;padding-right:12px}.speaker{aspect-ratio:.72}.cassette-label>span{font-size:13px}}
@media(max-width:760px){
 .soundtrack{padding:48px 5% 52px}
 .soundtrack-intro{gap:17px;justify-content:flex-start;margin-bottom:53px}
 .soundtrack-cover{width:82px}
 .soundtrack-intro h2{font-size:30px;margin:9px 0 9px}
 .soundtrack-intro .eyebrow{font-size:8px;letter-spacing:.2em}
 .soundtrack-intro p:not(.eyebrow){font-size:15px}.soundtrack-intro br{display:none}
 .boombox{padding:0 12px;border-radius:11px}
 .boombox-handle{left:22%;right:22%;height:32px;top:-33px;border-width:9px}
 .boombox-top{height:44px}
 .boombox-brand{font-size:17px;letter-spacing:.12em}.boombox-brand small{font-size:7px;margin-left:5px}
 .boombox-model{font-size:0;letter-spacing:0}.boombox-model b{font-size:9px;margin-left:0}
 .boombox-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 17px;padding:15px 0 13px}
 .tape-deck{grid-column:1/-1;grid-row:1;max-width:360px;width:100%;justify-self:center}
 .tape-display{height:100px;padding:9px 12px}.display-title{font-size:16px}.display-topline{font-size:9px}.display-stereo{font-size:8px}
 .cassette-door{padding:11px 20px 8px;margin-top:10px}.cassette-label>span{font-size:15px}
 .cassette-window{padding:0 20px;height:53px}.cassette-label small{font-size:6px}
 .transport-controls{margin-top:10px}.transport-controls button{height:49px}.transport-controls small{font-size:7px}
 .speaker{aspect-ratio:1.5;flex-direction:row;gap:12%;border-width:3px;border-radius:6px;justify-content:center}
 .speaker-tweeter{width:17%}.speaker-cone{width:58%;border-width:3px}.speaker>span{display:none}
 .boombox-bottom{height:40px}.boombox-spec{font-size:6px;letter-spacing:.05em}.boombox-spec i{margin:0 4px}.volume-control{font-size:7px;gap:7px}.volume-control input{width:75px}
 .boombox-foot{width:45px}
 .soundtrack-progress{gap:8px;margin-top:24px;padding:0 2px}.soundtrack-progress>span{display:none}
 .soundtrack-playlist{margin-top:9px}.soundtrack-playlist summary{font-size:18px}.playlist-count{font-size:7px;gap:10px}
 .soundtrack-tracks{grid-template-columns:1fr;padding-bottom:9px}.soundtrack-track{min-height:48px;padding-left:7px;padding-right:7px}.track-name{font-size:16px}
}
@media(max-width:380px){.soundtrack-intro h2{font-size:27px}.soundtrack-intro{gap:14px}.soundtrack-cover{width:72px}.boombox{padding:0 10px}.boombox-spec{font-size:5px}.volume-control input{width:65px}.cassette-door{padding-left:12px;padding-right:12px}.boombox-brand{font-size:15px}}
@media(prefers-reduced-motion:reduce){.tape-reel,.is-playing .display-stereo i{animation:none}.world-entry img{transition:none}}