:root{--bg:#060607;--ink:#e8e4da;--ink-dim:#8a857a;--accent:#d8a84e;--accent-soft:#d8a84e2e;--panel:#0e0e10b8;--line:#e8e4da1a;--font:"Sohne", "Inter", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);cursor:none;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}.fx-vignette{pointer-events:none;z-index:3;background:radial-gradient(at 50% 42%,#0000 52%,#0000008c 100%);position:fixed;inset:0}.fx-grain{pointer-events:none;z-index:4;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");animation:.9s steps(4,end) infinite grain;position:fixed;inset:-100px}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-38px,22px)}50%{transform:translate(24px,-30px)}75%{transform:translate(-14px,-18px)}to{transform:translate(30px,26px)}}.cursor-dot,.cursor-ring{pointer-events:none;z-index:60;border-radius:50%;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.cursor-dot{background:var(--ink);width:5px;height:5px}.cursor-ring{border:1px solid #e8e4da59;width:30px;height:30px;transition:width .25s,height .25s,border-color .25s,background .25s}body.cursor-hover .cursor-ring{border-color:var(--accent);background:var(--accent-soft);width:46px;height:46px}@media (pointer:coarse){html,body{cursor:auto}.cursor-dot,.cursor-ring{display:none}}#loader{z-index:50;background:var(--bg);justify-content:center;align-items:center;transition:opacity 1s,visibility 1s;display:flex;position:fixed;inset:0}#loader.done{opacity:0;visibility:hidden}.loader-inner{text-align:center}.loader-brand{letter-spacing:.32em;font-size:clamp(28px,5vw,52px);font-weight:200}.loader-brand span{color:var(--accent);font-weight:500}.loader-sub{letter-spacing:.55em;color:var(--ink-dim);text-transform:uppercase;margin-top:10px;font-size:11px}.loader-bar{background:var(--line);width:min(300px,60vw);height:1px;margin:42px auto 0;position:relative;overflow:hidden}.loader-bar-fill{transform-origin:0;background:var(--accent);transition:transform .4s;position:absolute;inset:0;transform:scaleX(0)}.loader-row{justify-content:space-between;align-items:center;width:min(300px,60vw);margin-top:14px;margin-left:auto;margin-right:auto;display:flex}.loader-stage{letter-spacing:.3em;color:var(--accent);text-align:left;font-size:9px}.loader-pct{letter-spacing:.3em;color:var(--ink-dim);font-size:10px}.chrome{z-index:10;pointer-events:none;opacity:0;justify-content:space-between;align-items:center;padding:26px 34px;transition:opacity 1.4s .3s;display:flex;position:fixed;left:0;right:0}body.ready .chrome{opacity:1}.chrome-top{top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark{border:1px solid var(--line);width:34px;height:34px;color:var(--accent);border-radius:50%;place-items:center;font-size:15px;font-weight:300;display:grid}.brand-text{letter-spacing:.34em;font-size:13px;font-weight:300}.brand-text span{color:var(--accent);font-weight:500}.top-links{pointer-events:auto}.yt-link{color:var(--ink-dim);letter-spacing:.22em;border:1px solid var(--line);text-transform:uppercase;border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-size:11px;text-decoration:none;transition:color .3s,border-color .3s;display:inline-flex}.yt-link:hover{color:var(--ink);border-color:#e8e4da59}.ghost-type{z-index:1;letter-spacing:.06em;color:#0000;-webkit-text-stroke:1px #e8e4da12;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;will-change:transform;margin-left:max(-46vw,-640px);font-size:clamp(60px,11vw,150px);font-weight:100;transition:opacity 2.4s .8s;position:fixed;top:9%;left:50%}body.ready .ghost-type{opacity:1}.song-banner{z-index:9;pointer-events:none;text-align:center;letter-spacing:.42em;color:var(--ink);opacity:0;white-space:nowrap;text-overflow:ellipsis;max-width:86vw;font-size:clamp(16px,2.4vw,30px);font-weight:200;position:fixed;top:16%;left:50%;overflow:hidden;transform:translate(-50%)}.song-banner.show{animation:5.5s cubic-bezier(.22,1,.36,1) forwards bannerIn}@keyframes bannerIn{0%{opacity:0;letter-spacing:.7em;transform:translate(-50%)translateY(14px)}10%{opacity:.95}55%{opacity:.95;letter-spacing:.42em;transform:translate(-50%)translateY(0)}to{opacity:0;letter-spacing:.38em;transform:translate(-50%)translateY(-10px)}}.jcap{z-index:8;pointer-events:none;opacity:0;will-change:opacity, transform;max-width:340px;position:fixed;top:50%;left:6vw;transform:translateY(-40%)}.jcap-idx{letter-spacing:.5em;color:var(--accent);margin-bottom:14px;font-size:11px}.jcap h2{letter-spacing:.14em;white-space:nowrap;margin-bottom:16px;font-size:clamp(30px,4.6vw,58px);font-weight:100;line-height:1.05}.jcap p{letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;font-size:12px;line-height:1.9}.jcap[data-i="4"]{top:24%}.rail{z-index:10;opacity:0;flex-direction:column;gap:18px;transition:opacity 1.2s 1s;display:flex;position:fixed;top:50%;right:26px;transform:translateY(-50%)}body.ready .rail{opacity:1}.rail-dot{cursor:none;background:0 0;border:1px solid #e8e4da4d;border-radius:50%;width:8px;height:8px;padding:0;transition:border-color .3s,background .3s,transform .3s;position:relative}.rail-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}.rail-dot:after{content:attr(data-label);letter-spacing:.3em;color:var(--ink-dim);opacity:0;white-space:nowrap;font-size:9px;transition:opacity .3s;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.rail-dot:hover:after,.rail-dot.active:after{opacity:1}.browse-btn{z-index:14;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:none;letter-spacing:.3em;font-size:10px;font-family:var(--font);-webkit-backdrop-filter:blur(14px);opacity:0;border-radius:999px;align-items:center;gap:10px;padding:12px 20px;transition:border-color .3s,color .3s,opacity 1.2s 1.2s;display:inline-flex;position:fixed;bottom:26px;right:26px}body.ready .browse-btn{opacity:1}.browse-btn:hover{border-color:var(--accent);color:var(--accent)}.browse-btn em{color:var(--accent);font-style:normal}.drawer{z-index:30;-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--line);background:#0a0a0ceb;flex-direction:column;width:min(400px,92vw);transition:transform .7s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(102%)}.drawer.open{transform:translate(0)}.drawer-head{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:26px 24px 18px;display:flex}.drawer-title{letter-spacing:.4em;font-size:12px;font-weight:300}.drawer-count{letter-spacing:.2em;color:var(--accent);flex:1;font-size:10px}.drawer-close{border:1px solid var(--line);color:var(--ink-dim);cursor:none;background:0 0;border-radius:50%;width:32px;height:32px;font-size:12px;transition:color .3s,border-color .3s}.drawer-close:hover{color:var(--ink);border-color:#e8e4da66}.drawer-list{flex:1;padding:10px 0 30px;overflow-y:auto}.drawer-list::-webkit-scrollbar{width:4px}.drawer-list::-webkit-scrollbar-thumb{background:#e8e4da26;border-radius:2px}.drow{cursor:none;text-align:left;width:100%;font-family:var(--font);color:var(--ink);background:0 0;border:none;border-left:2px solid #0000;align-items:center;gap:14px;padding:10px 24px;transition:background .25s,border-color .25s;display:flex}.drow:hover{background:#e8e4da0d}.drow.active{border-left-color:var(--accent);background:#d8a84e12}.drow-thumb{border:1px solid var(--line);background-color:#1a1a1e;background-position:50%;background-size:cover;border-radius:6px;flex-shrink:0;width:58px;height:34px}.drow-meta{flex:1;min-width:0}.drow-title{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:400;overflow:hidden}.drow-sub{letter-spacing:.2em;color:var(--ink-dim);margin-top:4px;font-size:9px}.drow.active .drow-sub{color:var(--accent)}.drow-eq{align-items:flex-end;gap:2px;height:12px;display:none}.drow.active.playing .drow-eq{display:flex}.drow-eq i{background:var(--accent);border-radius:1px;width:2px;animation:.8s ease-in-out infinite eq}.drow-eq i:nth-child(2){animation-delay:.2s}.drow-eq i:nth-child(3){animation-delay:.4s}.shelf-nav{z-index:10;opacity:0;pointer-events:none;align-items:center;gap:14px;transition:opacity .6s;display:flex;position:fixed;bottom:12%;left:50%;transform:translate(-50%)}body.ready .shelf-nav.visible{opacity:1;pointer-events:auto}.shelf-nav.hidden{display:none}.nav-btn{background:var(--panel);border:1px solid var(--line);width:40px;height:40px;color:var(--ink);cursor:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:50%;place-items:center;transition:border-color .3s,color .3s,transform .3s;display:grid}.nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:scale(1.08)}.nav-btn:disabled{opacity:.25}.nav-label{letter-spacing:.3em;color:var(--ink-dim);text-align:center;min-width:46px;font-size:10px}.hint{z-index:10;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-dim);opacity:0;pointer-events:none;white-space:nowrap;font-size:11px;transition:opacity 1.2s;position:fixed;bottom:110px;left:50%;transform:translate(-50%)}body.ready .hint.show{opacity:.85;animation:3.2s ease-in-out infinite hintPulse}@keyframes hintPulse{0%,to{opacity:.35}50%{opacity:.9}}.live-badge{z-index:10;letter-spacing:.28em;color:var(--ink-dim);opacity:0;align-items:center;gap:8px;font-size:9px;transition:opacity 1.4s 1s;display:flex;position:fixed;top:96px;right:34px}body.ready .live-badge{opacity:1}.live-dot{background:#4ade80;border-radius:50%;width:6px;height:6px;animation:2.4s ease-in-out infinite liveBlink;box-shadow:0 0 8px #4ade80cc}.live-badge.updating .live-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}@keyframes liveBlink{0%,to{opacity:1}50%{opacity:.35}}.nowplaying{z-index:12;background:var(--panel);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:16px;justify-content:space-between;align-items:center;gap:18px;width:min(620px,100vw - 40px);padding:12px 16px;transition:transform .9s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;bottom:26px;left:50%;transform:translate(-50%,140%)}.nowplaying.show{transform:translate(-50%)}.np-left{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.np-art{border:1px solid var(--line);background-color:#1a1a1e;background-position:50%;background-size:cover;border-radius:8px;flex-shrink:0;width:44px;height:44px}.np-meta{min-width:0}.np-title{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:400;overflow:hidden}.np-channel{letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin-top:3px;font-size:10px}.np-controls{align-items:center;gap:6px;display:flex}.np-btn{color:var(--ink);cursor:none;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;width:38px;height:38px;transition:background .25s,border-color .25s,color .25s;display:grid}.np-btn:hover{background:#e8e4da12}.np-play{border-color:var(--line);width:44px;height:44px}.np-play:hover{border-color:var(--accent);color:var(--accent)}.np-right{align-items:center;gap:10px;display:flex}.np-video-toggle.active{color:var(--accent)}.np-eq{opacity:.25;align-items:flex-end;gap:2.5px;height:16px;transition:opacity .3s;display:flex}.np-eq.on{opacity:1}.np-eq i{background:var(--accent);border-radius:1px;width:2.5px;height:4px}.np-eq.on i{animation:.9s ease-in-out infinite eq}.np-eq.on i:nth-child(2){animation-duration:.75s;animation-delay:.18s}.np-eq.on i:nth-child(3){animation-duration:1.05s;animation-delay:.36s}.np-eq.on i:nth-child(4){animation-duration:.85s;animation-delay:.1s}@keyframes eq{0%,to{height:4px}50%{height:15px}}.player-card{z-index:11;border:1px solid var(--line);opacity:.98;background:#000;border-radius:14px;width:232px;transition:transform .8s cubic-bezier(.22,1,.36,1),width .4s;position:fixed;bottom:26px;left:26px;overflow:hidden;transform:translateY(calc(100% + 40px));box-shadow:0 24px 60px #0009}.player-card.show{transform:translateY(0)}.player-card.min{width:92px}.player-frame{aspect-ratio:16/9;width:100%;position:relative}.player-frame iframe{width:100%;height:100%;position:absolute;inset:0}.toast{z-index:20;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);letter-spacing:.25em;text-transform:uppercase;opacity:0;pointer-events:none;border-radius:12px;padding:12px 22px;font-size:11px;transition:all .7s cubic-bezier(.22,1,.36,1);position:fixed;top:96px;left:50%;transform:translate(-50%,-30px)}.toast.show{opacity:1;transform:translate(-50%)}.toast b{color:var(--accent);font-weight:500}@media (width<=720px){.chrome{padding:14px 16px}.brand-text{letter-spacing:.2em;font-size:11px}.brand-mark{width:28px;height:28px}.yt-link{padding:7px 12px;font-size:10px}.yt-link span{display:none}.live-badge{letter-spacing:.18em;font-size:8px;top:62px;right:16px}.ghost-type{-webkit-text-stroke-width:.5px;margin-left:-46vw;font-size:17vw;top:12%}.jcap,.jcap[data-i="4"]{text-align:center;width:88vw;max-width:88vw;inset:auto auto 128px 50%;transform:translate(-50%)}.jcap-idx{margin-bottom:8px;font-size:10px}.jcap h2{white-space:normal;margin-bottom:8px;font-size:clamp(24px,8vw,40px)}.jcap p{font-size:10px;line-height:1.7}.song-banner{letter-spacing:.28em;white-space:normal;width:88vw;font-size:15px}.rail{gap:22px;right:12px}.rail-dot{width:12px;height:12px}.rail-dot:after{display:none}.player-card{width:130px;bottom:150px;left:12px}.player-card.min{width:74px}.browse-btn{padding:11px 18px;bottom:78px;right:50%;transform:translate(50%)}body.ready .browse-btn{transform:translate(50%)}.nowplaying{gap:10px;width:calc(100vw - 24px);padding:9px 12px;bottom:12px}.np-art{width:38px;height:38px}.np-title{font-size:12px}.np-right .np-video-toggle{display:none}.shelf-nav{display:none!important}.hint{letter-spacing:.25em;text-align:center;white-space:normal;width:90vw;font-size:9px;bottom:118px}}