:root{
  --red:#e00000;--red2:#8b0000;--red3:#330000;--black:#050505;--ink:#0b0909;
  --paper:#d8d0c3;--dirty:#9f968a;--line:#5a0000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050505;color:var(--paper);font-family:"Courier New",monospace}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}
.music-page{min-height:100vh;background:#070606 url("./images/grunge-bg.jpg") center top/cover fixed no-repeat;position:relative}
.music-page:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,0,0,.018) 0 1px,transparent 1px 8px);mix-blend-mode:screen}
.paper-noise{position:fixed;inset:-40%;z-index:50;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.red-stain{position:fixed;z-index:0;pointer-events:none;background:#a00000;opacity:.28;filter:blur(35px);mix-blend-mode:screen}
.stain-a{width:42vw;height:14vw;left:-10vw;top:20vh;transform:rotate(-13deg)}.stain-b{width:40vw;height:13vw;right:-12vw;top:60vh;transform:rotate(12deg)}.stain-c{width:35vw;height:11vw;left:25vw;bottom:-4vw;transform:rotate(-8deg)}

.music-header{width:1280px;max-width:94vw;margin:0 auto;padding:20px 18px 15px;display:grid;grid-template-columns:260px 1fr auto;gap:22px;align-items:end;border-bottom:6px double var(--red2);background:rgba(6,4,4,.94);box-shadow:0 9px 0 #000,0 13px 0 #270000;position:relative;z-index:10}
.back-logo{font:bold 34px/.72 Impact,"Arial Black",sans-serif;letter-spacing:-1px;transform:rotate(-2deg);text-shadow:4px 4px 0 var(--red2),7px 7px 0 #000}
.back-logo span{color:#eee6da}.header-note{font-size:9px;letter-spacing:3px;color:#9b6868}.music-nav{display:flex;gap:5px;flex-wrap:wrap}.music-nav a{border:2px solid #5e1717;background:#100707;padding:9px 12px;font:bold 10px "Courier New";box-shadow:4px 4px 0 #000}.music-nav a.active,.music-nav a:hover{background:var(--red);color:#050505;border-color:#ff4747;transform:rotate(-2deg)}

.scrapbook{width:1280px;max-width:94vw;margin:0 auto;display:grid;grid-template-columns:180px minmax(0,920px) 180px;gap:24px;position:relative;z-index:5}
.left-collage,.right-collage{position:relative;min-height:2350px}.left-collage:before,.right-collage:before{content:"";position:absolute;top:30px;bottom:80px;width:9px;background:repeating-linear-gradient(0deg,#270000 0 10px,#050505 10px 17px,#bd0000 17px 21px,#050505 21px 30px);filter:drop-shadow(4px 4px 0 #000)}.left-collage:before{left:-13px}.right-collage:before{right:-13px}
.music-center{min-width:0;padding:55px 0 90px}.top-scrap{display:flex;justify-content:space-between;gap:10px;color:#b16b6b;font-size:9px;letter-spacing:3px;border:3px solid #470000;border-left:10px solid var(--red);background:#100404;padding:8px 12px;box-shadow:6px 6px 0 #000;transform:rotate(-.6deg)}
.hero-heading{padding:8px 0 35px;position:relative}.spray-word{font:bold clamp(86px,10vw,160px)/.72 Impact,"Arial Black",sans-serif;color:#d9d1c6;letter-spacing:-3px;transform:rotate(-4deg);text-shadow:7px 7px 0 #930000,13px 13px 0 #000,-2px 0 #fff}.red-underline{width:78%;height:16px;background:var(--red);box-shadow:10px 9px 0 #000,0 0 0 4px #4a0000;transform:rotate(-2deg);margin:13px 0}.hero-heading p{font-size:10px;letter-spacing:2px;margin:18px 0 0;border-left:9px solid var(--red);padding:8px 12px;background:#190303;box-shadow:5px 5px #000}

.player-poster{position:relative;background:rgba(7,5,5,.97);border:4px solid #510000;box-shadow:14px 15px 0 #000,0 0 0 5px #a00000,0 0 0 9px #170000;padding:18px;transform:rotate(.35deg)}
.player-poster:before,.player-poster:after{content:"";position:absolute;pointer-events:none}.player-poster:before{inset:8px;border:2px dashed #6c0000}.player-poster:after{left:-18px;right:-18px;top:45%;border-top:4px solid #b00000;transform:rotate(-1deg);opacity:.7}
.poster-tape{display:inline-block;background:#d4ccc0;color:#120909;padding:6px 13px;font:bold 11px "Courier New";transform:rotate(-2deg);box-shadow:5px 5px #000;position:relative;z-index:2}
.now-grid{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:30px 18px 22px}.cover-frame{height:260px;position:relative;background:#171313;border:7px solid #090000;box-shadow:10px 10px 0 #000,0 0 0 4px #8f0000;transform:rotate(-2.5deg);overflow:hidden}.cover-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.12) saturate(.9)}.cover-frame:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,0,0,.10) 8px),linear-gradient(125deg,transparent 0 53%,rgba(230,0,0,.32) 54% 60%,transparent 61%);mix-blend-mode:screen;z-index:1}.cover-stamp{position:absolute;right:7px;bottom:7px;background:var(--red);color:#000;padding:6px 8px;font:bold 12px/10px "Courier New";z-index:2}
.now-copy{padding-top:8px}.red-label{display:inline-block;background:#250000;color:#ff1515;border-left:8px solid var(--red);padding:5px 9px;font:bold 10px "Courier New";letter-spacing:2px;box-shadow:4px 4px 0 #000}.now-copy h1{font:bold clamp(34px,4vw,62px)/.9 "Arial Black",Impact,sans-serif;margin:16px 0 8px;color:#e4dcd1;text-shadow:5px 5px 0 #790000,9px 9px 0 #000}.now-copy h2{font:bold 20px "Courier New";margin:0;color:#f10;text-transform:uppercase}.now-copy p{font-size:10px;line-height:17px;color:#9a7777;margin:22px 0}.meta-row{display:flex;justify-content:space-between;gap:15px;border-top:3px double #650000;padding-top:10px;color:#ad7373;font-size:9px;letter-spacing:1px}

.sc-player-shell{position:relative;margin:5px 7px;border:4px solid #2e0909;background:#090909;padding:8px;box-shadow:9px 9px 0 #000,0 0 0 2px #820000}.sc-label{color:#e00000;font:bold 9px "Courier New";letter-spacing:2px;padding:2px 2px 8px}.sc-player-shell iframe{display:block;width:100%;height:210px;border:0;background:#111}
.custom-controls{display:flex;align-items:center;gap:14px;padding:15px 10px 9px;border-top:4px double #7b0000;margin-top:14px;background:#180303}.big-play{width:52px;height:52px;border:3px solid #3b0000;background:var(--red);color:#000;border-radius:50%;font-weight:900;font-size:18px;box-shadow:5px 5px 0 #000;cursor:pointer}.big-play:hover{transform:rotate(-8deg) scale(1.04)}.fake-meter{display:flex;align-items:end;height:35px;gap:2px;flex:1}.fake-meter i{display:block;width:5px;background:#d00000;box-shadow:1px 0 #000;height:12px}.fake-meter i:nth-child(2n){height:22px}.fake-meter i:nth-child(3n){height:31px}.fake-meter i:nth-child(4n){height:17px}.fake-meter i:nth-child(5n){height:27px}.meter-word{font-size:8px;color:#a56b6b;white-space:nowrap}.player-warning{font-size:8px;color:#855757;letter-spacing:1px;padding:9px 5px}

.manifesto-band{margin:62px 0 0;display:grid;grid-template-columns:1fr 170px;gap:24px;align-items:center;border-top:7px double var(--red);border-bottom:7px double var(--red);background:#120303;padding:25px 20px;box-shadow:10px 10px #000;transform:rotate(-.9deg)}.manifesto-copy span{display:block;color:#ff0e0e;font:bold 12px "Courier New";letter-spacing:2px}.manifesto-copy strong{display:block;font:bold 36px/.9 "Arial Black",Impact,sans-serif;margin:9px 0;text-shadow:5px 5px 0 #5e0000}.manifesto-copy p{font-size:10px;line-height:18px;color:#b1a79c}.manifesto-stamp{border:5px solid #a00000;color:#e00000;padding:16px;text-align:center;font:bold 21px/.9 "Courier New";transform:rotate(8deg);box-shadow:6px 6px #000}

.playlist-section{margin-top:65px;padding:14px 11px 18px;background:#070606;border:4px solid #4c0000;box-shadow:11px 11px #000,0 0 0 4px #9a0000}.playlist-title{display:flex;justify-content:space-between;gap:10px;color:#e00000;font:bold 16px "Courier New";padding:5px 8px 13px;border-bottom:4px double #7a0000}.playlist-title b{font:9px "Courier New";color:#9c6c6c}.playlist{margin-top:8px}.song{width:100%;display:grid;grid-template-columns:45px 1fr auto 58px;grid-template-rows:auto auto;text-align:left;gap:3px 10px;padding:15px 10px;background:#0b0808;border:0;border-bottom:2px dashed #4d0000;cursor:pointer;position:relative}.song:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent}.song span{grid-row:1/3;color:#734646;font-size:11px}.song strong{font:bold 16px "Courier New";color:#ded6cb}.song em{font-size:9px;color:#956565;font-style:normal;letter-spacing:1px}.song b{grid-column:4;grid-row:1/3;align-self:center;text-align:right;color:#b36b6b;font-size:11px;font-weight:700}.song:hover{background:#270000;transform:translateX(7px);box-shadow:-8px 0 var(--red),8px 8px #000}.song.active{background:#430000;box-shadow:inset 12px 0 var(--red),0 6px 0 #000}.song.active:before{background:#ff0000}.song.active span,.song.active strong,.song.active b{color:#ff1b1b}.song.active span:before{content:'▶ ';color:#fff}

.lower-collage{position:relative;height:600px;margin-top:62px;border-top:6px double #850000;background:#090707;overflow:hidden;box-shadow:12px 12px #000}.lower-photo{position:absolute;left:7%;top:45px;width:47%;height:370px;object-fit:cover;filter:grayscale(.8) contrast(1.4) brightness(.55);border:8px solid #d0c7bb;box-shadow:14px 14px #000;transform:rotate(-6deg)}.lower-note{position:absolute;right:9%;top:95px;font:bold 27px "Courier New";color:#c6baac;transform:rotate(6deg);text-shadow:4px 4px #000}.lower-note.red{right:13%;top:320px;color:#e00000;font-size:19px;transform:rotate(-5deg)}.fake-sticker{position:absolute;left:53%;bottom:38px;background:#d1c8bb;color:#111;padding:19px;font:bold 26px/.8 "Courier New";transform:rotate(8deg);box-shadow:9px 9px #000}

.left-collage .side-photo,.right-collage .side-photo{position:absolute;width:154px;height:205px;object-fit:cover;border:7px solid #d0c7bb;box-shadow:10px 11px 0 #000;filter:grayscale(.9) contrast(1.35) brightness(.6)}.side-photo-1{top:170px;left:0;transform:rotate(-8deg)}.side-photo-2{top:520px;right:-3px;transform:rotate(7deg)}.side-photo-3{top:1050px;right:-3px;transform:rotate(9deg)}.paper-note{position:absolute;background:#c9c0b4;color:#151010;padding:14px 11px;font:bold 21px/.85 "Courier New";box-shadow:8px 9px #000}.note-am{top:55px;left:4px;transform:rotate(-5deg)}.note-sc{top:465px;right:2px;transform:rotate(7deg);background:#bdb5a9}.scribble{position:absolute;font:bold 18px/1.1 "Courier New";color:#c2b8ac;text-shadow:2px 2px #000}.scribble-1{top:770px;left:4px;transform:rotate(-9deg)}.scribble-2{top:1160px;left:25px;color:#e00000;transform:rotate(5deg)}.scribble-r{top:880px;right:5px;color:#e00000;transform:rotate(-9deg)}.star{position:absolute;color:#e00000;font-size:74px;text-shadow:5px 5px #000}.star-1{top:960px;left:36px}.star-2{top:1460px;right:12px}.star-r{top:770px;right:25px}.x-mark{position:absolute;top:1570px;left:5px;color:#b00000;letter-spacing:12px;transform:rotate(-10deg)}.rock-sticker{position:absolute;top:65px;right:-2px;background:#d90000;color:#050505;border:5px solid #280000;padding:17px 13px;text-align:center;font:bold 29px/.85 Impact,"Arial Black",sans-serif;transform:rotate(6deg);box-shadow:10px 10px #000}.phone-card{position:absolute;top:300px;right:-2px;width:168px;background:#0c0909;border:4px solid #720000;padding:9px;box-shadow:9px 10px #000;transform:rotate(5deg);z-index:3}.model-label{font-size:7px;line-height:10px;color:#c16b6b;text-align:center;margin-bottom:6px}.flip-model{width:100%;aspect-ratio:1/1.3;background:#000;overflow:hidden;border:2px solid #555}.flip-model iframe{width:100%;height:100%;border:0}.model-credit{display:block;font-size:7px;line-height:10px;color:#b67575;text-align:center;margin-top:6px}
.music-footer{width:1280px;max-width:94vw;margin:0 auto;border-top:5px double #700000;padding:20px 0 28px;color:#714f4f;font-size:9px;letter-spacing:2px}.music-footer span{float:right;color:#d00000}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:100;display:grid;place-items:center}.lightbox img{max-width:88vw;max-height:88vh;object-fit:contain}.lightbox button{position:absolute;top:15px;right:24px;background:none;border:0;color:#fff;font-size:54px;cursor:pointer}[hidden]{display:none!important}

@media(max-width:1050px){.scrapbook{grid-template-columns:1fr}.left-collage,.right-collage{display:none}.music-center{padding:32px 0 70px}.music-header{grid-template-columns:1fr}.header-note{display:none}.music-nav{justify-content:flex-start}.now-grid{grid-template-columns:230px 1fr}}
@media(max-width:650px){.music-header,.scrapbook,.music-footer{width:92vw}.now-grid{grid-template-columns:1fr}.cover-frame{width:210px;height:210px}.spray-word{font-size:86px}.playlist-title b{display:none}.song{grid-template-columns:34px 1fr 55px}.song b{grid-column:3}.song em{grid-column:2}.manifesto-band{grid-template-columns:1fr}.sc-player-shell iframe{height:190px}.custom-controls{gap:8px}.meter-word{display:none}}

/* === USER SPRITES / HARD GRUNGE PASS === */
.music-page{cursor:crosshair}
.music-header{position:relative;z-index:20}
.music-nav a{position:relative;overflow:visible}
.nav-marker{position:absolute;left:50%;top:50%;width:96px;height:52px;transform:translate(-50%,-50%) rotate(-3deg);background:url('./images/sprites/circle-a.png') center/100% 100% no-repeat;opacity:0;pointer-events:none;z-index:-1;filter:drop-shadow(3px 3px 0 #000)}
.music-nav a:hover .nav-marker,.music-nav a:focus-visible .nav-marker{opacity:1}
.nav-marker.frame-b{background-image:url('./images/sprites/circle-b.png');transform:translate(-50%,-50%) rotate(4deg) scale(1.04)}

.hero-heading{overflow:visible}
.rock-hero{position:absolute;right:2%;top:-10px;width:250px;height:125px;z-index:4;transform:rotate(-7deg);pointer-events:none;filter:drop-shadow(8px 8px 0 #000)}
.rock-hero img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.92}
.hero-box-sprite{position:absolute;left:-20px;bottom:0;width:430px;height:100px;object-fit:fill;opacity:.65;pointer-events:none;transform:rotate(-1deg)}

.player-poster{overflow:visible}
.now-copy{position:relative}
.meta-row{align-items:center;flex-wrap:nowrap;min-height:40px}
.meta-row #status{white-space:nowrap}
.volume-control{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:250px;color:#e00000;font:bold 9px 'Courier New';letter-spacing:1px;white-space:nowrap}
.volume-control input{width:180px;accent-color:#ff0000;cursor:pointer}
.volume-control input::-webkit-slider-runnable-track{height:8px;background:#2a0707;border:1px solid #8d0000}
.volume-control input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-6px;background:#ff0000;border:3px solid #090000;box-shadow:3px 3px 0 #000}
.volume-control input::-moz-range-track{height:8px;background:#2a0707;border:1px solid #8d0000}
.volume-control input::-moz-range-thumb{width:16px;height:16px;background:#ff0000;border:3px solid #090000;box-shadow:3px 3px 0 #000}
.volume-control b{color:#e7d8ca;min-width:32px;text-align:right}
.custom-controls{align-items:center}
.control-copy{margin-left:auto;color:#855757;font:9px 'Courier New';letter-spacing:1px}

.playlist-title{position:relative;overflow:visible}
.playlist-box-sprite{position:absolute;left:-20px;top:-22px;width:340px;height:72px;object-fit:fill;opacity:.55;pointer-events:none;transform:rotate(1deg)}
.blocks-sprite{position:absolute;right:18px;top:-70px;width:145px;height:205px;object-fit:contain;opacity:.38;transform:rotate(4deg);pointer-events:none;mix-blend-mode:screen}
.manifesto-band{position:relative}

.arrow{position:absolute;pointer-events:none;z-index:8;object-fit:contain;filter:drop-shadow(5px 5px 0 #000);mix-blend-mode:screen}
.image-target{position:absolute;inset:0;pointer-events:none}
.image-target .side-photo{pointer-events:auto}
.arrow-left-1{width:145px;height:90px;left:18px;top:285px;transform:rotate(-18deg)}
.arrow-left-2{width:115px;height:165px;right:-8px;top:725px;transform:rotate(17deg)}
.arrow-right-1{width:135px;height:100px;left:-75px;top:1210px;transform:rotate(10deg)}
.arrow-lower{width:220px;height:120px;left:42%;top:6px;transform:rotate(-7deg);opacity:.9}

.rock-sticker{font-size:0;min-width:130px;min-height:150px;display:grid;place-items:center;padding:5px;top:48px}
.rock-sticker:before{content:'ROCK';font:bold 52px/.8 Impact,'Arial Black',sans-serif;color:#080000;letter-spacing:-2px;text-shadow:3px 3px 0 #ff1b1b;transform:rotate(-8deg)}
.rock-sticker span{display:none}
.rock-sticker br{display:none}

.phone-card{top:275px;width:174px;padding:8px;background:#0a0808;border-color:#a00000;box-shadow:8px 9px #000,0 0 0 2px #310000;transform:rotate(4deg)}
.phone-photo{width:100%;height:205px;overflow:hidden;background:#090909;border:2px solid #5d0000;display:flex;align-items:center;justify-content:center}
.phone-photo img{width:100%;height:100%;object-fit:contain;transform:rotate(0deg);filter:grayscale(.55) contrast(1.12) brightness(1.28) sepia(.08);mix-blend-mode:normal;opacity:.98}
.phone-photo:after{content:'OLD / SMALL / FLIP';position:absolute;bottom:31px;left:11px;color:#ff1b1b;background:#050000;padding:4px 5px;font:bold 7px 'Courier New';letter-spacing:1px;box-shadow:3px 3px #000}
.model-credit{font-size:7px}

/* cursor skull particles */
#skullTrail{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.mouse-skull{position:fixed;object-fit:contain;pointer-events:none;filter:drop-shadow(2px 2px 0 #000);animation:skull-fly .7s steps(7,end) forwards;opacity:0}
@keyframes skull-fly{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.35)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.15)}}

/* More broken frames and hand-drawn red interruptions */
.music-center:before{content:'';position:absolute;left:-16px;right:-20px;top:95px;height:12px;background:url('./images/sprites/wave.png') center/100% 100% no-repeat;opacity:.33;pointer-events:none;transform:rotate(-1deg)}
.player-poster:after{border-top:5px solid #ff0000!important;box-shadow:0 6px 0 #000,0 -4px 0 #4a0000}
.playlist-section:after{content:'';position:absolute;left:-35px;right:-35px;height:16px;top:18px;background:url('./images/sprites/wave.png') center/100% 100% no-repeat;opacity:.22;pointer-events:none;transform:rotate(1deg)}
.playlist-section{position:relative}
.lower-collage:after{content:'';position:absolute;right:-50px;bottom:45px;width:310px;height:125px;background:url('./images/sprites/box.png') center/100% 100% no-repeat;opacity:.22;transform:rotate(-6deg);pointer-events:none}

@media(max-width:1050px){.rock-hero{right:0;width:200px}.volume-control{min-width:210px}.volume-control input{width:140px}.phone-card{display:none}.hero-box-sprite{width:320px}.music-center:before{display:none}}
@media(max-width:650px){.rock-hero{position:relative;right:auto;top:auto;width:170px;height:90px;margin:-20px 0 -10px auto}.volume-control{width:100%;min-width:0;margin-left:0}.volume-control input{width:100px}.meta-row{flex-wrap:wrap}.control-copy{display:none}.hero-box-sprite{display:none}.playlist-box-sprite{display:none}}
/* Phone sits right at the top edge like a taped-in old web artifact. */
.phone-card{top:8px;right:-6px}
.rock-sticker{top:235px;right:-2px}


/* === 2000s WEB / AGED INTERNET PASS === */
.music-page{
  background-color:#090707;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,0,0,.012) 1px,transparent 1px),
    radial-gradient(circle at 50% 8%,rgba(105,0,0,.16),transparent 38%);
  background-size:4px 4px,6px 6px,100% 100%;
}
.music-page:before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);
  opacity:.48;mix-blend-mode:screen;
}
.music-page:after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9989;
  box-shadow:inset 0 0 0 2px #250000,inset 0 0 0 7px #080404,inset 0 0 90px rgba(0,0,0,.9);
}
.music-header{
  background:linear-gradient(#170707,#0a0505 48%,#130303);
  border-top:1px solid #7d1717;border-bottom:1px solid #3b0000;
  box-shadow:inset 0 1px 0 rgba(255,80,80,.14),0 8px 0 #030202;
}
.music-nav a{
  background:linear-gradient(#261010,#0b0505 48%,#1a0808)!important;
  border-color:#6e2020!important;
  box-shadow:inset 0 1px 0 rgba(255,120,120,.2),inset 0 -2px 0 #030202,4px 4px 0 #000!important;
  text-shadow:1px 1px 0 #000;
}
.music-nav a:hover,.music-nav a.active{
  background:linear-gradient(#ee2424,#9d0000 52%,#520000)!important;
  color:#fff!important;
  border-color:#ff5a5a!important;
  text-shadow:1px 1px #4b0000;
}
.top-scrap,.playlist-section,.now-grid,.manifesto-band,.lower-collage{
  background-image:linear-gradient(rgba(255,255,255,.012) 50%,transparent 50%);
  background-size:100% 3px;
}
.top-scrap:after{
  content:'LAST LOGIN // 2007.11.03 // CONNECTION: OK';
  position:absolute;right:12px;bottom:-18px;color:#633b3b;font:7px 'Courier New';letter-spacing:1px;
}
.top-scrap{position:relative}
.spray-word{
  filter:drop-shadow(0 1px 0 #fff);
  text-rendering:optimizeSpeed;
}
.hero-heading p:before{
  content:'[ PERSONAL WEB TERMINAL ]';color:#e00000;margin-right:18px;
}
.player-poster,.playlist-section,.manifesto-band{
  border-radius:0;
  box-shadow:12px 12px 0 #000,0 0 0 1px #1c0000,inset 0 1px 0 rgba(255,255,255,.05);
}
.player-poster:before{
  content:'ARCHIVE NODE 01';position:absolute;right:13px;top:8px;color:#6c4444;font:7px 'Courier New';letter-spacing:2px;
}
.song{
  background:linear-gradient(90deg,#100909,#090606 70%,#140606)!important;
  border-top:1px solid #261010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.song:hover{background:linear-gradient(90deg,#3b0505,#180404)!important}
.song.active{background:linear-gradient(90deg,#5b0808,#210303)!important}
.volume-control input::-webkit-slider-runnable-track{background:linear-gradient(#160606,#3a0a0a,#120404)}
.custom-controls button{
  background:linear-gradient(#5d1515,#210606 50%,#100303)!important;
  border-color:#8d2525!important;
  box-shadow:inset 0 1px 0 rgba(255,150,150,.22),3px 3px 0 #000!important;
}
.custom-controls button:hover{background:linear-gradient(#f02626,#850000)!important;color:#fff!important}
.phone-card{
  background:linear-gradient(#211010,#090707 65%,#160707)!important;
  border-color:#b52a2a!important;
  box-shadow:8px 9px 0 #000,0 0 0 2px #3d0000,inset 0 1px 0 rgba(255,120,120,.22)!important;
}
.phone-photo{
  background:#b9b2a8!important;
  border-color:#7c4a4a!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 0 0 1px #000;
}
.model-label,.model-credit{font-family:'Courier New',monospace;text-shadow:1px 1px #000}
.rock-sticker{
  background:linear-gradient(135deg,#ef1b1b,#990000 60%,#510000)!important;
  border-color:#230000!important;
  box-shadow:7px 7px 0 #000,inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.paper-note,.fake-sticker{
  background:linear-gradient(135deg,#d7cfc3,#aaa197)!important;
  border:1px solid #675d55;
  box-shadow:8px 9px 0 #000,inset 0 1px rgba(255,255,255,.45)!important;
}

/* MEMORY OF MEMORY — photocopied sleeves, marker ink, old hi-fi. */
.music-page {
  background-image: linear-gradient(#08070755, #08070799), url('./images/grunge-bg.jpg');
  background-size: cover;
  background-position: center top;
}
.music-page:after { box-shadow: inset 0 0 65px #0009; }
.paper-noise { opacity: .055; }
.music-header { border-bottom: 3px solid #b32220; }
.music-center { position: relative; }
.top-scrap {
  background: #ccc3b4;
  color: #282120;
  border: 0;
  border-left: 10px solid #d62925;
  box-shadow: 6px 6px #000;
  font-weight: bold;
}
.top-scrap:after { color: #af9690; }
.hero-heading { padding-top: 26px; padding-bottom: 38px; }
.spray-word { position: relative; z-index: 1; text-shadow: 4px 5px #ab1c1a, 10px 10px #000; }
.red-underline {
  height: 19px;
  background: #df2723;
  box-shadow: none;
  clip-path: polygon(0 35%, 19% 13%, 20% 32%, 56% 0, 54% 27%, 97% 5%, 100% 31%, 71% 64%, 91% 69%, 25% 89%, 7% 100%, 10% 70%, 0 81%);
}
.hero-heading p { color: #c9b8af; line-height: 1.8; letter-spacing: 1px; background: #080707; }
.hero-heading p:before { color: #eb6052; }
.hero-box-sprite { display: none; }
/* Oversized hand-drawn marks stay at the edges, away from controls and text. */
.ink-scrawl { position: absolute; pointer-events: none; z-index: 2; overflow: visible; }
.hero-scrawl { width: 148px; height: 100px; right: -30px; bottom: 10px; transform: rotate(-9deg); }
.player-scrawl { width: 110px; height: 180px; left: -57px; top: 150px; }
.playlist-scrawl { width: 155px; height: 80px; right: -28px; top: -43px; transform: rotate(6deg); }
.player-poster {
  border: 1px solid #64504a;
  border-top: 5px solid #211b19;
  background: repeating-linear-gradient(174deg, #ffffff03 0 1px, transparent 1px 7px), #141010;
  box-shadow: 11px 12px #000, -5px 5px #97221b;
  padding: 22px;
  transform: none;
  isolation: isolate;
}
.player-poster:before {
  inset: -10px 12px auto auto;
  width: 115px; height: 31px;
  content: '';
  border: 0;
  background: repeating-linear-gradient(2deg, #c5b99d99 0 2px, #a89c8199 2px 4px);
  clip-path: polygon(3% 0, 96% 4%, 93% 20%, 100% 30%, 96% 50%, 99% 75%, 95% 98%, 0 94%, 4% 69%, 0 52%, 5% 32%);
  transform: rotate(8deg);
  z-index: 3;
}
.player-poster:after {
  inset: auto -10px -15px 30%; height: 14px;
  border: 0 !important; box-shadow: none;
  background: #d32b24;
  clip-path: polygon(0 40%, 54% 0, 100% 22%, 98% 45%, 73% 49%, 88% 70%, 7% 100%, 12% 65%);
  transform: rotate(-2deg);
}
.poster-tape { background: #d2c9b9; padding: 8px 14px; letter-spacing: 1px; }
.now-grid { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 27px; padding: 30px 5px 25px; }
.cover-frame { width: 100%; height: auto; aspect-ratio: 1; border: 7px solid #c4bba9; box-shadow: 7px 9px #000, -3px 3px #a22722; }
.cover-frame:before { opacity: .3; }
.cover-stamp { background: #d42722; color: #f1dac8; }
.now-copy { min-width: 0; }
.now-copy h1 { font-size: clamp(29px, 3vw, 46px); line-height: .98; text-shadow: 3px 3px #711c19; overflow-wrap: anywhere; }
.now-copy h2 { font-size: 15px; color: #f16c5d; line-height: 1.25; }
.now-copy p { color: #b8a69e; line-height: 1.6; margin: 17px 0; }
.red-label { color: #ff8070; background: #260e0d; border-left-color: #de3329; }
.meta-row { flex-wrap: wrap; gap: 9px; border-top: 1px dashed #75504a; color: #c2a49a; line-height: 1.6; }
.meta-row #status { white-space: normal; }
#trackClock { font-variant-numeric: tabular-nums; }
.sc-player-shell { margin: 5px 0 0; padding: 10px; border: 1px solid #5b3b36; box-shadow: 4px 4px #000; background: #080707; }
.sc-label { color: #da8d7f; font-size: 9px; line-height: 1.5; }
.sc-player-shell iframe { height: 210px; }
/* Hardware transport: larger targets, real slider, engraved scale. */
.custom-controls {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 17px 14px; margin-top: 20px;
  border: 1px solid #655750; border-top: 2px solid #86786d;
  background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), linear-gradient(110deg, #302a28, #171413 55%, #282120);
  box-shadow: inset 0 0 0 3px #090807, 5px 5px #000;
}
.custom-controls .big-play {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 3px;
  color: #eee3d0; border: 1px solid #9a8072 !important;
  background: linear-gradient(#4e423b, #241d1a) !important;
  box-shadow: inset 0 1px #bda48b66, 0 3px #080605 !important;
}
.custom-controls .big-play { color: #ff7563; text-shadow: 0 0 9px #f2432b77; }
.custom-controls .big-play:hover { transform: none; }

.fake-meter { flex: 0 1 74px; gap: 2px; overflow: hidden; opacity: .75; }
.fake-meter i { flex: 0 0 3px; background: #c04232; }
.volume-control {
  display: grid; grid-template-columns: 1fr 45px; gap: 1px 12px;
  flex: 1 1 210px; min-width: 0; max-width: 360px; width: auto;
  margin-left: auto; padding: 0 3px;
  color: #c4b4a4; font: bold 9px 'Courier New', monospace; letter-spacing: 2px;
}
.volume-heading { grid-column: 1; display: flex; gap: 8px; align-items: center; }
.volume-heading svg { width: 14px; height: 14px; color: #e66a57; }
.volume-control b { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: center; color: #ff8068; min-width: 45px; padding: 9px 3px; background: #090605; border: 1px solid #5b3d30; border-radius: 2px; font-size: 12px; letter-spacing: 0; text-shadow: 0 0 8px #ff553a66; font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 4px #000; }
.volume-control input {
  --volume: 72%;
  grid-column: 1; grid-row: 2; display: block;
  appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; height: 30px; margin: 0;
  background: transparent; cursor: pointer; border: 0; border-radius: 0;
}
.volume-control input::-webkit-slider-runnable-track {
  height: 6px; border: 1px solid #080605; border-radius: 2px;
  background: linear-gradient(to right, #db4b38 0 var(--volume), #0b0807 var(--volume) 100%);
  box-shadow: 0 1px #766053, inset 0 1px 3px #0008;
}
.volume-control input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 25px; margin-top: -10px; border-radius: 2px;
  border: 1px solid #c1b1a0;
  background: linear-gradient(0deg, #756d64, #dfd7c9 42%, #31231c 43% 52%, #e4ddce 53%, #a69d90);
  box-shadow: 2px 3px 3px #000c;
}
.volume-control input::-moz-range-track { height: 5px; border: 1px solid #080605; border-radius: 2px; background: #0b0807; box-shadow: 0 1px #766053; }
.volume-control input::-moz-range-progress { height: 5px; background: #db4b38; }
.volume-control input::-moz-range-thumb { width: 13px; height: 23px; border: 1px solid #c1b1a0; border-radius: 2px; background: linear-gradient(0deg, #756d64, #dfd7c9 42%, #31231c 43% 52%, #e4ddce 53%, #a69d90); box-shadow: 2px 3px 3px #000c; }
.volume-scale { grid-column: 1; display: flex; justify-content: space-between; padding-top: 8px; color: #ae9c8c; font-size: 7px; letter-spacing: 1px; background: repeating-linear-gradient(90deg, #8f7b66 0 1px, transparent 1px 10%) left top / 100% 4px no-repeat; }
.player-warning { color: #b19b8c; line-height: 1.7; margin-top: 6px; }
.music-page :is(a, button, input):focus-visible { outline: 2px solid #e9cdb0; outline-offset: 5px; }
/* Photocopied paper interrupts the black/red rhythm. */
.manifesto-band {
  margin-top: 55px; color: #151110;
  background: repeating-linear-gradient(3deg, #00000004 0 1px, transparent 1px 4px), #c7bcaa;
  border: 0; border-left: 9px solid #b62a22;
  padding: 28px 22px; transform: rotate(-1deg);
}
.manifesto-band:before { content: ''; position: absolute; top: -15px; left: 26px; width: 100px; height: 30px; background: #050505; transform: rotate(-8deg); clip-path: polygon(0 7%, 95% 0, 100% 87%, 4% 100%, 6% 67%); }
.manifesto-copy span { color: #92291e; font-size: 10px; }
.manifesto-copy strong { font-size: clamp(25px, 3vw, 34px); line-height: 1; text-shadow: 1px 1px #897568; letter-spacing: -1px; }
.manifesto-copy p { color: #44352d; font-size: 12px; line-height: 1.6; }
.manifesto-stamp { color: #9a2821; border-color: #9a2821; box-shadow: none; font-size: 19px; transform: rotate(9deg); }
.blocks-sprite { opacity: .18; }
.playlist-section { margin-top: 55px; background: #100d0c; border: 1px solid #6e4d43; border-top: 5px solid #b82c23; box-shadow: 8px 9px #000; }
.playlist-section:after { display: none; }
.playlist-title { color: #e4cbbb; font-size: 18px; border-bottom: 1px dashed #83584a; align-items: center; }
.playlist-title b { color: #be9e8d; line-height: 1.6; }
.playlist-box-sprite { display: none; }
.song { grid-template-columns: 40px minmax(0, 1fr) 45px; column-gap: 10px; min-height: 70px; padding: 15px 12px; border-bottom: 1px dashed #563b32; }
.song strong { grid-column: 2; font-size: 15px; line-height: 1.3; }
.song em { grid-column: 2; color: #b19889; line-height: 1.6; }
.song b { grid-column: 3; color: #c4a390; }
.song.active { box-shadow: inset 4px 0 #e24936; }
.song.active span, .song.active strong, .song.active b { color: #ff8a6e; }
.song.active span:before { content: ''; }
.song:hover { transform: none; box-shadow: inset 4px 0 #e24936; }
.lower-collage { border-top: 4px solid #bd3025; background: #17100e; }
.lower-collage:before { content: ''; position: absolute; width: 115%; height: 35px; top: 61%; left: -5%; background: #020202; transform: rotate(-12deg); box-shadow: 0 8px #bc2c21; z-index: 1; pointer-events: none; clip-path: polygon(0 4%, 25% 12%, 58% 0, 100% 9%, 97% 82%, 67% 100%, 35% 81%, 0 95%); }
.lower-note, .fake-sticker { z-index: 2; }
.lower-note.red { color: #f06550; }
.scribble-2, .scribble-r { color: #ef5945; }
.music-footer { color: #b79b8b; line-height: 1.8; border-top-color: #8e3429; }
.music-footer span { color: #df6954; }
@media (max-width: 1150px) and (min-width: 1051px) {
  .scrapbook { grid-template-columns: 145px minmax(0, 1fr) 145px; gap: 20px; }
  .now-grid { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
  .fake-meter { display: none; }
}
@media (max-width: 650px) {
  .music-header, .scrapbook, .music-footer { max-width: calc(100% - 32px); width: auto; }
  .music-header { padding: 20px 10px 15px; gap: 24px; }
  .music-nav { gap: 5px; }
  .music-nav a { padding: 10px 9px; font-size: 9px; }
  .music-center { padding-top: 30px; }
  .top-scrap { letter-spacing: 1px; font-size: 8px; padding: 8px; }
  .hero-heading { padding-top: 32px; }
  .rock-hero { position: absolute; width: 115px; height: 70px; top: 14px; right: -7px; margin: 0; opacity: .7; }
  .spray-word { font-size: clamp(76px, 19vw, 112px); }
  .hero-heading p { font-size: 8px; padding: 7px; }
  .hero-heading p:before { display: block; }
  .hero-scrawl { width: 87px; right: -9px; bottom: 20px; opacity: .55; }
  .player-poster { padding: 16px 12px; }
  .poster-tape { font-size: 8px; padding: 8px; letter-spacing: .5px; }
  .now-grid { grid-template-columns: minmax(0, 1fr); padding: 28px 3px 22px; gap: 23px; }
  .cover-frame { width: min(220px, 85%); height: auto; margin: auto; }
  .now-copy h1 { font-size: 34px; }
  .player-scrawl { left: -23px; top: 130px; width: 62px; }
  .custom-controls { padding: 13px 10px; gap: 10px; }
  .fake-meter { flex: 1; }
  .volume-control { flex: 1 1 100%; max-width: none; margin: 6px 0 0; }
  .volume-control input { width: 100%; }
  .manifesto-band { grid-template-columns: 1fr; padding: 26px 19px; gap: 16px; }
  .manifesto-stamp { justify-self: end; font-size: 13px; padding: 8px 14px; }
  .blocks-sprite { right: 5px; }
  .playlist-section { padding: 10px 4px; }
  .playlist-title { font-size: 16px; }
  .playlist-scrawl { width: 110px; right: -8px; }
  .song { grid-template-columns: 24px minmax(0, 1fr) 35px; gap: 4px 6px; padding: 13px 8px; }
  .song strong { font-size: 13px; }
  .song b { grid-column: 3; font-size: 10px; }
  .lower-collage { height: 460px; }
  .lower-photo { width: 65%; height: 250px; left: 5%; top: 35px; }
  .lower-note { font-size: 18px; top: 185px; right: 6%; }
  .lower-note.red { top: 310px; right: 10%; font-size: 14px; }
  .fake-sticker { font-size: 20px; bottom: 22px; left: 9%; padding: 12px; }
  .music-footer { font-size: 8px; letter-spacing: 1px; }
  .music-footer span { float: none; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .music-page *, .music-page *:before, .music-page *:after { animation: none !important; transition: none !important; }
  #skullTrail { display: none; }
}
/* Pending playback is not a pause state. The symbol changes only on PLAY. */
.custom-controls .big-play.is-loading {
  color: #c3b29d;
  box-shadow: inset 0 0 0 2px #d6663d, 0 3px #080605 !important;
}

/* Present the supplied album artwork without a red stripe or colour filter. */
.cover-frame img { filter: none; }
.cover-frame::before { display: none; }