* {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
    font-family: "Lexend Deca",sans-serif;
    font-optical-sizing: auto;
    -webkit-tap-highlight-color: transparent
}

::-webkit-scrollbar {
    width: 6px;
    background: transparent
}

::-webkit-scrollbar-track {
    background: var(--background-50)
}

::-webkit-scrollbar-thumb {
    background: var(--background-950-50);
    border-radius: 5px
}

::-webkit-scrollbar-corner {
    background: transparent
}

::-webkit-scrollbar-track-piece {
    background: var(--background-50)
}

::-webkit-scrollbar-button {
    display: none
}

:root {
    --side-margins: 1rem;
    --modal-shadow: 0 0 30px var(--background-950-30)
}

:root[data-theme="dark"],:root[theme="dark"] {
    --switch-track-unchecked: var(--accent-200);
    --switch-track-checked: var(--accent-600);
    --switch-toggle-border: var(--accent-700);
    --switch-toggle-checked: var(--accent-900);
    --custom-color-success: #28a745;
    --custom-color-error: #dc3545
}

:root[data-theme="light"],:root[theme="light"] {
    --switch-track-unchecked: var(--accent-200);
    --switch-track-checked: var(--accent-300);
    --switch-toggle-border: var(--accent-800);
    --switch-toggle-checked: var(--accent-800);
    --custom-color-success: #28a745;
    --custom-color-error: #dc3545
}

button {
    cursor: pointer !important
}

body {
    padding: 0;
    margin: 0;
    width: 100dvw;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Roboto",sans-serif;
    background-color: var(--background-50);
    color: var(--text-950)
}

.material-symbols-rounded {
    font-variation-settings: "FILL" 0,"wght" 300,"GRAD" -25,"opsz" 24
}

.disable-scroll {
    overflow: hidden !important
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.toolbar {
    position: sticky;
    top: 0;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    padding: .5rem var(--side-margins);
    --toolbar-bottom-border-color: transparent;
    background: transparent;
    border-bottom: 1px solid var(--toolbar-bottom-border-color);
    backdrop-filter: blur(var(--toolbar-backdrop-blur-amount));
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 100
}

.toolbar-holder {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center
}

.toolbar-logo {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease
}

.toolbar-logo:hover {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 4px 8px var(--background-950-30))
}

.toolbar-logo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    transition: all .3s ease
}

.toolbar-title {
    font-size: 1.25rem;
    flex: 1;
    padding: 0;
    margin: 0;
    font-weight: 300;
    margin-left: .5rem
}

.toolbar-title>a {
    color: var(--text-950);
    text-decoration: none;
    position: relative
}

.toolbar-title>a::after {
    content: "";
    border-radius: 10px;
    position: absolute;
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--text-950);
    bottom: -2px;
    transition: all .5s;
    filter: blur(2px)
}

.toolbar-title>a:hover:after {
    filter: blur(0);
    width: 100%
}

.toolbar-download-button {
    padding: .5rem 1rem;
    border-radius: .5rem;
    border: 0;
    opacity: 0;
    background-color: var(--primary-500);
    color: var(--text-950);
    font-size: .8rem;
    font-weight: 300;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .8rem;
    text-decoration: none;
    margin-right: 1rem;
    pointer-events: none;
    transition: opacity none
}

.toolbar-download-button.visible {
    pointer-events: all
}

.toolbar-download-button:hover {
    background-color: var(--primary-500-80);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px var(--primary-500-30)
}

.toolbar-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    aspect-ratio: 1/1;
    cursor: pointer;
    padding: .25rem;
    transition: all .3s;
    border-radius: 50%
}

.toolbar-menu:hover {
    background-color: var(--background-950-10);
    gap: .2rem
}

.toolbar-menu-line {
    width: 1.4rem;
    height: 2px;
    border-radius: 1000px;
    background-color: var(--text-950)
}

.top-color-view {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    filter: blur(100px) brightness(1.5);
    pointer-events: none
}

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-50);
    color: var(--text-950);
    pointer-events: all;
    z-index: 1000
}

.splash-screen.exit {
    transition: all .5s;
    transform: scale(1.5);
    pointer-events: none;
    filter: blur(4px);
    opacity: 0
}

:root {
    --hue: 223px;
    --bg: hsl(var(--hue),90%,95%);
    --fg: hsl(var(--hue),90%,5%);
    --trans-dur: .3s;
    font-size: calc(16px+(24px - 16px) *(690px - 320px) /(1280px - 320px))
}

.ip {
    width: 128px;
    height: 128px
}

.ip__track {
    stroke: hsl(var(--hue),90%,90%);
    transition: stroke var(--trans-dur)
}

.ip__worm1,.ip__worm2 {
    animation: worm1 1s linear infinite
}

.ip__worm2 {
    animation-name: worm2
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg:hsl(var(--hue),90%,5%);
        --fg: hsl(var(--hue),90%,95%)
    }

    .ip__track {
        stroke: hsl(var(--hue),90%,15%)
    }
}

@keyframes worm1 {
    from {
        stroke-dashoffset: 0
    }

    50% {
        animation-timing-function: steps(1);
        stroke-dashoffset: -358
    }

    50.01% {
        animation-timing-function: linear;
        stroke-dashoffset: 358
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes worm2 {
    from {
        stroke-dashoffset: 358
    }

    50% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: -358
    }
}

.no-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: var(--background-50-90);
    backdrop-filter: blur(4px);
    padding: 3rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.fragments {
    animation: _fragmentsInAnimation 2s ease-in-out
}

@keyframes _fragmentsInAnimation {
    from {
        opacity: 0;
        transform: translateY(-3rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.home-fragment {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8rem
}

.home-header-text {
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    padding: .5rem 0;
    animation: _homeHeaderInAnimation 2s ease-in-out;
    word-break: break-all;
    word-wrap: break-word
}

@keyframes _homeHeaderInAnimation {
    from {
        opacity: 0;
        transform: translateY(-3rem);
        filter: blur(24px);
        letter-spacing: .5rem
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: normal
    }
}

.home-subheader-text-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.home-subheader-text {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    color: var(--text-950-50)
}

.typed-cursor-line {
    margin-left: 4px;
    display: inline-block;
    width: 2px;
    height: 1.5rem;
    border-radius: 100px;
    background-color: var(--text-800)
}

.home-download-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem
}

.home-download-button {
    padding: .8rem 2rem;
    border-radius: .5rem;
    border: 0;
    background-color: var(--primary-500);
    color: var(--text-950);
    font-size: 1.2rem;
    font-weight: 300;
    cursor: pointer;
    transition: all .3s
}

.home-download-button:hover {
    transform: translateY(-0.3rem) scale(1.02);
    box-shadow: 0 15px 40px 2px var(--primary-500-80);
    background-color: var(--primary-400)
}

.home-features-button {
    padding: .8rem 2rem;
    border-radius: .5rem;
    border: 0;
    background-color: var(--secondary-100);
    color: var(--text-950);
    font-size: 1.2rem;
    font-weight: 300;
    cursor: pointer;
    transition: all .3s;
    border: 2px solid transparent
}

.home-features-button:hover {
    transform: translateY(-0.3rem) scale(1.02);
    box-shadow: 0 15px 35px 2px var(--secondary-100-80);
    background-color: var(--secondary-50);
    border-color: var(--accent-400)
}

.home-feature-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 var(--side-margins);
    margin-top: 2rem
}

.home-feature-tags>span {
    background-color: var(--accent-200-20);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: 4px;
    transition: all .3s ease;
    cursor: pointer;
    border: 1px solid transparent
}

.home-feature-tags>span:hover {
    background-color: var(--accent-200-40);
    transform: translateY(-2px) scale(1.05);
    border-color: var(--accent-400-50);
    box-shadow: 0 4px 12px var(--accent-200-30)
}

.home-feature-tags>span>.material-symbols-rounded {
    font-size: 1rem
}

.home-arrow-down {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3rem;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0;
    animation: none;
    transition: font-size .3s,opacity .5s ease
}

.home-arrow-down.visible {
    opacity: 1;
    animation: _homeArrowDownAnimation 1s ease-in-out alternate infinite
}

.home-arrow-down:hover {
    font-size: 2.6rem;
    animation-play-state: paused;
    color: var(--accent-600);
    text-shadow: 0 4px 15px var(--accent-500-40);
    transform: translateX(-50%) translateY(-3px)
}

@keyframes _homeArrowDownAnimation {
    from {
        transform: translateX(-50%) translateY(0)
    }

    to {
        transform: translateX(-50%) translateY(0.5rem)
    }
}

.features-grid-view {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 30vh;
    background-size: 40px 40px;
    background-image: radial-gradient(circle,var(--background-950-50) 1px,rgba(0,0,0,0) 1px)
}

.features-fragment {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.features-header {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    padding: .5rem 0;
    word-break: break-all;
    word-wrap: break-word;
    margin-top: 16vh;
    margin-bottom: 6rem;
    text-shadow: 0 0 10px var(--background-950-20);
    transition: text-shadow 1s
}

.features-header:hover {
    text-shadow: 0 0 20px var(--background-950)
}

.features-fragment,.faqs-fragment,.about-fragment {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.download-fragment {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeInUpDownloadFragment 1.2s ease-in-out forwards
}

@keyframes fadeInUpDownloadFragment {
    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0)
    }
}

.about-socials {
    background-color: var(--background-100-30);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid var(--background-200-50);
    margin-top: 3rem
}

.about-socials h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--accent-500);
    text-align: center
}

.socials-description {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 700px;
    color: var(--text-950-80);
    line-height: 1.6
}

.socials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.5rem
}

.social-card {
    display: flex;
    align-items: center;
    background-color: var(--background-200-30);
    padding: 1.5rem;
    border-radius: .8rem;
    text-decoration: none;
    color: var(--text-950);
    border: 1px solid transparent;
    transition: all .3s ease;
    position: relative;
    overflow: hidden
}

.social-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,var(--accent-500-20),transparent);
    opacity: 0;
    transition: opacity .3s ease
}

.social-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-500-50);
    box-shadow: 0 10px 25px -5px var(--background-950-30)
}

.social-card:hover::before {
    opacity: 1
}

.social-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--accent-500-20);
    border-radius: 12px;
    margin-right: 1.2rem;
    flex-shrink: 0;
    transition: all .3s ease
}

.social-card:hover .social-icon-large {
    background-color: var(--accent-500-40);
    transform: scale(1.1)
}

.social-icon-large .material-symbols-rounded {
    font-size: 1.8rem;
    color: var(--accent-500)
}

.social-icon-large svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--accent-500);
    transition: all .3s ease
}

.social-card:hover .social-icon-large svg {
    color: var(--accent-600);
    transform: scale(1.1)
}

.social-info {
    flex: 1
}

.social-info h4 {
    margin: 0;
    margin-bottom: .3rem;
    font-weight: 600;
    font-size: 1.1rem
}

.social-info p {
    margin: 0;
    font-size: .9rem;
    color: var(--text-950-70)
}

.social-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    transform: translateX(-10px);
    transition: all .3s ease
}

.social-card:hover .social-arrow {
    transform: translateX(0);
    opacity: 1
}

.social-card[data-platform="youtube"] .social-icon-large {
    background-color: rgba(255,0,0,0.15)
}

.social-card[data-platform="youtube"] .social-icon-large svg {
    color: red
}

.social-card[data-platform="discord"] .social-icon-large {
    background-color: rgba(114,137,218,0.15)
}

.social-card[data-platform="discord"] .social-icon-large svg {
    color: #7289da
}

.social-card[data-platform="telegram"] .social-icon-large {
    background-color: rgba(0,136,204,0.15)
}

.social-card[data-platform="telegram"] .social-icon-large svg {
    color: #08c
}

.social-card[data-platform="github"] .social-icon-large {
    background-color: rgba(148,148,148,0.15)
}

.social-card[data-platform="github"] .social-icon-large svg {
    color: #d4d4d4
}

@media screen and (max-width: 600px) {
    .socials-grid {
        grid-template-columns:1fr;
        gap: 1rem
    }

    .social-card {
        padding: 1.2rem
    }

    .social-icon-large {
        width: 40px;
        height: 40px;
        margin-right: 1rem
    }

    .social-icon-large .material-symbols-rounded {
        font-size: 1.5rem
    }

    .social-icon-large svg {
        width: 1.5rem;
        height: 1.5rem
    }
}

.footer {
    width: 100%;
    background-color: var(--background-100);
    color: var(--text-950);
    padding: 3rem 1.5rem 1rem;
    margin-top: 4rem
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem
}

.footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 300px
}

.footer-logo {
    width: 60px;
    height: auto;
    margin-bottom: 1rem
}

.footer-tagline {
    font-size: .9rem
}

.footer-last-update {
    font-size: .85rem;
    opacity: .8
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem
}

.footer-link-column {
    display: flex;
    flex-direction: column;
    min-width: 120px
}

.footer-link-column h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--primary-900)
}

.footer-link-column a {
    color: var(--text-600);
    text-decoration: none;
    margin-bottom: .7rem;
    transition: color .3s ease
}

.footer-link-column a:hover {
    color: var(--primary-800)
}

.footer-social {
    display: flex;
    gap: 1rem
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    background-color: var(--background-200);
    color: var(--text-800);
    transition: all .3s ease
}

.social-icon svg path {
    stroke: var(--text-900)
}

.social-icon:hover {
    background-color: var(--primary-500);
    transform: translateY(-3px)
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--background-800);
    text-align: center;
    font-size: .8rem;
    opacity: .7
}

.footer-bottom p {
    margin-bottom: .5rem
}

@media screen and (max-width: 480px) {
    .home-header-text {
        font-size:3rem
    }

    .home-subheader-text {
        font-size: 1.25rem
    }

    .home-download-button-container {
        flex-direction: column-reverse;
        width: 100%;
        padding: 0 var(--side-margins);
        gap: .5rem
    }

    .home-download-button {
        width: 100%;
        padding: .8rem 1.5rem;
        font-size: 1rem
    }

    .home-features-button {
        width: 100%;
        padding: .8rem 1.5rem;
        font-size: 1rem
    }
}

@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction:column
    }

    .footer-links {
        gap: 2rem
    }
}

.section-header {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    padding: .5rem 0;
    text-align: center;
    margin-top: 0rem;
    margin-bottom: .5rem;
    transition: all .3s ease;
    cursor: default
}

.section-header:hover {
    transform: scale(1.02);
    color: var(--accent-600);
    text-shadow: 0 4px 15px var(--accent-500-20)
}

.section-subheader {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-950-70);
    text-align: center;
    margin-top: 0;
    margin-bottom: 3rem
}

.features-fragment {
    margin-bottom: 3rem
}

.features-container {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
    padding: 2rem var(--side-margins);
    margin: 0 auto
}

.feature-card {
    transition: all .5s !important;
    background-color: var(--background-100-30);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid var(--background-200-50)
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.03) !important;
    box-shadow: 0 20px 40px var(--background-950-35);
    border-color: var(--accent-400-60);
    background-color: var(--background-50-40)
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--accent-500);
    background-color: var(--background-950-20);
    padding: 1rem;
    border-radius: 50%;
    transition: all .3s ease
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background-color: var(--accent-100);
    color: var(--accent-700);
    box-shadow: 0 8px 20px var(--accent-500-30)
}

.feature-card h3 {
    margin-top: .5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-950)
}

.feature-card p {
    margin: 0;
    color: var(--text-950-70);
    font-weight: 300;
    line-height: 1.5
}

.download-fragment {
    display: none;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem;
    position: relative
}

.download-back-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: -3.5rem;
    padding: 1rem;
    font-size: 1rem;
    color: var(--text-950);
    cursor: pointer;
    transition: all .3s ease;
    background: transparent;
    border: 0;
    text-decoration: none
}

.download-back-button>.material-symbols-rounded {
    font-size: 2rem;
    transition: all .3s ease
}

.download-back-button:hover {
    color: var(--text-950-70)
}

.download-back-button:hover>.material-symbols-rounded {
    transform: translateX(-0.2rem)
}

.download-container {
    position: relative;
    max-width: 900px;
    width: 100%;
    padding: 0 var(--side-margins);
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.download-app-selector {
    background-color: var(--background-100-30);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid var(--background-200-50)
}

.download-app-selector h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center
}

.app-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

.app-tab {
    background-color: var(--background-200-30);
    border: 0;
    padding: .8rem 1.5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .2s ease;
    flex: 2
}

.app-tab:hover {
    background-color: var(--background-300-50);
    color: var(--text-950);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 5px 15px var(--background-950-20)
}

.app-tab.active {
    background-color: var(--accent-400);
    flex: 3
}

.app-tab-icon {
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
    border-radius: 6px
}

.app-tab-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-950-70);
    font-weight: 400;
    transition: all .2s ease
}

.app-tab.active>.app-tab-label {
    color: var(--text-950);
    font-weight: 800
}

.download-note {
    color: var(--text-950-50);
    font-size: .9rem;
    text-align: center;
    margin: 0;
    margin-top: 1rem
}

.download-notice {
    text-align: center;
    margin: 0;
    padding: 0
}

.discontinuation-notice {
    color: var(--text-950-50);
    font-size: .9rem;
    text-align: center;
    margin: 0;
    margin-bottom: .5rem
}

.download-items {
    display: flex;
    flex-direction: row;
    gap: .3rem;
    justify-content: center;
    flex-wrap: wrap
}

.download-items>*:first-child {
    min-width: 100%
}

.download-items>*:last-child:nth-child(2),.download-items>*:last-child:nth-child(3) {
    grid-column-start: 2
}

.download-item {
    min-width: 30%;
    flex: 1;
    flex-basis: 200px;
    background: var(--background-200-60);
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    transition: all .3s ease;
    opacity: 0;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    word-wrap: break-word;
    word-break: break-all
}

.download-item {
    animation: fadeInUp .5s ease-out forwards
}

.download-item.disabled {
    opacity: 0;
    filter: opacity(0.5);
    cursor: not-allowed
}

.download-item:hover {
    background: var(--background-300)
}

.download-item>.item-title {
    padding: 0;
    margin: 0
}

.download-item.beta-version {
    justify-content: space-between;
    background: var(--background-200-80)
}

.download-item.beta-version:hover {
    background: var(--background-300-80)
}

.download-item.beta-version>.beta-tag {
    color: var(--accent-800);
    font-weight: bold;
    font-size: .9rem
}

.minecraft-show-beta-container {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .8rem;
    margin: .8rem
}

.minecraft-show-beta-container>.show-beta-label {
    font-size: 1rem;
    text-align: center
}

.minecraft-show-beta-container>.checkbox-wrapper-35 {
    transform: translateY(3px)
}

.minecraft-highlighted-versions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
    padding: 1rem;
    background: var(--background-100-60);
    border-radius: .8rem;
    border: 2px solid var(--accent-400-30);
    opacity: 0;
    transform: translateY(10px);
    animation: highlightedSectionFadeIn .5s ease-out forwards
}

@keyframes highlightedSectionFadeIn {
    0 {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.minecraft-highlighted-versions h3 {
    margin: 0 0 .5rem 0;
    font-size: 1.1rem;
    color: var(--accent-700);
    text-align: center
}

.minecraft-highlighted-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

@media screen and (max-width: 600px) {
    .minecraft-highlighted-grid {
        grid-template-columns:1fr
    }

    .minecraft-highlighted-versions {
        margin: .5rem;
        padding: .8rem
    }

    .minecraft-highlighted-item {
        padding: 1rem
    }

    .minecraft-highlighted-item .item-version {
        font-size: 1.4rem
    }
}

@media screen and (max-width: 480px) {
    .minecraft-highlighted-versions {
        margin:.3rem;
        padding: .6rem
    }

    .minecraft-highlighted-versions h3 {
        font-size: 1rem
    }

    .minecraft-highlighted-item {
        padding: .8rem
    }

    .minecraft-highlighted-item .item-version {
        font-size: 1.2rem
    }

    .minecraft-highlighted-item .item-type {
        font-size: .7rem;
        margin-bottom: .4rem
    }
}

.minecraft-highlighted-item {
    background: var(--background-200-80);
    padding: 1.2rem;
    border-radius: .6rem;
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: highlightedItemFadeIn .6s ease-out forwards
}

@keyframes highlightedItemFadeIn {
    0 {
        opacity: 0;
        transform: translateY(20px) scale(0.95)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.minecraft-highlighted-item:hover {
    background: var(--background-300);
    border-color: var(--accent-500-50);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px var(--background-950-25)
}

.minecraft-highlighted-item.disabled {
    opacity: .6;
    cursor: not-allowed
}

.minecraft-highlighted-item.disabled:hover {
    transform: translateY(0) scale(1);
    border-color: transparent;
    box-shadow: none
}

.minecraft-highlighted-item .item-type {
    font-size: .75rem;
    font-weight: bold;
    color: var(--accent-700);
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .8px
}

.minecraft-highlighted-item .item-version {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-900);
    margin: 0;
    line-height: 1.2;
    text-align: center;
    transition: all .3s ease
}

.minecraft-highlighted-item:hover .item-version {
    transform: scale(1.05);
    text-shadow: 0 2px 8px var(--accent-500-30)
}

.minecraft-highlighted-item.beta-version {
    background: linear-gradient(135deg,var(--background-200-80) 0,var(--accent-100-30) 100%)
}

.minecraft-highlighted-item.beta-version .item-type {
    color: var(--accent-800)
}

.minecraft-highlighted-item.beta-version .item-version {
    color: var(--accent-900)
}

.minecraft-highlighted-item.beta-version:hover .item-version {
    text-shadow: 0 2px 8px var(--accent-600-40)
}

.minecraft-highlighted-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--accent-500),var(--accent-600));
    opacity: 0;
    transition: opacity .3s ease
}

.minecraft-highlighted-item:hover::before {
    opacity: 1
}

.minecraft-variant-dialog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-50-30);
    backdrop-filter: blur(10px) brightness(30%);
    z-index: 103;
    padding: 2rem 0;
    opacity: 1;
    pointer-events: all
}

.minecraft-variant-dialog-container.hidden {
    opacity: 0;
    pointer-events: none !important
}

.minecraft-variant-dialog-container.hidden>.minecraft-variant-dialog-modal {
    opacity: 0;
    pointer-events: none !important
}

.minecraft-variant-dialog-container:not(.hidden)>.minecraft-variant-dialog-modal {
    opacity: 1;
    pointer-events: all;
    animation: fadeInUp .5s cubic-bezier(0.075,0.82,0.165,1) forwards
}

.minecraft-variant-dialog-modal {
    pointer-events: auto !important;
    background-color: var(--background-50);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--modal-shadow);
    border-radius: 1rem;
    padding: 2rem;
    position: relative
}

.minecraft-variant-dialog-modal .dialog-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 .75rem 0;
    text-align: center;
    color: var(--text-950);
    letter-spacing: -0.01em;
    line-height: 1.2
}

.minecraft-variant-dialog-modal .dialog-title>.beta-title-tag {
    float: right;
    font-size: .8rem
}

.minecraft-variant-dialog-modal .dialog-message {
    font-size: 1rem;
    font-weight: 300;
    margin: 0 0 .75rem 0;
    text-align: center;
    color: var(--text-950-70);
    max-width: 90%;
    line-height: 1.5
}

.minecraft-variants-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: .35rem;
    margin-bottom: .25rem
}

.minecraft-variant {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--primary-600);
    color: var(--text-950);
    padding: .5rem 1rem;
    border-radius: .5rem;
    border: 0;
    transition: all .3s ease;
    cursor: pointer
}

.minecraft-variant:hover {
    background: var(--primary-500);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--primary-500-50)
}

.minecraft-variant .variant-label {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: .25rem
}

.minecraft-variant .variant-details {
    font-size: .85rem;
    font-weight: 300;
    opacity: .9
}

.minecraft-variant-info-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: transparent;
    color: var(--text-950-70);
    border: 0;
    padding: .75rem 1rem;
    margin-bottom: .25rem;
    font-size: .9rem;
    border-radius: .5rem;
    transition: all .2s ease
}

.minecraft-variant-info-button:hover {
    color: var(--text-950);
    background-color: var(--background-200-30)
}

.minecraft-variant-info-button .material-symbols-rounded {
    font-size: 1.2rem;
    font-variation-settings: "FILL" 0,"wght" 300,"GRAD" -25,"opsz" 24
}

.minecraft-variant-close-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-200-50);
    color: var(--text-950);
    font-weight: 500;
    padding: .8rem 1rem;
    border-radius: .5rem;
    border: 0;
    transition: all .3s ease;
    cursor: pointer
}

.minecraft-variant-close-button:hover {
    background: var(--background-300)
}

@media screen and (max-width: 480px) {
    .minecraft-variant-dialog-modal {
        padding:1.5rem;
        width: 95%
    }

    .minecraft-variant-dialog-modal .dialog-title {
        font-size: 1.4rem
    }

    .minecraft-variant-dialog-modal .dialog-message {
        font-size: .9rem;
        margin-bottom: 1.5rem
    }

    .app-tabs {
        gap: .5rem
    }

    .app-tab {
        padding: .5rem 1.3rem
    }

    .app-tab-icon {
        width: 36px;
        height: 36px
    }

    .app-tab-label {
        font-size: .8rem
    }
}

.faqs-fragment {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem
}

.faqs-container {
    max-width: 900px;
    width: 100%;
    padding: 0 var(--side-margins);
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.faq-item {
    background-color: var(--background-100-30);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid var(--background-200-50)
}

.faq-item:hover {
    border-color: var(--accent-400-60);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--background-950-20);
    background-color: var(--background-50-40)
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.faq-question h3 {
    margin: 0;
    font-weight: 500;
    font-size: 1.2rem
}

.faq-icon {
    transition: transform .3s ease
}

.faq-item.active .faq-icon {
    transform: rotate(180deg)
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease,padding .5s ease
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 1.5rem
}

.faq-answer p {
    padding: 0 1.5rem 0;
    margin: 0;
    line-height: 1.6;
    color: var(--text-950-80)
}

.faq-video {
    margin: 0 1.5rem;
    margin-top: 0;
    aspect-ratio: 16/9;
    width: 80%;
    max-width: 600px;
    border-radius: 1rem;
    border: 2px solid var(--background-200-50);
    overflow: hidden;
    margin-top: 2rem;
    transition: border-color .3s ease
}

.faq-video:hover {
    border-color: var(--accent-400-50)
}

.about-fragment {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem
}

.about-container {
    max-width: 900px;
    width: 100%;
    padding: 0 var(--side-margins);
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.about-section {
    background-color: var(--background-100-30);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid var(--background-200-50)
}

.about-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--accent-500)
}

.about-section p {
    line-height: 1.8;
    margin: 0;
    color: var(--text-950-80)
}

.about-stats {
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    display: grid;
    gap: 2rem;
    padding: 2rem 0
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: all .3s ease;
    cursor: pointer;
    padding: 1rem;
    border-radius: .8rem;
    border: 2px solid transparent
}

.stat-item:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--accent-400-30);
    background-color: var(--background-100-20);
    box-shadow: 0 8px 25px var(--background-950-15)
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-700);
    transition: all .3s ease
}

.stat-item:hover .stat-number {
    transform: scale(1.1);
    color: var(--accent-600);
    text-shadow: 0 2px 8px var(--accent-500-30)
}

.stat-label {
    font-size: 1rem;
    color: var(--text-950-70)
}

.about-team h3 {
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 500
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 2rem
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation-delay: var(--animation-delay);
    transition: all .3s ease;
    cursor: pointer;
    padding: 1rem;
    border-radius: 1rem;
    border: 2px solid transparent
}

.team-member:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--accent-400-30);
    background-color: var(--background-100-20);
    box-shadow: 0 10px 30px var(--background-950-15)
}

.team-member.enter {
    animation: teamMemberInAnimation 3s cubic-bezier(0.075,0.82,0.165,1) forwards
}

@keyframes teamMemberInAnimation {
    from {
        opacity: 0;
        transform: translateY(1rem);
        filter: blur(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.team-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--accent-400-20);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--accent-500);
    border: 2px solid var(--accent-500-50);
    overflow: hidden;
    transition: all .3s ease
}

.team-member:hover .team-avatar {
    transform: scale(1.1) rotate(3deg);
    border-color: var(--accent-500);
    box-shadow: 0 5px 15px var(--accent-500-30)
}

.team-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.team-member h4 {
    margin: 0 0 .5rem;
    font-weight: 500
}

.team-member p {
    margin: 0;
    color: var(--text-950-50);
    font-size: .9rem
}

.footer-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    overflow: hidden
}

.footer-tags p {
    text-align: center;
    flex-grow: 1;
    font-size: .75rem;
    background: var(--background-200-50);
    padding: .4rem .8rem;
    border-radius: 6px;
    margin: 0
}

.settings-container * {
    transition: all .25s
}

.settings-container.hidden {
    opacity: 0;
    pointer-events: none
}

.settings-container>.settings-modal {
    opacity: 0;
    pointer-events: none
}

.settings-container:not(.hidden)>.settings-modal {
    opacity: 1;
    pointer-events: all;
    animation: fadeInUp .5s cubic-bezier(0.075,0.82,0.165,1) forwards
}

.settings-container {
    transition: all .25s;
    z-index: 104;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    background: var(--background-50-30);
    backdrop-filter: brightness(20%)
}

.settings-modal {
    pointer-events: auto;
    position: relative;
    overflow-y: auto;
    max-width: 600px;
    max-height: 90%;
    width: 100%;
    background: var(--background-50);
    border-radius: 1rem;
    box-shadow: var(--modal-shadow)
}

@media screen and (max-height: 600px) {
    .settings-modal {
        max-height:min(500px,100vh)
    }
}

.settings-modal::-webkit-scrollbar {
    width: 0;
    display: none
}

@media screen and (max-width: 600px) {
    .settings-container {
        padding:0
    }

    .settings-modal {
        height: 100%;
        border-radius: 0;
        max-height: none
    }
}

.settings-header {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 1rem;
    border-bottom: 1px solid var(--background-200-50);
    position: sticky;
    top: 0;
    background: var(--background-50-30);
    backdrop-filter: blur(10px)
}

.settings-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500
}

.settings-close-button {
    background: 0;
    border: 0;
    cursor: pointer;
    padding: .5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.settings-close-button:hover {
    background: var(--background-200-50)
}

.settings-close-button>.material-symbols-rounded {
    color: var(--text-950);
    font-size: 1.5rem
}

.settings-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    box-sizing: border-box
}

.settings-content-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 .8rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
    margin: 0;
    width: 100%;
    font-size: 1.2rem;
    justify-content: center;
    align-items: center
}

.settings-content-subheader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 .8rem;
    padding-top: .5rem;
    padding-bottom: .2rem;
    margin: 0;
    width: 100%;
    font-size: .8rem;
    justify-content: center;
    align-items: start
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem .8rem
}

.settings-item.hidden {
    display: none !important
}

.settings-item:hover {
    background: var(--background-900-10)
}

.settings-item>.item-icon {
    aspect-ratio: 1/1
}

.settings-item>.item-icon>.material-symbols-rounded {
    font-size: 1.5rem;
    color: var(--accent-950)
}

.settings-item>.item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    justify-content: center
}

.settings-item>.item-content>.item-label {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-950);
    padding: 0;
    margin: 0
}

.settings-item>.item-content>.item-description {
    font-size: .8rem;
    color: var(--text-950-60);
    padding: 0;
    margin: 0
}

.settings-item>.item-action>.action-button {
    background: var(--primary-500);
    color: var(--text-950);
    padding: .25rem .75rem;
    border: 0;
    transition: all .5s;
    border-radius: 1rem
}

.settings-item>.item-action>.action-button:hover {
    transform: scale(0.95)
}

.notification {
    pointer-events: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: var(--background-200-50);
    backdrop-filter: blur(6px) brightness(90%);
    border-radius: 1rem;
    display: flex;
    gap: 0rem;
    align-items: center;
    padding: 0rem;
    max-width: 600px;
    border: 1px solid var(--background-300-50);
    animation: _notificationIn .5s cubic-bezier(0.075,0.82,0.165,1) forwards
}

.notification.exit {
    animation: _notificationOut .25s cubic-bezier(0.175,0.885,0.32,1.275) forwards
}

@keyframes _notificationIn {
    from {
        top: 0rem;
        opacity: 0
    }

    to {
        top: 4rem;
        opacity: 1
    }
}

@keyframes _notificationOut {
    from {
        top: 4rem;
        opacity: 1
    }

    to {
        top: 0rem;
        opacity: 0
    }
}

.notification-icon {
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 1rem
}

.notification-icon>span.material-symbols-rounded {
    font-size: 1.5rem;
    color: var(--accent-950)
}

.notification-message {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem;
    padding-left: 0
}

.notification-message>p.notification-title {
    padding: 0;
    margin: 0;
    font-size: .9rem
}

.notification-message>p.notification-text {
    padding: 0;
    margin: 0;
    font-size: .8rem;
    color: var(--text-950-80)
}

@media screen and (max-width: 768px) {
    .section-header {
        font-size:2rem;
        margin-top: 3rem
    }

    .features-container {
        grid-template-columns: 1fr
    }

    .about-stats {
        flex-direction: column;
        gap: 1.5rem
    }

    .team-grid {
        grid-template-columns: repeat(auto-fill,minmax(130px,1fr))
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

.faq-answer {
    transition: max-height .5s ease,padding .5s ease
}

.viewport-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease,transform .6s ease
}

.viewport-animate.visible {
    opacity: 1;
    transform: translateY(0)
}

.checkbox-wrapper-35 .switch {
    display: none
}

.checkbox-wrapper-35 .switch+label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #78768d;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: inline-flex;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: scale(1.4)
}

.checkbox-wrapper-35 .switch+label::before,.checkbox-wrapper-35 .switch+label::after {
    content: "";
    display: block
}

.checkbox-wrapper-35 .switch+label::before {
    background-color: var(--switch-track-unchecked);
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color .125s ease-out;
    transition: background-color .125s ease-out;
    width: 25px
}

.checkbox-wrapper-35 .switch+label::after {
    background-color: transparent;
    border-radius: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 2px solid var(--switch-toggle-border);
    transform: scale(0.8);
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform .125s ease-out;
    transition: -webkit-transform .125s ease-out;
    transition: transform .125s ease-out;
    transition: transform .125s ease-out,-webkit-transform .125s ease-out;
    width: 13px
}

.checkbox-wrapper-35 .switch+label .switch-x-text {
    display: block;
    margin-right: .3em
}

.checkbox-wrapper-35 .switch+label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 25px
}

.checkbox-wrapper-35 .switch+label .switch-x-unchecked,.checkbox-wrapper-35 .switch+label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity .125s ease-out,-webkit-transform .125s ease-out;
    transition: opacity .125s ease-out,-webkit-transform .125s ease-out;
    transition: transform .125s ease-out,opacity .125s ease-out;
    transition: transform .125s ease-out,opacity .125s ease-out,-webkit-transform .125s ease-out
}

.checkbox-wrapper-35 .switch+label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.checkbox-wrapper-35 .switch+label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0)
}

.checkbox-wrapper-35 .switch+label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden
}

.checkbox-wrapper-35 .switch:checked+label::before {
    background-color: var(--switch-track-checked)
}

.checkbox-wrapper-35 .switch:checked+label::after {
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
    border: 0 solid transparent;
    background-color: var(--switch-toggle-checked)
}

.checkbox-wrapper-35 .switch:checked+label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0)
}

.checkbox-wrapper-35 .switch:checked+label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.alert-modal a,.alert-modal a:link {
    color: var(--accent-800,#1976d2);
    transition: color .2s;
    word-break: break-all;
    text-decoration: none
}

.alert-modal a:visited {
    color: var(--accent-500,#512da8)
}

.alert-modal a:hover,.alert-modal a:focus {
    color: var(--primary-700,#0d47a1);
    text-decoration: underline;
    filter: brightness(1.2);
    text-decoration: underline
}

.alert-modal a:active {
    color: var(--primary-700,#0d47a1)
}

.hidden-feature {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s ease
}

.hidden-feature.active {
    display: flex;
    opacity: 1
}

#secret-canvas-container {
    flex-direction: column
}

#pixel-canvas {
    background-color: #fff;
    border: 2px solid var(--primary-500);
    margin-bottom: 1rem;
    cursor: crosshair;
    box-shadow: 0 0 30px rgba(0,0,0,0.3)
}

.canvas-controls {
    display: flex;
    gap: 1rem;
    align-items: center
}

.color-picker {
    display: flex;
    gap: .5rem
}

.color-dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .2s
}

.color-dot:nth-child(1) {
    background-color: #ff5252
}

.color-dot:nth-child(2) {
    background-color: #2196f3
}

.color-dot:nth-child(3) {
    background-color: #4caf50
}

.color-dot:nth-child(4) {
    background-color: #ffeb3b
}

.color-dot:nth-child(5) {
    background-color: #9c27b0
}

.color-dot.active {
    transform: scale(1.3);
    box-shadow: 0 0 10px currentColor
}

.canvas-controls button {
    background-color: var(--primary-600);
    color: white;
    border: 0;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold
}

.secret-content {
    background-color: var(--background-100);
    padding: 2rem;
    border-radius: 10px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3)
}

.secret-content h3 {
    color: var(--primary-500);
    margin-top: 0
}

.secret-content ul {
    text-align: left;
    margin: 1.5rem 0
}

.secret-content li {
    margin-bottom: .5rem
}

.secret-content kbd {
    background-color: var(--background-200);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: .9em
}

#close-secret {
    background-color: var(--primary-600);
    color: white;
    border: 0;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold
}

.theme-options {
    background-color: var(--background-100);
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    text-align: center
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
    margin: 1.5rem 0
}

.theme-option {
    padding: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all .2s ease
}

.theme-option[data-theme="hacker"] {
    background-color: #0d0208;
    color: #3f8b1e;
    border: 2px solid #3f8b1e
}

.theme-option[data-theme="retro"] {
    background-color: #533483;
    color: #e94560;
    border: 2px solid #e94560
}

.theme-option[data-theme="neon"] {
    background-color: #2d033b;
    color: #00f5ff;
    border: 2px solid #00f5ff;
    text-shadow: 0 0 5px #00f5ff
}

.theme-option[data-theme="dark"] {
    background-color: #121212;
    color: #fff;
    border: 2px solid #666
}

.theme-option:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(var(--primary-600-rgb),0.5)
}

#close-themes {
    background-color: var(--primary-600);
    color: white;
    border: 0;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold
}

@keyframes pop {
    0 {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shake {
    0,100% {
        transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        transform: translateX(-5px)
    }

    20%,40%,60%,80% {
        transform: translateX(5px)
    }
}

.pop-animation {
    animation: pop .3s ease
}

.shake-animation {
    animation: shake .5s ease
}

html[data-theme="hacker"] {
    --background-50: #0d0208;
    --background-100: #0d1b2a;
    --background-200: #142d4c;
    --text-950: #3f8b1e;
    --text-900: #3f8b1e;
    --text-800: #4bb543;
    --primary-600: #3f8b1e;
    --primary-500: #4bb543;
    font-family: "Courier New",monospace !important
}

html[data-theme="retro"] {
    --background-50: #533483;
    --background-100: #533483;
    --background-200: #393e46;
    --text-950: #e94560;
    --text-900: #e94560;
    --text-800: #e94560;
    --primary-600: #e94560;
    --primary-500: #e94560;
    font-family: "Press Start 2P","Courier New",monospace !important
}

html[data-theme="neon"] {
    --background-50: #2d033b;
    --background-100: #3f0071;
    --background-200: #610094;
    --text-950: #00f5ff;
    --text-900: #00f5ff;
    --text-800: #00f5ff;
    --primary-600: #00f5ff;
    --primary-500: #f806cc;
    --accent-600: #f806cc
}

html[data-theme="light"] {
    --switch-track-unchecked: var(--accent-200);
    --switch-track-checked: var(--accent-700);
    --switch-toggle-border: var(--accent-800);
    --switch-toggle-checked: var(--accent-950)
}

html[data-theme="dark"] {
    --switch-track-unchecked: var(--accent-300);
    --switch-track-checked: var(--accent-600);
    --switch-toggle-border: var(--accent-700);
    --switch-toggle-checked: var(--accent-900)
}

.alert-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    background-color: var(--background-50-90);
    backdrop-filter: blur(4px)
}

.alert-modal {
    max-width: 500px;
    width: 100%;
    background-color: var(--background-50);
    border-radius: 1rem;
    box-shadow: var(--modal-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
    opacity: 0;
    transform: scale(0.9)
}

.alert-modal.show {
    opacity: 1;
    transform: scale(1)
}

.alert-icon {
    align-self: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--accent-500)
}

.alert-title {
    font-weight: 600;
    font-size: 1.35rem;
    margin: 0;
    margin-bottom: 1rem
}

.alert-message-layout {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 1.5rem
}

.alert-message {
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
    color: var(--text-950-80)
}

.alert-button-layout {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap
}

.alert-button {
    padding: .7rem 1.2rem;
    border-radius: .5rem;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

.alert-positive-button {
    background-color: var(--primary-500);
    color: var(--text-950)
}

.alert-positive-button:hover {
    background-color: var(--primary-600)
}

.alert-negative-button {
    background-color: var(--background-200);
    color: var(--text-950)
}

.alert-negative-button:hover {
    background-color: var(--background-300)
}

.alert-neutral-button {
    background-color: var(--background-100);
    color: var(--text-950-70)
}

.alert-neutral-button:hover {
    background-color: var(--background-200);
    color: var(--text-950)
}

@media screen and (max-width: 480px) {
    .alert-dialog {
        padding:1rem
    }

    .alert-button-layout {
        flex-direction: column
    }

    .alert-button {
        width: 100%;
        text-align: center
    }
}

.chooser-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    background: var(--background-50-30);
    backdrop-filter: blur(4px)
}

.chooser-modal {
    max-width: 500px;
    width: 100%;
    background-color: var(--background-50);
    border-radius: 1rem;
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
    opacity: 0;
    transform: scale(0.9);
    max-height: 80vh
}

.chooser-modal.show {
    opacity: 1;
    transform: scale(1)
}

.chooser-title {
    font-weight: 600;
    font-size: 1.35rem;
    margin: 1.5rem 1.5rem 1rem
}

.chooser-list {
    border-top: 1px solid var(--background-200-50);
    border-bottom: 1px solid var(--background-200-50);
    flex: 1;
    overflow-y: auto;
    max-height: 50vh
}

.chooser-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .75rem 1.5rem;
    cursor: pointer;
    transition: background-color .2s ease
}

.chooser-item:hover {
    background-color: var(--background-200-50)
}

.chooser-item.selected {
    background-color: var(--background-200)
}

.chooser-icon {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain
}

.chooser-label {
    flex: 1;
    font-size: 1rem;
    margin: 0
}

.chooser-checkmark {
    font-size: 1.2rem;
    color: var(--accent-500);
    visibility: hidden
}

.chooser-item.selected .chooser-checkmark {
    visibility: visible
}

.chooser-button-layout {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1.5rem
}

.chooser-button {
    padding: .7rem 1.2rem;
    border-radius: .5rem;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 0
}

.chooser-cancel-button {
    background-color: var(--background-200);
    color: var(--text-950)
}

.chooser-cancel-button:hover {
    background-color: var(--background-300)
}

.chooser-select-button {
    background-color: var(--primary-500);
    color: var(--text-950)
}

.chooser-select-button:hover {
    background-color: var(--primary-600)
}

@media screen and (max-width: 480px) {
    .chooser-dialog {
        padding:1rem
    }

    .chooser-button-layout {
        flex-direction: column-reverse
    }

    .chooser-button {
        width: 100%;
        text-align: center
    }
}

.offline-message-container {
    bottom: 0;
    position: sticky;
    width: 100%;
    background: var(--custom-color-error);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem
}

.scheme-preview {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--preview-color-border);
    background: var(--preview-color);
    aspect-ratio: 1/1
}

.scheme-red {
    --preview-color: rgba(246,9,41,0.6);
    --preview-color-border: rgba(246,9,41,1)
}

.scheme-green {
    --preview-color: rgba(40,215,51,0.6);
    --preview-color-border: rgba(40,215,51,1)
}

.scheme-blue {
    --preview-color: rgba(8,0,255,0.6);
    --preview-color-border: rgba(8,0,255,1)
}

.scheme-purple {
    --preview-color: rgba(255,0,255,0.6);
    --preview-color-border: rgba(255,0,255,1)
}

.scheme-yellow {
    --preview-color: rgba(255,255,0,0.6);
    --preview-color-border: rgba(255,255,0,1)
}

.scheme-gray {
    --preview-color: rgba(128,128,128,0.6);
    --preview-color-border: rgba(128,128,128,1)
}

.scheme-random1 {
    --preview-color: rgba(255,165,0,0.6);
    --preview-color-border: rgba(255,165,0,1)
}

.scheme-random2 {
    --preview-color: rgba(0,255,255,0.6);
    --preview-color-border: rgba(0,255,255,1)
}

.scheme-random3 {
    --preview-color: rgba(255,20,147,0.6);
    --preview-color-border: rgba(255,20,147,1)
}