:root {
  --ink: #2d2a4a;
  --ink-soft: #5b5878;
  --ink-faint: #9a97b5;
  --sunny: #ffc83d;
  --tangerine: #ff8a3d;
  --coral: #ff5e6c;
  --berry: #e84393;
  --grape: #8e6cff;
  --sky: #3db5ff;
  --teal: #20c9a6;
  --leaf: #5bd16b;
  --mint: #b8f2d0;
  --cream: #fff4de;
  --white: #ffffff;
  --paper: #fffdf8;
  --bg-top: #fff6e8;
  --bg-bottom: #eaf4ff;

  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 32px;
  --shadow-s: 0 2px 0 rgba(45, 42, 74, 0.08), 0 4px 12px rgba(45, 42, 74, 0.08);
  --shadow-m: 0 4px 0 rgba(45, 42, 74, 0.1), 0 12px 28px rgba(45, 42, 74, 0.12);
  --shadow-l: 0 6px 0 rgba(45, 42, 74, 0.12), 0 24px 48px rgba(45, 42, 74, 0.18);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --topbar-h: 64px;
  --gutter: clamp(12px, 2.5vw, 28px);

  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(170deg, var(--bg-top) 0%, #fdf0ff 45%, var(--bg-bottom) 100%) fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select {
  user-select: text;
  -webkit-user-select: text;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.01em;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Background blobs: static, a moving blur under the glass panels kept old phones busy */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
}

.b1 {
  width: 42vmax;
  height: 42vmax;
  background: #ffd9a8;
  top: -14vmax;
  left: -10vmax;
}

.b2 {
  width: 36vmax;
  height: 36vmax;
  background: #d9ccff;
  top: 20vh;
  right: -14vmax;
}

.b3 {
  width: 30vmax;
  height: 30vmax;
  background: #b8f2d0;
  bottom: -12vmax;
  left: 18vw;
}

.b4 {
  width: 22vmax;
  height: 22vmax;
  background: #bfe6ff;
  top: 45vh;
  left: -8vmax;
}

.app {
  padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px) var(--gutter)
    calc(var(--gutter) + env(safe-area-inset-bottom));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  min-height: 100vh;
  min-height: 100dvh;
}

.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 900;
}

.view-enter {
  animation: view-in 0.45s var(--smooth) both;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}