/* Shared aesthetic tokens for the animated assets */
:root {
  --bg: #ffffff;
  --ink: #111827;
  --ink-2: #475569;
  --muted: #94a3b8;
  --line: #e6e8ef;
  --line-soft: #eef1f6;
  --card: #ffffff;
  --blue: #6E42FF;
  --blue-soft: #ede6ff;
  --blue-ink: #5a36d6;
  --coral: #ef6c57;
  --coral-soft: #fde7e1;
  --green: #17b26a;
  --green-soft: #e6f6ee;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 30px 60px -30px rgba(15, 23, 42, 0.28), 0 10px 20px -10px rgba(15, 23, 42, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px;
}

.asset {
  position: relative;
  width: 560px;
  max-width: 100%;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(15, 23, 42, 0.04);
}