@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

html{scroll-behavior:smooth}
body{margin:0;background:#14120F}
.bgph{position:absolute;top:0;right:0;width:58%;height:540px;overflow:hidden}
.bgph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.bgph{width:100%;opacity:.3}}
a{color:inherit}
a:hover{opacity:.78}
a:focus-visible,button:focus-visible{outline:2px solid #F0714B;outline-offset:3px}
.pulse{transform-origin:center;transform-box:fill-box;animation:pulse 3.4s ease-in-out infinite}
.scan{animation:scan 7s linear infinite}
.spin{transform-origin:center;transform-box:fill-box;animation:spin 24s linear infinite}
.spinr{transform-origin:center;transform-box:fill-box;animation:spin 38s linear infinite reverse}
.drift{animation:drift 9s ease-in-out infinite}
.wob{transform-box:view-box;transform-origin:50% 50%;animation:wob 9s ease-in-out infinite alternate}
.lay1{animation:sepT 1.9s cubic-bezier(.2,.8,.2,1) .35s both}
.lay3{animation:sepB 1.9s cubic-bezier(.2,.8,.2,1) .35s both}
.scan1{animation-delay:0s}.scan2{animation-delay:.45s}.scan3{animation-delay:.9s}
.fadein{opacity:0;animation:fadein .8s ease 1.7s forwards}
.rise{animation:rise 2.6s linear infinite}
.blink{animation:blink 1.4s ease-in-out infinite}
.sn{animation:snp 2.6s ease-in-out infinite}
.marquee{display:flex;width:max-content;animation:marquee 34s linear infinite}
@keyframes snp{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes scan{0%{transform:translateY(-140px)}100%{transform:translateY(1000px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes wob{from{transform:rotate(-2.5deg) translateY(4px)}to{transform:rotate(2.5deg) translateY(-12px)}}
@keyframes sepT{from{transform:translateY(0)}to{transform:translateY(-150px)}}
@keyframes sepB{from{transform:translateY(0)}to{transform:translateY(150px)}}
@keyframes fadein{to{opacity:1}}
@keyframes rise{0%{transform:translateY(150px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(-150px);opacity:0}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* copy buttons: copy icon swaps to a tick */
.ic-copy,.ic-tick{transition:opacity .2s}
.ic-tick{opacity:0}
.cp.on .ic-copy{opacity:0}
.cp.on .ic-tick{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pulse,.scan,.spin,.spinr,.drift,.marquee,.wob,.lay1,.lay3,.rise,.blink,.sn{animation:none}
  .fadein{animation:none;opacity:1}
  .lay1{transform:translateY(-150px)}
  .lay3{transform:translateY(150px)}
}