@font-face{font-family:"Archivo X";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --paper:#f6f4ef;--ink:#141414;--mute:#5d5a55;--line:rgba(20,20,20,.16);
  --c0:#ff5a36;--c1:#ffcf3d;--c2:#2ec4a0;--c3:#3a5cf0;--c4:#ff9ec4;
  --g:clamp(20px,5.5vw,40px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --radius:clamp(20px,2.6vw,36px);
  --disp:"Archivo X",Arial,sans-serif;
  --body:"Archivo X",Helvetica,Arial,sans-serif;
  --fs:clamp(16px,.55vw + 11px,19px);
  --top:clamp(64px,7vw,80px);
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme=dark]{--paper:#121212;--ink:#f3f1ec;--mute:#a7a39c;--line:rgba(243,241,236,.18)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--fs);line-height:1.45;font-stretch:100%;font-weight:420;overflow-x:hidden;transition:background-color .5s,color .5s;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0 0 1em}
[hidden]{display:none!important}
.skip{position:fixed;left:var(--g);top:var(--s3);transform:translateY(-300%);z-index:99;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);border-radius:99px}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--c3);outline-offset:3px}
.wrap{padding-inline:var(--g);max-width:1920px;margin-inline:auto;width:100%}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--g);pointer-events:none}
.top>*{pointer-events:auto}
.top::before{content:"";position:absolute;inset:0 0 -12px;z-index:-1;pointer-events:none;background:linear-gradient(var(--paper) 55%,transparent);opacity:0;transition:opacity .4s}
.scrolled .top::before{opacity:1}
.top__name{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(13px,1vw,16px);letter-spacing:.01em;text-decoration:none;line-height:44px;white-space:nowrap}
.top__right{position:relative;display:flex;align-items:center;gap:var(--s2)}
.feats{display:flex;gap:var(--s2)}
.fbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--ink);transition:transform .3s var(--ease),background .3s}
.fbtn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fbtn svg .fill{fill:var(--ink)}
.fbtn:hover{transform:scale(1.08)}
.fbtn[aria-pressed=true]{background:var(--c1)}
.fbtn.is-new{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.xp{min-width:72px;height:44px;padding:0 var(--s4);border-radius:99px;background:var(--ink);color:var(--paper);font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:.02em;transition:transform .3s var(--ease)}
.xp:hover,.xp[aria-expanded=true]{transform:scale(1.05)}
.xp.bump{animation:bump .6s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}}
.legend{position:absolute;right:0;top:calc(100% + var(--s3));width:min(340px,calc(100vw - 2*var(--g)));background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--s5);padding:var(--s5);box-shadow:6px 6px 0 var(--ink);font-size:15px;transform-origin:top right;animation:legendIn .45s var(--ease)}
@keyframes legendIn{from{opacity:0;transform:scale(.9) translateY(-8px)}}
.legend__h{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:20px;line-height:1.1;margin:0 0 var(--s3)}
.legend__p{color:var(--mute);margin-bottom:var(--s4)}
.legend__sec{border-top:1px solid var(--line);padding:var(--s3) 0}
.legend__sec h4{font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em;margin:0 0 var(--s2)}
.legend__sec ul{list-style:none;margin:0;padding:0;line-height:1.6}
.skipbox{margin-top:var(--s6);padding:var(--s5);border:1.5px dashed var(--ink);border-radius:var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.skipbox p{margin:0;flex:1 1 180px}
.skipbox--sm{margin-top:var(--s3);padding:var(--s4);border-radius:var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s5);border-radius:99px;background:var(--ink);color:var(--paper);font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--c0)}

/* toasts */
.toasts{position:fixed;z-index:50;right:var(--g);top:calc(var(--top) + var(--s2));display:flex;flex-direction:column;gap:var(--s2);align-items:flex-end;pointer-events:none;max-width:calc(100vw - 2*var(--g))}
.toast{background:var(--c1);color:#141414;border:1.5px solid #141414;border-radius:var(--s4);padding:var(--s3) var(--s4);box-shadow:4px 4px 0 #141414;animation:toastIn .6s var(--ease) both}
.toast.out{animation:toastOut .5s var(--ease) both}
.toast b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.02em}
.toast span{font-size:14px}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.9) rotate(-3deg)}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;padding:var(--top) var(--g) var(--g)}
.hero__card{position:relative;height:100%;border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;background:var(--c1);isolation:isolate}
.hero__gl,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero__fallback{display:none;inset:-50%;width:200%;height:200%;background:repeating-conic-gradient(from 0deg,var(--c0) 0 7.5deg,var(--c1) 7.5deg 15deg,var(--c2) 15deg 22.5deg,var(--c3) 22.5deg 30deg);animation:spin 60s linear infinite}
.no-gl .hero__fallback{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__title{margin:0;padding:0 var(--g);max-width:15ch;text-align:center;font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(32px,5.4vw,100px);line-height:1;letter-spacing:-.01em;color:#141414;-webkit-text-stroke:.09em #fff;paint-order:stroke fill;filter:drop-shadow(.05em .06em 0 #141414);transform:translateY(-4%)}
.begin{position:absolute;left:50%;bottom:calc(var(--g) + var(--s6));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--s3);transition:opacity .6s,transform .6s var(--ease)}
.begin.done{opacity:0;transform:translate(-50%,20px);pointer-events:none}
.begin__label{font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:#141414;background:#fff;padding:var(--s1) var(--s3);border-radius:99px;border:1.5px solid #141414}
.begin__track{position:relative;display:block;width:clamp(200px,24vw,260px);height:52px;border-radius:99px;background:#fff;border:1.5px solid #141414;box-shadow:4px 4px 0 #141414;overflow:hidden}
.begin__track::before{content:"";position:absolute;inset:0;width:calc(50px + var(--p) * (100% - 50px));background:var(--c0);border-radius:99px}
.begin__track input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0 4px;background:none;-webkit-appearance:none;appearance:none;cursor:grab;touch-action:none}
.begin__track input::-webkit-slider-runnable-track{height:100%;background:none}
.begin__track input::-moz-range-track{height:100%;background:none}
.begin__track input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:2px;border-radius:50%;background:#141414;border:0;box-shadow:inset 0 0 0 4px #fff}
.begin__track input::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:#141414;border:0}
.begin__track input:active{cursor:grabbing}
.cue{position:fixed;z-index:30;left:50%;bottom:var(--s5);transform:translate(-50%,20px);opacity:0;pointer-events:none;font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s4);border-radius:99px;display:flex;align-items:center;gap:var(--s2);transition:opacity .5s,transform .5s var(--ease)}
.cue.on{opacity:1;transform:translate(-50%,0)}
.cue__arrow{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{translate:0 3px}}

/* wave letters */
.wave .w{display:inline-block;white-space:nowrap}
.wave .l{display:inline-block;animation:wv 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.11s)}
@keyframes wv{0%,100%{transform:translateY(-.04em) rotate(-2deg)}50%{transform:translateY(.05em) rotate(2deg)}}
.wave.in .l{animation-name:wv,lin;animation-duration:2.6s,.8s;animation-timing-function:ease-in-out,var(--ease);animation-iteration-count:infinite,1}

/* levels */
.level{position:relative;padding-top:var(--s10)}
.level.reveal{animation:lvlIn 1.1s var(--ease) both}
@keyframes lvlIn{from{opacity:0;transform:translateY(60px)}}
.intro{align-items:start;padding-bottom:var(--s9)}
.intro__text{grid-column:1/span 6;max-width:36em}
.intro__text p{font-size:clamp(18px,.9vw + 10px,24px);line-height:1.38}
.count{grid-column:8/span 5;justify-self:end;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(110px,17vw,300px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--ink);letter-spacing:-.04em}
.stripes{display:block;width:100%;height:clamp(110px,14vw,220px)}
.title{margin:var(--s9) 0 var(--s9);text-align:center;font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,6.2vw,112px);line-height:.98;letter-spacing:-.01em;color:var(--ink);-webkit-text-stroke:.08em var(--paper);paint-order:stroke fill;filter:drop-shadow(.045em .055em 0 var(--c0));text-wrap:balance}

/* products */
.products{align-items:start;padding-bottom:var(--s9)}
.products__desc{grid-column:1/span 4;max-width:28em}
.products__more{grid-column:1/span 4;grid-row:2;align-self:end;color:var(--mute);font-size:15px;max-width:28em;padding-top:var(--s6)}
.products__more a{color:var(--ink)}
.plist{grid-column:6/span 7;grid-row:1/span 2;list-style:none;margin:0;padding:0;border-bottom:1.5px solid var(--ink)}
.prow{border-top:1.5px solid var(--ink)}
.prow a{position:relative;display:grid;grid-template-columns:3.2em 1fr auto;align-items:center;gap:var(--s4);min-height:clamp(72px,7vw,104px);padding:var(--s4) 0;text-decoration:none;overflow:hidden}
.prow a::before{content:"";position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.prow{position:relative;isolation:isolate}
.prow a:hover::before,.prow a:focus-visible::before{transform:scaleY(1)}
.prow a:hover,.prow a:focus-visible{color:#141414}
.prow__n{font-family:var(--disp);font-stretch:125%;font-weight:700;font-size:13px;padding-left:var(--s2)}
.prow__t{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.7vw,44px);line-height:1;transition:transform .5s var(--ease)}
.prow a:hover .prow__t{transform:translateX(var(--s3))}
.prow__s{font-size:14px;text-align:right;padding-right:var(--s2);color:inherit;opacity:.8}
.sticker{position:fixed;left:0;top:0;z-index:60;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;pointer-events:none;display:grid;place-items:center;background:repeating-conic-gradient(var(--c0) 0 10deg,var(--c1) 10deg 20deg);border:2px solid #141414;transform:scale(0) rotate(-20deg);transition:transform .45s var(--ease);will-change:transform,left,top}
.sticker span{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:20px;color:#141414;-webkit-text-stroke:5px #fff;paint-order:stroke fill;transform:rotate(-12deg)}
.sticker.on{transform:scale(1) rotate(8deg)}
@media (hover:none){.sticker{display:none}}

/* series */
.series{padding-bottom:var(--s10)}
.series__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);padding-bottom:var(--s6);border-top:1.5px solid var(--ink);padding-top:var(--s6)}
.series__title{margin:0;font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(24px,3.2vw,52px);line-height:1;max-width:14ch}
.series__hint{margin:0;display:flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.series__hint i{font-style:normal;font-size:18px;animation:hint 1.4s ease-in-out infinite}
@keyframes hint{50%{transform:translateX(-6px)}}
.series__view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--g)}
.series__view::-webkit-scrollbar{display:none}
.series__view.drag{cursor:grabbing}
.series__view.drag a{pointer-events:none}
.series__track{display:flex;gap:var(--s7);margin:0;padding:0 var(--g);list-style:none;width:max-content}
.sgroup{position:relative;display:flex;gap:var(--s4);padding-top:var(--s6)}
.sgroup__label{position:absolute;left:-.04em;top:0;z-index:2;pointer-events:none;font-family:var(--disp);font-stretch:125%;font-weight:900;font-size:clamp(90px,11vw,180px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--ink);letter-spacing:-.04em;mix-blend-mode:normal}
.stile{position:relative;flex:none;width:clamp(220px,22vw,320px)}
.stile a{display:block;text-decoration:none}
.stile__art{position:relative;aspect-ratio:4/5;border-radius:var(--s5);border:1.5px solid var(--ink);overflow:hidden;background:var(--a);transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.stile a:hover .stile__art{transform:scale(.97) rotate(-1deg);border-radius:var(--s7)}
.stile__art i{position:absolute;inset:0}
.stile__name{position:absolute;left:var(--s4);bottom:var(--s3);font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(40px,4vw,64px);line-height:1;color:#141414;-webkit-text-stroke:.12em #fff;paint-order:stroke fill}
.stile__meta{display:flex;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);font-size:14px}
.stile__meta b{font-weight:600}
.stile__meta span{color:var(--mute);text-align:right}
.series__bar{height:3px;background:var(--line);border-radius:3px;margin-top:var(--s6);overflow:hidden}
.series__bar span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* stages */
.stage{position:relative;height:clamp(440px,70vh,760px);border-radius:var(--radius);border:1.5px solid var(--ink);overflow:hidden;background:var(--paper) radial-gradient(circle,var(--line) 1.2px,transparent 1.6px) 0 0/22px 22px;touch-action:pan-y}
.stage__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.info{position:absolute;left:var(--s4);top:var(--s4);z-index:3;display:flex;align-items:flex-start;gap:var(--s3);max-width:calc(100% - 2*var(--s4))}
.info__btn{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:18px}
.info__btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.info__box{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--s4);padding:var(--s3) var(--s4);max-width:300px;font-size:15px;animation:legendIn .4s var(--ease)}
.info__box h3{margin:0 0 var(--s1);font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:15px}
.info__box p{margin:0}
.btn--stage{position:absolute;right:var(--s4);bottom:var(--s4);z-index:3}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;padding:var(--s1) var(--s3);border-radius:99px;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}
.toggles{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:3;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.tg{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:99px;border:1.5px solid var(--ink);background:var(--paper);font-size:14px;transition:background .3s,color .3s}
.tg::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--k);border:1.5px solid var(--ink)}
.tg b{font-family:var(--disp);font-stretch:125%;font-weight:900}
.tg[aria-pressed=false]{opacity:.45}
.tg[aria-pressed=false]::before{background:transparent}

/* footer */
.foot{padding-bottom:var(--g)}
.foot .title{margin-top:var(--s9)}
.foot__grid{align-items:end;row-gap:var(--s7);padding-top:var(--s4)}
.foot__text{grid-column:1/span 6;font-size:clamp(18px,.9vw + 10px,24px);line-height:1.38;max-width:30em}
.foot__links{grid-column:8/span 5;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--ink)}
.foot__links li{border-bottom:1.5px solid var(--ink)}
.foot__links li:nth-child(odd){border-right:1.5px solid var(--ink)}
.foot__links a{display:flex;align-items:center;min-height:64px;padding:0 var(--s4);font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(14px,1.2vw,18px);text-decoration:none;transition:background .3s}
.foot__links a:hover{background:var(--c1);color:#141414}
.foot__sign{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1.5px solid var(--ink);padding-top:var(--s4);font-size:14px;color:var(--mute)}

@media (max-width:900px){
  .intro__text,.products__desc,.products__more,.foot__text{grid-column:1/-1}
  .count{grid-column:1/-1;grid-row:1;justify-self:end;margin-bottom:var(--s5)}
  .intro__text{grid-row:2}
  .plist{grid-column:1/-1;grid-row:auto;margin-top:var(--s5)}
  .products__more{grid-row:auto;padding-top:var(--s5)}
  .foot__links{grid-column:1/-1}
}
@media (max-width:600px){
  .level{padding-top:var(--s8)}
  .intro{padding-bottom:var(--s8)}
  .title{margin:var(--s8) 0}
  .prow a{grid-template-columns:2.2em 1fr;row-gap:var(--s1)}
  .prow__s{grid-column:2;text-align:left;padding:0}
  .series__head{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .series__track{gap:var(--s6)}
  .stile{width:min(70vw,260px)}
  .legend .feats{margin-bottom:var(--s4)}
  .legend .feats:not(:has(.fbtn:not([hidden]))){display:none}
  .stage{height:clamp(440px,72svh,620px)}
  .btn--stage{right:var(--s3);bottom:var(--s3)}
  .info{left:var(--s3);top:var(--s3)}
  .toggles{left:var(--s3);right:var(--s3);bottom:var(--s3)}
  .tg{padding:0 var(--s3);font-size:13px}
  .foot__sign{flex-direction:column;gap:var(--s1)}
  .skipbox{padding:var(--s4)}
  .skipbox .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .wave .l,.hero__fallback,.series__hint i,.cue__arrow{animation:none!important}
  .level.reveal{animation:none}
}

.intro__text a,.products__more a,.foot__text a{display:inline-block;padding-block:12px;margin-block:-12px;text-underline-offset:3px}