@layer theme {
    :root {
        --hue: 260deg;
    }
}

.sg0 {
    stop-color: oklch(65% 30% var(--hue));
}
.sg1 {
    stop-color: oklch(35% 50% var(--hue));
}

@keyframes draw-check {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.sc {
    stroke: oklch(45% 45% var(--hue));
    stroke-dasharray: 1;
    animation: draw-check 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.phone {
    inline-size: 100dvw;
    block-size: 100dvh;
}

@media (width > 32rem) {
    .phone {
        display: grid;
        place-content: center;
        padding-block: 4rem;
    }

    .phone > * {
        inline-size: 32rem;
        block-size: min(100dvh - 8rem, calc(32rem * 16 / 9));
        border-radius: 1rem;
        overflow: hidden;
    }
}

.fill {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}