@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-latin-wght-italic.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-latin-wght-normal.woff2) format('woff2')}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.so-skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--accent);color:#000;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.so-skip:focus{left:16px}
:root{--accent:#EC30FF}
body{margin:0;background:#000000}
*{box-sizing:border-box}
a{color:inherit}a:hover{color:inherit}
.so-links a{text-decoration:none;color:#AFAFAF;transition:color .2s}
.so-links a:hover{color:#FFFFFF}
.so-blinds{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;z-index:6;perspective:1400px}
.so-slat{flex:1;background:var(--accent);transform-origin:50% 0;animation:soBlind 1.1s cubic-bezier(.75,0,.25,1) forwards}
@keyframes soBlind{0%{transform:rotateX(0deg);opacity:1}75%{opacity:1}100%{transform:rotateX(-90deg);opacity:0}}
.so-fade{opacity:0;animation:soUp .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes soUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.so-spin{animation:soSpin 14s linear infinite}
@keyframes soSpin{to{transform:rotate(360deg)}}
.so-marquee{display:flex;width:max-content;animation:soMarq 40s linear infinite}
@keyframes soMarq{to{transform:translateX(-50%)}}
.so-rail{background-image:radial-gradient(circle at center,var(--accent) 0 2.5px,transparent 3px);background-size:26px 10px;background-repeat:repeat-x;background-position:0 50%;animation:soRail 1.3s linear infinite}
@keyframes soRail{to{background-position:-26px 50%}}
.so-btn{transition:background .2s,color .2s,transform .2s,border-color .2s;cursor:pointer}
.so-btn:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#000000!important;transform:translateY(-2px)}
.so-cta .so-arrow{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.so-cta:hover .so-arrow{transform:translateX(10px)}
.so-big .so-line{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 5px;background-repeat:no-repeat;background-position:0 96%;transition:background-size .6s cubic-bezier(.2,.8,.2,1)}
.so-big:hover .so-line{background-size:100% 5px}
.so-dot{cursor:pointer}
.so-topic{color:#AFAFAF;border-top:1px solid #242424;transition:background .35s,color .35s}
.so-topic:hover{background:var(--accent);color:#000000}
.so-topic .so-t{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.so-topic:hover .so-t{transform:translateX(18px)}
.so-topic .so-n{color:var(--accent);transition:color .35s}
.so-topic:hover .so-n{color:#000000}
.so-mark{color:var(--accent);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%}
@supports (animation-timeline: view()){
.so-reveal{animation:soUp linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.so-mark{animation:soMark linear both;animation-timeline:view();animation-range:entry 60% cover 45%}
@keyframes soMark{from{background-size:0% 2px}to{background-size:100% 2px}}
}
@media (max-width:960px){.so-board{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:520px){.so-board{grid-template-columns:repeat(2,minmax(0,1fr))!important}.so-dots{display:none!important}}
@media (prefers-reduced-motion: reduce){
.so-slat{display:none}
.so-fade,.so-reveal{animation:none!important;opacity:1}
.so-spin,.so-marquee,.so-rail,.so-mark{animation:none!important}
}