:root{--ink: #111111;--paper: #F4F2EE;--warm-grey: #DADAD6;--mid: rgba(17, 17, 17, .4);--red: #E8351A;--divider: rgba(17, 17, 17, .1);--pad-x: clamp(24px, 6vw, 96px);--gap: clamp(16px, 2.5vw, 32px);--header-h: 108px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:auto}body{background:var(--paper);color:var(--ink);font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100svh;overflow-x:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}body:after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px}.skip-link{position:absolute;top:-100%;left:var(--pad-x);z-index:1000;padding:10px 18px;background:var(--ink);color:var(--paper);font-family:IBM Plex Sans,sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:0 0 2px 2px;text-decoration:none}.skip-link:focus{top:0}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad-x);border-bottom:1px solid var(--divider);background:var(--paper)}.site-header__back{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);transition:opacity .2s ease}.site-header__back:hover{opacity:.5}.site-header__back-arrow{font-size:14px;line-height:1;color:var(--mid)}.site-header__back-name{font-family:IBM Plex Sans,sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--ink)}.site-header__logo{display:flex;align-items:center;justify-content:center}.site-header__logo img{height:64px;width:auto;display:block}.empty-state{padding:120px var(--pad-x);color:var(--mid)}.empty-state p{font-family:IBM Plex Sans,sans-serif;font-weight:300;font-size:clamp(15px,1.1vw,18px);line-height:1.7}.empty-state__hint{margin-top:16px;font-size:12px;letter-spacing:.06em}.empty-state code{font-family:IBM Plex Mono,monospace;font-size:11px;background:#1111110f;padding:2px 6px;border-radius:2px}.mix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap);padding:var(--gap) var(--pad-x)}.mix-card{position:relative;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;user-select:none}.mix-card:focus-visible{outline:2px solid var(--ink);outline-offset:0;z-index:2}.card__artwork{position:relative;aspect-ratio:9 / 16;overflow:hidden;background:var(--warm-grey);border-radius:16px;box-shadow:0 4px 8px #11111114,0 8px 24px #1111111f;transition:box-shadow .3s ease,transform .3s ease}.mix-card:hover .card__artwork,.mix-card:focus-visible .card__artwork{box-shadow:0 24px 48px #11111138,0 48px 96px #1111113d;transform:translateY(-16px)}.card__artwork img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}.mix-card:hover .card__artwork img,.mix-card:focus-visible .card__artwork img{filter:brightness(.88)}.mix-card[data-active=true] .card__artwork img{filter:brightness(.45)}.mix-card[data-active=true] .card__artwork{transform:translateY(-16px);box-shadow:inset 0 0 0 4px var(--red),0 24px 48px #11111138,0 48px 96px #1111113d}.card__overlay{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s ease}.mix-card:hover .card__overlay,.mix-card:focus-visible .card__overlay{opacity:1}.mix-card[data-active=true] .card__overlay{opacity:1}.card__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:36%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#f4f2ee1f;border:1.5px solid rgba(244,242,238,.45);border-radius:50%;color:var(--paper);cursor:pointer;pointer-events:none;opacity:1;transition:background .2s ease,border-color .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mix-card[data-active=true][data-playing=true] .card__btn{background:#e8351a4d;border-color:var(--red)}.icon{width:45%;height:45%}.icon-pause,.mix-card[data-playing=true] .icon-play{display:none}.mix-card[data-playing=true] .icon-pause{display:block}.card__bottom{position:absolute;bottom:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between}.waveform{display:flex;gap:4px;align-items:center}.card__time{font-family:IBM Plex Mono,monospace;font-size:clamp(13px,1.4vw,17px);letter-spacing:.06em;color:#f4f2eee6;opacity:0;transition:opacity .25s ease}.mix-card[data-active=true] .card__time{opacity:1}.waveform__bar{width:4px;border-radius:9999px;background:var(--paper);height:6px;animation:bar-bounce .8s ease-in-out infinite alternate;animation-play-state:paused;transition:height .06s ease}.waveform__bar:nth-child(1){animation-delay:0s;animation-duration:.9s}.waveform__bar:nth-child(2){animation-delay:.12s;animation-duration:.75s}.waveform__bar:nth-child(3){animation-delay:.24s;animation-duration:.85s}.waveform__bar:nth-child(4){animation-delay:.36s;animation-duration:.7s}.waveform__bar:nth-child(5){animation-delay:.18s;animation-duration:.95s}.mix-card[data-playing=true] .waveform__bar{animation-play-state:running}.mix-card[data-active=false] .waveform{opacity:0}.mix-card[data-active=true][data-playing=false] .waveform{opacity:.45}.mix-card[data-active=true][data-playing=true] .waveform{opacity:1}@keyframes bar-bounce{0%{height:4px}to{height:20px}}.card__number{position:absolute;top:12px;right:12px;font-family:IBM Plex Sans,sans-serif;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#f4f2ee80;pointer-events:none;opacity:0;transition:opacity .2s ease}.mix-card:hover .card__number,.mix-card:focus-visible .card__number,.mix-card[data-active=true] .card__number{opacity:1}@media (min-width: 1024px){.mix-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}}@media (prefers-reduced-motion: reduce){.waveform__bar{animation:none!important;transition:none}.card__artwork{transition:none;transform:none!important}.card__artwork img,.card__overlay{transition:none}}