add onboarding card, dot, and rune-background styles with entrance animations

@@ -5430,3 +5430,188 @@54305430   color: var(--peach-t3);54315431   line-height: 1;54325432 }5433+5434+/* ─── First-run onboarding ──────────────────────────────────────────────5435+   Three-card welcome shown once before vault creation. The PeachScript5436+   rune background drifts behind everything at very low opacity — it's5437+   atmosphere, not focus. The cards themselves use the same panel5438+   language as the rest of the popup so the transition into NewVault is5439+   continuous, not a jarring switch of visual register. */5440+5441+.peach-onboarding {5442+  position: relative;5443+  display: flex;5444+  flex-direction: column;5445+  width: 100%;5446+  height: 100%;5447+  padding: 16px 16px 18px;5448+  box-sizing: border-box;5449+  overflow: hidden;5450+  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5451+}5452+5453+.peach-onboarding.is-completing {5454+  animation: peach-onboard-exit 200ms ease-out forwards;5455+}5456+5457+.peach-rune-background {5458+  position: absolute;5459+  inset: 0;5460+  width: 100%;5461+  height: 100%;5462+  pointer-events: none;5463+  z-index: 0;5464+  transition: opacity 500ms ease-out;5465+}5466+5467+.peach-onboarding.is-completing .peach-rune-background {5468+  opacity: 0;5469+}5470+5471+.peach-onboarding-header {5472+  position: relative;5473+  z-index: 1;5474+  display: flex;5475+  align-items: center;5476+  margin-bottom: 14px;5477+}5478+5479+.peach-onboarding-card {5480+  position: relative;5481+  z-index: 1;5482+  flex: 1;5483+  display: flex;5484+  flex-direction: column;5485+  gap: 10px;5486+  padding: 22px 20px;5487+  border-radius: 16px;5488+  border: 1px solid var(--peach-t3);5489+  background:5490+    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5491+  box-shadow:5492+    inset 0 1px 0 rgba(240, 232, 216, 0.04),5493+    0 12px 28px rgba(0, 0, 0, 0.12);5494+  cursor: pointer;5495+  user-select: none;5496+  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5497+}5498+5499+.peach-onboarding-card.is-exiting {5500+  animation: peach-card-out 120ms ease-in forwards;5501+  pointer-events: none;5502+}5503+5504+.peach-onboarding-card-headline {5505+  margin: 0;5506+  font-family: var(--font-display);5507+  font-style: italic;5508+  font-weight: 400;5509+  font-size: 22px;5510+  line-height: 1.05;5511+  color: var(--peach-t0);5512+  white-space: pre-line;5513+}5514+5515+.peach-onboarding-divider {5516+  margin: 4px 0 6px;5517+  border: 0;5518+  border-top: 1px solid var(--peach-t3);5519+  width: 100%;5520+}5521+5522+.peach-onboarding-body {5523+  margin: 0;5524+  font-size: 13px;5525+  line-height: 1.6;5526+  color: var(--peach-t1);5527+}5528+5529+.peach-onboarding-warning {5530+  display: flex;5531+  align-items: flex-start;5532+  gap: 8px;5533+  margin: 6px 0 0;5534+  padding-top: 8px;5535+  border-top: 1px dashed var(--peach-t3);5536+  font-size: 13px;5537+  line-height: 1.5;5538+  color: var(--peach-t1);5539+}5540+5541+.peach-onboarding-warning-icon {5542+  color: var(--peach-accent);5543+  font-size: 13px;5544+  line-height: 1.5;5545+  flex: 0 0 auto;5546+}5547+5548+.peach-onboarding-nav {5549+  position: relative;5550+  z-index: 1;5551+  display: flex;5552+  align-items: center;5553+  justify-content: space-between;5554+  margin-top: 12px;5555+  padding: 0 4px;5556+}5557+5558+.peach-onboarding-dots {5559+  display: flex;5560+  align-items: center;5561+  gap: 6px;5562+}5563+5564+.peach-onboarding-dot {5565+  width: 6px;5566+  height: 6px;5567+  border-radius: 50%;5568+  background: var(--peach-t2);5569+  transition: width 200ms ease, height 200ms ease, background 200ms ease;5570+}5571+5572+.peach-onboarding-dot.is-active {5573+  width: 8px;5574+  height: 8px;5575+  background: var(--peach-accent);5576+}5577+5578+.peach-onboarding-next {5579+  background: none;5580+  border: none;5581+  padding: 4px 0;5582+  cursor: pointer;5583+  font-family: "IBM Plex Mono", monospace;5584+  font-size: 11px;5585+  letter-spacing: 0.04em;5586+  color: var(--peach-t1);5587+  transition: color 150ms ease;5588+}5589+5590+.peach-onboarding-next:hover {5591+  color: var(--peach-t0);5592+}5593+5594+.peach-onboarding-next:disabled {5595+  opacity: 0.5;5596+  cursor: default;5597+}5598+5599+@keyframes peach-onboard-enter {5600+  from { opacity: 0; transform: translateY(20px); }5601+  to   { opacity: 1; transform: translateY(0); }5602+}5603+5604+@keyframes peach-onboard-exit {5605+  from { opacity: 1; }5606+  to   { opacity: 0; }5607+}5608+5609+@keyframes peach-card-in {5610+  from { opacity: 0; transform: translateX(12px); }5611+  to   { opacity: 1; transform: translateX(0); }5612+}5613+5614+@keyframes peach-card-out {5615+  from { opacity: 1; transform: translateX(0); }5616+  to   { opacity: 0; transform: translateX(-12px); }5617+}