html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
    overscroll-behavior-block: none;
    scrollbar-gutter: stable;
}

body {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.94)),
        url("composeResources/goticky.composeapp.generated.resources/drawable/intro_background.jpeg") center center / cover no-repeat,
        linear-gradient(180deg, #05070d 0%, #0a1120 100%);
    color: #eff4ff;
    font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

canvas {
    touch-action: pan-x pan-y;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    contain: paint;
}

#loading-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 999;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.94)),
        url("composeResources/goticky.composeapp.generated.resources/drawable/intro_background.jpeg") center center / cover no-repeat,
        linear-gradient(180deg, #05070d 0%, #0a1120 100%);
    transition: opacity 280ms ease;
}

#loading-logo {
    width: clamp(156px, 18vw, 220px);
    height: auto;
    filter:
        drop-shadow(0 18px 42px rgba(7, 12, 20, 0.62))
        drop-shadow(0 0 26px rgba(191, 255, 63, 0.12));
}

.loading-progress-track {
    width: min(360px, calc(100vw - 64px));
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#loading-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d8ff1f 0%, #78dfff 46%, #3b76ff 100%);
    box-shadow:
        0 0 22px rgba(120, 223, 255, 0.22),
        0 0 28px rgba(216, 255, 31, 0.12);
}

#loading-progress-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(239, 244, 255, 0.84);
}

body.compose-mounted #loading-shell {
    opacity: 0;
    visibility: hidden;
}