body { min-height: 0; }
.intro { position: relative; isolation: isolate; height: max(900px, 100svh); overflow: hidden; }
.intro .world { position: absolute; }
@media (min-width:701px) and (max-width:1199px) { .intro { height:1160px; } }
@media (max-width:700px) { .intro { height:1450px; } }
.conversation-demo { position:relative; height:220svh; background:#050607; border-top:1px solid #ffffff12; }
.demo-sticky { position:sticky; top:0; min-height:100svh; max-width:1240px; margin:auto; padding:70px 44px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:65px; }
.eyebrow,.demo-second-label { color:#7bc8ff; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.demo-caption h2 { font:200 clamp(30px,3.2vw,46px)/1.2 Montserrat,Arial,sans-serif; letter-spacing:-.04em; color:#eee9de; }
.demo-second-label { margin-top:35px; opacity:0; transition:opacity .4s; }
.conversation { position:relative; background:#000; border:1px solid #252a2e; border-radius:20px; padding:10px 24px; box-shadow:0 24px 100px #0008; }
.demo-post { display:flex; gap:12px; padding:22px 0; position:relative; }
.demo-post>div { flex:1; min-width:0; }
.demo-post strong { font-size:14px; }
.demo-post strong span { font-weight:400; color:#717d87; font-size:12px; }
.demo-post p { margin:8px 0 0; font-size:15px; line-height:1.55; }
.demo-avatar { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#463e57; color:#dcd2ed; font-size:14px; }
.brand-avatar { background:#123951; color:#86d0ff; }
.demo-comment { display:flex; gap:9px; align-items:center; color:#82929f; padding:8px; margin:12px 0 -8px -8px; min-height:32px; background:transparent; font-size:12px; }
.demo-comment svg { width:19px; height:19px; fill:currentColor; }
.demo-comment:hover,.demo-comment.clicked { background:#1d9bf022; color:#1d9bf0; }
.demo-compose { display:none; border-top:1px solid #252a2e; padding:18px 0; }
.reply-context { font-size:12px; color:#71818e; }
.typed-reply { font-size:15px; line-height:1.55; min-height:70px; margin:12px 0; }
.demo-send { display:block; margin-left:auto; min-height:34px; padding:7px 20px; color:white; background:#1d9bf0; }
.demo-send.clicked { transform:scale(.93); background:#83ceff; }
.sent-reply,.followup-thread { display:none; border-top:1px solid #252a2e; }
.conversation.composing .demo-compose { display:block; }
.conversation.posted .sent-reply { display:flex; }
.conversation.following .followup-thread { display:block; }
.technical-answer { margin-left:24px; border-top:1px solid #171b1f; }
.technical-question,.technical-answer { animation:reply-in .4s both; }
.technical-answer { animation-delay:.65s; }
.demo-pointer { position:absolute; width:24px; height:30px; top:0; left:0; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px #0008); z-index:2; }
.conversation-demo.following .demo-second-label { opacity:1; }
@keyframes reply-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) { .demo-sticky { padding:36px 20px; gap:24px; grid-template-columns:1fr; align-content:center; } .demo-caption h2 { margin:12px 0; font-size:30px; } .demo-caption h2 br { display:none; } .demo-second-label { margin:12px 0; } .conversation { padding:5px 16px; } .demo-post { padding:15px 0; } .demo-post p,.typed-reply { font-size:14px; } .demo-post .avatar { width:36px; height:36px; } }
@media(prefers-reduced-motion:reduce) { .technical-question,.technical-answer { animation:none; } .demo-second-label { transition:none; } }

/* Keep the post anchored as the conversation grows. */
.conversation-demo { background:radial-gradient(ellipse at 75% 35%,#0a141b 0,transparent 45%),#030405; }
.demo-sticky { align-items:start; padding-top:clamp(60px,17svh,160px); }
.demo-caption { padding-top:28px; }
.demo-caption h2 { margin:24px 0; max-width:390px; }
.conversation { min-height:540px; border-color:#ffffff16; background:#030506; padding:8px 26px; box-shadow:0 30px 100px #0009,inset 0 1px #ffffff05; }
.demo-post { gap:14px; }
.demo-post .avatar { width:36px; height:36px; }
.demo-post p { color:#d8dfe4; }
.demo-post strong { color:#eff3f4; }
.demo-compose { margin-left:50px; }
.typed-reply { min-height:94px; color:#d8dfe4; }
.composing .typed-reply::after { content:''; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:#70c6ff; animation:caret .65s steps(1) infinite; }
.sent-reply { animation:reply-in .35s ease-out both; }
.sent-reply::before,.technical-question::before { content:''; position:absolute; left:17px; top:65px; bottom:1px; width:1px; background:linear-gradient(#30404b,#24313a55); }
.technical-answer { margin-left:0; }
.demo-second-label { color:#5d6b76; opacity:1; transition:color .4s; }
.following .demo-second-label { color:#7bc8ff; }
.following .demo-caption>.eyebrow { color:#5d6b76; }
.demo-progress { width:110px; height:2px; margin-top:24px; background:#ffffff15; overflow:hidden; }
.demo-progress span { display:block; width:100%; height:100%; background:#7bc8ff; transform:scaleX(var(--progress,0)); transform-origin:left; }
.demo-replay { background:transparent; color:#82919c; min-height:44px; padding:0; margin-top:16px; font-size:12px; font-weight:400; display:flex; align-items:center; gap:12px; }
.demo-replay:hover { background:transparent; color:#e7e9ea; }
.demo-replay:disabled { opacity:.3; cursor:default; }
.demo-replay span { font-size:19px; }
@keyframes caret { 50% { opacity:0; } }
@media(max-width:760px) {
 .demo-sticky { padding:32px 20px; gap:20px; align-content:start; }
 .demo-caption { padding-top:0; }
 .demo-caption h2 { font-size:28px; margin:12px 0; max-width:100%; }
 .demo-caption .eyebrow,.demo-second-label { font-size:10px; }
 .demo-progress { margin-top:12px; }
 .demo-replay { position:absolute; right:24px; top:112px; margin:0; }
 .conversation { min-height:480px; padding:6px 16px; border-radius:16px; }
 .demo-compose { margin-left:0; }
 .demo-post { gap:10px; }
 .demo-post strong span { font-size:10px; }
 .sent-reply::before,.technical-question::before { top:57px; }
}
@media(max-height:720px) and (min-width:761px) { .demo-sticky { padding-top:40px; padding-bottom:30px; } }
@media(prefers-reduced-motion:reduce) { .sent-reply { animation:none; } .demo-second-label { transition:none; } }
.reply-stats { display:flex; gap:42px; margin-top:13px; color:#788994; font-size:12px; }
.reply-stats span { display:inline-flex; align-items:center; gap:8px; }
.reply-stats svg { width:16px; height:16px; fill:currentColor; }
.reply-stats .reply-likes svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.conversation { min-height:610px; }
@media(max-width:760px) { .conversation { min-height:560px; } .reply-stats { margin-top:10px; } }
.feature-scene { max-width:1240px; margin:auto; padding:130px 44px; display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; align-items:center; border-top:1px solid #ffffff13; }
.feature-copy h2,.closing-waitlist h2 { font:200 clamp(30px,3.2vw,46px)/1.22 Montserrat,Arial,sans-serif; letter-spacing:-.04em; color:#eee9de; margin:24px 0; }
.feature-window { border:1px solid #ffffff18; border-radius:16px; padding:0 26px; background:#030506; overflow:hidden; }
.scene-heading { padding:18px 0; border-bottom:1px solid #ffffff12; display:flex; justify-content:space-between; gap:16px; font-size:11px; color:#83919b; }
.scene-status { color:#8eb8d1; white-space:nowrap; }
.feature-window .avatar { width:36px; height:36px; }
.live-counts { display:flex; gap:20px; font-size:11px; color:#71818e; margin-top:20px; }
.live-counts b { font-weight:400; color:#adbac3; font-variant-numeric:tabular-nums; }
.early-reply { border-top:1px solid #ffffff12; opacity:0; transform:translateY(10px); transition:opacity .5s,transform .5s; }
.early-scene.replied .early-reply { opacity:1; transform:none; }
.reply-timing { display:block; font-size:11px; color:#80adc8; margin-top:16px; }
.topic-context { padding:20px 0 0; font-size:11px; color:#6b7a85; }
.topic-context span { display:block; color:#a6b3bc; margin-top:7px; font-size:13px; }
.original-text { min-height:150px; }
.original-footer { display:flex; justify-content:space-between; align-items:center; padding:0 0 22px; }
.publish-state { font-size:11px; color:#83919b; }
.visual-post-button { border-radius:30px; background:#e7e9ea; color:#101519; font-size:12px; font-weight:600; padding:9px 20px; transition:background .3s; }
.original-scene.published .visual-post-button { background:#122b39; color:#99c6df; }
.closing-waitlist { text-align:center; padding:110px 24px 35px; border-top:1px solid #ffffff13; }
.closing-waitlist h2 { font-size:clamp(36px,4.4vw,60px); margin:0 0 35px; }
.closing-name { display:block; color:#58636b; font-size:12px; margin-top:100px; }
@media(max-width:760px) { .feature-scene { grid-template-columns:1fr; gap:24px; padding:64px 20px; } .feature-copy h2 { margin:12px 0; } .feature-copy h2 br { display:none; } .feature-window { padding:0 16px; } .closing-waitlist { padding-top:70px; } .live-counts { gap:14px; } }
@media(prefers-reduced-motion:reduce) { .early-reply { transition:none; } }
.early-scene { position:relative; padding-bottom:170px; }
.early-annotation { position:absolute; right:80px; bottom:48px; display:flex; align-items:center; gap:10px; color:#d1d8de; font-size:13px; opacity:0; transition:opacity .4s; }
.early-annotation svg { width:180px; height:70px; fill:none; stroke:#9ca9b5; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transform:scaleX(-1); }
.early-scene.replied .early-annotation { opacity:1; }
.conversation { min-height:660px; }
@media(max-width:760px) { .early-scene { padding-bottom:140px; } .early-annotation { right:30px; bottom:30px; font-size:12px; } .early-annotation svg { width:95px; } }
.early-annotation { position:static; }
.early-annotation span { position:absolute; right:70px; bottom:50px; padding:13px 15px; background:#050709bd; backdrop-filter:blur(14px); border-radius:12px; }
.early-annotation svg { position:absolute; inset:0; width:100%; height:100%; transform:none; pointer-events:none; }
@media(max-width:760px) { .early-annotation span { right:24px; bottom:30px; } .early-annotation svg { width:100%; } }
.early-reply { min-height:172px; }
.early-reply.is-writing .x-actions { visibility:hidden; }
.early-reply.is-writing .x-post-body>p::after { content:''; display:inline-block; width:2px; height:1em; background:#7bc8ff; vertical-align:-2px; margin-left:2px; animation:caret .65s steps(1) infinite; }
.message-toast { display:flex; align-items:center; gap:12px; width:fit-content; max-width:calc(100% - 40px); margin:0 auto 64px; padding:13px 17px; border:1px solid #ffffff18; border-radius:14px; background:#090c0e; box-shadow:0 8px 30px #0004; color:#dce2e6; font-size:13px; }
.message-toast img { width:32px; height:32px; object-fit:cover; border-radius:50%; }
.toast-unread { width:6px; height:6px; border-radius:50%; background:#1d9bf0; margin-left:10px; flex:none; }
@media(max-width:760px) { .message-toast { margin-bottom:40px; font-size:12px; } }