html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--lerp-0: 1;--lerp-1: .5625;--lerp-2: .25;--lerp-3: .0625;--lerp-4: 0;--dot-color: #333;--tile-bg: #e9e9e9}*,*:after,*:before{box-sizing:border-box}h1{position:fixed;top:1.25rem;right:1.25rem;margin:0;color:#f8f9fa}body{display:grid;place-items:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui;background:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b)}:root{--lerp-0: 1;--lerp-1: .5625;--lerp-2: .25;--lerp-3: .0625;--lerp-4: 0}.blocks{display:flex;list-style-type:none;padding:.5rem;border-radius:1rem;gap:1.25rem;background:#ffffff80;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:flex .2s;flex:calc(.2 + (var(--lerp, 0) * 1.5));position:relative}.block:after{content:"";width:5%;aspect-ratio:1;background:var(--dot-color);position:absolute;bottom:10%;left:50%;border-radius:1rem;transform:translate(-50%,-50%);z-index:-1}.block:before{content:"";position:absolute;width:calc(100% + 1.25rem);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 .25rem solid}:is(.block:hover,.block:focus-visible) .block__item{outline:var(--tile-bg) .25rem solid}.block{outline:none}.block__item{width:100%;aspect-ratio:1;border-radius:1rem;background:var(--bg),var(--tile-bg);display:inline-block;transition:transform .2s;transform-origin:50% 100%;position:relative;transform:translateY(calc(var(--lerp) * -75%))}@media(prefers-color-scheme:dark){body{background:linear-gradient(to bottom right,#536976,#292e49)}.blocks{background:#00000080}:root{--dot-color: #eee;--tile-bg: #3a3a3a}}: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}body:has(a[style="--bg: linear-gradient(to bottom right  ,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);"]:focus){background:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b)}body:has(a[style="--bg: linear-gradient(to bottom right  ,#48005c,#8300e2,#a269ff);"]:focus){background:linear-gradient(to bottom right,#48005c,#8300e2,#a269ff)}body:has(a[style="--bg: radial-gradient(circle at top right  ,#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left  ,#ff1492,rgba(255,20,146,0));"]:focus){background:radial-gradient(circle at top right,#0ff,#0ff0),radial-gradient(circle at bottom left,#ff1492,#ff149200)}body:has(a[style="--bg: linear-gradient(to bottom right  ,#00f5a0,#00d9f5);"]:focus){background:linear-gradient(to bottom right,#00f5a0,#00d9f5)}body:has(a[style="--bg: conic-gradient(from -270deg at 75% 110%  ,#f0f,#fffaf0);"]:focus){background:conic-gradient(from -270deg at 75% 110%,#f0f,#fffaf0)}body:has(a[style="--bg: conic-gradient(from -90deg at top left  ,#000,#fff);"]:focus){background:conic-gradient(from -90deg at top left,#000,#fff)}body:has(a[style="--bg: linear-gradient(to bottom right  ,#72c6ef,#004e8f);"]:focus){background:linear-gradient(to bottom right,#72c6ef,#004e8f)}body:has(a[style="--bg: conic-gradient(from 90deg at 50% 0%  ,#111,50%,#222,#111);"]:focus){background:conic-gradient(from 90deg at 50% 0%,#111,50%,#222,#111)}body:has(a[style="--bg: conic-gradient(from .5turn at bottom center  ,#add8e6,#fff);"]:focus){background:conic-gradient(from .5turn at bottom center,#add8e6,#fff)}