/* Stack Overflight — card-preview foundations.
   Trimmed from the design system's colors_and_type.css; only the tokens the
   homepage card illustrations reference, with font paths rewritten local. */

@font-face { font-family: 'Geist'; src: url('fonts/Geist-Regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Medium.woff2')   format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Bold.woff2')     format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --so-lime:    #C1FF72;
  --so-ink:     #111111;
  --so-cream:   #F6F6F2;
  --so-white:   #FFFFFF;
  --so-muted:   #6B6B6B;
  --so-border:  #D1D1CC;
  --so-success: #1B7F3A;
  --font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--so-ink);
  /* Transparent: the card chrome (gradient + grain) is now the React container
     behind this iframe, so it shows through wherever the content is empty. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The single card fills the document; the React container scales it to cover. */
body { display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Animation keyframes + helpers, lifted from the source design's <helmet>. */
@keyframes so-toast   { 0%{opacity:0;transform:translateY(12px)} 10%{opacity:1;transform:translateY(0)} 45%{opacity:1;transform:translateY(0)} 56%{opacity:0;transform:translateY(-8px)} 100%{opacity:0;transform:translateY(-8px)} }
@keyframes so-livedot { 0%{box-shadow:0 0 0 0 rgba(46,125,67,.42)} 70%,100%{box-shadow:0 0 0 6px rgba(46,125,67,0)} }
@keyframes so-rowin   { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes so-typing  { 0%,60%,100%{opacity:.22} 30%{opacity:.9} }
@keyframes so-msgin   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.feat .float { transition: transform .3s cubic-bezier(0.2,0,0,1), box-shadow .3s ease; }
.c1-layer { transition: transform .35s cubic-bezier(0.2,0,0,1); }
.expand { color:#B4B8BF; }

i[data-lucide], svg.lucide { width:14px; height:14px; display:inline-block; vertical-align:-2px; flex-shrink:0; stroke-width:1.75; }