*{margin:0;padding:0;box-sizing:border-box}
body{background:#030205;background-image:radial-gradient(circle at center,#2b0046 0%,#050308 75%);font-family:Georgia,serif;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;color:#f4eaff}
.item-interface{width:1200px;height:675px;display:grid;grid-template-columns:34% 40% 26%;position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(196,115,255,.35);background:radial-gradient(circle at 52% 50%,rgba(147,51,234,.28),transparent 46%),linear-gradient(135deg,rgba(8,5,12,.98),rgba(43,0,68,.9),rgba(5,3,8,.98));box-shadow:0 35px 120px rgba(0,0,0,.95),inset 0 0 110px rgba(0,0,0,.9)}
.item-interface::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 42%,rgba(6,6,8,.9) 100%);z-index:12;pointer-events:none}
.dot-overlay{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 15%,transparent 16%);background-size:6px 6px;z-index:2;pointer-events:none}
.corner{position:absolute;width:18px;height:18px;border:2px solid rgba(203,135,255,.45);z-index:13;pointer-events:none}
.top-left{top:25px;left:25px;border-right:none;border-bottom:none}.bottom-right{bottom:25px;right:25px;border-left:none;border-top:none}
.moving-bg-text{position:absolute;width:220%;top:45%;left:0;transform:translateY(-50%);font-size:8rem;font-weight:900;color:rgba(203,135,255,.035);letter-spacing:28px;white-space:nowrap;z-index:1;animation:moveText 35s linear infinite;pointer-events:none}
#particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none}
.left-panel{padding:34px 32px;display:flex;flex-direction:column;justify-content:space-between;z-index:5;background:linear-gradient(90deg,rgba(6,6,8,.98),rgba(63,0,95,.58),transparent)}
.item-header{font-size:.72rem;font-weight:900;color:#f1e7ff;letter-spacing:2px;text-transform:uppercase;border-left:3px solid #c084fc;padding-left:10px;line-height:1.5}
.item-header span,.item-header strong{display:block}.item-header strong{color:#9d7bbd;font-size:.62rem;margin-top:4px}
.jp-subtitle{display:block;color:#d8b4fe;font-size:.72rem;letter-spacing:5px;margin-bottom:6px}
.title-block h1{font-size:5.2rem;line-height:.85;color:white;text-shadow:1px 1px 0 #c084fc,3px 3px 0 #6b21a8,0 0 25px rgba(192,132,252,.45)}
.badge{display:inline-block;background:white;color:#0b0610;padding:5px 14px;font-size:.62rem;font-weight:bold;letter-spacing:2px;margin:10px 0 14px}
.quote-card,.traits-card{background:rgba(6,4,10,.74);border:1px solid rgba(203,135,255,.32);border-radius:14px;backdrop-filter:blur(10px);box-shadow:0 20px 45px rgba(0,0,0,.55)}
.quote-card{padding:13px;font-size:.82rem;line-height:1.52;color:#e8dff1}
.left-traits{padding:12px;max-height:250px}
.left-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;font-size:.58rem;color:#8b6aa3;letter-spacing:2px}
.left-footer strong{border:1px solid rgba(203,135,255,.35);padding:4px 10px;color:white}
.center-panel{position:relative;z-index:4;display:flex;align-items:center;justify-content:center}
.art-frame{width:94%;height:92%;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,rgba(90,0,130,.15),rgba(10,5,15,.38));border:1px solid rgba(255,255,255,.06)}
.art-frame::after{content:"";position:absolute;width:100%;height:2px;top:0;background:linear-gradient(90deg,transparent,rgba(203,135,255,.45),white,transparent);animation:scan 4s linear infinite}
.bg-kanji{position:absolute;top:-30px;left:-20px;font-size:15rem;color:rgba(255,255,255,.025);font-weight:900}
.tech-status{position:absolute;right:24px;top:20%;color:rgba(255,255,255,.35);font-size:.55rem;font-family:monospace;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tech-status div{height:2px;width:40px;background:#c084fc;animation:pulseBar 1.2s infinite ease-in-out}
.mp3-layer{position:absolute;width:132%;height:120%;left:-15%;bottom:-7%;z-index:10;pointer-events:none}
.mp3-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(0,0,0,.95)) drop-shadow(0 0 60px rgba(192,132,252,.42));animation:floatMp3 6s ease-in-out infinite}
.right-panel{z-index:15;padding:30px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(-90deg,rgba(6,6,8,.84),rgba(50,0,80,.25),transparent)}
.now-pill{align-self:flex-end;border:1px solid rgba(203,135,255,.4);border-radius:20px;padding:5px 18px;font-size:.65rem;letter-spacing:2px;font-weight:bold}
.player-card{display:flex;flex-direction:column;gap:12px;background:rgba(12,8,18,.82);border:1px solid rgba(170,110,255,.28);border-radius:16px;padding:14px;backdrop-filter:blur(12px);box-shadow:0 0 35px rgba(125,60,255,.15),inset 0 0 30px rgba(255,255,255,.02);height:auto}
.visual-screen{height:105px;border-radius:10px;border:1px solid rgba(203,135,255,.25);background:radial-gradient(circle,rgba(203,135,255,.25),transparent 55%),linear-gradient(135deg,rgba(40,0,65,.9),rgba(5,3,8,.95));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.screen-symbol{width:68px;height:68px;border-radius:50%;border:10px solid rgba(20,10,25,.9);display:flex;align-items:center;justify-content:center;color:#ead7ff;font-size:2rem;box-shadow:0 0 35px rgba(203,135,255,.45),inset 0 0 18px rgba(203,135,255,.3);animation:spin 8s linear infinite}
.screen-text{position:absolute;top:12px;left:14px;display:flex;flex-direction:column;gap:3px;z-index:4;max-width:72%}.screen-text strong{color:white;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase}.screen-text span{color:#c084fc;font-size:.58rem;letter-spacing:2px;text-transform:uppercase}
.equalizer{position:absolute;bottom:12px;display:flex;gap:4px}.equalizer span{width:5px;height:18px;background:#c084fc;animation:eq .8s infinite ease-in-out}.equalizer span:nth-child(2){animation-delay:.1s}.equalizer span:nth-child(3){animation-delay:.2s}.equalizer span:nth-child(4){animation-delay:.3s}.equalizer span:nth-child(5){animation-delay:.4s}.equalizer span:nth-child(6){animation-delay:.5s}.equalizer span:nth-child(7){animation-delay:.6s}
.song-info h2{margin-top:2px;font-size:.95rem;letter-spacing:2px;text-transform:uppercase;color:white}.song-info p{color:#a78bbd;font-size:.75rem;font-weight:bold;letter-spacing:2px;margin-top:3px}
.spotify-frame-box{width:100%;height:300px;margin-top:12px;overflow:hidden;border-radius:14px;border:1px solid rgba(185,120,255,.35);background:#09040f;position:relative;box-shadow:0 0 24px rgba(192,132,252,.18)}
.spotify-frame-box iframe{width:135%;height:420px!important;border:none;display:block;transform:scale(.74);transform-origin:top left;border-radius:14px}
.trait-toggle{width:100%;background:rgba(203,135,255,.08);border:1px solid rgba(203,135,255,.24);color:#c084fc;padding:10px;border-radius:8px;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.trait-toggle.active{background:rgba(203,135,255,.2);border-color:rgba(203,135,255,.55);color:white}
.trait-panel{max-height:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease;opacity:0}.trait-panel.open{max-height:95px;opacity:1;margin:8px 0 10px}
.trait-content{max-height:85px;overflow-y:auto;padding:10px;background:rgba(0,0,0,.22);border-left:2px solid rgba(203,135,255,.45);border-radius:6px}.trait-content p{font-size:.7rem;line-height:1.5;color:#e8dff1;margin-bottom:8px}.trait-content::-webkit-scrollbar{width:5px}.trait-content::-webkit-scrollbar-thumb{background:#c084fc;border-radius:10px}.trait-content::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.uses-box{border:1px solid rgba(203,135,255,.4);padding:8px;text-align:center;letter-spacing:2px;font-size:.68rem;color:white;margin-top:8px}
@keyframes moveText{to{transform:translate(-50%,-50%)}}@keyframes scan{0%{top:0;opacity:0}10%,90%{opacity:1}100%{top:100%;opacity:0}}@keyframes pulseBar{0%,100%{width:15px}50%{width:45px}}@keyframes floatMp3{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes eq{0%,100%{height:10px}50%{height:34px}}
@media(max-width:900px){body{overflow:auto;align-items:flex-start;padding:18px 0}.item-interface{width:94vw;height:auto;min-height:auto;grid-template-columns:1fr}.left-panel{gap:18px}.center-panel{min-height:520px}.right-panel{gap:14px}.mp3-layer{width:120%;height:110%;left:-10%;bottom:-4%}.title-block h1{font-size:4.4rem}}