.social-comment-example{scroll-margin-top:6rem;max-width:68rem;margin-inline:auto;overflow:hidden;border:1px solid var(--border);border-radius:1.5rem;background:var(--card);text-align:left;box-shadow:0 18px 65px -40px #25205430}.social-comment-example-bar,.social-comment-example-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem}.social-comment-example-bar{border-bottom:1px solid var(--border)}.social-comment-example-identity{display:flex;align-items:center;gap:.75rem}.social-comment-example-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:.75rem;background:var(--background)}.social-comment-example-identity h2{font-size:.9rem;font-weight:650}.social-comment-example-identity p,.social-comment-example-footer p{margin-top:.2rem;font-size:.75rem;line-height:1.5}.social-comment-example-controls{min-width:0;padding:1.5rem}.social-comment-example-body{display:flex;flex-direction:column}.social-comment-example-step{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600}.social-comment-example-step>span{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;color:var(--primary);background:color-mix(in oklch,var(--primary) 9%,var(--card));font-size:.65rem}.social-comment-example-controls h3{max-width:18rem;margin-top:1rem;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em;text-wrap:balance;font-weight:650;line-height:1.25}.social-comment-example-description{margin-top:.75rem;font-size:.85rem;line-height:1.7}.social-comment-example-presets{display:flex;flex-wrap:wrap;gap:.25rem;margin-block:1.25rem}.social-comment-example-field+.social-comment-example-field{margin-top:1rem}.social-comment-example-field textarea{margin-top:.5rem;resize:vertical;font-size:.85rem;line-height:1.65}.social-comment-example-hint{margin-top:.9rem;font-size:.72rem;line-height:1.6}.social-comment-example-stage{display:flex;min-width:0;flex-direction:column;order:-1;border-top:1px solid var(--border);background:radial-gradient(ellipse at 75% 20%,#eceaff 0,transparent 65%),linear-gradient(145deg,#f1f4fb,#f8f9fd)}.social-comment-example-preview-label{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.25rem 1.5rem 0}.social-comment-example-live{display:inline-flex;align-items:center;gap:.4rem;color:#426a5a;font-size:.7rem}.social-comment-example-live>span{width:.375rem;height:.375rem;border-radius:50%;background:#3c8c6b}.social-comment-example-scene{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1.5rem}.social-comment-example-preview-frame{width:100%;max-width:25.3125rem;margin-inline:auto;overflow:hidden;border:1px solid #e0e3ec;border-radius:1rem;background:#fff;box-shadow:0 22px 40px -20px #25304250,0 2px 8px #25304214}.social-comment-example-preview-frame .cs-comments{min-height:16rem}.social-comment-example-proof{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:1rem;font-size:.7rem}.social-comment-example-footer{border-top:1px solid var(--border);background:var(--background)}.social-comment-example-feedback{padding-inline:1.5rem;color:var(--foreground);font-size:.75rem;line-height:2.5}.social-comment-example-feedback:empty{display:none}@media(min-width:48rem){.social-comment-example-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.social-comment-example-controls{align-self:center;padding:2rem}.social-comment-example-stage{order:0;border-top:0;border-left:1px solid var(--border);min-height:32rem}.social-comment-example-scene{padding:1.5rem 2rem}}@media(max-width:30rem){.social-comment-example-bar,.social-comment-example-footer{padding-inline:1rem}.social-comment-example-controls,.social-comment-example-scene{padding:1.25rem 1rem}.social-comment-example-footer{align-items:stretch;flex-direction:column}}.social-result-comparison{scroll-margin-top:6rem}.social-result-showcase{--showcase-wash: #edf0ff;--showcase-accent: #6353cf;position:relative;display:grid;max-width:68rem;margin-inline:auto;overflow:hidden;border:1px solid var(--border);border-radius:1.5rem;background:var(--card);text-align:left;box-shadow:0 18px 65px -40px #25205430}.social-result-showcase[data-tone=mint]{--showcase-wash: #e9f5ef;--showcase-accent: #35765c}.social-result-showcase[data-tone=rose]{--showcase-wash: #fcf0f2;--showcase-accent: #ad4f6f}.social-result-showcase[data-tone=blue]{--showcase-wash: #edf4fc;--showcase-accent: #426aab}.social-result-showcase[data-tone=neutral]{--showcase-wash: #f1efed;--showcase-accent: #75645a}.social-result-showcase-input{min-width:0;align-self:center;padding:1.5rem}.social-result-showcase-kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--showcase-accent);font-size:.75rem;font-weight:600}.social-result-showcase-intro h3{max-width:18rem;margin-top:.75rem;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:650;line-height:1.2;letter-spacing:-.035em;text-wrap:balance}.social-result-showcase-recipe{margin-top:1.5rem;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:var(--background)}.social-result-showcase-recipe-header{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)}.social-result-showcase-recipe-header h4{flex:1;font-size:.75rem;font-weight:600}.social-result-showcase-recipe-header>svg{color:var(--muted-foreground)}.social-result-showcase-step{display:inline-grid;flex-shrink:0;place-items:center;width:1.25rem;height:1.25rem;border:1px solid color-mix(in oklch,var(--showcase-accent) 18%,transparent);border-radius:50%;color:var(--showcase-accent);font-size:.625rem;font-weight:600}.social-result-showcase-photo{float:right;margin:1rem 1rem .5rem .75rem;overflow:hidden;border:1px solid var(--border);border-radius:.5rem;background:var(--card)}.social-result-showcase-photo img{width:4.5rem;height:5.5rem;object-fit:contain}.social-result-showcase-fields{display:flow-root;padding:.25rem 1rem .5rem}.social-result-showcase-fields>div{padding-block:.65rem}.social-result-showcase-fields>div+div{border-top:1px solid var(--border)}.social-result-showcase-fields dt{color:var(--muted-foreground);font-size:.6875rem;line-height:1.5}.social-result-showcase-fields dd{margin-top:.2rem;overflow-wrap:anywhere;color:var(--foreground);font-size:.8125rem;line-height:1.6}.social-result-showcase-arrow{display:none}.social-result-showcase-output{position:relative;display:flex;min-width:0;flex-direction:column;order:-1;padding:1.25rem;background:radial-gradient(ellipse at 50% 45%,#fff 0,#ffffff55 42%,transparent 70%),var(--showcase-wash)}.social-result-showcase-output-label{display:flex;align-items:center;gap:.5rem;color:var(--showcase-accent);font-size:.75rem;font-weight:600}.social-result-showcase-artwork{display:grid;flex:1;place-items:center;min-height:20rem;padding:1.5rem .5rem 1rem}.social-result-showcase-frame{max-width:100%;overflow:hidden;border:1px solid #ffffffb3;border-radius:.875rem;background:#fff;box-shadow:0 22px 40px -20px #25304250,0 2px 8px #25304214}.social-result-showcase-frame>img{display:block;width:auto;max-width:100%;max-height:30rem;object-fit:contain}.social-result-showcase[data-result-shape=phone] .social-result-showcase-frame{padding:.3rem;border:1px solid #333d40;border-radius:1.65rem;background:#1f282a;box-shadow:0 25px 45px -20px #25304265,inset 0 0 0 1px #ffffff25}.social-result-showcase[data-result-shape=phone] .social-result-showcase-frame>img{border-radius:1.3rem}.social-result-showcase[data-result-shape=page] .social-result-showcase-frame{border-radius:.35rem}.social-result-showcase[data-result-shape=bubble] .social-result-showcase-artwork{min-height:14rem;margin-top:1rem;border:1px solid #dfe3ed;border-radius:1rem;background:repeating-conic-gradient(#ffffff70 0% 25%,#e3e6ef50 25% 50%) 0 0 / 16px 16px}.social-result-showcase[data-result-shape=bubble] .social-result-showcase-frame{border:0;border-radius:0;background:transparent;box-shadow:none}@media(min-width:48rem){.social-result-showcase{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.social-result-showcase-input{padding:2.5rem clamp(1.75rem,4vw,3.5rem)}.social-result-showcase-output{order:0;padding:1.5rem 2rem}.social-result-showcase-artwork{min-height:32rem;padding:1.5rem .5rem}.social-result-showcase-frame>img{max-height:32rem}.social-result-showcase-arrow{position:absolute;z-index:1;top:50%;left:42.5%;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--showcase-accent);transform:translate(-50%,-50%);box-shadow:0 4px 15px #2520540c}}@media(max-width:30rem){.social-result-showcase-output{padding:1rem}.social-result-showcase-frame>img{max-height:26rem}.social-result-showcase-input{padding:1.25rem}}