.desktop-experience-note {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    html {
        position: relative;
        isolation: isolate;
        width: 100%;
        height: auto;
        min-height: 100%;
        background-color: #e8cbbb;
        background-image:
            radial-gradient(circle at center, rgba(228, 145, 112, 0.2) 0%, rgba(225, 183, 151, 0.16) 28%, transparent 58%),
            linear-gradient(135deg, #e8c3b3 0%, #e6c69d 35%, #e7d1b9 68%, #cad9cf 100%);
        background-size: 88% 88%, 100% 100%;
        background-position: center, center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        animation: signup-lava-flow 12s ease-in-out var(--lava-flow-delay, 0ms) infinite alternate;
        overflow: auto;
        overscroll-behavior-y: auto;
    }

    html::before,
    html::after {
        content: "";
        position: fixed;
        z-index: -1;
        top: 50%;
        left: 50%;
        pointer-events: none;
        will-change: transform, filter, opacity;
    }

    html::before {
        width: 155vmax;
        height: 155vmax;
        border-radius: 50%;
        background: conic-gradient(
            from 8deg,
            transparent 0deg 14deg,
            rgba(242, 101, 67, 0.5) 23deg,
            rgba(243, 145, 99, 0.4) 38deg,
            transparent 57deg 83deg,
            rgba(239, 183, 116, 0.44) 98deg,
            rgba(241, 105, 70, 0.5) 116deg,
            transparent 137deg 169deg,
            rgba(235, 112, 76, 0.48) 187deg,
            rgba(239, 193, 139, 0.4) 207deg,
            transparent 229deg 263deg,
            rgba(239, 139, 105, 0.34) 281deg,
            rgba(237, 187, 154, 0.28) 303deg,
            transparent 326deg 360deg
        );
        -webkit-mask-image: radial-gradient(circle, transparent 0% 8%, #000 17% 54%, transparent 72%);
        mask-image: radial-gradient(circle, transparent 0% 8%, #000 17% 54%, transparent 72%);
        animation: signup-solar-arms 22s ease-in-out var(--solar-arms-delay, 0ms) infinite alternate;
    }

    html::after {
        width: 32vmax;
        height: 32vmax;
        border-radius: 46% 54% 58% 42% / 55% 43% 57% 45%;
        background: radial-gradient(circle at 50% 50%, rgba(230, 100, 69, 0.72) 0%, rgba(238, 116, 79, 0.68) 17%, rgba(241, 126, 87, 0.6) 31%, rgba(240, 153, 110, 0.46) 49%, rgba(237, 190, 156, 0.18) 65%, transparent 76%);
        animation: signup-solar-core 9s ease-in-out var(--solar-core-delay, 0ms) infinite alternate;
    }

    body[data-page="signup"],
    body[data-page="legal"] {
        position: absolute;
        z-index: 1;
        inset: auto;
        top: 50%;
        left: 50%;
        width: 450px;
        min-width: 450px;
        max-width: 450px;
        height: 750px;
        min-height: 750px;
        max-height: 750px;
        margin: 0;
        border: 10px solid #000;
        border-radius: 46px;
        background-color: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        transform: translate(-50%, -50%);
        transform-origin: center;
        -webkit-overflow-scrolling: touch;
    }

    body[data-page="signup"]::-webkit-scrollbar,
    body[data-page="legal"]::-webkit-scrollbar {
        display: none;
    }

    body[data-page="legal"] {
        padding: 14px;
    }

    body[data-page="legal"] main {
        width: 100%;
        padding: 27px;
        border-radius: 32px;
    }

    body[data-page="legal"] h1 {
        font-size: 32px;
    }

    body[data-page="signup"] .page-shell {
        width: 100%;
        padding: 14px;
    }

    body[data-page="signup"] .event-hero {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 12px;
        padding: 26px 22px;
        border-radius: 36px;
    }

    body[data-page="signup"] .event-hero h1 {
        font-size: 32px;
    }

    body[data-page="signup"] .event-location {
        font-size: 17px;
    }

    body[data-page="signup"] .event-date {
        min-height: 108px;
    }

    body[data-page="signup"] .content-card {
        padding: 27px;
        border-radius: 32px;
    }

    body[data-page="signup"] .content-card.practical-info {
        background-color: #fff3ed;
    }

    body[data-page="signup"] .content-card h2 {
        font-size: 27px;
    }

    body[data-page="signup"] .practical-info p {
        font-size: 18px;
    }

    body[data-page="signup"] .field-row {
        grid-template-columns: 1fr;
    }

    .desktop-experience-note {
        position: fixed;
        z-index: 2;
        top: 50%;
        left: calc(50% + 285px);
        display: block;
        width: min(310px, calc(50vw - 315px));
        min-width: 230px;
        color: rgba(255, 255, 255, 0.94);
        text-align: left;
        transform: translateY(-50%);
    }

    .desktop-experience-note h2 {
        margin: 0 0 14px;
        color: #fff;
        font-family: "Avenir Next", Avenir, Arial, sans-serif;
        font-size: 30px;
        font-style: italic;
        font-weight: 700;
        line-height: 1.05;
    }

    .desktop-experience-note p {
        max-width: 200px;
        margin: 0;
        font-family: Optima, "Palatino Linotype", Palatino, serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
    }
}

@keyframes signup-lava-flow {
    0% { background-position: 44% 48%, center; background-size: 82% 88%, 100% 100%; }
    50% { background-position: 56% 52%, center; background-size: 94% 80%, 100% 100%; }
    100% { background-position: 48% 56%, center; background-size: 84% 94%, 100% 100%; }
}

@keyframes signup-solar-arms {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.9, 1.08); filter: blur(42px) hue-rotate(0deg) saturate(0.86) brightness(1.04); opacity: 0.9; }
    50% { transform: translate(-50%, -50%) rotate(19deg) scale(1.08, 0.92); filter: blur(55px) hue-rotate(18deg) saturate(0.92) brightness(1.05); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(38deg) scale(0.94, 1.12); filter: blur(46px) hue-rotate(-14deg) saturate(0.88) brightness(1.04); opacity: 0.92; }
}

@keyframes signup-solar-core {
    0% { transform: translate(-50%, -50%) rotate(-8deg) scale(0.9, 1.04); filter: blur(48px) hue-rotate(0deg) saturate(0.86) brightness(1.06); }
    50% { transform: translate(-50%, -50%) rotate(7deg) scale(1.08, 0.93); filter: blur(58px) hue-rotate(-12deg) saturate(0.92) brightness(1.05); }
    100% { transform: translate(-50%, -50%) rotate(15deg) scale(0.96, 1.1); filter: blur(52px) hue-rotate(16deg) saturate(0.88) brightness(1.06); }
}

@media (hover: hover) and (pointer: fine) and (max-height: 789px) {
    body[data-page="signup"],
    body[data-page="legal"] {
        position: relative;
        top: auto;
        left: auto;
        margin: 20px auto;
        transform: none;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 489px) {
    body[data-page="signup"],
    body[data-page="legal"] {
        position: relative;
        top: auto;
        left: auto;
        margin: 20px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    html::before,
    html::after {
        animation: none !important;
    }
}