.page-shell{max-width:1100px;margin:0 auto;padding:25px 12px}.music-shell{max-width:1100px}.music-title{text-align:center;margin-bottom:15px}.canvas-demo-wrap{text-align:center;margin:10px 0 15px}.canvas-demo-player{width:100%;max-width:200px;height:auto;border:2px solid #00ffcc;border-radius:8px;background:#000;box-shadow:0 0 15px #0fc3}.instruction-box{background:#0a0a0af2;border:2px solid #ff0055;border-radius:8px;padding:15px 12px;margin-bottom:20px;box-shadow:0 0 20px #ff005540;text-align:center}.instruction-title{font-family:"Press Start 2P",monospace!important;font-size:10px!important;color:#0fc;margin-bottom:6px;letter-spacing:1px}.instruction-subtitle{font-family:VT323,monospace!important;font-size:1.15rem!important;color:#aaa;margin-bottom:12px!important}.guide-card{background:#000000d9;border-radius:6px;padding:12px 15px;max-width:680px;min-height:70px;margin:0 auto;text-align:left;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.guide-card.desktop-card{border:1px solid rgba(0,255,204,.5);box-shadow:0 0 15px #00ffcc26}.guide-card.mobile-card{border:1px solid rgba(255,0,85,.5);box-shadow:0 0 15px #ff005526}.guide-card h4{font-family:"Press Start 2P",monospace!important;font-size:1rem!important;margin-bottom:8px;display:flex;align-items:center;gap:8px}.desktop-card h4{color:#0fc}.mobile-card h4{color:#f05}.single-instruction-container{position:relative;min-height:35px;display:flex;align-items:center}.single-instruction{display:none;width:100%;grid-template-columns:180px 1fr;align-items:center;gap:12px;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}.single-instruction.active-step{display:grid;opacity:1;transform:translateY(0)}.single-instruction .key-col{display:flex;align-items:center}.single-instruction .key{font-family:"Press Start 2P",monospace!important;font-size:7px!important;padding:5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;line-height:1!important}.desktop-card .key{background:#00ffcc26;border:1px solid #00ffcc;color:#0fc}.mobile-card .key{background:#ff005526;border:1px solid #ff0055;color:#f05}.single-instruction .desc-col{font-family:VT323,monospace!important;font-size:1.2rem!important;color:#fff;line-height:1.2!important}.guide-desktop{display:flex!important}.guide-mobile{display:none!important}.carousel-section-title{font-family:Courier Prime,monospace!important;font-size:1rem!important;color:#f05;margin:25px 0 12px;display:flex;align-items:center;gap:10px}.title-accent{color:#0fc}.album-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:15px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#00ffcc #000}.album-carousel::-webkit-scrollbar{height:6px}.album-carousel::-webkit-scrollbar-track{background:#000}.album-carousel::-webkit-scrollbar-thumb{background:#0fc;border-radius:3px}.album-card{flex:0 0 280px;scroll-snap-align:center;background:#0a0a0aeb;border:2px solid rgba(0,255,204,.35);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease;box-shadow:0 0 12px #0009;user-select:none}.album-card:hover{border-color:#0fc;box-shadow:0 0 18px #00ffcc4d;transform:translateY(-2px)}.album-cover-box{position:relative;width:100%;padding-top:100%;background:#050505;overflow:hidden;border-bottom:1px solid rgba(0,255,204,.3)}.album-cover-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.album-cover-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:Courier Prime,monospace;font-size:4rem;color:#f05;background:radial-gradient(circle,#1a000a,#000 80%);text-shadow:0 0 15px rgba(255,0,85,.6)}.album-year-badge{position:absolute;top:8px;right:8px;background:#000000d9;border:1px solid #ff0055;color:#f05;font-family:"Press Start 2P",monospace!important;font-size:8px!important;padding:4px 6px;border-radius:4px;box-shadow:0 0 8px #f056}.album-details{padding:12px 14px;display:flex;flex-direction:column}.album-header-row{display:flex;justify-content:space-between;align-items:center}.album-title{font-family:Courier Prime,monospace!important;font-size:1rem!important;color:#0fc;line-height:1.2;margin:0}.toggle-icon{color:#f05;font-size:11px;transition:transform .25s ease}.album-card.open .toggle-icon{transform:rotate(180deg);color:#0fc}.album-tracklist-wrapper{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(0,1,0,1),opacity .3s ease;opacity:0;margin-top:0}.album-card.open .album-tracklist-wrapper{max-height:500px;opacity:1;margin-top:10px;border-top:1px dashed rgba(0,255,204,.3);padding-top:8px}.album-tracklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}.album-track-item{font-family:Courier Prime,monospace!important;font-size:1rem!important;color:#ddd;padding:6px 10px;border-radius:4px;background:#ffffff08;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s ease}.album-track-item span{display:flex;align-items:center;font-size:1.1rem!important}.track-icon{font-size:8px;margin-right:6px;color:#0fc}.lock-icon{color:#f05}.track-badge{font-size:7px;padding:2px 5px}.upcoming-track-item{opacity:.6;cursor:not-allowed;border-style:dashed}.album-card-upcoming{border-color:#f056}.album-title-upcoming{color:#f05}.album-track-item:hover{border-color:#0fc;color:#0fc;background:#00ffcc1a}.album-track-item.playing{border-color:#f05!important;color:#f05!important;background:#ff005526!important}@media(max-width:768px){.guide-desktop{display:none!important}.guide-mobile{display:flex!important}.album-track-item,.album-track-item span{font-size:1rem!important;padding:5px 8px}.single-instruction{display:none;flex-direction:column;align-items:center;text-align:center;gap:5px}.single-instruction.active-step{display:flex}.single-instruction .key-col{justify-content:center}.single-instruction .key{font-size:6px!important;padding:4px 6px}.single-instruction .desc-col{font-size:1.1rem!important;line-height:1.1!important;text-align:center}}
