:root{--desk: #0d0c0b;--plastic: #1b1917;--plastic-hi: #2a2724;--fg: #f3eee6;--muted: #8d867c;--rule: #34302c;--kraft: #a8875a;--label: #efe6d2;--ink: #1d1a17;--red: #d9452f;--orange: #e8823a;--yellow: #e5b544;--green: #5d8a59;--display: "Archivo", "Helvetica Neue", Arial, sans-serif;--hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;--mono: "DM Mono", ui-monospace, Menlo, monospace;color-scheme:dark}html,body{background:var(--desk);color:var(--fg)}body{font-family:var(--display);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:22px 72px;overflow-x:hidden}.grain{pointer-events:none;position:fixed;top:-50%;right:-50%;bottom:-50%;left:-50%;z-index:60;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}to{transform:translate(0)}}.lock{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2a2420,var(--desk) 70%);padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transition:opacity .8s ease,visibility 0s linear .8s}.lock.gone{opacity:0;visibility:hidden}.lock-card{display:grid;justify-items:center;gap:18px;width:min(420px,100%)}.polaroid{margin:0;background:var(--label);padding:12px 12px 44px;transform:rotate(-3deg);box-shadow:0 20px 50px #0009;animation:drop 1s cubic-bezier(.2,.8,.2,1) both}.polaroid img{display:block;width:min(220px,52vw);height:auto;aspect-ratio:4 / 5;object-fit:cover}@keyframes drop{0%{opacity:0;transform:translateY(-30px) rotate(-10deg)}to{opacity:1;transform:rotate(-3deg)}}.lock-q{font-family:var(--hand);font-size:clamp(1.4rem,5vw,1.9rem);color:var(--label);text-align:center;text-wrap:balance}.lock-row{display:flex;gap:10px;width:100%}.lock-row input{flex:1;min-width:0;font:500 1rem var(--mono);color:var(--fg);background:#0a0908;border:1px solid #3a3530;border-radius:4px;padding:12px 14px}.lock-row input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}.lock-msg{min-height:1.2em;margin:0;font-family:var(--mono);font-size:.8rem;color:var(--orange)}.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:end start;background:var(--desk);transition:opacity 1.6s ease,visibility 0s linear 1.6s;padding:max(28px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(36px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}.intro:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(../../../intro.jpg) center 35% / cover no-repeat;filter:saturate(.92) contrast(1.04);animation:introImg 2.2s ease both}.intro:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0d0c0b40,#0d0c0b00 35%,#0d0c0bd9)}@keyframes introImg{0%{opacity:0;filter:saturate(.4) brightness(.6)}to{opacity:1}}.intro.gone{opacity:0;visibility:hidden}.intro-copy{position:relative;z-index:1;display:grid;gap:14px;max-width:640px}.intro h1{margin:0;font-family:var(--hand);font-weight:400;font-size:clamp(2.6rem,9vw,6rem);line-height:.95;color:var(--label);transform:rotate(-3deg);text-shadow:0 4px 30px rgba(0,0,0,.5);animation:rise 1.2s .5s cubic-bezier(.2,.8,.2,1) both}.stripes{display:grid;grid-template-rows:repeat(4,7px);width:min(340px,70vw);animation:wipe 1s .9s cubic-bezier(.6,0,.2,1) both;transform-origin:left}.stripes span:nth-child(1){background:var(--red)}.stripes span:nth-child(2){background:var(--orange)}.stripes span:nth-child(3){background:var(--yellow)}.stripes span:nth-child(4){background:var(--green)}@keyframes wipe{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes rise{0%{opacity:0;transform:translateY(18px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}.intro-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;animation:rise2 1s 1.2s ease both}@keyframes rise2{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.intro-meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);opacity:.85}.btn-play{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;background:var(--label);color:var(--ink);font:800 .95rem var(--display);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;box-shadow:0 3px #b9ad95,0 10px 30px #0006;transition:transform .12s,box-shadow .12s}.btn-play:active{transform:translateY(3px);box-shadow:0 0 #b9ad95}.btn-play:focus-visible,.key:focus-visible,.trk:focus-visible,.view button:focus-visible,.skip:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.btn-play svg{width:16px;height:16px;fill:currentColor}.skip{all:unset;cursor:pointer;font-family:var(--mono);font-size:.78rem;color:var(--label);opacity:.7;text-decoration:underline;text-underline-offset:4px}.wrap{max-width:1480px;margin:0 auto;display:grid;gap:34px}header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}.logo{display:flex;align-items:center;gap:12px}.logo svg{width:46px;height:30px}.logo b{font-family:var(--hand);font-weight:400;font-size:1.5rem;color:var(--label);transform:rotate(-2deg)}.hdr-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.walkman{position:relative;background:linear-gradient(160deg,var(--plastic-hi),var(--plastic) 40%,#141210);border-radius:22px;padding:clamp(10px,1.6vw,18px);box-shadow:inset 0 1px #ffffff12,0 30px 80px -30px #000000e6,0 0 0 1px #000}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6d665e,#2a2622);box-shadow:inset 0 0 0 1px #111}.screw:after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:#111;transform:rotate(45deg)}.s1{top:6px;left:6px}.s2{top:6px;right:6px}.s3{bottom:6px;left:6px}.s4{bottom:6px;right:6px}.screen{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 2px #000,0 0 0 1px #3a3530}video{display:block;width:100%;aspect-ratio:16 / 9;max-width:100%;background:#000;cursor:pointer}.deck{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 26px;padding:18px 8px 6px}.cassette{width:210px;max-width:100%}.cassette .reel{transform-box:fill-box;transform-origin:center;animation:spin 2.4s linear infinite;animation-play-state:paused}.playing .cassette .reel{animation-play-state:running}@keyframes spin{to{transform:rotate(-360deg)}}.now{min-width:0;display:grid;gap:4px}.now-k{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}.now-k .dot{width:8px;height:8px;border-radius:50%;background:#4b2620;box-shadow:none}.playing .now-k .dot{background:var(--red);box-shadow:0 0 10px var(--red)}.now-t{font-weight:900;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-a{color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swap{animation:swap .55s cubic-bezier(.2,.8,.2,1) both}@keyframes swap{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.right{display:grid;justify-items:end;gap:10px}.counter{display:flex;gap:3px;font-family:var(--mono);font-weight:500;font-size:1rem;font-variant-numeric:tabular-nums}.counter span{display:inline-block;min-width:1.05em;text-align:center;padding:4px 2px;background:#0a0908;color:var(--label);border-radius:3px;box-shadow:inset 0 -8px 10px #ffffff0a,inset 0 0 0 1px #2b2723}.counter .sep{background:none;box-shadow:none;min-width:.5em;color:var(--muted)}.vu{display:flex;align-items:flex-end;gap:3px;height:26px}.vu i{width:5px;height:100%;border-radius:1px;background:linear-gradient(to top,var(--green) 0 55%,var(--yellow) 55% 80%,var(--red) 80%);transform-origin:bottom;transform:scaleY(.08);transition:transform .08s linear;opacity:.9}.keys{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.key{all:unset;cursor:pointer;display:inline-grid;place-items:center;min-width:40px;height:34px;padding:0 10px;border-radius:6px;color:var(--fg);background:linear-gradient(#3a3631,#24211e);box-shadow:inset 0 1px #ffffff1f,0 3px #0b0a09,0 5px 10px #00000073;transition:transform .08s,box-shadow .08s}.key:active,.key.down{transform:translateY(3px);box-shadow:inset 0 1px #ffffff14,0 1px #0b0a09}.key svg{width:14px;height:14px;fill:currentColor}.key.play{min-width:56px;background:linear-gradient(#e2533c,#b9361f)}.tape{flex:1 1 200px;min-width:120px;position:relative;height:34px;margin-inline:6px;display:flex;align-items:center}.tape input{width:100%;margin:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;height:40px;cursor:pointer}.tape input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--kraft) var(--p, 0%),#2f2b27 var(--p, 0%))}.tape input::-moz-range-track{height:6px;border-radius:3px;background:#2f2b27}.tape input::-moz-range-progress{height:6px;border-radius:3px;background:var(--kraft)}.tape input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;margin-top:-8px;border-radius:3px;background:var(--label);box-shadow:0 2px #8d8270}.tape input::-moz-range-thumb{width:16px;height:22px;border:0;border-radius:3px;background:var(--label)}.tape input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:4px}.time{font-family:var(--mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:14px}.list-head h2{margin:0;font-weight:900;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;line-height:1}.list-head h2 span{font-family:var(--hand);font-weight:400;color:var(--yellow);font-size:.55em;letter-spacing:0;margin-left:10px;display:inline-block;transform:rotate(-4deg)}.view{display:flex;gap:18px;font-family:var(--mono);font-size:.8rem}.view button{all:unset;cursor:pointer;color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent}.view button[aria-pressed=true]{color:var(--red);border-bottom-color:var(--red)}ol.tracks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:34px clamp(14px,2vw,24px)}.trk{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;gap:8px;padding-bottom:16px;border-bottom:3px solid #3d3833;transition:border-color .3s;animation:in .7s calc(var(--i) * 35ms + .2s) cubic-bezier(.2,.8,.2,1) both}@keyframes in{0%{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}.art{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--plastic);box-shadow:0 10px 24px -12px #000c}.art img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.85);transition:filter .45s,transform .6s cubic-bezier(.2,.8,.2,1)}.art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#0000 30%,#00000059)}.trk:hover .art img,.trk.on .art img{filter:none;transform:scale(1.04)}.trk.on{border-bottom-color:var(--red)}.no{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.1em}.trk.on .no{color:var(--red)}.ti{font-weight:800;font-size:clamp(1.02rem,.7rem + 1.1vw,1.35rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}.ar{color:var(--muted);font-size:.9rem;font-weight:500}.meta{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.meta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}.meta i{font-style:normal;opacity:.6}.listview ol.tracks{grid-template-columns:1fr;gap:0}.listview .trk{grid-template-columns:3ch 52px 1fr auto;grid-template-areas:"no art ti meta" "no art ar meta";column-gap:14px;row-gap:2px;align-items:center;padding:10px 6px;border-bottom-width:1px;border-bottom-color:var(--rule)}.listview .art{grid-area:art;width:52px;box-shadow:none}.listview .no{grid-area:no}.listview .ti{grid-area:ti;font-size:1.05rem;align-self:end}.listview .ar{grid-area:ar;align-self:start}.listview .meta{grid-area:meta}.listview .trk:hover{background:#ffffff08}.listview .trk.on{background:#d9452f14}.stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px);gap:22px;align-items:start}.queue{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;min-width:0;max-height:calc(100vh - 32px);background:linear-gradient(170deg,#1d1b18,#141210);border-radius:18px;box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #000,0 30px 70px -30px #000000e6;overflow:hidden;animation:slideIn .9s .3s cubic-bezier(.2,.8,.2,1) both}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:none}}.q-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}.q-head span:first-child{color:var(--label)}.q-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#3a3530 transparent}.q-item{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:2.2ch 44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;transition:background .25s,opacity .25s}.q-item:hover{background:#ffffff0a}.q-item:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}.q-item img{width:44px;height:44px;border-radius:4px;display:block;object-fit:cover;filter:grayscale(.6);transition:filter .3s}.q-item:hover img,.q-item.on img{filter:none}.q-item.done{opacity:.45}.q-no{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.q-txt{display:grid;min-width:0}.q-t{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-a{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-d{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.q-eq{display:none;align-items:flex-end;gap:2px;height:14px}.q-eq i{width:3px;height:100%;background:var(--red);transform-origin:bottom;animation:eq .9s ease-in-out infinite;animation-play-state:paused}.q-eq i:nth-child(2){animation-delay:-.3s}.q-eq i:nth-child(3){animation-delay:-.6s}@keyframes eq{0%,to{transform:scaleY(.25)}50%{transform:scaleY(1)}}.q-item.on{background:#ffffff10}.q-item.on .q-d{display:none}.q-item.on .q-no{color:var(--red)}.q-item.on .q-eq{display:flex;grid-column:4}.playing .q-eq i,.stage:has(.playing) .q-eq i{animation-play-state:running}@media(max-width:1060px){.stage{grid-template-columns:1fr}.queue{display:none}}footer{font-family:var(--mono);font-size:.75rem;color:var(--muted)}@media(max-width:720px){.deck{grid-template-columns:minmax(0,1fr) auto;gap:14px 14px;padding:14px 4px 4px}.walkman{border-radius:16px}.now-t{font-size:1.45rem}.now-a,.counter{font-size:.85rem}.counter span{padding:3px 1px}.vu{height:20px}.vu i{width:4px}.keys{gap:8px}#fs{margin-left:auto}.tape{order:10;flex-basis:100%;margin-inline:0;height:26px}.time{order:11;margin-left:auto;margin-top:-4px;font-size:.72rem}.cassette{display:none}.listview .trk{grid-template-columns:3ch 44px 1fr;grid-template-areas:"no art ti" "no art ar"}.listview .meta{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.grain{display:none}}.logo.svelte-12qhfyh{text-decoration:none}.tabs.svelte-12qhfyh{display:flex;gap:22px;font-family:var(--mono);font-size:.8rem;margin-left:auto;margin-right:20px}.tabs.svelte-12qhfyh a:where(.svelte-12qhfyh){color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s}.tabs.svelte-12qhfyh a:where(.svelte-12qhfyh):hover{color:var(--fg)}.tabs.svelte-12qhfyh a[aria-current=page]:where(.svelte-12qhfyh){color:var(--red);border-bottom-color:var(--red)}.tabs.svelte-12qhfyh a:where(.svelte-12qhfyh):focus-visible{outline:2px solid var(--yellow);outline-offset:3px}@media(max-width:720px){.tabs.svelte-12qhfyh{order:3;width:100%;margin:0}.hdr-meta.svelte-12qhfyh{display:none}}