html.is-m{scroll-snap-type:y proximity}
html.is-m body{font-size:16px}
#mx{position:relative;background:var(--ink);color:var(--bone)}
#mx .mono{font-size:10.5px;letter-spacing:.14em}

/* loader */
.mx-load{position:fixed;inset:0;z-index:300;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s ease,visibility .7s}
.mx-load.gone{opacity:0;visibility:hidden}
.mx-sig{font-family:var(--f-s);font-size:64px;color:var(--red);text-shadow:0 0 24px rgba(255,43,43,.7);animation:neon 1.3s steps(1) both}
@keyframes neon{0%{opacity:0}12%{opacity:1}18%{opacity:.2}26%{opacity:1}34%{opacity:.35}42%,100%{opacity:1}}
.mx-load-bar{width:120px;height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.mx-load-bar i{display:block;height:100%;background:var(--red);transform-origin:left;animation:lbar 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes lbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* top bar */
.mx-top{position:fixed;left:0;right:0;top:0;z-index:60;padding:calc(env(safe-area-inset-top) + 10px) 16px 12px;background:linear-gradient(rgba(7,7,8,.6),rgba(7,7,8,0));transition:color .4s,background .4s}
.mx-top[data-theme=light]{color:var(--ink);background:linear-gradient(rgba(239,233,223,.9),rgba(239,233,223,0))}
.mx-seg{display:flex;gap:3px;margin-bottom:10px}
.mx-seg i{flex:1;height:2px;border-radius:2px;background:currentColor;opacity:.22;transition:opacity .4s}
.mx-seg i.on{opacity:.95}
.mx-row{display:flex;justify-content:space-between;align-items:center}
.mx-logo{font-family:var(--f-s);font-size:30px;line-height:1;color:var(--red);text-shadow:0 0 14px rgba(255,43,43,.55)}
.mx-cta{border:1px solid currentColor;border-radius:99px;padding:8px 13px;opacity:.85}

/* panels */
.mp{position:relative;min-height:100svh;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.mp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mp-grad{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,8,.55) 0%,rgba(7,7,8,0) 22%,rgba(7,7,8,0) 42%,rgba(7,7,8,.88) 78%,var(--ink) 100%)}
.mp-body{position:absolute;left:0;right:0;bottom:0;padding:0 22px calc(env(safe-area-inset-bottom) + 34px)}
.mp-body.mid{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:96px}
.mp-body>.mono{color:var(--red);margin-bottom:12px}
.mx-title{font-family:var(--f-d);font-weight:400;font-size:min(27vw,112px);line-height:.88;padding:.04em 0 .06em;margin-bottom:14px}
.mx-h{font-family:var(--f-d);font-weight:400;font-size:min(16.5vw,72px);line-height:.9;padding:.05em 0 .08em;margin-bottom:12px}
.mx-h.xl{font-size:min(19.5vw,84px)}
.mp-lead{font-size:17px;line-height:1.42;color:#ddd6cb;max-width:34ch}
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv-t{clip-path:inset(0 0 100% 0);transform:translateY(26px);transition:clip-path 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.mp.on .rv{opacity:1;transform:none}
.mp.on .rv-t{clip-path:inset(-10% 0 -14% 0);transform:none}
.mx-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;margin-bottom:16px;border-radius:14px;background:rgba(10,10,12,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line)}
.mx-chip img{width:78px;height:auto}
.mx-chip b{display:block;font-size:13.5px;font-weight:600}
.mx-chip i{font-style:normal;font-size:9.5px;color:var(--mute)}

/* manifesto */
.mp-mani{background:radial-gradient(90% 60% at 50% 40%,#151516,var(--ink))}
.mx-mani{font-weight:600;font-size:clamp(30px,8.6vw,40px);line-height:1.1;letter-spacing:-.025em}
.mx-mani .w{color:rgba(239,233,223,.13);transition:color .5s ease}
.mp.on .mx-mani .w{color:var(--bone)}
.mp.on .mx-mani .w.em{color:var(--red)}
.mx-mani em{font-style:normal}

/* lineup */
.mp-lu{display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top) + 82px);background:radial-gradient(120% 60% at 50% 70%,#161618,var(--ink) 70%)}
.mx-lu-head{display:flex;justify-content:space-between;align-items:center;padding:0 18px}
.mx-lu-head>.mono{color:var(--red)}
.mx-filt{display:flex;gap:6px}
.mx-filt button{border:1px solid var(--line);border-radius:99px;padding:7px 11px;font:inherit;letter-spacing:inherit;transition:background .3s,border-color .3s}
.mx-filt button.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.mx-lu{flex:1;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 7vw;align-items:center}
.mx-lu::-webkit-scrollbar{display:none}
.mx-car{flex:0 0 86vw;scroll-snap-align:center;padding:0 3vw;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;opacity:.35;transform:scale(.9)}
.mx-car.on{opacity:1;transform:none}
.mx-car.off{display:none}
.mx-car figure{position:relative;margin:0 -4vw 26px}
.mx-car figure:before{content:'';position:absolute;left:10%;right:10%;bottom:-8%;height:40%;border-radius:50%;background:radial-gradient(closest-side,var(--gl),transparent);z-index:-1}
.mx-car img{width:100%;height:auto;-webkit-box-reflect:below -4px linear-gradient(transparent 66%,rgba(0,0,0,.25))}
.mx-car .g{color:var(--gc)}
.mx-car h3{font-family:var(--f-d);font-weight:400;font-size:min(10.5vw,44px);line-height:.95;text-transform:uppercase;margin:8px 0 6px;padding:.04em 0}
.mx-car .l{font-size:15.5px;color:#d6cfc4;margin-bottom:12px;min-height:2.8em}
.mx-car .f{display:flex;gap:12px;color:var(--mute);margin-bottom:16px}
.mx-car button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:11px 15px;font:inherit;letter-spacing:inherit}
.mx-car button:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.mx-lu-dots{display:flex;justify-content:center;gap:5px;padding:12px 0 calc(env(safe-area-inset-bottom) + 26px)}
.mx-lu-dots i{width:5px;height:5px;border-radius:5px;background:rgba(239,233,223,.25);transition:width .3s,background .3s}
.mx-lu-dots i.on{width:18px;background:var(--red)}

/* duel */
.mp-duel{background:linear-gradient(var(--ink),#0c0c0e)}
.mx-duel-sub{color:var(--mute)!important;min-height:1.4em;margin-bottom:14px}
.mx-duel{display:flex;flex-direction:column;gap:6px}
.mx-dc{display:flex;flex-direction:column;align-items:center;padding:10px 8px 12px;border-radius:18px;border:1px solid var(--line);transition:transform .45s,opacity .45s,border-color .4s,box-shadow .4s}
.mx-dc img{width:84%;height:auto;aspect-ratio:3/2;object-fit:contain}
.mx-dc.b img{transform:scaleX(-1)}
.mx-dc span{font-weight:600;font-size:15px;margin-top:4px}
.mx-dc.win{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 20px 50px -20px rgba(255,43,43,.6)}
.mx-dc.lose{opacity:.25;transform:scale(.95)}
.mx-vs{font-family:var(--f-d);font-size:34px;text-align:center;color:var(--red);text-shadow:0 0 20px rgba(255,43,43,.5);line-height:1}
.mx-duel-msg{margin-top:16px;text-align:center;color:var(--mute)}

/* archive */
.mp-arch{display:flex;flex-direction:column;justify-content:center;padding:calc(env(safe-area-inset-top) + 92px) 0 calc(env(safe-area-inset-bottom) + 30px)}
.mx-arch-head{padding:0 22px 18px}.mx-arch-head .mono{color:var(--red);margin-bottom:10px}
.mx-arch{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px;scrollbar-width:none}
.mx-arch::-webkit-scrollbar{display:none}
.mx-arch figure{flex:0 0 70vw;aspect-ratio:4/5;border-radius:14px;overflow:hidden;position:relative;scroll-snap-align:center;margin:0;background:#151517}
.mx-arch img{width:100%;height:100%;object-fit:cover}
.mx-arch span{position:absolute;left:12px;bottom:10px;right:12px;font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px #000}
.mx-ig{align-self:flex-start;margin:20px 22px 0;border:1px solid var(--line);border-radius:99px;padding:11px 15px}

/* numbers + shop (light) */
.mp-nums,.mp-shop{background:var(--bone);color:var(--ink)}
.mp-nums{display:flex;align-items:center}
.mx-nums{width:100%;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(7,7,8,.15)}
.mx-nums div{padding:7vh 20px;border-bottom:1px solid rgba(7,7,8,.15)}
.mx-nums div:nth-child(odd){border-right:1px solid rgba(7,7,8,.15)}
.mx-nums b{display:block;font-family:var(--f-d);font-weight:400;font-size:min(15vw,64px);line-height:1}
.mx-nums .mono{color:#6b655d}
.mp-shop{padding:calc(env(safe-area-inset-top) + 92px) 0 calc(env(safe-area-inset-bottom) + 30px);min-height:auto}
.mx-shop-head{padding:0 22px 16px}.mx-shop-head .mono{color:#b3201f;margin-bottom:8px}
.mx-shop{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px;scrollbar-width:none}
.mx-shop::-webkit-scrollbar{display:none}
.mx-sp{flex:0 0 74vw;scroll-snap-align:center}
.mx-sp .i{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#141414;position:relative}
.mx-sp .i img{width:100%;height:100%;object-fit:cover}
.mx-sp .i em{position:absolute;top:10px;left:10px;background:var(--bone);font-style:normal;font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:99px}
.mx-sp h3{font-size:17px;font-weight:600;margin:12px 0 4px}
.mx-sp p{font-size:14px;color:#5a554e;line-height:1.38;min-height:2.8em}
.mx-sp a{display:inline-block;margin-top:10px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(7,7,8,.3);border-radius:99px;padding:10px 14px}
.mx-shop-note{padding:20px 22px 0;color:#6b655d}

/* final */
.mp-fin .mx-h{font-family:var(--f-s);font-size:min(19vw,82px);color:var(--red);text-shadow:0 0 30px rgba(255,43,43,.6);line-height:1.02;padding:.05em .1em .14em 0}
.mp-body>.mx-btn{color:#fff}
.mx-btn{display:inline-block;margin-top:20px;background:var(--red);color:#fff;border-radius:99px;padding:15px 22px}
.mx-foot{margin-top:28px;color:var(--mute)}

/* 360 */
.mx-tt{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;justify-content:center;padding:0 0 env(safe-area-inset-bottom);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mx-tt.open{opacity:1;visibility:visible}
.mx-tt-x{position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:16px;padding:10px}
.mx-tt-media{aspect-ratio:16/9;touch-action:none}
.mx-tt-media video{width:100%;height:100%;object-fit:contain;pointer-events:none}
.mx-tt-n{font-family:var(--f-d);font-size:34px;text-transform:uppercase;text-align:center;margin-top:26px;padding:0 16px}
.mx-tt-h{text-align:center;color:var(--mute);margin-top:8px}

@media (max-height:700px){.mx-title{font-size:min(22vw,92px)}.mx-h{font-size:min(14vw,60px)}.mp-lead{font-size:15.5px}.hide-short{display:none}.mx-chip{margin-bottom:10px}.mx-dc img{width:66%}}
