:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-803cc201 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-803cc201 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.landing-log-in {
    position:relative;
    display:flex;
    gap:2.5rem;
    align-items:center;
    padding:1rem 2.5rem;
    margin-inline:var(--main-layout-inline-padding);
    overflow:hidden;
    background-color:var(--color-base-800);
    border-radius:.75rem
}
.landing-log-in__background {
    position:absolute;
    bottom:0;
    left:0;
    height:100%;
    transform:scaleX(-1)
}
.landing-log-in__checkerboard {
    height:100%
}
.landing-log-in__banner-wrapper {
    position:relative;
    z-index:1
}
.landing-log-in__image {
    max-height:140px
}
.landing-log-in__content {
    display:flex;
    flex-grow:1;
    gap:.5rem;
    justify-content:space-between
}
.landing-log-in__text {
    display:flex;
    flex-direction:column;
    gap:1rem
}
.landing-log-in__title {
    font-size:1.5rem;
    font-weight:700
}
.landing-log-in__description {
    font-weight:500;
    color:var(--color-base-300);
    text-wrap:balance
}
.landing-log-in__side {
    display:flex;
    flex-direction:column;
    gap:.75rem;
    align-items:end
}
.landing-log-in__rating {
    display:flex;
    gap:.5rem;
    align-items:center;
    justify-content:center;
    font-family:IBM Plex Mono,monospace,system-ui;
    font-size:.875rem;
    font-weight:500;
    color:var(--color-base-300);
    text-transform:uppercase
}
.landing-log-in__rating--desktop {
    white-space:nowrap
}
.landing-log-in__rating--mobile {
    display:none;
    flex-direction:column
}
.landing-log-in__stars {
    display:flex;
    gap:.25rem;
    color:var(--color-brand-100)
}
.landing-log-in__star-partial {
    position:relative;
    width:24px;
    height:24px
}
.landing-log-in__star-bg {
    color:var(--color-base-500)
}
.landing-log-in__star-partial .landing-log-in__star-bg,.landing-log-in__star-partial .landing-log-in__star-fill {
    position:absolute
}
.landing-log-in__star-fill path {
    clip-path:inset(0 calc(100% - var(--star-fill)) 0 0)
}
@media not (min-width:1280px) {
    .landing-log-in {
        flex-direction:column;
        padding:2rem
    }
    .landing-log-in__background {
        display:none
    }
    .landing-log-in__banner-wrapper {
        display:flex;
        align-self:stretch;
        justify-content:center;
        padding-top:1rem
    }
    .landing-log-in__content {
        align-items:end;
        align-self:stretch
    }
}
@media not (min-width:768px) {
    .landing-log-in__banner-wrapper {
        padding-top:0
    }
    .landing-log-in__image {
        max-height:124px
    }
    .landing-log-in__content {
        flex-direction:column;
        gap:1.5rem;
        align-items:center;
        justify-content:center
    }
    .landing-log-in__text {
        text-align:center
    }
    .landing-log-in__side {
        gap:1rem;
        align-items:center;
        align-self:stretch
    }
    .landing-log-in__button {
        width:100%
    }
    .landing-log-in__rating--desktop {
        display:none
    }
    .landing-log-in__rating--mobile {
        display:flex
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-cb35dff3 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-cb35dff3 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.faq-article {
    display:flex;
    flex:1;
    flex-direction:column;
    gap:1rem
}
.faq-article .accordion-header {
    font-family:IBM Plex Mono,monospace,system-ui;
    font-size:1rem;
    color:var(--color-base-0)
}
.faq-article__answer {
    font-size:1rem;
    font-weight:500;
    color:var(--color-base-300)
}
.faq-article__answer ol {
    padding-left:1.5rem;
    margin:.5rem 0
}
.faq-article__answer ol li:not(:last-child) {
    margin-bottom:.5rem
}
.faq-article__answer ol li strong {
    font-weight:600;
    color:var(--color-base-200)
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-5592760a {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-5592760a {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.sect-qa-support {
    display:flex;
    flex-direction:column;
    gap:3rem;
    padding-inline:var(--main-layout-inline-padding)
}
.faq-section__banner {
    display:flex;
    justify-content:space-between;
    margin-bottom:3rem;
    border-bottom:1px solid var(--color-base-700)
}
.faq-section__title {
    margin-bottom:1rem;
    font-size:2rem;
    font-weight:700;
    color:#fff
}
.faq-section__subtitle {
    font-size:1rem;
    font-weight:500;
    color:var(--color-base-300)
}
.faq-section__image {
    max-width:100%;
    height:100%;
    max-height:150px;
    margin-left:auto;
    object-fit:contain
}
.faq-section__articles {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem 2.5rem
}
@media not (min-width:1280px) {
    .faq-section__image {
        max-height:130px;
        margin-right:calc((var(--main-layout-inline-padding) + 3rem) * -1)
    }
    .faq-section__articles {
        grid-template-columns:1fr;
        gap:2.5rem
    }
}
@media not (min-width:768px) {
    .sect-qa-support {
        gap:3rem
    }
    .faq-section__banner {
        flex-direction:column-reverse;
        padding-bottom:3rem;
        text-align:center
    }
    .faq-section__image {
        margin-inline:auto;
        margin-bottom:3rem
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-9f0f040a {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-9f0f040a {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.landing-highlight {
    position:relative;
    display:flex;
    flex-grow:1;
    flex-direction:column;
    gap:.5rem;
    justify-content:center;
    padding:1.5rem;
    overflow:hidden;
    background-color:var(--color-base-800);
    /* Removed reference to checkerboard-CEB_aih5.svg */
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:auto 100%;
    border-radius:.75rem
}
.landing-highlight__title {
    z-index:1;
    font-size:1.375rem;
    font-weight:700;
    line-height:1.3
}
.landing-highlight__text {
    z-index:1;
    font-weight:500;
    color:var(--color-base-300)
}
.landing-highlight__subtext {
    z-index:1;
    margin-top:1rem;
    font-family:IBM Plex Mono,monospace,system-ui;
    font-weight:600;
    color:var(--color-base-300);
    text-transform:uppercase
}
.landing-highlight__image {
    position:absolute;
    top:.25rem;
    right:.25rem;
    height:100%;
    object-fit:contain
}
.landing-highlight--size-regular .landing-highlight__image {
    max-width:124px
}
@media not (min-width:480px) {
    .landing-highlight--large {
        align-items:center;
        background-image:none
    }
    .landing-highlight--large .landing-highlight__image {
        position:static;
        order:-1
    }
    .landing-highlight__title {
        font-size:1.25rem
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-0360b166 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-0360b166 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.stats-display-row {
    display:flex;
    gap:1rem;
    align-items:end;
    justify-content:stretch;
    padding-inline:var(--main-layout-inline-padding)
}
.landing-instant-highlights__rates {
    color:#48b8ff
}
.landing-instant-highlights__delivery {
    color:var(--color-orange-100)
}
@media(min-width:1280px) {
    .stats-display-row .landing-highlight__image {
        right:-2rem
    }
}
@media not (min-width:1280px) {
    .stats-display-row {
        flex-direction:column;
        gap:1rem;
        align-items:stretch
    }
}
@media not (min-width:640px) {
    .stats-display-row .landing-highlight__image {
        right:-5rem
    }
}
@media not (min-width:520px) {
    .stats-display-row .landing-highlight__image {
        right:-8rem
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-79b6e360 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-79b6e360 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.featured-showcase {
    display:grid;
    flex-direction:column;
    grid-template:"title button" auto "listings listings" auto/1fr auto;
    gap:1rem;
    padding-inline:var(--main-layout-inline-padding);
    overflow:hidden
}
.featured-showcase__title {
    display:flex;
    grid-area:title;
    gap:.25rem;
    align-items:center;
    cursor:pointer
}
.featured-showcase__logo {
    height:1.75rem;
    aspect-ratio:1/1;
    margin-right:.5rem
}
.featured-showcase__title-chevron {
    color:var(--color-base-300)
}
.featured-showcase:hover .featured-showcase__title-chevron {
    color:var(--color-base-0)
}
.featured-showcase__navigation {
    display:flex;
    grid-area:button;
    gap:.5rem
}
.featured-showcase__chevron-button {
    --button-height: 48px
}
.featured-showcase__chevron-button .button__container {
    aspect-ratio:1/1;
    padding:0
}
.featured-showcase__chevron-button--left {
    transform:rotate(180deg)
}
.featured-showcase__market-button .button__container {
    flex-direction:row-reverse;
    padding-inline:.75rem .5rem
}
.featured-showcase__container {
    position:relative;
    grid-area:listings;
    overflow:hidden;
    border-radius:.5rem
}
.featured-showcase__products {
    display:flex;
    flex:1;
    gap:2px;
    padding-top:2px;
    margin-top:-2px;
    overflow:auto visible;
    scrollbar-width:none;
    scroll-behavior:smooth;
    -ms-overflow-style:none
}
.featured-showcase__products::-webkit-scrollbar {
    display:none
}
.featured-showcase__listing {
    min-width:230px
}
@media(min-width:1280px) {
    .featured-showcase__market-button {
        display:none
    }
}
@media not (min-width:1280px) {
    .featured-showcase__title-chevron,.featured-showcase__chevron-button {
        display:none
    }
    .featured-showcase__products {
        display:grid;
        grid-template-rows:auto auto;
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
        grid-auto-rows:0;
        overflow:hidden
    }
}
@media not (min-width:768px) {
    .featured-showcase {
        grid-template:"title" auto "listings" auto "button" auto/1fr
    }
    .featured-showcase__market-button {
        width:100%;
        --button-height: 48px
    }
    .featured-showcase__products {
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr))
    }
    .featured-showcase__listing {
        min-width:180px
    }
}
@media not (min-width:768px) {
    .featured-showcase {
        padding-inline:0
    }
    .featured-showcase__title,.featured-showcase__navigation {
        padding-inline:var(--main-layout-inline-padding)
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-7c9e9605 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-7c9e9605 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.landing-highlights {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    align-items:end;
    justify-content:stretch;
    padding-inline:var(--main-layout-inline-padding)
}
@media not (min-width:1280px) {
    .landing-highlights {
        grid-template-columns:repeat(2,1fr)
    }
}
@media not (min-width:768px) {
    .landing-highlights {
        grid-template-columns:1fr
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-f768ccb7 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-f768ccb7 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
@keyframes fade-in-up-f768ccb7 {
    0% {
        opacity:0;
        transform:translateY(15px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.hero-content {
    display:flex;
    flex-direction:column;
    gap:2rem
}
.hero-text-group {
    display:flex;
    flex-direction:column;
    gap:12px
}
.hero-badge {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font-weight:600;
    color:var(--color-yellow-100);
    text-transform:uppercase;
    animation:fade-in-up-f768ccb7 .6s ease-out .1s both
}
.hero-title {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:0;
    font-size:2.5rem;
    font-weight:700;
    animation:fade-in-up-f768ccb7 .6s ease-out .2s both
}
@media not (min-width:1280px) {
    .hero-title {
        font-size:1.875rem
    }
}
.hero-subtitle {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:428px;
    margin:0;
    margin-top:.5rem;
    font-size:1.125rem;
    font-weight:500;
    color:var(--color-base-200);
    animation:fade-in-up-f768ccb7 .6s ease-out .3s both
}
@media not (min-width:1280px) {
    .hero-subtitle {
        font-size:1rem
    }
}
.hero-button {
    width:fit-content;
    margin-top:auto;
    transition:background .1s ease,transform .1s ease;
    animation:fade-in-up-f768ccb7 .6s ease-out .4s both
}
@media(max-width:768px) {
    .hero-content {
        align-items:center
    }
    .hero-badge {
        justify-content:center
    }
    .hero-title {
        justify-content:center;
        font-size:28px
    }
    .hero-subtitle {
        width:auto;
        max-width:500px;
        font-size:18px
    }
}
@media(max-width:640px) {
    .hero-subtitle {
        font-size:1rem
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-a7bfb9e0 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-a7bfb9e0 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.hero-section {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:end;
    height:calc(var(--banner-height) - 20px);
    padding-inline:var(--main-layout-inline-padding);
    --banner-height: 600px
}
@media not (min-width:1280px) {
    .hero-section {
        --banner-height: 550px;
        height:530px
    }
}
@media not (min-width:768px) {
    .hero-section {
        align-items:center;
        height:auto;
        padding-top:470px
    }
}
@media not (min-width:700px) {
    .hero-section {
        padding-top:400px
    }
}
@media not (min-width:600px) {
    .hero-section {
        padding-top:350px
    }
}
@media not (min-width:480px) {
    .hero-section {
        padding-top:270px
    }
}
.hero-banner {
    position:absolute;
    top:0;
    left:75px;
    display:flex;
    justify-content:flex-start;
    height:600px;
    overflow:hidden
}
@media not (min-width:1280px) {
    .hero-banner {
        left:-100px
    }
}
@media not (min-width:1100px) {
    .hero-banner {
        left:-200px
    }
}
@media not (min-width:1000px) {
    .hero-banner {
        left:-300px
    }
}
@media not (min-width:900px) {
    .hero-banner {
        left:-350px
    }
}
@media not (min-width:768px) {
    .hero-banner {
        top:-70px;
        left:0;
        justify-content:center;
        width:100%
    }
}
.hero-banner-image {
    height:var(--banner-height);
    margin-left:-4px;
    object-fit:contain
}
@media(min-width:768px) {
    .hero-banner-image--mobile {
        display:none
    }
}
@media not (min-width:768px) {
    .hero-banner-image--desktop {
        display:none
    }
    .hero-banner-image {
        position:absolute;
        top:0;
        width:100%;
        min-width:500px;
        max-width:800px;
        height:auto
    }
}
.hero-main {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:2rem
}
.hero-content-wrapper {
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    padding:4.5rem 0
}
@media not (min-width:768px) {
    .hero-content-wrapper {
        justify-content:center;
        padding:0;
        text-align:center
    }
}
.hero-content-hidden {
    position:absolute;
    z-index:1;
    display:flex;
    visibility:hidden;
    padding-right:inherit;
    padding-left:inherit;
    pointer-events:none
}
.hero-content-hidden .hero-content {
    width:calc(var(--v460fc96d) * 1px);
    height:min-content;
    padding-right:inherit;
    padding-left:inherit
}
.hero-content-visible {
    min-height:calc(var(--v1a47c334) * 1px)
}
.hero-content-enter-active,.hero-content-leave-active {
    transition:opacity .4s ease-in-out,transform .4s ease-in-out
}
.hero-content-enter-from {
    opacity:0;
    transform:translateY(20px)
}
.hero-content-leave-to {
    opacity:0;
    transform:translateY(-20px)
}
.hero-content-enter-to,.hero-content-leave-from {
    opacity:1;
    transform:translateY(0)
}
.hero-navigation {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
    padding-bottom:40px;
    margin-top:3rem
}
@media not (min-width:1280px) {
    .hero-navigation {
        margin-top:2rem
    }
}
.nav-controls {
    display:flex;
    flex-direction:row;
    gap:.25rem;
    align-items:center
}
.nav-button {
    width:1.5rem;
    height:1.5rem;
    color:var(--color-base-300);
    cursor:pointer
}
.nav-button:hover {
    color:var(--color-base-0)
}
.chevron-left {
    transform:rotate(180deg)
}
.nav-text {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:3ch;
    font-size:.875rem;
    font-weight:500;
    color:var(--color-base-200);
    text-transform:uppercase
}
.progress-dots {
    display:flex;
    flex-direction:row;
    gap:.5rem;
    align-items:center
}
.dot {
    position:relative;
    width:56px;
    height:.25rem;
    overflow:hidden;
    cursor:pointer;
    background:var(--color-base-700);
    transition:background-color .1s ease
}
.dot:hover {
    background:var(--color-base-800)
}
.dot.active .dot-fill {
    position:absolute;
    top:0;
    left:0;
    width:calc(var(--fcbf27c0) * 100%);
    height:.25rem;
    background:var(--color-base-600);
    border-radius:inherit;
    transition:width .1s linear
}
@media(max-width:768px) {
    .hero-navigation {
        align-items:center
    }
}
:root {
    --exterior-color: var(--color-exterior-none)
}
:root .exterior--fn {
    --exterior-color: var(--color-exterior-fn)
}
:root .exterior--mw {
    --exterior-color: var(--color-exterior-mw)
}
:root .exterior--ft {
    --exterior-color: var(--color-exterior-ft)
}
:root .exterior--ww {
    --exterior-color: var(--color-exterior-ww)
}
:root .exterior--bs {
    --exterior-color: var(--color-exterior-bs)
}
:root {
    --rarity-color: var(--color-base-200)
}
:root .rarity--contraband {
    --rarity-color: var(--color-yellow-100)
}
:root .rarity--extraordinary,:root .rarity--covert,:root .rarity--master {
    --rarity-color: var(--color-red-100)
}
:root .rarity--classified,:root .rarity--exotic,:root .rarity--superior {
    --rarity-color: var(--color-pink-100)
}
:root .rarity--exceptional,:root .rarity--remarkable,:root .rarity--restricted {
    --rarity-color: var(--color-purple-100)
}
:root .rarity--mil-spec-grade,:root .rarity--distinguished {
    --rarity-color: var(--color-blue-100)
}
:root .rarity--high-grade,:root .rarity--industrial-grade {
    --rarity-color: var(--color-lightblue-100)
}
:root .rarity--consumer-grade,:root .rarity--base-grade {
    --rarity-color: var(--color-base-200)
}
:root .phase--ruby {
    --phase-color: var(--color-red-100)
}
:root .phase--sapphire {
    --phase-color: var(--color-blue-100)
}
:root .phase--black-pearl {
    --phase-color: var(--color-purple-100)
}
:root .phase--emerald {
    --phase-color: var(--color-green-100)
}

@keyframes spin-97208597 {
    0% {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }
}
@keyframes skeleton-pulse-97208597 {
    0%,to {
        opacity:1
    }
    50% {
        opacity:.5
    }
}
.home-view {
    position:relative;
    display:flex;
    flex-direction:column
}
.home-view__rest {
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:4rem;
    padding-top:4rem;
    background:var(--color-base-900);
    border-radius:24px 24px 0 0
}
@media(min-width:768px)and (not (min-width:1280px)) {
    .home-view {
        --main-layout-inline-padding: 2.5rem
    }
}