ul.svelte-ifvhv0 {
    list-style-type: none;
    padding: 0;
    /* margin: 0 0 9.375rem; */
    margin: 0 0 15rem;
    pointer-events: all
}

@media screen and (min-width: 48em) {
    ul.svelte-ifvhv0 {
        margin: 0;
        position: absolute;
        top: 0;
        width: 100%;
        right: 0
    }
}

li.svelte-ifvhv0 {
    margin: .75rem 0
}

@media screen and (min-width: 48em) {
    li.svelte-ifvhv0 {
        margin: .2222222222rem 0
    }

    li.svelte-ifvhv0:nth-of-type(1) {
        margin-top: .2222222222rem
    }
}

@media screen and (min-width: 80em) {
    li.svelte-ifvhv0 {
        margin: .2222222222rem 0
    }
}

.item-link.svelte-ifvhv0 {
    text-decoration: none;
    transition: opacity .55s
}

.item-link.is-light.svelte-ifvhv0 {
    color: var(--white)
}

.item-link.is-dark.svelte-ifvhv0 {
    color: var(--black)
}

@media screen and (max-width: 47.99em) {
    .item-link.svelte-ifvhv0 {
        display: flex;
        justify-content: space-between;
        font-size: 1.25rem
    }
}

@media screen and (min-width: 48em) {
    .item-link.svelte-ifvhv0 {
        padding: .2777777778rem;
        position: relative;
        transition: color .35s
    }

    .item-link.svelte-ifvhv0:after {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        bottom: 4px;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s, background .35s
    }

    .item-link.selected.is-light.svelte-ifvhv0,
    .item-link:hover.is-light.svelte-ifvhv0 {
        color: var(--black)
    }

    .item-link.selected.is-light.svelte-ifvhv0:after,
    .item-link:hover.is-light.svelte-ifvhv0:after {
        background: var(--white);
        transform: scaleX(1)
    }

    .item-link.selected.is-dark.svelte-ifvhv0,
    .item-link:hover.is-dark.svelte-ifvhv0 {
        color: var(--white)
    }

    .item-link.selected.is-dark.svelte-ifvhv0:after,
    .item-link:hover.is-dark.svelte-ifvhv0:after {
        background: var(--black);
        transform: scaleX(1)
    }
}

@media screen and (min-width: 48em) {
    .counter.svelte-ifvhv0 {
        display: none
    }
}

.container.is-light.svelte-1bvj9ag {
    color: var(--white)
}

.container.is-dark.svelte-1bvj9ag {
    color: var(--black)
}

ul.svelte-1bvj9ag {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: right
}

li.svelte-1bvj9ag {
    margin: .75rem 0
}

@media screen and (min-width: 48em) {
    li.svelte-1bvj9ag {
        margin: .2222222222rem 0
    }

    li.svelte-1bvj9ag:nth-of-type(1) {
        margin-top: .2222222222rem
    }
}

@media screen and (min-width: 80em) {
    li.svelte-1bvj9ag {
        margin: .2222222222rem 0
    }
}

.item-link.svelte-1bvj9ag {
    text-decoration: none;
    color: inherit;
    transition: opacity .55s
}

@media screen and (min-width: 48em) {
    .item-link.svelte-1bvj9ag {
        padding: .2777777778rem;
        position: relative;
        transition: color .35s
    }

    .item-link.svelte-1bvj9ag:after {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        bottom: 4px;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s, background .35s
    }

    .item-link.selected.is-light.svelte-1bvj9ag,
    .item-link:hover.is-light.svelte-1bvj9ag {
        color: var(--black)
    }

    .item-link.selected.is-light.svelte-1bvj9ag:after,
    .item-link:hover.is-light.svelte-1bvj9ag:after {
        background: var(--white);
        transform: scaleX(1)
    }

    .item-link.selected.is-dark.svelte-1bvj9ag,
    .item-link:hover.is-dark.svelte-1bvj9ag {
        color: var(--white)
    }

    .item-link.selected.is-dark.svelte-1bvj9ag:after,
    .item-link:hover.is-dark.svelte-1bvj9ag:after {
        background: var(--black);
        transform: scaleX(1)
    }
}

@media screen and (max-width: 47.99em) {
    .container.svelte-crtd.svelte-crtd {
        transform: translateY(.3125rem)
    }
}

.content.svelte-crtd.svelte-crtd {
    min-width: .5555555556rem;
    display: inline-block;
    position: relative
}

.bracket-left.svelte-crtd.svelte-crtd,
.bracket-right.svelte-crtd.svelte-crtd {
    display: inline-block;
    position: relative;
    transition: transform .55s
}

@media (hover: hover) {
    .container.svelte-crtd:hover .bracket-left.svelte-crtd {
        transform: translate(calc(.1666666667rem * -1))
    }

    .container.svelte-crtd:hover .bracket-right.svelte-crtd {
        transform: translate(.1666666667rem)
    }
}

.item.svelte-1apyz5e {
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    padding-inline: 0
}

@media screen and (min-width: 48em) {
    .item.svelte-1apyz5e {
        margin: .3333333333rem 0
    }
}

.item.is-light.svelte-1apyz5e {
    color: var(--white)
}

.item.is-dark.svelte-1apyz5e {
    color: var(--black)
}

ul.svelte-rx6cg {
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media screen and (min-width: 48em) {
    ul.svelte-rx6cg {
        margin: 0
    }
}

li.svelte-rx6cg {
    margin: .75rem 0
}

@media screen and (min-width: 48em) {
    li.svelte-rx6cg {
        margin: .2222222222rem 0
    }

    li.svelte-rx6cg:nth-of-type(1) {
        margin-top: .2222222222rem
    }
}

@media screen and (min-width: 80em) {
    li.svelte-rx6cg {
        margin: .2222222222rem 0
    }
}

.item-link.svelte-rx6cg {
    text-decoration: none;
    transition: opacity .55s
}

.item-link.is-light.svelte-rx6cg {
    color: var(--white)
}

.item-link.is-dark.svelte-rx6cg {
    color: var(--black)
}

@media screen and (min-width: 48em) {
    .item-link.svelte-rx6cg {
        padding: .2777777778rem;
        position: relative;
        transition: color .35s
    }

    .item-link.svelte-rx6cg:after {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        bottom: 4px;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s, background .35s
    }

    .item-link.selected.is-light.svelte-rx6cg,
    .item-link:hover.is-light.svelte-rx6cg {
        color: var(--black)
    }

    .item-link.selected.is-light.svelte-rx6cg:after,
    .item-link:hover.is-light.svelte-rx6cg:after {
        background: var(--white);
        transform: scaleX(1)
    }

    .item-link.selected.is-dark.svelte-rx6cg,
    .item-link:hover.is-dark.svelte-rx6cg {
        color: var(--white)
    }

    .item-link.selected.is-dark.svelte-rx6cg:after,
    .item-link:hover.is-dark.svelte-rx6cg:after {
        background: var(--black);
        transform: scaleX(1)
    }
}

.container.svelte-j5jlpf {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1.25rem;
    text-decoration: none
}

@media (hover: hover) {
    .container.svelte-j5jlpf:hover .bracket-left {
        transform: translate(-.1666666667rem)
    }

    .container.svelte-j5jlpf:hover .bracket-right {
        transform: translate(.1666666667rem)
    }
}

@media screen and (min-width: 48em) {
    .container.svelte-j5jlpf {
        margin-left: 3.4444444444rem;
        margin-top: calc(.1666666667rem * -1)
    }
}

@media screen and (min-width: 80em) {
    .container.svelte-j5jlpf {
        margin-left: 5.4444444444rem;
        margin-top: 0
    }
}

.copy.svelte-j5jlpf {
    display: inline-block;
    margin-left: .8888888889rem;
    overflow: hidden;
    vertical-align: middle
}

.copy.is-light.svelte-j5jlpf {
    color: var(--white)
}

.copy.is-dark.svelte-j5jlpf {
    color: var(--black)
}

.action-button.svelte-j5jlpf {
    display: inline-block;
    overflow: hidden
}

.action-button-item.svelte-j5jlpf {
    display: none
}

.action-button-item.visible.svelte-j5jlpf {
    display: block
}

.inner.svelte-j5jlpf {
    position: relative;
    transform: translate(-100%);
    display: inline-block;
    transition: transform 0s 0s
}

.inner.visible.svelte-j5jlpf {
    transform: translate(0);
    transition: transform .55s .1s
}

.root.svelte-78wav {
    pointer-events: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1.25rem;
    text-decoration: none
}

.root.active.svelte-78wav {
    pointer-events: all
}

@media screen and (min-width: 48em) {
    .root.svelte-78wav {
        margin-left: 3.4444444444rem;
        margin-top: calc(.2222222222rem * -1)
    }
}

@media screen and (min-width: 80em) {
    .root.svelte-78wav {
        margin-left: 5.4444444444rem
    }
}

.breadCrumbs-item.svelte-78wav,
.action-button.svelte-78wav {
    display: inline-block;
    overflow: hidden
}

.button.svelte-78wav,
.action-button-item.svelte-78wav {
    position: relative;
    transform: translate(-100%);
    display: inline-block;
    transition: transform .55s 0s
}

.button.visible.svelte-78wav,
.action-button-item.visible.svelte-78wav {
    transform: translate(0);
    transition: transform .55s .1s
}

.action-button-item.svelte-78wav {
    padding-inline: .5555555556rem
}

.slash.svelte-78wav {
    margin-inline: .2777777778rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .55s, opacity 0s .55s
}

.slash.visible.svelte-78wav {
    visibility: visible;
    opacity: 1
}

.slash.is-light.svelte-78wav {
    color: var(--white)
}

.slash.is-dark.svelte-78wav {
    color: var(--black)
}

header.svelte-16uvkd6 {
    position: fixed;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "logo logo logo toggle" "startup startup startup startup" "menu menu menu menu" "language language social social";
    grid-template-rows: auto 1fr auto;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.1875rem var(--header-padding) 2.5rem;
    z-index: 10;
    display: grid;
    /* visibility: hidden; */
    pointer-events: none;
    font-size: .8888888889rem;
    z-index: 20
}

header.visible.svelte-16uvkd6 {
    visibility: visible
}

@media screen and (min-width: 48em) {
    header.svelte-16uvkd6 {
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: "logo logo logo logo language language social social social menu menu menu";
        padding: 1.7777777778rem var(--header-padding) 0
    }
}

@media screen and (min-width: 64em) {
    header.svelte-16uvkd6 {
        grid-template-areas: "logo logo logo logo logo audio audio language social social menu menu"
    }
}

@media screen and (min-width: 80em) {
    header.svelte-16uvkd6 {
        grid-template-areas: "logo logo logo logo logo . . language social social menu menu"
    }
}

.overlay.svelte-16uvkd6 {
    position: fixed;
    height: calc(var(--vh, 1vh) * 100);
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    background: var(--black);
    opacity: 0;
    visibility: hidden;
    transition: visibility .55s, opacity .55s;
    pointer-events: none
}

.overlay.active.svelte-16uvkd6 {
    opacity: 1;
    visibility: visible
}

.gradient.svelte-16uvkd6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--background);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    border: 0
}

.gradient.is-visible.svelte-16uvkd6 {
    transition: opacity .55s;
    opacity: 1;
    pointer-events: all;
    cursor: pointer
}

.start-up.svelte-16uvkd6 {
    position: relative;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: visibility .55s, opacity .55s;
    color: var(--white);
    width: 100%;
    display: block;
    grid-area: startup;
    margin-top: 1.6666666667rem;
    pointer-events: all
}

.start-up.visible.svelte-16uvkd6 {
    opacity: 1;
    visibility: visible
}

@media screen and (min-width: 48em) {
    .start-up.svelte-16uvkd6 {
        display: none
    }
}

.logo.svelte-16uvkd6 {
    grid-area: logo;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-areas: "logo cta";
    grid-template-columns: auto 1fr
}

.logoType.svelte-16uvkd6,
.back.svelte-16uvkd6 {
    display: inline-block;
    vertical-align: middle
}

@media screen and (min-width: 48em) {

    .logoType.svelte-16uvkd6,
    .back.svelte-16uvkd6 {
        height: 1rem
    }
}

@media screen and (min-width: 80em) {

    .logoType.svelte-16uvkd6,
    .back.svelte-16uvkd6 {
        height: 1.3333333333rem
    }
}

.logoType.svelte-16uvkd6 {
    pointer-events: all;
    grid-area: logo
}

.back.svelte-16uvkd6,
.breadCrumbs.svelte-16uvkd6 {
    grid-area: cta
}

.back.svelte-16uvkd6 {
    pointer-events: none
}

.back.svelte-16uvkd6>.container {
    display: flex;
    align-items: center
}

.back.visible.svelte-16uvkd6 {
    pointer-events: all
}

@media screen and (max-width: 47.99em) {
    .back.svelte-16uvkd6 {
        opacity: 0;
        visibility: hidden;
        transition: opacity .55s, visibility .55s
    }

    .back.visible.svelte-16uvkd6 {
        opacity: 1;
        visibility: visible
    }
}

.breadCrumbs.svelte-16uvkd6 {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s, visibility .55s
}

.breadCrumbs.visible.svelte-16uvkd6 {
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

.language.svelte-16uvkd6 {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: visibility .55s, opacity .55s;
    pointer-events: all
}

@media screen and (max-width: 47.99em) {
    .language.svelte-16uvkd6 {
        position: fixed;
        bottom: 2.5rem;
        left: var(--header-padding)
    }
}

@media screen and (min-width: 48em) {
    .language.svelte-16uvkd6 {
        justify-self: end;
        grid-area: language
    }
}

.language.visible.svelte-16uvkd6 {
    opacity: 1;
    visibility: visible
}

.social.svelte-16uvkd6 {
    opacity: 0;
    visibility: hidden;
    transition: visibility .55s, opacity .55s;
    pointer-events: all
}

@media screen and (max-width: 47.99em) {
    .social.svelte-16uvkd6 {
        position: fixed;
        bottom: 2.5rem;
        right: var(--header-padding)
    }
}

@media screen and (min-width: 48em) {
    .social.svelte-16uvkd6 {
        grid-area: social;
        z-index: 2;
        justify-self: end
    }
}

.social.visible.svelte-16uvkd6 {
    opacity: 1;
    visibility: visible
}

.toggle.svelte-16uvkd6 {
    grid-area: toggle;
    justify-self: end;
    text-align: right;
    z-index: 2;
    pointer-events: all
}

@media screen and (min-width: 48em) {
    .toggle.svelte-16uvkd6 {
        opacity: 0;
        visibility: hidden;
        transition: visibility .55s, opacity .55s;
        grid-area: menu;
        pointer-events: all
    }

    .toggle.is-visible.svelte-16uvkd6 {
        opacity: 1;
        visibility: visible
    }

    .toggle.hidden.svelte-16uvkd6 {
        opacity: 0;
        pointer-events: none;
        visibility: hidden
    }
}

.menu.svelte-16uvkd6 {
    opacity: 0;
    /* visibility: hidden; */
    pointer-events: none
}

@media screen and (max-width: 47.99em) {
    .menu.svelte-16uvkd6 {
        position: fixed;
        top: 2vh;
        /* left: var(--header-padding); */
        right: var(--header-padding);
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: center; */
        /* height: calc(var(--vh, 1vh) * 100) */
    }
}

@media screen and (min-width: 48em) {
    .menu.svelte-16uvkd6 {
        grid-area: menu;
        justify-self: end;
        text-align: right;
        position: relative;
        width: 100%
    }
}

ul.svelte-1f3nees {
    list-style-type: none;
    margin: 0;
    padding: 0
}

@media screen and (min-width: 80em) {
    ul.svelte-1f3nees {
        display: flex;
        justify-content: space-between;
        margin-bottom: 7.7777777778rem
    }
}

.item-link.svelte-1f3nees {
    display: block;
    margin-bottom: 1rem
}

@media screen and (min-width: 48em) {
    .item-link.svelte-1f3nees {
        padding: .4444444444rem;
        position: relative;
        transition: color .35s;
        margin-bottom: 2.2222222222rem
    }

    .item-link.svelte-1f3nees:after {
        content: "";
        position: absolute;
        top: .2777777778rem;
        left: 0;
        right: 0;
        bottom: .2777777778rem;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s, background .35s
    }
}

@media screen and (min-width: 80em) {
    .item-link.svelte-1f3nees {
        margin-bottom: 0
    }
}

footer.svelte-cewkcv.svelte-cewkcv {
    display: grid;
    grid-template-areas: "title menu" "title service";
    grid-template-columns: auto 1fr
}

@media screen and (min-width: 48em) {
    footer.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 1.5555555556rem
    }
}

@media screen and (min-width: 80em) {
    footer.svelte-cewkcv.svelte-cewkcv {
        display: block
    }
}

.title.svelte-cewkcv.svelte-cewkcv {
    grid-area: title;
    font-size: 30.1333333333vw;
    position: relative;
    white-space: nowrap;
    writing-mode: vertical-rl;
    rotate: 180deg;
    line-height: 1;
    text-align: center;
    max-width: none;
    margin: 0
}

@media screen and (min-width: 48em) {
    .title.svelte-cewkcv.svelte-cewkcv {
        font-size: 25vw
    }
}

@media screen and (min-width: 80em) {
    .title.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 2.4444444444rem;
        font-size: 18.75vw;
        writing-mode: horizontal-tb;
        rotate: 0deg
    }
}

.title.svelte-cewkcv a.svelte-cewkcv {
    text-decoration: none
}

@media (hover: hover) {
    .title.svelte-cewkcv:hover .title-mask.svelte-cewkcv {
        transform: scale(1)
    }
}

.title-mask.svelte-cewkcv.svelte-cewkcv {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--grid-gap);
    right: var(--grid-gap);
    background: var(--white);
    mix-blend-mode: difference;
    pointer-events: none;
    display: none;
    transition: transform .55s
}

@media screen and (min-width: 48em) {
    .title-mask.svelte-cewkcv.svelte-cewkcv {
        display: block;
        transform-origin: top;
        transform: scaleY(0)
    }
}

@media screen and (min-width: 80em) {
    .title-mask.svelte-cewkcv.svelte-cewkcv {
        transform: scaleX(0);
        transform-origin: right
    }
}

.title-mask--top.svelte-cewkcv.svelte-cewkcv {
    mix-blend-mode: multiply
}

.title-mask--top.is-light.svelte-cewkcv.svelte-cewkcv {
    display: none
}

.title-mask--bottom.svelte-cewkcv.svelte-cewkcv {
    mix-blend-mode: difference
}

.secondary-menu.svelte-cewkcv.svelte-cewkcv {
    grid-area: menu;
    text-align: right
}

@media screen and (max-width: 79.99em) {
    .secondary-menu.svelte-cewkcv.svelte-cewkcv {
        margin: 0
    }
}

@media screen and (min-width: 80em) {
    .secondary-menu.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 7.7777777778rem
    }
}

.service-menu.svelte-cewkcv.svelte-cewkcv {
    grid-area: service;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right" "center";
    text-align: right
}

@media screen and (max-width: 79.99em) {
    .service-menu.svelte-cewkcv.svelte-cewkcv {
        margin: 0;
        align-self: end;
        padding-bottom: var(--grid-gap)
    }
}

@media screen and (min-width: 80em) {
    .service-menu.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 1.3333333333rem;
        max-width: none;
        grid-template-columns: 16.6666666667rem 1fr 16.6666666667rem;
        grid-template-areas: "left center right";
        text-align: left
    }
}

.service-menu-left.svelte-cewkcv.svelte-cewkcv {
    grid-area: left
}

@media screen and (min-width: 80em) {
    .service-menu-left.svelte-cewkcv .service-menu-link.svelte-cewkcv:nth-of-type(1) {
        margin-right: 1.1111111111rem
    }
}

.service-menu-center.svelte-cewkcv.svelte-cewkcv {
    grid-area: center;
    text-align: right
}

@media screen and (min-width: 80em) {
    .service-menu-center.svelte-cewkcv.svelte-cewkcv {
        text-align: center
    }
}

.service-menu-right.svelte-cewkcv.svelte-cewkcv {
    grid-area: right;
    margin-bottom: 2.5rem
}

@media screen and (min-width: 48em) {
    .service-menu-right.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 2.2222222222rem
    }
}

@media screen and (min-width: 80em) {
    .service-menu-right.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: 0;
        text-align: right
    }
}

.service-menu-link.svelte-cewkcv.svelte-cewkcv {
    display: block;
    margin-bottom: 1rem
}

@media screen and (min-width: 48em) {
    .service-menu-link.svelte-cewkcv.svelte-cewkcv {
        margin-bottom: .8888888889rem
    }
}

@media screen and (min-width: 80em) {
    .service-menu-link.svelte-cewkcv.svelte-cewkcv {
        display: inline-block
    }
}

div.svelte-wrqgqw {
    grid-area: transition;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: center 50vh
}

.root.svelte-1o5v2rs {
    position: fixed;
    top: 0;
    left: 0;
    height: .2222222222rem;
    width: 100%;
    z-index: 100
}

.bar.svelte-1o5v2rs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--play-l-blue-20);
    transform: scaleX(var(--progress));
    transform-origin: left
}

.bar.use-transition.svelte-1o5v2rs {
    transition: transform .35s
}

.play-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    max-width: 100%;
    margin: auto;
    padding-inline: var(--grid-gap);
    --col-width: calc(((100vw / 4) - (var(--grid-gap) / 4)));
    --grid-gap: 1rem;
    --scrollbar-width: 20px
}

@media screen and (min-width: 48em) {
    .play-grid {
        max-width: min(42.6666666667rem, 100vw - var(--scrollbar-width));
        --grid-gap: .8888888889rem;
        --col-width: calc(((min(42.6666666667rem, 100vw - var(--scrollbar-width)) / 8) - (var(--grid-gap) / 8)) - .05px)
    }
}

@media screen and (min-width: 80em) {
    .play-grid {
        max-width: min(71.1111111111rem, 100vw - var(--scrollbar-width));
        --grid-gap: 1.3333333333rem;
        --col-width: calc(((min(71.1111111111rem, 100vw - var(--scrollbar-width)) / 10) - (var(--grid-gap) / 10)) - .05px)
    }
}

@media screen and (min-width: 48em) {
    .play-grid {
        grid-template-columns: repeat(8, 1fr)
    }
}

@media screen and (min-width: 80em) {
    .play-grid {
        grid-template-columns: repeat(10, 1fr)
    }
}

.play-container {
    max-width: 100%;
    margin: auto;
    padding-inline: var(--grid-gap);
    --col-width: calc(((100vw / 4) - (var(--grid-gap) / 4)));
    --grid-gap: 1rem;
    --scrollbar-width: 20px
}

@media screen and (min-width: 48em) {
    .play-container {
        max-width: min(42.6666666667rem, 100vw - var(--scrollbar-width));
        --grid-gap: .8888888889rem;
        --col-width: calc(((min(42.6666666667rem, 100vw - var(--scrollbar-width)) / 8) - (var(--grid-gap) / 8)) - .05px)
    }
}

@media screen and (min-width: 80em) {
    .play-container {
        max-width: min(71.1111111111rem, 100vw - var(--scrollbar-width));
        --grid-gap: 1.3333333333rem;
        --col-width: calc(((min(71.1111111111rem, 100vw - var(--scrollbar-width)) / 10) - (var(--grid-gap) / 10)) - .05px)
    }
}

.has-cursor:after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% + .1111111111rem);
    width: .2777777778em;
    height: 100%
}

.use-blink:after {
    animation: svelte-1iwfd3g-blink .2s linear 3
}

@keyframes svelte-1iwfd3g-blink {
    0% {
        opacity: 1
    }

    49% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

body {
    background: var(--revsas-bg);
    transition: background 1s cubic-bezier(.5, 1, .89, 1)
}

.from-xl {
    display: none
}

@media screen and (min-width: 80em) {
    .from-xl {
        display: block
    }
}

.until-xl {
    display: block
}

@media screen and (min-width: 80em) {
    .until-xl {
        display: none
    }
}

.from-lg {
    display: none
}

@media screen and (min-width: 64em) {
    .from-lg {
        display: block
    }
}

.until-lg {
    display: block
}

@media screen and (min-width: 80em) {
    .until-lg {
        display: none
    }
}

.from-md {
    display: none
}

@media screen and (min-width: 48em) {
    .from-md {
        display: block
    }
}

.until-md {
    display: block
}

@media screen and (min-width: 48em) {
    .until-md {
        display: none
    }
}

.from-xs {
    display: none
}

@media screen and (min-width: 26.25em) {
    .from-xs {
        display: block
    }
}

.until-xs {
    display: block
}

@media screen and (min-width: 26.25em) {
    .until-xs {
        display: none
    }
}

:root {
    --white: #fff;
    --black: #000;
    --revsas-bg: #e6e6dd;
    --play-white: #ececec;
    --play-blue: #1f42e3;
    --play-black-90: #282828;
    --play-black-80: #3e3e3e;
    --play-black-70: #535353;
    --play-black-60: #696969;
    --play-black-50: #7f7f7f;
    --play-white-60: #959595;
    --play-white-70: #ababab;
    --play-white-80: #c0c0c0;
    --play-white-90: #d6d6d6;
    --play-l-blue-90: #e9ecfc;
    --play-l-blue-80: #d2d9f9;
    --play-l-blue-70: #bcc6f7;
    --play-l-blue-60: #a5b3f4;
    --play-l-blue-50: #8fa0f1;
    --play-l-blue-40: #798eee;
    --play-l-blue-30: #627beb;
    --play-l-blue-20: #4c68e9;
    --play-l-blue-10: #3555e6;
    --play-d-blue-10: #1c3bcc;
    --play-d-blue-20: #1935b6;
    --play-d-blue-30: #162e9f;
    --play-d-blue-40: #132888;
    --play-d-blue-50: #102171;
    --play-d-blue-60: #0c1a5b;
    --play-d-blue-70: #091444;
    --play-d-blue-80: #060d2d;
    --play-d-blue-90: #030717;
    --red: #ff002e;
    --green: #17ca69;
    --red-on-black: #ff5c79;
    --red-on-white: #d50026;
    --green-on-black: #17ca69;
    --green-on-white: #00883e;
    --grid-gutter: 1rem;
    --header-padding: 1rem
}

@media screen and (min-width: .0625em) {
    :root {
        font-size: 16px
    }
}

@media screen and (min-width: 48em) {
    :root {
        font-size: 18px
    }
}

@media screen and (min-width: 100em) {
    :root {
        font-size: 1.125vw
    }
}

@media screen and (min-width: 120em) {
    :root {
        font-size: 21.5px
    }
}

@media screen and (min-width: 48em) {
    :root {
        --grid-gutter: 1.3333333333rem;
        --header-padding: 1.7777777778rem
    }
}

main.svelte-1iwfd3g {
    line-height: 1.4444444444em
}

.transition-container.svelte-1iwfd3g {
    grid-template-areas: "transition";
    min-height: 100vh;
    width: 100%;
    display: grid;
    position: relative
}

.cursor::after {
    content: '|';
    font-weight:bolder;
    animation: blink 0.5s steps(1) infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  .revsas-logo{
    width: auto;
    height: 40px;
    position: absolute;
  }

  .expanded-menu {
    transition: opacity 0.5s;
    transition: clip-path 1s ease-in-out;
    clip-path: inset(0 0 0% 0);
  }

  #logo1 {
    z-index: 2;
    transition: clip-path 1s ease-in-out;
    clip-path: inset(0 0% 0 0);
  }
  
  /* Logo2 (New Logo) */
  #logo2 {
    z-index: 1;
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease-in-out;
  }
  
  /* Scrolled State: Erase Logo1 from the Right */
  .scrolled #logo1 {
    clip-path: inset(0 100% 0 0);
  }

  /* Make Logo2 Visible After Logo1 is Erased */
.logo1-erased #logo2 {
    opacity: 1;
  }