:root {
    --ink: #f7e7c4;
    --ink-dim: #b9b2a5;
    --panel: rgba(10, 14, 24, 0.75);
    --panel-border: rgba(255, 255, 255, 0.12);
    --glow: rgba(97, 163, 255, 0.35);
    --app-height: 100vh;
    --page-pad-top: 28px;
    --page-pad-bottom: 80px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: var(--app-height);
}

body {
    margin: 0;
    font-family: "Futura", "Avenir Next", "Gill Sans", "Helvetica Neue", sans-serif;
    background:
        radial-gradient(1200px 800px at 20% 10%, rgba(35, 60, 120, 0.6), transparent 60%),
        radial-gradient(900px 700px at 80% 20%, rgba(120, 60, 40, 0.45), transparent 65%),
        linear-gradient(180deg, #0b1020 0%, #090c15 100%);
    color: var(--ink);
    min-height: var(--app-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--page-pad-top) + var(--safe-top)) 16px calc(var(--page-pad-bottom) + var(--safe-bottom));
    gap: 20px;
}

.loader {
    position: fixed;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--page-pad-top) + var(--safe-top)) 16px calc(var(--page-pad-bottom) + var(--safe-bottom));
    background: rgba(7, 10, 16, 0.72);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.loader__frame {
    padding: 18px 20px 16px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 20px var(--glow);
    display: grid;
    gap: 12px;
    width: min(520px, 100%);
}

.loader__title {
    font-size: 1.1rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.loader__status {
    font-size: 0.95rem;
    color: var(--ink-dim);
}

.loader__meter {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.loader__bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f5d186 0%, #7fd1ff 60%, #f07a63 100%);
    box-shadow: 0 0 12px rgba(127, 209, 255, 0.6);
    transition: width 0.2s ease;
}

.loader__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.loader__percent {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.loader__spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #f5d186;
    animation: loader-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.loader.indeterminate .loader__spinner {
    opacity: 1;
}

.loader.indeterminate .loader__bar {
    width: 45%;
    animation: loader-sweep 1.25s ease-in-out infinite;
}

body.error .loader__frame {
    background: rgba(64, 22, 26, 0.8);
    border-color: rgba(255, 155, 155, 0.4);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 120, 120, 0.4);
}

body.error .loader__status,
body.error .loader__meta {
    color: #ffb5b5;
}

body.error .loader__bar {
    background: linear-gradient(90deg, rgba(255, 155, 155, 0.85), rgba(255, 96, 96, 0.9));
    box-shadow: 0 0 12px rgba(255, 120, 120, 0.6);
}

@keyframes loader-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes loader-sweep {
    0% {
        transform: translateX(-80%);
    }
    50% {
        transform: translateX(40%);
    }
    100% {
        transform: translateX(180%);
    }
}

canvas {
    margin-top: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

@media (max-width: 640px) {
    :root {
        --page-pad-top: 18px;
    }
    .loader__title {
        font-size: 0.95rem;
    }
    .loader__status {
        font-size: 0.85rem;
    }
}