:root {
    --fastapp-webapp-bg: #f5efe3;
    --fastapp-webapp-bg-deep: #efe7d7;
    --fastapp-webapp-ink: #101114;
}

html {
    scroll-behavior: smooth;
}

body.fastapp-webapp-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", sans-serif;
    color: var(--fastapp-webapp-ink);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 24%),
        radial-gradient(circle at 85% 10%, rgba(175, 149, 119, 0.16), transparent 22%),
        linear-gradient(180deg, var(--fastapp-webapp-bg) 0%, var(--fastapp-webapp-bg-deep) 100%);
}

.fastapp-webapp-orb {
    position: fixed;
    z-index: 0;
    border-radius: 999px;
    filter: blur(40px);
    pointer-events: none;
    opacity: 0.6;
}

.fastapp-webapp-orb--one {
    top: -40px;
    left: -20px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.64);
}

.fastapp-webapp-orb--two {
    top: 120px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: rgba(171, 145, 116, 0.2);
}

.fastapp-panel-dark,
.fastapp-card-visual {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 26%),
        linear-gradient(145deg, #111317 0%, #25211d 54%, #66482d 100%);
    box-shadow: 0 28px 70px rgba(16, 17, 20, 0.18);
}

.fastapp-panel-dark::after,
.fastapp-card-visual::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}