@view-transition{navigation:auto}@font-face{font-display:swap;font-family:Work Sans;font-style:normal;font-weight:100 900;src:url(/WorkSansVariable.woff2)format("woff2-variations")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:100 900;src:url(/MontserratVariable.woff2)format("woff2-variations")}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--accent:oklch(var(--l) var(--c) var(--h));--accent-bg:oklch(from var(--accent) l c h / 10%);--c:attr(data-c type(<number>));--h:attr(data-h type(<number>));--l:attr(data-l type(<percentage>));font-size:20px}body{background:#eee;flex-direction:column;min-height:100vh;font-family:Work Sans,sans-serif;font-size:1rem;font-weight:350;display:flex}header{text-align:center;padding-block:2rem 1rem}nav{& ul{flex-flow:wrap;justify-content:center;gap:1rem;margin:0;padding:0;list-style:none;display:inline-flex}}main{background:linear-gradient(to top, var(--accent-bg), transparent 40ch);flex-grow:1;width:100%}footer{background:var(--accent-bg);text-align:center;padding-block:2rem}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block:1.5rem 1rem;font-family:Montserrat,sans-serif;font-weight:700;line-height:1.2}p,dl,ol,ul{text-wrap:pretty;margin-block:1rem;line-height:1.4}ol,ul{flex-direction:column;gap:.5rem;margin-inline:1.2rem;display:flex}a{color:var(--accent);text-underline-offset:2px;touch-action:manipulation;text-decoration-thickness:1px}#redesign{color:#fff;text-align:center;background:#222;padding:1rem}#logo{color:inherit;margin-block-end:1rem;font-family:Montserrat,sans-serif;font-size:1.25rem;font-weight:700;text-decoration:none;display:inline-block}.content{max-width:80ch;margin-inline:auto;padding:2rem}article{margin-block-end:4rem;& img{max-width:100%}}.vox-frame{width:24ch;margin-inline:auto;position:relative;& .vox-reset{cursor:pointer;opacity:.5;background:0 0;border:0;margin:0;padding:0;line-height:1;transition:all .4s .2s;display:inline-block;position:absolute;bottom:2rem;right:2rem;& .vox-reset-icon{transition:all .2s .1s}&:hover,&:focus-visible{opacity:1;& .vox-reset-icon{rotate:30deg}}@starting-style{opacity:0;transform:scale(.8)}}}.vox-art{filter:drop-shadow(0 14px 10px #0003);view-timeline-axis:block;view-timeline-name:--art-in-view;width:100%;height:auto;display:block}.vox{--cube-fill:oklch(from var(--accent) l c var(--cube-hue));--cube-float-timing:4s;--cube-hover-scale:scale(.8);--cube-hover-timing:.15s;--cube-hue:attr(data-hue type(<number>));--cube-shrink-timing:.25s;--cube-stroke:#000;--cube-stroke-width:.2;--cube-unhover-timing:.8s;--cube-wave-delay:attr(data-delay type(<number>), 0);--cube-wave-delay-multiple:-240ms;--cube-wave-distance:-6px;transform-box:fill-box;transform-origin:50%}.vox-float{animation:voxel-wave var(--cube-float-timing) ease-in-out infinite;animation-delay:calc(var(--cube-wave-delay) * var(--cube-wave-delay-multiple));transform-box:fill-box;transform-origin:50%}@keyframes voxel-wave{0%,to{transform:translateY(0)}50%{transform:translateY(var(--cube-wave-distance))}}[data-face]{stroke:var(--cube-stroke);stroke-linejoin:round;stroke-width:var(--cube-stroke-width);&[data-face=top]{fill:color-mix(in oklch, var(--cube-fill) 80%, white)}&[data-face=left]{fill:color-mix(in oklch, var(--cube-fill) 70%, black)}&[data-face=right]{fill:color-mix(in oklch, var(--cube-fill) 85%, black)}}.vox-cube{transform-box:fill-box;transform-origin:50%;transition:transform var(--cube-unhover-timing) ease}.vox:hover .vox-cube{transform:var(--cube-hover-scale);transition:transform var(--cube-hover-timing) ease}.vox{cursor:pointer;&.vox-shrink{pointer-events:none}&.vox-shrink .vox-cube{animation:voxel-shrink var(--cube-shrink-timing) ease forwards;transform:scale(0)}}@keyframes voxel-shrink{0%{transform:scale(1)}30%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(0)}}@supports (animation-timeline:scroll()){.vox{animation:1ms cubic-bezier(.34,1.56,.64,1) both voxel-in;animation-range:entry calc(50% + (sibling-index() - 1) / sibling-count() * 15%) contain calc((sibling-index() - 1) / sibling-count() * 40% + 10%);animation-timeline:--art-in-view}@keyframes voxel-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}}@media (prefers-reduced-motion:reduce){*{transition:none;animation:none}}
