.spinner{border:5px solid #01fff7;border-color:#01fff7 #f3f3f300;border-radius:50%;width:50px;height:50px;margin:0 3px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
.ground-img{object-fit:fill;object-position:center;height:100%;animation:1.5s ease-out paused moveWidth}.rocks-img{animation:2s ease-out paused moveTO;transform:translateY(0)}.hero-loaded{animation-play-state:running}.set-rocks>div{background-repeat:no-repeat;background-size:100% 100%;position:absolute;bottom:-10px}.ground-blur{transform:translateY(65%)}.ground-blur>div{z-index:10;width:150%;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes moveTO{0%{transform:translateY(80px)}to{transform:translateY(0)}}@keyframes moveWidth{0%{height:180%}to{height:100%}}.grad{background:linear-gradient(90deg,#c084fc,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@keyframes slide-in{0%{opacity:0;transform:translateY(calc(14px - 50%))}to{opacity:1;transform:translateY(-50%)}}@keyframes slide-out{0%{opacity:1;transform:translateY(-50%)}to{opacity:0;transform:translateY(calc(-50% - 14px))}}.role-text{white-space:nowrap;opacity:0;font-size:13px;position:absolute;top:50%;left:0}.role-text.active{animation:.5s cubic-bezier(.22,1,.36,1) forwards slide-in}.role-text.exit{animation:.4s cubic-bezier(.55,0,1,.45) forwards slide-out}.role-wrapper{min-width:160px;height:20px;position:relative;overflow:hidden}
.about{background:linear-gradient(#000731,#030e51)}.count-works{flex-wrap:wrap;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;display:grid}.count-works li{background:#00e5ff08;border:1px solid #00e5ff26;padding:1rem;position:relative}.count-works li:before{content:"";background:var(--cyan-mark);width:30px;height:2px;position:absolute;top:0;left:0}.count-works li>div{background-color:var(--cyan-mark);width:80px;height:2px;position:absolute;top:0;left:0}.count-works li>h4{color:#fff;font-size:1.9rem;font-weight:900;display:block}.count-works li>samp{color:#ffffffc2;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}.about-me span{color:var(--cyan-mark)}.display-skills{flex-wrap:wrap;gap:.6rem;width:100%;margin-top:1.5rem;display:flex}.display-skills code{letter-spacing:.1em;color:var(--cyan-mark);clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);background:#00e5ff0d;border:1px solid #00e5ff40;padding:.35rem .9rem;font-family:Share Tech Mono,monospace;font-size:.7rem;transition:background .2s,border-color .2s}.display-skills code:hover{border-color:var(--neon-cyan);background:#00e5ff1f}.section-divider{background:linear-gradient(to right, var(--cyan-mark), transparent);width:60px;height:2px;margin-bottom:3rem}
#project{background-color:var(--p-bg-dark)}.plane-controller button,.plane-controller input{color:#0ff;cursor:pointer;background:#00e5ff0d;border:1px solid #00e5ff40;padding:2px 8px;transition:all .3s;display:flex}.plane-controller button:hover{transform:translateY(-4px)}.project-head{font-size:clamp(2.4rem,6vw + 1rem,2.8rem);line-height:1}
#contact{background:radial-gradient(ellipse 60% 60% at 50% 100%, #8d2fff14 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 50%, #00e5ff0d 0%, transparent 60%), linear-gradient(180deg, var(--p-bg-dark) 0%, #050305 100%)}
.vertical-timeline *{box-sizing:border-box}.vertical-timeline{width:95%;max-width:1170px;margin:0 auto;padding:2em 0;position:relative}.vertical-timeline:after{content:"";clear:both;display:table}.vertical-timeline:before{content:"";background:var(--line-color);width:4px;height:100%;position:absolute;top:0;left:18px}.vertical-timeline.vertical-timeline--one-column-right:before{right:18px;left:unset}@media only screen and (min-width:1170px){.vertical-timeline.vertical-timeline--two-columns{width:90%}.vertical-timeline.vertical-timeline--two-columns:before{margin-left:-2px;left:50%}}.vertical-timeline-element{margin:2em 0;position:relative}.vertical-timeline-element>div{min-height:1px}.vertical-timeline-element:after{content:"";clear:both;display:table}.vertical-timeline-element:first-child{margin-top:0}.vertical-timeline-element:last-child{margin-bottom:0}@media only screen and (min-width:1170px){.vertical-timeline-element{margin:4em 0}.vertical-timeline-element:first-child{margin-top:0}.vertical-timeline-element:last-child{margin-bottom:0}}.vertical-timeline-element-icon{border-radius:50%;width:40px;height:40px;position:absolute;top:0;left:0}.vertical-timeline-element-icon.shadow-size-small{box-shadow:0 0 0 2px #fff,inset 0 1px #00000014,0 2px 0 4px #0000000d}.vertical-timeline-element-icon.shadow-size-medium{box-shadow:0 0 0 3px #fff,inset 0 2px #00000014,0 3px 0 5px #0000000d}.vertical-timeline-element-icon.shadow-size-large{box-shadow:0 0 0 4px #fff,inset 0 2px #00000014,0 4px 0 6px #0000000d}.vertical-timeline--one-column-right .vertical-timeline-element-icon{right:0;left:unset}.vertical-timeline-element-icon svg{width:24px;height:24px;margin-top:-12px;margin-left:-12px;display:block;position:relative;top:50%;left:50%}@media only screen and (min-width:1170px){.vertical-timeline--two-columns .vertical-timeline-element-icon{width:60px;height:60px;margin-left:-30px;left:50%}}.vertical-timeline-element-icon{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0)}.vertical-timeline--animate .vertical-timeline-element-icon.is-hidden{visibility:hidden}.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in{visibility:visible;animation:.6s cd-bounce-1}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(.5)}60%{opacity:1;-webkit-transform:scale(1.2)}to{-webkit-transform:scale(1)}}@-moz-keyframes cd-bounce-1{0%{opacity:0;-moz-transform:scale(.5)}60%{opacity:1;-moz-transform:scale(1.2)}to{-moz-transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.2)}to{transform:scale(1)}}.vertical-timeline-element-content{background:#fff;border-radius:.25em;margin-left:60px;padding:1em;position:relative;box-shadow:0 3px #ddd}.vertical-timeline--one-column-right .vertical-timeline-element-content{margin-right:60px;margin-left:unset}.vertical-timeline-element--no-children .vertical-timeline-element-content{box-shadow:none;background:0 0}.vertical-timeline-element-content:after{content:"";clear:both;display:table}.vertical-timeline-element-content h2{color:#303e49}.vertical-timeline-element-content .vertical-timeline-element-date,.vertical-timeline-element-content p{font-size:.8125rem;font-weight:500}.vertical-timeline-element-content .vertical-timeline-element-date{display:inline-block}.vertical-timeline-element-content p{margin:1em 0 0;line-height:1.6}.vertical-timeline-element-title,.vertical-timeline-element-subtitle{margin:0}.vertical-timeline-element-content .vertical-timeline-element-date{float:left;opacity:.7;padding:.8em 0}.vertical-timeline-element-content-arrow{content:"";border:7px solid #0000;border-right-color:#fff;width:0;height:0;position:absolute;top:16px;right:100%}.vertical-timeline--one-column-right .vertical-timeline-element-content-arrow{content:"";top:16px;right:unset;border:7px solid #0000;border-left-color:#fff;width:0;height:0;position:absolute;left:100%}.vertical-timeline--one-column-right .vertical-timeline-element-content:before{border-left:7px solid #fff;border-right:unset;left:100%}.vertical-timeline-element--no-children .vertical-timeline-element-content:before,.vertical-timeline-element--no-children .vertical-timeline-element-content-arrow{display:none}@media only screen and (min-width:768px){.vertical-timeline-element-content h2{font-size:1.25rem}.vertical-timeline-element-content p{font-size:1rem}.vertical-timeline-element-content .vertical-timeline-element-date{font-size:.875rem}}@media only screen and (min-width:1170px){.vertical-timeline--two-columns .vertical-timeline-element-content{width:44%;margin-left:0;padding:1.5em}.vertical-timeline--two-columns .vertical-timeline-element-content-arrow{top:24px;left:100%;transform:rotate(180deg)}.vertical-timeline--two-columns .vertical-timeline-element-content .vertical-timeline-element-date{width:100%;font-size:1rem;position:absolute;top:6px;left:124%}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(2n):not(.vertical-timeline-element--left) .vertical-timeline-element-content{float:right}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content-arrow,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(2n):not(.vertical-timeline-element--left) .vertical-timeline-element-content-arrow{top:24px;left:auto;right:100%;transform:rotate(0)}.vertical-timeline--one-column-right .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content-arrow,.vertical-timeline--one-column-right .vertical-timeline-element:nth-child(2n):not(.vertical-timeline-element--left) .vertical-timeline-element-content-arrow{top:24px;left:100%;right:auto;transform:rotate(0)}.vertical-timeline--two-columns .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content .vertical-timeline-element-date,.vertical-timeline--two-columns .vertical-timeline-element:nth-child(2n):not(.vertical-timeline-element--left) .vertical-timeline-element-content .vertical-timeline-element-date{text-align:right;left:auto;right:124%}}.vertical-timeline--animate .vertical-timeline-element-content.is-hidden{visibility:hidden}.vertical-timeline--animate .vertical-timeline-element-content.bounce-in{visibility:visible;animation:.6s cd-bounce-2}@media only screen and (min-width:1170px){.vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content.bounce-in,.vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element:nth-child(2n):not(.vertical-timeline-element--left) .vertical-timeline-element-content.bounce-in{animation:.6s cd-bounce-2-inverse}}@media only screen and (max-width:1169px){.vertical-timeline--animate .vertical-timeline-element-content.bounce-in{visibility:visible;animation:.6s cd-bounce-2-inverse}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translate(-100px)}60%{opacity:1;-webkit-transform:translate(20px)}to{-webkit-transform:translate(0)}}@-moz-keyframes cd-bounce-2{0%{opacity:0;-moz-transform:translate(-100px)}60%{opacity:1;-moz-transform:translate(20px)}to{-moz-transform:translate(0)}}@keyframes cd-bounce-2{0%{opacity:0;transform:translate(-100px)}60%{opacity:1;transform:translate(20px)}to{transform:translate(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translate(100px)}60%{opacity:1;-webkit-transform:translate(-20px)}to{-webkit-transform:translate(0)}}@-moz-keyframes cd-bounce-2-inverse{0%{opacity:0;-moz-transform:translate(100px)}60%{opacity:1;-moz-transform:translate(-20px)}to{-moz-transform:translate(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;transform:translate(100px)}60%{opacity:1;transform:translate(-20px)}to{transform:translate(0)}}
#experience{background:radial-gradient(ellipse 80% 50% at 100% 50%, #0a0f2ecc 0%, transparent 60%), linear-gradient(180deg, var(--p-bg-light) 0%, var(--p-bg-dark) 100%)}