@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}:root{--bg:#050505;--color:hsla(0,0%,100%,.1);--underline-width:1lh;--underline-block-width:200vmax;--underline-color:hsla(0,0%,50%,.15);--underline-color-hover:#0ff;--underline-transition:5s;--finish-fill:#fff;--accent:#fff;--fill:grey}:root:has(#driver:checked) .mainer{outline:1rem dashed rgba(230,26,26,.5);background:rgba(230,26,26,.1)}.mainer h1,.mainer h2{font-weight:120;background:linear-gradient(var(--finish-fill),var(--fill));background-clip:text;color:transparent}.mainer .controls{position:fixed;top:1rem;right:1rem;padding:1rem 2rem;border-radius:100px;z-index:2;display:flex;align-items:center;gap:.5rem;background:#e6e6e6;color:#1a1a1a}.mainer p{resize:none;max-width:70vw;overflow:hidden;padding:10ch;margin:0}.mainer p>span{outline-color:#e63c1a;outline-offset:1ch;font-size:clamp(3rem,4vw + 1rem,10rem);color:var(--color);text-decoration:none;background-image:linear-gradient(90deg,transparent calc(100% - 8ch),var(--accent) calc(100% - 8ch)),linear-gradient(90deg,var(--fill),var(--fill)),linear-gradient(90deg,var(--underline-color),var(--underline-color));background-size:var(--underline-block-width) var(--underline-width),var(--underline-block-width) var(--underline-width),100% var(--underline-width);background-repeat:no-repeat;background-position-x:0;background-position-y:100%;background-clip:text;color:var(--finish-fill)}.mainer{height:200vh}.mainer section{position:sticky;top:0;height:100vh;width:100vw;display:grid;place-items:center}@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.mainer{view-timeline-name:--section}.mainer p>span{background-position-x:calc(var(--underline-block-width) * -1),calc(var(--underline-block-width) * -1),0;color:transparent;animation-name:fill-up,color-in;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:--section;animation-range:entry 100% cover 50%,cover 50% exit 0}@keyframes fill-up{to{background-position-x:0,0,0}}@keyframes color-in{to{color:#000}}.dark-mode .mainer p>span{background-position-x:calc(var(--underline-block-width) * -1),calc(var(--underline-block-width) * -1),0;color:transparent;animation-name:fill-up,color-in-dark}@keyframes color-in-dark{to{color:#fff}}}}