.atile{--atile-ease: cubic-bezier(.22, 1, .36, 1);--atile-spring: cubic-bezier(.34, 1.56, .64, 1);transition:transform .45s var(--atile-ease),box-shadow .45s var(--atile-ease),border-color .3s ease}.atile:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px #000000d9}.atile[data-playing="1"]{border-color:color-mix(in srgb,#ec4899 45%,transparent);box-shadow:0 0 0 1px #ec489940,0 26px 60px -30px #ec48998c}.atile-inner{position:relative;z-index:10;display:flex;flex-direction:column;height:100%;min-height:0}.atile-art{position:relative;flex:1 1 auto;min-height:7.5rem;overflow:hidden;isolation:isolate;border-radius:.875rem;margin:.5rem .5rem 0;background:#0d0b12}.atile-cover,.atile-mesh{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.1s var(--atile-ease),filter .5s ease}.atile:hover :is(.atile-cover,.atile-mesh){transform:scale(1.06)}.atile[data-playing="1"] :is(.atile-cover,.atile-mesh){transform:scale(1.04);filter:saturate(1.15)}.atile-mesh{display:grid;place-items:center;background:radial-gradient(120% 90% at 12% 10%,hsl(var(--atile-h1, 280) 85% 62% / .95),transparent 55%),radial-gradient(110% 90% at 92% 85%,hsl(var(--atile-h2, 330) 90% 58% / .9),transparent 60%),radial-gradient(80% 70% at 70% 15%,hsl(calc(var(--atile-h1, 280) + 120) 80% 60% / .55),transparent 60%),#120e1a}.atile-mesh-glyph{width:28%;height:28%;color:#ffffff47;transform:translateY(-14%)}.atile-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000000d 30%,#000000b8);pointer-events:none}.atile-vinyl{position:absolute;z-index:0;top:50%;right:-30%;width:62%;aspect-ratio:1;border-radius:50%;translate:0 -50%;opacity:0;pointer-events:none;background:repeating-radial-gradient(circle,#111 0 2px,#1d1c23 2px 4px);box-shadow:inset 0 0 0 1.2rem #0b0a0f;transition:right .8s var(--atile-ease),opacity .4s ease}.atile-vinyl:after{content:"";position:absolute;inset:38%;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899,#f97316)}.atile[data-playing="1"] .atile-vinyl{right:-18%;opacity:1;animation:atile-spin 3.2s linear infinite}@keyframes atile-spin{to{rotate:360deg}}.atile[data-playing="1"] :is(.atile-cover,.atile-mesh){clip-path:inset(0 22% 0 0 round 0 .75rem .75rem 0)}.atile-play{position:absolute;z-index:3;left:50%;top:42%;translate:-50% -50%;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#fff;background:#0c0a126b;backdrop-filter:blur(10px);box-shadow:0 14px 30px -12px #000000b3;transition:transform .35s var(--atile-spring),background .3s ease,border-color .3s ease,box-shadow .35s ease}.atile:hover .atile-play{transform:scale(1.08)}.atile-play:hover{background:linear-gradient(135deg,#a855f7,#ec4899,#f97316);border-color:transparent;box-shadow:0 16px 36px -12px #ec4899cc}.atile-play:active{transform:scale(.94)}.atile[data-playing="1"] .atile-play{background:linear-gradient(135deg,#a855f7,#ec4899,#f97316);border-color:transparent}.atile-play svg{fill:currentColor}.atile-wave{position:absolute;z-index:2;left:.75rem;right:.75rem;bottom:1.9rem;height:2.5rem;display:flex;align-items:flex-end;gap:2px;cursor:pointer;border-radius:.5rem}.atile-wave>span{flex:1;min-height:3px;border-radius:2px;background:#ffffff6b;transform-origin:bottom;transition:background-color .2s ease}.atile[data-playing="1"] .atile-wave>span{animation:atile-breathe .9s ease-in-out infinite alternate}@keyframes atile-breathe{to{transform:scaleY(.55)}}.atile-time{position:absolute;z-index:2;right:.75rem;bottom:.5rem;font:500 .75rem/1 ui-monospace,JetBrains Mono,monospace;color:#ffffffeb;font-variant-numeric:tabular-nums}.atile-time>span{opacity:.6}.atile-meta{padding:.625rem .875rem .75rem;min-width:0}.atile-meta .audio-tile__title{font-size:.875rem}.media-browser .vault-grid .atile .atile-art{min-height:0}.media-browser .atile .tile-action-rail{top:.9rem;right:.9rem;z-index:4}@media(max-width:767.98px),(pointer:coarse){.atile-play{width:3.25rem;height:3.25rem}.atile-meta .audio-tile__title{font-size:1rem}}html.light .atile.tile-surface{background:#fff!important;border-color:#1812281a}html.light .atile .atile-meta,html.light .atile .atile-meta :is(p,span){color:#14111c}html.light .atile .atile-meta .text-muted-foreground{color:#5b5566}html.light .atile:hover{box-shadow:0 24px 44px -28px #28145a59}@media(max-width:767.98px),(pointer:coarse){.atile-play{top:54%}.atile-wave{bottom:1.75rem;height:2rem}}