:root{--bg:#211715;--ink:#111}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html,body{overflow-x:clip}body{background-color:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.page{height:100dvh;padding:0 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:flex}.art{flex:1 1 0;width:100%;max-width:640px;min-height:0;container-type:size}.art-box{aspect-ratio:1;width:min(100cqw,100cqh);margin:0 auto;position:relative}.art-box i{background:url(/art.webp) no-repeat;animation:2s ease-in-out infinite alternate art-bob;position:absolute}.art-box .star{--bob:.6cqmin}@keyframes art-bob{0%{translate:0 calc(var(--bob,1.2cqmin) * -1)}to{translate:0 var(--bob,1.2cqmin)}}@media (prefers-reduced-motion:reduce){.art-box i{animation:none}}.player{--fg:#fff;--dim:#fff9;--line:#fd59bb33;--accent:#fd59bb;width:100%;max-width:520px;color:var(--fg);background:#2c201d;border:1px solid #fd59bb4d;border-radius:20px;padding:20px;box-shadow:0 20px 50px #0006}.ep{border-bottom:1px solid var(--line);align-items:flex-end;gap:18px;padding-bottom:18px;display:flex}.cover-wrap{--size:124px;width:var(--size);height:var(--size);flex:none;transition:margin-right .6s;position:relative}.cover-wrap.playing{margin-right:calc(var(--size) * .38)}.cd{background:radial-gradient(circle,#0a2f3c 0 8%,#e8e8e8 8.5% 15%,#00000026 15.5% 16.5%,#0000 17%),conic-gradient(#d9d9d9,#9fe8f5,#f0c4e8,#d9d9d9,#fff3a8,#9fe8f5,#d9d9d9);border-radius:50%;transition:translate .6s;position:absolute;inset:4%;box-shadow:0 6px 18px #0006}.cover-wrap.playing .cd{animation:2.4s linear infinite spin;translate:40%}@keyframes spin{to{rotate:360deg}}.cover-flip{cursor:pointer;width:100%;height:100%;transform-style:preserve-3d;background:0 0;border:0;padding:0;transition:transform .6s cubic-bezier(.6,0,.3,1);display:block;position:relative}.cover-flip.flipped{transform:perspective(600px)rotateY(180deg)}.cover-flip:not(.flipped){transform:perspective(600px)rotateY(0)}.ep-cover,.ep-back{object-fit:cover;backface-visibility:hidden;border-radius:10px;width:100%;height:100%;display:block;position:absolute;inset:0;box-shadow:0 8px 24px #00000073}.ep-back{transform:rotateY(180deg)}.ep-info{flex-direction:column;min-width:0;display:flex}.ep-meta{letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-right:64px;font-size:.68rem}.ep-title{text-overflow:ellipsis;white-space:nowrap;margin:4px 0 2px;font-size:1.25rem;font-weight:500;line-height:1.1;overflow:hidden}.ep-artist{color:var(--dim);font-size:.9rem}.play-pill{color:#211715;font:inherit;cursor:pointer;background:#fd59bb;border:0;border-radius:999px;align-self:flex-start;align-items:center;gap:8px;margin-top:14px;padding:9px 20px 9px 16px;font-size:.85rem;font-weight:400;transition:transform .12s;display:inline-flex}.play-pill:active{transform:scale(.96)}.play-pill svg{fill:currentColor;width:16px;height:16px}.tracks{margin:10px 0 6px;padding:0;list-style:none}.track{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;padding:13px 12px;font-size:.88rem;display:grid}.track:hover{background:#ffffff0d}.track.active{background:#fd59bb1f}.track.active .track-title{color:var(--accent)}.track-num{color:var(--accent);place-items:center;font-size:.85rem;display:grid}.track-title{white-space:nowrap;text-overflow:ellipsis;font-weight:400;overflow:hidden}.track-len{font-variant-numeric:tabular-nums;color:var(--dim);font-size:.82rem}.eq{align-items:flex-end;gap:2px;height:12px;display:flex}.eq i{background:var(--accent);transform-origin:bottom;border-radius:1px;width:3px;height:100%;animation:.8s ease-in-out infinite alternate eq}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.55s}@keyframes eq{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.eq i{animation:none;transform:scaleY(.7)}.cover-wrap.playing .cd{animation:none}.cover-flip{transition:none}}.progress{padding:0 12px}.times{font-variant-numeric:tabular-nums;color:var(--dim);justify-content:space-between;margin-top:2px;font-size:.72rem;display:flex}.seek{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:18px;margin:0}.seek::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--pct), #ffffff26 var(--pct));border-radius:2px;height:4px}.seek::-moz-range-track{background:#ffffff26;border-radius:2px;height:4px}.seek::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.seek::-webkit-slider-thumb{-webkit-appearance:none;background:var(--fg);border:0;border-radius:50%;width:12px;height:12px;margin-top:-4px}.seek::-moz-range-thumb{background:var(--fg);border:0;border-radius:50%;width:12px;height:12px}.player{position:relative}.links{align-items:center;gap:14px;display:flex;position:absolute;top:16px;right:16px}.links a,.links button{color:var(--dim);font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0;font-size:.75rem;display:inline-flex}.links button{flex-direction:row-reverse}.links svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.links .dot{fill:currentColor;stroke:none}.links a:hover,.links button:hover{color:var(--accent)}@media (width<=400px){.player{padding:16px}.ep{gap:14px}.cover-wrap{--size:96px}.ep-title{font-size:1.1rem}}.stack{flex-direction:column;align-items:center;width:100%;max-width:520px;display:flex}.cat{margin-bottom:-1px}.cat img,.cat canvas{transform-origin:bottom;width:auto;height:90px;display:block}.cat canvas,.cat.frozen img{display:none}.cat.frozen canvas{display:block}.cat:not(.frozen) img{animation:.428571s ease-out infinite cat-beat}@keyframes cat-beat{0%{transform:translateY(-4px)scale(1.06)}to{transform:none}}.cat:not(.frozen){animation:8s ease-in-out infinite cat-jump,12s ease-in-out 18s infinite cat-roam}@keyframes cat-roam{0%,to{transform:translate(0)}25%{transform:translate(min(160px,30vw))}75%{transform:translate(max(-160px,-30vw))}}@keyframes cat-jump{0%,8%,to{translate:0}3%{translate:0 -24px}5%{translate:0 -24px}}@media (prefers-reduced-motion:reduce){.cat:not(.frozen),.cat:not(.frozen) img{animation:none}}.intro{z-index:10;cursor:pointer;background:#141414;place-items:center;display:grid;position:fixed;inset:0}.intro-art{perspective:1400px;view-transition-name:cover;width:min(86vw,86vh)}.intro-card{aspect-ratio:1;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;animation:.6s cubic-bezier(.2,1.4,.4,1) both intro-in,.8s cubic-bezier(.6,0,.3,1) 1.1s both intro-flip,3s ease-in-out both intro-sway;position:relative}.intro-card .face{backface-visibility:hidden;border-radius:2.6%;position:absolute;inset:0;overflow:hidden;box-shadow:0 30px 80px #00000080}.intro-card .contra{transform:rotateY(180deg)}.intro-card .face:after{content:"";pointer-events:none;background:linear-gradient(115deg,#0000 30%,#ffffff47 45%,#ffffff14 55%,#0000 70%) 0 0/300% 100%;animation:3s ease-in-out both intro-sheen;position:absolute;inset:0}@keyframes intro-sheen{0%{background-position:100% 0}50%{background-position:0 0}to{background-position:85% 0}}.intro-card img{width:100%;height:100%;display:block}.intro-card .shine{filter:blur(6px);pointer-events:none;background:linear-gradient(90deg,#0000,#ffffffbf 50%,#0000);width:22%;animation:1s ease-in-out .2s both intro-shine;position:absolute;inset:-20% auto -20% 0;transform:translate(-150%)rotate(-20deg)}.intro-card .contra .shine{animation-delay:1.9s}@keyframes intro-shine{to{transform:translate(560%)rotate(-20deg)}}@keyframes intro-in{0%{scale:.85}}@keyframes intro-sway{0%{translate:0 6px;rotate:y -8deg}50%{translate:0 -6px;rotate:y 8deg}to{translate:0 4px;rotate:y -6deg}}@keyframes intro-flip{to{transform:rotateY(180deg)}}::view-transition-group(cover){animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}::view-transition-old(root){animation-duration:.5s}::view-transition-new(root){animation-duration:.5s}@media (prefers-reduced-motion:reduce){.intro-card{animation:0s linear 1.5s both intro-swap}.intro-card .shine,.intro-card .face:after{display:none}@keyframes intro-swap{to{transform:rotateY(180deg)}}}