html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
}

body {
    background:
        linear-gradient(135deg, #eef5ff 0%, #e3f0ff 44%, #dff2ff 100%);
}

.ambient-background {
    background:
        radial-gradient(circle at 16% 18%, rgb(40 116 255 / 0.38), transparent 0 28%),
        radial-gradient(circle at 48% 24%, rgb(173 132 255 / 0.22), transparent 0 22%),
        radial-gradient(circle at 78% 22%, rgb(90 230 255 / 0.24), transparent 0 24%),
        radial-gradient(circle at 82% 72%, rgb(80 116 255 / 0.26), transparent 0 28%),
        radial-gradient(circle at 36% 78%, rgb(201 149 255 / 0.18), transparent 0 24%),
        linear-gradient(135deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.1));
    filter: saturate(132%);
}

.ambient-background::before,
.ambient-background::after {
    content: '';
    position: absolute;
    inset: -18%;
    opacity: 0.94;
    pointer-events: none;
}

.ambient-background::before {
    background:
        radial-gradient(70% 48% at 12% 74%, rgb(255 255 255 / 0) 0 53%, rgb(74 115 255 / 0.26) 56% 61%, rgb(110 241 255 / 0.28) 63% 67%, rgb(219 165 255 / 0.24) 69% 73%, rgb(255 255 255 / 0) 76%),
        radial-gradient(66% 42% at 34% 68%, rgb(255 255 255 / 0) 0 53%, rgb(255 255 255 / 0.36) 55.5% 56.6%, rgb(111 244 255 / 0.28) 59% 63%, rgb(70 120 255 / 0.24) 65% 70%, rgb(255 255 255 / 0) 73%),
        radial-gradient(72% 44% at 60% 58%, rgb(255 255 255 / 0) 0 51%, rgb(196 154 255 / 0.22) 55% 60%, rgb(112 236 255 / 0.26) 62% 66%, rgb(255 255 255 / 0) 70%),
        radial-gradient(70% 44% at 84% 38%, rgb(255 255 255 / 0) 0 52%, rgb(255 255 255 / 0.34) 54% 55%, rgb(88 120 255 / 0.22) 57% 62%, rgb(173 139 255 / 0.2) 64% 69%, rgb(255 255 255 / 0) 73%),
        repeating-linear-gradient(124deg, rgb(255 255 255 / 0) 0 8%, rgb(255 255 255 / 0.08) 9% 9.5%, rgb(255 255 255 / 0) 10.2% 18%);
    transform: rotate(-15deg) scale(1.26);
    filter: blur(22px);
    mix-blend-mode: screen;
}

.ambient-background::after {
    background:
        radial-gradient(74% 50% at 18% 78%, rgb(255 255 255 / 0) 0 54%, rgb(255 255 255 / 0.3) 56% 57.2%, rgb(110 239 255 / 0.28) 59% 63%, rgb(74 108 255 / 0.22) 65% 71%, rgb(255 255 255 / 0) 74%),
        radial-gradient(66% 42% at 44% 60%, rgb(255 255 255 / 0) 0 51%, rgb(201 160 255 / 0.22) 55% 60%, rgb(255 255 255 / 0.34) 61.2% 62.2%, rgb(106 240 255 / 0.22) 64% 68%, rgb(255 255 255 / 0) 72%),
        radial-gradient(68% 42% at 70% 50%, rgb(255 255 255 / 0) 0 50%, rgb(63 105 255 / 0.22) 54% 60%, rgb(180 142 255 / 0.18) 62% 67%, rgb(255 255 255 / 0) 71%),
        radial-gradient(70% 44% at 92% 34%, rgb(255 255 255 / 0) 0 50%, rgb(255 255 255 / 0.28) 53% 54%, rgb(112 236 255 / 0.2) 57% 61%, rgb(255 255 255 / 0) 65%);
    transform: rotate(11deg) scale(1.22);
    filter: blur(34px);
    mix-blend-mode: screen;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.glass-card-borderless {
    border: none;
}

.glass-modal {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15);
}