:root{--bg: #0a0a0a;--rest: .35;--cell-w: 320px;--cell-h: 180px;--fade-ms: .2s;--spotlight-rest: .25}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg)}#viewport{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}#viewport.dragging{cursor:grabbing}#title{position:fixed;top:16px;left:0;right:0;margin:0;text-align:center;font:500 14px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none;z-index:10}#wall{position:absolute;top:0;left:0;will-change:transform}#wall .cell{position:absolute;width:var(--cell-w);height:var(--cell-h);overflow:hidden;background:var(--bg)}#wall img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(var(--rest));transition:filter var(--fade-ms) ease;pointer-events:none;-webkit-user-drag:none}#wall .cell .year{position:absolute;left:12px;bottom:12px;font:500 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;color:#fff;background:#0000008c;padding:6px 8px;border-radius:2px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity var(--fade-ms) ease,transform var(--fade-ms) ease}#viewport:not(.dragging) #wall .cell:hover img{filter:brightness(1)}#viewport:not(.dragging) #wall .cell:hover .year{opacity:1;transform:translateY(0)}body.spotlight #wall:hover img{filter:brightness(var(--spotlight-rest))}body.spotlight #viewport:not(.dragging) #wall .cell:hover img{filter:brightness(1)}@media (prefers-reduced-motion: reduce){#wall img,#wall .cell .year{transition:none}}