html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0a0a14;
  font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  color: #fff;
}

* { box-sizing: border-box; }

input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

::-webkit-scrollbar { width: 0; height: 0; }

#root { width: 100%; min-height: 100%; }

@keyframes apBlobA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(15%, 12%) scale(1.15); }
}

@keyframes apBlobB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12%, -8%) scale(1.18); }
}

@keyframes apBlobC {
  0%   { transform: translate(0, 0) scale(0.95); }
  100% { transform: translate(-8%, 14%) scale(1.1); }
}

@keyframes toastIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Instant click feedback for every button. Pure CSS so it fires the moment
 * the pointer goes down — no waiting for React state to flip and re-render.
 * The Babel-in-browser pipeline adds 50-100ms to every state-driven repaint,
 * which is enough to make a "save" click feel sluggish before this rule.
 *
 * The :hover transition is on `filter` instead of `background` so we don't
 * fight inline styles that set their own background. `transition-duration`
 * stays short — anything over ~100ms feels mushy on a desktop pointer.
 */
button {
  transition: transform 80ms ease-out, filter 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):hover  { filter: brightness(1.08); }
button:not(:disabled):active { transform: scale(0.97); filter: brightness(0.9); transition-duration: 40ms; }

/* Same treatment for elements that act like buttons (anchors styled as
 * primary CTAs, label-as-file-picker, kebab triggers, etc.). */
[role="button"], a.button, label[for], label.button {
  transition: transform 80ms ease-out, filter 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
[role="button"]:active, a.button:active, label[for]:active, label.button:active {
  transform: scale(0.97); filter: brightness(0.9); transition-duration: 40ms;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff4d8d; cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 77, 141, 0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: #ff4d8d; cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 77, 141, 0.5);
}