.how-guide{--how-out:cubic-bezier(.23,1,.32,1);--how-move:cubic-bezier(.77,0,.175,1);padding-block:64px}.how-embedded{padding-block:48px 40px}.how-guide-panel{background:#000;border:1px solid #2f3336;border-radius:24px;min-width:0;padding:40px 32px}.how-heading{margin-bottom:24px}.how-heading :is(h1,h2){letter-spacing:-.035em;font-size:clamp(28px,3vw,36px);font-weight:550;line-height:1.2}.how-walkthrough{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);align-items:center;gap:32px;display:grid}.how-sequence{min-width:0}.how-stage-list{align-items:center;gap:8px;display:flex}.how-stage-list button{width:44px;height:44px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .16s var(--how-out), background-color .16s var(--how-out);background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;font-size:17px;font-weight:500;line-height:1;display:grid;position:relative}.how-stage-list button[aria-pressed=true]{color:var(--ink);background:#16181c}.how-step-progress{border-radius:2px;height:2px;position:absolute;inset:auto 12px 3px;overflow:hidden}.how-step-progress>span{background:#1d9bf0;height:100%;display:block;transform:translate(-101%)}.how-stage-list button[aria-pressed=true] .how-step-progress>span{transform:translate(0)}.how-demo{background:#000;min-width:0;overflow:hidden}.how-demo-toolbar{justify-content:space-between;align-items:center;gap:12px;padding:12px 20px 4px;display:flex}.how-example-label{color:var(--muted);flex:none;font-size:13px}.how-demo-metrics{align-items:center;gap:4px;display:flex}.how-demo-metrics button{min-height:44px;color:var(--muted);background:0 0;border:0;justify-content:center;align-items:center;gap:7px;padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex;position:relative}.how-demo-metrics button[aria-pressed=true]{color:var(--ink)}.how-demo-metrics button[aria-pressed=true]:after{content:"";background:#1d9bf0;border-radius:2px;height:3px;position:absolute;inset:auto 12px 0}.how-demo[data-metric=likes] .how-demo-metrics button[aria-pressed=true]:after{background:#f91880}.how-demo-metrics svg{width:19px;height:19px}.how-demo-metrics button:first-child[aria-pressed=true] svg{color:#1d9bf0}.how-demo-metrics button:last-child[aria-pressed=true] svg{color:#f91880}.how-demo>article{padding:20px 24px 16px}.how-demo [data-thread-source] p{letter-spacing:-.025em;font-size:20px;line-height:1.4}.how-demo [data-thread-reply]{opacity:1;position:relative}.how-demo [data-thread-reply]:after{content:"";background:#2f3336;width:2px;position:absolute;top:48px;bottom:-24px;left:19px}.how-source-actions{color:#a2a8ad;justify-content:space-between;align-items:center;gap:12px;min-height:36px;margin-top:8px;display:flex}.how-source-actions>span{align-items:center;gap:5px;display:inline-flex}.how-source-actions svg{flex:none;width:18px;height:18px}.how-demo[data-metric=views] .how-metric-count{color:#1d9bf0}.how-demo[data-metric=likes] .how-metric-count{color:#f91880}.how-count-window{width:4.6ch;height:20px;color:inherit;font-variant-numeric:tabular-nums;font-size:13px;line-height:20px;display:inline-block;overflow:hidden}.how-count-roll{flex-direction:column;display:flex;transform:translateY(0)}.how-count-roll>span{flex:none;height:20px;display:block}.how-demo[data-stage="3"] .how-count-roll{transform:translateY(-75%)}.how-command{white-space:normal;font-size:17px;line-height:1.45;display:block}.how-command-mention{color:#1d9bf0}.how-command-target{white-space:pre}.how-command-target>span{display:inline-block}.how-bot-reply{grid-template-columns:40px minmax(0,1fr);column-gap:12px;display:grid}.how-bot-content{min-width:0}.how-bot-identity{flex-wrap:wrap;align-items:center;gap:0 8px;min-height:40px;display:flex}.how-bot-identity strong{align-items:center;gap:4px;font-size:16px;font-weight:650;line-height:24px;display:inline-flex}.how-bot-identity>span{color:#a2a8ad;font-size:14px;line-height:20px}.how-receipt-preview{background:#000;border:1px solid #2f3336;border-radius:12px;flex-direction:column;min-width:0;padding:22px 24px;display:flex}.how-receipt-brand{color:#a2a8ad;justify-content:space-between;align-items:center;gap:16px;font-size:12px;display:flex}.how-receipt-brand>span:first-child{color:#e7e9ea;letter-spacing:-.02em;align-items:center;gap:5px;display:inline-flex}.how-receipt-brand>span:last-child{align-items:center;gap:6px;min-width:0;display:inline-flex}.how-receipt-handle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.how-receipt-brand .profile-avatar img{object-fit:cover;width:100%;height:100%}.how-receipt-brand img{object-fit:contain;flex:none}.how-receipt-label{color:#a2a8ad;margin-top:24px;font-size:14px;line-height:20px}.how-receipt-target{letter-spacing:-.045em;font-variant-numeric:tabular-nums;align-items:center;gap:12px;font-size:clamp(48px,5vw,64px);font-weight:550;line-height:1.15;display:flex}.how-receipt-target svg{color:#1d9bf0;flex:none;width:.6em;height:.6em}.how-demo[data-metric=likes] .how-receipt-target svg{color:#f91880}.how-receipt-terms{color:#a2a8ad;font-variant-numeric:tabular-nums;justify-content:space-between;gap:12px;margin-top:8px;font-size:14px;line-height:20px;display:flex}.how-receipt-points{justify-content:space-between;gap:16px;margin-top:22px;display:flex}.how-receipt-points>span{font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:24px;font-weight:500;line-height:28px;display:flex}.how-receipt-points>span:first-child{color:#91c9f5}.how-receipt-points small{color:#a2a8ad;white-space:nowrap;font-size:12px;font-weight:400}.how-result-score{opacity:0;visibility:hidden;justify-content:space-between;align-items:center;gap:12px;height:44px;margin-top:8px;font-size:13px;display:flex}.how-result-score[data-visible=true]{opacity:1;visibility:visible}.how-result-score>span{align-items:center;gap:4px;display:inline-flex}.how-result-score svg{color:#1d9bf0;width:18px;height:18px}.how-result-score strong{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:16px;font-weight:600}.how-result-score strong>span{color:#a2a8ad;margin-left:4px;font-size:12px;font-weight:400}.how-account-action{background:var(--ink);color:#000;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:8px 20px;font-size:15px;font-weight:600;display:inline-flex}.how-guide :is(a,button):focus-visible{outline-offset:4px;outline:2px solid #1d9bf0}.how-account-action:active{background:#c5c9ca}@media (hover:hover) and (pointer:fine){.how-stage-list button:hover,.how-demo-metrics button:hover{color:#fff}.how-stage-list button:hover{background:#16181c}.how-account-action:hover{color:#000;background:#d7dbdc}}@media (prefers-reduced-motion:no-preference){.how-demo[data-animate=true] :is([data-thread-reply],.how-result-score){transition:opacity .2s var(--how-out), transform .24s var(--how-out), visibility .2s}.how-walkthrough[data-animate=true] .how-stage-list button[aria-pressed=true] .how-step-progress>span{animation:4.4s linear both how-step-duration}.how-demo[data-animate=true][data-stage="1"] .how-command-target>span{animation:.1s step-end both how-type-character}.how-demo[data-animate=true][data-stage="3"] .how-count-roll{animation:how-count-growth 2.6s .16s var(--how-move) both}.how-demo[data-animate=true][data-stage="3"] .how-result-score{animation:how-detail-enter .24s 2.76s var(--how-out) both}.how-walkthrough[data-playing=false] *,.how-demo[data-playing=false] *{animation-play-state:paused!important}}@keyframes how-type-character{0%{opacity:0}to{opacity:1}}@keyframes how-step-duration{0%{transform:translate(-101%)}to{transform:translate(0)}}@keyframes how-detail-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes how-count-growth{0%,10%{transform:translateY(0)}32%,40%{transform:translateY(-25%)}64%,72%{transform:translateY(-50%)}96%,to{transform:translateY(-75%)}}@media (max-width:1000px){.how-guide-panel{padding:32px 24px}.how-walkthrough{gap:20px}.how-demo>article{padding-inline:20px}}@media (max-width:800px){.how-walkthrough{grid-template-columns:minmax(0,1fr);gap:20px}.how-sequence{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.how-heading{margin-bottom:0}.how-demo{width:100%}}@media (max-width:480px){.how-guide{padding-block:36px}.how-guide-panel{border-radius:20px;padding:24px 12px 8px}.how-sequence{flex-direction:column;align-items:flex-start;gap:12px;padding-inline:4px}.how-heading :is(h1,h2){font-size:28px}.how-demo-toolbar{gap:8px;padding:8px 0 4px}.how-demo-metrics button{gap:5px;padding-inline:8px}.how-demo>article{padding:16px 0 12px}.how-demo [data-thread-source] p{font-size:19px}.how-source-actions{gap:6px}.how-source-actions svg{width:16px;height:16px}.how-source-actions>span{gap:3px}.how-count-window{font-size:12px}.how-command{font-size:16px}.how-bot-identity{gap:0 6px}.how-bot-identity strong{font-size:15px}.how-bot-identity>span{font-size:12px}.how-receipt-preview{padding:16px 14px}.how-receipt-brand{gap:8px;font-size:10px}.how-receipt-brand img{width:14px;height:14px}.how-receipt-label{margin-top:18px;font-size:12px}.how-receipt-target{gap:8px;font-size:46px}.how-receipt-terms{font-size:12px}.how-receipt-points{gap:12px;margin-top:18px}.how-receipt-points>span{font-size:20px}.how-receipt-points small{font-size:11px}.how-result-score{gap:8px;font-size:12px}.how-result-score strong{font-size:14px}}@media (prefers-reduced-motion:reduce){.how-demo :is([data-thread-reply],.how-bot-reply,.how-result-score){transition:opacity .12s linear;transform:none}}@media (forced-colors:active){.how-guide-panel,.how-receipt-preview{border-color:canvastext}.how-step-progress>span{background:highlight}.how-account-action{border:1px solid buttontext}}