/* C2 design – 07-side-actions. Extracted verbatim from claude-design/c2-website/pages/*.html (lines 291-309). Load order matters: keep the numeric prefix order. */
.social{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:1280px;box-sizing:border-box;padding:0 32px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.social{transition:max-width .6s cubic-bezier(.22,1,.36,1),padding .6s cubic-bezier(.22,1,.36,1)}
.social.far{max-width:100vw;padding:0 16px}
.social .soc{pointer-events:auto}
.soc{display:flex;align-items:center;justify-content:flex-end;height:44px;border-radius:999px;color:#E4E9EE;text-decoration:none;background:rgba(255,255,255,0);border:1px solid rgba(255,255,255,0);box-sizing:border-box;box-shadow:0 8px 28px rgba(0,100,160,0);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .25s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
.soc-label{display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:600;color:#2B2C2D;transform:translateX(12px);transition:max-width .5s cubic-bezier(.22,1,.36,1),opacity .3s ease .05s,transform .5s cubic-bezier(.22,1,.36,1)}
.soc-ico{flex:none;width:42px;height:42px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 24px rgba(0,0,0,0.18);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease,border-color .3s ease}
.soc:hover .soc-ico,.soc:focus-visible .soc-ico{background:rgba(255,255,255,0);border-color:rgba(255,255,255,0);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.soc-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soc:hover,.soc:focus-visible{background:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.8);box-shadow:0 8px 28px rgba(0,100,160,0.16),inset 0 1px 0 rgba(255,255,255,0.8);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);color:#007DB3;outline:none}
.soc:hover .soc-label,.soc:focus-visible .soc-label{max-width:220px;opacity:1;transform:translateX(0);padding-left:18px}
.soc:hover .soc-ico,.soc:focus-visible .soc-ico{transform:scale(1.12)}
.soc.vert{flex-direction:column;justify-content:flex-start;height:auto;width:44px;padding-bottom:14px}
.soc.vert:not(:hover):not(:focus-visible){background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.04);box-shadow:0 6px 24px rgba(0,0,0,0.18);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
.soc.vert .soc-ico{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.soc.vert .soc-label,.soc.vert:hover .soc-label,.soc.vert:focus-visible .soc-label{writing-mode:vertical-rl;max-width:none;max-height:none;opacity:1;transform:none;padding:2px 0 0;font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#E4E9EE;transition:color .3s ease}
.soc.vert:hover .soc-label,.soc.vert:focus-visible .soc-label{color:#007DB3}
@media(max-width:760px){.social,.social.far{padding:0 12px}.soc:not(.vert) .soc-label{display:none}}
@media(prefers-reduced-motion:reduce){.soc,.soc-label,.soc-ico{transition:none}}