:root {
  --background: 210 100% 99%;
  --foreground: 222 47% 8%;
  --primary: 203 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 100% 63%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 218 14% 45%;
  --destructive: 350 88% 62%;
  --border: 214 32% 91%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 8%;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --shadow-sm: 0 10px 28px rgba(18, 65, 120, 0.08);
  --shadow-md: 0 18px 44px rgba(31, 111, 203, 0.13);
  --shadow-lg: 0 28px 80px rgba(25, 75, 130, 0.18);
  --transition-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #f8fbff; color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
body { min-height: 100%; margin: 0; background: radial-gradient(circle at 50% -8%, rgba(125, 211, 252, .34), transparent 25rem), linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%); }
button, a { touch-action: manipulation; }
button { border: 0; font-family: inherit; }

.mobile-shell { isolation: isolate; }
.creation-gradient-primary { background: linear-gradient(135deg, #dff7ff 0%, #8ed7ff 48%, #6aa8ff 100%); }
.creation-gradient-secondary { background: linear-gradient(135deg, #edfaff 0%, #b8e7ff 48%, #9dc8ff 100%); }
.main-card { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), filter var(--transition-smooth); }
.main-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); filter: saturate(1.04); }
.main-card:active, .tool-card:active, .nav-link:active, .icon-btn:active { transform: scale(.97); }
.icon-btn { transition: var(--transition-fast); }
.icon-btn:hover { transform: translateY(-1px); background: hsl(var(--muted)); }
.tool-card { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: #ffffff; }
.tool-card:hover .tool-icon { transform: scale(1.07); background: #edf8ff; }
.tool-icon { transition: var(--transition-fast); }
.project-thumb::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 22px 22px; opacity: .42; }
.nav-link { transition: var(--transition-fast); }

@media (min-width: 640px) { body { display: grid; place-items: start center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }