:root{
  color-scheme:dark;
  --bg:#02060a;
  --panel:rgba(7,15,23,.86);
  --panel-strong:rgba(4,10,16,.96);
  --line:rgba(173,220,247,.14);
  --line-strong:rgba(150,220,255,.42);
  --text:#f5fbff;
  --muted:#91a4b4;
  --ice:#dff5ff;
  --blue:#75cfff;
  --glow:rgba(82,184,241,.32);
  --radius:30px;
  --shadow:0 32px 100px rgba(0,0,0,.56);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body{overflow-x:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,rgba(2,6,10,.18),rgba(2,6,10,.9) 68%,#02060a),url("andrik-cosmic-eye-official-website.webp") center 20%/cover no-repeat;filter:saturate(.78) brightness(.52)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(68,174,232,.18),transparent 32rem),radial-gradient(circle at 80% 72%,rgba(77,139,180,.12),transparent 34rem),linear-gradient(90deg,rgba(2,6,10,.78),transparent 28% 72%,rgba(2,6,10,.78))}
button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}svg{display:block}
.app{width:min(1180px,calc(100% - 34px));margin:0 auto;padding:16px 0 56px}

.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:64px;margin-bottom:14px}
.brand{display:inline-flex;align-items:center;gap:13px;width:max-content}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 26px rgba(89,188,241,.34)}
.brand-copy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.06rem;letter-spacing:.19em}
.brand-copy span{display:block;margin-top:3px;color:var(--muted);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.page-label{justify-self:center;text-align:center}.page-label span{display:block;color:#bfe9ff;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}.page-label h1{margin:3px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,3vw,2.05rem);letter-spacing:.07em}
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.icon-link,.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:rgba(6,13,20,.7);backdrop-filter:blur(14px);cursor:pointer;transition:transform .24s ease,border-color .24s ease,background .24s ease}
.icon-link:hover,.icon-button:hover{transform:translateY(-2px);border-color:var(--line-strong);background:rgba(14,29,42,.9)}
.icon-link svg,.icon-button svg{width:19px;height:19px;fill:currentColor}

.player-shell{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr);min-height:620px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(10,21,31,.9),rgba(3,8,13,.96));box-shadow:var(--shadow);backdrop-filter:blur(24px)}
.visual-side{position:relative;min-height:620px;overflow:hidden;background:#03080d}
.visual-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(32px) brightness(.38) saturate(1.15);transform:scale(1.06);opacity:.82;transition:opacity .4s ease}
.visual-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,11,.12),rgba(2,7,11,.34) 45%,rgba(2,7,11,.9)),linear-gradient(90deg,transparent 58%,rgba(2,7,11,.48))}
.media-frame{position:relative;z-index:2;display:grid;place-items:center;width:100%;padding-top:42px}
.cover-wrap,.youtube-stage{width:min(78%,430px);border-radius:26px;overflow:hidden;border:1px solid rgba(210,242,255,.22);background:#071018;box-shadow:0 30px 80px rgba(0,0,0,.66),0 0 42px rgba(84,186,239,.16);transition:opacity .35s ease,transform .45s ease,visibility .35s ease}
.cover-wrap{aspect-ratio:1/1}.cover-wrap::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 0 -60px 90px rgba(0,0,0,.2);pointer-events:none}.cover-wrap{position:relative}
.cover-art{width:100%;height:100%;object-fit:cover;transition:opacity .32s ease,transform .52s ease}.cover-art.changing{opacity:.2;transform:scale(.985)}
.youtube-stage{position:absolute;top:42px;left:50%;transform:translateX(-50%);aspect-ratio:16/9;opacity:0;visibility:hidden;pointer-events:none;background:center/cover no-repeat #020508}
.youtube-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.youtube-stage iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.video-mode .cover-wrap{opacity:0;visibility:hidden;transform:scale(.965)}
.video-mode .youtube-stage{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.playing .cover-wrap,.playing .youtube-stage{box-shadow:0 34px 90px rgba(0,0,0,.7),0 0 54px rgba(84,186,239,.26)}

.nowplaying-mini{position:relative;z-index:2;width:min(78%,430px);margin:18px auto 0;padding-bottom:94px}
.nowplaying-mini span{display:block;color:#bdeaff;font-size:.62rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.nowplaying-badge{display:inline-flex!important;width:max-content;margin:0 0 6px!important;padding:5px 8px;border:1px solid rgba(182,226,248,.18);border-radius:999px;background:rgba(4,11,17,.56);color:#bce8ff!important;font-size:.53rem!important;letter-spacing:.15em!important}
.nowplaying-mini strong{display:block;margin-top:6px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.28rem,3vw,2.1rem);line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowplaying-mini small{display:block;margin-top:7px;color:#b2bec8;font-size:.79rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.visualizer{--eq-a:#4eaee1;--eq-b:#dcf5ff;--eq-shadow:rgba(94,198,249,.42);position:absolute;z-index:4;left:8%;right:8%;bottom:18px;height:68px;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(2px,.55vw,5px);opacity:.94;transition:filter .45s ease,transform .45s ease}
.bar{flex:1;max-width:9px;min-width:3px;height:12%;border-radius:999px 999px 2px 2px;background:linear-gradient(to top,var(--eq-a),var(--eq-b));transform-origin:bottom;opacity:.58;filter:drop-shadow(0 0 6px var(--eq-shadow));transition:height 105ms linear,opacity 105ms linear,background .7s ease,border-radius .7s ease,transform .7s ease,clip-path .7s ease}
.viz-theme-1{--eq-a:#4eaee1;--eq-b:#e4f8ff;--eq-shadow:rgba(94,198,249,.48)}
.viz-theme-2{--eq-a:#6f5cff;--eq-b:#e3dcff;--eq-shadow:rgba(143,112,255,.52)}.viz-theme-2 .bar{border-radius:999px}
.viz-theme-3{--eq-a:#9a6b19;--eq-b:#ffe7a8;--eq-shadow:rgba(255,199,83,.44)}.viz-theme-3 .bar{border-radius:2px;clip-path:polygon(50% 0,100% 14%,100% 100%,0 100%,0 14%)}
.viz-theme-4{--eq-a:#891c2b;--eq-b:#ffadb9;--eq-shadow:rgba(255,83,112,.5)}.viz-theme-4 .bar{max-width:5px;border-radius:1px}
.viz-theme-5{--eq-a:#14715e;--eq-b:#9fffe0;--eq-shadow:rgba(67,255,198,.38)}.viz-theme-5 .bar{border-radius:999px;transform:scaleX(.72)}
.viz-theme-6{--eq-a:#246699;--eq-b:#bcecff;--eq-shadow:rgba(103,211,255,.42)}.viz-theme-6 .bar:nth-child(odd){transform:scaleY(.78)}
.viz-theme-7{--eq-a:#6047a8;--eq-b:#ffb9f0;--eq-shadow:rgba(255,117,222,.42)}.viz-theme-7 .bar{border-radius:3px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.viz-theme-8{--eq-a:#5d6670;--eq-b:#ffffff;--eq-shadow:rgba(255,255,255,.38)}.viz-theme-8 .bar{border-radius:0;transform:skewX(-7deg)}
.viz-theme-9{--eq-a:#006e91;--eq-b:#58f4ff;--eq-shadow:rgba(44,232,255,.5)}.viz-theme-9 .bar{border-radius:50% 50% 4px 4px}
.viz-theme-10{--eq-a:#183d73;--eq-b:#9fc5ff;--eq-shadow:rgba(95,154,255,.45)}.viz-theme-10 .bar:nth-child(3n){transform:scaleX(1.3)}

.control-side{display:flex;flex-direction:column;justify-content:center;padding:44px clamp(28px,5vw,62px)}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}
.status-chip{display:inline-flex;align-items:center;gap:9px;color:#b8c8d4;font-size:.74rem;font-weight:760;letter-spacing:.05em}.status-dot{width:8px;height:8px;border-radius:50%;background:#63717c}.playing .status-dot{background:#7fd4ff;box-shadow:0 0 16px #70cfff}.playlist-position{color:#91a5b4;font-size:.73rem;font-weight:750;letter-spacing:.08em}
.player-eyeline{display:block;color:#bde9ff;font-size:.64rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-title{margin:9px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,5vw,4.5rem);line-height:.94;letter-spacing:-.025em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-mode .track-title{font-size:clamp(1.9rem,4.2vw,3.25rem)}
.track-author{margin:11px 0 0;color:#a9bac7;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-area{margin-top:34px}.progress{width:100%;height:4px;appearance:none;border-radius:999px;background:linear-gradient(to right,#a7ddf8 0 var(--value,0%),rgba(185,219,238,.15) var(--value,0%) 100%);cursor:pointer}.progress::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#e8f9ff;box-shadow:0 0 0 5px rgba(113,202,247,.13),0 0 18px rgba(112,203,250,.4)}.progress::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#e8f9ff;box-shadow:0 0 0 5px rgba(113,202,247,.13),0 0 18px rgba(112,203,250,.4)}
.time-row{display:flex;justify-content:space-between;margin-top:9px;color:#7f93a2;font-size:.7rem;font-variant-numeric:tabular-nums}
.transport{display:grid;grid-template-columns:48px 56px 84px 56px 48px;align-items:center;justify-content:center;gap:10px;margin-top:28px}.ctrl{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(12,24,35,.78);cursor:pointer;transition:transform .18s ease,border-color .2s ease,background .2s ease,opacity .2s ease}.ctrl:hover{border-color:var(--line-strong);background:rgba(22,44,62,.85)}.ctrl:active{transform:scale(.94)}.ctrl svg{width:20px;height:20px;fill:currentColor}.ctrl.secondary{width:42px;height:42px}.ctrl.primary{width:78px;height:78px;border:0;background:linear-gradient(145deg,#f0fbff,#7ccff7);color:#041119;box-shadow:0 0 0 8px rgba(111,201,245,.07),0 0 38px rgba(87,188,239,.3)}.ctrl.primary svg{width:29px;height:29px}.ctrl.active{border-color:rgba(142,219,255,.66);background:rgba(72,153,197,.2);color:#dff7ff;box-shadow:0 0 24px rgba(79,181,234,.16)}.ctrl.favorite-on{color:#ffabc4;border-color:rgba(255,154,188,.5);background:rgba(105,24,52,.24)}.ctrl[disabled]{opacity:.28;cursor:not-allowed;filter:grayscale(.7)}
.collection-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.collection-meta strong{display:block;font-size:.84rem}.collection-meta span{display:block;margin-top:4px;color:#8195a4;font-size:.72rem}.open-youtube{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(12,25,36,.72);font-size:.75rem;font-weight:800;transition:border-color .2s ease,transform .2s ease}.open-youtube:hover{border-color:var(--line-strong);transform:translateY(-2px)}.open-youtube svg{width:17px;height:17px;fill:currentColor}.error{display:none!important}.scroll-cue{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;min-height:42px;border-top:1px solid var(--line);padding-top:12px;color:#bdeaff;font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;transition:color .2s ease,transform .2s ease}.scroll-cue:hover{color:#e8f8ff;transform:translateY(2px)}.scroll-cue svg{width:18px;height:18px;fill:currentColor;animation:scrollCueBounce 1.7s ease-in-out infinite}@keyframes scrollCueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.library{margin-top:30px}.library-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.eyeline{display:block;color:#bce8ff;font-size:.66rem;font-weight:850;letter-spacing:.22em;text-transform:uppercase}.library-head h2{margin:6px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,4vw,2.8rem);line-height:1}.library-head p{max-width:500px;margin:0;color:var(--muted);text-align:right;font-size:.84rem}
.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.collection-card{position:relative;min-height:190px;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:16px;text-align:left;background:var(--panel);box-shadow:0 15px 44px rgba(0,0,0,.27);cursor:pointer;isolation:isolate;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.collection-card::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--cover);background-position:center;background-size:cover;filter:saturate(.72) brightness(.44);transform:scale(1.03);transition:transform .7s ease,filter .35s ease}.collection-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(2,7,11,.97) 7%,rgba(2,7,11,.7) 53%,rgba(2,7,11,.2)),linear-gradient(180deg,transparent 35%,rgba(2,7,11,.78))}.collection-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 25px 60px rgba(0,0,0,.42),0 0 35px rgba(72,175,230,.1)}.collection-card.active{border-color:rgba(153,224,255,.72);box-shadow:0 26px 68px rgba(0,0,0,.52),0 0 34px rgba(94,196,246,.22),inset 0 0 0 1px rgba(203,240,255,.08)}.collection-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.collection-number{color:#bdeaff;font-size:.62rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.collection-play{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(220,244,255,.2);border-radius:50%;background:rgba(7,17,25,.66)}.collection-play svg{width:13px;height:13px;fill:currentColor}.collection-card.active .collection-play{background:linear-gradient(145deg,#eaf9ff,#78cdf8);color:#041018;border-color:transparent}.collection-copy{position:absolute;left:16px;right:16px;bottom:15px}.collection-copy small{display:block;margin-bottom:5px;color:#b7c6d2;font-size:.62rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.collection-copy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.18rem,2vw,1.75rem);line-height:.96;text-shadow:0 5px 20px #000}.collection-copy span{display:block;margin-top:7px;color:#aab7c2;font-size:.7rem}.collection-card[data-collection="prosnis"]::after{background:linear-gradient(110deg,rgba(8,5,5,.95) 7%,rgba(18,10,8,.68) 53%,rgba(14,8,5,.18)),linear-gradient(180deg,transparent 35%,rgba(8,5,4,.82))}.keyboard-hint{margin:12px 0 0;color:#718797;text-align:right;font-size:.68rem;letter-spacing:.03em}.keyboard-hint span{color:#b9dff3;font-weight:850}
.collection-card:focus-visible,.ctrl:focus-visible,.open-youtube:focus-visible,.icon-button:focus-visible,.icon-link:focus-visible{outline:2px solid rgba(173,228,255,.86);outline-offset:3px}

@media(max-width:1050px){.collection-grid{grid-template-columns:repeat(3,1fr)}.player-shell{grid-template-columns:minmax(330px,.9fr) minmax(390px,1.1fr)}}
@media(max-width:760px){
  .app{width:min(100% - 14px,1180px);padding:6px 0 34px}
  .topbar{grid-template-columns:1fr auto;min-height:58px;margin-bottom:6px;gap:10px}.page-label{display:none}.brand img{width:40px;height:40px}.brand-copy strong{font-size:.94rem}.brand-copy span{display:none}.top-actions{gap:5px}.icon-link,.icon-button{width:38px;height:38px}
  .player-shell{height:calc(100svh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;max-height:none;grid-template-columns:1fr;grid-template-rows:minmax(0,43%) minmax(0,57%);border-radius:23px}
  .visual-side{min-height:0;height:auto}.visual-bg{filter:blur(25px) brightness(.33) saturate(1.08)}.visual-shade{background:linear-gradient(180deg,rgba(2,7,11,.08),rgba(2,7,11,.32) 54%,rgba(2,7,11,.88))}
  .media-frame{height:100%;padding:12px 14px 44px}.cover-wrap,.youtube-stage{width:auto;height:min(100%,330px);max-width:92%;border-radius:20px}.cover-wrap{aspect-ratio:1/1}.youtube-stage{top:12px;left:50%;transform:translateX(-50%);aspect-ratio:16/9;height:auto;width:min(92%,560px);max-height:calc(100% - 48px)}.video-mode .youtube-stage{transform:translateX(-50%)}
  .nowplaying-mini{display:none}.visualizer{left:8%;right:8%;bottom:8px;height:36px;gap:2px}.bar{max-width:7px;min-width:2px}
  .control-side{min-height:0;justify-content:flex-start;padding:13px 16px 12px}.status-row{margin-bottom:10px}.status-chip{font-size:.66rem}.playlist-position{font-size:.65rem}.player-eyeline{font-size:.57rem;letter-spacing:.15em}.track-title{margin-top:5px;font-size:clamp(1.65rem,8.5vw,2.45rem);line-height:.94;-webkit-line-clamp:2}.video-mode .track-title{font-size:clamp(1.45rem,7vw,2.05rem)}.track-author{margin-top:5px;font-size:.76rem}
  .progress-area{margin-top:13px}.time-row{margin-top:6px;font-size:.64rem}.transport{grid-template-columns:40px 45px 68px 45px 40px;gap:5px;margin-top:12px}.ctrl{width:43px;height:43px}.ctrl.secondary{width:38px;height:38px}.ctrl.primary{width:64px;height:64px;box-shadow:0 0 0 6px rgba(111,201,245,.07),0 0 30px rgba(87,188,239,.26)}.ctrl.primary svg{width:25px;height:25px}.collection-actions{margin-top:12px;padding-top:10px;gap:8px}.collection-meta{min-width:0}.collection-meta strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collection-meta span{font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.open-youtube{min-height:36px;padding:0 12px;font-size:.67rem;white-space:nowrap}.scroll-cue{margin-top:8px;min-height:34px;padding-top:8px;font-size:.62rem}
  .library{margin-top:26px;padding-bottom:10px}.library-head{display:block;padding:0 4px}.library-head p{margin-top:9px;text-align:left;font-size:.78rem}.collection-grid{display:flex;overflow-x:auto;gap:10px;padding:0 4px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}.collection-grid::-webkit-scrollbar{display:none}.collection-card{flex:0 0 82%;min-height:184px;scroll-snap-align:start;border-radius:20px}.keyboard-hint{display:none}
}
@media(max-width:390px){.app{width:min(100% - 10px,1180px)}.brand-copy strong{font-size:.88rem}.top-actions{gap:3px}.icon-link,.icon-button{width:36px;height:36px}.player-shell{height:calc(100svh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;grid-template-rows:minmax(0,41%) minmax(0,59%)}.control-side{padding-inline:12px}.transport{grid-template-columns:36px 42px 62px 42px 36px;gap:3px}.ctrl{width:40px;height:40px}.ctrl.secondary{width:35px;height:35px}.ctrl.primary{width:60px;height:60px}.collection-meta{display:none}.open-youtube{width:100%;justify-content:center}.collection-actions{display:block}.collection-card{flex-basis:88%}}
@media(max-height:700px) and (max-width:760px){.player-shell{min-height:0;grid-template-rows:minmax(0,38%) minmax(0,62%)}.media-frame{padding-top:8px}.visualizer{height:28px}.control-side{padding-top:9px}.track-title{font-size:1.5rem}.progress-area{margin-top:9px}.transport{margin-top:8px}.collection-actions{margin-top:8px;padding-top:8px}.ctrl.primary{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.bar{transition:none!important}}

.error{display:none}.error.show{display:block}