.tfx-metervara{color:transparent}.tfx-metervara:after{position:absolute;top:0;left:0;content:"metervara.";color:var(--header-sub-color);font:inherit;line-height:inherit;white-space:pre;pointer-events:none;animation-name:centerReveal;animation-timing-function:steps(1,end);animation-fill-mode:both;animation-iteration-count:1;animation-duration:.8s;animation-delay:.75s}@keyframes centerReveal{0%{content:"    ▁    "}14.286%{content:"   ▁▄▁   "}28.571%{content:"  ▁▄r▄▁  "}42.857%{content:" ▁▄erv▄▁ "}57.143%{content:"▁▄terva▄▁"}71.429%{content:"▄etervar▄▁"}85.714%{content:"metervara▄"}to{content:"Metervara."}}*{padding:0;margin:0;box-sizing:border-box}html,body{width:100vw;height:100lvh;overflow:hidden;background-color:var(--background-color);color:var(--text-color);font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:var(--default-font-weight);font-variation-settings:"wdth" var(--default-font-weight);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2{font-family:IBM Plex Mono,monospace;font-weight:400;font-style:normal}h3{font-weight:var(--default-font-weight);font-variation-settings:"wdth" var(--default-font-weight)}p.description{display:block;font-size:1.17em;padding-top:20px;font-weight:var(--default-font-weight);font-variation-settings:"wdth" var(--default-font-weight);max-width:700px}p.description span{display:inline;background-color:var(--header-main-color);color:var(--background-color)}h1{color:var(--header-main-color);font-size:max(2rem,min(8vw,15vh));line-height:1}h2{color:var(--header-sub-color);position:absolute;bottom:calc(100% + var(--block-gap) * 2);left:0;font-size:max(2rem,min(8vw,15vh));line-height:1}:root{--rows: 0;--cols: 0;--block-width: 100vw;--block-height: 100vh;--block-gap: 10px;--header-row: -1;--ease: cubic-bezier(.3,0,.7,1);--duration: .3s;--hover-transition-duration: 0ms;--fade-in-duration: .25s;--fade-out-duration: .2s;--block-border-color: hsl(30, 100%, 60%);--block-background-color: hsl(240, 73%, 47%);--background-color: hsl(0, 0%, 0%);--grid-color-vertical: hsl(200, 80%, 50%);--grid-color-horizontal: hsl(330, 90%, 65%);--text-color: hsl(50, 80%, 90%);--header-sub-color: hsl(180, 60%, 70%);--header-main-color: hsl(330, 90%, 70%);--default-font-weight: 400;--tag-text-color: hsl(50, 80%, 90%);--tag-background-color: hsl(240, 73%, 47%);--tag-active-background-color: var(--header-sub-color);--tag-active-text-color: hsl(0, 0%, 0%);--tag-hover-background-color: hsl(330, 90%, 70%);--tag-hover-text-color: hsl(50, 80%, 90%);--tag-header-text-color: hsl(50, 80%, 90%);--tag-header-background-color: hsl(270, 92%, 53%);--tag-header-active-background-color: var(--header-sub-color);--tag-header-active-text-color: hsl(0, 0%, 0%);--tag-header-hover-background-color: hsl(330, 90%, 70%);--tag-header-hover-text-color: hsl(50, 80%, 90%);--border: 10px;--cell: 10px;--speed: .5s;--dash-color-1: #000;--dash-color-2: #fff}.block-border{transition:border-color var(--hover-transition-duration) linear;border:5px solid var(--block-border-color)}.tags{display:flex;flex-wrap:wrap;gap:5px;padding-top:20px}.tags .tag{pointer-events:auto;cursor:pointer;color:var(--tag-text-color);background-color:var(--tag-background-color);padding:5px 10px;color:#fff;transition:background-color .15s linear,color .15s linear}.tags .tag:hover{background-color:var(--tag-hover-background-color);color:var(--tag-hover-text-color)}.tags .tag.active{background-color:var(--tag-active-background-color);color:var(--tag-active-text-color)}#grid{position:relative;z-index:5;width:100%;height:100%;gap:var(--block-gap);display:flex;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-snap-type:y mandatory}#grid>.block{position:relative;cursor:pointer;width:var(--block-width);height:var(--block-height);background-color:var(--block-background-color);will-change:transform;transition:transform var(--duration) var(--ease);overflow:hidden}#grid>.block .media{position:absolute;inset:0;z-index:0}#grid>.block .media img.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:center center}#grid>.block .media img.thumb{inset:0 auto auto 0;width:100%;height:100%}#grid>.block .content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:calc(var(--block-gap) * .5)}#grid>.block .content h3,#grid>.block .content p{font-family:IBM Plex Mono,monospace;font-weight:400;font-style:normal;display:inline-block;padding:8px 10px;font-size:12px;line-height:1;letter-spacing:.02em;text-transform:uppercase;user-select:none;-webkit-user-select:none;background-color:#000;color:#fff}#grid>.block .content .tags{flex-wrap:wrap-reverse;align-content:flex-start}.col-0{scroll-snap-align:start}.above-header{transform:translateY(calc(-1 * (var(--block-height) + var(--block-gap))))}.row-spacer{width:100%;height:var(--block-height)}.checker-border{position:absolute;z-index:10;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity var(--hover-transition-duration) linear}.checker-border .dash{x:calc(var(--border) / 2);y:calc(var(--border) / 2);width:calc(100% - var(--border));height:calc(100% - var(--border));fill:none;stroke-width:var(--border);stroke-linecap:butt;stroke-dasharray:var(--cell) var(--cell)}.checker-border .black{stroke:var(--dash-color-1);stroke-dashoffset:0}.checker-border .white{stroke:var(--dash-color-2);stroke-dashoffset:var(--cell)}#grid>.block:hover .checker-border{opacity:1}#grid>.block:hover .black{animation:marchBlack var(--speed) linear infinite}#grid>.block:hover .white{animation:marchWhite var(--speed) linear infinite}#grid>.block:hover .block-border{border-color:transparent}@keyframes marchBlack{to{stroke-dashoffset:calc(-1 * (var(--cell) * 2))}}@keyframes marchWhite{to{stroke-dashoffset:calc(-1 * var(--cell))}}#header{z-index:0}#header .tags>.tag{color:var(--tag-header-text-color);background-color:var(--tag-header-background-color)}#header .tags>.tag:hover{background-color:var(--tag-header-hover-background-color);color:var(--tag-header-hover-text-color)}#header .tags>.tag.active{background-color:var(--tag-header-active-background-color);color:var(--tag-header-active-text-color)}.fixed-header{position:fixed;width:100%;top:calc(var(--header-row) * (var(--block-height) + var(--block-gap)));height:var(--block-height);pointer-events:none;z-index:0;border:10px solid transparent;opacity:0;transition:opacity .3s ease-in-out}.layout-ready .fixed-header{opacity:1}@keyframes headerFadeIn{0%{opacity:0}to{opacity:1}}.layout-ready #header.fixed-header{animation-name:headerFadeIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both;animation-delay:var(--header-fade-delay, 1.5s)}#measure-viewport{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;background-image:repeating-linear-gradient(to right,transparent 0,transparent var(--block-width),var(--grid-color-vertical) var(--block-width),var(--grid-color-vertical) calc(var(--block-width) + var(--block-gap))),repeating-linear-gradient(to bottom,transparent 0,transparent var(--block-height),var(--grid-color-horizontal) var(--block-height),var(--grid-color-horizontal) calc(var(--block-height) + var(--block-gap)));background-blend-mode:normal;background-repeat:repeat;background-position:0 0;background-size:auto;z-index:0;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-app-region:drag;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .3s ease-in-out}.layout-ready #measure-viewport{opacity:1}@keyframes fadeInQuick{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes fadeOutQuick{0%{opacity:1;scale:1}to{opacity:0;scale:.9}}#grid>.block.fade-in{animation-name:fadeInQuick;animation-duration:var(--fade-in-duration);animation-timing-function:ease-out;animation-fill-mode:both;animation-delay:var(--fade-delay, 0ms)}#grid>.block.fade-out{animation-name:fadeOutQuick;animation-duration:var(--fade-out-duration);animation-timing-function:ease-in;animation-fill-mode:both;pointer-events:none;animation-delay:0ms}
