@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-800i.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:Bebas;src:url(/fonts/BebasNeue-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --pink:#ff16a4;
  --pink-d:#c90a7f;
  --yellow:#f6e94b;
  --lime:#c8ff3e;
  --cyan:#3fe4ff;
  --ink:#16151c;
  --ink-2:#26252e;
  --paper:#efeff1;
  --white:#fff;
  --hdr:clamp(64px,9.4vh,120px);
  --rail:clamp(110px,14vh,150px);
  --gut:clamp(20px,2.6vw,66px);
  --body:"Barlow SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --disp:Bebas,"Barlow SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.2,0,.12,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a{touch-action:manipulation}
body{background:#0d3f9c;color:var(--white);font:500 16px/1.5 var(--body);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.loader{position:fixed;inset:0;z-index:100;background:#ececee url(/img/paper.webp) center/cover;overflow:hidden;transition:opacity .5s ease,visibility .5s}
.loader.done{opacity:0;visibility:hidden}
.loader img{position:absolute;pointer-events:none}
.ld-tl{left:-.5%;top:0;width:17.4%}
.ld-bl{left:0;bottom:6%;width:10%}
.ld-br{right:-.4%;bottom:-5%;width:27.3%}
.ld-usual{left:10.4%;top:21.3%;width:20.2%}
.ld-road{left:79.6%;top:13.1%;width:13.4%}
.ld-bar{position:absolute;left:29%;top:50%;width:47.7%;height:clamp(28px,3.2vw,62px)}
.ld-track{position:absolute;left:0;top:0;width:87.8%;height:100%;background:url(/img/bar-track.webp) center/100% 100%}
.ld-fill{position:absolute;left:1.3%;top:16%;height:60%;width:0;background:url(/img/bar-fill.webp) left center/auto 100% repeat-x;transition:width .25s linear}
.ld-rider{position:absolute;bottom:62%;left:0;width:clamp(90px,11vw,212px);aspect-ratio:298/166;background:url(/img/courier-sprite.webp) 0 0/800% 100%;animation:ride .6s steps(8,jump-none) infinite;transform:translateX(-40%);transition:left .25s linear}
.ld-pct{position:absolute;right:0;top:50%;transform:translateY(-50%) skewX(-8deg);font:400 clamp(28px,3.6vw,64px)/1 var(--disp);color:var(--ink)}
.ld-welcome{position:absolute;left:0;right:0;top:56.5%;margin:0;display:flex;align-items:center;justify-content:center;gap:18px;font:700 clamp(11px,1vw,18px)/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--ink)}
.ld-welcome i{width:30px;height:3px;background:var(--ink)}
@keyframes ride{to{background-position:100% 0}}

.top{position:fixed;left:0;right:0;top:0;z-index:40;height:var(--hdr);display:flex;align-items:center;gap:24px;padding:0 var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.brand img{width:clamp(108px,10.7vw,206px);height:auto}
.top-links{flex:1;display:flex;align-items:center;gap:clamp(14px,2vw,40px);font:500 clamp(11px,.85vw,16px)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);min-width:0}
.top-links>span{color:var(--yellow);font-weight:700}
.top-links i{width:1px;height:16px;background:rgba(255,255,255,.6)}
.top-links a{position:relative;padding:8px 0;transition:color .2s}
.top-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
@media (hover:hover){.top-links a:hover{color:var(--white)}.top-links a:hover::after{transform:none}}
body[data-stage="trailer"] .top-links a[data-go="trailer"]::after,body[data-stage="map"] .top-links a[data-go="map"]::after,body[data-stage="rules"] .top-links a[data-go="rules"]::after{transform:none}
.top-actions{display:flex;align-items:center;gap:clamp(26px,2.4vw,46px);padding-right:clamp(14px,1.2vw,24px)}
.me.plate{--h:46px;gap:12px;min-width:0;padding:0 calc(var(--h)*.62) 0 calc(var(--h)*.34);cursor:default}
.me img{position:relative;z-index:1;width:32px;height:32px;object-fit:cover;background:var(--ink-2);border-radius:50%;box-shadow:0 0 0 2px var(--pink),0 0 0 4px var(--ink)}
.me span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 italic 16px/1 var(--body);text-transform:uppercase}
.me button{position:relative;z-index:1;padding:7px 9px 6px;background:var(--pink);color:var(--white);font:800 italic 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;transform:skewX(-10deg);transition:background-color .15s}
@media (hover:hover){.me button:hover{background:var(--yellow);color:var(--ink)}}

.plate{--h:52px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:var(--h);min-width:calc(var(--h)*3.2);padding:0 calc(var(--h)*.5);font:800 italic calc(var(--h)*.36)/1 var(--body);text-transform:uppercase;letter-spacing:.01em;color:var(--white);white-space:nowrap;user-select:none;transition:transform .15s var(--ease)}
.plate{background:var(--plate) center/100% 100% no-repeat}
.plate::before{content:"";position:absolute;z-index:0;left:-14.6%;width:129.4%;top:-42.5%;height:179.3%;background:var(--strip) 0 0/1100% 100% no-repeat;opacity:0;pointer-events:none}
.plate::after{content:"";position:absolute;z-index:1;right:calc(var(--h)*-.3);top:calc(var(--h)*-.2);height:calc(var(--h)*1.05);aspect-ratio:.7;background:url(/img/spark.svg) center/contain no-repeat;pointer-events:none;transform-origin:50% 80%;transition:opacity .2s}
.plate svg{width:1.05em;height:1.05em;flex:none}
.plate-pink{--plate:url(/img/plate-pink.svg);--strip:url(/img/pink-sprite.webp)}
.plate-black{--plate:url(/img/plate-black.svg);--strip:url(/img/black-sprite.webp)}
.plate>span,.plate>svg{position:relative;z-index:1}
@media (hover:hover){
  .plate:hover::before{opacity:1;animation:plate-hover .458s steps(11,jump-none) both}
  .plate:hover::after{opacity:0;transition:none}
}
@keyframes plate-hover{from{background-position:0 0}to{background-position:100% 0}}
.plate-sm::after{height:calc(var(--h)*1.05);top:calc(var(--h)*-.26);right:calc(var(--h)*-.5)}
.plate-sm{padding-right:calc(var(--h)*.62)}
.plate-sm{--h:42px}
.plate-lg{--h:60px}
.plate-xl{--h:clamp(84px,7.4vw,112px)}
.plate-xl svg{width:.9em;height:.9em}
.login-pop{position:relative;isolation:isolate;width:min(100% - 40px,640px);margin:0 auto 0 40px;padding:clamp(48px,8vw,72px) 10% clamp(44px,7vw,64px) 8%;color:var(--ink);display:grid;gap:16px;justify-items:start}
.login-pop::before{content:"";position:absolute;z-index:-1;top:0;height:100%;left:-13%;width:113%;background:url(/img/frame.webp) center/100% 100% no-repeat}
.login-pop .hx{color:var(--ink);text-shadow:none;font-size:clamp(38px,4vw,64px)}
.login-pop .hx em{color:var(--pink)}
.login-pop p{margin:0;font:600 clamp(16px,1.2vw,20px)/1.45 var(--body);max-width:26em}
.login-pop .plate{margin:10px 0 0 10px}
.plate:active{transform:translateY(2px)}
@media (hover:hover){

}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-4px,2px) skewX(-4deg)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px) skewX(3deg)}80%{transform:translate(2px,0)}100%{transform:translate(0)}}
@keyframes zap{0%{transform:none}35%{transform:rotate(-14deg) scale(1.18)}70%{transform:rotate(8deg) scale(.96)}100%{transform:none}}

.kicker{display:inline-block;padding:.75em 1.5em .7em 1.2em;background:url(/img/title-plate.webp) center/100% 100% no-repeat;color:var(--ink);font:800 italic clamp(13px,1vw,18px)/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.hx{margin:0;font:800 italic clamp(40px,4.6vw,92px)/.92 var(--body);text-transform:uppercase;letter-spacing:-.01em;color:var(--white);text-shadow:0 .045em 0 rgba(12,10,40,.45)}
.hx em{font-style:inherit;color:var(--yellow)}
.hx.big{font-size:clamp(48px,6vw,120px)}
.lede{margin:0;font:500 clamp(17px,1.25vw,24px)/1.45 var(--body);max-width:30em;text-shadow:0 1px 6px rgba(5,20,60,.55)}
.fine{margin:0;font:500 13px/1.5 var(--body);opacity:.8;max-width:34em}
.slip{display:inline-block;padding:9px 16px;background:var(--yellow);color:var(--ink);font:800 italic 15px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-3deg);clip-path:polygon(2% 0,100% 6%,98% 100%,0 94%)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px}

.stages{position:fixed;inset:0;z-index:1}
.stage{position:absolute;inset:0;overflow:hidden;display:none;opacity:0;transition:opacity .45s ease}
.stage.on{display:block}
.stage.show{opacity:1}
.stage-bg{position:absolute;inset:0;background:center/cover no-repeat}

.in-l,.in-b{opacity:0;transition:opacity .6s ease,transform .7s var(--ease)}
.in-l{transform:translateX(-40px)}
.in-b{transform:translateY(30px)}
.stage.show .in-l,.stage.show .in-b{opacity:1;transform:none}
.stage.show .in-l:nth-child(2){transition-delay:.06s}
.stage.show .in-l:nth-child(3){transition-delay:.12s}
.stage.show .in-b{transition-delay:.18s}

.scene{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.layer{position:absolute;will-change:transform}
.layer img{width:100%;height:auto}
.l-bg{left:-.2%;top:-.21%;width:100.47%}
.l-courier{left:50.04%;top:-.21%;width:49.06%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,40,120,.55),rgba(6,40,120,.1) 48%,transparent 62%),linear-gradient(0deg,rgba(18,8,40,.55),transparent 32%);pointer-events:none}
.hero-copy{position:absolute;z-index:2;left:var(--gut);top:var(--hdr);bottom:var(--rail);width:min(60vw,1100px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(12px,1.8vh,22px)}
.brandline{position:fixed;right:calc(var(--gut) + 64px);bottom:calc(var(--rail) + 24px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:1}
.st-home .brandline .ea{margin:0}
.farlands{width:clamp(260px,22vw,440px);height:auto;filter:drop-shadow(0 4px 0 rgba(10,30,90,.35))}
.hx.mega{font-size:clamp(56px,6.4vw,128px);line-height:.86}
.styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(100%,720px);margin:clamp(4px,1vh,14px) 0 0;padding:0;list-style:none}
.styles li{position:relative;overflow:hidden;background:var(--ink);border:2px solid var(--ink);transform:skewX(-6deg)}
.styles img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.9}
.styles b{position:absolute;right:8px;top:4px;font:400 30px/1 var(--disp);color:var(--c);text-shadow:2px 2px 0 var(--ink)}
.styles span{display:block;padding:8px 10px 9px;font:800 italic clamp(13px,1vw,17px)/1 var(--body);text-transform:uppercase;color:var(--white);border-top:3px solid var(--c)}
.last-run{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.ea{margin:0 0 .5em;display:flex;align-items:center;gap:.9em;font:800 italic clamp(13px,1.05vw,20px)/1 var(--body);letter-spacing:.62em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.ea b{display:inline-block;padding:.25em .2em .25em .8em;background:var(--white);color:#1d4fd0}

.quiz-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,30,92,.86),rgba(10,30,92,.5) 46%,rgba(10,30,92,.12) 78%);pointer-events:none}
.qbgs,.rbg{position:absolute;inset:0}
.qbg{position:absolute;inset:0;display:none;background:center/cover no-repeat}
.qbg.on{display:block;animation:fadein .6s ease both}
.rbg{background:center/cover no-repeat}
.view{position:absolute;inset:var(--hdr) var(--gut) var(--rail);display:grid;align-items:center;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}

.v-q{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,80px)}
.q-side{display:grid;gap:18px;justify-items:start;align-content:center}
.q-count{display:flex;align-items:baseline;gap:10px}
.q-count b{font:400 clamp(72px,7.2vw,140px)/.8 var(--disp);font-weight:400;color:transparent;-webkit-text-stroke:2px var(--white)}
.q-count span{font:400 clamp(26px,2.2vw,42px)/1 var(--disp);color:var(--yellow)}
.q-title{font-size:clamp(34px,3.4vw,68px);line-height:.98;max-width:13em;min-height:2.9em}
.q-road{position:relative;width:min(100%,560px);height:44px;margin-top:40px}
.q-track{position:absolute;inset:0;background:url(/img/bar-track.webp) center/100% 100%}
.q-track i{position:absolute;left:1.4%;top:17%;height:58%;width:0;background:url(/img/bar-fill.webp) left center/auto 100% repeat-x;transition:width .55s var(--ease)}
.q-rider{position:absolute;bottom:72%;left:0;width:130px;aspect-ratio:298/166;background:url(/img/courier-sprite.webp) 0 0/800% 100%;transform:translateX(-30%);transition:left .55s var(--ease)}
.q-rider.go{animation:ride .5s steps(8,jump-none) 2}
.q-panel{position:relative;isolation:isolate;padding:clamp(40px,5.4vh,64px) 9% clamp(40px,5.4vh,62px) 7%;color:var(--ink)}
.q-panel::before,.fac::before{content:"";position:absolute;z-index:-1;top:0;height:100%;left:-13%;width:113%;background:url(/img/frame.webp) center/100% 100% no-repeat}
.q-panel-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink);font:400 clamp(17px,1.2vw,22px)/1 var(--disp);letter-spacing:.08em}
.q-panel-head span:first-child{color:var(--pink-d)}
.q-opts{display:grid;gap:12px;margin:20px 0 10px}
.opt{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:76px;padding:14px 22px 14px 14px;text-align:left;background:rgba(255,255,255,.72);border:2px solid var(--ink);color:var(--ink);font:700 clamp(17px,1.2vw,22px)/1.3 var(--body);transition:transform .16s var(--ease),background-color .16s,border-color .16s,color .16s;opacity:0;transform:translateX(26px)}
.q-opts.in .opt{opacity:1;transform:none}
.q-opts.in .opt:nth-child(2){transition-delay:.04s}
.q-opts.in .opt:nth-child(3){transition-delay:.08s}
.q-opts.in .opt:nth-child(4){transition-delay:.12s}
.opt b{flex:none;display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:var(--white);font:400 30px/1 var(--disp);transform:skewX(-8deg)}
.opt.sel{background:var(--pink);border-color:var(--pink);color:var(--white)}
.opt.sel b{background:var(--yellow);color:var(--ink)}
@media (hover:hover){.q-opts.in .opt:hover{transform:translateX(6px);border-color:var(--pink);background:#fff}.q-opts.in .opt.sel:hover{background:var(--pink)}}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.q-back{display:inline-flex;align-items:center;gap:6px;padding:10px 6px;font:800 italic 16px/1 var(--body);text-transform:uppercase;color:var(--ink-2)}
.q-back svg{width:18px;height:18px}
.q-back:disabled{opacity:.3;cursor:default}

.v-result{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,80px);align-items:start;padding:clamp(10px,2vh,24px) 0 30px}
.r-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.r-tabs button{position:relative;padding:11px 16px;background:var(--ink);font:800 italic 15px/1 var(--body);text-transform:uppercase;color:var(--white);border-bottom:3px solid var(--c);transform:skewX(-8deg);transition:background-color .2s}
.r-tabs button.on{background:var(--pink)}
.r-tabs em{position:absolute;right:-6px;top:-10px;padding:3px 6px;background:var(--yellow);color:var(--ink);font:400 13px/1 var(--disp);letter-spacing:.06em;font-style:normal}
@media (hover:hover){.r-tabs button:not(.on):hover{background:#2c2b36}}
.explore{grid-column:1/-1;display:grid;gap:14px;margin-top:8px}
.explore-h{font:400 clamp(24px,1.8vw,34px)/1 var(--disp);letter-spacing:.08em;color:var(--yellow)}
.explore-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;display:block;overflow:hidden;border:3px solid var(--ink);background:var(--ink)}
.tile img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .4s var(--ease)}
.tile span{position:absolute;left:0;bottom:0;padding:10px 16px;background:var(--ink);font:800 italic clamp(15px,1.2vw,22px)/1 var(--body);text-transform:uppercase}
@media (hover:hover){.tile:hover img{transform:scale(1.05)}.tile:hover span{background:var(--pink)}}
.r-info{display:grid;gap:14px;justify-items:start;align-content:center;max-width:720px}
.r-name{font-size:clamp(52px,5.6vw,112px);color:var(--yellow);text-shadow:.04em .05em 0 var(--ink)}
.r-tag{margin:0;font:800 italic clamp(18px,1.4vw,26px)/1.1 var(--body);letter-spacing:.04em;text-transform:uppercase}
.r-traits{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.r-traits li{padding:7px 14px;background:var(--ink);font:700 15px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;transform:skewX(-8deg)}
.r-desc{margin:0;font:500 clamp(18px,1.3vw,24px)/1.5 var(--body);max-width:30em;text-shadow:0 1px 6px rgba(5,20,60,.6)}
.r-info .row{margin-top:10px}
.r-crew{width:min(100%,520px);margin-top:8px}
.crew-box{display:grid;gap:10px;padding:16px 18px;background:rgba(14,13,24,.82);border-left:4px solid var(--pink)}
.crew-box p{margin:0;font:600 16px/1.4 var(--body)}
.crew-box .plate{justify-self:start;margin:8px 0 4px 8px}
.crew-h{font:400 22px/1 var(--disp);letter-spacing:.06em;color:var(--yellow)}
.bar{display:grid;grid-template-columns:150px 1fr 48px;align-items:center;gap:10px;font:700 14px/1 var(--body);text-transform:uppercase}
.bar i{display:block;height:12px;background:rgba(255,255,255,.14);transform:skewX(-14deg);overflow:hidden}
.bar i u{display:block;height:100%;width:0;background:var(--c,var(--pink));transition:width .9s var(--ease)}
.bar b{font:400 20px/1 var(--disp);text-align:right}
.bar.me-row{color:var(--yellow)}
.r-card{justify-self:center;position:sticky;top:0;width:min(100%,460px,calc((100vh - 290px)*.75))}
.r-card canvas{width:100%;height:auto;transform:rotate(-2deg);box-shadow:14px 16px 0 rgba(8,8,30,.4)}

.st-trailer .stage-bg{background-image:url(/img/trailer.webp)}
@media (min-width:900px) and (min-resolution:1.05dppx),(min-width:1921px){.st-trailer .stage-bg{background-image:url(/img/trailer-hd.webp)}.st-map .stage-bg{background-image:url(/img/map-hd.webp)}}
.trailer-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,40,.6),transparent 55%),linear-gradient(0deg,rgba(20,10,40,.6),transparent 40%)}
.trailer-copy{position:absolute;left:var(--gut);bottom:calc(var(--rail) + 4vh);display:grid;gap:20px;justify-items:start}
.play{position:relative;width:clamp(96px,7.4vw,142px);aspect-ratio:1;border-radius:50%;background:var(--pink);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,22,164,.5);transition:transform .2s var(--ease),box-shadow .3s}
.play svg{width:38%;height:38%;fill:var(--white);margin-left:6%}
@media (hover:hover){.play:hover{transform:scale(1.07);box-shadow:0 0 0 14px rgba(255,22,164,.25)}}

.st-map .stage-bg{background-image:url(/img/map.webp)}
.map-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,40,80,.55),transparent 34%),linear-gradient(0deg,rgba(5,30,60,.45),transparent 30%);pointer-events:none}
.map-copy{position:absolute;z-index:2;left:var(--gut);top:calc(var(--hdr) + 4vh);display:grid;gap:16px;justify-items:start}
.map-copy .hx{font-size:clamp(36px,3.6vw,72px)}
.markers{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.mk{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;--mw:clamp(64px,5.2vw,100px)}
.mk-shield{position:relative;width:var(--mw);aspect-ratio:1/1.08;display:grid;place-items:center;background:var(--ink);clip-path:polygon(50% 100%,8% 76%,0 12%,50% 0,100% 12%,92% 76%);transition:transform .2s var(--ease),background-color .2s}
.mk-shield img{width:62%;height:auto}
.mk-ring{position:absolute;left:50%;top:46%;width:225%;aspect-ratio:1;transform:translate(-50%,-50%);background:url(/img/marker-sprite.webp) 0 0/4800% 100%;opacity:0;pointer-events:none}
.mk-name{padding:5px 10px 4px;background:var(--ink);font:400 clamp(15px,1.05vw,20px)/1 var(--disp);letter-spacing:.06em;white-space:nowrap;transform:skewX(-8deg)}
.mk:focus-visible{outline:none}
.mk:focus-visible .mk-shield,.mk.act .mk-shield{background:var(--pink)}
@media (hover:hover){.mk:hover .mk-shield{background:var(--pink);transform:scale(1.08)}.mk:hover .mk-ring{opacity:1;animation:ring .8s steps(48,jump-none) forwards}}
@keyframes ring{to{background-position:100% 0}}

.rules{position:absolute;inset:0}
.rule{position:absolute;inset:0;display:none;background:var(--g) center/cover}
.rule.on{display:block;animation:fadein .5s ease both}
.rule img{width:100%;height:100%;object-fit:cover}
.rule[data-i="0"]{--g:url(/img/bg-purple.webp)}
.rule[data-i="1"]{--g:url(/img/bg-red.webp)}
.rule[data-i="2"]{--g:url(/img/bg-gold.webp)}
.rule[data-i="3"]{--g:url(/img/bg-blue.webp)}
.rule[data-i="4"]{--g:url(/img/bg-sky.webp)}
@keyframes fadein{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.arrow{position:absolute;z-index:3;top:34%;width:clamp(70px,5.6vw,108px);aspect-ratio:1;background:url(/img/arrow-off.webp) center/100% 100%}
.arrow::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;border:solid var(--white);border-width:0 0 4px 4px;transform:translate(-30%,-50%) rotate(45deg)}
.a-prev{left:var(--gut)}
.a-next{right:calc(var(--gut) + 44px)}
.a-next::after{transform:translate(-70%,-50%) rotate(-135deg)}
@media (hover:hover){.arrow:hover{background:url(/img/arrow-sprite.webp) 0 0/600% 100%;animation:arrow .3s steps(6,jump-none) forwards}}
@keyframes arrow{to{background-position:100% 0}}
.rule-cap{position:absolute;z-index:3;right:calc(var(--gut) + 40px);bottom:calc(var(--rail) + 10px);font:400 clamp(22px,1.6vw,32px)/1 var(--disp);letter-spacing:.08em;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.rule-cap b{color:var(--yellow)}
.dots{position:absolute;z-index:3;left:var(--gut);bottom:calc(var(--rail) + 14px);display:flex;align-items:center;gap:14px}
.dots button{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.55);transition:transform .2s,background-color .2s}
.dots button.on{background:var(--pink);box-shadow:0 0 0 4px rgba(255,255,255,.85);transform:scale(1.15)}
.back-quiz{position:absolute;z-index:5;right:calc(var(--gut) + 60px);top:calc(var(--hdr) + 14px)}
.save-sheet{position:relative;display:grid;gap:14px;justify-items:center;padding:56px 12px 16px;background:var(--ink);border:3px solid var(--pink);max-width:440px;margin:0 auto}
.save-h{margin:0;font:700 17px/1.4 var(--body);text-align:center}
.save-h b{color:var(--yellow)}
.save-img{width:100%;height:auto;max-height:68vh;object-fit:contain;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.save-sheet .m-close{right:10px;top:8px;filter:invert(1)}
html.lock .stage{overflow:hidden}
.rail li.locked button{opacity:.38;cursor:default}
.rail li.done .n{color:rgba(255,255,255,.9);-webkit-text-stroke:0}
.legal{position:absolute;z-index:3;right:var(--gut);bottom:12px;margin:0;font:500 11px/1.3 var(--body);color:rgba(255,255,255,.75);text-align:right;max-width:60vw}

.rail{position:fixed;z-index:30;left:var(--gut);bottom:clamp(16px,3vh,40px);width:min(72vw,1340px)}
.rail ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none}
.rail li{position:relative}
.rail button{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:0 18px 30px 0;text-align:left}
.rail .n{font:400 clamp(34px,2.7vw,56px)/.8 var(--disp);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);transition:color .25s}
.rail .lb{position:relative;font:800 italic clamp(13px,.95vw,18px)/1 var(--body);text-transform:uppercase;letter-spacing:.01em;max-width:7.6em}
.rail .lb::before{content:"";position:absolute;z-index:-1;left:-18%;right:-22%;top:-38%;bottom:-38%;background:url(/img/nav-plate-on.webp) center/100% 100% no-repeat;opacity:0;transform:scaleX(.6);transform-origin:left;transition:opacity .2s,transform .3s var(--ease)}
.rail .lb{isolation:isolate}
.rail li::after{content:"";position:absolute;right:6px;top:calc(50% - 22px);width:8px;height:8px;border:solid rgba(255,255,255,.8);border-width:2px 2px 0 0;transform:rotate(45deg)}
.rail li:last-child::after{display:none}
.rail .d{position:absolute;left:14px;bottom:0;width:22px;height:22px;transform:translateY(50%);border-radius:50%;border:2px solid var(--white);background:rgba(20,20,30,.3)}
.rail .d::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--white)}
.rail li.on .n{color:var(--yellow);-webkit-text-stroke:0;text-shadow:3px 3px 0 var(--pink)}
.rail li.on .lb::before{opacity:1;transform:none}
.rail li.on .d{width:34px;height:34px;left:8px;border:0;background:url(/img/dot-on.webp) center/100% 100%}
.rail li.on .d::after{display:none}
.rail-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.85)}
.rail-line i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--pink);transition:width .6s var(--ease)}
.rail-line b{position:absolute;top:50%;width:88px;height:16px;transform:translate(-50%,-50%);background:url(/img/spark.webp) 0 0/400% 100%;opacity:0;transition:left .6s var(--ease)}
.rail-line b.go{opacity:1;animation:spark .6s steps(4,jump-none) forwards}
@keyframes spark{to{background-position:100% 0}}

.social{position:fixed;z-index:30;right:clamp(16px,1.6vw,32px);top:56%;display:grid;gap:22px}
.social a{display:grid;place-items:center;width:28px;height:28px;color:var(--white);opacity:.9;transition:transform .2s,color .2s}
.social svg{width:22px;height:22px}
@media (hover:hover){.social a:hover{color:var(--pink);transform:scale(1.15)}}

.wipe{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;visibility:hidden}
.wipe i{position:absolute;top:-20%;bottom:-20%;left:0;width:150%;transform:translateX(-110%) skewX(-18deg)}
.wipe i:first-child{background:var(--yellow)}
.wipe i:last-child{background:var(--pink) url(/img/shard-tl.webp) 30% 40%/22% auto no-repeat}
.wipe.go{visibility:visible}
.wipe.go i{animation:wipe .78s cubic-bezier(.7,0,.25,1) forwards}
.wipe.go i:last-child{animation-delay:.06s}
@keyframes wipe{0%{transform:translateX(-110%) skewX(-18deg)}46%,54%{transform:translateX(-18%) skewX(-18deg)}100%{transform:translateX(100%) skewX(-18deg)}}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.modal-mask{position:absolute;inset:0;background:rgba(6,6,18,.8);animation:fadein .3s ease both}
.modal-box{position:relative;width:min(100%,1000px);max-height:calc(100% - 20px);overflow-y:auto;scrollbar-width:none;animation:pop .45s both}
@keyframes pop{0%{transform:scale(.4);opacity:0}61%{transform:scale(1.04);opacity:1}100%{transform:none;opacity:1}}
.m-close{position:absolute;z-index:3;right:clamp(14px,4%,40px);top:clamp(14px,6%,52px);width:48px;height:44px;background:url(/img/close.webp) center/contain no-repeat;animation:closein .5s .15s both}
@keyframes closein{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.m-video{position:relative;background:#000;aspect-ratio:16/9;border:3px solid var(--pink);box-shadow:10px 10px 0 var(--yellow)}
.m-video video{width:100%;height:100%;display:block}
.m-video .m-close{right:-12px;top:-56px}
.fac{position:relative;isolation:isolate;width:min(100% - 40px,860px);margin-left:40px;padding:clamp(44px,7%,70px) 9% clamp(40px,7%,64px) 7%;color:var(--ink)}
.fac-ban{width:100%;aspect-ratio:760/306;object-fit:cover;animation:fadein .5s .1s both}
.fac-name{display:flex;align-items:center;gap:14px;margin:18px 0 12px;font:800 italic clamp(30px,3.2vw,54px)/1 var(--body);text-transform:uppercase;animation:slidein .6s .2s both}
.fac-name img{width:52px;height:auto;padding:8px;background:var(--ink)}
.fac-div{height:3px;background:var(--ink);transform-origin:left;animation:div .5s .3s both}
.fac-desc{margin:14px 0 0;font:600 clamp(16px,1.2vw,21px)/1.55 var(--body);animation:fadein .6s .4s both}
@keyframes slidein{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes div{from{transform:scaleX(0)}to{transform:none}}

.toast{position:fixed;z-index:95;left:50%;bottom:calc(var(--rail) + 20px);transform:translate(-50%,20px);padding:14px 22px;background:var(--ink);border-left:4px solid var(--pink);font:700 15px/1.3 var(--body);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-height:940px) and (min-width:900px){
  .hx.mega{font-size:clamp(50px,5.4vw,96px)}
  .styles{width:min(100%,600px)}
  .farlands{width:clamp(220px,18vw,340px)}
  .st-home .lede{font-size:18px}
  .st-home .fine{display:none}
  .r-info{gap:10px}
  .r-name{font-size:clamp(40px,4.2vw,72px)}
  .r-desc{font-size:16px;line-height:1.45}
  .r-traits li{font-size:13px;padding:6px 11px}
  .r-info .plate-lg{--h:50px}
  .crew-box{padding:12px 14px;gap:6px}
  .crew-box p{font-size:14px}
  .crew-box .plate{--h:42px}
  .bar{font-size:12px}
  .r-card{width:min(100%,400px,calc((100vh - 260px)*.75))}
  .q-title{font-size:clamp(30px,3vw,52px)}
  .opt{min-height:64px}
}

@media (max-width:899px){
  :root{--hdr:62px;--rail:66px;--gut:16px}
  .top{gap:10px;background:linear-gradient(180deg,rgba(8,20,60,.7),transparent)}
  .top-links,.hide-m,.social{display:none}
  .brand img{width:96px}
  .top-actions{margin-left:auto;gap:16px}
  .plate-sm{--h:36px;min-width:0;padding:0 16px 0 14px}
  .me.plate{--h:38px;gap:8px;padding:0 22px 0 10px}
  .me img{width:24px;height:24px}
  .me span{max-width:64px;font-size:12px}
  .me button{font-size:9px;padding:6px 6px 5px}
  .top-actions{padding-right:10px}

  .stage{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .scene{position:absolute;inset:0;left:0;top:0;width:auto;aspect-ratio:auto;transform:none}
  .l-bg{inset:0;width:auto}
  .l-bg img{width:100%;height:100%;object-fit:cover}
  .l-crew{display:none}
  .l-courier{left:auto;right:-6vw;top:calc(var(--hdr) - 4px);width:min(84vw,430px)}
  .hero-shade{background:linear-gradient(0deg,rgba(14,8,44,.92) 0,rgba(14,8,44,.6) 44%,transparent 68%)}
  .hero-copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;min-height:100%;padding:calc(var(--hdr) + 42vw) var(--gut) calc(var(--rail) + 26px);justify-content:flex-end;gap:14px}
  .brandline{position:static;align-items:flex-start}
  .farlands{width:170px}
  .hx.mega{font-size:clamp(46px,14vw,72px)}
  .styles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .styles img{aspect-ratio:1}
  .styles b{font-size:20px;right:5px}
  .styles span{font-size:10px;padding:6px 5px 7px;line-height:1.05;min-height:2.9em}
  .plate-xl{--h:76px}
  .login-pop{width:calc(100% - 24px);margin-left:24px;padding:52px 9% 44px 6%}
  .ea{letter-spacing:.3em;font-size:12px}
  .lede{font-size:17px}
  .plate-lg{--h:54px}
  .row{gap:16px 22px}

  .view{position:relative;inset:auto;overflow:visible;min-height:100%;padding:calc(var(--hdr) + 12px) var(--gut) calc(var(--rail) + 28px);display:flex;flex-direction:column;justify-content:center;gap:20px}
  .quiz-shade{position:fixed;background:linear-gradient(0deg,rgba(10,30,92,.92),rgba(10,30,92,.62))}
  .qbgs,.rbg{position:fixed}
  .hx.big{font-size:clamp(42px,12vw,64px)}
  .q-side{gap:12px}
  .q-count b{font-size:64px}
  .q-title{font-size:clamp(28px,8vw,40px);min-height:0}
  .q-road{margin-top:30px;height:34px}
  .q-rider{width:96px}
  .q-panel{padding:30px 22px 24px}
  .opt{min-height:64px;gap:12px;padding:12px 14px 12px 10px;font-size:17px}
  .opt b{width:40px;height:40px;font-size:26px}

  .v-result{justify-content:flex-start}
  .r-info{display:contents}
  .r-info>.kicker{order:1;align-self:flex-start}
  .r-name{order:2;font-size:clamp(46px,13vw,68px)}
  .r-tag{order:3}
  .r-card{order:4;position:relative;width:min(100%,400px);align-self:center;margin:6px 0 10px}
  .r-info .r-actions{order:5}
  .r-tabs{order:6}
  .r-traits{order:7}
  .r-desc{order:8;font-size:18px}
  .r-crew{order:9;width:100%}
  .explore{order:10}
  .explore-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile img{aspect-ratio:1}
  .tile span{position:relative;display:block;padding:7px 6px;font-size:11px;line-height:1.05;min-height:3.2em}
  .r-tabs button{font-size:13px;padding:10px 12px}
  .back-quiz{--h:38px;right:var(--gut);top:calc(var(--hdr) + 6px)}
  .bar{grid-template-columns:110px 1fr 42px;font-size:12px}

  .st-trailer .stage-bg{background-image:url(/img/trailer-m.webp);background-position:60% center}
  .trailer-copy{bottom:calc(var(--rail) + 30px)}

  .st-map{overflow:hidden}
  .st-map .stage-bg{background-image:url(/img/map-m.webp)}
  .st-map .stage-bg{background:linear-gradient(180deg,#38c5e0,#1a8fc0 60%,#0d5d92)}
  .markers{width:124vw;aspect-ratio:1640/1440;top:54%;transform:translate(-41.5%,-50%);isolation:isolate}
  .markers::before{content:"";position:absolute;inset:-6%;z-index:-1;background:url(/img/map-m.webp) center/cover;-webkit-mask:radial-gradient(closest-side,#000 78%,transparent);mask:radial-gradient(closest-side,#000 78%,transparent)}
  .map-copy{top:calc(var(--hdr) + 8px)}
  .map-copy .hx{font-size:34px}
  .mk{--mw:54px;left:var(--mx)}
  .layer{will-change:auto}
  .mk-name{font-size:14px}

  .st-rules{overflow:hidden}
  .rule img{position:absolute;left:0;right:0;top:50%;height:auto;aspect-ratio:16/9;transform:translateY(-58%)}
  .arrow{width:56px;top:auto;bottom:calc(var(--rail) + 58px);margin:0}
  .a-next{right:var(--gut)}
  .rule-cap{left:0;right:0;text-align:center;bottom:calc(var(--rail) + 76px)}
  .dots{left:50%;transform:translateX(-50%);bottom:calc(var(--rail) + 30px)}
  .legal{left:var(--gut);bottom:calc(var(--rail) + 4px);text-align:center;max-width:none;font-size:9px}

  .rail{left:0;right:0;bottom:0;width:auto;height:calc(var(--rail) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--ink)}
  .rail ol{height:var(--rail)}
  .rail button{flex-direction:column;justify-content:center;align-items:center;gap:4px;height:100%;padding:0 2px;text-align:center}
  .rail .n{font-size:24px;-webkit-text-stroke:1px rgba(255,255,255,.8)}
  .rail .lb{font-size:9px;max-width:none;line-height:1.05}
  .rail .n{font-size:22px}
  .rail .lb::before{display:none}
  .rail li::after,.rail .d{display:none}
  .rail li.on{background:var(--pink)}
  .rail li.on .n{text-shadow:2px 2px 0 var(--ink)}
  .rail-line{top:0;bottom:auto;height:3px;background:rgba(255,255,255,.15)}
  .rail-line b{display:none}
  .toast{bottom:calc(var(--rail) + 16px)}
  .fac{width:calc(100% - 24px);margin-left:24px;padding:40px 9% 40px 6%}
  .fac-desc{font-size:15px;line-height:1.5}
  .fac-name{font-size:28px;margin:12px 0 8px}
  .fac-name img{width:40px}
  .m-video .m-close{right:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .layer{will-change:auto}
}

@media (max-height:820px) and (min-width:900px){
  .st-home .styles,.st-home .fine{display:none}
  .r-card{width:min(100%,360px,calc((100vh - 240px)*.75))}
}