style.css

:root {
  --char-max: 200;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Buttons with ripple */
.ripple-button {
  position: relative;
  isolation: isolate;
}
.ripple-button .ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.45) 15%, rgba(255,255,255,0.15) 35%, transparent 55%);
  transform: scale(0);
  opacity: 0;
  transition: transform .6s ease, opacity .8s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.ripple-button:active .ripple {
  transform: scale(2.2);
  opacity: 1;
}

/* Magnetic effect */
.magnetic-button {
  transition: transform .2s ease;
}

/* 3D Tilt Card */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at var(--mx, 50%) var(--my, 50%), rgba(2,6,23,0.08), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.tilt-card:hover::after {
  opacity: 1;
}
/* Activity ring */
.ring-progress {
  --progress: 0;
  background: conic-gradient(slate 0 calc(var(--progress) * 3.6deg), #e2e8f0 0);
  transition: background .25s ease;
}
.ring-progress::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, rgba(148,163,184,0.45), rgba(148,163,184,0.15) 30%, transparent 60%);
  filter: blur(6px);
  z-index: -1;
}
/* Animated form labels */
.animated-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b; /* slate-500 */
  pointer-events: none;
  transition: all .2s ease;
  background: transparent;
  padding: 0 .25rem;
}
.animated-label:has(+ input:focus),
.animated-label:has(+ textarea:focus),
.animated-label:has(+ input:not(:placeholder-shown)),
.animated-label:has(+ textarea:not(:placeholder-shown)) {
  top: 0.25rem;
  transform: none;
  font-size: 0.75rem;
  color: #0f172a; /* slate-900 */
  background: white;
}

/* Hide default spinner on number-like inputs */
input[type="text"]::-webkit-outer-spin-button,
input[type="text"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}