:root{--bg:#111;--fg:#fff;--muted:#ffffff80;--line:#ffffff40;--accent:#4af;--u:min(100vw / 1920, 100vh / 1080);--col-w:calc(200 * var(--u));--col-gap:calc(120 * var(--u));--label-h:50px;--row-gap:calc(var(--col-gap) - var(--label-h));--grid-w:calc(6 * var(--col-w) + 5 * var(--col-gap));--out-ms:.32s;--in-ms:.36s;--flip-ms:.6s;--ease:cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;padding:0;font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace}#app{flex-direction:column;align-items:center;gap:8px;min-height:100vh;padding:8px 0;display:flex}.app-header{width:var(--grid-w);margin-top:calc(10 * var(--u));margin-bottom:calc(40 * var(--u))}.topbar{grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;display:grid}.topbar>:first-child{justify-self:start}.topbar>:last-child{justify-self:end}.info-link{z-index:60;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:none;padding:4px 0;font-size:12px;transition:color 80ms;position:relative}.info-link:hover,.info-link.active{color:var(--fg)}.info-panel{z-index:50;width:calc((100vw - var(--grid-w)) / 2 + 2 * var(--col-w) + 1.5 * var(--col-gap));transition:transform var(--in-ms) var(--ease);background:#000;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.info-panel.open{transform:translate(0)}.info-inner{box-sizing:border-box;height:100%;padding:calc(8px + 10 * var(--u)) calc((100vw - var(--grid-w)) / 2) calc(40 * var(--u)) calc(.5 * var(--col-gap));font-size:13px;line-height:1.6;overflow-y:auto}.info-inner p{margin:0 0 1.2em}.info-inner strong{font-weight:700}.info-inner .info-version{color:var(--muted);margin:0 0 calc(50 * var(--u));border-bottom:1px solid #0000;justify-content:flex-start;align-items:center;padding:10px 0;font-size:12px;line-height:normal;display:flex}.info-credits{color:var(--muted)}.info-inner a{color:inherit;text-underline-offset:3px;text-decoration:underline;transition:color 80ms}.info-inner a:hover{color:var(--fg)}.info-backdrop{z-index:40;position:fixed;inset:0}.caption{width:var(--grid-w);color:var(--muted);margin:12px auto 0;font-size:13px}.grid{grid-template-columns:repeat(6, var(--col-w));column-gap:var(--col-gap);row-gap:var(--row-gap);width:var(--grid-w);grid-auto-rows:auto;display:grid}@media (aspect-ratio<=4/3){:root{--u:min(100vw / 1280, 100vh / 1080);--grid-w:calc(4 * var(--col-w) + 3 * var(--col-gap))}.grid{grid-template-columns:repeat(4, var(--col-w))}}@media (aspect-ratio<=1){:root{--u:min(100vw / 1280, 100vh / 1500)}}@media (aspect-ratio<=3/5){:root{--u:min(100vw / 560, 100vh / 1200);--side-margin:16px;--col-gap:16px;--row-gap:22px;--grid-w:calc(100vw - 2 * var(--side-margin));--col-w:calc((var(--grid-w) - var(--col-gap)) / 2)}.grid{grid-template-columns:repeat(2, var(--col-w))}.app-header{margin-bottom:calc(28 * var(--u))}.topbar{grid-template-columns:1fr auto 1fr;grid-template-areas:"search shuffle info";position:relative}.topbar .search{grid-area:search;justify-self:start;width:auto}.topbar .shuffle{grid-area:shuffle;justify-self:center}.topbar .info-link{grid-area:info}.search:not(.active) .search-toggle{display:block}.search:not(.active) input{display:none}.topbar .shuffle,.topbar .info-link{border-bottom:1px solid #0000;padding-top:10px;padding-bottom:10px}.search.active{z-index:70;background:var(--bg);grid-area:1/1/-1/-1;justify-self:stretch;width:auto;position:absolute;inset:0}.info-panel{width:100vw}.info-inner{padding-left:calc((100vw - var(--grid-w)) / 2)}}.cell{flex-direction:column;min-width:0;display:flex;position:relative}.cell.clickable{cursor:pointer}.cell:before{content:"";aspect-ratio:1;background:var(--swatch,transparent);filter:saturate(.6)brightness(1.25);z-index:0;pointer-events:none;position:absolute;top:0;left:0;right:0}.cell.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cover-window{z-index:1;aspect-ratio:1;background:0 0;flex:none;width:auto;position:relative;overflow:hidden}.layer{position:absolute;inset:0}.layer img{object-fit:cover;width:100%;height:100%;display:block}.layer.single{z-index:1}.cell.q{justify-content:space-between}.cell.q:before{aspect-ratio:auto;bottom:0}.cell.q .label{z-index:1;background:var(--bg);position:relative}.layer.color{z-index:1;filter:saturate(.6)brightness(1.25);transition:transform var(--in-ms) var(--ease)}.layer.dest{z-index:2}.layer.dest.animate{transition:transform var(--in-ms) var(--ease)}.layer.prev{z-index:3;transition:transform var(--out-ms) var(--ease)}.cover-window.direct .layer.prev{transition:transform var(--in-ms) var(--ease)}.cell.flipping{z-index:2}.cover-window.flipping{perspective:calc(4 * var(--col-w));overflow:visible}.flipper{transform-style:preserve-3d;transition:transform var(--flip-ms) var(--ease);transition-delay:var(--cell-delay,0s);will-change:transform;position:absolute;inset:0}.flipper.go{transform:rotateY(180deg)}.face{backface-visibility:hidden;position:absolute;inset:0;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;display:block}.face.back{transform:rotateY(180deg)}.cell.flipping:before{background:0 0}.label{height:var(--label-h);flex-direction:column;flex:none;gap:1px;padding:10px 0 0;display:flex;overflow:hidden}.l-title{color:var(--fg);white-space:pre;text-overflow:ellipsis;min-height:1lh;font-size:12px;overflow:hidden}.l-meta{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:1lh;font-size:12px;display:flex}.l-artist{white-space:pre;text-overflow:ellipsis;overflow:hidden}.l-palette{flex:none;gap:2px;display:flex}.l-palette .sw{width:12px;height:12px}.search{width:calc(2 * var(--col-w) + var(--col-gap));position:relative}.search input{border:none;border-bottom:1px solid var(--line);width:100%;color:var(--fg);font:inherit;background:0 0;outline:none;padding:10px 8px 10px 30px;font-size:12px}.search input::placeholder{color:var(--muted)}.search input:focus{border-color:var(--fg)}.search .search-icon{width:18px;height:18px;color:var(--muted);pointer-events:none;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.search .search-toggle{color:var(--muted);border:none;border-bottom:1px solid var(--line);font:inherit;text-align:left;cursor:pointer;background:0 0;padding:10px 8px 10px 30px;font-size:12px;transition:color 80ms;display:none}.search .search-toggle:hover{color:var(--fg)}.search .dropdown{z-index:20;background:#161616;border:1px solid #2a2a2a;max-height:352px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000080}.search .item{cursor:pointer;flex-direction:column;gap:2px;padding:8px 12px;display:flex}.search .item:hover,.search .item.highlighted{background:#222}.search .item .name,.search .item .artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.search .item .name{color:var(--fg);font-size:12px}.search .item .artist{color:var(--muted);font-size:11px}.shuffle{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:4px 0;font-size:12px;transition:color 80ms;display:inline-flex}.shuffle:hover{color:var(--fg)}.shuffle svg{width:16px;height:16px;display:block}