<div class="raw-slide">
  <div class="headline">
    Technology must NOT be shipped it <em>raw</em>.
  </div>

  <div class="rule"></div>

  <div v-click class="card">
    <div class="card-eyebrow">WARNING: write this down or lose everything</div>
    <div class="card-words">
      <span>1. dragon</span>
      <span>2. window</span>
      <span>3. orbit</span>
      <span>4. flame</span>
      <span>5. quiet</span>
      <span>6. shovel</span>
      <span>7. velvet</span>
      <span>8. matter</span>
      <span>9. hollow</span>
      <span>10. plate</span>
      <span>11. tunnel</span>
      <span>12. rinse</span>
    </div>
  </div>

</div>

<style scoped>
.raw-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 4rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.raw-slide .headline {
  font-family: 'DM Serif Display', serif;
  font-size: 3.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.raw-slide .headline em { font-style: italic; color: #ffffff; }
.raw-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.5rem 0;
}
.raw-slide .rule.faint {
  background: rgba(255, 255, 255, 0.18);
  margin: 1.25rem 0;
}
.raw-slide .setup {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
}
.raw-slide .card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 6px;
  padding: 1.1rem 1.4rem 1.25rem;
  width: 28rem;
  text-align: left;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6) inset;
}
.raw-slide .card-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
}
.raw-slide .card-words {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.raw-slide .caption {
  margin-top: 1.15rem;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.raw-slide .caption em { font-style: italic; color: rgba(255, 255, 255, 0.8); }
.raw-slide .punch {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  line-height: 2;
}
</style>

<!--
If you look and installed the Polkadot app. This is not what is shown to you in the first screen: 

(CLICK)

This is what we commonly refer to as a SEED phrase. It's the secret to a unique cryptographic key. 

Although it is powerful, it is too complicated to deal with and wrap your head around. 

So the bottomline, is that even if the tech is good, for it to matter, it has to be presented in a way that is more likely for it to be used correctly. 

This is why I belive the sentence, we have all been saying for ten years was never finished.
-->
