@view-transition {
    navigation: auto
}

:root {
    --bg: #070b12;
    --bg2: #0c1320;
    --navy: #13233a;
    --blue: #2d63b0;
    --blue-l: #5d8fd8;
    --red: #e53225;
    --red-h: #ff4a35;
    --red-d: #9c1f17;
    --ink: #eef2f7;
    --muted: #97a4b8;
    --line: #ffffff14;
    --glass: #0e1828b3;
    --display: "Unbounded", "Arial Black", Impact, sans-serif;
    --body: "Manrope", Arial, Helvetica, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --r: 18px
}

*,
:before,
:after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 100px;
    overflow-x: clip
}

body {
    background: var(--bg);
    color: var(--ink);
    font: 500 16px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: clip
}

body:before {
    content: "";
    z-index: 100;
    pointer-events: none;
    opacity: .06;
    mix-blend-mode: overlay;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    position: fixed;
    inset: 0
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

h1,
h2,
h3,
p {
    margin: 0
}

:focus-visible {
    outline: 3px solid var(--red-h);
    outline-offset: 4px;
    border-radius: 6px
}

::selection {
    background: var(--red);
    color: #fff
}

.wrap {
    width: min(1240px, 100% - 2*clamp(18px, 5vw, 64px));
    margin-inline: auto
}

.loader {
    z-index: 200;
    background: radial-gradient(circle at 50% 45%, #13233a, var(--bg) 70%);
    transition: opacity .5s var(--ease), visibility .5s;
    place-items: center;
    display: grid;
    position: fixed;
    inset: 0
}

.loader-core {
    justify-items: center;
    gap: 18px;
    display: grid
}

.loader img {
    width: 96px;
    height: auto;
    animation: 1.2s ease-in-out infinite pulse
}

.loader-bar {
    background: #ffffff14;
    border-radius: 4px;
    width: 200px;
    height: 4px;
    overflow: hidden
}

.loader-bar i {
    background: linear-gradient(90deg, var(--blue), var(--red));
    transform-origin: 0;
    width: 100%;
    height: 100%;
    animation: load 1s var(--ease) forwards;
    display: block
}

.loader-text {
    font: 800 11px var(--display);
    letter-spacing: 4px;
    color: var(--muted)
}

.loaded .loader {
    opacity: 0;
    visibility: hidden
}

.no-loader .loader,
.no-js .loader {
    display: none
}

@keyframes load {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes pulse {
    50% {
        filter: drop-shadow(0 0 22px #2d63b0aa);
        transform: scale(1.06)
    }
}

.header {
    z-index: 50;
    -webkit-backdrop-filter: blur(18px)saturate(1.4);
    width: min(1320px, 100% - 28px);
    height: 68px;
    transition: translate .4s var(--ease), background .3s;
    background: linear-gradient(110deg, #1b2b44b3, #0b1422cc);
    border: 1px solid #ffffff1a;
    border-radius: 16px;
    align-items: center;
    gap: 28px;
    padding: 0 10px 0 16px;
    display: flex;
    position: fixed;
    top: 14px;
    left: 50%;
    translate: -50%;
    box-shadow: 0 10px 40px #0006, inset 0 1px #ffffff14
}

.header.hide {
    translate: -50% -120%
}

.header-mark {
    border-right: 1px solid var(--line);
    align-items: center;
    gap: 10px;
    height: 44px;
    padding-right: 22px;
    display: flex
}

.header-mark img {
    width: 42px;
    height: auto;
    transition: transform .5s var(--ease)
}

.header-mark:hover img {
    transform: rotate(-8deg)scale(1.08)
}

.header-mark span {
    font: 800 13px/1.05 var(--display);
    letter-spacing: 1px
}

.header-mark b {
    color: var(--red);
    display: block
}

.header nav {
    align-items: center;
    gap: 6px;
    height: 100%;
    display: flex
}

.header nav a {
    color: #d6dde8;
    white-space: nowrap;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    transition: color .2s, background .2s;
    position: relative
}

.header nav a:hover {
    color: #fff;
    background: #ffffff0f
}

.header nav a.active {
    color: #fff
}

.header nav a.active:after {
    content: "";
    background: var(--red);
    height: 2px;
    box-shadow: 0 0 12px var(--red);
    border-radius: 2px;
    position: absolute;
    bottom: 2px;
    left: 14px;
    right: 14px
}

.new {
    color: #1a0d00;
    font: 800 8px/1.2 var(--display);
    letter-spacing: .5px;
    vertical-align: 4px;
    background: linear-gradient(110deg, #f5b335, #ff7a2f);
    border-radius: 5px;
    margin-left: 4px;
    padding: 2px 5px;
    display: inline-block
}

.nav-donate {
    height: 48px;
    font: 800 13px var(--display);
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(110deg, var(--red-d), var(--red) 55%, var(--red-h));
    transition: transform .25s var(--ease), box-shadow .25s;
    border-radius: 12px;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    padding: 0 20px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px #e5322555, inset 0 1px #ffffff40
}

.nav-donate:before,
.btn-red:before {
    content: "";
    transition: translate .7s var(--ease);
    background: linear-gradient(100deg, #0000 30%, #fff5 50%, #0000 70%);
    position: absolute;
    inset: 0;
    translate: -120%
}

.nav-donate:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px #e5322588
}

.nav-donate:hover:before,
.btn-red:hover:before {
    translate: 120%
}

.nav-donate.active {
    outline-offset: 2px;
    outline: 2px solid #fff5
}

.nav-account {
    color: #eef3f9;
    height: 48px;
    font: 800 10px var(--display);
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(120deg, #ffffff12, #ffffff06);
    border: 1px solid #ffffff2b;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    transition: transform .2s, border-color .2s, background .2s;
    display: flex;
    box-shadow: inset 0 1px #ffffff12
}

.nav-account:hover {
    background: #ffffff12;
    border-color: #fff5;
    transform: translateY(-2px)
}

.nav-account i {
    color: var(--red-h);
    font-size: 16px;
    font-style: normal
}

.menu {
    background: #ffffff0d;
    border-radius: 10px;
    place-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    display: none
}

.menu span {
    width: 20px;
    height: 2px;
    transition: transform .3s var(--ease);
    background: #fff;
    border-radius: 2px;
    display: block
}

.menu[aria-expanded=true] span:first-child {
    transform: translateY(4px)rotate(45deg)
}

.menu[aria-expanded=true] span:last-child {
    transform: translateY(-4px)rotate(-45deg)
}

.btn {
    height: 56px;
    font: 800 13px var(--display);
    letter-spacing: 1px;
    transition: transform .25s var(--ease), box-shadow .25s, background .25s;
    border-radius: 14px;
    justify-content: space-between;
    align-items: center;
    gap: 34px;
    padding: 0 24px;
    display: inline-flex;
    position: relative;
    overflow: hidden
}

.btn i {
    transition: transform .3s var(--ease);
    font-size: 18px;
    font-style: normal
}

.btn:hover i {
    transform: translate(3px, -3px)
}

.btn-red {
    color: #fff;
    background: linear-gradient(110deg, var(--red-d), var(--red) 55%, var(--red-h));
    box-shadow: 0 10px 30px #e5322555, inset 0 1px #ffffff40
}

.btn-red:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px #e5322588
}

.btn-ghost {
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff0d;
    border: 1px solid #ffffff26
}

.btn-ghost:hover {
    background: #ffffff1a;
    transform: translateY(-3px)
}

.btn-xl {
    min-width: 280px;
    height: 64px;
    padding: 0 30px;
    font-size: 15px
}

.hero {
    isolation: isolate;
    perspective: 1200px;
    align-items: center;
    min-height: max(680px, 100svh);
    display: flex;
    position: relative;
    overflow: hidden
}

.hero-scene {
    z-index: -1;
    transform-style: preserve-3d;
    position: absolute;
    inset: -40px
}

.hero-bg {
    position: absolute;
    inset: 0
}

.hero-bg img {
    object-fit: cover;
    object-position: 62% 45%;
    width: 100%;
    height: 100%;
    animation: heroIn 2.2s var(--ease) both;
    transform: scale(1.08)
}

.hero-shade {
    background: linear-gradient(90deg, var(--bg) 0%, #070b12e6 22%, #070b1280 46%, #070b1200 72%), linear-gradient(0deg, var(--bg) 2%, #070b1200 40%), linear-gradient(180deg, #070b12aa, transparent 25%);
    position: absolute;
    inset: 0
}

.hero-glow {
    mix-blend-mode: screen;
    pointer-events: none;
    background: radial-gradient(#e532253a, #0000 60%);
    border-radius: 50%;
    width: 60vmax;
    height: 60vmax;
    position: absolute;
    bottom: -25vmax;
    right: -15vmax
}

.rain {
    opacity: .55;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

@keyframes heroIn {
    0% {
        filter: brightness(.3)blur(6px);
        transform: scale(1.25)
    }
}

[data-depth] {
    will-change: transform;
    transition: transform .9s var(--ease)
}

.hero-copy {
    width: min(1240px, 100% - 2*clamp(18px, 5vw, 64px));
    margin: 0 auto;
    padding: 130px 0 120px;
    position: relative
}

.chip {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font: 800 11px var(--display);
    letter-spacing: 2px;
    color: #cdd6e3;
    animation: rise .8s .3s var(--ease) both;
    background: #ffffff0d;
    border: 1px solid #ffffff1f;
    border-radius: 30px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    display: inline-flex
}

.chip i {
    background: #3ddc84;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.6s infinite blink;
    box-shadow: 0 0 10px #3ddc84
}

@keyframes blink {
    50% {
        opacity: .3
    }
}

.hero-title {
    font: 900 clamp(64px, 11vw, 168px)/.92 var(--display);
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin: 26px 0
}

.hero-title>span {
    display: block
}

.hero-title .t1 {
    color: #f4f6fa;
    text-shadow: 0 1px #c9d2df, 0 2px #b5c0d0, 0 3px #9fabbe, 0 4px #8996ab, 0 5px #6f7c92, 0 6px #56627a, 0 14px 30px #0009
}

.hero-title .t2 {
    color: var(--red);
    text-shadow: 0 1px #c92a1f, 0 2px #b2241a, 0 3px #9c1f17, 0 4px #861a13, 0 5px #701610, 0 6px #5a110c, 0 14px 34px #e532254d;
    margin-left: .05em
}

.hero-title .ch {
    animation: chIn .9s var(--ease) both;
    animation-delay: calc(.35s + var(--c)*50ms);
    display: inline-block
}

@keyframes chIn {
    0% {
        opacity: 0;
        transform: translateY(.4em)rotateX(-80deg)
    }
}

.hero-copy>p {
    color: #c4cddb;
    text-wrap: pretty;
    max-width: 440px;
    animation: rise .9s .8s var(--ease) both;
    font-size: clamp(16px, 1.4vw, 19px)
}

.hero-actions {
    animation: rise .9s 1s var(--ease) both;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    display: flex
}

.key-hint {
    color: var(--muted);
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

kbd {
    width: 34px;
    height: 34px;
    font: 800 14px var(--display);
    color: #fff;
    background: linear-gradient(#ffffff26, #ffffff0a);
    border: 1px solid #fff3;
    border-bottom-width: 3px;
    border-radius: 9px;
    place-items: center;
    display: grid
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(26px)
    }
}

.hud {
    z-index: 2;
    pointer-events: none;
    position: absolute
}

.hud-radar {
    font: 800 10px var(--display);
    letter-spacing: 2px;
    color: #cdd6e3;
    animation: rise 1s 1.2s var(--ease) both;
    justify-items: center;
    gap: 10px;
    display: grid;
    bottom: 110px;
    right: clamp(18px, 5vw, 64px)
}

.radar {
    background: radial-gradient(circle, #0000 30%, #ffffff12 31%, #0000 32% 62%, #ffffff12 63%, #0000 64%), conic-gradient(#13233acc, #0b1422cc);
    border: 2px solid #ffffff2a;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 6px #0b142266, 0 20px 50px #0008, inset 0 0 30px #2d63b044
}

.radar:before,
.radar:after {
    content: "";
    background: #ffffff14;
    position: absolute
}

.radar:before {
    width: 1px;
    top: 0;
    bottom: 0;
    left: 50%
}

.radar:after {
    height: 1px;
    top: 50%;
    left: 0;
    right: 0
}

.sweep {
    background: conic-gradient(#e5322500 70%, #e5322566 99%, #e53225 100%);
    border-radius: 50%;
    animation: 3.2s linear infinite spin;
    position: absolute;
    inset: 0
}

.blip {
    background: var(--red);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px var(--red);
    border-radius: 50%;
    animation: 2s infinite blink;
    position: absolute
}

.b1 {
    top: 36%;
    left: 30%
}

.b2 {
    background: var(--blue-l);
    box-shadow: 0 0 10px var(--blue-l);
    animation-delay: .6s;
    top: 58%;
    left: 64%
}

.b3 {
    background: #fff;
    animation-delay: 1.2s;
    top: 72%;
    left: 46%;
    box-shadow: 0 0 8px #fff
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.hud-corner {
    inset: 96px clamp(10px, 2.5vw, 32px) 28px
}

.hud-corner i {
    border: 2px solid #ffffff30;
    width: 28px;
    height: 28px;
    position: absolute
}

.hud-corner i:first-child {
    border-bottom: 0;
    border-right: 0;
    top: 0;
    left: 0
}

.hud-corner i:nth-child(2) {
    border-bottom: 0;
    border-left: 0;
    top: 0;
    right: 0
}

.hud-corner i:nth-child(3) {
    border-top: 0;
    border-right: 0;
    bottom: 0;
    left: 0
}

.hud-corner i:nth-child(4) {
    border-top: 0;
    border-left: 0;
    bottom: 0;
    right: 0
}

.scroll-cue {
    border: 2px solid #fff5;
    border-radius: 14px;
    width: 26px;
    height: 42px;
    position: absolute;
    bottom: 34px;
    left: 50%;
    translate: -50%
}

.scroll-cue span {
    background: #fff;
    border-radius: 2px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    animation: 1.6s infinite cue;
    position: absolute;
    top: 8px;
    left: 50%
}

@keyframes cue {
    60% {
        opacity: 0;
        transform: translateY(12px)
    }
}

.tapes {
    z-index: 5;
    pointer-events: none;
    height: 150px;
    margin: -75px 0 -40px;
    position: relative;
    overflow: hidden
}

.tape {
    align-items: center;
    height: 58px;
    display: flex;
    position: absolute;
    top: 50%;
    left: -5%;
    right: -5%;
    overflow: hidden;
    box-shadow: 0 12px 30px #0008
}

.tape-red {
    background: linear-gradient(var(--red-h), var(--red) 40%, var(--red-d));
    z-index: 2;
    transform: translateY(-50%)rotate(-3deg)
}

.tape-blue {
    opacity: .95;
    background: linear-gradient(#1d3a63, #13233a);
    transform: translateY(-50%)rotate(2.2deg)
}

.tape-track {
    width: max-content;
    animation: 34s linear infinite marquee;
    display: flex
}

.tape-track.reverse {
    animation-duration: 44s;
    animation-direction: reverse
}

.tape-group {
    flex-shrink: 0;
    align-items: center;
    display: flex
}

.tape-group span {
    font: 900 22px var(--display);
    letter-spacing: .5px;
    white-space: nowrap;
    color: #fff;
    padding: 0 26px
}

.tape-blue .tape-group span {
    color: #b8c8de;
    font-size: 18px
}

.tape-group b {
    color: #fffa;
    font-size: 20px
}

@keyframes marquee {
    to {
        transform: translate(-50%)
    }
}

.streets {
    background: radial-gradient(ellipse 60% 50% at 0% 20%, #2d63b026, transparent 70%), radial-gradient(ellipse 50% 40% at 100% 90%, #e532251f, transparent 70%), var(--bg);
    padding: 150px 0 120px;
    position: relative
}

.streets:before {
    content: "";
    pointer-events: none;
    opacity: .5;
    background-image: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px);
    background-size: 64px 64px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, #0000);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, #0000)
}

.section-head {
    grid-template-columns: 1fr minmax(0, 380px);
    align-items: end;
    gap: 10px 40px;
    margin-bottom: 56px;
    display: grid;
    position: relative
}

.eyebrow {
    font: 800 12px var(--display);
    letter-spacing: 3px;
    color: var(--red);
    grid-column: 1/-1
}

.section-head h2 {
    font: 900 clamp(40px, 6vw, 88px)/.95 var(--display);
    letter-spacing: -.03em
}

.section-head h2 em {
    color: #0000;
    -webkit-text-stroke: 2px var(--ink);
    background: linear-gradient(90deg, var(--red), var(--red-h));
    -webkit-background-clip: text;
    background-clip: text;
    font-style: normal
}

.section-head p {
    color: var(--muted);
    text-wrap: pretty;
    font-size: 16px
}

.cards {
    perspective: 1100px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    display: grid
}

.card3d {
    text-align: left;
    border-radius: var(--r);
    transform-style: preserve-3d;
    display: block
}

.card-inner {
    border-radius: var(--r);
    background: var(--navy);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform .5s var(--ease), box-shadow .4s;
    transform-style: preserve-3d;
    border: 1px solid #ffffff1c;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px #0007
}

.card3d:nth-child(2) .card-inner {
    margin-top: 0
}

.card-inner img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
    transition: transform .7s var(--ease), filter .5s;
    filter: saturate(.9)brightness(.85)
}

.card-inner:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#0000 30%, #070b1240 55%, #070b12f2 100%);
    position: absolute;
    inset: 0
}

.card3d:hover .card-inner,
.card3d:focus-visible .card-inner {
    box-shadow: 0 30px 70px #000a, 0 0 0 1px #e532257a, 0 0 50px #e532252e
}

.card3d:hover img {
    filter: saturate(1.1)brightness();
    transform: scale(1.08)
}

.card-glare {
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #ffffff40, transparent 45%);
    mix-blend-mode: overlay;
    transition: opacity .3s;
    position: absolute;
    inset: 0
}

.card3d:hover .card-glare {
    opacity: 1
}

.card-tag {
    z-index: 3;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 800 10px var(--display);
    letter-spacing: 2px;
    background: #070b12b3;
    border: 1px solid #fff2;
    border-radius: 8px;
    padding: 6px 10px;
    position: absolute;
    top: 16px;
    left: 16px;
    transform: translateZ(40px)
}

.card-cap {
    z-index: 3;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 22px;
    right: 22px;
    transform: translateZ(50px)
}

.card-cap b {
    font: 900 clamp(18px, 1.8vw, 24px) var(--display);
    letter-spacing: .5px
}

.card-cap i {
    background: var(--red);
    width: 44px;
    height: 44px;
    transition: transform .3s var(--ease);
    border-radius: 12px;
    place-items: center;
    font-size: 18px;
    font-style: normal;
    display: grid;
    box-shadow: 0 8px 20px #e5322566
}

.card3d:hover .card-cap i {
    transform: rotate(45deg)
}

.paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 70px;
    display: grid
}

.path {
    border-radius: var(--r);
    border: 1px solid var(--line);
    transition: transform .35s var(--ease), border-color .3s;
    background: linear-gradient(160deg, #13233acc, #0c1320cc);
    padding: 28px 26px 26px;
    position: relative;
    overflow: hidden
}

.path:hover {
    border-color: #2d63b080;
    transform: translateY(-6px)
}

.path-num {
    font: 900 72px var(--display);
    color: #ffffff08;
    letter-spacing: -.04em;
    position: absolute;
    top: 6px;
    right: 18px
}

.path-icon {
    background: linear-gradient(140deg, var(--blue), #183a68);
    border-radius: 14px;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    display: grid;
    box-shadow: 0 10px 26px #2d63b055, inset 0 1px #fff3
}

.path-icon svg {
    fill: none;
    stroke: #fff;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 26px;
    height: 26px
}

.path:nth-child(2) .path-icon {
    background: linear-gradient(140deg, var(--red), var(--red-d));
    box-shadow: 0 10px 26px #e5322555, inset 0 1px #fff3
}

.path h3 {
    font: 800 20px var(--display);
    margin-bottom: 8px
}

.path p {
    color: var(--muted);
    font-size: 15px
}

.xp {
    background: #ffffff10;
    border-radius: 5px;
    height: 5px;
    margin-top: 22px;
    display: block;
    overflow: hidden
}

.xp i {
    height: 100%;
    width: var(--w);
    background: linear-gradient(90deg, var(--blue), var(--blue-l));
    transform-origin: 0;
    transition: transform 1.4s .3s var(--ease);
    border-radius: 5px;
    display: block;
    transform: scaleX(0)
}

.path:nth-child(2) .xp i {
    background: linear-gradient(90deg, var(--red-d), var(--red-h))
}

.path.in .xp i {
    transform: scaleX(1)
}

.social {
    isolation: isolate;
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden
}

.social-bg {
    z-index: -1;
    position: absolute;
    inset: 0
}

.social-bg img {
    object-fit: cover;
    object-position: 70% 30%;
    opacity: .35;
    filter: saturate(.8);
    width: 100%;
    height: 120%;
    transform: translateY(var(--py, 0))
}

.social-bg:after {
    content: "";
    background: linear-gradient(180deg, var(--bg) 0%, #070b12d9 30%, #070b12cc 70%, var(--bg) 100%), linear-gradient(90deg, var(--bg), transparent 60%);
    position: absolute;
    inset: 0
}

.socials {
    perspective: 1000px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    display: grid
}

.soc {
    text-align: left;
    border-radius: var(--r);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    min-height: 280px;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s var(--ease), box-shadow .4s, border-color .3s;
    transform-style: preserve-3d;
    background: linear-gradient(160deg, #16263ee6, #0b1422e6);
    border: 1px solid #ffffff1a;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px #0006
}

.soc:before {
    content: "";
    background: radial-gradient(var(--c, #2d63b0), transparent 70%);
    opacity: .35;
    width: 220px;
    height: 220px;
    transition: opacity .4s, transform .6s var(--ease);
    border-radius: 50%;
    position: absolute;
    top: -70px;
    right: -70px
}

.soc:hover:before {
    opacity: .65;
    transform: scale(1.3)
}

.soc:hover {
    border-color: #ffffff40;
    box-shadow: 0 30px 70px #000a
}

.soc-vk {
    --c: #4a76a8
}

.soc-tg {
    --c: #29a9eb;
    background: linear-gradient(160deg, #1f4f86f0, #12305af0)
}

.soc-dc {
    --c: #5865f2
}

.soc-icon {
    background: var(--c);
    color: #fff;
    width: 72px;
    height: 72px;
    box-shadow: 0 14px 30px color-mix(in oklab, var(--c) 50%, transparent), inset 0 1px #ffffff40;
    border-radius: 20px;
    place-items: center;
    margin-bottom: auto;
    display: grid;
    transform: translateZ(40px)
}

.soc-icon svg {
    width: 42px;
    height: 42px
}

.soc-copy {
    margin-top: 34px;
    display: block;
    transform: translateZ(30px)
}

.soc-copy b {
    font: 800 26px var(--display);
    letter-spacing: -.01em;
    display: block
}

.soc-copy small {
    color: #b3bfd0;
    margin-top: 4px;
    font-size: 15px;
    display: block
}

.soc-action {
    border-top: 1px solid #ffffff1a;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 24px;
    padding-top: 16px;
    font-size: 14px;
    font-weight: 800;
    display: flex
}

.soc-action i {
    color: var(--red-h);
    transition: transform .3s var(--ease);
    font-size: 20px;
    font-style: normal
}

.soc-tg .soc-action i {
    color: #fff
}

.soc:hover .soc-action i {
    transform: translate(4px, -4px)
}

.soc-badge {
    font: 800 9px var(--display);
    letter-spacing: 1.5px;
    background: #ffffff1f;
    border-radius: 7px;
    padding: 5px 9px;
    position: absolute;
    top: 22px;
    right: 22px
}

.cta {
    background: linear-gradient(110deg, #e53225e6, #9c1f17f0 55%, #13233a);
    border-radius: 24px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    margin-top: 70px;
    padding: 30px 34px;
    display: grid;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px #e5322533, inset 0 1px #fff3
}

.cta:before {
    content: "";
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, #ffffff08 0 14px, #0000 14px 28px);
    position: absolute;
    inset: 0
}

.cta-lion {
    filter: drop-shadow(0 12px 24px #0008);
    width: 110px;
    animation: 5s ease-in-out infinite float
}

.cta h3 {
    font: 900 clamp(22px, 2.6vw, 34px)/1.1 var(--display);
    text-transform: uppercase
}

.cta p {
    color: #ffe2dc;
    margin-top: 8px
}

.cta-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    display: flex
}

.cta .btn-red {
    color: var(--red-d);
    background: #fff;
    box-shadow: 0 10px 30px #0005
}

@keyframes float {
    50% {
        transform: translateY(-10px)rotate(-3deg)
    }
}

.footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: #05080d;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    padding: 30px clamp(18px, 5vw, 64px);
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.footer-brand {
    color: var(--ink);
    align-items: center;
    gap: 10px;
    display: flex
}

.footer-brand img {
    width: 40px
}

.footer-brand span {
    font: 800 12px/1.05 var(--display)
}

.footer-brand b {
    color: var(--red);
    display: block
}

.footer-link {
    margin-left: auto;
    transition: color .2s
}

.footer-link2 {
    margin-left: 0
}

.footer-link:hover {
    color: #fff
}

.age {
    width: 44px;
    height: 44px;
    font: 800 13px var(--display);
    color: var(--ink);
    border: 1px solid #ffffff2a;
    border-radius: 12px;
    place-items: center;
    display: grid
}

dialog {
    width: min(560px, 92vw);
    max-height: 90svh;
    color: var(--ink);
    background: linear-gradient(160deg, #16263e, #0b1422);
    border: 1px solid #fff2;
    border-radius: 22px;
    padding: 42px 40px 36px;
    overflow: auto;
    box-shadow: 0 40px 120px #000c, inset 0 1px #ffffff1a
}

dialog[open] {
    animation: pop .45s var(--ease)
}

dialog::backdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #03060acc
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: translateY(20px)scale(.94)
    }
}

dialog h2 {
    font: 900 clamp(24px, 4vw, 32px)/1.1 var(--display);
    margin-bottom: 16px
}

dialog p {
    color: #c4cddb;
    margin-top: 10px
}

dialog .close {
    z-index: 20;
    cursor: pointer;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    transition: background .2s, transform .3s var(--ease);
    background: #ffffff12;
    border-radius: 11px;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    top: 12px;
    right: 12px
}

dialog .close:hover {
    background: var(--red);
    transform: rotate(90deg)
}

dialog .modal-icon {
    background: linear-gradient(140deg, var(--red), var(--red-d));
    width: 58px;
    height: 58px;
    font: 900 26px var(--display);
    border-radius: 16px;
    place-items: center;
    margin-bottom: 18px;
    display: grid;
    box-shadow: 0 10px 30px #e5322555
}

dialog.lightbox {
    background: #05080d;
    width: min(1200px, 95vw);
    padding: 12px
}

dialog.lightbox img {
    border-radius: 14px;
    width: 100%
}

dialog.lightbox figcaption {
    font: 800 13px var(--display);
    letter-spacing: 2px;
    color: var(--muted);
    padding: 12px 6px 4px
}

.service-gallery {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 46px 0;
    display: grid;
    position: relative
}

.service-gallery img {
    object-fit: contain;
    background: #080d15;
    border-radius: 14px;
    grid-area: 1/1/auto/-1;
    width: 100%;
    height: min(76svh, 760px)
}

.service-gallery figcaption {
    grid-area: 3/1/auto/-1
}

.gallery-arrow {
    z-index: 1;
    color: #fff;
    width: 42px;
    height: 42px;
    font: 700 30px/1 var(--body);
    cursor: pointer;
    background: #0a1220d9;
    border: 1px solid #ffffff26;
    border-radius: 50%;
    place-items: center;
    transition: background .2s, border-color .2s;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.gallery-arrow:hover {
    background: var(--red);
    border-color: var(--red)
}

.gallery-previous {
    left: 10px
}

.gallery-next {
    right: 10px
}

.gallery-count {
    text-align: left;
    color: var(--muted);
    font: 800 11px var(--body);
    grid-column: 1
}

.gallery-dots {
    grid-column: 2;
    justify-content: center;
    gap: 7px;
    display: flex
}

.gallery-dot {
    cursor: pointer;
    background: #718096;
    border: 0;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    padding: 0
}

.gallery-dot.active {
    background: var(--red-h);
    border-radius: 5px;
    width: 20px
}

dialog.auth-dialog {
    width: min(440px, 100vw - 30px);
    max-width: none;
    max-height: calc(100svh - 30px);
    color: var(--text);
    background: radial-gradient(70% 40% at 100% 0, #a3292633, #0000 80%), linear-gradient(155deg, #16263e, #0b1422);
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 34px;
    position: fixed;
    overflow: auto;
    box-shadow: 0 28px 100px #000a
}

dialog.auth-dialog::backdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #03060bd9
}

.auth-dialog .eyebrow {
    color: var(--red-h);
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-size: 9px;
    font-weight: 900;
    display: block
}

.auth-dialog h2 {
    font: 900 26px/1.15 var(--display);
    letter-spacing: -.5px;
    margin: 0
}

.auth-dialog h2 em {
    color: var(--red-h);
    font-style: normal
}

.auth-intro {
    color: #98a7bb;
    margin: 8px 0 22px;
    font-size: 12px
}

.auth-close {
    color: #dce5f1;
    cursor: pointer;
    background: #ffffff0b;
    border: 1px solid #ffffff1c;
    border-radius: 9px;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px
}

.auth-close:hover {
    background: #e53225
}

.auth-form {
    gap: 14px;
    display: grid
}

.auth-field label {
    color: #b9c5d5;
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 800;
    display: block
}

.auth-field input,
.auth-field select {
    color: #f2f5fa;
    width: 100%;
    height: 46px;
    font: 600 12px var(--body);
    background: #080f1bcc;
    border: 1px solid #ffffff20;
    border-radius: 10px;
    outline: 0;
    padding: 0 13px
}

.auth-field input:focus,
.auth-field select:focus {
    border-color: #5d8fd8;
    box-shadow: 0 0 0 3px #2d63b033
}

.auth-field input::placeholder {
    color: #66758a
}

.auth-field select {
    appearance: none;
    background-image: linear-gradient(45deg, #0000 50%, #9eabc0 50%), linear-gradient(135deg, #9eabc0 50%, #0000 50%);
    background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px
}

.auth-field select option {
    color: #fff;
    background: #101b2a
}

.auth-submit {
    border-radius: 10px;
    width: 100%;
    height: 48px;
    margin-top: 3px;
    padding: 0 16px;
    font-size: 10px
}

.auth-error {
    color: #ff978c;
    background: #e5322514;
    border: 1px solid #e5322555;
    border-radius: 9px;
    margin: 0;
    padding: 10px 12px;
    font-size: 10px
}

.auth-error[hidden] {
    display: none
}

.auth-demo-note {
    color: #8492a6;
    text-align: center;
    margin: 16px 0 0;
    font-size: 9px
}

@media (width<=600px) {
    .service-gallery {
        padding: 4px 32px 0
    }

    .service-gallery img {
        height: min(64svh, 520px)
    }

    .gallery-arrow {
        width: 36px;
        height: 36px
    }

    .gallery-previous {
        left: 2px
    }

    .gallery-next {
        right: 2px
    }

    dialog.auth-dialog {
        padding: 28px 20px
    }

    .auth-dialog h2 {
        font-size: 22px
    }
}

.reveal {
    opacity: 0;
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--i, 0)*.12s);
    transform: translateY(40px)
}

.reveal.in,
.no-js .reveal {
    opacity: 1;
    transform: none
}

.cursor-glow {
    pointer-events: none;
    z-index: 1;
    width: 420px;
    height: 420px;
    transform: translate(var(--mx, -999px), var(--my, -999px));
    background: radial-gradient(#2d63b01f, #0000 65%);
    border-radius: 50%;
    margin: -210px 0 0 -210px;
    transition: transform .25s linear;
    position: fixed;
    top: 0;
    left: 0
}

@media (hover:none) {
    .cursor-glow {
        display: none
    }
}

@media (width<=1100px) {
    .header nav a {
        padding: 10px 9px;
        font-size: 14px
    }

    .header {
        gap: 14px
    }

    .header-mark {
        padding-right: 14px
    }

    .header-mark span {
        display: none
    }
}

@media (width<=1000px) {
    .cards {
        gap: 16px
    }

    .card-inner img {
        aspect-ratio: 3/4
    }

    .soc {
        min-height: 250px;
        padding: 22px
    }

    .soc-copy b {
        font-size: 21px
    }

    .cta {
        grid-template-columns: auto 1fr
    }

    .cta-actions {
        grid-column: 1/-1;
        justify-content: flex-start
    }

    .hud-radar {
        display: none
    }
}

@media (width<=860px) {
    .header {
        width: calc(100% - 20px);
        height: 62px;
        padding: 0 8px 0 12px;
        top: 10px
    }

    .header-mark {
        border: 0;
        padding: 0
    }

    .header-mark span {
        display: block
    }

    .menu {
        display: grid
    }

    .header nav {
        -webkit-backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        height: auto;
        transition: .3s var(--ease);
        background: #0c1626f5;
        border: 1px solid #ffffff1a;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        transform: translateY(-10px)scale(.98);
        box-shadow: 0 20px 50px #000a
    }

    .header nav.open {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .header nav a {
        padding: 14px 16px;
        font-size: 16px
    }

    .header nav a.active:after {
        width: 30px;
        bottom: 6px;
        left: 16px;
        right: auto
    }

    .nav-donate {
        gap: 12px;
        height: 44px;
        padding: 0 14px;
        font-size: 12px
    }

    .nav-account {
        gap: 7px;
        height: 44px;
        padding: 0 11px;
        font-size: 9px
    }
}

@media (width<=760px) {
    .hero {
        min-height: max(640px, 100svh)
    }

    .hero-bg img {
        object-position: 66% center
    }

    .hero-shade {
        background: linear-gradient(90deg, #070b12f0, #070b1299 70%, #070b1255), linear-gradient(0deg, var(--bg) 4%, transparent 50%), linear-gradient(180deg, #070b12aa, transparent 25%)
    }

    .hero-copy {
        padding: 120px 0 110px
    }

    .hero-title {
        font-size: clamp(46px, 15vw, 92px)
    }

    .section-head h2 {
        font-size: clamp(30px, 9.4vw, 56px)
    }

    .btn-xl {
        width: 100%;
        min-width: 0
    }

    .key-hint,
    .hud-corner,
    .scroll-cue {
        display: none
    }

    .tapes {
        height: 120px;
        margin: -60px 0 -30px
    }

    .tape {
        height: 46px
    }

    .tape-group span {
        padding: 0 18px;
        font-size: 16px
    }

    .tape-blue .tape-group span {
        font-size: 14px
    }

    .streets {
        padding: 110px 0 90px
    }

    .section-head {
        grid-template-columns: 1fr;
        margin-bottom: 36px
    }

    .section-head h2 em {
        -webkit-text-stroke: 1px var(--ink)
    }

    .cards,
    .paths,
    .socials {
        grid-template-columns: minmax(0, 1fr)
    }

    .card3d:nth-child(2) .card-inner {
        margin-top: 0
    }

    .card-inner img {
        aspect-ratio: 16/10
    }

    .paths {
        gap: 14px;
        margin-top: 44px
    }

    .social {
        padding: 90px 0 80px
    }

    .soc {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
        min-height: 0;
        display: grid
    }

    .soc-icon {
        border-radius: 18px;
        width: 64px;
        height: 64px;
        margin: 0
    }

    .soc-icon svg {
        width: 36px;
        height: 36px
    }

    .soc-copy {
        margin: 0
    }

    .soc-action {
        grid-column: 1/-1
    }

    .soc-badge {
        top: 14px;
        right: 14px
    }

    .cta {
        text-align: left;
        grid-template-columns: 1fr;
        margin-top: 44px;
        padding: 26px 22px
    }

    .cta-lion {
        width: 80px
    }

    .cta-actions .btn {
        flex: 220px
    }

    .footer {
        gap: 16px 20px
    }

    .footer-link {
        margin-left: 0
    }

    .age {
        margin-left: auto
    }

    dialog {
        padding: 36px 22px 26px
    }
}

@media (width<=440px) {
    .header-mark span {
        display: none
    }

    .header {
        gap: 5px
    }

    .nav-account {
        letter-spacing: 0;
        gap: 0;
        height: 40px;
        padding: 0 6px;
        font-size: 7px
    }

    .nav-account i {
        display: none
    }

    .nav-donate {
        gap: 6px;
        height: 40px;
        padding: 0 8px;
        font-size: 10px
    }

    .menu {
        width: 40px;
        height: 40px
    }

    .soc {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 20px
    }

    .soc-icon {
        width: 52px;
        height: 52px
    }

    .soc-copy b {
        font-size: 19px
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :before,
    :after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }

    .tape-track {
        animation: none
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .rain {
        display: none
    }
}

.new.soon {
    color: #c9d3e1;
    background: #ffffff1f;
    border: 1px solid #ffffff26
}

.header nav a.nav-soon {
    color: #8f9cb0
}

.header nav a.nav-soon:hover {
    color: #c9d3e1
}

.nav-account.is-soon span {
    padding-left: 16px;
    position: relative
}

.nav-account.is-soon span:before {
    content: "";
    opacity: .7;
    background: currentColor;
    width: 10px;
    height: 11px;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -55%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7.5a5 5 0 0 1 10 0V10h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm3 0h4V7.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") 50%/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7.5a5 5 0 0 1 10 0V10h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm3 0h4V7.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") 50%/contain no-repeat
}

dialog.soon-dialog {
    text-align: center;
    overflow: hidden
}

dialog.soon-dialog[open] {
    animation: pop .5s var(--ease)
}

.soon-dialog .auth-intro {
    max-width: 340px;
    margin: 12px auto 24px;
    font-size: 14px;
    line-height: 1.6
}

.soon-dialog h2 {
    font-size: 24px
}

.soon-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    display: flex
}

.soon-actions .btn {
    flex: 150px;
    gap: 16px;
    height: 50px;
    padding: 0 18px;
    font-size: 11px
}

.soon-lock {
    background: radial-gradient(circle at 35% 30%, #2a4570, #0b1422 75%);
    border-radius: 50%;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 4px auto 20px;
    display: grid;
    position: relative;
    box-shadow: 0 0 0 1px #ffffff1f, 0 0 40px #e5322540
}

.soon-lock svg {
    fill: none;
    stroke: #fff;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 36px;
    height: 36px;
    animation: 3.2s ease-in-out infinite lockShake
}

.soon-lock i {
    border: 1px solid #e5322599;
    border-radius: 50%;
    animation: 2.4s ease-out infinite ring;
    position: absolute;
    inset: 0
}

.soon-lock i:nth-child(2) {
    animation-delay: 1.2s
}

@keyframes ring {
    0% {
        opacity: .9;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(1.9)
    }
}

@keyframes lockShake {

    0%,
    70%,
    to {
        rotate: 0deg
    }

    74% {
        rotate: -12deg
    }

    78% {
        rotate: 10deg
    }

    82% {
        rotate: -6deg
    }

    86% {
        rotate: 3deg
    }
}

.soon-page main,
.soon-page .footer {
    filter: blur(7px)saturate(.8)brightness(.55);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.soon-page main {
    max-height: 100svh;
    overflow: hidden
}

.soon-page .footer {
    display: none
}

.soon-cover {
    z-index: 40;
    background: radial-gradient(60% 55%, #e532252e, #0000 70%), linear-gradient(#070b1266, #070b12cc);
    place-items: center;
    padding: 110px 16px 30px;
    display: grid;
    position: fixed;
    inset: 0;
    overflow: auto
}

.soon-card {
    text-align: center;
    width: min(560px, 100%);
    animation: rise .9s var(--ease) both;
    background: linear-gradient(160deg, #16263ef2, #0b1422f7);
    border: 1px solid #fff2;
    border-radius: 26px;
    padding: 40px 38px 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 50px 140px #000c, inset 0 1px #ffffff1a
}

.soon-card:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--sa, 0deg), transparent 0 70%, var(--red) 84%, #f5b335 92%, transparent 100%);
    -webkit-mask-composite: xor;
    padding: 1px;
    animation: 5s linear infinite soonBorder;
    position: absolute;
    inset: -1px;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

@property --sa {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

@keyframes soonBorder {
    to {
        --sa: 360deg
    }
}

.soon-card .soon-lock {
    width: 96px;
    height: 96px
}

.soon-card .chip {
    margin-bottom: 18px
}

.soon-card h1 {
    font: 900 clamp(40px, 8vw, 76px)/.95 var(--display);
    letter-spacing: -.03em;
    margin-bottom: 16px
}

.soon-card h1 span {
    color: var(--red);
    text-shadow: 0 1px #c92a1f, 0 2px #b2241a, 0 3px #9c1f17, 0 4px #861a13, 0 12px 30px #e532254d;
    display: block
}

.soon-card p {
    color: #c4cddb;
    max-width: 420px;
    margin: 0 auto;
    font-size: 16px
}

.soon-card .soon-actions {
    margin-top: 28px
}

.soon-card .soon-actions .btn {
    height: 56px;
    font-size: 12px
}

.soon-perks {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    display: flex
}

.soon-perks span {
    color: #aeb9c9;
    background: #ffffff0d;
    border: 1px solid #ffffff1a;
    border-radius: 30px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700
}

@media (width<=560px) {
    .soon-card {
        border-radius: 22px;
        padding: 32px 20px 24px
    }

    .soon-card p {
        font-size: 15px
    }
}

@media (width>=861px) and (width<=1280px) {
    .header {
        gap: 14px
    }

    .header nav {
        gap: 2px
    }

    .header nav a {
        padding: 10px 8px;
        font-size: 13.5px
    }

    .header-mark {
        padding-right: 14px
    }
}

@media (width>=861px) and (width<=1060px) {
    .header nav a {
        padding: 8px 6px;
        font-size: 12.5px
    }

    .header nav a .new,
    .nav-account span:before {
        display: none
    }

    .nav-account.is-soon span {
        padding-left: 0
    }
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%
}

.tabbar,
.menu-scrim,
.swipe-hint {
    display: none
}

@media (width<=760px) {
    body {
        padding-bottom: calc(84px + env(safe-area-inset-bottom))
    }

    input,
    select,
    textarea {
        font-size: 16px !important
    }

    .btn:active,
    .lot-btn:active,
    .tab:active,
    .card3d:active .card-inner {
        transform: scale(.97)
    }

    .header {
        height: 58px;
        padding: 0 8px 0 10px
    }

    .header-mark span {
        font-size: 11px;
        display: block
    }

    .nav-donate,
    .nav-account {
        display: none
    }

    .menu {
        width: 44px;
        height: 44px;
        margin-left: auto
    }

    .menu-scrim {
        z-index: 40;
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: .3s var(--ease);
        background: #03060bb3;
        display: block;
        position: fixed;
        inset: 0
    }

    .menu-open .menu-scrim {
        opacity: 1;
        visibility: visible
    }

    .menu-open body {
        overflow: hidden
    }

    .header nav {
        border-radius: 20px;
        max-height: calc(100svh - 170px);
        padding: 8px;
        top: 66px;
        overflow: auto
    }

    .header nav a {
        border-radius: 12px;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 16px;
        font-size: 17px;
        display: flex
    }

    .header nav a:active {
        background: #ffffff0d
    }

    .header nav a.active {
        background: #e5322514
    }

    .header nav a.active:after {
        display: none
    }

    .header nav a.active:before {
        content: "";
        background: var(--red);
        width: 4px;
        height: 20px;
        box-shadow: 0 0 12px var(--red);
        border-radius: 4px;
        margin-left: -8px
    }

    .tabbar {
        z-index: 45;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        -webkit-backdrop-filter: blur(18px)saturate(1.4);
        height: 66px;
        transition: transform .35s var(--ease), opacity .35s;
        background: linear-gradient(#101c2ef2, #0a121ff7);
        border: 1px solid #ffffff1c;
        border-radius: 22px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 0 4px;
        display: grid;
        position: fixed;
        box-shadow: 0 18px 44px #000c, inset 0 1px #ffffff14
    }

    .tab {
        color: #8695ab;
        min-width: 0;
        font: 800 10px/1 var(--body);
        letter-spacing: .2px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        transition: color .2s, transform .15s;
        display: flex;
        position: relative
    }

    .tab svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
        width: 23px;
        height: 23px
    }

    .tab span {
        white-space: nowrap
    }

    .tab.active {
        color: #fff
    }

    .tab.active svg {
        stroke: var(--red-h);
        filter: drop-shadow(0 0 8px #e5322599)
    }

    .tab.active:after {
        content: "";
        background: var(--red-h);
        width: 4px;
        height: 4px;
        box-shadow: 0 0 8px var(--red);
        border-radius: 50%;
        position: absolute;
        bottom: 6px
    }

    .tab-donate {
        color: #dfe6f0;
        justify-content: flex-end;
        padding-bottom: 9px
    }

    .tab-coin {
        width: 52px;
        height: 52px;
        font: 900 13px var(--display);
        color: #fff;
        background: radial-gradient(circle at 35% 30%, var(--red-h), var(--red) 45%, var(--red-d));
        border: 3px solid #0b1422;
        border-radius: 50%;
        place-items: center;
        display: grid;
        position: absolute;
        top: -18px;
        box-shadow: 0 10px 24px #e5322580, inset 0 0 0 1px #ff6a5566
    }

    .tab-donate.active:after {
        display: none
    }

    .tab-donate.active .tab-coin {
        box-shadow: 0 0 0 2px var(--red-h), 0 10px 28px #e53225aa
    }

    .tab-dot {
        background: var(--gold, #f5b335);
        border-radius: 50%;
        width: 7px;
        height: 7px;
        position: absolute;
        top: 12px;
        left: calc(50% + 8px);
        box-shadow: 0 0 8px #f5b335
    }

    .menu-open .tabbar {
        opacity: 0;
        transform: translateY(140%)
    }

    html:has(input:focus, select:focus, textarea:focus) .tabbar {
        opacity: 0;
        transform: translateY(140%)
    }

    .cards {
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        perspective: none;
        gap: 12px;
        margin-inline: calc(-1*clamp(18px, 5vw, 64px));
        padding: 4px clamp(18px, 5vw, 64px) 16px;
        scroll-padding-inline: clamp(18px, 5vw, 64px);
        display: flex;
        overflow-x: auto
    }

    .cards::-webkit-scrollbar {
        display: none
    }

    .card3d {
        scroll-snap-align: start;
        flex: 0 0 80%
    }

    .card-inner img {
        aspect-ratio: 4/5
    }

    .card-cap {
        bottom: 16px;
        left: 18px;
        right: 16px
    }

    .card-cap b {
        font-size: 20px
    }

    .swipe-hint {
        color: var(--muted);
        align-items: center;
        gap: 8px;
        margin: -2px 0 0;
        font-size: 12px;
        font-weight: 700;
        display: flex
    }

    .paths {
        gap: 10px;
        margin-top: 30px
    }

    .path {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        padding: 16px;
        display: grid
    }

    .path-icon {
        border-radius: 14px;
        grid-row: 1/3;
        width: 48px;
        height: 48px;
        margin: 0
    }

    .path-icon svg {
        width: 23px;
        height: 23px
    }

    .path h3 {
        align-self: end;
        margin: 0 0 2px;
        font-size: 17px
    }

    .path p {
        align-self: start;
        font-size: 14px;
        line-height: 1.45
    }

    .path .xp {
        grid-column: 1/-1;
        margin-top: 14px
    }

    .path-num {
        font-size: 46px;
        top: 4px;
        right: 12px
    }

    .footer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
        padding: 26px clamp(18px, 5vw, 64px) 22px;
        display: grid
    }

    .footer-brand {
        grid-area: 1/1
    }

    .age {
        grid-area: 1/2;
        justify-self: end;
        margin: 0
    }

    .footer-link,
    .footer-link2 {
        border: 1px solid var(--line);
        color: #cfd8e5;
        text-align: center;
        background: #ffffff08;
        border-radius: 14px;
        justify-content: center;
        align-items: center;
        min-height: 48px;
        margin: 0;
        padding: 0 12px;
        display: flex
    }

    .copy {
        text-align: center;
        opacity: .7;
        grid-area: 3/1/auto/-1;
        font-size: 12px
    }

    dialog#modal,
    dialog.auth-dialog {
        width: calc(100% - 20px)
    }
}

@media (width<=360px) {
    .tab {
        font-size: 9px
    }

    .header-mark span {
        display: none
    }
}

.nav-extra {
    display: none
}

@media (width<=760px) {
    .header nav .nav-extra {
        border-top: 1px solid var(--line);
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 6px;
        padding-top: 10px;
        display: grid
    }

    .header nav .nav-extra a {
        border-radius: 14px;
        justify-content: space-between;
        height: 50px;
        min-height: 50px;
        padding: 0 16px;
        font-size: 12px
    }

    .header nav .nav-extra a:before {
        display: none
    }

    .soc {
        padding: 16px 18px
    }

    .soc-action {
        margin-top: 14px;
        padding-top: 12px
    }

    .path-num {
        opacity: .6
    }
}

@property --ry {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg
}

@property --rx {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg
}

@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

.shop-page {
    --gold: #f5b335;
    --gold-l: #ffd36b
}

.lot-badge {
    height: 26px;
    font: 800 10px/1 var(--display);
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(110deg, var(--red-d), var(--red));
    border-radius: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    display: inline-flex;
    box-shadow: 0 4px 14px #e5322555, inset 0 1px #ffffff40
}

.lot-badge b {
    font-size: 11px;
    font-weight: 400
}

.lot-badge.gold {
    color: #2a1500;
    background: linear-gradient(110deg, #e8890c, var(--gold) 45%, var(--gold-l) 70%, var(--gold));
    background-size: 220% 100%;
    animation: 3s linear infinite goldShift;
    box-shadow: 0 4px 16px #f5b33566, inset 0 1px #ffffff80
}

@keyframes goldShift {
    to {
        background-position: -220% 0
    }
}

.chip-hot i {
    background: var(--red-h);
    box-shadow: 0 0 10px var(--red-h)
}

.pips {
    gap: 3px;
    display: inline-flex
}

.pips i {
    background: #ffffff1c;
    border-radius: 2px;
    width: 12px;
    height: 6px
}

.pips i.on {
    background: var(--c, var(--red));
    box-shadow: 0 0 8px color-mix(in oklab, var(--c, var(--red)) 70%, transparent)
}

.is-rare .pips i.on,
.lot-dialog.is-rare .pips i.on {
    background: var(--gold);
    animation: 1.6s ease-in-out infinite pip;
    box-shadow: 0 0 8px #f5b33599
}

.is-rare .pips i.on:nth-child(2) {
    animation-delay: .2s
}

.is-rare .pips i.on:nth-child(3) {
    animation-delay: .4s
}

@keyframes pip {
    50% {
        opacity: .45
    }
}

.cmd {
    color: #fff;
    font: 800 13px var(--display);
    cursor: pointer;
    background: #ffffff10;
    border: 1px solid #ffffff2a;
    border-radius: 7px;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    transition: background .2s, border-color .2s;
    display: inline-flex
}

.cmd:hover {
    background: #ffffff1f;
    border-color: #ffffff50
}

.cmd i {
    opacity: .7;
    background: currentColor;
    width: 12px;
    height: 12px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E") 50%/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E") 50%/contain no-repeat
}

.cmd.copied {
    background: #22c55e33;
    border-color: #22c55e
}

.cmd.copied i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E")
}

code {
    font: 800 .92em var(--display);
    color: #fff
}

.shop-hero {
    isolation: isolate;
    min-height: min(820px, 100svh);
    padding: 140px 0 110px;
    position: relative;
    overflow: hidden
}

.shop-hero-bg {
    z-index: -1;
    position: absolute;
    inset: 0
}

.shop-hero-bg img {
    object-fit: cover;
    object-position: 60% 40%;
    opacity: .22;
    filter: blur(4px)saturate(1.1);
    width: 100%;
    height: 100%
}

.shop-hero-bg:after {
    content: "";
    background: radial-gradient(ellipse 45% 60% at 74% 50%, color-mix(in oklab, var(--c, #e53225) 30%, transparent), transparent 70%), radial-gradient(ellipse 40% 50% at 8% 15%, #2d63b03a, transparent 70%), linear-gradient(90deg, var(--bg) 0%, #070b12b3 45%, #070b1240 100%), linear-gradient(0deg, var(--bg), transparent 45%);
    transition: background .8s;
    position: absolute;
    inset: 0
}

.sh-grid {
    z-index: 1;
    opacity: .5;
    background-image: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px);
    background-size: 60px 60px;
    position: absolute;
    inset: 0;
    -webkit-mask: radial-gradient(60% 70% at 70%, #000, #0000);
    mask: radial-gradient(60% 70% at 70%, #000, #0000)
}

.sh-beam {
    z-index: 1;
    filter: blur(20px);
    transform-origin: top;
    background: linear-gradient(#ffffff14, #0000 70%);
    width: 180px;
    height: 140%;
    animation: 9s ease-in-out infinite beam;
    position: absolute;
    top: -20%
}

.sh-beam.b1 {
    left: 52%;
    rotate: 18deg
}

.sh-beam.b2 {
    animation-delay: -4s;
    left: 78%;
    rotate: -14deg
}

@keyframes beam {
    50% {
        opacity: .3;
        translate: 40px
    }
}

.shop-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 30px;
    display: grid
}

.shop-title {
    font: 900 clamp(44px, 7vw, 112px)/.92 var(--display);
    letter-spacing: -.035em;
    margin: 24px 0 20px
}

.shop-title .t1 {
    white-space: nowrap;
    color: #f4f6fa;
    text-shadow: 0 1px #c9d2df, 0 2px #b5c0d0, 0 3px #9fabbe, 0 4px #8996ab, 0 5px #6f7c92, 0 6px #56627a, 0 14px 30px #0009;
    display: block
}

.shop-title .t1 .ch {
    animation: chIn .9s var(--ease) both;
    animation-delay: calc(.15s + var(--c)*50ms);
    display: inline-block
}

.shop-title .t2 {
    letter-spacing: .22em;
    color: #fff;
    background: linear-gradient(110deg, var(--red-d), var(--red));
    animation: rise .8s .6s var(--ease) both;
    border-radius: 10px;
    margin-top: 14px;
    padding: 8px 14px;
    font-size: clamp(11px, 1.15vw, 16px);
    display: inline-block;
    transform: rotate(-1.5deg);
    box-shadow: 0 10px 30px #e5322555
}

.shop-hero-copy>p {
    color: #c4cddb;
    max-width: 500px;
    animation: rise .9s .5s var(--ease) both;
    font-size: clamp(16px, 1.3vw, 18px)
}

.shop-hero-copy>p b {
    color: #fff
}

.shop-stats {
    animation: rise .9s .7s var(--ease) both;
    gap: 10px;
    margin-top: 26px;
    display: flex
}

.shop-stats div {
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff0a;
    border-radius: 14px;
    padding: 12px 16px
}

.shop-stats b {
    font: 900 22px/1 var(--display);
    display: block
}

.shop-stats div:last-child b {
    color: var(--red-h)
}

.shop-stats span {
    color: var(--muted);
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    display: block
}

.shop-hero .hero-actions {
    animation-delay: .9s
}

.from {
    color: var(--muted);
    font-weight: 700
}

.from b {
    font: 900 18px var(--display);
    color: #fff
}

.showcase {
    --c: #f5b335;
    min-height: 540px;
    animation: rise 1s .3s var(--ease) both;
    justify-items: center;
    display: grid;
    position: relative
}

.sc-rays {
    aspect-ratio: 1;
    background: repeating-conic-gradient(from var(--spin), color-mix(in oklab, var(--c) 26%, transparent) 0 7deg, transparent 7deg 20deg);
    border-radius: 50%;
    width: 640px;
    transition: background .8s;
    animation: 40s linear infinite spinR;
    position: absolute;
    top: 44%;
    left: 50%;
    translate: -50% -50%;
    -webkit-mask: radial-gradient(circle, #000 8%, #0000 62%);
    mask: radial-gradient(circle, #000 8%, #0000 62%)
}

@keyframes spinR {
    to {
        --spin: 360deg
    }
}

.sc-word {
    font: 900 clamp(70px, 9vw, 140px)/1 var(--display);
    letter-spacing: -.04em;
    color: #0000;
    -webkit-text-stroke: 1px #ffffff1c;
    white-space: nowrap;
    pointer-events: none;
    position: absolute;
    top: 8%;
    left: 50%;
    translate: -50%
}

.sc-stage {
    cursor: pointer;
    place-items: center;
    width: 100%;
    height: 400px;
    display: grid;
    position: relative
}

.sc-platform {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--c) 50%, #0b1422) 0%, #0b1422 55%, transparent 72%);
    border-radius: 50%;
    width: min(520px, 92%);
    height: 90px;
    transition: background .8s;
    position: absolute;
    bottom: 34px;
    left: 50%;
    translate: -50%;
    box-shadow: 0 0 0 1px #ffffff14, inset 0 -6px 20px #0008
}

.sc-ring {
    border: 2px solid color-mix(in oklab, var(--c) 70%, transparent);
    width: min(560px, 96%);
    height: 104px;
    box-shadow: 0 0 30px color-mix(in oklab, var(--c) 60%, transparent), inset 0 0 30px color-mix(in oklab, var(--c) 40%, transparent);
    border-radius: 50%;
    transition: border-color .8s, box-shadow .8s;
    position: absolute;
    bottom: 28px;
    left: 50%;
    translate: -50%
}

.sc-ring i {
    border: 1px dashed #ffffff2a;
    border-radius: 50%;
    animation: 24s linear infinite spin;
    position: absolute;
    inset: -12px
}

.sc-pic {
    z-index: 2;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 0 60px;
    display: grid;
    position: relative
}

.sc-pic picture,
.sc-pic img {
    object-fit: contain;
    width: auto;
    max-width: min(560px, 100%);
    height: auto;
    max-height: 300px;
    display: block
}

.sc-pic img {
    filter: drop-shadow(0 24px 30px #000c) drop-shadow(0 0 40px color-mix(in oklab, var(--c) 30%, transparent));
    animation: 5s ease-in-out infinite scFloat
}

@keyframes scFloat {
    50% {
        transform: translateY(-12px)
    }
}

.showcase.swap .sc-pic picture {
    animation: scIn .9s var(--ease) both
}

@keyframes scIn {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translate(70px)scale(.9)
    }
}

.showcase.swap .sc-card {
    animation: scCard .6s var(--ease) both
}

@keyframes scCard {
    0% {
        opacity: .2;
        transform: translateY(8px)
    }
}

.sc-card {
    z-index: 3;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #0b1422d9;
    border: 1px solid #ffffff1f;
    border-radius: 20px;
    gap: 10px;
    width: min(440px, 100%);
    margin-top: -20px;
    padding: 18px 20px;
    display: grid;
    position: relative;
    box-shadow: 0 20px 50px #0008
}

.sc-card .lot-badge {
    justify-self: start
}

.sc-name {
    font: 900 22px/1.1 var(--display);
    letter-spacing: -.01em
}

.sc-row {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.sc-price {
    font: 900 26px var(--display);
    color: var(--gold-l);
    text-shadow: 0 0 24px #f5b33566;
    white-space: nowrap
}

.sc-buy {
    gap: 18px;
    height: 48px;
    padding: 0 20px;
    font-size: 12px
}

.sc-dots {
    gap: 6px;
    margin-top: 14px;
    display: flex
}

.sc-dots button {
    width: 22px;
    height: 5px;
    transition: background .3s, width .4s var(--ease);
    background: #ffffff26;
    border-radius: 4px
}

.sc-dots button.on {
    background: var(--c);
    width: 40px
}

.showcase .pt {
    background: var(--gold-l);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 12px var(--gold-l), 0 0 24px var(--red);
    z-index: 3;
    border-radius: 50%;
    animation: 3.2s ease-in-out infinite ptk;
    position: absolute
}

.showcase .p1 {
    top: 22%;
    left: 10%
}

.showcase .p2 {
    animation-delay: .8s;
    top: 18%;
    right: 8%
}

.showcase .p3 {
    animation-delay: 1.6s;
    top: 62%;
    left: 16%
}

.showcase .p4 {
    animation-delay: 2.4s;
    top: 58%;
    right: 14%
}

@keyframes ptk {

    0%,
    to {
        opacity: 0;
        transform: translateY(10px)scale(.4)
    }

    50% {
        opacity: 1;
        transform: translateY(-10px)scale(1)
    }
}

.shop-tapes {
    margin-top: -70px
}

.perks {
    padding: 90px 0 20px
}

.perks-in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    display: grid
}

.perk {
    border: 1px solid var(--line);
    background: linear-gradient(160deg, #13233acc, #0c1320cc);
    border-radius: 18px;
    grid-template-rows: auto auto;
    grid-template-columns: 52px 1fr;
    align-items: center;
    column-gap: 16px;
    padding: 20px 22px;
    display: grid
}

.perk-ic {
    background: linear-gradient(140deg, var(--red), var(--red-d));
    border-radius: 15px;
    grid-row: 1/3;
    place-items: center;
    width: 52px;
    height: 52px;
    display: grid;
    box-shadow: 0 10px 26px #e5322555
}

.perk-ic.gold {
    background: linear-gradient(140deg, var(--gold-l), #c9780c);
    box-shadow: 0 10px 26px #f5b33555
}

.perk-ic.blue {
    background: linear-gradient(140deg, var(--blue-l), var(--blue));
    box-shadow: 0 10px 26px #2d63b055
}

.perk-ic svg {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 26px;
    height: 26px
}

.perk b {
    font: 800 17px var(--display);
    align-self: end
}

.perk span:last-child {
    color: var(--muted);
    align-self: start;
    margin-top: 3px;
    font-size: 14px
}

.catalog-shop {
    padding: 50px 0 60px
}

.shop-bar {
    z-index: 20;
    -webkit-backdrop-filter: blur(16px);
    background: #0b121ed9;
    border: 1px solid #ffffff14;
    border-radius: 18px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px;
    display: flex;
    position: sticky;
    top: 94px;
    box-shadow: 0 10px 30px #0006
}

.shop-tabs {
    scrollbar-width: none;
    background: #ffffff08;
    border-radius: 13px;
    gap: 4px;
    min-width: 0;
    padding: 4px;
    display: flex;
    position: relative;
    overflow-x: auto
}

.shop-tabs::-webkit-scrollbar {
    display: none
}

.shop-tabs button {
    z-index: 1;
    color: #b8c3d3;
    white-space: nowrap;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 800;
    transition: color .25s;
    display: flex;
    position: relative
}

.shop-tabs button em {
    font-style: normal;
    font: 800 10px var(--display);
    color: #cfd8e5;
    background: #ffffff14;
    border-radius: 20px;
    padding: 3px 7px
}

.shop-tabs button[aria-selected=true] {
    color: #fff
}

.shop-tabs button[aria-selected=true] em {
    color: #fff;
    background: #fff3
}

.shop-tabs-glider {
    background: linear-gradient(110deg, var(--red-d), var(--red));
    transition: transform .45s var(--ease), width .45s var(--ease);
    border-radius: 10px;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    box-shadow: 0 6px 18px #e5322566
}

.shop-sort {
    color: #d6dde8;
    white-space: nowrap;
    border: 1px solid #ffffff1a;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s;
    display: flex
}

.shop-sort:hover {
    background: #ffffff0d
}

.shop-group {
    padding-top: 50px
}

.shop-group[hidden] {
    display: none
}

.group-head {
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 6px 18px;
    margin-bottom: 26px;
    display: grid
}

.group-num {
    font: 900 14px var(--display);
    color: var(--red);
    align-self: start;
    margin-top: 8px
}

.group-head h2 {
    font: 900 clamp(32px, 4.4vw, 60px)/1 var(--display);
    letter-spacing: -.03em
}

.group-head h2 em {
    color: var(--red);
    font-style: normal
}

.group-head p {
    max-width: 320px;
    color: var(--muted);
    text-align: right;
    font-size: 15px
}

.lots {
    gap: 18px;
    display: grid
}

.lots-cars {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.lots-cars .lot {
    grid-column: span 2
}

.lots-cars .lot.is-rare {
    grid-column: span 3
}

.lots-cars .is-rare .lot-stage {
    aspect-ratio: 16/9
}

.lots-cars .is-rare .lot-name {
    font-size: 24px
}

.lots-skins,
.lots-acc {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.lot {
    perspective: 1000px;
    opacity: 0;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(min(var(--i), 5)*70ms);
    transform: translateY(40px)
}

.lot.in,
.no-js .lot {
    opacity: 1;
    transform: none
}

.lot-in {
    isolation: isolate;
    background: linear-gradient(180deg, color-mix(in oklab, var(--c) 14%, #101b2c) 0%, #0c1420 48%, #0a111b 100%);
    height: 100%;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .5s var(--ease), box-shadow .4s, border-color .3s;
    border: 1px solid #ffffff14;
    border-radius: 22px;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px #0007
}

.lot:hover .lot-in {
    border-color: color-mix(in oklab, var(--c) 60%, transparent);
    box-shadow: 0 30px 70px #000a, 0 0 50px color-mix(in oklab, var(--c) 22%, transparent)
}

.lot-glow {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 30%), color-mix(in oklab, var(--c) 25%, transparent), transparent 45%);
    transition: opacity .4s;
    position: absolute;
    inset: 0
}

.lot:hover .lot-glow {
    opacity: 1
}

.is-rare .lot-in:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    background: conic-gradient(from var(--spin), transparent 0 62%, #e8890c 76%, var(--gold-l) 86%, transparent 100%);
    -webkit-mask-composite: xor;
    padding: 1.5px;
    animation: 4.5s linear infinite spinR;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

.lot-top {
    z-index: 3;
    pointer-events: none;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px
}

.lot-ex {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    height: 24px;
    font: 800 9px var(--display);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #e7edf6;
    white-space: nowrap;
    background: #070b12b3;
    border: 1px solid #ffffff26;
    border-radius: 30px;
    align-items: center;
    padding: 0 9px;
    display: inline-flex
}

.lot-stage {
    aspect-ratio: 16/10;
    cursor: pointer;
    place-items: center;
    width: 100%;
    padding: 44px 16px 8px;
    display: grid;
    position: relative;
    overflow: hidden
}

.lots-skins .lot-stage {
    aspect-ratio: 4/5
}

.lots-acc .lot-stage {
    aspect-ratio: 1
}

.lot-stage:before {
    content: "";
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in oklab, var(--c) 42%, transparent), transparent 64%);
    opacity: .8;
    width: 80%;
    transition: opacity .4s, transform .6s var(--ease);
    border-radius: 50%;
    position: absolute;
    top: 52%;
    left: 50%;
    translate: -50% -50%
}

.lot:hover .lot-stage:before {
    opacity: 1;
    transform: scale(1.15)
}

.lot-floor {
    filter: blur(2px);
    background: radial-gradient(#000b, #0000 70%);
    border-radius: 50%;
    height: 14%;
    position: absolute;
    bottom: 6%;
    left: 12%;
    right: 12%
}

.lot-img {
    z-index: 1;
    place-items: center;
    display: grid;
    position: absolute;
    inset: 46px 16px 12px
}

.lot-img img {
    object-fit: contain;
    filter: drop-shadow(0 14px 16px #000b);
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    transition: transform .7s var(--ease), filter .5s
}

.lot:hover .lot-img img {
    filter: drop-shadow(0 22px 22px #000c) drop-shadow(0 0 22px color-mix(in oklab, var(--c) 45%, transparent));
    transform: translateY(-8px)scale(1.06)
}

.lot-shine {
    z-index: 2;
    pointer-events: none;
    transition: background-position 1s var(--ease);
    background: linear-gradient(110deg, #0000 35%, #ffffff26 50%, #0000 65%) 150% 0/250% 100%;
    position: absolute;
    inset: 0
}

.lot:hover .lot-shine {
    background-position: -50% 0
}

.lot-zoom {
    z-index: 3;
    color: #e7edf6;
    opacity: 0;
    transition: .3s var(--ease);
    background: #070b12cc;
    border: 1px solid #ffffff26;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    position: absolute;
    bottom: 10px;
    right: 12px;
    transform: translateY(6px)
}

.lot:hover .lot-zoom {
    opacity: 1;
    transform: none
}

.lot-body {
    flex-direction: column;
    flex: 1;
    padding: 6px 16px 16px;
    display: flex
}

.lot-type {
    font: 800 10px var(--display);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--c) 80%, #fff)
}

.lot-name {
    font: 900 17px/1.15 var(--display);
    letter-spacing: -.01em;
    min-height: 2.3em;
    margin: 6px 0 12px
}

.lots-cars .lot-name {
    min-height: 0;
    font-size: 20px
}

.lot-stock {
    color: #aeb9c9;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex
}

.is-rare .lot-stock>span:last-child {
    color: var(--gold-l)
}

.lot-buy {
    border-top: 1px solid #ffffff12;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    display: flex
}

.lot-stock {
    margin-bottom: 14px
}

.lot-price b {
    font: 900 22px/1 var(--display);
    white-space: nowrap;
    align-items: baseline;
    gap: 5px;
    display: flex
}

.lot-price b small {
    color: var(--c);
    font-size: .7em
}

.lot-price span {
    color: var(--muted);
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    display: block
}

.lot-btn {
    height: 44px;
    font: 800 11px var(--display);
    letter-spacing: .8px;
    color: #fff;
    background: linear-gradient(110deg, var(--red-d), var(--red) 55%, var(--red-h));
    transition: transform .25s var(--ease), box-shadow .25s;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 22px #e5322555, inset 0 1px #ffffff40
}

.lot-btn:before {
    content: "";
    background: linear-gradient(100deg, #0000 30%, #fff6 50%, #0000 70%);
    animation: 3.6s ease-in-out infinite btnShine;
    position: absolute;
    inset: 0;
    translate: -120%
}

@keyframes btnShine {

    0%,
    60% {
        translate: -120%
    }

    to {
        translate: 120%
    }
}

.lot-btn i {
    transition: transform .3s var(--ease);
    font-size: 14px;
    font-style: normal
}

.lot-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px #e5322588
}

.lot-btn:hover i {
    transform: translate(2px, -2px)
}

.lot-btn:disabled {
    box-shadow: none;
    cursor: not-allowed;
    background: #ffffff14
}

.lot-btn:disabled:before {
    display: none
}

.is-sold .lot-stage {
    filter: grayscale()brightness(.6)
}

.is-sold .lot-stage:after {
    content: "РАСПРОДАНО";
    z-index: 4;
    border: 3px solid var(--red);
    color: var(--red-h);
    font: 900 18px var(--display);
    letter-spacing: 1px;
    background: #070b12b3;
    border-radius: 8px;
    padding: 6px 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: -12deg
}

.how-buy {
    padding: 60px 0 110px
}

.buy-steps {
    counter-reset: s;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    display: grid
}

.buy-step {
    border: 1px solid var(--line);
    background: linear-gradient(160deg, #13233acc, #0c1320cc);
    border-radius: 18px;
    flex-direction: column;
    gap: 8px;
    padding: 26px;
    display: flex;
    position: relative;
    overflow: hidden
}

.bs-n {
    font: 900 46px/1 var(--display);
    color: #0000;
    -webkit-text-stroke: 1px #ffffff40;
    margin-bottom: 6px
}

.buy-step:first-child .bs-n {
    -webkit-text-stroke-color: var(--red)
}

.buy-step:nth-child(3) .bs-n {
    -webkit-text-stroke-color: var(--gold)
}

.buy-step b {
    font: 800 19px var(--display)
}

.buy-step>span:last-child {
    color: var(--muted);
    font-size: 15px
}

.x2-note {
    color: #c4cddb;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    font-weight: 700;
    display: flex
}

.x2-note b {
    width: 40px;
    height: 40px;
    font: 900 14px var(--display);
    color: var(--muted);
    background: #ffffff0d;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    place-items: center;
    display: grid;
    position: relative
}

.x2-note b:after {
    content: "";
    background: var(--red-h);
    height: 2px;
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    rotate: -35deg
}

.lot-dialog {
    --c: #e53225;
    background: linear-gradient(160deg, #122036, #0a121e);
    border: 1px solid #fff2;
    border-radius: 26px;
    width: min(1080px, 100vw - 24px);
    max-width: none;
    max-height: calc(100svh - 24px);
    padding: 0;
    overflow: auto;
    box-shadow: 0 50px 140px #000d
}

.lot-dialog[open] {
    animation: dIn .55s var(--ease)
}

@keyframes dIn {
    0% {
        opacity: 0;
        transform: translateY(30px)scale(.96)
    }
}

.lot-dialog::backdrop {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #03060bd9
}

.d-x {
    z-index: 5;
    width: 42px;
    height: 42px;
    transition: background .2s, transform .3s var(--ease);
    background: #ffffff12;
    border: 1px solid #ffffff1c;
    border-radius: 12px;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    top: 14px;
    right: 14px
}

.d-x:hover {
    background: var(--red);
    transform: rotate(90deg)
}

.d-grid {
    grid-template-columns: 1.05fr 1fr;
    min-height: 560px;
    display: grid
}

.d-visual {
    isolation: isolate;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in oklab, var(--c) 34%, transparent), transparent 70%), linear-gradient(180deg, #0e1a2c, #070d16);
    place-items: center;
    padding: 60px 30px 50px;
    display: grid;
    position: relative;
    overflow: hidden
}

.d-visual:after {
    content: "";
    z-index: -1;
    opacity: .5;
    background-image: linear-gradient(#ffffff0a 1px, #0000 1px), linear-gradient(90deg, #ffffff0a 1px, #0000 1px);
    background-size: 40px 40px;
    position: absolute;
    inset: 0;
    -webkit-mask: radial-gradient(circle, #000 20%, #0000 70%);
    mask: radial-gradient(circle, #000 20%, #0000 70%)
}

.d-rays {
    aspect-ratio: 1;
    z-index: -1;
    background: repeating-conic-gradient(from var(--spin), color-mix(in oklab, var(--c) 28%, transparent) 0 8deg, transparent 8deg 22deg);
    border-radius: 50%;
    width: 760px;
    animation: 30s linear infinite spinR;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    -webkit-mask: radial-gradient(circle, #000 6%, #0000 58%);
    mask: radial-gradient(circle, #000 6%, #0000 58%)
}

.d-visual .lot-badge {
    position: absolute;
    top: 18px;
    left: 18px
}

.d-ex {
    height: 26px;
    font: 800 10px var(--display);
    letter-spacing: .8px;
    text-transform: uppercase;
    background: #070b12b3;
    border: 1px solid #ffffff26;
    border-radius: 30px;
    align-items: center;
    padding: 0 10px;
    display: inline-flex;
    position: absolute;
    top: 18px;
    right: 68px
}

.d-pic {
    z-index: 1;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative
}

.d-pic picture,
.d-pic img {
    object-fit: contain;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
    display: block
}

.d-pic img {
    filter: drop-shadow(0 26px 30px #000c) drop-shadow(0 0 40px color-mix(in oklab, var(--c) 35%, transparent));
    animation: .9s cubic-bezier(.2, 1.3, .4, 1) both dImg, 5s ease-in-out 1s infinite scFloat
}

@keyframes dImg {
    0% {
        opacity: 0;
        transform: scale(.7)translateY(30px)
    }
}

.d-floor {
    background: radial-gradient(#000c, #0000 70%);
    border-radius: 50%;
    height: 40px;
    position: absolute;
    bottom: 44px;
    left: 18%;
    right: 18%
}

.d-info {
    flex-direction: column;
    padding: 44px 40px 34px;
    display: flex;
    position: relative
}

.d-info h2 {
    font: 900 clamp(26px, 3vw, 38px)/1.05 var(--display);
    letter-spacing: -.02em;
    margin: 8px 0 12px;
    padding-right: 40px
}

.d-desc {
    color: #c4cddb;
    font-size: 15px
}

.d-tags {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    display: flex
}

.d-tags span {
    background: color-mix(in oklab, var(--c) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
    color: #e7edf6;
    border-radius: 30px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700
}

.d-stock {
    background: #ffffff08;
    border: 1px solid #ffffff12;
    border-radius: 12px;
    margin: 16px 0 0;
    padding: 12px 14px
}

.lot-dialog.is-rare .d-stock>span:last-child {
    color: var(--gold-l)
}

.d-form {
    border-top: 1px solid #ffffff14;
    margin-top: 20px;
    padding-top: 20px
}

.field input {
    color: #fff;
    width: 100%;
    height: 52px;
    font: 600 16px var(--body);
    background: #05080d99;
    border: 1px solid #fff2;
    border-radius: 13px;
    padding: 0 16px;
    transition: border-color .2s, box-shadow .2s
}

.field input:hover {
    border-color: #ffffff40
}

.field input:focus {
    border-color: var(--blue-l);
    outline: 0;
    box-shadow: 0 0 0 4px #2d63b040
}

.field.invalid input {
    border-color: var(--red);
    box-shadow: 0 0 0 4px #e5322530
}

@keyframes shakeF {
    25% {
        transform: translate(-6px)
    }

    75% {
        transform: translate(6px)
    }
}

.d-total {
    background: linear-gradient(110deg, #e532251f, color-mix(in oklab, var(--c) 14%, transparent));
    color: #cdd6e3;
    border: 1px dashed #ffffff2a;
    border-radius: 14px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 14px 18px;
    font-weight: 700;
    display: flex
}

.d-total strong {
    font: 900 28px var(--display);
    color: #fff;
    white-space: nowrap
}

.d-pay {
    width: 100%;
    height: 60px;
    margin-top: 14px;
    font-size: 14px
}

.d-pay:disabled {
    opacity: .5;
    cursor: not-allowed
}

.d-notes {
    gap: 8px;
    margin-top: 14px;
    display: grid
}

.d-notes p {
    border-radius: 12px;
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700
}

.d-reward {
    color: #c8f5d6;
    background: #22c55e14;
    border: 1px solid #22c55e44
}

.d-x2 {
    color: var(--muted);
    background: #ffffff08;
    border: 1px solid #ffffff14
}

.d-done {
    border-top: 1px solid #ffffff14;
    outline: 0;
    margin-top: 20px;
    padding-top: 20px;
    display: none
}

.d-done h3 {
    font: 900 22px var(--display);
    margin: 14px 0 8px
}

.d-done p {
    color: #c4cddb;
    margin: 6px 0
}

.d-done p.d-reward {
    border-radius: 12px;
    margin-top: 14px;
    padding: 10px 14px
}

.d-done .btn {
    gap: 16px;
    height: 50px;
    margin-top: 16px
}

.d-done .modal-icon {
    background: linear-gradient(140deg, var(--red), var(--red-d));
    width: 56px;
    height: 56px;
    font: 900 22px var(--display);
    border-radius: 16px;
    place-items: center;
    display: grid;
    box-shadow: 0 10px 30px #e5322555
}

.lot-dialog.is-done .d-form {
    display: none
}

.lot-dialog.is-done .d-done {
    animation: rise .5s var(--ease);
    display: block
}

@media (width<=1180px) {

    .lots-skins,
    .lots-acc {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (width<=1000px) {
    .shop-hero {
        min-height: 0;
        padding: 120px 0 90px
    }

    .shop-hero-in {
        grid-template-columns: 1fr
    }

    .showcase {
        order: -1;
        min-height: 0;
        margin-bottom: 10px
    }

    .sc-stage {
        height: 300px
    }

    .sc-rays {
        width: 480px
    }

    .lots-cars {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lots-cars .lot,
    .lots-cars .lot.is-rare {
        grid-column: auto
    }

    .lots-cars .is-rare .lot-stage {
        aspect-ratio: 16/10
    }

    .lots-cars .is-rare .lot-name {
        font-size: 20px
    }

    .lots-skins,
    .lots-acc {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .perks-in {
        grid-template-columns: 1fr
    }

    .d-grid {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .d-visual {
        height: 340px;
        padding: 56px 20px 30px
    }

    .d-pic picture,
    .d-pic img {
        max-height: 250px
    }

    .d-floor {
        bottom: 22px
    }

    .d-info {
        padding: 26px
    }

    .d-info h2 {
        padding-right: 0
    }
}

@media (width<=760px) {
    .shop-title {
        font-size: clamp(34px, 11.6vw, 64px)
    }

    .shop-title .t2 {
        letter-spacing: .16em;
        font-size: 10px
    }

    .shop-stats {
        flex-wrap: wrap
    }

    .shop-stats div {
        flex: 90px
    }

    .hero-actions .from {
        display: none
    }

    .sc-stage {
        height: 240px
    }

    .sc-pic picture,
    .sc-pic img {
        max-height: 200px
    }

    .sc-platform {
        height: 64px;
        bottom: 26px
    }

    .sc-ring {
        height: 76px;
        bottom: 20px
    }

    .sc-word {
        font-size: 64px;
        top: 4%
    }

    .sc-name {
        font-size: 18px
    }

    .sc-price {
        font-size: 20px
    }

    .shop-tapes {
        margin-top: -60px
    }

    .perks {
        padding-top: 70px
    }

    .shop-bar {
        flex-direction: column;
        align-items: stretch;
        position: relative;
        top: 0
    }

    .shop-bar>* {
        min-width: 0;
        max-width: 100%
    }

    .shop-sort {
        justify-content: center;
        height: 44px
    }

    .shop-tabs button {
        height: 40px;
        padding: 0 12px;
        font-size: 13px
    }

    .group-head {
        grid-template-columns: auto 1fr
    }

    .group-head p {
        text-align: left;
        grid-column: 1/-1;
        max-width: none
    }

    .lots {
        gap: 12px
    }

    .lots-cars {
        grid-template-columns: minmax(0, 1fr)
    }

    .lots-skins,
    .lots-acc {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lots-skins .lot-img,
    .lots-acc .lot-img {
        inset: 38px 8px 8px
    }

    .lots-skins .lot-body,
    .lots-acc .lot-body {
        padding: 4px 12px 12px
    }

    .lots-skins .lot-name,
    .lots-acc .lot-name {
        font-size: 14px
    }

    .lots-skins .lot-top,
    .lots-acc .lot-top {
        top: 8px;
        left: 8px;
        right: 8px
    }

    .lots-skins .lot-ex,
    .lots-acc .lot-ex {
        display: none
    }

    .lots-skins .lot-badge,
    .lots-acc .lot-badge {
        height: 22px;
        padding: 0 8px;
        font-size: 8px
    }

    .lots-skins .lot-buy,
    .lots-acc .lot-buy {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .lots-skins .lot-btn,
    .lots-acc .lot-btn {
        justify-content: center;
        height: 40px
    }

    .lots-skins .lot-price b,
    .lots-acc .lot-price b {
        font-size: 19px
    }

    .lots-skins .lot-stock,
    .lots-acc .lot-stock {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px
    }

    .pips i {
        width: 10px
    }

    .buy-steps {
        grid-template-columns: 1fr
    }

    .x2-note {
        text-align: left;
        justify-content: flex-start
    }

    .lot-dialog {
        border-radius: 20px;
        width: calc(100vw - 16px);
        max-height: calc(100svh - 16px)
    }

    .d-visual {
        height: 290px
    }

    .d-pic picture,
    .d-pic img {
        max-height: 200px
    }

    .d-ex {
        right: 62px
    }

    .d-info {
        padding: 22px 18px
    }

    .d-total strong {
        font-size: 22px
    }
}

@media (width<=380px) {

    .lots-skins,
    .lots-acc {
        gap: 8px
    }

    .lots-skins .lot-name,
    .lots-acc .lot-name {
        font-size: 13px
    }

    .lots-skins .lot-badge b,
    .lots-acc .lot-badge b {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .lot {
        opacity: 1;
        transform: none
    }

    .sc-rays,
    .d-rays,
    .is-rare .lot-in:after,
    .lot-btn:before,
    .lot-badge.gold {
        animation: none
    }
}

.shop-group {
    scroll-margin-top: 170px
}

.lot-btn {
    white-space: nowrap;
    flex: none
}

.lot-price {
    min-width: 0
}

.lots-skins .lot-buy,
.lots-acc .lot-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 10px
}

.lots-skins .lot-btn,
.lots-acc .lot-btn {
    justify-content: center;
    width: 100%
}

.lots-skins .lot-price b,
.lots-acc .lot-price b {
    font-size: 20px
}

.lot-stock {
    flex-wrap: wrap;
    row-gap: 6px
}

.lot-stock>span:last-child {
    white-space: nowrap
}

.d-handle {
    display: none
}

@media (width<=760px) {
    .shop-hero {
        padding: 86px 0 70px
    }

    .shop-group {
        scroll-margin-top: 140px
    }

    .perks {
        padding-top: 56px
    }

    .perks-in {
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 10px;
        width: auto;
        margin-inline: 0;
        padding: 2px clamp(18px, 5vw, 64px) 8px;
        scroll-padding-inline: clamp(18px, 5vw, 64px);
        display: flex;
        overflow-x: auto
    }

    .perks-in::-webkit-scrollbar {
        display: none
    }

    .perk {
        scroll-snap-align: start;
        flex: 0 0 82%;
        grid-template-columns: 46px 1fr;
        column-gap: 14px;
        padding: 16px
    }

    .perk-ic {
        border-radius: 13px;
        width: 46px;
        height: 46px
    }

    .perk-ic svg {
        width: 22px;
        height: 22px
    }

    .perk b {
        font-size: 15px
    }

    .perk span:last-child {
        font-size: 13px;
        line-height: 1.45
    }

    .shop-bar {
        transition: top .35s var(--ease);
        border-radius: 18px;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin: 0 -6px 18px;
        padding: 6px;
        position: sticky;
        top: 76px
    }

    body:has(.header.hide) .shop-bar {
        top: 10px
    }

    .shop-tabs {
        border-radius: 12px;
        flex: 1;
        padding: 3px
    }

    .shop-tabs button {
        gap: 6px;
        height: 40px;
        padding: 0 12px;
        font-size: 13px
    }

    .shop-tabs button em {
        padding: 2px 6px;
        font-size: 9px
    }

    .shop-sort {
        border-radius: 12px;
        flex: none;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: 18px
    }

    .shop-sort span {
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }

    .shop-sort.on {
        background: linear-gradient(110deg, var(--red-d), var(--red));
        color: #fff;
        border-color: #0000
    }

    .shop-sort[data-dir=asc] i:after {
        content: "₽↑"
    }

    .shop-sort[data-dir=desc] i:after {
        content: "₽↓"
    }

    .shop-sort.on i {
        font-size: 0
    }

    .shop-sort.on i:after {
        font: 900 12px var(--display)
    }

    .group-head {
        margin-bottom: 16px
    }

    .group-head h2 {
        font-size: clamp(28px, 9vw, 40px)
    }

    .group-head p {
        font-size: 14px
    }

    .shop-group+.shop-group {
        margin-top: 44px
    }

    .lots-cars .lot-stage,
    .lots-cars .is-rare .lot-stage {
        aspect-ratio: 16/9;
        padding: 38px 12px 4px
    }

    .lots-cars .lot-img {
        inset: 38px 12px 4px
    }

    .lots-cars .lot-body {
        padding: 2px 16px 14px
    }

    .lots-cars .lot-name,
    .lots-cars .is-rare .lot-name {
        margin: 4px 0 10px;
        font-size: 19px
    }

    .lots-cars .lot-stock {
        margin-bottom: 12px
    }

    .lots-cars .lot-buy {
        padding-top: 12px
    }

    .lots-cars .lot-price b {
        font-size: 24px
    }

    .lots-cars .lot-btn {
        height: 46px;
        padding: 0 20px
    }

    .lots-skins .lot-name,
    .lots-acc .lot-name {
        min-height: 2.3em;
        margin: 4px 0 8px
    }

    .lots-skins .lot-stock,
    .lots-acc .lot-stock {
        margin-bottom: 10px
    }

    .lots-skins .lot-buy,
    .lots-acc .lot-buy {
        gap: 8px;
        padding-top: 10px
    }

    .lots-acc .lot:last-child:nth-child(odd) {
        grid-column: 1/-1
    }

    .lots-acc .lot:last-child:nth-child(odd) .lot-in {
        flex-direction: row
    }

    .lots-acc .lot:last-child:nth-child(odd) .lot-stage {
        aspect-ratio: auto;
        flex: 0 0 46%;
        width: 46%;
        min-height: 220px
    }

    .lots-acc .lot:last-child:nth-child(odd) .lot-body {
        padding: 40px 14px 14px 4px
    }

    .lots-acc .lot:last-child:nth-child(odd) .lot-name {
        min-height: 0;
        font-size: 16px
    }

    .buy-steps {
        gap: 10px
    }

    .buy-step {
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        padding: 16px;
        display: grid
    }

    .buy-step .bs-n {
        grid-row: 1/3;
        margin: 0;
        font-size: 34px
    }

    .buy-step b {
        align-self: end;
        font-size: 16px
    }

    .buy-step>span:last-child {
        align-self: start;
        font-size: 14px
    }

    .lot-dialog {
        overscroll-behavior: contain;
        border-bottom: 0;
        border-radius: 26px 26px 0 0;
        width: 100%;
        max-width: 100%;
        max-height: 94svh;
        margin: auto 0 0
    }

    .lot-dialog[open] {
        animation: sheetUp .45s var(--ease)
    }

    .d-handle {
        z-index: 6;
        background: #ffffff4d;
        border-radius: 5px;
        width: 44px;
        height: 5px;
        margin-left: -22px;
        display: block;
        position: absolute;
        top: 8px;
        left: 50%
    }

    .d-x {
        width: 40px;
        height: 40px;
        top: 16px;
        right: 12px
    }

    .d-visual {
        height: 240px;
        padding: 44px 16px 18px
    }

    .d-pic picture,
    .d-pic img {
        max-height: 180px
    }

    .d-floor {
        bottom: 14px
    }

    .d-info {
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom))
    }

    .d-info h2 {
        margin: 6px 0 8px;
        font-size: 26px
    }

    .d-desc {
        font-size: 14.5px
    }

    .d-form {
        margin-top: 16px;
        padding-top: 16px
    }

    .d-total {
        padding: 12px 14px
    }

    .d-pay {
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 4;
        height: 56px;
        position: sticky;
        box-shadow: 0 -10px 30px #070b12, 0 14px 30px #e5322566
    }
}

@keyframes sheetUp {
    0% {
        transform: translateY(100%)
    }
}

@media (width<=380px) {
    .shop-tabs button {
        padding: 0 10px;
        font-size: 12.5px
    }

    .lots-cars .lot-name {
        font-size: 17px
    }
}

@media (hover:none) {
    .lot:hover .lot-img img {
        filter: drop-shadow(0 14px 16px #000b);
        transform: none
    }

    .lot:hover .lot-shine {
        background-position: 150% 0
    }

    .lot-btn:hover {
        transform: none
    }
}

@media (width<=760px) {
    .shop-tabs {
        -webkit-mask: linear-gradient(90deg, #000 calc(100% - 26px), #0000);
        mask: linear-gradient(90deg, #000 calc(100% - 26px), #0000)
    }

    .lots-skins .lt-cat,
    .lots-acc .lt-cat {
        display: none
    }
}

.lots-skins {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.lots-skins .lot {
    grid-column: span 3
}

.lots-skins .lot.is-legend {
    grid-column: span 4
}

.lots-skins .is-legend .lot-stage {
    aspect-ratio: 1
}

.is-legend .lot-in:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    background: conic-gradient(from var(--spin), var(--lg1), var(--lg2) 25%, var(--lg3) 45%, transparent 60%, transparent 80%, var(--lg1));
    -webkit-mask-composite: xor;
    padding: 2px;
    animation: 5s linear infinite spinR;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

.lot-aura {
    z-index: 0;
    aspect-ratio: 1;
    pointer-events: none;
    background: repeating-conic-gradient(from var(--spin), #a855f726 0 8deg, transparent 8deg 22deg);
    border-radius: 50%;
    width: 115%;
    animation: 16s linear infinite spinR;
    position: absolute;
    top: 54%;
    left: 50%;
    translate: -50% -50%;
    -webkit-mask: radial-gradient(circle, #000 18%, #0000 62%);
    mask: radial-gradient(circle, #000 18%, #0000 62%)
}

.is-legend .lot-stage:before {
    background: radial-gradient(circle, #c084fc59, color-mix(in oklab, var(--c) 30%, transparent) 40%, transparent 66%);
    opacity: 1
}

.lot-badge.legend {
    color: #fff;
    background: linear-gradient(110deg, #6d28d9, var(--lg2) 40%, var(--lg3) 75%, #6d28d9);
    text-shadow: 0 1px 2px #0006;
    background-size: 240% 100%;
    animation: 3.2s linear infinite goldShift;
    box-shadow: 0 4px 18px #a855f780, inset 0 1px #fff5
}

.lot-badge.lb-run {
    color: #ead7ff;
    box-shadow: none;
    background: #0b0f1ad9;
    border: 1px solid #c084fc55
}

.is-legend .lot-type {
    color: #d8b4fe
}

.is-legend .pips i.on,
.lot-dialog.is-legend .pips i.on {
    background: linear-gradient(90deg, var(--lg1), var(--lg3));
    animation: 1.6s ease-in-out infinite pip;
    box-shadow: 0 0 8px #c084fc99
}

.is-legend .pips i.on:nth-child(2) {
    animation-delay: .2s
}

.is-legend .pips i.on:nth-child(3) {
    animation-delay: .4s
}

.lot-dialog.is-legend .lot-type {
    color: #d8b4fe
}

@media (width>=761px) and (width<=1000px) {
    .lots-skins .is-legend .lot-name {
        font-size: 15px
    }
}

@media (width<=760px) {
    .lots-skins {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lots-skins .lot {
        grid-column: auto
    }

    .lots-skins .lot.is-legend {
        grid-column: 1/-1
    }

    .lots-skins .is-legend .lot-in {
        flex-direction: row
    }

    .lots-skins .is-legend .lot-stage {
        aspect-ratio: auto;
        flex: 0 0 44%;
        width: 44%;
        min-height: 250px;
        padding: 40px 6px 6px
    }

    .lots-skins .is-legend .lot-img {
        inset: 40px 6px 6px
    }

    .lots-skins .is-legend .lot-body {
        padding: 46px 14px 14px 4px
    }

    .lots-skins .is-legend .lot-name {
        min-height: 0;
        margin: 6px 0 10px;
        font-size: 19px
    }

    .lots-skins .is-legend .lot-type {
        font-size: 10px
    }

    .lots-skins .is-legend .lot-price b {
        font-size: 24px
    }

    .lots-skins .is-legend .lot-badge {
        height: 24px;
        padding: 0 9px;
        font-size: 9px
    }
}

@media (prefers-reduced-motion:reduce) {

    .is-legend .lot-in:after,
    .lot-aura,
    .lot-badge.legend {
        animation: none
    }
}

.lot-img {
    grid-template-rows: minmax(0, 100%);
    grid-template-columns: minmax(0, 100%)
}

.lot-img img {
    grid-area: 1/1;
    place-self: center
}

.lot-img source {
    display: none
}

.hero-chips {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.chip-sale {
    height: 34px;
    font: 900 12px var(--display);
    letter-spacing: .8px;
    color: #1a0d00;
    background: linear-gradient(110deg, #f59e0b, #fde047 50%, #f59e0b) 0 0/220% 100%;
    border-radius: 30px;
    align-items: center;
    padding: 0 14px;
    animation: 3s linear infinite goldShift;
    display: inline-flex;
    transform: rotate(-3deg);
    box-shadow: 0 6px 22px #f59e0b66, inset 0 1px #ffffffa0
}

.group-sale {
    vertical-align: top;
    font: 900 .34em/1 var(--display);
    letter-spacing: 0;
    color: #1a0d00;
    background: linear-gradient(120deg, #fde047, #f59e0b);
    border-radius: 10px;
    place-items: center;
    margin-left: 12px;
    padding: 6px 10px;
    display: inline-grid;
    transform: rotate(-6deg)translateY(-.2em);
    box-shadow: 0 6px 20px #f59e0b55
}

.lot-sale {
    z-index: 3;
    font: 900 15px/1 var(--display);
    color: #1a0d00;
    background: linear-gradient(120deg, #fde047, #f59e0b);
    border-radius: 10px;
    padding: 6px 10px;
    position: absolute;
    bottom: 12px;
    left: 12px;
    transform: rotate(-6deg);
    box-shadow: 0 8px 20px #000a, 0 0 18px #f59e0b55
}

.lot-price span.lot-old {
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
    display: flex
}

.lot-old s {
    font: 800 13px var(--display);
    color: #7f8ba0;
    text-decoration-color: #ff4a35;
    text-decoration-thickness: 2px
}

.lot-old em {
    font: 900 10px var(--display);
    color: #ff8a7a;
    background: #ff4a3526;
    border-radius: 6px;
    padding: 3px 6px;
    font-style: normal
}

.sc-price s {
    font: 800 13px var(--display);
    color: #8c97aa;
    text-shadow: none;
    margin-bottom: 2px;
    text-decoration-color: #ff4a35;
    text-decoration-thickness: 2px;
    display: block
}

.d-total strong {
    align-items: baseline;
    gap: 10px;
    display: flex
}

.d-old {
    font: 800 15px var(--display);
    color: #8c97aa;
    text-decoration-color: #ff4a35;
    text-decoration-thickness: 2px
}

.d-old:empty,
.d-off:empty {
    display: none
}

.d-off {
    font: 900 10px var(--display);
    color: #1a0d00;
    vertical-align: middle;
    background: linear-gradient(120deg, #fde047, #f59e0b);
    border-radius: 7px;
    margin-left: 6px;
    padding: 3px 8px;
    font-style: normal;
    display: inline-block
}

@media (width<=760px) {
    .lot-sale {
        padding: 5px 8px;
        font-size: 12px;
        bottom: 8px;
        left: 8px
    }

    .lots-cars .lot-sale {
        font-size: 15px;
        bottom: 10px;
        left: 12px
    }

    .chip-sale {
        height: 30px;
        font-size: 11px
    }

    .d-old {
        font-size: 13px
    }
}

@media (prefers-reduced-motion:reduce) {
    .chip-sale {
        animation: none
    }
}

.lots-cars .lot.is-legend {
    grid-column: span 3
}

.lots-cars .is-legend .lot-stage {
    aspect-ratio: 16/9
}

.lots-cars .is-legend .lot-name {
    font-size: 26px
}

.lots-cars .is-legend .lot-price b {
    font-size: 28px
}

@media (width<=1000px) {
    .lots-cars .lot.is-legend {
        grid-column: auto
    }
}

@media (width<=760px) {
    .lots-cars .is-legend .lot-name {
        font-size: 21px
    }

    .lots-cars .is-legend .lot-price b {
        font-size: 26px
    }
}

@media (width>=761px) {
    .shop-bar {
        transition: top .4s var(--ease), box-shadow .3s;
        background: #0a101bf2;
        padding: 6px;
        top: 94px
    }

    body:has(.header.hide) .shop-bar {
        top: 14px;
        box-shadow: 0 14px 34px #000a
    }

    .shop-bar .shop-tabs button {
        height: 38px
    }

    .shop-bar .shop-sort {
        height: 44px
    }
}

:root {
    --lg1: #b45309;
    --lg2: #f5b335;
    --lg3: #fde68a
}

.is-legend .lot-in {
    background: radial-gradient(120% 70% at 50% 0, #f5b33529, #0000 62%), linear-gradient(165deg, #1d1810, #0c0f17 70%);
    border-color: #f5b33566;
    box-shadow: 0 22px 50px #000a, 0 0 44px #f5b33524
}

.is-legend .lot-in:after {
    background: conic-gradient(from var(--spin), #b45309, #f5b335 25%, #fff3c4 40%, transparent 58%, transparent 80%, #b45309)
}

.lot:hover.is-legend .lot-in,
.is-legend:hover .lot-in {
    border-color: #f5b335aa;
    box-shadow: 0 30px 70px #000b, 0 0 60px #f5b33540
}

.lot-aura {
    background: repeating-conic-gradient(from var(--spin), #f5b33526 0 8deg, transparent 8deg 22deg)
}

.is-legend .lot-stage:before {
    background: radial-gradient(circle, #f5b3354d, color-mix(in oklab, var(--c) 22%, transparent) 40%, transparent 66%)
}

.lot-badge.legend {
    color: #2a1500;
    text-shadow: none;
    background: linear-gradient(110deg, #e8890c, #f5b335 40%, #fff1b8 60%, #f5b335 80%, #e8890c) 0 0/240% 100%;
    box-shadow: 0 4px 18px #f5b33580, inset 0 1px #ffffffa0
}

.lot-badge.lb-run {
    color: #fde7b0;
    border-color: #f5b33555
}

.lot-badge.lb-run b {
    color: var(--gold)
}

.is-legend .lot-type,
.lot-dialog.is-legend .lot-type {
    color: #f6c768
}

.is-legend .lot-name {
    background: linear-gradient(95deg, #fff 45%, #fde68a 80%, #f5b335);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.is-legend .pips i.on,
.lot-dialog.is-legend .pips i.on {
    background: var(--gold);
    box-shadow: 0 0 8px #f5b33599
}

.is-legend .lot-stock>span:last-child,
.lot-dialog.is-legend .d-stock>span:last-child {
    color: var(--gold-l)
}

.is-legend .lot-price b small {
    color: var(--gold)
}

.is-legend .lot-btn {
    background: linear-gradient(110deg, var(--red-d), var(--red) 60%, var(--red-h));
    box-shadow: 0 10px 26px #e5322566
}

.is-legend .lot-btn:hover {
    box-shadow: 0 14px 34px #e5322588
}

.lot-dialog.is-legend {
    box-shadow: 0 0 0 1px #f5b33566, 0 40px 100px #000, 0 0 80px #f5b33530
}

.lot-dialog.is-legend .d-visual {
    background: radial-gradient(70% 60% at 50% 55%, #f5b33533, #0000 70%), linear-gradient(160deg, #1d1810, #0a0d14)
}

.donate {
    isolation: isolate;
    place-items: center;
    min-height: 100svh;
    padding: 130px clamp(18px, 5vw, 64px) 70px;
    display: grid;
    position: relative;
    overflow: hidden
}

.donate-bg {
    z-index: -1;
    position: absolute;
    inset: 0
}

.donate-bg img {
    object-fit: cover;
    filter: blur(14px)brightness(.4)saturate(1.2);
    width: 100%;
    height: 100%;
    transform: scale(1.15)
}

.donate-bg:after {
    content: "";
    background: radial-gradient(ellipse 50% 60% at 20% 60%, #2d63b040, transparent 70%), radial-gradient(ellipse 40% 50% at 85% 30%, #e5322530, transparent 70%), linear-gradient(0deg, var(--bg), #070b1299 40%, #070b12cc);
    position: absolute;
    inset: 0
}

.donate-bg:before {
    content: "";
    z-index: 1;
    opacity: .6;
    background-image: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px);
    background-size: 56px 56px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(70% 70%, #000, #0000);
    mask-image: radial-gradient(70% 70%, #000, #0000)
}

.donate-grid {
    grid-template-columns: 1fr minmax(0, 480px);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    width: min(1140px, 100%);
    display: grid
}

.donate-intro {
    animation: rise .9s var(--ease) both;
    position: relative
}

.donate-intro .eyebrow {
    margin-bottom: 16px;
    display: block
}

.donate-intro h1 {
    font: 900 clamp(34px, 4.4vw, 60px)/.98 var(--display);
    letter-spacing: -.03em
}

.donate-intro h1 span {
    color: var(--red);
    text-shadow: 0 1px #c92a1f, 0 2px #b2241a, 0 3px #9c1f17, 0 4px #861a13, 0 10px 30px #e532254d;
    display: block
}

.donate-intro>p {
    color: #c4cddb;
    max-width: 340px;
    margin-top: 18px;
    font-size: 17px
}

.back-home {
    color: var(--muted);
    transition: color .2s, transform .3s var(--ease);
    margin-top: 10px;
    font-weight: 700;
    display: inline-flex
}

.back-home:hover {
    color: #fff;
    transform: translate(-4px)
}

.coin-stage {
    perspective: 900px;
    width: 240px;
    height: 240px;
    margin: 34px 0 26px;
    position: relative
}

.coin {
    transform-style: preserve-3d;
    animation: 7s linear infinite coinSpin;
    position: absolute;
    inset: 20px
}

.coin-stage:hover .coin {
    animation-duration: 1.6s
}

.coin-face {
    backface-visibility: hidden;
    background: radial-gradient(circle at 35% 30%, #ff8f80, var(--red) 38%, #8d1a12 80%);
    border-radius: 50%;
    place-content: center;
    justify-items: center;
    display: grid;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 8px #fff2, inset 0 0 0 14px #00000030, inset 0 -10px 30px #0006
}

.coin-face.front {
    transform: translateZ(9px)
}

.coin-face.back {
    background: radial-gradient(circle at 35% 30%, #7fa6e0, var(--blue) 40%, #122a4d 80%);
    transform: rotateY(180deg)translateZ(9px)
}

.coin-face span {
    font: 900 64px/1 var(--display);
    color: #fff;
    text-shadow: 0 3px #8d1a12, 0 6px 14px #0007
}

.coin-face small {
    font: 800 8px var(--display);
    letter-spacing: 2px;
    color: #ffe2dc;
    margin-top: 6px
}

.coin-face img {
    filter: drop-shadow(0 6px 10px #0008);
    width: 110px
}

.coin-edge {
    transform-style: preserve-3d;
    position: absolute;
    inset: 0
}

.coin {
    --R: 100px;
    --T: 18px
}

.coin-edge i {
    width: 19px;
    height: var(--T);
    margin: calc(var(--T)/-2) 0 0 -9.5px;
    transform: rotateZ(var(--r)) translateY(calc(var(--R)*-1)) rotateX(90deg);
    background: linear-gradient(90deg, #5e100a, #b52a1e 50%, #5e100a);
    position: absolute;
    top: 50%;
    left: 50%
}

.coin-shadow {
    background: radial-gradient(#000b, #0000 70%);
    border-radius: 50%;
    width: 150px;
    height: 22px;
    margin-left: -75px;
    animation: 3.5s ease-in-out infinite shadow;
    position: absolute;
    bottom: -6px;
    left: 50%
}

.coin-stage .coin {
    animation: 7s linear infinite coinSpin, 3.5s ease-in-out infinite coinFloat
}

@keyframes coinSpin {
    to {
        rotate: y 360deg
    }
}

@keyframes coinFloat {
    50% {
        translate: 0 -14px
    }
}

@keyframes shadow {
    50% {
        opacity: .6;
        transform: scale(.8)
    }
}

.spark {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 12px #fff, 0 0 24px var(--red-h);
    background: #fff;
    border-radius: 50%;
    animation: 2.8s ease-in-out infinite spark;
    position: absolute
}

.s1 {
    top: 20%;
    left: 6%
}

.s2 {
    animation-delay: .9s;
    top: 44%;
    right: 4%
}

.s3 {
    animation-delay: 1.7s;
    bottom: 8%;
    left: 22%
}

@keyframes spark {

    0%,
    to {
        opacity: 0;
        transform: scale(.4)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

.donate-card {
    -webkit-backdrop-filter: blur(16px);
    animation: rise .9s .15s var(--ease) both;
    background: linear-gradient(160deg, #16263ef0, #0b1422f2);
    border: 1px solid #ffffff1f;
    border-radius: 22px;
    padding: 28px 28px 22px;
    position: relative;
    box-shadow: 0 40px 100px #000b, inset 0 1px #ffffff1a
}

.donate-card:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--red) 85%, transparent 100%);
    -webkit-mask-composite: xor;
    padding: 1px;
    animation: 5s linear infinite border;
    position: absolute;
    inset: -1px;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

@keyframes border {
    to {
        --a: 360deg
    }
}

.card-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    display: flex
}

.card-head h2 {
    font: 900 28px/1 var(--display)
}

.rate {
    font: 800 11px var(--display);
    letter-spacing: 1px;
    color: #cdd6e3;
    background: #ffffff10;
    border: 1px solid #ffffff1f;
    border-radius: 9px;
    padding: 7px 11px
}

.field {
    margin-bottom: 13px
}

.form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    display: grid
}

.field label {
    color: #cdd6e3;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    display: block
}

.field input,
.field select {
    color: #fff;
    width: 100%;
    height: 48px;
    font: 600 14px var(--body);
    appearance: textfield;
    background: #05080d99;
    border: 1px solid #fff2;
    border-radius: 11px;
    padding: 0 14px;
    transition: border-color .2s, box-shadow .2s, background .2s
}

.field select {
    appearance: none;
    background-image: linear-gradient(45deg, #0000 50%, #9eabc0 50%), linear-gradient(135deg, #9eabc0 50%, #0000 50%);
    background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 38px
}

.field select option {
    color: #fff;
    background: #101b2a
}

.field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.field input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.field input::placeholder {
    color: #6f7d92
}

.field input:hover,
.field select:hover {
    border-color: #ffffff40
}

.field input:focus,
.field select:focus {
    border-color: var(--blue-l);
    background: #05080dcc;
    outline: 0;
    box-shadow: 0 0 0 4px #2d63b040
}

.err {
    color: var(--red-h);
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    display: none
}

.field.invalid input,
.field.invalid select {
    border-color: var(--red);
    box-shadow: 0 0 0 4px #e5322530
}

.field.invalid .err {
    display: block
}

.field.invalid {
    animation: .4s shake
}

@keyframes shake {
    25% {
        transform: translate(-6px)
    }

    75% {
        transform: translate(6px)
    }
}

.balance-target-field {
    border: 0;
    min-width: 0;
    margin: 0 0 13px;
    padding: 0
}

.balance-target-field legend {
    color: #cdd6e3;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800
}

.balance-targets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    display: grid
}

.balance-target {
    cursor: pointer;
    background: #070d17a8;
    border: 1px solid #ffffff20;
    border-radius: 10px;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 8px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    display: flex;
    position: relative
}

.balance-target:hover {
    border-color: #ffffff45
}

.balance-target:has(input:checked) {
    background: linear-gradient(120deg, #2d63b032, #ffffff08);
    border-color: #5d8fd8;
    box-shadow: 0 0 0 2px #2d63b022
}

.balance-target input {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    inset: 0
}

.choice-mark {
    pointer-events: none;
    border: 1px solid #8190a5;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    display: grid;
    position: relative
}

.choice-mark:after {
    content: "";
    background: 0 0;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    transition: background .2s
}

.balance-target input:checked+.choice-mark {
    border-color: #6aa3eb
}

.balance-target input:checked+.choice-mark:after {
    background: #75aef4
}

.balance-target input:focus-visible+.choice-mark {
    outline: 3px solid var(--red-h);
    outline-offset: 3px
}

.choice-copy {
    pointer-events: none;
    gap: 4px;
    display: grid
}

.choice-copy b {
    color: #eef2f7;
    font: 800 9px var(--display);
    line-height: 1.35
}

.choice-copy small {
    color: #8e9db2;
    font-size: 9px
}

.presets {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
    display: grid
}

.presets button {
    height: 36px;
    font: 800 11px var(--display);
    color: #cdd6e3;
    background: #ffffff08;
    border: 1px solid #ffffff1f;
    border-radius: 9px;
    transition: all .2s
}

.presets button:hover {
    color: #fff;
    background: #ffffff14
}

.presets button.selected {
    background: var(--blue);
    border-color: var(--blue-l);
    color: #fff;
    box-shadow: 0 6px 18px #2d63b066
}

.donate-summary {
    color: #cdd6e3;
    background: linear-gradient(110deg, #e532251f, #2d63b01a);
    border: 1px dashed #ffffff2a;
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 17px;
    padding: 14px 16px;
    font-weight: 700;
    display: flex
}

.donate-summary>span {
    gap: 5px;
    font-size: 11px;
    display: grid
}

.donate-summary b {
    color: #fff;
    font: 800 13px var(--display)
}

.donate-summary strong {
    font: 900 25px var(--display);
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 0 20px #e5322580
}

.donate-summary strong.bump {
    animation: bump .35s var(--ease)
}

@keyframes bump {
    40% {
        color: var(--red-h);
        transform: scale(1.12)
    }
}

.pay-button {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    font-size: 14px
}

.payment-note {
    text-align: center;
    color: var(--muted);
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700
}

@media (width<=900px) {
    .donate {
        padding-top: 110px
    }

    .donate-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px
    }

    .donate-intro {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        display: grid
    }

    .donate-intro .eyebrow,
    .donate-intro h1,
    .donate-intro>p {
        grid-column: 1
    }

    .coin-stage {
        grid-area: 1/2/4;
        width: 140px;
        height: 140px;
        margin: 0
    }

    .coin {
        --R: 58px;
        --T: 12px;
        inset: 12px
    }

    .coin-edge i {
        width: 11px;
        margin-left: -5.5px
    }

    .coin-face span {
        font-size: 38px
    }

    .coin-face small {
        font-size: 5px
    }

    .coin-face img {
        width: 64px
    }

    .coin-face.front {
        transform: translateZ(6px)
    }

    .coin-face.back {
        transform: rotateY(180deg)translateZ(6px)
    }

    .coin-shadow {
        width: 90px;
        margin-left: -45px
    }

    .back-home {
        display: none
    }
}

@media (width<=560px) {
    .donate {
        padding: 96px 14px 50px
    }

    .donate-intro {
        min-width: 0
    }

    .donate-intro h1 {
        font-size: clamp(21px, 6.4vw, 40px)
    }

    .donate-intro>p {
        font-size: 15px
    }

    .coin-stage {
        width: 110px;
        height: 110px
    }

    .coin {
        --R: 43px
    }

    .coin-edge i {
        width: 8px;
        margin-left: -4px
    }

    .coin-face span {
        font-size: 30px
    }

    .donate-card {
        border-radius: 18px;
        padding: 22px 16px 18px
    }

    .card-head h2 {
        font-size: 23px
    }

    .balance-targets {
        grid-template-columns: 1fr
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .donate-summary {
        padding: 15px 16px
    }

    .donate-summary strong {
        font-size: 22px
    }
}

@media (width<=360px) {
    .presets {
        grid-template-columns: repeat(2, 1fr)
    }

    .coin-stage {
        width: 90px;
        height: 90px
    }

    .coin {
        --R: 33px
    }
}

@media (prefers-reduced-motion:reduce) {

    .coin,
    .coin-stage .coin {
        animation: none;
        rotate: y -20deg
    }
}

@media (width<=760px) {
    .rate {
        white-space: nowrap;
        flex: none
    }
}

#root {
    display: contents
}

.d-error {
    color: var(--red-h);
    background: #ff4a3514;
    border: 1px solid #ff4a3555;
    border-radius: 14px;
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45
}

.d-pay[disabled] {
    opacity: .6;
    cursor: not-allowed
}

.lots-empty {
    border: 1px dashed var(--line);
    text-align: center;
    color: var(--muted);
    border-radius: 22px;
    margin: 40px 0;
    padding: 48px 16px;
    font-weight: 700
}

#modal .d-reward {
    border-radius: 14px;
    margin-top: 16px;
    padding: 10px 14px
}

body:before {
    mix-blend-mode: normal;
    opacity: .035;
    transform: translateZ(0)
}

.offscreen,
.offscreen *,
.offscreen :before,
.offscreen :after {
    animation-play-state: paused !important
}

.is-scrolling .lot-in,
.is-scrolling .lot-img img,
.is-scrolling .lot-glow,
.is-scrolling .card-inner,
.is-scrolling .soc {
    transition: none !important
}

.chip,
.btn-ghost,
.card-tag,
.shop-stats div {
    -webkit-backdrop-filter: none
}

.chip,
.shop-stats div {
    background: #ffffff12
}

.btn-ghost {
    background: #ffffff14
}

.card-tag {
    background: #070b12e0
}

.header {
    -webkit-backdrop-filter: blur(12px)
}

.is-scrolling .lot,
.is-scrolling .lot *,
.is-scrolling .lot :before,
.is-scrolling .lot :after,
.is-scrolling .showcase *,
.is-scrolling .showcase :before,
.is-scrolling .showcase :after {
    animation-play-state: paused !important
}

.lot-img img {
    transition: transform .7s var(--ease)
}

@media (width<=900px) {
    @view-transition {
        navigation: none
    }
}

.lite *,
.lite :before,
.lite :after {
    -webkit-backdrop-filter: none !important
}

.lite ::backdrop {
    background: #03060bee !important
}

.lite .rain,
.lite .cursor-glow,
.lite .hero-glow,
.lite .hud,
.lite .scroll-cue,
.lite .key-hint {
    display: none !important
}

.lite .header {
    background: #0b1322 !important
}

.lite .header nav {
    background: #0c1626 !important
}

.lite .menu-scrim {
    background: #03060bd9 !important
}

.lite .tabbar {
    background: #0d1727 !important
}

.lite .lot-aura,
.lite .sh-beam,
.lite .sc-rays,
.lite .d-rays,
.lite .card-glare,
.lite .lot-glow,
.lite .coin-edge {
    display: none !important
}

.lite .coin,
.lite .coin-stage .coin,
.lite .spark,
.lite .coin-shadow,
.lite .loader img {
    animation: none !important
}

.lite .lot {
    perspective: none
}

.lite .lot-in {
    transform: none !important;
    box-shadow: 0 12px 26px #0009 !important
}

.lite .lot-img img,
.lite .sc-pic img,
.lite .d-pic img,
.lite .card-inner img {
    filter: none !important
}

.lite .lot:hover .lot-img img {
    transform: none
}

.lite .lot-in:after,
.lite .soon-card:before,
.lite .donate-card:before {
    will-change: transform
}

.lite .is-rare .lot-in:after,
.lite .is-legend .lot-in:after {
    animation-duration: 7s !important
}

.lite .tape-track {
    will-change: transform
}

.lite .showcase.swap .sc-pic picture {
    animation: .6s ease-out both scInLite !important
}

@keyframes scInLite {
    0% {
        opacity: 0;
        transform: translate(40px)scale(.94)
    }
}

.lite .soon-card {
    box-shadow: 0 20px 40px #000a
}

.lite .header nav .nav-soon {
    display: none
}

.lite .soon-page main,
.lite .soon-page .footer {
    filter: none !important;
    display: none !important
}

.lite .soon-page .soon-cover {
    min-height: 100svh;
    position: relative
}

.tabbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
}
/* донат: ссылки на документы и временная отметка Platega */
.legal{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.legal-links a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:30px;background:#ffffff0a;border:1px solid #ffffff1c;font-size:12px;font-weight:700;color:#c9d3e1;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.legal-links a:hover{background:#ffffff14;border-color:#ffffff40;color:#fff;transform:translateY(-1px)}
.legal-links svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.pay-test{position:absolute;right:16px;bottom:8px;font:600 9px var(--body);letter-spacing:.5px;color:#ffffff2e;pointer-events:none;user-select:none}
.donate-card{padding-bottom:28px}