@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";#water-canvas[data-astro-cid-66yk4ipv]{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}img{pointer-events:none;user-select:none;-webkit-user-drag:none}#vf4-ui{position:absolute;width:100%;height:100%;overflow:hidden}#vf4-ui #vf4-bg{z-index:0;position:absolute;height:100%;width:100%;display:flex;flex-direction:row}#vf4-ui #vf4-bg .left{flex:1;height:100%;background:linear-gradient(90deg,#0000,#c8cdff1a)}#vf4-ui #vf4-bg .slope{position:relative;flex-shrink:0;height:100%;aspect-ratio:134/460;display:none}#vf4-ui #vf4-bg .slope:before{content:"";position:absolute;height:50%;aspect-ratio:134/230;top:0;background:#ffffff13}#vf4-ui #vf4-bg .slope:after{content:"";position:absolute;height:50%;aspect-ratio:134/230;top:50%;background:url(/vf4/slopes_light.png?v=3);background-size:100% 100%;background-repeat:repeat;background-position:bottom right;opacity:.5}#vf4-ui #vf4-heading{display:none;z-index:5;position:absolute;width:auto;height:auto;right:4%;top:12%;text-align:right;color:#fff;font-family:Helvetica Neue,sans-serif}#vf4-ui #vf4-heading .title{text-transform:uppercase;font-weight:700;font-style:italic;font-size:10vh;height:14vh;color:#d2d2d2;opacity:1;letter-spacing:-1px;text-shadow:25px 20px 2px rgba(0,0,0,.15);transform:scaleY(.95)}#vf4-ui #vf4-heading .subtitle{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#d2d2d2e6;text-align:right}#vf4-ui .vf4-module{z-index:10;position:absolute;height:100%;width:50%;pointer-events:none}#vf4-ui .vf4-module .module-body{z-index:1;position:absolute;height:100%;aspect-ratio:608/1584}#vf4-ui .vf4-module .module-body .hit-boxes{z-index:100000;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#vf4-ui .vf4-module .module-body .hit-boxes .hit-canvas{opacity:0;z-index:100000;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#vf4-ui .vf4-module .module-body:after{content:"";position:absolute;height:100%;width:100%;background:url(/vf4/module_2.png?v=91);background-repeat:no-repeat;background-size:100% 100%}#vf4-ui .vf4-module .module-body .bezel{z-index:50;position:absolute;width:63%;aspect-ratio:.96;left:3.61%;top:1.63%;background:#00ff0080;border-radius:100%;background:url(/vf4/bezel.png?v=33);background-size:100% 100%;background-position:center;background-repeat:no-repeat}#vf4-ui .vf4-module .module-body .bezel:after{content:"";position:absolute;width:78%;left:50%;top:51%;height:62%;transform:translate(-50%,-50%);border-radius:45%;box-shadow:inset -10px -5px 5px 5px #0003}#vf4-ui .vf4-module .module-body .arrows{z-index:50;position:absolute;width:62%;aspect-ratio:.96;left:3.8%;top:1.9%;border-radius:100%}#vf4-ui .vf4-module .module-body .arrows .arrow{--mar:-1px;--sze:11.7%;--url:url(/vf4/arrows/arrow-b-t.png);position:absolute;width:var(--sze);aspect-ratio:1;background:var(--url);background-size:contain;background-position:center;background-repeat:no-repeat;opacity:.5}#vf4-ui .vf4-module .module-body .arrows .arrow.t{--url:url(/vf4/arrows/arrow-b-t.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.t.active{--url:url(/vf4/arrows/arrow-o-t.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.t{top:var(--mar);left:50%;transform:translate(-50%)}#vf4-ui .vf4-module .module-body .arrows .arrow.r{--url:url(/vf4/arrows/arrow-b-r.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.r.active{--url:url(/vf4/arrows/arrow-o-r.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.r{right:var(--mar);top:50%;transform:translateY(-50%)}#vf4-ui .vf4-module .module-body .arrows .arrow.b{--url:url(/vf4/arrows/arrow-b-b.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.b.active{--url:url(/vf4/arrows/arrow-o-b.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.b{bottom:var(--mar);left:50%;transform:translate(-50%)}#vf4-ui .vf4-module .module-body .arrows .arrow.l{--url:url(/vf4/arrows/arrow-b-l.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.l.active{--url:url(/vf4/arrows/arrow-o-l.png)}#vf4-ui .vf4-module .module-body .arrows .arrow.l{left:var(--mar);top:50%;transform:translateY(-50%)}#vf4-ui .vf4-module .module-body .screen{z-index:-1;position:absolute;width:49%;aspect-ratio:.85;left:10.61%;top:3.16%;border-radius:100%;overflow:hidden}#vf4-ui .vf4-module .module-body .screen #ticker{display:block;position:absolute;width:100%;height:80%;left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(1px) brightness(1.25) contrast(.9)}#vf4-ui .vf4-module .module-keys{z-index:0;position:absolute;height:auto;width:58vh;top:50%;padding:0;transform:translateY(-50%)}#vf4-ui .vf4-module .module-keys .key{position:relative;display:flex;align-items:stretch;width:100%;height:12.5vh;margin-bottom:-2.5vh;pointer-events:none;cursor:pointer;transform:translate(-500px);will-change:transform}#vf4-ui .vf4-module .module-keys .key.locked{pointer-events:none}#vf4-ui .vf4-module .module-keys .key:before{content:"";flex:1;background-image:url(/vf4/key_body_nearest.png?v=27);background-repeat:no-repeat;background-size:100% 100%}#vf4-ui .vf4-module .module-keys .key:after{content:"";display:block;height:100%;width:7.9vh;background-image:url(/vf4/key_tips_nearest.png?v=22);background-repeat:no-repeat;background-size:auto 100%}#vf4-ui .vf4-module .module-keys .key:nth-child(1):after{background-position:0vh}#vf4-ui .vf4-module .module-keys .key:nth-child(2):after{background-position:-8.4vh}#vf4-ui .vf4-module .module-keys .key:nth-child(3):after{background-position:-16.8vh}#vf4-ui .vf4-module .module-keys .key:nth-child(4):after{background-position:-25.2vh}#vf4-ui .vf4-module .module-keys .key:nth-child(5):after{background-position:-33.6vh}#vf4-ui .vf4-module .module-keys .key:nth-child(6):after{background-position:-42vh}#vf4-ui .vf4-module .module-keys .key:nth-child(7):after{background-position:-50.4vh}#vf4-ui .vf4-module .module-keys .key:nth-child(8):after{background-position:-58.8vh}#vf4-ui .vf4-module .module-keys .key{--r_1:0vh;--r_2:6.3vh;--r_3:4.8vh;--r_4:4.7vh;--r_5:3vh;--r_6:3.1vh;--r_7:3vh;--r_8:1.5vh}#vf4-ui .vf4-module .module-keys .key:nth-child(1){width:calc(100% - var(--r_1))}#vf4-ui .vf4-module .module-keys .key:nth-child(2){width:calc(100% - var(--r_1) - var(--r_2))}#vf4-ui .vf4-module .module-keys .key:nth-child(3){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3))}#vf4-ui .vf4-module .module-keys .key:nth-child(4){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3) - var(--r_4))}#vf4-ui .vf4-module .module-keys .key:nth-child(5){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3) - var(--r_4) - var(--r_5))}#vf4-ui .vf4-module .module-keys .key:nth-child(6){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3) - var(--r_4) - var(--r_5) - var(--r_6))}#vf4-ui .vf4-module .module-keys .key:nth-child(7){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3) - var(--r_4) - var(--r_5) - var(--r_6) - var(--r_7))}#vf4-ui .vf4-module .module-keys .key:nth-child(8){width:calc(100% - var(--r_1) - var(--r_2) - var(--r_3) - var(--r_4) - var(--r_5) - var(--r_6) - var(--r_7) - var(--r_8))}#vf4-ui .vf4-module .module-keys .key.locked{opacity:.5}#vf4-ui .vf4-module .module-keys .key .hitbox{z-index:1;--br:0%;--r:0px;position:absolute;width:calc(100% + var(--r));height:calc(100% - 2.5vh);top:.83vh;pointer-events:all}#vf4-ui .vf4-module .module-keys .key .hitbox:before{z-index:1;content:"";position:absolute;width:100%;height:100%;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 10%,calc(100% - var(--br)) 100%,0 100%);background:linear-gradient(90deg,#e1e1e1,#cdcdcd80 50%,#cdcdcd1a 95%,#cdcdcd00)}#vf4-ui .vf4-module .module-keys .key .hitbox>img{z-index:20;position:absolute;height:100%;right:0;width:auto;opacity:0;transition:opacity .15s ease;pointer-events:none;will-change:opacity}#vf4-ui .vf4-module .module-keys .key .hitbox:hover>img{opacity:1}#vf4-ui .vf4-module .module-keys .key .hitbox .text{z-index:30;position:absolute;width:auto;height:3.33vh;line-height:3.33vh;top:calc(50% + 0px);right:6.25vh;user-select:none;font-size:3.33vh;font-weight:600;font-family:Chakra Petch,sans-serif;text-align:right;text-transform:uppercase;color:#323232;white-space:nowrap;letter-spacing:-.5px;transform:translateY(-50%);filter:drop-shadow(0px 0px .2vh rgba(255,255,255,.75)) drop-shadow(0px 0px .3vh rgba(255,255,255,.5));pointer-events:none;display:flex;align-items:center;gap:1.25vh}#vf4-ui .vf4-module .module-keys .key .hitbox .text .lock-icon{display:inline-block;height:2vh;width:auto;flex-shrink:0;user-select:none;-webkit-user-drag:none;margin-top:-.3vh}#vf4-ui .vf4-module .module-keys .key:nth-child(1) .hitbox{--br: 5.7vh;--r:-.5vh}#vf4-ui .vf4-module .module-keys .key:nth-child(2) .hitbox{--br: 5.2vh;--r:-.42vh}#vf4-ui .vf4-module .module-keys .key:nth-child(3) .hitbox{--br: 4.58vh;--r:-.83vh}#vf4-ui .vf4-module .module-keys .key:nth-child(4) .hitbox{--br: 3.96vh;--r:-.83vh}#vf4-ui .vf4-module .module-keys .key:nth-child(5) .hitbox{--br: 3.54vh;--r:-1.67vh}#vf4-ui .vf4-module .module-keys .key:nth-child(6) .hitbox{--br: 3.13vh;--r:-2.25vh}#vf4-ui .vf4-module .module-keys .key:nth-child(7) .hitbox{--br: 2.5vh;--r:-2.25vh}#vf4-ui .vf4-module .module-keys .key:nth-child(8) .hitbox{--br: 2.45vh;--r:-3.5vh}#vf4-ui .vf4-module .module-keys .key{--p_right:-.4vh}#vf4-ui .vf4-module .module-keys .key:nth-child(1) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(2) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(3) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(4) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(5) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(6) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(7) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys .key:nth-child(8) .hitbox>img{right:var(--p_right)}#vf4-ui .vf4-module .module-keys.active .key{animation:keyActivate .3s normal forwards ease-in-out;animation-delay:10s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(1){animation-delay:1.075s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(2){animation-delay:1.15s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(3){animation-delay:1.225s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(4){animation-delay:1.3s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(5){animation-delay:1.375s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(6){animation-delay:1.45s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(7){animation-delay:1.525s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(8){animation-delay:1.6s}#vf4-ui .vf4-module .module-keys.active .key:nth-child(9){animation-delay:1.675s}@keyframes keyActivate{0%{transform:translate(-500px)}to{transform:translate(0)}}.fnt1{display:inline-block;position:relative;height:16px;width:12px;background:url(/vf4/sprites/font1.png);background-size:256px 256px;background-position:-16px 0px}.fnt1.sp{width:4px;background-position:0px 0px}.fnt1.\!{width:6px;background-position:-16px 0px}.fnt1.\"{width:8px;background-position:-32px 0px}.fnt1.\#{width:12px;background-position:-48px 0px}.fnt1.\${width:12px;background-position:-64px 0px}.fnt1.\%{width:12px;background-position:-80px 0px}.fnt1.\&{width:12px;background-position:-96px 0px}.fnt1.\'{width:5px;background-position:-112px 0px}.fnt1.\({width:7px;background-position:-128px 0px}.fnt1.\){width:7px;background-position:-144px 0px}.fnt1.\*{width:12px;background-position:-160px 0px}.fnt1.\+{width:12px;background-position:-176px 0px}.fnt1.\,{width:5px;background-position:-192px 0px}.fnt1.\-{width:11px;background-position:-208px 0px}.fnt1.\.{width:5px;background-position:-224px 0px}.fnt1.\/{width:10px;background-position:-240px 0px}.fnt1.\30 {width:12px;background-position:0px -16px}.fnt1.\31 {width:8px;background-position:-16px -16px}.fnt1.\32 {width:12px;background-position:-32px -16px}.fnt1.\33 {width:12px;background-position:-48px -16px}.fnt1.\34 {width:12px;background-position:-64px -16px}.fnt1.\35 {width:12px;background-position:-80px -16px}.fnt1.\36 {width:12px;background-position:-96px -16px}.fnt1.\37 {width:12px;background-position:-112px -16px}.fnt1.\38 {width:12px;background-position:-128px -16px}.fnt1.\39 {width:12px;background-position:-144px -16px}.fnt1.\:{width:5px;background-position:-160px -16px}.fnt1.\;{width:5px;background-position:-176px -16px}.fnt1.\<{width:11px;background-position:-192px -16px}.fnt1.\={width:11px;background-position:-208px -16px}.fnt1.\>{width:11px;background-position:-224px -16px}.fnt1.\?{width:12px;background-position:-240px -16px}.fnt1.\@{width:0px;background-position:0px -32px}.fnt1.A{width:12px;background-position:-16px -32px}.fnt1.B{width:12px;background-position:-32px -32px}.fnt1.C{width:12px;background-position:-48px -32px}.fnt1.D{width:12px;background-position:-64px -32px}.fnt1.E{width:12px;background-position:-80px -32px}.fnt1.F{width:12px;background-position:-96px -32px}.fnt1.G{width:12px;background-position:-112px -32px}.fnt1.H{width:12px;background-position:-128px -32px}.fnt1.I{width:6px;background-position:-144px -32px}.fnt1.J{width:12px;background-position:-160px -32px}.fnt1.K{width:12px;background-position:-176px -32px}.fnt1.L{width:12px;background-position:-192px -32px}.fnt1.M{width:12px;background-position:-208px -32px}.fnt1.N{width:12px;background-position:-224px -32px}.fnt1.O{width:12px;background-position:-240px -32px}.fnt1.P{width:12px;background-position:0px -48px}.fnt1.Q{width:12px;background-position:-16px -48px}.fnt1.R{width:12px;background-position:-32px -48px}.fnt1.S{width:12px;background-position:-48px -48px}.fnt1.T{width:16px;background-position:-64px -48px}.fnt1.U{width:12px;background-position:-80px -48px}.fnt1.V{width:12px;background-position:-96px -48px}.fnt1.W{width:12px;background-position:-112px -48px}.fnt1.X{width:12px;background-position:-128px -48px}.fnt1.Y{width:12px;background-position:-144px -48px}.fnt1.Z{width:12px;background-position:-160px -48px}.fnt1.\[{width:0px;background-position:-176px -48px}.fnt1.\\{width:0px;background-position:-192px -48px}.fnt1.\]{width:0px;background-position:-208px -48px}.fnt1.\^{width:0px;background-position:-224px -48px}.fnt1._{width:0px;background-position:-240px -48px}.fnt2{display:inline-block;position:relative;height:16px;width:13px;margin-left:-4px;margin-right:4px;margin-top:3px;background:url(/vf4/sprites/font1.png);background-size:256px 256px;background-position:-16px 0px}.fnt2.sp{width:4px;background-position:0px -64px}.fnt2.\!{width:5px;background-position:-16px -64px}.fnt2.\"{width:10px;background-position:-32px -64px}.fnt2.\#{width:13px;background-position:-48px -64px}.fnt2.\${width:13px;background-position:-64px -64px}.fnt2.\%{width:13px;background-position:-80px -64px}.fnt2.\&{width:13px;background-position:-96px -64px}.fnt2.\'{width:6px;background-position:-112px -64px}.fnt2.\({width:7px;background-position:-128px -64px}.fnt2.\){width:7px;background-position:-144px -64px}.fnt2.\*{width:11px;background-position:-160px -64px}.fnt2.\+{width:11px;background-position:-176px -64px}.fnt2.\,{width:6px;background-position:-192px -64px}.fnt2.\-{width:11px;background-position:-208px -64px}.fnt2.\.{width:6px;background-position:-224px -64px}.fnt2.\/{width:10px;background-position:-240px -64px}.fnt2.\30 {width:13px;background-position:0px -80px}.fnt2.\31 {width:7px;background-position:-16px -80px}.fnt2.\32 {width:13px;background-position:-32px -80px}.fnt2.\33 {width:13px;background-position:-48px -80px}.fnt2.\34 {width:13px;background-position:-64px -80px}.fnt2.\35 {width:13px;background-position:-80px -80px}.fnt2.\36 {width:13px;background-position:-96px -80px}.fnt2.\37 {width:12px;background-position:-112px -80px}.fnt2.\38 {width:13px;background-position:-128px -80px}.fnt2.\39 {width:13px;background-position:-144px -80px}.fnt2.\:{width:6px;background-position:-160px -80px}.fnt2.\;{width:6px;background-position:-176px -80px}.fnt2.\<{width:12px;background-position:-192px -80px}.fnt2.\={width:11px;background-position:-208px -80px}.fnt2.\>{width:13px;background-position:-224px -80px}.fnt2.\?{width:11px;background-position:-240px -80px}.fnt2.\@{width:0px;background-position:0px -96px}.fnt2.A{width:13px;background-position:-16px -96px}.fnt2.B{width:13px;background-position:-32px -96px}.fnt2.C{width:13px;background-position:-48px -96px}.fnt2.D{width:13px;background-position:-64px -96px}.fnt2.E{width:13px;background-position:-80px -96px}.fnt2.F{width:13px;background-position:-96px -96px}.fnt2.G{width:13px;background-position:-112px -96px}.fnt2.H{width:13px;background-position:-128px -96px}.fnt2.I{width:5px;background-position:-144px -96px}.fnt2.J{width:13px;background-position:-160px -96px}.fnt2.K{width:13px;background-position:-176px -96px}.fnt2.L{width:13px;background-position:-192px -96px}.fnt2.M{width:13px;background-position:-208px -96px}.fnt2.N{width:13px;background-position:-224px -96px}.fnt2.O{width:13px;background-position:-240px -96px}.fnt2.P{width:13px;background-position:0px -112px}.fnt2.Q{width:13px;background-position:-16px -112px}.fnt2.R{width:13px;background-position:-32px -112px}.fnt2.S{width:13px;background-position:-48px -112px}.fnt2.T{width:13px;background-position:-64px -112px}.fnt2.U{width:13px;background-position:-80px -112px}.fnt2.V{width:13px;background-position:-96px -112px}.fnt2.W{width:13px;background-position:-112px -112px}.fnt2.X{width:13px;background-position:-128px -112px}.fnt2.Y{width:13px;background-position:-144px -112px}.fnt2.Z{width:13px;background-position:-160px -112px}.fnt2.\[{width:0px;background-position:-176px -112px}.fnt2.\\{width:0px;background-position:-192px -112px}.fnt2.\]{width:0px;background-position:-208px -112px}.fnt2.\^{width:0px;background-position:-224px -112px}.fnt2._{width:0px;background-position:-240px -112px}