.public-shell {
    --public-background-start: #0d0818;
    --public-background-end: #18132a;
    --public-background-dot: rgba(196, 172, 255, 0.18);
    --public-background-grid: rgba(168, 140, 255, 0.08);
    --public-background-glow-left: rgba(150, 104, 255, 0.32);
    --public-background-glow-right: rgba(6, 182, 212, 0.18);
    color: #ecddf9;
    background:
        radial-gradient(
            circle at top left,
            rgba(150, 104, 255, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(94, 58, 187, 0.3),
            transparent 28%
        ),
        linear-gradient(
            140deg,
            var(--public-background-start),
            var(--public-background-end)
        );
}

.public-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(
        circle,
        var(--public-background-dot) 1px,
        transparent 1.7px
    );
    background-size: 16px 16px;
    opacity: 0.48;
    pointer-events: none;
}

.public-dot-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: none;
    opacity: 0;
    pointer-events: none;
}

.public-edge-glow {
    position: fixed;
    top: 8vh;
    z-index: 0;
    height: 90vh;
    width: 34vw;
    filter: blur(90px);
    opacity: 0.5;
    pointer-events: none;
}

.public-edge-glow-left {
    left: -14vw;
    background: radial-gradient(
        circle,
        var(--public-background-glow-left),
        transparent 70%
    );
}

.public-edge-glow-right {
    right: -14vw;
    background: radial-gradient(
        circle,
        var(--public-background-glow-right),
        transparent 70%
    );
}

.public-shell--light {
    --public-background-start: #f4f8fc;
    --public-background-end: #edf5fb;
    --public-background-dot: rgba(56, 189, 248, 0.12);
    --public-background-grid: rgba(71, 96, 140, 0.05);
    --public-background-glow-left: rgba(79, 141, 247, 0.14);
    --public-background-glow-right: rgba(6, 182, 212, 0.12);
    color: #0f172a;
    background:
        radial-gradient(
            circle at top left,
            rgba(79, 141, 247, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(6, 182, 212, 0.14),
            transparent 28%
        ),
        linear-gradient(
            140deg,
            var(--public-background-start),
            var(--public-background-end)
        );
}

.public-shell--light::before {
    opacity: 0.72;
}

.public-shell--light .public-dot-mesh {
    opacity: 0;
}

.public-shell.public-shell--light.public-shell--planner {
    background:
        radial-gradient(
            circle at top left,
            rgba(79, 141, 247, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(6, 182, 212, 0.14),
            transparent 28%
        ),
        linear-gradient(
            140deg,
            var(--public-background-start),
            var(--public-background-end)
        );
}

.public-shell.public-shell--planner-custom-background {
    background-attachment: fixed;
    background-size: cover;
}

.public-shell.public-shell--planner-custom-background::before {
    opacity: 0.14;
}

.public-shell.public-shell--planner-custom-background .public-edge-glow {
    opacity: 0;
}

.public-shell.public-shell--planner-custom-background .public-dot-mesh {
    opacity: 0;
}

.public-shell.public-shell--planner-custom-background[data-planner-workspace-bg-tone='dark']
    .public-dot-mesh {
    background-image: none;
    opacity: 0;
}

.public-shell.public-shell--planner-custom-background[data-planner-workspace-bg-tone='dark']::before {
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px
    );
    opacity: 0.22;
}

.public-shell.public-shell--planner-custom-background[data-planner-workspace-bg-tone='light']
    .public-dot-mesh {
    background-image: none;
    opacity: 0;
}

.public-shell.public-shell--planner-custom-background[data-planner-workspace-bg-tone='light']::before {
    background-image: radial-gradient(
        rgba(15, 23, 42, 0.12) 1px,
        transparent 1px
    );
    opacity: 0.22;
}