/* =========================================================
   HeadcanonLab — Live Preview widget
   The auto-typing "example" card for a tool's hero section.
   Scoped under .hc-live-preview, reuses --hccb-* tokens.
   ========================================================= */
.hc-live-preview{
  background:var(--hccb-paper-2);
  box-shadow:var(--hccb-shadow);
  padding:26px 28px 22px;
  position:relative;
  max-width:520px;
  font-family:'Inter',sans-serif;
  color:var(--hccb-ink);
  box-sizing:border-box;
}
.hc-live-preview *{ box-sizing:border-box; }
.hc-live-preview::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e2685a, var(--hccb-red-dark));
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}
.hc-lp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.hc-lp-pair{
  font-family:'Special Elite',monospace;font-size:12px;letter-spacing:0.08em;
  color:var(--hccb-ink-faint);text-transform:uppercase;
}
.hc-lp-live{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--hccb-red-dark);
}
.hc-lp-live span{width:7px;height:7px;border-radius:50%;background:var(--hccb-red);animation:hcLpPulse 1.6s infinite;}
@keyframes hcLpPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.hc-lp-text{
  font-family:'Caveat',cursive;font-size:25px;line-height:1.4;color:var(--hccb-ink);font-weight:600;
  min-height:100px;
}
.hc-lp-cursor{display:inline-block;width:2px;height:22px;background:var(--hccb-ink);margin-left:2px;
  vertical-align:middle;animation:hcLpBlink 0.9s step-end infinite;}
@keyframes hcLpBlink{0%,100%{opacity:1;}50%{opacity:0;}}

.hc-lp-foot{border-top:1px solid var(--hccb-line);margin-top:18px;padding-top:14px;}
.hc-lp-foot p{font-size:12.5px;color:var(--hccb-ink-faint);margin:0;}

@media (max-width:600px){
  .hc-live-preview{padding:22px 20px 18px;max-width:100%;}
  .hc-lp-text{font-size:22px;min-height:120px;}
}