/* Figma 2102:562, with one-shot message and reward motion. */
#how{gap:36px}#how>h2{width:100%;margin:0;font:700 3.375rem/4rem Inter,sans-serif;letter-spacing:-0.135rem;text-align:center;text-decoration:none;color:var(--ink)}
#how .of-heading-word{position:relative}#how .of-heading-word>img{position:absolute;right:13px;bottom:0;transform:rotate(-2deg);pointer-events:none}
#how .of-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;width:100%;align-items:stretch}
#how .of-column{box-sizing:border-box;min-width:0;background:var(--page);border:1px solid #f1f3f5;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
#how .of-top{background:rgb(0 0 0 / 2%);padding:24px 24px 0;border-radius:0 0 16px 16px;display:flex;flex-direction:column;gap:32px;flex:none;min-width:0}
#how .of-audience{font-size:0.875rem;line-height:1.375rem;margin:0 0 4px;color:var(--ink)}
#how .of-intro{display:flex;align-items:flex-start;gap:8px}#how .of-intro>div{flex:1;min-width:0}
#how .of-intro h3{font-size:1.5rem;line-height:2.25rem;font-weight:700;margin:0 0 4px;letter-spacing:0;color:var(--ink)}
#how .of-intro p{font-size:0.875rem;line-height:1.375rem;color:var(--muted);margin:0;min-height:44px}
#how .of-intro a{flex:none;width:32px;height:32px;display:block}#how .of-intro a>img{display:block}
#how .of-screen{position:relative;box-sizing:border-box;border-radius:16px 16px 0 0;padding:32px 32px 0;min-width:0;background:radial-gradient(ellipse at 0 0,#f0f4ff,#c9d6f9)}
#how .of-screen-1{background:radial-gradient(ellipse at 0 0,#f3f6ff,#e2e5eb)}
#how .of-screen-image{position:relative;aspect-ratio:532/302;overflow:hidden;border-radius:8px 8px 0 0;box-shadow:none;background:#f6f6f6}
#how .of-screen-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#how .of-mascot{position:absolute;right:24px;top:-24px;width:48px;height:48px;overflow:hidden;border-radius:50%;pointer-events:none}
#how .of-mascot-developer{background:#ffba35}#how .of-mascot-developer img{position:absolute;width:49.088px;height:49.088px;max-width:none;left:-2.132px;top:-1.763px}
#how .of-mascot-contributor img{display:block;width:48px;height:48px;object-fit:contain}
#how .of-chat{box-sizing:border-box;height:auto;min-height:318px;flex:1;overflow:visible;padding:32px;overflow-anchor:none}
#how .of-chat:focus-visible{outline:2px solid #5E85EE;outline-offset:-4px}
#how .of-message-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;justify-content:flex-start}
#how .of-message{box-sizing:border-box;flex:none;align-self:flex-start;width:calc(100% - 16px);max-width:100%;padding:12px 16px;border-radius:16px;background:rgb(0 0 0 / 2%)}
#how .of-message:nth-child(even){align-self:flex-end}#how .of-message[hidden]{display:none}
#how .of-message h4{display:flex;align-items:baseline;gap:4px;font-size:1rem;line-height:1.5rem;font-weight:400;margin:0 0 2px;color:var(--ink)}#how .of-message h4>span{font-size:0.875rem;line-height:1.375rem;color:var(--faint);flex:none}
#how .of-message p{font-size:0.875rem;line-height:1.375rem;color:var(--muted);margin:0}
#how .of-rewards{box-sizing:border-box;min-height:304px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:48px 24px}
#how .of-reward{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0}
#how .of-reward-line{display:flex;align-items:center;justify-content:center;max-width:100%}
#how .of-peer{box-sizing:border-box;display:grid;place-items:center;padding:3px;width:40px;height:40px;flex:none;background:var(--page);border:1px solid rgb(94 133 238 / 23%);border-radius:50%;margin-right:-4px;z-index:1}
#how .of-peer:last-child{margin-left:-4px;margin-right:0;border-color:#f3d9e4}#how .of-reward:last-child .of-peer{border-color:#f6e2ae}
#how .of-peer img{display:block;width:32px;height:32px;object-fit:contain}
#how .of-pill{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:8px 16px;border:1px solid rgb(94 133 238 / 24%);border-radius:100px;background:#fafafa;color:#5E85EE;font-size:1rem;line-height:1.5rem;font-weight:500;white-space:nowrap}
#how .of-reward-icon{display:block;flex:none}#how .of-reward p{font-size:0.875rem;line-height:1.375rem;color:var(--muted);margin:0;text-align:center;max-width:100%}
#how .of-rewards.is-animated .of-reward{animation:of-rise .5s cubic-bezier(.22,1,.36,1) both}#how .of-rewards.is-animated .of-reward:nth-child(2){animation-delay:1.5s}
#how .of-rewards.is-animated .of-reward-icon{animation:of-icon .7s .4s both}#how .of-rewards.is-animated .of-reward:nth-child(2) .of-reward-icon{animation-delay:1.9s}
#how .of-rewards.is-animated .of-peer{animation:of-peer .5s .25s both}#how .of-rewards.is-animated .of-reward:nth-child(2) .of-peer{animation-delay:1.75s}
#how .of-pill::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgb(94 133 238 / 12%) 48%,transparent 65%);translate:-130% 0;opacity:0}
#how .of-rewards.is-animated .of-pill::after{animation:of-sheen 1s .6s both}#how .of-rewards.is-animated .of-reward:nth-child(2) .of-pill::after{animation-delay:2.2s}
#how .of-rewards:not(.is-inview) *,#how .of-rewards:not(.is-inview) .of-pill::after{animation-play-state:paused!important}
@keyframes of-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes of-icon{0%{transform:scale(.8) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}100%{transform:none}}@keyframes of-peer{from{opacity:0;transform:translateX(-8px) scale(.85)}to{opacity:1;transform:none}}@keyframes of-sheen{0%{translate:-130% 0;opacity:0}20%{opacity:1}80%{opacity:1}100%{translate:130% 0;opacity:0}}
html[data-theme=dark] #how .of-column{border-color:var(--line)}html[data-theme=dark] #how .of-top{background:var(--surface)}html[data-theme=dark] #how .of-message{background:transparent}html[data-theme=dark] #how .of-pill{background:var(--surface)}html[data-theme=dark] #how .of-intro a>img{filter:invert(1)}html[data-theme=dark] #how .of-screen{background:radial-gradient(ellipse at 0 0,#303b53,#252a36)}html[data-theme=dark] #how .of-screen-1{background:radial-gradient(ellipse at 0 0,#30343c,#25272b)}
@media(max-width:1150px){#how .of-intro h3{font-size:1.3125rem;line-height:1.875rem}#how .of-top{padding:24px 20px 0}#how .of-chat{padding:24px}#how .of-rewards{padding-inline:16px}#how .of-pill{font-size:0.875rem;padding-inline:12px;gap:6px}#how .of-desktop-break{display:none}}
@media(max-width:900px){#how .of-columns{grid-template-columns:1fr;gap:28px}#how .of-intro h3{font-size:1.5rem;line-height:2.25rem}#how .of-intro p{min-height:0}#how .of-pill{font-size:1rem}#how .of-chat{height:auto}}
@media(max-width:600px){#how>h2{font-size:2.125rem;line-height:2.625rem;letter-spacing:-0.085rem}#how .of-heading-word>img{transform:rotate(-2deg) scale(.63);transform-origin:right bottom;right:8px}#how .of-top{padding:20px 18px 0;gap:28px}#how .of-intro h3{font-size:1.3125rem;line-height:1.875rem}#how .of-screen{padding:24px 20px 0}#how .of-chat{padding:24px 18px}#how .of-message{width:calc(100% - 8px)}#how .of-rewards{gap:36px;padding:36px 14px}#how .of-pill{font-size:0.8125rem;padding-inline:10px}#how .of-peer{width:34px;height:34px}#how .of-peer img{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){#how .of-rewards.is-animated *,#how .of-rewards.is-animated .of-pill::after{animation:none!important}}

/* Updated Figma loading state: 2121:743. */
#how .of-message-list{gap:26px}
#how .of-message,#how .of-message:nth-child(even){align-self:flex-start;width:100%;padding:0;border-radius:0;background:transparent}
#how .of-message p{font-size:0.75rem;line-height:1.125rem}
#how .of-loading{box-sizing:border-box;flex:none;align-self:flex-start;display:flex;align-items:center;gap:4px;width:57.604px;height:28px;padding:4px 8px 4px 4px;border-radius:100px;background:rgb(94 133 238 / 12%)}
#how .of-loading[hidden]{display:none}
#how .of-loading-avatar{position:relative;flex:none;width:19.604px;height:20px}
#how .of-loading-face{position:absolute;left:3.53px;top:2.34px;transform:rotate(153.53deg)}
#how .of-loading-character{position:absolute;left:0;top:.32px;width:19.558px;height:19.68px}
#how .of-loading-dots{flex:none;animation:of-thinking .6s ease-in-out infinite}
#how .of-loading-avatar{animation:of-thinking-avatar 1.8s ease-in-out infinite}
#how .of-chat:not(.is-loading-active) .of-loading *{animation-play-state:paused}
@keyframes of-thinking{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.5px)}}
@keyframes of-thinking-avatar{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){#how .of-loading *{animation:none}}

#how .of-heading-word>img{display:block}