:root {
  --rose: #e11d48;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(244, 114, 182, 0.18), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(217, 70, 239, 0.15), transparent 45%),
    #fdf2f7;
  color: #3f1220;
  min-height: 100vh;
}

/* nicer scrollbars for the editor column */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(225, 29, 72, 0.3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* staggered load-in for editor cards */
main > div:first-child > div > div {
  animation: rise 0.5s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

iframe { transition: box-shadow 0.3s; }