@import"https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap";@import"https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap";h1,h2{color:#f5e6d0}p{color:#e8d5be}button{font-family:Abril Fatface,serif;font-weight:400;font-style:normal}.gapgutton{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:14px}.btn-player{position:relative;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(245,230,208,.15);color:#f5e6d0;cursor:pointer;padding:0;overflow:hidden;z-index:1}.btn-player svg{position:relative;z-index:2;transition:color .3s}.btn-fill{position:absolute;width:250%;height:250%;background:#f5e6d0;border-radius:50%;z-index:1;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%) scale(0)}.btn-prev,.btn-next{width:50px;height:50px;border-radius:50%}.btn-play{width:60px;height:60px;border-radius:50%;border-color:#f5e6d047}.popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;pointer-events:none}.popup-overlay.active{opacity:1;visibility:visible;pointer-events:all}.popup-panel{display:flex;position:relative;background:#161414;border:1px solid rgba(245,230,208,.06);border-radius:16px;max-width:680px;width:92%;max-height:85vh;overflow:hidden;opacity:0}.popup-visual{position:relative;flex:0 0 50%;min-height:340px;overflow:hidden}.popup-img{width:100%;height:100%;object-fit:cover;display:block}.popup-img-grain{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-conic-gradient(rgba(255,255,255,.01) 0% 25%,transparent 0% 50%) 0 0 / 3px 3px;pointer-events:none}.popup-content{position:relative;flex:1;padding:36px 30px;display:flex;flex-direction:column;justify-content:center}.popup-close{position:absolute;top:14px;right:14px;background:#00000080;border:1px solid rgba(245,230,208,.2);color:#f5e6d0;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .3s,background .3s;z-index:10;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.popup-close:hover{border-color:#f5e6d0;background:#000000b3}.popup-label{font-family:Special Gothic Expanded One,sans-serif;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:#f5e6d059;margin-bottom:6px}.popup-artist{color:#f5e6d0;font-family:Special Gothic Expanded One,sans-serif;font-size:1.6rem;margin:0 0 12px;line-height:1.1}.popup-divider{width:40px;height:1px;background:#f5e6d01f;margin-bottom:14px}.popup-album{color:#f5e6d0;font-family:Abril Fatface,serif;font-size:.95rem;margin:0 0 12px;opacity:.55;font-weight:400}.popup-desc{color:#f5e6d0;font-size:.82rem;line-height:1.65;margin:0 0 22px;opacity:.5;font-family:system-ui,sans-serif}.popup-listen-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(245,230,208,.15);color:#f5e6d0;padding:10px 22px;border-radius:30px;font-family:Special Gothic Expanded One,sans-serif;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s;align-self:flex-start}.popup-listen-btn:hover{background:#f5e6d0;color:#161414}.icon-cards__item{cursor:pointer}body{margin:0;padding:3% 10% 0;overflow-x:hidden;overflow-y:auto;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;flex-direction:column;position:relative;z-index:1;box-sizing:border-box}#quote{font-size:clamp(2rem,10rem,5vw);color:#dfdcff;text-align:center;line-height:1.2}button{padding:0;margin:0}@media (max-width: 600px){body{padding:4% 4% 140px;justify-content:center}.gapgutton{position:fixed;bottom:12px;left:0;right:0;gap:14px;margin-bottom:0;z-index:50;justify-content:center}.btn-prev,.btn-next{width:42px;height:42px}.btn-play{width:50px;height:50px}.btn-prev svg,.btn-next svg{width:16px;height:16px}.btn-play svg{width:20px;height:20px}.popup-panel{flex-direction:column;max-width:100%;width:100%;max-height:90vh;max-height:90dvh;overflow-y:auto;border-radius:16px 16px 0 0;margin-top:auto}.popup-overlay.active{align-items:flex-end}.popup-close{top:12px;right:12px;width:40px;height:40px}.popup-visual{flex:0 0 200px;min-height:200px}.popup-content{padding:20px 18px}.popup-artist{font-size:1.1rem}.popup-album{font-size:.8rem}.popup-desc{font-size:.75rem;margin-bottom:16px}.popup-listen-btn{font-size:.6rem;padding:8px 18px}}@media (max-width: 380px){body{padding:4% 3% 130px}.gapgutton{gap:10px}.btn-prev,.btn-next{width:38px;height:38px}.btn-play{width:44px;height:44px}.popup-visual{flex:0 0 140px;min-height:140px}.popup-content{padding:16px 14px}}@media (max-height: 500px) and (orientation: landscape){body{padding:2% 5%;justify-content:center}.gapgutton{margin-bottom:6px}}@media (min-width: 601px) and (max-width: 1024px){body{padding:3% 8% 0}.popup-panel{max-width:580px}}.add-track-btn{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:#f5e6d014;border:1px solid rgba(245,230,208,.15);color:#f5e6d0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;transition:background .3s,border-color .3s,transform .2s}.add-track-btn:hover{background:#f5e6d026;border-color:#f5e6d059;transform:scale(1.08)}.add-track-btn.disabled{cursor:not-allowed;opacity:.3;pointer-events:auto}.add-track-btn.disabled:hover{background:#f5e6d014;border-color:#f5e6d026;transform:none}.sound-wave{position:fixed;bottom:24px;left:24px;display:flex;align-items:flex-end;gap:2.5px;height:32px;z-index:100;opacity:0;transition:opacity .6s ease;pointer-events:none}.sound-wave.active{opacity:1}.sound-wave span{display:block;width:2.5px;background:#f5e6d059;border-radius:2px;animation:soundBar .8s ease-in-out infinite alternate}.sound-wave span:nth-child(1){height:6px;animation-delay:0s;animation-duration:.7s}.sound-wave span:nth-child(2){height:14px;animation-delay:.05s;animation-duration:.55s}.sound-wave span:nth-child(3){height:22px;animation-delay:.1s;animation-duration:.65s}.sound-wave span:nth-child(4){height:10px;animation-delay:.15s;animation-duration:.8s}.sound-wave span:nth-child(5){height:28px;animation-delay:.08s;animation-duration:.5s}.sound-wave span:nth-child(6){height:18px;animation-delay:.2s;animation-duration:.72s}.sound-wave span:nth-child(7){height:8px;animation-delay:.03s;animation-duration:.88s}.sound-wave span:nth-child(8){height:24px;animation-delay:.12s;animation-duration:.48s}.sound-wave span:nth-child(9){height:12px;animation-delay:.18s;animation-duration:.62s}.sound-wave span:nth-child(10){height:30px;animation-delay:.06s;animation-duration:.55s}.sound-wave span:nth-child(11){height:16px;animation-delay:.22s;animation-duration:.78s}.sound-wave span:nth-child(12){height:20px;animation-delay:.09s;animation-duration:.52s}.sound-wave span:nth-child(13){height:7px;animation-delay:.16s;animation-duration:.68s}.sound-wave span:nth-child(14){height:26px;animation-delay:.04s;animation-duration:.58s}.sound-wave span:nth-child(15){height:11px;animation-delay:.14s;animation-duration:.75s}@keyframes soundBar{0%{height:3px}to{height:100%}}.reactive-toggle{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:#f5e6d00a;border:1px solid rgba(245,230,208,.08);color:#f5e6d04d;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:100;transition:background .4s,color .4s,border-color .4s}.reactive-toggle:hover{background:#f5e6d014;color:#f5e6d08c;border-color:#f5e6d026}.reactive-toggle.active{background:#f5e6d01a;color:#f5e6d0;border-color:#f5e6d040}.reactive-toggle.active-soft{background:#f5e6d00f;color:#f5e6d099;border-color:#f5e6d02e}.reactive-indicator{position:fixed;top:20px;right:72px;font-family:Special Gothic Expanded One,sans-serif;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:#f5e6d0;background:#f5e6d00f;border:1px solid rgba(245,230,208,.1);border-radius:20px;padding:4px 12px;z-index:100;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s,transform .3s}.reactive-indicator.show{opacity:1;transform:translateY(0)}.add-track-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;pointer-events:none}.add-track-overlay.active{opacity:1;visibility:visible;pointer-events:all}.add-track-panel{position:relative;background:#161414;border:1px solid rgba(245,230,208,.06);border-radius:16px;max-width:480px;width:92%;padding:32px 28px;opacity:0}.add-track-title{color:#f5e6d0;font-family:Special Gothic Expanded One,sans-serif;font-size:1.1rem;margin:0 0 4px;letter-spacing:.05em}.add-track-subtitle{font-size:.6rem;color:#f5e6d04d;font-family:system-ui,sans-serif;letter-spacing:.05em;margin:0 0 22px}.add-track-dropzones{display:flex;gap:14px;margin-bottom:20px}.dropzone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 12px;border:1.5px dashed rgba(245,230,208,.15);border-radius:12px;cursor:pointer;transition:border-color .3s,background .3s;text-align:center;min-height:100px}.dropzone:hover,.dropzone.drag-over{border-color:#f5e6d073;background:#f5e6d008}.dropzone.has-file{border-color:#f5e6d04d;background:#f5e6d00a}.dropzone svg{color:#f5e6d04d;transition:color .3s}.dropzone:hover svg,.dropzone.drag-over svg{color:#f5e6d099}.dropzone-label{font-family:Special Gothic Expanded One,sans-serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#f5e6d066}.dropzone-sublabel{font-size:.55rem;color:#f5e6d033;font-family:system-ui,sans-serif}.dropzone-file{font-size:.6rem;color:#f5e6d0;font-family:system-ui,sans-serif;opacity:.7;word-break:break-all;max-width:100%}.add-track-field{margin-bottom:20px}.add-track-field label{display:block;font-family:Special Gothic Expanded One,sans-serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#f5e6d066;margin-bottom:6px}.add-track-field input{width:100%;background:#f5e6d00a;border:1px solid rgba(245,230,208,.12);border-radius:8px;padding:10px 14px;color:#f5e6d0;font-family:Abril Fatface,serif;font-size:.9rem;outline:none;transition:border-color .3s;box-sizing:border-box}.add-track-field input::placeholder{color:#f5e6d033}.add-track-field input:focus{border-color:#f5e6d059}.api-lookup-status{display:block;margin-top:6px;font-family:system-ui,sans-serif;font-size:.65rem;letter-spacing:.02em;min-height:1.2em;transition:color .3s,opacity .3s;opacity:0}.api-lookup-status.searching{color:#f5e6d080;opacity:1;animation:lookupPulse 1.2s ease-in-out infinite}.api-lookup-status.found{color:#8bc34a;opacity:1}.api-lookup-status.not-found{color:#f5e6d059;opacity:1}@keyframes lookupPulse{0%,to{opacity:.5}50%{opacity:1}}.add-track-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.add-track-error{font-size:.7rem;color:#f77e7e;font-family:system-ui,sans-serif;flex:1}.add-track-submit{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(245,230,208,.15);color:#f5e6d0;padding:10px 22px;border-radius:30px;font-family:Special Gothic Expanded One,sans-serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s}.add-track-submit:hover:not(:disabled){background:#f5e6d0;color:#161414}.add-track-submit:disabled{opacity:.3;cursor:not-allowed}@media (max-width: 600px){.add-track-btn{bottom:16px;right:16px;width:42px;height:42px}.sound-wave{display:none}.add-track-panel{width:100%;max-width:100%;border-radius:16px 16px 0 0;margin-top:auto;padding:24px 18px}.add-track-overlay.active{align-items:flex-end}.add-track-dropzones{flex-direction:column}}.grain-overlay{position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;width:140%;height:140%;z-index:999;pointer-events:none;animation:grain-drift .4s steps(3) infinite}.grain-fine{filter:url(#grain-fine);opacity:.25;mix-blend-mode:screen}.grain-coarse{filter:url(#grain-coarse);opacity:.08;mix-blend-mode:screen;animation-direction:reverse;animation-duration:.3s}@keyframes grain-drift{0%{transform:translate(0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,-3%)}80%{transform:translate(4%,2%)}to{transform:translate(-1%,-1%)}}.vignette-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6) 100%)}.lava-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;filter:url(#goo) blur(40px)}.lava-blob{position:absolute;top:50%;left:50%;border-radius:50%;opacity:0;will-change:transform,opacity;transform:translate(-50%,-50%)}img{border-radius:7px}h1,h2{font-family:Special Gothic Expanded One,sans-serif;font-style:normal}h1{font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:.05em;opacity:.6;margin:0 0 10px;text-align:center}#track-title{font-size:clamp(1.6rem,5vw,2.8rem);text-align:center;margin:8px 0 16px;min-height:3rem}.drag-hint{display:none;text-align:center;font-family:inherit;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#f5e6d059;margin:-4px 0 10px}.icon-cards{position:relative;width:80vw;height:50vw;max-width:600px;max-height:420px;margin:0 auto;color:#fff;perspective:1200px;transform-origin:center}.icon-cards__content{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform-origin:center;transform:translateZ(-38vw) rotateY(0)}.icon-cards__item{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:24vw;height:24vw;max-width:280px;max-height:280px;box-shadow:0 8px 30px #00000040;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon-cards__item img{width:100%;height:100%;object-fit:cover;border-radius:10px;-webkit-user-select:none;user-select:none}.icon-cards__item:nth-child(1){transform:rotateY(0) translateZ(38vw)}.icon-cards__item:nth-child(2){transform:rotateY(60deg) translateZ(38vw)}.icon-cards__item:nth-child(3){transform:rotateY(120deg) translateZ(38vw)}.icon-cards__item:nth-child(4){transform:rotateY(180deg) translateZ(38vw)}.icon-cards__item:nth-child(5){transform:rotateY(240deg) translateZ(38vw)}.icon-cards__item:nth-child(6){transform:rotateY(300deg) translateZ(38vw)}html,body{height:100%;background-color:#030303;background-image:radial-gradient(ellipse at 50% 40%,rgba(12,10,8,.2) 0%,transparent 70%),linear-gradient(180deg,#030303,#020202)}.paper-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}@media (max-width: 600px){.icon-cards{width:55vw;height:130vw;max-width:none;max-height:none;perspective:650px}.icon-cards__content{transform:translateZ(-50vw) rotateX(0)}.icon-cards__item{width:38vw;height:38vw;max-width:none;max-height:none}.icon-cards__item:nth-child(1){transform:rotateX(0) translateZ(50vw)}.icon-cards__item:nth-child(2){transform:rotateX(-60deg) translateZ(50vw)}.icon-cards__item:nth-child(3){transform:rotateX(-120deg) translateZ(50vw)}.icon-cards__item:nth-child(4){transform:rotateX(-180deg) translateZ(50vw)}.icon-cards__item:nth-child(5){transform:rotateX(-240deg) translateZ(50vw)}.icon-cards__item:nth-child(6){transform:rotateX(-300deg) translateZ(50vw)}.drag-hint{display:block;position:fixed;bottom:66px;left:0;right:0;margin:0;z-index:50}h1{font-size:clamp(.75rem,3.5vw,1.1rem);margin:0 0 4px}#track-title{position:fixed;bottom:86px;left:0;right:0;font-size:clamp(1rem,5.5vw,1.5rem);min-height:auto;margin:0;z-index:50}.lava-bg{filter:blur(30px)}.lava-blob{filter:blur(20px)}}@media (max-width: 380px){.icon-cards{width:50vw;height:115vw}.icon-cards__item{width:34vw;height:34vw}h1{font-size:.7rem}#track-title{font-size:clamp(.9rem,5vw,1.3rem);min-height:1.5rem}}@media (max-height: 500px) and (orientation: landscape){.icon-cards{width:50vw;height:30vh;perspective:500px}.icon-cards__content{transform:translateZ(-22vw) rotateY(0)}.icon-cards__item{width:16vw;height:16vw}.icon-cards__item:nth-child(1){transform:rotateY(0) translateZ(22vw)}.icon-cards__item:nth-child(2){transform:rotateY(60deg) translateZ(22vw)}.icon-cards__item:nth-child(3){transform:rotateY(120deg) translateZ(22vw)}.icon-cards__item:nth-child(4){transform:rotateY(180deg) translateZ(22vw)}.icon-cards__item:nth-child(5){transform:rotateY(240deg) translateZ(22vw)}.icon-cards__item:nth-child(6){transform:rotateY(300deg) translateZ(22vw)}h1{margin:0 0 2px}#track-title{margin:2px 0 4px;min-height:1.5rem}}@media (min-width: 601px) and (max-width: 1024px){.icon-cards{width:70vw;max-width:520px}.icon-cards__item{width:20vw;height:20vw;max-width:220px;max-height:220px}}.checkbox{position:relative;margin-top:2rem;font-size:.9rem;font-weight:700;text-transform:uppercase;color:#f47956;transition:color .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.checkbox:hover{color:#f7a95a}.checkbox__checkbox{position:relative;top:0;width:1.0625rem;height:1.0625rem;background:#fff;border:1px solid currentColor;border-radius:4px;vertical-align:middle;transition:background .1s ease;cursor:pointer}.checkbox__checkbox:after{content:"";position:absolute;top:1px;left:5px;width:5px;height:11px;opacity:0;transform:rotate(45deg) scale(0);border-right:2px solid #fff;border-bottom:2px solid #fff;transition:all .3s ease;transition-delay:.15s}.checkbox__label{margin-left:5px;vertical-align:middle;cursor:pointer}.checkbox>input:checked~.checkbox__checkbox{border-color:transparent;background:#f47956;animation:jelly .6s ease}.checkbox>input:checked~.checkbox__checkbox:after{opacity:1;transform:rotate(45deg) scale(1)}.split-parent{overflow:hidden}@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scale(1)}}