body { font-family: 'Inter Variable', 'Inter', sans-serif; }
.mono-font { font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
/* Full-height that tracks the *visible* viewport on mobile (URL bar,
   keyboard); older browsers fall back to 100vh. */
.app-vh { height: 100vh; height: 100dvh; }
@media (max-width: 767px) {
    /* iOS Safari zooms the page when focusing a field under 16px. */
    textarea, input, select { font-size: 16px !important; }
}
@keyframes vs-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}
@keyframes vs-spin { to { transform: rotate(360deg); } }
/* Pre-React splash: pure HTML/CSS so it paints immediately, long
   before Babel compiles the app. React replaces it on mount. */
body { background: #d8dce5; }
@keyframes vs-splash-pulse { 50% { opacity: 0.35; } }
.vs-splash {
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 18px;
    align-items: center; justify-content: center;
    animation: vs-splash-pulse 2s ease-in-out infinite;
}
.vs-splash-diamond {
    width: 18px; height: 18px; border: 2px solid #4c6a9b;
    transform: rotate(45deg);
}
.vs-splash-label {
    font-size: 13px; font-weight: 600; color: #566377;
    letter-spacing: 0.04em;
}