:root { --ambient-1:#cfe6ff; --ambient-2:#ffd9ec; --ambient-3:#e0d4ff; --surface-tint:rgba(255,255,255,.4); --text-primary:#0a0a0c; color-scheme:light; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --ambient-1:#1a2a4a; --ambient-2:#3a1a4a; --ambient-3:#1a3a4a; --surface-tint:rgba(60,60,70,.35); --text-primary:#f2f2f4; color-scheme:dark; } }
/* === BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #0a0a0c;
}

/* Ambient gradient background — slowly drifts behind all glass surfaces. */
body::before {
    content: '';
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 20%, var(--ambient-1) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, var(--ambient-2) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, var(--ambient-3) 0%, transparent 55%);
    background-size: 140% 140%;
    animation: ambientDrift 32s ease-in-out infinite alternate;
    z-index: -2;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--surface-tint);
    z-index: -1;
    pointer-events: none;
}

@keyframes ambientDrift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50%  { background-position: 20% 30%, 70% 20%, 60% 80%; }
    100% { background-position: 10% 20%, 90% 40%, 30% 90%; }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}


/* === BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    height: -webkit-fill-available;
    /* Prevent iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.facade-mobile {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; /* 16+ to prevent iOS zoom on input focus */
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #0a0a0c;
    overscroll-behavior: none;
}

body.facade-mobile::before {
    content: '';
    position: fixed;
    inset: -10%;
    background:
        radial-gradient(circle at 30% 10%, var(--ambient-1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, var(--ambient-2) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, var(--ambient-3) 0%, transparent 55%);
    background-size: 130% 130%;
    animation: ambientDriftMobile 40s ease-in-out infinite alternate;
    z-index: -2;
    pointer-events: none;
}

body.facade-mobile::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--surface-tint);
    z-index: -1;
    pointer-events: none;
}

@keyframes ambientDriftMobile {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    100% { background-position: 30% 30%, 70% 50%, 30% 70%; }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}