@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/GeistMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/GeistMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#010101; --fg:#f1f0ea; --t2:#b0b0a9; --t3:#6c6e6b; --t4:#565654;
  --key:#8b8d89;
  --line:rgba(241,240,234,.13); --line-2:rgba(241,240,234,.26);
  --hd:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --lb:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --mx:clamp(24px,6vw,160px);
  --fmx:clamp(14px,2.2vw,46px);
  --ease:cubic-bezier(.7,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--hd);font-weight:400;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
canvas{display:block}
ul,ol{list-style:none}
sup{font-size:.6em;vertical-align:super;line-height:0}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;z-index:1300;padding:12px 18px;background:var(--fg);color:var(--bg);
  font-family:var(--lb);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;transform:translateY(-200%)}
.skip:focus{transform:none}

.label{font-family:var(--lb);text-transform:uppercase;font-size:.75rem;font-weight:500;
  letter-spacing:.03em;line-height:1.05;color:var(--t2)}
.label.dim{color:var(--t4)} .label.fg{color:var(--fg)}
.disp{font-family:var(--hd);font-weight:500;text-transform:uppercase;line-height:.92;letter-spacing:-.015em}
.step{display:flex;align-items:baseline;gap:16px}
.step .n{font-family:var(--lb);font-size:.75rem;letter-spacing:.03em;color:var(--fg)}
.sub{font-weight:400;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55;color:var(--t2);max-width:54ch}
a.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
a.ul:hover{background-size:100% 1px}
.ext{display:inline-block;width:.62em;height:.62em;vertical-align:.12em;margin-left:.15em}

.split .ln{display:block;overflow:hidden;padding:.12em 0 .06em;margin:-.12em 0 -.06em}
.split .in{display:block;will-change:transform}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js [data-split]:not(.is-split):not(.done){visibility:hidden}

.loader{position:fixed;inset:0;z-index:900;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,3.4vw,80px);animation:loader-failsafe 0s 4s forwards}
@keyframes loader-failsafe{to{visibility:hidden;opacity:0}}
.loader-fill{position:absolute;inset:0;z-index:0;background:var(--bg)}
#glload{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.loader-meta{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end}
#loader-pct{font-variant-numeric:tabular-nums}
.lbr{position:absolute;width:18px;height:18px;border:1px solid var(--line-2);z-index:2;pointer-events:none}
.lbr.tl{left:16px;top:16px;border-right:0;border-bottom:0}
.lbr.tr{right:16px;top:16px;border-left:0;border-bottom:0}
.lbr.bl{left:16px;bottom:16px;border-right:0;border-top:0}
.lbr.brr{right:16px;bottom:16px;border-left:0;border-top:0}
.pixel-exit{position:fixed;inset:0;z-index:960;pointer-events:none;width:100%;height:100%}

.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--fg);pointer-events:none;z-index:1100;mix-blend-mode:difference;
  margin:-4.5px 0 0 -4.5px;opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s,border-color .3s}
.has-cursor .cursor{opacity:1}
.cursor.on{width:54px;height:54px;margin:-27px 0 0 -27px;background:transparent;border:1px solid var(--fg)}
.cursor.hide,.has-cursor .cursor.hide{opacity:0}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input[type=password],.has-cursor input[type=text]{cursor:text!important}
@media(hover:none){.cursor{display:none}}

.grain-overlay{position:fixed;inset:-50%;pointer-events:none;z-index:1200;
  background-image:url(../img/grain.svg);background-repeat:repeat;background-size:256px 256px;
  mix-blend-mode:screen;opacity:.07;animation:grain 1.2s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)} 17%{transform:translate(-5%,-8%)} 33%{transform:translate(-12%,4%)}
  50%{transform:translate(7%,-11%)} 67%{transform:translate(-3%,12%)} 83%{transform:translate(10%,6%)} 100%{transform:translate(0,0)}
}

nav{position:relative;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px var(--mx)}
.brand{display:flex;align-items:center;gap:11px;justify-self:start}
.brand .brandmark{width:22px;height:22px}
.brand .wm{font-family:var(--hd);font-weight:700;letter-spacing:.04em;font-size:18px;line-height:1}
.brand .by{font-family:var(--lb);text-transform:uppercase;font-size:.62rem;font-weight:500;letter-spacing:.04em;line-height:1;color:var(--t2);padding-left:11px;border-left:1px solid var(--line-2)}
.nav-r{display:flex;gap:clamp(20px,2vw,34px);justify-self:end;align-items:center}
.nav-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--lb);text-transform:uppercase;font-size:.7rem;
  letter-spacing:.04em;color:var(--fg);border:1px solid var(--line-2);padding:8px 12px;line-height:1}
.nav-pill .dot{width:6px;height:6px;background:var(--fg);animation:blink 2.4s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--lb);text-transform:uppercase;letter-spacing:.03em;font-size:.8rem;font-weight:500;
  padding:17px 30px;background:var(--fg);color:var(--bg);border:1px solid var(--fg);position:relative;line-height:1.05;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.btn:hover{background:#fff;border-color:#fff}
.go{display:inline-flex;align-items:center;gap:22px;align-self:flex-start;font-family:var(--lb);text-transform:uppercase;letter-spacing:.03em;
  font-size:.75rem;line-height:1.05;color:var(--fg);border:1px solid var(--line-2);padding:22px 38px;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.go:hover{border-color:var(--fg);background:rgba(241,240,234,.05)}
.arw{display:inline-block;width:16px;height:10px;flex:none;transition:transform .4s var(--ease)}
.arw.rot{width:14px;height:14px}
.btn:hover .arw,.go:hover .arw{transform:translateX(6px)}
.go:hover .arw.rot{transform:rotate(180deg)}
.btn:disabled,.go:disabled{opacity:.45;pointer-events:none}

.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;margin:-.22em 0}
.roll>span{display:block;line-height:1.5;transition:transform .5s var(--ease)}
.roll>span:last-child{position:absolute;top:0;left:0;transform:translateY(100%)}
.has-roll:hover .roll>span:first-child,.has-roll.flash .roll>span:first-child{transform:translateY(-100%)}
.has-roll:hover .roll>span:last-child,.has-roll.flash .roll>span:last-child{transform:translateY(0)}

.spec .r{display:grid;grid-template-columns:minmax(86px,24%) 1fr;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec .k{font-family:var(--lb);text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;color:var(--key);line-height:1.3}
.spec .v{font-family:var(--lb);text-transform:uppercase;font-size:.78rem;letter-spacing:.015em;color:var(--fg);line-height:1.4}

.cfield{display:flex;flex-direction:column;gap:9px}
.cfield label{display:flex;align-items:baseline;gap:11px;font-family:var(--lb);text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;color:var(--t2)}
.cfield label .fi{color:var(--key);font-size:.66rem}
.cfield input{background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--fg);font-family:var(--hd);font-size:1.02rem;padding:11px 0;outline:none;border-radius:0;
  transition:border-color .35s var(--ease)}
.cfield input::placeholder{color:var(--t4)}
.cfield input:focus{border-color:var(--fg)}
.cfield input:focus-visible{outline:none}

.frame{position:absolute;inset:0 var(--fmx);z-index:4;pointer-events:none}
.frame i{position:absolute;background:var(--line-2);transition:transform 1.4s var(--ease)}
.frame .ht{top:0;left:0;right:0;height:1px;transform-origin:left}
.frame .hb{bottom:0;left:0;right:0;height:1px;transform-origin:left}
.frame .vl{top:0;bottom:0;left:0;width:1px;transform-origin:top}
.frame .vr{top:0;bottom:0;right:0;width:1px;transform-origin:top}
.frame b{position:absolute;width:12px;height:12px;transition:opacity .6s var(--ease) .9s}
.frame b::before,.frame b::after{content:"";position:absolute;background:var(--t2)}
.frame b::before{left:0;right:0;top:5.5px;height:1px}
.frame b::after{top:0;bottom:0;left:5.5px;width:1px}
.frame b.tl{top:-6px;left:-6px}
.frame b.tr{top:-6px;right:-6px}
.frame b.bl{bottom:-6px;left:-6px}
.frame b.br{bottom:-6px;right:-6px}
.js .frame .ht,.js .frame .hb{transform:scaleX(0)}
.js .frame .vl,.js .frame .vr{transform:scaleY(0)}
.js .frame b{opacity:0}
.js .frame.in i{transform:none}
.js .frame.in b{opacity:1}

@media(prefers-reduced-motion:reduce){
  .nav-pill .dot,.grain-overlay{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .frame i{transform:none}
  .js .frame b{opacity:1}
  .js [data-split]:not(.is-split):not(.done){visibility:visible}
  .loader{display:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}