:root{--gray-0: #f8f9fa;--gray-1: #f1f3f5;--size-1: .25rem;--size-2: .5rem;--size-4: 1.25rem;--radius-2: 5px;--radius-3: 1rem;--gradient-space: ;--gradient-6: conic-gradient(from -90deg at top left var(--gradient-space), #000, #fff);--gradient-23: linear-gradient(to bottom right var(--gradient-space), #536976, #292e49);--lerp-0: 1;--lerp-1: sin(30deg) ;--lerp-2: sin(20deg) ;--lerp-3: sin(10deg) ;--lerp-4: 0}@supports (background: linear-gradient(to right in oklab,#000,#fff)){:root{--gradient-space: in oklab}}*,*:after,*:before{box-sizing:border-box}h1{position:fixed;top:var(--size-4);right:var(--size-4);margin:0;color:var(--gray-0)}body{display:grid;place-items:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui;background:var(--gradient-6)}.block:nth-of-type(1){--hue: 10}.block:nth-of-type(2){--hue: 210}.block:nth-of-type(3){--hue: 290}.block:nth-of-type(4){--hue: 340}.block:nth-of-type(5){--hue: 30}.block:nth-of-type(6){--hue: 220}.block:nth-of-type(7){--hue: 320}.block:nth-of-type(8){--hue: 280}.block:nth-of-type(9){--hue: 240}.blocks{display:flex;list-style-type:none;padding:var(--size-2);border-radius:var(--radius-3);gap:var(--size-4);background:#ffffff80;box-shadow:0 2px #ffffff80 inset,0 2px #40404080;align-items:center;justify-content:center;align-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.blocks:hover{--show: 1}.block{width:48px;height:48px;display:grid;place-items:center;align-content:center;transition:all .2s;flex:calc(.2 + (var(--lerp, 0) * 1.5));max-width:100px;position:relative}.block:after{content:"";width:5%;aspect-ratio:1;background:var(--text-1);position:absolute;bottom:10%;left:50%;border-radius:var(--radius-3);transform:translate(-50%,-50%);z-index:-1}.block:before{content:"";position:absolute;width:calc(100% + var(--size-4));bottom:0;aspect-ratio:1 / 2;left:50%;transition:transform .2s;transform-origin:50% 100%;transform:translate(-50%) scaleY(var(--show, 0));z-index:-1}.block .block__item{transition:outline .2s;outline:transparent var(--size-1) solid}.block svg{width:80%;transition:all .2s;stroke:var(--gray-1)}:is(.block:focus-visible) .block__item{outline:var(--gray-1) var(--size-1) solid;border-radius:var(--radius-3)}.block{outline:none}.block__item{width:100%;aspect-ratio:1;border-radius:var(--radius-2);background:linear-gradient(hsl(0 0% 100% / .1),transparent),hsl(var(--hue, 10) 70% 60%);display:grid;place-items:center;transition:all .2s;box-shadow:0 2px #ffffff80 inset,0 2px #40404080;transform-origin:50% 100%;position:relative;transform:translateY(calc(var(--lerp) * -75%))}body{background:var(--gradient-23)}.blocks{background:#00000080}:is(.block:hover,.block:focus-visible){--lerp: var(--lerp-0);z-index:5}.block:has(+:is(.block:hover,.block:focus-visible)),:is(.block:hover,.block:focus-visible)+.block{--lerp: var(--lerp-1);z-index:4}.block:has(+.block+:is(.block:hover,.block:focus-visible)),:is(.block:hover,.block:focus-visible)+.block+.block{--lerp: var(--lerp-2);z-index:3}.block:has(+.block+.block+:is(.block:hover,.block:focus-visible)),:is(.block:hover,.block:focus-visible)+.block+.block+.block{--lerp: var(--lerp-3);z-index:2}.block:has(+.block+.block+.block+:is(.block:hover,.block:focus-visible)),:is(.block:hover,.block:focus-visible)+.block+.block+.block+.block{--lerp: var(--lerp-4);z-index:1}