/* Hero live demo */
.hd{--e:cubic-bezier(.22,1,.36,1);position:relative;max-width:980px;margin:3.5rem auto 0;perspective:1400px;text-align:left}
.hd-stage{position:relative;border:1px solid var(--line-strong);border-radius:22px;background:#050505;overflow:hidden;aspect-ratio:16/10;transform-style:preserve-3d;transition:transform .6s var(--e);box-shadow:0 40px 120px -40px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.02) inset;animation:hdBreath 6s ease-in-out infinite}
@keyframes hdBreath{0%,100%{box-shadow:0 40px 120px -40px rgba(255,255,255,.10)}50%{box-shadow:0 50px 140px -30px rgba(255,255,255,.2)}}
.hd-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);background:#0a0a0a}
.hd-bar i{width:10px;height:10px;border-radius:50%;background:#2a2a2a}
.hd-url{margin-left:12px;flex:1;max-width:320px;height:22px;border-radius:7px;background:#141414;color:var(--faint);font-size:11px;display:flex;align-items:center;padding:0 10px}
.hd-body{position:absolute;inset:38px 0 0;display:grid;grid-template-columns:1fr 300px}
.hd-feed{position:relative;overflow:hidden;padding:18px 22px;border-right:1px solid var(--line)}
.hd-track{display:flex;flex-direction:column;gap:12px;transition:transform 1.4s var(--e)}
.hd-post{border:1px solid var(--line);border-radius:14px;padding:14px;background:#0b0b0b;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s var(--e),transform .7s var(--e),border-color .4s}
.hd-post.in{opacity:1;transform:none}
.hd-post.cap{border-color:rgba(255,255,255,.35)}
.hd-post.cap .hd-chk{opacity:1;transform:scale(1)}
.hd-ph{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:relative}
.hd-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a3a3a,#1a1a1a);flex:none}
.hd-nm{font-size:12.5px;font-weight:600;color:var(--text)}.hd-rl{font-size:11px;color:var(--faint)}
.hd-chk{position:absolute;right:0;top:4px;font-size:10px;font-weight:650;color:#000;background:#fff;border-radius:99px;padding:2px 8px;opacity:0;transform:scale(.6);transition:.4s var(--e)}
.hd-tx{font-size:12.5px;line-height:1.5;color:var(--muted)}
.hd-ln{height:7px;border-radius:4px;background:#161616;margin-top:8px}
.hd-side{padding:16px;display:flex;flex-direction:column;gap:12px;background:#070707}
.hd-brand{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13px}
.hd-brand img{width:18px;height:18px}
.hd-btn{border:1px solid var(--line-strong);border-radius:99px;padding:9px 12px;font-size:12px;font-weight:600;text-align:center;color:var(--text);transition:background .3s,color .3s,transform .2s var(--e)}
.hd-btn.pri{background:#fff;color:#000;border-color:#fff}
.hd-btn.press{transform:scale(.94)}
.hd-stat{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint)}
.hd-stat b{color:var(--text);font-variant-numeric:tabular-nums}
.hd-rec{width:7px;height:7px;border-radius:50%;background:var(--err);display:inline-block;margin-right:6px;animation:hdPulse 1.2s ease-in-out infinite}
@keyframes hdPulse{50%{opacity:.25}}
.hd-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:#0b0b0b;opacity:0;transform:translateY(10px);transition:.6s var(--e)}
.hd-card.in{opacity:1;transform:none}
.hd-score{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.hd-score b{font-size:28px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hd-score span{font-size:11px;color:var(--faint)}
.hd-meter{height:4px;border-radius:2px;background:#1a1a1a;overflow:hidden;margin-bottom:10px}
.hd-meter i{display:block;height:100%;width:0;background:#fff;transition:width 1.6s var(--e)}
.hd-draft{font-size:12px;line-height:1.5;color:var(--text);min-height:5.4em}
.hd-draft::after{content:"";display:inline-block;width:1.5px;height:1em;background:#fff;vertical-align:-2px;margin-left:1px;animation:hdPulse .9s steps(1) infinite}
.hd-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;background:#fff;color:#000;font-size:12px;font-weight:600;border-radius:99px;padding:7px 14px;transition:.5s var(--e);z-index:4}
.hd-toast.in{opacity:1;transform:translate(-50%,0)}
.hd-cursor{position:absolute;left:0;top:0;width:20px;height:20px;z-index:5;pointer-events:none;transition:transform 1.1s var(--e);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hd-cursor::after{content:"";position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;opacity:0;transform:scale(.4)}
.hd-cursor.click::after{animation:hdRip .5s var(--e)}
@keyframes hdRip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.hd-glow{position:absolute;inset:-10% -5% auto;height:80%;background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(255,255,255,.10),transparent 70%);pointer-events:none;z-index:-1;animation:hdGlow 7s ease-in-out infinite}
@keyframes hdGlow{50%{opacity:.55;transform:scale(1.05)}}
.hd-cap{margin-top:.9rem;text-align:center;color:var(--faint);font-size:.8rem}
@media (max-width:720px){
  .hd{margin-top:2.5rem}
  .hd-stage{aspect-ratio:9/15;border-radius:18px}
  .hd-body{grid-template-columns:1fr;grid-template-rows:46% 54%}
  .hd-feed{border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .hd-side{padding:12px;gap:9px}
  .hd-url{max-width:none}
}
/* video render modes */
html.hd-render body>*:not(.hd-render-wrap){display:none!important}
.hd-render-wrap{position:fixed;inset:0;display:grid;place-items:center;background:#000}
.hd-render-wrap .hd{margin:0;width:94vw;max-width:none}
html.hd-v .hd-stage{aspect-ratio:auto;height:92vh}
html.hd-h .hd-stage{aspect-ratio:auto;height:88vh}
@media (prefers-reduced-motion:reduce){
  .hd-stage,.hd-glow,.hd-rec,.hd-draft::after{animation:none}
  .hd *,.hd-stage{transition:none!important}
  .hd-cursor{display:none}
}