.tpl-showcase{--tpl-canvas:#f1ece2;--tpl-surface:#faf6f0;--tpl-surface-elev:#fffdf9;--tpl-sunken:#e7e0d3;--tpl-ink:#14161b;--tpl-ink-muted:#565b66;--tpl-ink-faint:#8b909b;--tpl-magenta:#e5318a;--tpl-magenta-deep:#b81b68;--tpl-magenta-tint:#f9e3ee;--tpl-magenta-soft:rgba(229,49,138,0.09);--tpl-line:rgba(20,22,22,0.1);--tpl-line-strong:rgba(20,22,22,0.18);--tpl-spark:#f5a623;--tpl-warn:#9a6312;--tpl-warn-soft:rgba(245,166,35,0.16);--tpl-ok:#1f9d63;--tpl-ok-soft:rgba(31,157,99,0.12);--tpl-hover:rgba(20,22,22,0.04);--tpl-ease:cubic-bezier(0.16,1,0.3,1);--tpl-shadow-rest:0 16px 40px -28px rgba(20,22,27,0.4);--tpl-shadow-lift:0 30px 70px -34px rgba(229,49,138,0.42);font-family:var(--font-sans)}.tpl-stage{position:relative;max-width:1240px;height:540px;margin:44px auto 0}.tpl-card{position:absolute;left:50%;top:50%;display:flex;align-items:stretch;background:var(--tpl-surface);border:1px solid var(--tpl-line);border-radius:20px;overflow:hidden;box-shadow:var(--tpl-shadow-rest);outline:none;will-change:transform,opacity;transition:transform .72s var(--tpl-ease),opacity .72s var(--tpl-ease),box-shadow .72s var(--tpl-ease)}.tpl-card.is-focused,.tpl-card:not(.is-focused):hover{box-shadow:var(--tpl-shadow-lift)}.tpl-card:not(.is-focused):hover{border-color:var(--tpl-magenta)}.tpl-card:focus-visible{box-shadow:var(--tpl-shadow-lift);border-color:var(--tpl-magenta)}.tpl-info{width:286px;flex-shrink:0;min-height:392px;padding:28px 26px;display:flex;flex-direction:column;box-sizing:border-box}.tpl-demo{overflow:hidden;flex-shrink:0;transition:width .72s var(--tpl-ease),opacity .4s var(--tpl-ease)}.tpl-demo-inner{width:344px;height:392px;background:var(--tpl-surface-elev);border-left:1px solid var(--tpl-line);display:flex;flex-direction:column;box-sizing:border-box}.tpl-cta{transition:background .16s var(--tpl-ease),box-shadow .16s var(--tpl-ease),transform .16s var(--tpl-ease)}.tpl-cta:hover{background:var(--tpl-magenta-deep)!important;box-shadow:var(--tpl-shadow-lift);transform:translateY(-1px)}.tpl-nav{transition:background .14s var(--tpl-ease),border-color .14s var(--tpl-ease)}.tpl-nav:hover{background:var(--tpl-hover);border-color:var(--tpl-magenta)}.tpl-dot{transition:width .4s var(--tpl-ease),background .4s var(--tpl-ease)}@keyframes tpl-bubbleIn{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes tpl-livedot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@keyframes tpl-typing{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}.tpl-bubble{animation:tpl-bubbleIn .34s var(--tpl-ease) both}.tpl-livedot{animation:tpl-livedot 1.4s ease-in-out infinite}.tpl-typing-dot{animation:tpl-typing 1.1s ease-in-out infinite}.tpl-typing-dot:nth-child(2){animation-delay:.18s}.tpl-typing-dot:nth-child(3){animation-delay:.36s}@media (max-width:899px){.tpl-stage{height:auto;min-height:0}.tpl-card{display:none}.tpl-card.is-focused{display:flex;flex-direction:column;position:static;left:auto;top:auto;transform:none!important;opacity:1!important;width:100%;max-width:420px;margin:0 auto}.tpl-card.is-focused .tpl-info{width:100%;min-height:0}.tpl-card.is-focused .tpl-demo{width:100%!important;opacity:1!important;border-top:1px solid var(--tpl-line)}.tpl-card.is-focused .tpl-demo-inner{width:100%;height:360px;border-left:none}}@media (prefers-reduced-motion:reduce){.tpl-showcase .tpl-bubble,.tpl-showcase .tpl-livedot,.tpl-showcase .tpl-typing-dot{animation:none!important}.tpl-showcase .tpl-card,.tpl-showcase .tpl-cta,.tpl-showcase .tpl-demo,.tpl-showcase .tpl-dot{transition:none!important}}