body{max-width:unset}main{margin-bottom:2em}small,strong{line-height:1.25;margin-bottom:.25em}#record-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.record{position:relative;aspect-ratio:1/1;background-color:#e0e0e0;border-radius:12px;overflow:hidden}.record img.cover{width:100%;height:100%;object-fit:cover;display:block}.record .cover{width:100%;height:100%;background-color:#f2f2f2}.record .info{position:absolute;inset:0;background-color:#ffffff8f;border-radius:12px;opacity:0;transition:opacity .3s ease,-webkit-backdrop-filter 0s linear .3s,backdrop-filter 0s linear .3s;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:1rem;text-align:left;cursor:default}@media(prefers-color-scheme:dark){.record .cover{background-color:#1b1b1b}.record .info{background-color:#00000090}}.record:hover .info,.record.show-info .info{opacity:1;-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);transition:opacity .3s ease}.record.panel-host{z-index:2;transition:border-radius .15s ease .2s}.record.has-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transition-delay:0s}.record.has-panel .info{display:none}.record-panel{position:absolute;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:.75rem 1rem;border-radius:0 0 12px 12px;background-color:#f2f2f2;text-align:left;opacity:0;transition:transform .35s cubic-bezier(.2,1,.35,1),opacity .15s ease .2s}.record-panel.is-open{opacity:1;transition:transform .35s cubic-bezier(.2,1,.35,1),opacity .15s ease}@media(prefers-color-scheme:dark){.record-panel{background-color:#1b1b1b}}@media(prefers-reduced-motion:reduce){.record-panel,.record-panel.is-open{transition:opacity .15s ease}}#fit-toggle{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:101;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background-color:var(--bg-transparent);-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);color:var(--text);font:inherit;font-size:.875rem;line-height:1;cursor:pointer;transition:opacity .2s ease}#fit-toggle[hidden]{display:none}body.records-fit #fit-toggle{opacity:0;pointer-events:none}body.records-fit #record-grid{position:absolute;top:var(--fit-top,0px);left:0;right:0;height:var(--fit-height,100vh);z-index:100;touch-action:none;box-sizing:border-box;padding:calc(12px + env(safe-area-inset-top))12px calc(12px + env(safe-area-inset-bottom));grid-template-columns:repeat(var(--fit-cols),var(--fit-size));grid-auto-rows:var(--fit-size);gap:var(--fit-gap);justify-content:center;align-content:center;overflow:hidden;cursor:zoom-out}body.records-fit #record-grid::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--bg);animation:records-fade-in .2s ease-out}@keyframes records-fade-in{from{opacity:0}}body.records-animating .record .info{display:none}body.records-hover-lock .record:not(.show-info):hover .info{opacity:0;-webkit-backdrop-filter:none;backdrop-filter:none}body.records-fit .record{border-radius:var(--fit-radius);cursor:pointer;transition:transform .15s ease}body.records-fit .record .info{display:none}@media(hover:hover){body.records-fit .record:hover{transform:scale(1.15);z-index:1;box-shadow:0 4px 16px rgba(0,0,0,.3)}}