*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#eaeaea;background:#0d0d0d;height:100%;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}.app{height:100%;position:relative}.app canvas{display:block}.ui{pointer-events:none;flex-direction:column;align-items:center;gap:10px;padding:0 16px 14px;display:flex;position:absolute;bottom:0;left:0;right:0}.ui>*{pointer-events:auto}.category-filter{flex-wrap:wrap;justify-content:center;gap:6px;width:min(680px,92vw);display:flex}.category-filter button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffff80;cursor:pointer;background:#0d0d0d8c;border:1px solid #ffffff29;border-radius:999px;padding:5px 12px;font-family:inherit;font-size:12px;transition:color .2s,border-color .2s,background .2s}.category-filter button:hover{color:#ffffffd9;border-color:#ffffff59}.category-filter button.active{color:#0d0d0d;background:#eaeaea;border-color:#eaeaea;font-weight:600}.search-bar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#eaeaea;background:#0d0d0da6;border:1px solid #ffffff38;border-radius:999px;outline:none;width:min(680px,92vw);padding:13px 22px;font-size:15px;transition:border-color .2s}.search-bar::placeholder{color:#ffffff59}.search-bar:focus{border-color:#ffffff80}.ui-row{grid-template-columns:1fr auto 1fr;align-items:center;width:min(680px,92vw);display:grid}.layout-switch{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.layout-switch button{color:#fff6;cursor:pointer;background:0 0;border:none;padding:4px 2px;font-size:14px;transition:color .2s}.layout-switch button:hover{color:#ffffffbf}.layout-switch button.active{color:#fff;font-weight:600}.site-link{color:#ffffff80;justify-self:start;align-items:center;gap:5px;font-size:13px;text-decoration:none;transition:color .2s;display:inline-flex}.site-link:hover{color:#fff}.site-link span{font-size:11px}.motion-control{color:#ffffff73;-webkit-user-select:none;user-select:none;justify-self:end;align-items:center;gap:8px;font-size:12px;display:flex}.motion-control input[type=range]{appearance:none;cursor:pointer;background:#ffffff38;border-radius:2px;width:78px;height:2px}.motion-control input[type=range]::-webkit-slider-thumb{appearance:none;background:#eaeaea;border-radius:50%;width:11px;height:11px}.motion-control input[type=range]::-moz-range-thumb{background:#eaeaea;border:none;border-radius:50%;width:11px;height:11px}.loader{z-index:10;background:#0d0d0d;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.loader-bar{background:#eaeaea;max-width:240px;height:2px;transition:width .2s}.loader span{color:#ffffff80;letter-spacing:.1em;font-size:12px}.card-back{--scrim-bottom:.93;aspect-ratio:3/4;color:#eaeaea;background:#161616;border:1px solid #ffffff1f;width:360px;position:relative;overflow:hidden}.card-back .art{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.card-back .scrim{background:linear-gradient(to bottom, #0d0d0d00 15%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .026)) 22%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .109)) 30%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .235)) 38%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .388)) 46%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .551)) 54%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .71)) 62%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .847)) 70%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .949)) 78%, rgba(13, 13, 13, calc(var(--scrim-bottom) * .998)) 86%, rgba(13, 13, 13, var(--scrim-bottom)) 100%);position:absolute;inset:0}.card-back .content{flex-direction:column;justify-content:flex-end;gap:6px;height:100%;padding:18px;display:flex;position:relative}.card-back .label{letter-spacing:.16em;text-transform:uppercase;color:#ffffff8c;font-size:10px}.card-back h3{font-size:26px;font-weight:600;line-height:1.1}.card-back .categories{color:#ffffff8c;font-size:14px}.card-back a{letter-spacing:.06em;text-transform:uppercase;color:#0d0d0d;background:#eaeaea;border-radius:999px;align-self:flex-start;margin-top:14px;padding:7px 14px;font-size:12px;text-decoration:none;transition:opacity .2s}.card-back a:hover{opacity:.8}