@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root{--bg:#030512;--navy:#07112d;--blue:#294dff;--cyan:#79c9ff;--ice:#e6f4ff;--violet:#6a4bb8;--pink:#ee8fc8;--muted:#68719b}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:#e8edff;font-family:Manrope,Arial,sans-serif}
body{overflow:hidden}
button,input{font:inherit}
.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stars{position:fixed;inset:0;background:
radial-gradient(circle at 20% 20%,#263a7c18 0 1px,transparent 2px),
radial-gradient(circle at 75% 30%,#8b6dbf25 0 1px,transparent 2px),
radial-gradient(circle at 35% 75%,#4c98ff20 0 1px,transparent 2px),
radial-gradient(circle at 85% 80%,#fff12 0 1px,transparent 2px);
background-size:110px 130px,170px 180px,130px 160px,190px 210px;animation:stars 16s linear infinite}
@keyframes stars{to{background-position:110px 130px,-170px 180px,130px -160px,-190px 210px}}
.hidden{display:none!important}

.gate,.music-gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:
radial-gradient(circle at 50% 45%,#152e6b30,transparent 34%),linear-gradient(145deg,#05030b,#070a1d 55%,#090511)}
.gate-card,.music-card{width:min(430px,100%);position:relative;text-align:center;padding:46px 30px 34px;border:1px solid #7183c52e;border-radius:28px;background:#080918b8;backdrop-filter:blur(22px);box-shadow:0 30px 100px #0009,0 0 70px #162d7930}
.tiny{font:500 9px "DM Mono",monospace;letter-spacing:4px;color:#6273a9;direction:ltr}
.mark{position:absolute;top:18px;left:20px;font:500 9px "DM Mono";letter-spacing:3px;color:#59678f;direction:ltr}.mark span{color:var(--cyan);padding:0 4px}
.question-heart{font-size:46px;color:#4f65ff;text-shadow:0 0 30px #4365ffb8;margin:22px 0 12px;animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);text-shadow:0 0 55px #5b73ff}}
h1{margin:0;font-size:30px;line-height:1.45;font-weight:800}h1 span{color:#78c9ff}
.gate-card p,.music-card p{color:#737da6;font-size:12px;margin:12px 0 25px}
.actions{display:flex;gap:10px;justify-content:center}.actions button,.music-card button{border:0;border-radius:13px;padding:12px 30px;cursor:pointer;transition:.25s}
#yes{background:#e8f7ff;color:#071021;box-shadow:0 0 28px #68caff35}#no{background:#11152a;color:#7784ae;border:1px solid #64709b2b!important}
.actions button:hover,.music-card button:hover{transform:translateY(-2px)}
.hint{height:16px;margin-top:13px;font-size:10px;color:#8b94bb}

.music-card{padding-top:38px}.vinyl{width:92px;height:92px;margin:20px auto;border-radius:50%;background:repeating-radial-gradient(circle,#080812 0 4px,#19172b 5px 7px);box-shadow:0 0 45px #6370ff32;border:1px solid #7b87c83b;display:grid;place-items:center;animation:spin 5s linear infinite}
.vinyl:before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#202848;border:2px solid #a0cfff}.vinyl-dot{width:5px;height:5px;border-radius:50%;background:#d8efff;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}
.music-card h2{font-size:23px;margin:10px 0}.music-card input{width:100%;border:1px solid #6474aa38;background:#050714;color:#eef4ff;border-radius:12px;padding:14px 15px;text-align:center;outline:none}.music-card input:focus{border-color:#64bfff80;box-shadow:0 0 25px #2c75ff1b}.music-card button{margin-top:12px;width:100%;background:#dff4ff;color:#071020;font-weight:700}.music-note{color:#5b8dff;font-size:30px;margin-top:15px}

.experience{position:fixed;inset:0;min-height:100%;background:
radial-gradient(circle at 50% 47%,#193b9b27,transparent 22%),
radial-gradient(circle at 70% 40%,#632b7a14,transparent 28%),
linear-gradient(160deg,#03030a,#06091a 55%,#09030d);display:grid;place-items:center}
.topline{position:absolute;top:26px;left:50%;transform:translateX(-50%);font:500 8px "DM Mono";letter-spacing:4px;color:#65729b;direction:ltr}.topline span{color:#6dcfff;margin:0 7px}
.scene{width:min(88vw,560px);height:min(72vw,520px);position:relative;display:grid;place-items:center}
.aura{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:#275cff25;filter:blur(40px);animation:aura 3s ease-in-out infinite}@keyframes aura{50%{transform:scale(1.25);opacity:.65}}
.dark-heart{width:150px;height:150px;position:relative;transform:rotate(-45deg);z-index:5;filter:drop-shadow(0 0 24px #427aff88) drop-shadow(0 0 65px #5b3d9e44);animation:heartFloat 3.4s ease-in-out infinite}
.dark-heart:before,.dark-heart:after,.heart-core{content:"";position:absolute;background:linear-gradient(145deg,#101a50,#162c88 45%,#07122f 78%,#5b2472);border:1px solid #78baff55}
.dark-heart:before{width:100%;height:100%;border-radius:18px 0 18px 0}.dark-heart:after{width:100%;height:100%;border-radius:50%;top:-50%;left:0}.heart-core{width:100%;height:100%;border-radius:50%;top:0;left:50%}
.heart-shine{position:absolute;z-index:8;width:18px;height:60px;background:#bceaff;filter:blur(9px);opacity:.5;left:32%;top:18%;transform:rotate(45deg);border-radius:50%}
@keyframes heartFloat{50%{transform:rotate(-45deg) translateY(-11px) scale(1.04)}}
.orbit{position:absolute;border:1px solid #6baeff20;border-radius:50%;transform-style:preserve-3d;animation:orbit 10s linear infinite;z-index:4}.o1{width:92%;height:38%;transform:rotate(17deg)}.o2{width:73%;height:66%;transform:rotate(-30deg);animation-duration:14s;animation-direction:reverse}.o3{width:58%;height:86%;transform:rotate(67deg);animation-duration:18s}
.orbit span{position:absolute;font:500 8px "DM Mono";letter-spacing:2px;color:#82caff;text-shadow:0 0 12px #479bffb8;white-space:nowrap}.orbit span:nth-child(1){top:-6px;left:10%}.orbit span:nth-child(2){bottom:-6px;right:9%}
@keyframes orbit{to{transform:rotate(377deg)}}
.float-word{position:absolute;font:500 7px "DM Mono";letter-spacing:2px;color:#52658f;white-space:nowrap;opacity:.8}.fw1{top:12%;left:7%;animation:drift 5s ease-in-out infinite}.fw2{right:3%;top:28%;animation:drift 6s 1s ease-in-out infinite}.fw3{bottom:16%;left:9%;animation:drift 7s 2s ease-in-out infinite}.fw4{bottom:7%;right:7%;animation:drift 5.5s 1.5s ease-in-out infinite}@keyframes drift{50%{transform:translateY(-10px);opacity:1}}
.song-panel{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);width:min(330px,82vw);text-align:center;padding:13px 16px;border:1px solid #6878ad25;border-radius:17px;background:#060817a8;backdrop-filter:blur(12px)}.song-label{font:500 7px "DM Mono";letter-spacing:3px;color:#59688f;direction:ltr}.song-name{margin:7px 0 10px;font-size:12px;color:#d7eaff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play{border:1px solid #6fbfff45;background:#0b1530;color:#bce7ff;border-radius:9px;padding:8px 17px;font-size:10px;cursor:pointer}.player-status{font-size:8px;color:#52638c;margin-top:7px}.footer{position:absolute;bottom:25px;font:500 6px "DM Mono";letter-spacing:3px;color:#303c63;direction:ltr}

@media(max-width:600px){
  .scene{width:100vw;height:68vh}.dark-heart{width:122px;height:122px}.orbit span{font-size:6px;letter-spacing:1.5px}.fw1,.fw2,.fw3,.fw4{font-size:5.5px}.song-panel{bottom:60px}.topline{top:20px}
}

.experience{background:radial-gradient(circle at 50% 43%,#2849a52d,transparent 23%),radial-gradient(circle at 62% 56%,#e17ab91b,transparent 25%),radial-gradient(circle at 15% 85%,#163c9020,transparent 30%),linear-gradient(150deg,#02040e 0%,#07102a 48%,#100719 100%)}
.experience:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 31%,#03040c 76%);pointer-events:none}
.aura{background:radial-gradient(circle,#4f79ff35,#db7acb18 42%,transparent 70%);filter:blur(36px)}
.dark-heart{filter:drop-shadow(0 0 22px #5178ff9c) drop-shadow(0 0 60px #df72c844)}
.dark-heart:before,.dark-heart:after,.heart-core{background:linear-gradient(145deg,#111b55 0%,#233ca0 40%,#0b173f 70%,#7b376e 100%);border-color:#83caff5c}
.orbit{border-color:#8bb7ff26}.orbit span{color:#9fd7ff;text-shadow:0 0 12px #5b91ffb8}
.song-panel{border-color:#f19bdc24;background:linear-gradient(135deg,#07122ab8,#13091db8);box-shadow:0 15px 50px #0007,0 0 35px #e178c31a}
.song-name{color:#e6d9ff}.music-link{display:inline-block;border:1px solid #ed9bda45;background:#17132d;color:#ffc9eb;text-decoration:none;border-radius:10px;padding:8px 17px;font-size:10px;transition:.25s}.music-link:hover{transform:translateY(-2px);background:#211b3e}