.s04d-bg{position:absolute;inset:-20px;background:#fff}
.s04d-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(145,188,255,0) 0,rgba(104,163,255,.075) 45%,rgba(0,112,251,.05) 55%,rgba(0,101,228,0) 80%)}
.s04d-dots{position:absolute;left:0;top:0;width:100%;height:100%}
.s04d-wrap{position:absolute;z-index:1;left:0;right:0;bottom:0;top:132px;display:flex;align-items:center;justify-content:center}
.s04d-frame{position:relative;width:78%;max-width:324px;margin:0 auto;aspect-ratio:324/378;user-select:none}
.s04d-content{position:absolute;left:0;top:0;width:324px;height:378px;transform-origin:0 0;transform:scale(var(--s,1))}
.s04d-layout{display:flex;flex-direction:column;gap:16px;padding:0 24px}
.s04d-chat{display:flex;flex-direction:column;gap:24px}
.s04d-bubble,.s04d-panel{border-radius:6px;background:#fff;outline:1px solid rgba(230,236,245,.5);box-shadow:0 20.187px 40.374px -20.187px rgba(0,0,0,.1);font-feature-settings:"ss01"}
.s04d-bubble{padding:7px 15px;font-size:11px;line-height:1.4;font-weight:var(--fw-300);letter-spacing:normal;color:#000;text-align:left}
.s04d-bubble--user{align-self:flex-end;max-width:230px;background:#f8fafd}
.s04d-bubble--agent{max-width:250px}
.s04d-panel{display:flex;flex-direction:column;gap:8px;padding:8px}
.s04d-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;padding:1px}
.s04d-frames{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;column-gap:8px}
.s04d-frame-card{position:relative;overflow:hidden;border-radius:6px;background:#e6ecf5}
.s04d-frame-card::after{content:"";position:absolute;inset:1px;border-radius:5px;background:#fff}
.s04d-pic{position:relative;display:grid;place-items:center;height:112px;padding:10px;overflow:hidden;border-radius:6px 6px 0 0;background:#ecf0f4}
.s04d-glyph{position:relative;width:64px;height:56px;border-radius:6px;background:linear-gradient(160deg,var(--c1),var(--c2))}
.s04d-glyph::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:10px;transform:translateX(-50%);background:rgba(255,255,255,.28)}
.s04d-glyph::after{content:"";position:absolute;left:8px;top:10px;width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.5)}
.s04d-name,.s04d-variant,.s04d-status,.s04d-source{position:relative;padding:0 8px;font-size:9px;line-height:1;font-weight:var(--fw-300);letter-spacing:normal;color:#000;font-feature-settings:"ss01";text-align:left;white-space:nowrap;overflow:hidden;text-overflow:clip}
.s04d-name{margin:10px 0 3px}
.s04d-variant{margin-bottom:8px;color:#51617a}
.s04d-status{margin-bottom:8px;font-weight:var(--fw-400);letter-spacing:-.27px;font-feature-settings:"tnum"}
.s04d-source{padding-bottom:6px;color:#51617a}
.s04d-cta{border-radius:6px;background:rgba(47,98,177,.1)}
.s04d-cta span{display:block;padding:10px 0 12px;font-size:11px;line-height:1.4;font-weight:var(--fw-400);color:#2f62b1;text-align:center;font-feature-settings:"ss01"}
.s04d-word{opacity:1}
@media (min-width:640px){
  .s04d{--s04d-w:min(1000px,82%)}
  .s04-card--support .s04-card__bleed{background:radial-gradient(ellipse 50% 85% at 0 100%,rgba(144,187,255,.55),rgba(144,187,255,0))}
  .s04d-bg{inset:0 0 0 auto;width:var(--s04d-w);background:none}
  .s04d-wrap{left:auto;width:var(--s04d-w);top:0}
  .s04d-frame{width:auto;height:min(378px,92%)}
}
@media (min-width:640px) and (max-width:939px){
  .s04d{--s04d-w:min(62%,440px)}
  .s04d-wrap{justify-content:flex-end;padding-right:24px}
  .s04d-frame{height:min(320px,76%);margin:0}
}
@media (prefers-reduced-motion:no-preference){
  .s04-card--support:not(.is-active) .s04d-bubble,.s04-card--support:not(.is-active) .s04d-panel,.s04-card--support:not(.is-active) .s04d-word{opacity:0}
  .s04-card--support.is-active .s04d-bubble--user{animation:s04d-rise 750ms cubic-bezier(.165,.84,.44,1) 250ms both}
  .s04-card--support.is-active .s04d-bubble--agent{animation:s04d-rise 350ms cubic-bezier(.165,.84,.44,1) 1000ms both}
  .s04-card--support.is-active .s04d-panel{animation:s04d-rise 500ms cubic-bezier(.165,.84,.44,1) 1400ms both}
  .s04-card--support.is-active .s04d-word{animation:s04d-fade 100ms ease-out calc(1200ms + 60ms * var(--i)) both}
}
@keyframes s04d-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes s04d-fade{from{opacity:0}to{opacity:1}}