/* The MeltKit card, bottom left. Sits under the app's modal dialogs by being plain page content.
   As wide as the library column and no wider: any more and it covers play and the timeline. */
#promo{position:fixed;left:10px;bottom:10px;z-index:40;width:208px;overflow:hidden;border:1px solid var(--editor-divider);border-radius:var(--editor-panel-radius);background:var(--panel,#fff);color:var(--ui-text);box-shadow:0 12px 40px #0003;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
#promo.visible{opacity:1;transform:none}
#promo-link{display:block;padding:0 0 12px;color:inherit;text-decoration:none}
#promo-link img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;margin-bottom:10px}
#promo-link strong{display:block;padding:0 12px;font-size:13px;font-weight:550;line-height:18px}
#promo-link>span{display:block;padding:0 12px;margin-top:3px;font-size:11px;line-height:16px;color:var(--ui-secondary)}
#promo-link>.promo-cta{margin-top:8px;font-weight:550;color:var(--ui-text)}
#promo-link:hover .promo-cta{text-decoration:underline;text-underline-offset:3px}
#promo-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;background:#0009;color:#fff;cursor:pointer}
#promo-close:hover{background:#000c}
#promo-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:1250px){#promo{width:186px}}
@media(prefers-reduced-motion:reduce){#promo{transition:none;transform:none}}