.socket-teaser-section{width:100%;max-width:var(--page-max-width);margin:var(--section-gap) auto 0}.socket-teaser-card{--socket-color:#b84dea;--socket-inset:14px;--socket-card-radius:calc(20px + var(--socket-inset));width:100%;padding:var(--socket-inset) var(--socket-inset) var(--socket-inset) 48px;border-radius:var(--socket-card-radius);background:linear-gradient(to top right, var(--color-bg-raised), color-mix(in srgb, var(--color-bg-raised) 5%, transparent) 65%);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;display:grid;position:relative}.socket-teaser-card>:not(.glow){z-index:1;position:relative}.socket-teaser-card:before{content:"";opacity:.4;z-index:0;border-radius:inherit;background:linear-gradient(to bottom, color-mix(in srgb, var(--color-text-3) 45%, transparent), color-mix(in srgb, var(--color-text-3) 10%, transparent) 70%, transparent);pointer-events:none;padding:1px;position:absolute;inset:-6px;-webkit-mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.socket-teaser-card:after{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle, color-mix(in srgb, var(--socket-color) 60%, transparent), transparent 70%);filter:blur(40px);opacity:.3;width:60%;height:70px;position:absolute;bottom:-30px;left:-12%}.socket-teaser-card .glow{z-index:1;border-radius:var(--socket-card-radius);opacity:.6;inset:0;scale:1 -1}.socket-teaser-card .glow:after{border-radius:var(--socket-card-radius);offset-path:rect(0 100% 100% 0 round var(--socket-card-radius));offset-distance:2%;background:linear-gradient(90deg, var(--socket-color) 20%, #0000);opacity:.45;width:160%;height:115%}.socket-teaser-copy{flex-direction:column;align-items:flex-start;padding-block:32px;display:flex}.socket-teaser-badge{--socket-mark-radius:calc(56px * 135 / 512);border-radius:calc(var(--socket-mark-radius) + 7px);background:color-mix(in srgb, var(--color-bg) 45%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;align-items:center;gap:4px;margin-bottom:20px;padding:7px 7px 5px;display:flex;position:relative}.socket-teaser-badge .splash-header-mark{border-radius:var(--socket-mark-radius);width:56px;height:56px}.socket-teaser-badge .eyebrow-pill{letter-spacing:.01em;background:0 0;border:0;justify-content:center;width:56px;padding:2px 0;font-size:11px}.socket-teaser-badge:before{content:"";border-radius:inherit;background:linear-gradient(to bottom, color-mix(in srgb, var(--color-text-3) 45%, transparent), color-mix(in srgb, var(--color-text-3) 8%, transparent) 70%, transparent);pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.socket-teaser-heading{letter-spacing:-.01em;color:var(--color-text-1);text-wrap:pretty;font-size:24px;font-weight:600;line-height:1.2}.socket-teaser-subheading{color:var(--color-text-2);max-width:46ch;margin-top:8px;font-size:14px;line-height:1.5}.socket-teaser-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;display:flex}.socket-teaser-cta{color:var(--color-bg);background:var(--color-text-1);border-radius:var(--radii-full);align-items:center;gap:6px;padding:11px 20px;font-size:14px;font-weight:500;transition:opacity .15s;display:inline-flex}.socket-teaser-cta:hover{opacity:.85}.socket-teaser-cta svg{transition:transform .15s}.socket-teaser-cta:hover svg{transform:translate(2px)}.socket-teaser-link{color:var(--color-text-2);border-radius:var(--radii-full);padding:11px 16px;font-size:14px;font-weight:500;transition:color .15s,background-color .15s}.socket-teaser-link:hover{color:var(--color-text-1);background:var(--color-bg-raised-white)}.socket-teaser-screen{min-width:0}.socket-teaser-screen:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(closest-side, color-mix(in srgb, var(--socket-color) 40%, transparent), transparent);filter:blur(60px);opacity:.35;position:absolute;inset:10% -10% 10% 20%}.socket-teaser-screen .device{--device-radius:20px}.socket-teaser-screen .device[data-notch] .outline:after{height:20%}.socket-teaser-screen .device .wallpaper{background:radial-gradient(90% 80% at 88% 0%, color-mix(in srgb, var(--socket-color) 38%, transparent), #0000 60%), radial-gradient(80% 70% at 12% 100%, #4d8dff2e, #0000 60%), linear-gradient(160deg, #1b0f30 0%, #0d0a16 55%, #07070a 100%)}.socket-teaser-card:has(.socket-teaser-screen:not([data-revealed])) .device[data-notch],.socket-teaser-card:has(.socket-teaser-screen:not([data-revealed])) .device :is(.notch-content,.notch-glow),.socket-teaser-card:has(.socket-teaser-screen:not([data-revealed])) .hint,.socket-teaser-card:has(.socket-teaser-screen:not([data-revealed])) .hint *,.socket-teaser-card:has(.socket-teaser-screen:not([data-revealed])) .smoke-text-char{animation-play-state:paused}.socket-teaser-peers{flex-direction:column;align-items:center;display:flex}.socket-teaser-live{background:#3ddc84;border-radius:50%;width:6px;height:6px;margin-bottom:7px;animation:2s ease-out infinite socket-teaser-live}.socket-teaser-avatar{color:#0a0a0c;background:var(--cursor-color);width:16px;height:16px;box-shadow:0 0 0 2px var(--device-bg,#000);border-radius:50%;place-items:center;font-size:8px;font-weight:700;line-height:1;display:grid}.socket-teaser-avatar+.socket-teaser-avatar{margin-top:-3px}.socket-teaser-avatar[data-you]{animation:.36s cubic-bezier(.34,1.56,.64,1) both socket-teaser-pop}.socket-teaser-stage{inset:4px 4px 4px calc(var(--notch-depth,38px) + 4px);z-index:2;border-radius:0 calc(var(--device-radius) - 4px) calc(var(--device-radius) - 4px) 0;cursor:none;-webkit-user-select:none;user-select:none;background-image:radial-gradient(#ffffff12 1px,#0000 1px);background-size:18px 18px;position:absolute;overflow:hidden}.socket-teaser-bar{color:#fff9;justify-content:space-between;align-items:center;gap:8px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;display:flex;position:absolute;top:12px;left:12px;right:12px}.socket-teaser-count{color:#fffc;border-radius:var(--radii-full);font-variant-numeric:tabular-nums;background:#ffffff12;border:1px solid #ffffff14;padding:3px 8px}.socket-teaser-log{color:#fff6;pointer-events:none;flex-direction:column;gap:2px;margin:0;padding:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:10.5px;line-height:1.5;list-style:none;display:flex;position:absolute;bottom:10px;left:12px;right:88px}.socket-teaser-log li{white-space:nowrap;text-overflow:ellipsis;gap:8px;animation:.32s cubic-bezier(.22,.61,.36,1) both socket-teaser-log-in;display:flex;overflow:hidden}.socket-teaser-log li:nth-last-child(4){opacity:.3}.socket-teaser-log li:nth-last-child(3){opacity:.55}.socket-teaser-log li:last-child{color:#ffffffbf}.socket-teaser-log-name{color:color-mix(in srgb, var(--socket-color) 70%, #fff)}.socket-teaser-log-detail{text-overflow:ellipsis;overflow:hidden}.socket-teaser-cursor{z-index:3;color:var(--cursor-color);pointer-events:none;will-change:translate;position:absolute;top:0;left:0}.socket-teaser-cursor svg{filter:drop-shadow(0 1px 2px #00000073);display:block;translate:-3px -2px}.socket-teaser-cursor-label{color:#0a0a0c;white-space:nowrap;background:var(--cursor-color);border-radius:3px 7px 7px;padding:2px 7px;font-size:11px;font-weight:600;line-height:1.4;position:absolute;top:15px;left:11px}.socket-teaser-cursor-chat{color:#fff;white-space:nowrap;border:1px solid color-mix(in srgb, var(--cursor-color) 55%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform-origin:0 0;opacity:0;filter:blur(2px);background:#101014d1;border-radius:3px 12px 12px;padding:5px 10px;font-size:12px;line-height:1.3;transition:opacity .22s,scale .32s cubic-bezier(.34,1.56,.64,1),translate .32s cubic-bezier(.22,.61,.36,1),filter .22s;position:absolute;top:38px;left:11px;translate:0 -6px;scale:.7}.socket-teaser-cursor[data-chatting] .socket-teaser-cursor-chat{opacity:1;filter:none;translate:0;scale:1}.socket-teaser-cursor[data-you]{z-index:4;opacity:0;will-change:translate, opacity;transition:opacity .16s}.socket-teaser-screen[data-present] .socket-teaser-cursor[data-you]{opacity:1}.socket-teaser-ripple{z-index:2;pointer-events:none;border:1.5px solid #01e6ca;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;animation:.7s cubic-bezier(.22,.61,.36,1) forwards socket-teaser-ripple;position:absolute}.socket-teaser-hint{transition:opacity .24s}.socket-teaser-hint .hint{z-index:11;pointer-events:none;bottom:14px;left:auto;right:18px}.socket-teaser-card:has(.socket-teaser-screen[data-present]) .socket-teaser-hint{opacity:0}@keyframes socket-teaser-live{0%{box-shadow:0 0 #3ddc8499}70%,to{box-shadow:0 0 0 6px #3ddc8400}}@keyframes socket-teaser-pop{0%{opacity:0;scale:.3}}@keyframes socket-teaser-log-in{0%{opacity:0;filter:blur(2px);translate:0 6px}}@keyframes socket-teaser-ripple{to{opacity:0;scale:6}}@media (prefers-reduced-motion:reduce){.socket-teaser-live,.socket-teaser-avatar[data-you],.socket-teaser-log li,.socket-teaser-ripple{animation:none}.socket-teaser-cursor-chat{transition:opacity .22s}}@media (max-width:860px){.socket-teaser-card{padding:8px var(--socket-inset) var(--socket-inset);grid-template-columns:1fr;gap:8px}.socket-teaser-copy{padding:24px 10px}}@media (max-width:760px){.socket-teaser-section{padding:0 20px}.socket-teaser-actions{width:100%}.socket-teaser-cta{flex:1;justify-content:center}}