:root {
    --100-vh: 100vh;

    /* z index naming convention: --zIndex_<component>_<rest> */

    --zIndex-ds-ui-float-dropdown: 1000000;

    --zIndex_progress: 10000000000;

    /* nav/home */
    --zIndex_user-dropdown: 1;

    --zIndex_nav-filter-mobile-menu: 100;
    --zIndex_nav-filter-mobile-button: 100;
    --zIndex_nav-search-wrapper: 100;
    --zIndex_nav-filter-desktop-tab: 100;
    --zIndex_mobile-sticky-nav: 100;

    --zIndex_nav-submenu: 101;

    --zIndex_create_page-link-invite-dropdown: 1000000;

    /* World settings covers every studio panel and modal (10000000). */
    --zIndex_studio-settings: 10000001;
    /* Messages stay readable above World settings. */
    --zIndex-snackbar: 10000002;

    --world-builder-bg: #1a1a1a;

    /* --- glass tier: icon-only chrome (top bar, items dock, Tool buttons) --- */
    --glass-bg: rgba(233, 233, 233, 0.16);
    --glass-bg-hover: rgba(233, 233, 233, 0.28);
    --glass-blur: blur(20px);
    --glass-blur-sm: blur(8px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.35);
    --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.18);
    --glass-shadow: 0px 4px 16px rgba(0, 0, 0, 0.18), 0px 1px 2px rgba(0, 0, 0, 0.08);
    --radius-pill: 9999px;

    /* --- panel tier: opaque, text-bearing surfaces (dropdowns, lists, context menu, tooltip) --- */
    --panel-bg: #1e1e1e;
    --panel-bg-hover: rgba(255, 255, 255, 0.08);
    --panel-border: 1px solid rgba(255, 255, 255, 0.08);
    --panel-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 12px 28px rgba(0, 0, 0, 0.11);
    --radius-panel: 20px;
    --radius-panel-sm: 12px;

    --panel-text-primary: #ffffff;
    --panel-text-secondary: #a0a0a0;
    --panel-text-muted: #6e6e6e;
    --panel-accent: #1f70f0;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 100;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Air.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 200;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-AirItalic.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 300;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Thin.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 400;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Regular.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 500;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Medium.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 600;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Bold.otf");
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    font-weight: 700;
    src: local("Aeonik"), url("/fonts/licensed/Aeonik-Black.otf");
    font-display: swap;
}

/*Space Grotesk*/
@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 300;
    src: local("SpaceGrotesk"),
        url("/fonts/SpaceGrotesk/SpaceGrotesk-Light.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 400;
    src: local("SpaceGrotesk"),
        url("/fonts/SpaceGrotesk/SpaceGrotesk-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 500;
    src: local("SpaceGrotesk"),
        url("/fonts/SpaceGrotesk/SpaceGrotesk-Medium.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 600;
    src: local("SpaceGrotesk"),
        url("/fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 700;
    src: local("SpaceGrotesk"),
        url("/fonts/SpaceGrotesk/SpaceGrotesk-Bold.woff2") format("woff2");
    font-display: swap;
}

/*
 * Shown while a web font loads (font-display: swap): a local Arial (or a
 * metric-compatible copy) scaled to the web font's width and line metrics,
 * so the swap barely moves text. Put each right after its web font in a
 * font-family list. Values and how they were measured: docs/fonts.md.
 */
@font-face {
    font-family: "SpaceGrotesk Fallback";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans"),
        local("LiberationSans"), local("Arimo");
    size-adjust: 110.91%;
    ascent-override: 88.72%;
    descent-override: 26.33%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "SpaceGrotesk Fallback";
    font-weight: 600 700;
    src: local("Arial Bold"), local("Arial-BoldMT"),
        local("Liberation Sans Bold"), local("LiberationSans-Bold"),
        local("Arimo Bold");
    size-adjust: 102.49%;
    ascent-override: 96.01%;
    descent-override: 28.49%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "SpaceMono Fallback";
    src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"),
        local("LiberationMono"), local("Cousine");
    size-adjust: 101.98%;
    ascent-override: 109.82%;
    descent-override: 35.4%;
    line-gap-override: 0%;
}

/*PPNeueBit Sans*/
@font-face {
    font-family: "PPNeueBit";
    font-weight: 300;
    src: local("PPNeueBit-Regular"), url("/fonts/licensed/PPNeueBit-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: "PPNeueBit";
    font-weight: 500;
    src: local("PPNeueBit-Bold"), url("/fonts/licensed/PPNeueBit-Bold.ttf");
    font-display: swap;
}

@font-face {
    font-family: "PP Editorial New";
    font-weight: 400;
    src: url("/fonts/licensed/PPEditorialNew-Regular.ttf");
    font-display: swap;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: "Aeonik", "SpaceGrotesk", "SpaceGrotesk Fallback",
        -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
        Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/*
body {
    font-family: "IBMPlex", -apple-system, BlinkMacSystemFont, Segoe UI,
        Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
        sans-serif;
} */
input,
select,
textarea,
button {
    font-family: inherit;
}

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

* {
    box-sizing: border-box;
}

.hide {
    display: none !important;
}

@media (max-width: 600px) {
    .mobile-hide {
        display: none;
    }
}

.dg.a {
    margin-top: 60px !important;
}

.pixelated {
    font-family: "PPNeueBit", "Aeonik", "SpaceGrotesk", monospace;
    font-size: 1.45em;
    font-weight: 400;
}

.hue-field {
    position: absolute;
}
.body > div.dg.ac > div {
    position: absolute;
    z-index: 50;
    transform: scale(0.1);
}
.ac {
    transform: scale(0.8);
    z-index: 1001 !important;
}
.dg .cr.image {
    position: relative;
    height: auto;
    border-left: 3px solid #2fa1d6;
}
.dg .cr.image .preview {
    display: block;
    width: calc(100% + 5px);
    padding: 4px 0;
    margin-left: -5px;
}
.dg .cr.image input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cur-pointer {
    cursor: pointer;
}

.elementToFadeInAndOut {
    animation: fadeinout 4s linear 1 forwards;
}

@keyframes fadeinout {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.y-scroll {
    overflow-y: auto;
}

.scrollbar-horizontal::-webkit-scrollbar {
    height: 5px !important;
}

.scrollbar::-webkit-scrollbar {
    width: 5px !important;
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* fix for firefox */
.scrollbar-hidden {
    scrollbar-width: none;
}

.scrollbar-horizontal.light::-webkit-scrollbar,
.scrollbar.light::-webkit-scrollbar {
    display: block;
    background: #bcbcbc;
    border-radius: 8px;
}

.scrollbar-horizontal.light::-webkit-scrollbar-thumb,
.scrollbar.light::-webkit-scrollbar-thumb {
    width: 5px !important;

    border-radius: 8px;
    background: #dadada;
    box-shadow: 0 0 5px #0000001f;
}

.scrollbar.dark::-webkit-scrollbar-thumb {
    width: 5px !important;

    border-radius: 8px;
    background: #333333;
}

.disabled {
    opacity: 0.6;
    pointer-events: none;
}

input[type="checkbox"] {
    accent-color: #070707;
}

.wallet-adapter-modal {
    z-index: 10000000000 !important;
}

.capitalize {
    text-transform: capitalize;
}

.no-select {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 600px) {
    /** studio mobile */
    .m-collab[style],
    .m-select-space[style] {
        width: calc(100% - 6px) !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        margin: auto;
    }
}

.m-select-space {
    z-index: 1000 !important;
}

.gEdge {
    box-shadow: 1px -.5px 1.5px rgba(0, 0, 0, 0.1);

    background: linear-gradient(
        38deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(35, 35, 34, 0.23) 41%,
        rgba(35, 35, 34, 0.8) 61%,
        rgba(255, 255, 255, 0.6) 100%
    );
}

.gEdge.active {
    background: linear-gradient(
        38deg,
        rgb(27, 201, 250, 0.23) 0%,
        rgb(27, 201, 250, 0.23) 21%,
        rgb(27, 201, 250, 0.7) 71%,
        rgb(255 255 255) 100%
    );
}

.gEdge::before {
    content: "";
    position: absolute;
    width: 97%;
    height: 97%;
    background: linear-gradient(151deg, #232322 0%, #191919 76.01%);
    border-radius: 8px;
}

.gEdge.active::before {
    background-image: linear-gradient(
        241deg,
        rgb(27, 201, 250) 0%,
        #1f70f0 76.01%
    );
}

.gEdge::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0% 60%,
        rgb(255 255 255 / 7%) 100%
    );

    border-radius: 8px;
}

@media (min-width: 800px) {
    .modal-shortcuts-modals {
        width: 800px !important;
    }
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.snackbar-wrapper {
    display: flex;
    align-items: center;
    margin: 8px;
    position: fixed;
    right: 0;
    left: 0;
    z-index: var(--zIndex-snackbar);
    transition: opacity 150ms, transform 150ms;
    pointer-events: none;
    cursor: pointer;
}

.snackbar-wrapper-top-left,
.snackbar-wrapper-top-center,
.snackbar-wrapper-top-right {
    top: 72px;
    right: 72px;
}

@media (max-width: 650px) {
    .snackbar-wrapper-top-left,
    .snackbar-wrapper-top-center,
    .snackbar-wrapper-top-right {
        top: 180px;
        right: 8px;
    }
}

.snackbar-wrapper-bottom-left,
.snackbar-wrapper-bottom-center,
.snackbar-wrapper-bottom-right {
    bottom: 48px;
}

.snackbar-wrapper-top-left,
.snackbar-wrapper-bottom-left {
    justify-content: flex-start;
}

.snackbar-wrapper-top-center,
.snackbar-wrapper-bottom-center {
    justify-content: center;
}

.snackbar-wrapper-top-right,
.snackbar-wrapper-bottom-right {
    justify-content: flex-end;
}

.snackbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 300px;
    max-width: 672px;
    height: 45px;
    border-radius: 45px;
    background: linear-gradient(
        201.23deg,
        rgba(145, 145, 147, 0.552) 4.03%,
        rgba(121, 121, 121, 0.24) 94%
    );
    backdrop-filter: blur(15px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.25px;
    line-height: 20px;
    text-align: left;
    padding: 0 0 0 8px;
}

/* .snackbar-info {
    color: #0288d1;
} */

.snackbar-error {
    color: #d32f2f;
}

/* .snackbar-success {
    box-shadow: 0 6px 30px 2px rgb(0 0 0 / 4%), 0 6px 30px 2px rgb(0 0 0 / 20%),
        inset 3px 0 0 #00b712;
} */

.snackbar-warning {
    color: #ed6c02;
}

.snackbar__text {
    flex-grow: 1;
    padding: 14px 16px;
    margin: 0;
    pointer-events: auto;
}

.snackbar__close {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    padding: 8px;
    margin: 0 8px 0 0;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;

    /* Reset button styles */
    outline: none;
    background-color: transparent;
    border: none;

    background: transparent;

    transition: 0.2s;

    /* SVG icon properties */
    font-size: 12px;
    color: #fff;
}

/* Responsiveness based on Material Design */
@media (max-width: 480px), (max-width: 344px) {
    .snackbar {
        max-width: 400px;
        max-width: 100%;
        font-size: 12px;
        min-width: 150px;
    }

    .snackbar__close {
        display: none;
    }
}

.undo {
    text-transform: uppercase;
    padding: 4px 8px;
    width: auto;
}

.snackbar__close:hover {
    background: #f7f7f7;
}

.snackbar__close:before {
    content: "";
    background-color: transparent;
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    transition: opacity 120ms linear;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .snackbar__close:hover:before {
        opacity: 0.08;
    }
}

/* CSSTransition classNames logic */
.snackbar-enter,
.snackbar-exit-active {
    opacity: 0;
}

.snackbar-enter-active {
    opacity: 1;
}

.snackbar-enter-top-left,
.snackbar-enter-top-center,
.snackbar-enter-top-right,
.snackbar-exit-active-top-left,
.snackbar-exit-active-top-center,
.snackbar-exit-active-top-right {
    transform: translateY(-16px);
}

.snackbar-enter-bottom-left,
.snackbar-enter-bottom-center,
.snackbar-enter-bottom-right,
.snackbar-exit-active-bottom-left,
.snackbar-exit-active-bottom-center,
.snackbar-exit-active-bottom-right {
    transform: translateY(16px);
}

.snackbar-enter-active-top-left,
.snackbar-enter-active-top-center,
.snackbar-enter-active-top-right,
.snackbar-enter-active-bottom-left,
.snackbar-enter-active-bottom-center,
.snackbar-enter-active-bottom-right {
    transform: translateY(0px);
}