body{background:#b6a6d4;color:#251d34;font:14px/1.6 Arial,sans-serif;background-image:radial-gradient(#3c2a5145 .7px,transparent .7px);background-size:5px 5px}
main{max-width:1170px;margin:30px auto;padding:0 25px}
h1,h2,h3,p{margin:0}
.side-shell{background:#ad99ce;border:1px solid #302040;box-shadow:9px 10px #302040}
.side-header{display:flex;justify-content:space-between;gap:25px;padding:15px 25px;font:9px monospace;letter-spacing:.08em;border-bottom:1px solid}
.side-stage{min-height:540px;position:relative;overflow:hidden;padding:30px}
.side-stage h1{font:bold 190px/.67 Impact,'Arial Black',sans-serif;letter-spacing:-8px;transform:rotate(-9deg);position:absolute;right:40px;top:70px;color:#251d34}
.side-stage h1>span{font-size:300px;margin-left:45px;color:#ede6d7;text-shadow:6px 5px #251d34;-webkit-text-stroke:1px #251d34}
.side-sticker{position:absolute;right:40px;top:20px;border:2px solid #251d34;background:#e9dc71;font:11px/1.4 monospace;padding:14px 20px;transform:rotate(9deg);z-index:3}
.side-letter{background:#f0e8d5;color:#292034;border:1px solid #251d34;position:relative;width:390px;padding:35px 30px;transform:rotate(-3deg);box-shadow:6px 7px #251d34;z-index:2;top:20px}
.side-letter>span{font:9px monospace;letter-spacing:.1em}
.side-letter h2{font:bold 50px/.95 Arial,sans-serif;letter-spacing:-2px;margin:25px 0}
.side-letter p{font:13px/1.7 Georgia,serif}
.side-letter a{display:block;font:11px monospace;margin-top:25px;text-underline-offset:4px}
.side-orbit{position:absolute;bottom:55px;right:35px;display:flex;gap:15px;z-index:4}
.side-orbit a{border:1px solid #251d34;border-radius:50%;width:95px;height:95px;display:grid;place-content:center;text-align:center;text-decoration:none;font:12px/1.4 monospace;transform:rotate(10deg);background:#8f78b4;box-shadow:3px 3px #251d34}
.side-orbit a:nth-child(2){background:#e9dc71;transform:rotate(-8deg)}
.side-orbit a:nth-child(3){background:#f0e8d5;transform:rotate(3deg)}
.side-orbit a:hover{transform:rotate(0deg) translateY(-4px)}
.side-ticker{position:absolute;bottom:0;left:0;right:0;background:#251d34;color:#e5dbcb;padding:10px;font:10px monospace;letter-spacing:.15em;text-align:center}
.side-liner{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;padding:45px 40px;align-items:center;background:#8e74b0;border-top:1px solid}
.side-liner h2{font:bold 38px/.95 Arial;letter-spacing:-1.5px;margin-bottom:12px}
.side-liner aside>p{font:11px/1.6 monospace}
.side-tracklist{display:grid;gap:10px;margin:25px 0 15px}
.side-tracklist button{display:flex;align-items:center;gap:15px;width:100%;padding:15px 12px;border:1px solid;background:#ac99cb;font:11px monospace;text-align:left;box-shadow:3px 3px #251d34}
.side-tracklist button>b{font-weight:400;margin-left:auto;font-size:9px}
.side-tracklist button[aria-pressed=true]{background:#e9dc71;box-shadow:none;transform:translate(3px,3px)}
.side-liner aside>small{font:9px monospace}
.side-note{background:#f0e8d5;padding:30px 35px;min-height:320px;transform:rotate(3deg);border:1px solid;box-shadow:5px 5px #251d34}
.side-note article>span{font:9px monospace}
.side-note h3{font:italic 47px/.95 Georgia;letter-spacing:-2px;margin:20px 0}
.side-note p{font:14px/1.7 Georgia}
.side-note .hand-note{font:italic 21px/1.2 Georgia;transform:rotate(-6deg);margin-top:28px;color:#665780}
.side-pocket{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:30px;align-items:center;padding:50px 40px;border-top:1px solid}
.side-pocket h2{font:bold 38px/.95 Arial;letter-spacing:-1.5px}
.side-pocket p{font:14px/1.8 Georgia}
.side-pocket details{font:11px/1.7 monospace;margin-top:20px}
.side-pocket summary{cursor:pointer;text-decoration:underline}
.side-pocket details p{font-size:13px;margin-top:15px}
.side-ticket{padding:20px;background:#e9dc71;font:10px/1.8 monospace;border:2px dashed #251d34;transform:rotate(-6deg)}
.side-ticket b{display:block;font-size:18px}
.side-ticket small{font-size:7px}
.side-friends{background:#251d34;color:#d7c7ed;padding:22px 40px;font:11px/1.6 monospace;display:flex;flex-wrap:wrap;gap:20px}
.side-friends>span{color:#e9dc71;width:100%;font-size:9px}
.ring{border-bottom:1px solid;margin-top:25px}
.mock-note{font-size:9px}
@media(max-width:850px){.side-letter{width:330px;padding:30px 25px}
.side-letter h2{font-size:42px}
.side-stage h1{right:25px;font-size:160px}
.side-stage h1>span{font-size:260px}
.side-orbit a{width:75px;height:75px;font-size:10px}
.side-liner{gap:30px;padding:35px 25px}
.side-pocket{grid-template-columns:1fr 1fr}
.side-ticket{grid-column:2;width:fit-content}
}
@media(max-width:600px){main{padding:0 15px;margin-top:22px}
.side-header{padding:15px;font-size:7px;gap:15px}
.side-stage{padding:20px 18px;min-height:730px}
.side-stage h1{top:35px;right:25px;font-size:130px}
.side-stage h1>span{font-size:200px;margin-left:25px}
.side-sticker{right:15px;font-size:8px;padding:10px;top:15px}
.side-letter{width:calc(100% - 15px);top:230px;padding:25px 20px;box-shadow:4px 4px #251d34}
.side-letter h2{font-size:40px;margin:20px 0}
.side-letter p{font-size:13px}
.side-orbit{bottom:48px;right:20px;gap:12px}
.side-orbit a{width:68px;height:68px;font-size:9px}
.side-ticker{font-size:7px;line-height:1.6;letter-spacing:.05em;padding:8px}
.side-liner,.side-pocket{grid-template-columns:1fr;padding:35px 22px;gap:35px}
.side-note{padding:25px;min-height:300px}
.side-ticket{grid-column:1}
.side-friends{padding:22px;font-size:10px}
.side-liner h2{font-size:33px}
.side-tracklist button{font-size:10px;gap:8px}
}