.tf{--c:51 202 250;--cell:24px;position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none}.tf>*{position:absolute}.tf-grid{inset:0;background-image:linear-gradient(rgb(var(--c)/.065) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--c)/.065) 1px,transparent 1px),linear-gradient(rgb(var(--c)/.028) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--c)/.028) 1px,transparent 1px);background-size:96px 96px,96px 96px,var(--cell) var(--cell),var(--cell) var(--cell);background-position:calc(50% + 48px) calc(50% + 48px),calc(50% + 48px) calc(50% + 48px),calc(50% + 12px) calc(50% + 12px),calc(50% + 12px) calc(50% + 12px);mask-image:radial-gradient(ellipse 46% 58% at 50% 50%,rgb(0 0 0/.4),#000 100%)}.tf-floor{left:0;right:0;bottom:0;height:32vh;overflow:hidden;perspective:420px;perspective-origin:50% 0;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}.tf-floor:before{content:"";position:absolute;inset:0 0 auto;height:90px;background:radial-gradient(50% 100% at 50% 0,rgb(var(--c)/.14),rgb(var(--c)/.04) 45%,transparent 75%)}.tf-floor-plane{position:absolute;left:-100%;bottom:0;width:300%;height:1600px;transform-origin:50% 100%;transform:rotateX(76deg);background-image:linear-gradient(rgb(var(--c)/.2) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--c)/.2) 1px,transparent 1px);background-size:72px 72px;background-position:calc(50% + 36px) 0;mask-image:linear-gradient(0deg,#000,rgb(0 0 0/.5) 30%,transparent);animation:tf-floor 7s linear infinite}.tf-traces{top:0;display:none;height:100%;width:auto;aspect-ratio:260/900;overflow:visible;mask-image:linear-gradient(90deg,#000 50%,transparent)}.tf-traces--left{left:0}.tf-traces--right{right:0;rotate:180deg}.tf-energy,.tf-pin,.tf-trace,.tf-via{vector-effect:non-scaling-stroke}.tf-trace{stroke:rgb(var(--c)/.17);stroke-width:1}.tf-pin{stroke:rgb(var(--c)/.26);stroke-width:1}.tf-via{stroke:rgb(var(--c)/.4);stroke-width:1}.tf-pad{fill:rgb(var(--c)/.5)}.tf-energy{stroke:rgb(31 208 245);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.08 3;stroke-dashoffset:-1.1;animation:tf-energy 16s linear infinite;animation-delay:var(--pulse-delay,0s)}.tf-points{inset:0}.tf-point{position:absolute;left:calc(50% + var(--gx) * var(--cell));top:calc(50% + var(--gy) * var(--cell));translate:-50% -50%}.tf-point--dot{width:3px;height:3px;background:rgb(var(--c)/.6)}.tf-point--box{width:6px;height:6px;border:1px solid rgb(var(--c)/.42)}.tf-point--cross{width:9px;height:9px;background:linear-gradient(rgb(var(--c)/.45),rgb(var(--c)/.45)) 50% /100% 1px no-repeat,linear-gradient(rgb(var(--c)/.45),rgb(var(--c)/.45)) 50% /1px 100% no-repeat}.tf-point--tick{width:10px;height:1px;background:rgb(var(--c)/.45)}.tf-scan{left:0;right:0;top:0;display:none;height:180px;background:linear-gradient(to bottom,transparent,rgb(var(--c)/.025) 60%,rgb(var(--c)/.08) 96%,rgb(var(--c)/.5) 99.4%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);transform:translateY(-180px);animation:tf-sweep 18s cubic-bezier(.45,0,.55,1) infinite;animation-delay:2.5s}.tf-frame{top:76px;left:12px;right:12px;bottom:12px;display:none;border:1px solid rgb(var(--c)/.08)}.tf-zones{position:absolute;display:grid;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;color:rgb(var(--c)/.3)}.tf-zones span{display:flex;align-items:center;justify-content:center}.tf-zones--bottom,.tf-zones--top{left:14px;right:14px;height:14px;grid-template-columns:repeat(8,1fr)}.tf-zones--top{top:0;border-bottom:1px solid rgb(var(--c)/.06)}.tf-zones--bottom{bottom:0;border-top:1px solid rgb(var(--c)/.06)}.tf-zones--bottom span+span,.tf-zones--top span+span{border-left:1px solid rgb(var(--c)/.08)}.tf-zones--left,.tf-zones--right{top:14px;bottom:14px;width:14px;grid-template-rows:repeat(4,1fr)}.tf-zones--left{left:0;border-right:1px solid rgb(var(--c)/.06)}.tf-zones--right{right:0;border-left:1px solid rgb(var(--c)/.06)}.tf-zones--left span+span,.tf-zones--right span+span{border-top:1px solid rgb(var(--c)/.08)}.tf-ruler{position:absolute;top:14px;display:none;bottom:14px;width:10px;--phase:calc(50vh - 90px);background:linear-gradient(rgb(var(--c)/.42) 1px,transparent 1px) 0 var(--phase) /10px 96px repeat-y,linear-gradient(rgb(var(--c)/.26) 1px,transparent 1px) 0 var(--phase) /4px var(--cell) repeat-y}.tf-ruler--left{left:15px}.tf-ruler--right{right:15px;scale:-1 1}.tf-hud{top:calc(50% + 38px);display:none;margin:0;font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:rgb(var(--c)/.4);writing-mode:vertical-rl}.tf-hud--left{left:36px;translate:0 -50%;rotate:180deg}.tf-hud--right{right:36px;translate:0 -50%}@property --tf-scan{syntax:"<integer>";inherits:false;initial-value:0}@supports (animation-timeline:scroll()){.tf-scroll{counter-reset:tf-scan var(--tf-scan);animation:tf-scan linear both;animation-timeline:scroll(root block)}.tf-scroll:after{content:" " counter(tf-scan) "%"}}@media (min-width:1024px){.tf-frame,.tf-scan{display:block}}@media (min-width:1360px){.tf-hud,.tf-ruler,.tf-traces{display:block}}@media (min-width:1024px) and (pointer:fine){.tf-point[data-twinkle]{animation:tf-twinkle 7s ease-in-out infinite;animation-delay:var(--tw)}}@media (max-width:1023px){.tf-energy,.tf-floor-plane{animation:none}}@keyframes tf-floor{to{transform:rotateX(76deg) translateY(72px)}}@keyframes tf-energy{0%{stroke-dashoffset:.1;animation-timing-function:cubic-bezier(.45,0,.7,.5)}9%,to{stroke-dashoffset:-1.1}}@keyframes tf-sweep{0%{transform:translateY(-180px)}32%,to{transform:translateY(100vh)}}@keyframes tf-twinkle{0%,to{opacity:1}50%{opacity:.2}}@keyframes tf-scan{to{--tf-scan:100}}