/* A polish layer for the original red-and-black Core SMP theme. */
:root { --header-height: 80px; --line: #26232a; --mute: #aaa6b2; --glow: rgba(224,0,42,.22); }
html { scroll-padding-top: calc(var(--header-height) + 28px); scrollbar-gutter: stable; }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.overlay-open { overflow: hidden; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
button, select, input { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid #ff617d; outline-offset: 4px; }
button:disabled { transform: none; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 18px; background: #fff; color: #171219; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
#embers { z-index: 2; opacity: .72; }
.scroll-progress { position: fixed; z-index: 60; inset: 0 0 auto; height: 2px; pointer-events: none; background: linear-gradient(90deg,#b40028,#ff567a,#e6a0ff); box-shadow: 0 0 12px #ff285d80; transform: scaleX(var(--scroll-progress,0)); transform-origin: left; }
.wrap { max-width: 1180px; padding-inline: 24px; }
header { background: #09070bf0; border-bottom-color: #ffffff0c; box-shadow: 0 8px 30px #0002; }
.bar { height: 80px; gap: 8px; }
.bar .sp { min-width: 14px; }
.brand { flex-shrink: 0; min-width: 0; }
.brand img { height: 50px; max-width: 166px; filter: none; transition: filter .2s; }
.brand:hover img { filter: drop-shadow(0 0 9px #e0002a40); }
.pill { min-height: 42px; justify-content: center; padding: 9px 13px; font-size: .78rem; letter-spacing: .025em; border-radius: 10px; white-space: nowrap; }
.pill:hover, .pill.hot:hover { transform: translateY(-1px); box-shadow: 0 4px 18px #e0002a1f; }
.bar .pill { height: 42px; min-height: 42px; gap: 8px; padding: 9px 12px; border: 1px solid #ffffff12; border-radius: 10px; background: linear-gradient(180deg,#151117,#0d0b10); color: #ded5de; font-weight: 600; font-size: .76rem; letter-spacing: 0; box-shadow: inset 0 1px 0 #ffffff04; }
.bar .pill b { font-weight: 600; }
.bar .pill:hover { transform: none; border-color: #9c405866; background: #21121b; box-shadow: inset 0 1px 0 #ffffff07; color: #fff; }
.bar .pill.hot { border-color: #ff6b8d3b; color: #fff; background: linear-gradient(115deg,#ec1748,#c60736); box-shadow: 0 4px 14px #e0002a20; }
.bar .pill.hot:hover { background: linear-gradient(115deg,#f52d59,#d71441); box-shadow: 0 5px 18px #e0002a30; }
.bar .server-pill { font-variant-numeric: tabular-nums; gap: 11px; }
.server-pill .ic { width: 14px; height: 14px; color: #9e8e9f; }
.bar #online { min-width: 96px; color: #a2d5b5; border-color: transparent; background: transparent; box-shadow: none; cursor: default; font-variant-numeric: tabular-nums; }
.bar #online:hover { transform: none; }
.bar .dot { width: 6px; height: 6px; background: #5ce393; box-shadow: 0 0 7px #5ce39370; }
.bar #dc { border-color: transparent; background: transparent; box-shadow: none; }
.bar #dc:hover { background: #1b1425; border-color: #b79be322; }
#dcN:not(:empty) { padding-left: 9px; margin-left: 1px; border-left: 1px solid #ffffff1a; color: #a797b0; font-size: .7rem; }
.bar #userBtn { min-width: 82px; max-width: 180px; justify-content: flex-start; overflow: hidden; }
.account-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .avatar { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #ffffff16; image-rendering: pixelated; }
.bar .count { width: 22px; min-width: 22px; height: 22px; font-weight: 700; font-size: .68rem; background: #ffffffed; color: #a3062b; }
.ic, .avatar, .count, .dot { flex-shrink: 0; }
.cur-wrap { position: relative; }
.cur-wrap::after { content: ''; position: absolute; right: 14px; top: calc(50% - 4px); width: 6px; height: 6px; border-right: 1.5px solid #ae9dae; border-bottom: 1.5px solid #ae9dae; transform: rotate(45deg); pointer-events: none; }
.bar .cur-select { min-width: 88px; padding-right: 30px; background: #100d13; }
.bar .cur-select:focus-visible { outline: 0; border-color: #ba617b; box-shadow: inset 0 0 0 1px #ba617b66; }
.cur-select option { color: #f4eaf1; background: #141016; }
.hero { isolation: isolate; height: clamp(500px,44vw,610px); border-bottom: 0; background: radial-gradient(ellipse at var(--hero-light-x,72%) var(--hero-light-y,35%),#410e2580,transparent 65%); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(#ff5e7d18 1px,transparent 1px),linear-gradient(90deg,#ff5e7d18 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 75% 30%,#000,transparent 70%); }
.hero-aura { position: absolute; pointer-events: none; width: 640px; height: 640px; top: -180px; right: -60px; background: radial-gradient(ellipse,#d0134530,transparent 65%); animation: aura-drift 16s ease-in-out infinite alternate; }
.hero { --slide-travel: 80px; --slide-roll: -24deg; --slide-turn: -48deg; }
.hero[data-direction="previous"] { --slide-travel: -80px; --slide-roll: 24deg; --slide-turn: 48deg; }
.slide { pointer-events: none; visibility: hidden; transition: opacity .55s ease; }
.slide.on { pointer-events: auto; visibility: visible; }
.slide.leaving { pointer-events: none; visibility: visible; }
.hero:not([data-direction]) .slide.on .cap { animation: hero-caption .65s ease-out; }
.slide:not(.on) img, .effects-paused .slide img, .effects-paused .hero-aura { animation-play-state: paused; }
@keyframes hero-caption { from { opacity: .3; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
.hero-art { position: absolute; right: max(12px,calc(50% - 610px)); top: 8%; width: 54%; max-width: 690px; height: 82%; transform: translate3d(var(--art-x,0px),calc(var(--art-y,0px) + var(--hero-shift,0px)),0); transition: transform .65s ease-out; }
.hero-spin { position: absolute; inset: 0; transform-origin: center; }
.slide[data-side="right"] .hero-art { right: auto; left: max(12px,calc(50% - 610px)); }
.slide[data-side="right"] .cap { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.slide[data-side="right"] .hero-actions { justify-content: flex-end; }
.slide[data-side="right"]::after { background: linear-gradient(0deg,#000,transparent 25%),linear-gradient(270deg,#0009,transparent 55%); }
.hero.is-switching .slide.on .hero-spin { animation: hero-art-in .85s cubic-bezier(.16,.75,.22,1) both; }
.hero.is-switching .slide.leaving .hero-spin { animation: hero-art-out .55s ease-in both; }
.hero.is-switching .slide.on .cap { animation: hero-copy-in .7s cubic-bezier(.16,.75,.22,1) both; }
.hero.is-switching .slide.leaving .cap { animation: hero-copy-out .4s ease-in both; }
@keyframes hero-art-in {
  from { opacity: 0; transform: perspective(900px) translate3d(var(--slide-travel),20px,0) rotateY(var(--slide-turn)) rotateZ(var(--slide-roll)) scale(.78); }
  to { opacity: 1; transform: perspective(900px) translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1); }
}
@keyframes hero-art-out { to { opacity: 0; transform: perspective(900px) translate3d(calc(var(--slide-travel) * -1),-16px,0) rotateY(calc(var(--slide-turn) * -1)) rotateZ(calc(var(--slide-roll) * -1)) scale(.88); } }
@keyframes hero-copy-in { from { opacity: 0; translate: calc(var(--slide-travel) * -1) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-copy-out { to { opacity: 0; translate: var(--slide-travel) 0; } }
.slide img { object-fit: contain; object-position: center; transform: rotate(-3deg); mask-image: none; filter: drop-shadow(0 10px 24px #d0134526); animation: hero-float 7s ease-in-out infinite; }
.hero-orbit { position: absolute; inset: 5% 1%; border: 1px solid #ff617d2e; border-top-color: #ff617d99; border-bottom-color: #ff617d66; border-radius: 50%; transform: rotate(-25deg) scaleY(.75); box-shadow: 0 0 70px #ff17440a,inset 0 0 70px #ff17440a; }
.hero-orbit::before { content: ''; position: absolute; inset: 18px; border: 1px dashed #ff617d26; border-radius: inherit; }
.hero-orbit::after { content: ''; position: absolute; left: 5%; top: 22%; width: 7px; height: 7px; background: #ff587e; border-radius: 50%; box-shadow: 0 0 18px #ff1744; }
.hero-signature { position: absolute; bottom: 9%; right: 11%; font-size: .56rem; letter-spacing: .3em; color: #b86a81; }
.slide::after { z-index: 1; pointer-events: none; background: linear-gradient(0deg,#000 0%,transparent 25%),linear-gradient(90deg,#0009,transparent 55%); }
main > .wrap { position: relative; }
main > .wrap::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -110px -10px auto; height: 560px; background: radial-gradient(ellipse at 50% 0,#b5122d0d,transparent 70%); }
.cap { margin: auto; padding: 38px 24px 68px; }
.cap h1 { max-width: 53%; font-size: clamp(3.7rem,6.7vw,6.1rem); line-height: .94; letter-spacing: -.06em; font-weight: 800; }
.cap h1 > span { display: block; color: #ff4d74; background: linear-gradient(115deg,#fff1f4,#ff6d90 30%,#e0003b); background-clip: text; -webkit-text-fill-color: transparent; }
.cap .eyebrow, .eyebrow { margin: 0 0 23px; color: #d7abb9; font-size: .63rem; font-weight: 600; letter-spacing: .21em; }
.status-light { display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: middle; border-radius: 50%; background: #ff4e76; box-shadow: 0 0 12px #ff4e76; }
.cap .hero-description { margin-top: 24px; max-width: 370px; color: #b6a9b4; font-size: 1rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero-actions .cta { margin-top: 0; gap: 20px; padding: 14px 23px; min-height: 50px; }
.hero-actions .cta span { font-size: 1.25rem; }
.hero-join { display: inline-flex; align-items: center; gap: 21px; min-height: 50px; border-radius: 11px; padding: 12px 17px; font-size: .85rem; color: #f3dce4; background: #1b101880; border: 1px solid #75425666; cursor: pointer; transition: background .2s,border-color .2s; }
.hero-join:hover { background: #341221; border-color: #bf4967; }
.cap .hero-note { margin-top: 24px; color: #8e7885; font-size: .54rem; font-weight: 600; letter-spacing: .15em; }
@keyframes hero-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes aura-drift { to { transform: translate(-70px,50px) scale(1.15); } }
.cta, .go, .add { border-radius: 11px; font-weight: 700; transition: background .18s,box-shadow .18s,transform .18s; }
.cta { min-height: 46px; margin-top: 20px; padding: 12px 23px; font-size: .95rem; box-shadow: 0 6px 20px #e0002a2e; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #e0002a40; }
.hero .cta { animation: none; }
.hero-ctl { bottom: 23px; right: max(24px,calc(50% - 566px)); gap: 8px; }
.arrow { width: 42px; height: 42px; border-radius: 10px; }
.arrow:hover { transform: translateY(-1px); }
.dots { bottom: 27px; gap: 3px; }
.dots button { display: grid; place-items: center; width: 30px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px; }
.dots button::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: #6d626a; transition: width .2s,background .2s; }
.dots button.on::before { width: 23px; background: var(--accent); }
.notice { padding: 12px 17px; margin-top: 8px; line-height: 1.65; border: 0; border-left: 2px solid #a62043; border-radius: 0; background: linear-gradient(90deg,#2b102033,transparent); font-size: .8rem; color: #a99ba8; }
.notice b { color: #fff; }
.features { gap: 0; margin: 28px 0 65px; border-block: 1px solid #ffffff0d; background: linear-gradient(90deg,transparent,#2a142026,transparent); }
.features > div { min-width: 0; padding: 24px 16px; column-gap: 11px; border: 0; border-radius: 0; background: transparent; }
.features > div + div { border-left: 1px solid #ffffff0d; }
.features > div:hover { transform: translateY(-2px); box-shadow: none; border-color: #653040; }
.features span { font-size: 1.35rem; }
.features b { font-size: .87rem; }
.features small { font-size: .76rem; margin-top: 2px; }
.shop-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; scroll-margin-top: calc(var(--header-height) + 25px); }
.shop-heading .eyebrow { margin-bottom: 11px; color: #e15e80; font-size: .59rem; }
.shop-heading h2 { margin: 0; font-size: clamp(1.85rem,3.3vw,2.65rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.16; }
.shop-heading h2 > span { color: #ef3260; }
.shop-heading > p { max-width: 220px; margin: 0 0 3px; color: #9f8e9d; font-size: .82rem; }
.tabs { top: calc(var(--header-height) + 12px); gap: 5px; padding: 5px; margin: 0 0 40px; border-radius: 13px; background: #100c12ed; border-color: #ffffff14; box-shadow: 0 8px 24px #0005; }
.tab { min-height: 41px; padding: 9px 22px; border-color: transparent; border-radius: 9px; font-weight: 600; font-size: .85rem; }
.tab.on { box-shadow: 0 3px 12px #e0002a2e; }
.cat { margin-bottom: 72px; scroll-margin-top: calc(var(--header-height) + 90px); }
.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid #ffffff10; }
.collection-index { font-size: .55rem; letter-spacing: .18em; font-weight: 600; color: #a67588; }
.collection-heading h2 { margin: 6px 0 0; font-size: 1.95rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.collection-count { margin-bottom: 2px; font-size: .67rem; color: #988592; font-variant-numeric: tabular-nums; }
.collection-description { margin: -7px 0 24px; max-width: 630px; color: #a895a4; font-size: .85rem; line-height: 1.7; }
h2.center { font-size: clamp(1.7rem,3vw,2.15rem); line-height: 1.2; letter-spacing: -.025em; gap: 18px; }
h2.center::before, h2.center::after { height: 1px; width: clamp(32px,8vw,85px); opacity: .7; }
.sub { margin: 10px auto 25px; font-size: .9rem; max-width: 660px; line-height: 1.65; }
.grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.cat[data-kind="tags"] .grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.card { --spark-color: #ff466d; min-width: 0; border: 1px solid #38232f; border-radius: 18px; background: linear-gradient(145deg,#20121c,#0d0b10 65%); opacity: 1; transform: none; box-shadow: 0 8px 24px #0004,inset 0 1px 0 #ffffff06; transition: transform .26s cubic-bezier(.2,.7,.3,1),border-color .26s,box-shadow .26s; }
.card:hover, .card:focus-within { z-index: 4; border-color: #b93b54; box-shadow: 0 22px 44px -16px #000c,0 0 26px #e0002a20; }
.card::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,20%),#ffffff16,transparent 62%); box-shadow: inset 0 1px 0 #ffffff29; transition: opacity .26s; }
.card:hover::after, .card:focus-within::after { opacity: 1; }
.card.pop { border-color: #b52440; box-shadow: 0 0 0 1px #b5244033; }
.card::before { display: none; }
.card.in { animation: card-arrive .6s ease-out; }
.card.in:nth-child(3n+2) { animation-delay: .05s; }
.card.in:nth-child(3n) { animation-delay: .1s; }
@keyframes card-arrive { from { opacity: .5; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.card[data-featured] { overflow: visible; border-color: #b93b54; box-shadow: 0 0 0 1px #d5264930,0 8px 38px -20px #e0002a80; }
.card[data-featured="tokens"] { --spark-color: #d29aff; border-color: #9659bd; box-shadow: 0 0 0 1px #ae70d430,0 8px 38px -20px #bb67f080; }
.card[data-featured]::before { display: block; opacity: .8; background: linear-gradient(115deg,transparent 25%,var(--spark-color) 48%,#ffeff5 50%,transparent 75%); background-size: 280% 280%; animation: featured-border 7s ease-in-out infinite; animation-play-state: paused; }
.card.fx-active[data-featured]::before { animation-play-state: running; }
.effects-paused .card[data-featured]::before { animation-play-state: paused; }
@keyframes featured-border { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.card[data-featured] .thumb { border-radius: 17px 17px 0 0; }
.card[data-featured] .info { border-radius: 0 0 17px 17px; }
.featured-sparks { position: absolute; z-index: 4; inset: -8px; border-radius: inherit; pointer-events: none; }
.featured-sparks i { --drift: 7px; position: absolute; width: 3px; height: 3px; background: var(--spark-color); box-shadow: 0 0 8px var(--spark-color); border-radius: 50%; opacity: 0; animation: featured-spark 4s ease-in-out infinite; animation-play-state: paused; }
.fx-active .featured-sparks i { animation-play-state: running; }
.featured-sparks i:nth-child(1) { left: 5%; top: 22%; animation-delay: -1.4s; }
.featured-sparks i:nth-child(2) { right: 3%; top: 65%; --drift: -5px; animation-delay: -.5s; }
.featured-sparks i:nth-child(3) { left: 28%; top: 2%; animation-delay: -2.5s; }
.featured-sparks i:nth-child(4) { left: 72%; bottom: 0; --drift: -6px; animation-delay: -3.7s; }
.featured-sparks i:nth-child(5) { right: 0; top: 17%; animation-delay: -2s; }
.featured-sparks i:nth-child(6) { left: 0; top: 78%; --drift: -4px; animation-delay: -3s; }
.featured-sparks i:nth-child(7) { right: 25%; top: 0; --drift: -8px; animation-delay: -.9s; }
.featured-sparks i:nth-child(8) { left: 20%; bottom: 0; animation-delay: -1.8s; }
.effects-paused .featured-sparks i { animation-play-state: paused; }
@keyframes featured-spark { 0%,100% { opacity: 0; transform: translate(0,8px) scale(.4); } 35% { opacity: .9; } 75% { opacity: .35; } 95% { opacity: 0; transform: translate(var(--drift),-22px) scale(1.15); } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: perspective(1000px) translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.02); }
  .card[data-featured]:hover { box-shadow: 0 24px 48px -14px #000c,0 0 34px -8px var(--spark-color); }
}
.thumb { aspect-ratio: 1.12; background: radial-gradient(ellipse at 50% 75%,#482039 0,#140f18 63%); cursor: default; }
.thumb::before { display: block; inset: 0; height: 100%; opacity: .23; background-image: linear-gradient(#ffffff15 1px,transparent 1px),linear-gradient(90deg,#ffffff15 1px,transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse,#000,transparent 75%); }
.product-halo { position: absolute; inset: 35% 10% 3%; pointer-events: none; background: radial-gradient(ellipse,#ed315c35,transparent 68%); }
.art-tokens .product-halo { background: radial-gradient(ellipse,#b76cff55,transparent 68%); }
.art-tokens .thumb { background: radial-gradient(ellipse at 50% 70%,#341d49,#120e19 70%); }
.thumb .product-image { object-fit: contain; padding: 30px 24px 16px; transition: transform .3s; }
.art-rank .thumb { background: #09090b; }
.art-rank .thumb .product-image { padding: 0; object-fit: contain; }
.art-tokens .thumb .product-image { padding: 45px; image-rendering: pixelated; filter: drop-shadow(0 14px 15px #a96af43d); }
.art-tokens.fx-active .product-image { animation: token-float 5s ease-in-out infinite; }
@keyframes token-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.effects-paused .art-tokens .product-image { animation-play-state: paused; }
.art-tag .thumb { aspect-ratio: 1.2; }
.art-tag .thumb .product-image { padding: 40px 24px 24px; image-rendering: pixelated; }
.card:hover .thumb .product-image { transform: scale(1.065); }
.num { max-width: 90%; padding: 30px 14px; }
.num b { color: #f1d2da; font-size: 3rem; text-shadow: 0 0 28px #e0002a2a; }
.num small { display: block; margin-top: 10px; font-size: .7rem; letter-spacing: .12em; overflow-wrap: anywhere; }
.badges { top: 12px; left: 12px; right: 12px; gap: 5px; }
.b { font-size: .61rem; padding: 5px 8px; border-radius: 6px; letter-spacing: .035em; background: #151216ed; border-color: #54402a; }
.b.red { background: #c91d3c; border-color: #d13450; }
.info { margin-top: 0; padding: 21px 22px 22px; background: linear-gradient(145deg,#1b111b,#0d0b10 80%); border-top: 1px solid #ffffff0c; gap: 4px; }
.product-type { margin: 0 0 7px; font-size: .53rem; letter-spacing: .15em; font-weight: 600; color: #b294a5; }
.info h3 { min-height: 2.65em; font-size: 1.1rem; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; overflow-wrap: anywhere; }
.foot { gap: 13px; padding-top: 10px; }
.price { color: #f8f0f5; font-size: 1.65rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; text-align: left; }
.card[data-featured="rank"] .price { color: #ff87a2; }
.card[data-featured="tokens"] .price { color: #d5a6ff; }
.price s { font-size: .85rem; margin-left: 8px; }
.add { min-height: 46px; padding: 12px 10px; font-size: .86rem; border: 1px solid #ff8dab38; background: linear-gradient(115deg,#ec234f,#b60b36); box-shadow: inset 0 1px 0 #ffffff15,0 6px 18px #c3113622; }
.add::before { content: '↗'; font-size: 1.15rem; line-height: 1; font-weight: 500; }
.card[data-featured="tokens"] .add { background: linear-gradient(115deg,#9f53d4,#6d2ca1); border-color: #d69eff66; }
.add:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 5px 16px #e0002a33; }
.sk { height: 365px; border-radius: 16px; }
.how { padding-top: 6px; margin-bottom: 32px; }
.steps { gap: 14px; margin-top: 24px; }
.steps > div { padding: 23px 18px; border-radius: 13px; }
.steps > div:hover { transform: translateY(-2px); border-color: #60303c; box-shadow: none; }
.steps b { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; box-shadow: none; }
.steps h3 { font-size: .96rem; margin-top: 15px; }
.steps p { font-size: .82rem; line-height: 1.6; }
.help { position: relative; overflow: hidden; margin: 0 0 58px; padding: 38px; border-radius: 18px; border-color: #5e253d; background: radial-gradient(ellipse at 85% 100%,#57203f66,transparent 60%),linear-gradient(115deg,#20101b,#0d0a11); }
.help::before { content: '+++'; position: absolute; right: 150px; top: -80px; font-size: 13rem; font-weight: 800; letter-spacing: -.09em; color: #f65d8510; pointer-events: none; transform: rotate(-15deg); }
.help > * { position: relative; }
.help h3 { font-size: 1.65rem; letter-spacing: -.035em; }
.help p { margin-top: 7px; font-size: .88rem; line-height: 1.65; }
#dc2 { font-size: .9rem; border-radius: 11px; box-shadow: none; }
#dc2:hover { box-shadow: 0 6px 20px #5865f226; }
.faq { max-width: 800px; margin-top: 24px; }
.faq details { padding: 18px 21px; border-radius: 12px; margin-bottom: 10px; }
.faq summary { font-size: .94rem; line-height: 1.5; }
.faq details[open] { border-color: #64303f; }
.faq details p { line-height: 1.75; font-size: .88rem; }
footer { padding: 32px 24px; margin-top: 58px; }
footer p { max-width: 620px; margin: 10px auto; line-height: 1.7; font-size: .78rem; }
.pay { gap: 7px; margin-bottom: 18px; }
.pay i { opacity: .8; height: 27px; min-width: 45px; font-size: .64rem; }
.modal { max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 17px; padding: 30px 26px 25px; box-shadow: 0 24px 90px #000b; }
.modal:not(.show), .drawer:not(.open) { visibility: hidden; }
.mlogo { width: 185px; height: 70px; max-width: 75%; }
.modal h3 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.02em; }
.x, .x2 { display: grid; place-items: center; min-width: 38px; min-height: 38px; border-radius: 9px; font-size: 1.65rem; }
.x:hover, .x2:hover { background: #ffffff0a; }
.seg { margin-bottom: 14px; border-radius: 10px; }
.seg button { min-height: 42px; font-size: .9rem; }
input { min-height: 48px; border-color: #44303a; border-radius: 10px; }
.go { min-height: 46px; font-size: .93rem; box-shadow: none; }
.go:hover { box-shadow: 0 5px 18px #e0002a25; }
.go:disabled { cursor: wait; }
.drawer { width: min(440px,100%); background: linear-gradient(150deg,#1a101b,#0c0b0e 65%); border-left: 1px solid #6c293c; box-shadow: -20px 0 70px #0008; overscroll-behavior: contain; }
.overlay { backdrop-filter: blur(6px); }
.drawer.open .ditems { animation: basket-reveal .35s ease-out; }
@keyframes basket-reveal { from { opacity: .4; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
.dh { min-height: 72px; padding: 18px 24px; font-size: 1.12rem; }
.who { padding: 16px 24px; font-size: .83rem; }
.ditems { min-height: 0; padding: 6px 24px; }
.row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding-block: 17px; font-size: .88rem; }
.row > span:first-child { overflow-wrap: anywhere; }
.q { gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q button { width: 32px; height: 34px; font-size: .95rem; }
.q b { min-width: 58px; text-align: right; font-size: .85rem; }
.df { padding: 20px 24px calc(22px + env(safe-area-inset-bottom,0px)); background: #0c0b0e; }
.df .row { font-size: 1.15rem; }
.tiny { line-height: 1.6; font-size: .73rem; }
.err { line-height: 1.5; }
.toast { max-width: min(380px,calc(100vw - 32px)); line-height: 1.5; font-size: .82rem; box-shadow: 0 10px 30px #0005; }
.empty { font-size: .95rem; line-height: 2; }
.check-payment { margin-top: 4px; font-weight: 600; text-underline-offset: 3px; }
.thumb .image-fallback[hidden], .thumb .product-image[hidden], .checkout-retry[hidden] { display: none; }
@media (max-width: 1050px) { .cat[data-kind="tags"] .grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 769px) and (max-width: 1080px) {
  .bar #dc { display: none; }
  .bar #userBtn { max-width: 150px; }
  .bar .brand img { max-width: 140px; }
}
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .features > div:nth-child(odd) { border-left: 0; }
  .features > div:nth-child(n+3) { border-top: 1px solid #ffffff0d; }
  .hide-sm { display: none !important; } .pill { padding-inline: 11px; }
  .cap .hero-description { max-width: 300px; font-size: .91rem; }
  .hero-art { width: 55%; right: -5%; }
  .slide[data-side="right"] .hero-art { left: -5%; }
}
@media (max-width: 768px) {
  :root { --header-height: 116px; }
  .wrap { padding-inline: 18px; }
  .bar { display: grid; grid-template-columns: minmax(0,1fr) 80px 108px; grid-template-areas: 'brand currency basket' 'server server user'; gap: 9px; height: auto; padding-block: 11px; }
  .brand { grid-area: brand; width: auto; margin: 0; justify-content: flex-start; }
  .brand img { width: auto; max-width: min(100%,136px); height: 38px; }
  .sp { display: none; }
  .cur-wrap { grid-area: currency; }
  .server-pill { grid-area: server; }
  .bar #userBtn { grid-area: user; display: flex; max-width: 100%; min-width: 0; justify-content: center; }
  .basket-pill { grid-area: basket; }
  .pill { min-width: 0; min-height: 38px; padding: 8px 10px; font-size: .73rem; }
  .bar .pill { min-width: 0; height: 38px; min-height: 38px; padding: 8px 10px; font-size: .73rem; }
  .bar .cur-select { width: 100%; min-width: 0; padding-right: 24px; }
  .cur-wrap::after { right: 11px; }
  .bar .avatar { width: 20px; height: 20px; }
  .hero { height: 610px; }
  .hero-art { width: 66%; height: 220px; top: auto; right: 1%; bottom: 12px; opacity: .92; }
  .slide[data-side="right"] .hero-art { left: 1%; right: auto; }
  .hero-signature { display: none; }
  .cap { align-self: flex-start; margin: 0 auto; padding: 38px 18px 220px; }
  .cap h1 { max-width: 100%; font-size: clamp(3.8rem,10vw,4.8rem); }
  .cap .hero-description { max-width: 340px; font-size: .92rem; margin-top: 20px; }
  .cap .eyebrow { font-size: .57rem; margin-bottom: 22px; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .cta, .hero-join { min-height: 46px; padding: 11px 16px; font-size: .82rem; gap: 13px; }
  .cap .hero-note { margin-top: 20px; }
  .hero-ctl { right: 18px; bottom: 23px; }
  .shop-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .shop-heading > p { max-width: 100%; }
  .arrow { width: 36px; height: 38px; }
  .hero .cta { padding-inline: 18px; }
  .grid, .cat[data-kind="tags"] .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .thumb, .art-rank .thumb { aspect-ratio: 1; }
  .art-tokens .thumb .product-image { padding: 30px; }
  .art-tag .thumb .product-image { padding: 30px 16px 18px; }
  .info { padding: 15px; }
  .info h3 { font-size: 1rem; }
  .price { font-size: 1.35rem; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .help { padding: 23px; gap: 20px; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 14px; }
  .bar { gap: 8px; grid-template-columns: minmax(0,1fr) 76px 106px; }
  .brand img { max-width: min(100%,116px); }
  .bar .pill { padding-inline: 9px; font-size: .7rem; gap: 6px; }
  .bar .server-pill { gap: 10px; }
  .hero { height: 640px; }
  .cap { padding-inline: 18px; }
  .cap h1 { font-size: clamp(3.5rem,15vw,4.3rem); }
  .cap .hero-description { max-width: 290px; font-size: .88rem; }
  .cap .hero-note { font-size: .48rem; }
  .hero-art { width: 88%; height: 190px; bottom: 20px; right: 3%; }
  .slide[data-side="right"] .hero-art { left: 3%; }
  .hero-ctl { bottom: 23px; gap: 6px; }
  .hero-ctl .arrow { width: 32px; height: 36px; }
  .notice { padding: 13px 15px; font-size: .79rem; }
  .features { gap: 0; margin-bottom: 40px; }
  .features > div { padding: 18px 11px; column-gap: 8px; }
  .features span { font-size: 1.05rem; }
  .features b { font-size: .75rem; }
  .features small { font-size: .68rem; line-height: 1.5; }
  .tabs { gap: 3px; margin-bottom: 32px; border-radius: 12px; }
  .shop-heading h2 { font-size: 1.85rem; }
  .collection-heading h2 { font-size: 1.65rem; }
  .collection-description { font-size: .78rem; }
  .collection-index { font-size: .5rem; }
  .product-type { font-size: .45rem; letter-spacing: .09em; }
  .card[data-featured] .thumb { border-radius: 12px 12px 0 0; }
  .card[data-featured] .info { border-radius: 0 0 12px 12px; }
  .tab { min-height: 39px; padding: 8px 13px; font-size: .77rem; }
  h2.center { font-size: 1.75rem; }
  .sub { font-size: .81rem; margin-bottom: 20px; }
  .cat { margin-bottom: 43px; }
  .grid, .cat[data-kind="tags"] .grid { gap: 11px; }
  .card { border-radius: 13px; }
  .art-tokens .thumb .product-image { padding: 25px; }
  .art-tag .thumb .product-image { padding: 31px 13px 17px; }
  .badges { top: 8px; left: 8px; right: 8px; }
  .b { padding: 4px 6px; font-size: .56rem; }
  .info { padding: 13px 11px 12px; }
  .info h3 { min-height: 2.7em; font-size: .9rem; }
  .price { font-size: 1.22rem; }
  .price s { display: block; margin: 3px 0 0; font-size: .72rem; }
  .foot { padding-top: 9px; gap: 11px; }
  .add { font-size: .73rem; gap: 5px; padding-inline: 5px; }
  .steps { gap: 10px; }
  .steps > div { padding: 18px 13px; }
  .steps h3 { font-size: .88rem; }
  .steps p { font-size: .76rem; }
  .help { padding: 21px; margin-bottom: 38px; }
  .help .cta { width: 100%; }
  .faq details { padding: 16px; }
  .faq summary { font-size: .85rem; }
  .faq details p { font-size: .8rem; }
  .dh, .who, .df { padding-inline: 18px; }
  .ditems { padding-inline: 18px; }
  .row { gap: 9px; font-size: .8rem; }
  .q { gap: 5px; }
  .q button { width: 29px; }
  .q b { min-width: 50px; font-size: .79rem; }
  .modal { padding: 27px 21px 22px; }
  .sk { height: 290px; }
}
@media (max-width: 350px) { .add::before { display: none; } .tab { padding-inline: 10px; } .brand img { max-width: min(100%,98px); } .num small { font-size: .6rem; letter-spacing: .05em; } }
@media (hover: none) { .card:hover, .cta:hover, .pill:hover, .pill.hot:hover, .card:hover .thumb .product-image { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #embers, .featured-sparks { display: none; }
  .card:hover, .card:hover .thumb .product-image { transform: none; }
  .hero-art { transform: none; }
  .slide.leaving { visibility: hidden; }
  .slide img { transform: rotate(-3deg); }
}