/* Native Social Links renderer. The entire OBS canvas stays transparent. */
*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:transparent!important;overflow:hidden}
.social-canvas{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--text);font-family:var(--font)}
.social-scene{position:absolute;transform-origin:0 0;perspective:1000px}
.social-overlay{display:flex;align-items:stretch;gap:var(--gap);width:max-content;padding:4px;perspective:1000px}
.social-overlay[data-layout="vertical"]{flex-direction:column}
.social-item{position:relative;display:flex;align-items:center;gap:var(--content-gap);width:var(--card-width);flex:0 0 var(--card-width);padding:var(--padding);border:var(--border-width) solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);overflow:hidden;isolation:isolate;box-shadow:0 8px 18px rgb(0 0 0 / var(--shadow)),inset 0 1px #ffffff0b}
.social-overlay[data-layout="vertical"] .social-item{flex:none}
.social-item[hidden],.social-empty[hidden]{display:none!important}
.social-icon{display:grid;place-items:center;position:relative;flex:0 0 var(--icon-size);width:var(--icon-size);height:var(--icon-size);border-radius:var(--icon-radius);border:var(--border-width) solid color-mix(in srgb,var(--item-accent) 40%,transparent);background:color-mix(in srgb,var(--item-accent) 14%,transparent);color:var(--icon-color);overflow:hidden}
.social-icon svg{display:block;width:60%;height:60%;fill:currentColor;flex:none}
.social-text{position:relative;flex:1;min-width:0;text-align:var(--text-align)}
.social-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;min-width:0}
.social-name{font-size:var(--label-size);font-weight:550;color:var(--label);line-height:1.4;min-width:0;overflow-wrap:anywhere}
.social-handle{display:block;font-size:var(--handle-size,var(--font-size));font-weight:var(--weight);letter-spacing:-.035em;line-height:1.2;white-space:nowrap;overflow:visible}
.social-cta{font-size:var(--cta-size);font-weight:650;letter-spacing:.05em;color:var(--item-accent);border:1px solid color-mix(in srgb,var(--item-accent) 22%,transparent);background:color-mix(in srgb,var(--item-accent) 6%,transparent);border-radius:4px;padding:3px 5px;line-height:1.3;max-width:45%;overflow-wrap:anywhere}
.social-subtitle{display:block;margin-top:6px;color:var(--label);font-size:var(--label-size);line-height:1.4;overflow-wrap:anywhere}
.social-cta:empty,.social-subtitle:empty,.social-name:empty{display:none}
.social-overlay[data-icons="false"] .social-icon,.social-item[data-icon="false"] .social-icon,.social-overlay[data-labels="false"] .social-name,.social-overlay[data-cta="false"] .social-cta{display:none}
.social-overlay[data-labels="false"][data-cta="false"] .social-meta{display:none}
.social-overlay[data-icon-position="right"] .social-icon{order:2}
.social-overlay[data-icon-position="top"] .social-item{flex-direction:column;align-items:center}.social-overlay[data-icon-position="top"] .social-text{width:100%;flex:none}
.social-overlay[data-icon-style="solid"] .social-icon{background:var(--item-accent);border-color:var(--item-accent)}
.social-overlay[data-icon-style="outline"] .social-icon{background:transparent;border-color:var(--item-accent);color:var(--item-accent)}
.social-overlay[data-icon-style="plain"] .social-icon{background:transparent;border-color:transparent;color:var(--item-accent)}
.social-item:before{content:'';position:absolute;inset:0 15% auto;height:1px;background:linear-gradient(90deg,transparent,var(--item-accent),transparent);opacity:.65;pointer-events:none}
.social-item:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 28px color-mix(in srgb,var(--item-accent) var(--glow),transparent);opacity:.3;pointer-events:none;z-index:-1}
.card-shine{position:absolute;inset:-50% auto -50% -60%;width:30%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#ffffff20,transparent);opacity:0;pointer-events:none}
.social-overlay[data-style="glass"] .social-item{background:linear-gradient(145deg,#ffffff12,transparent 65%),var(--surface);backdrop-filter:blur(var(--blur));border-color:color-mix(in srgb,var(--border) 75%,#ffffff25)}
.social-overlay[data-style="split"] .social-item{border-left:4px solid var(--item-accent)}
.social-overlay[data-style="split"] .social-icon{border-radius:calc(var(--icon-radius) * .6);background:var(--item-accent);color:var(--icon-color)}
.social-overlay[data-style="neon"] .social-item{border-color:var(--item-accent);box-shadow:inset 0 0 16px color-mix(in srgb,var(--item-accent) calc(var(--glow) * .4),transparent),0 5px 16px rgb(0 0 0 / var(--shadow))}
.social-overlay[data-style="neon"] .social-icon{box-shadow:0 0 20px color-mix(in srgb,var(--item-accent) var(--glow),transparent);border-color:var(--item-accent)}
.social-overlay[data-style="capsule"] .social-item{border-radius:var(--radius);background:linear-gradient(115deg,color-mix(in srgb,var(--item-accent) 8%,transparent),transparent 60%),var(--surface)}
.social-overlay[data-style="capsule"] .social-icon{border-radius:50%}.social-overlay[data-style="capsule"] .social-cta{background:var(--item-accent);color:var(--icon-color);border:0;border-radius:20px}
.social-overlay[data-style="minimal"] .social-item{border-color:transparent;background:transparent;box-shadow:none}
.social-overlay[data-style="minimal"] .social-item:before,.social-overlay[data-style="minimal"] .social-item:after{display:none}
.social-overlay[data-style="minimal"] .social-icon{border-color:transparent;background:transparent;color:var(--item-accent)}
.social-overlay[data-style="broadcast"]{border:var(--border-width) solid var(--border);border-radius:var(--radius);background:var(--surface);padding:4px;gap:var(--gap)}
.social-overlay[data-style="broadcast"] .social-item{border:0;border-radius:0;background:transparent;box-shadow:none}
.social-overlay[data-style="broadcast"] .social-item+.social-item{border-left:1px solid var(--border)}
.social-overlay[data-style="broadcast"][data-layout="vertical"] .social-item+.social-item{border-left:0;border-top:1px solid var(--border)}
.social-overlay[data-style="broadcast"] .social-item:before,.social-overlay[data-style="broadcast"] .social-item:after{display:none}
.social-overlay[data-style="outline"] .social-item{background:transparent;border-color:var(--item-accent);box-shadow:none}
.social-overlay[data-style="outline"] .social-item:after{display:none}
/* A chosen icon treatment remains editable in every design. */
.social-overlay[data-icon-style="soft"] .social-icon{border-radius:var(--icon-radius);border:var(--border-width) solid color-mix(in srgb,var(--item-accent) 40%,transparent);background:color-mix(in srgb,var(--item-accent) 14%,transparent);color:var(--icon-color)}
.social-overlay[data-icon-style="solid"] .social-icon{border-radius:var(--icon-radius);background:var(--item-accent);border-color:var(--item-accent);color:var(--icon-color)}
.social-overlay[data-icon-style="outline"] .social-icon{border-radius:var(--icon-radius);background:transparent;border-color:var(--item-accent);color:var(--item-accent)}
.social-overlay[data-icon-style="plain"] .social-icon{border-radius:var(--icon-radius);background:transparent;border-color:transparent;color:var(--item-accent)}
.social-overlay[data-phase="hidden"]{opacity:0;visibility:hidden}
.social-overlay[data-phase="enter"] .social-item{animation:var(--entrance) var(--speed) cubic-bezier(.18,.75,.2,1) both;animation-delay:calc(var(--index) * var(--stagger))}
.social-overlay[data-phase="enter"][data-sheen="true"] .card-shine{animation:socialShine calc(var(--speed) * 1.6) ease both;animation-delay:calc(var(--speed) * .6 + var(--index) * var(--stagger))}
.social-overlay[data-phase="enter"][data-icon-motion="true"] .social-icon{animation:socialIcon var(--speed) cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--index) * var(--stagger))}
.social-overlay[data-phase="exit"] .social-item{animation:var(--exit) var(--speed) ease both;animation-delay:calc(var(--index) * var(--stagger) * .3)}
.social-overlay[data-animation="none"] .social-item,.social-overlay[data-animation="none"] .social-icon,.social-overlay[data-animation="none"] .card-shine{animation:none!important}
.social-empty{display:flex;align-items:center;justify-content:center;min-width:280px;height:100px;text-align:center;font:14px system-ui;color:#888;border:1px dashed #ffffff30;border-radius:12px;padding:18px;background:#151515}
@keyframes socialCinematicIn{from{opacity:0;transform:translateY(18px) rotateX(14deg) scale(.94);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes socialCinematicOut{to{opacity:0;transform:translateY(-12px) rotateX(-9deg) scale(.97);filter:blur(5px)}}
@keyframes socialSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes socialSlideOut{to{opacity:0;transform:translateY(-20px)}}
@keyframes socialFadeIn{from{opacity:0}to{opacity:1}}@keyframes socialFadeOut{to{opacity:0}}
@keyframes socialZoomIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}@keyframes socialZoomOut{to{opacity:0;transform:scale(.92)}}
@keyframes socialShine{0%{left:-60%;opacity:0}20%{opacity:.7}100%{left:140%;opacity:0}}
@keyframes socialIcon{from{opacity:0;transform:rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.social-item,.social-icon,.card-shine{animation:none!important;filter:none!important;transform:none!important}}