/* WhatsApp Link API article, lighter visual version (EN, October 2026). The previous stylesheet (/styles/p/ab04e1a8bf.css) stays in place for the translated versions until they are updated. Every rule is scoped by the section root ids: the selector :is(#upl-wlk-...) lists the 14 section roots. TOC and FAQ keep their canonical inline styles. Charter values from docs/design/CHARTER.md and ARTICLES.md. Zero shadow, fixed font sizes per breakpoint, no Google Fonts link. */ /* ---------- Reset (CHARTER 8.3) ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final), :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) *, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) *::before, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) *::after { margin: 0; padding: 0; box-sizing: border-box; border: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: normal; letter-spacing: normal; text-transform: none; text-decoration: none; list-style: none; } /* ---------- Section root: one continuous #f4f5f7 sheet ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) { display: block; width: 100%; background: #f4f5f7; padding: 40px 20px; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 1.7; color: #1e293b; } #upl-wlk-how { padding-top: 20px; } #upl-wlk-final { padding-bottom: 80px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-container { max-width: 1100px; margin: 0 auto; min-width: 0; } /* ---------- Section header ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: rgba(59, 185, 139, 0.12); color: #2aaa7e; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-badge--y { background: rgba(221, 223, 76, 0.18); color: #8a8c2e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #3BB98B; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-badge--y .uwl-badge-dot { background: #8a8c2e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h2 { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 35px; font-weight: 700; line-height: 1.2; letter-spacing: normal; color: #0f2736; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h2 span { color: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h3 { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; color: #0f2736; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-intro, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-p { font-size: 16px; line-height: 1.7; color: #383838; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-intro a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-p a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-verified a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-card-text a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lim-text a, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bullets a { color: #3bb98b; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-intro a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-p a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-verified a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-card-text a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lim-text a:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bullets a:hover { color: #2da077; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) code.uwl-c { font-family: 'Courier New', monospace; background: rgba(59, 185, 139, 0.1); color: #2da077; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-verified { margin-top: 18px; font-size: 13px; line-height: 1.6; color: #6b7280; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-card-title { display: block; font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: #0f2736; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-card-text { display: block; font-size: 15px; line-height: 1.6; color: #383838; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-card-text strong, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note strong, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-p strong { color: #0f2736; font-weight: 700; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-label { display: block; font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-icon { width: 32px; height: 32px; border-radius: 6px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-icon svg { width: 16px; height: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tag { display: inline-flex; align-items: center; width: fit-content; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tag--g { background: rgba(59, 185, 139, 0.12); color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tag--y { background: rgba(221, 223, 76, 0.18); color: #8a8c2e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tag--n { background: #f0f2f5; color: #4a5568; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-fact-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(59, 185, 139, 0.12); color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-fact-icon svg { width: 13px; height: 13px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) code.uwl-path { display: block; width: fit-content; max-width: 100%; font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; line-height: 1.5; color: #0f2736; white-space: pre-wrap; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note { margin-top: 20px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 40px; padding: 14px 24px; text-align: center; font-size: 15px; line-height: 1.6; color: #383838; overflow-wrap: break-word; } /* ---------- Layout helpers ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-split--top { align-items: start; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-grid3--tight { margin-top: 20px; gap: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-split > *, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-two > *, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-grid3 > * { min-width: 0; } /* ---------- CTA Build Now (markup of the charter) ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; align-items: center; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #DDDF4C; color: #0f2736; border: 2px solid #DDDF4C; padding: 14px 28px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.3s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .cta-button:hover { transform: translateY(-5px); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .cta-button svg { width: 16px; height: 16px; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-actions--inline .cta-button { padding: 12px 22px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-actions--inline .cta-button:hover { transform: translateX(4px); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: #0f2736; border: 2px solid #0f2736; padding: 12px 24px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-btn2:hover { background: #0f2736; color: #ffffff; } /* ---------- Hero (transparent on the dark page gradient) ---------- */ #upl-wlk-hero { background: transparent; padding: 72px 20px 80px; color: #ffffff; } #upl-wlk-hero .uwl-hero { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; } #upl-wlk-hero .uwl-hero-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; } #upl-wlk-hero .uwl-badge { background: rgba(221, 223, 76, 0.15); color: #DDDF4C; } #upl-wlk-hero .uwl-badge-dot { background: #DDDF4C; } #upl-wlk-hero .uwl-h1 { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: normal; color: #ffffff; overflow-wrap: break-word; } #upl-wlk-hero .uwl-h1 span { color: #3BB98B; } #upl-wlk-hero .uwl-hero-desc { font-size: 16px; line-height: 1.5; color: #ffffff; overflow-wrap: break-word; } #upl-wlk-hero .uwl-actions { margin-top: 0; } /* ---------- Chat mockup (hero) ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat { width: 100%; max-width: 420px; justify-self: end; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; overflow: hidden; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-url { display: flex; align-items: flex-start; gap: 10px; background: #f4f5f7; border-bottom: 1px solid #e5e7eb; padding: 12px 16px; color: #64748b; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-url svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-url-text { font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.5; color: #4a5568; min-width: 0; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-url-text b { font-family: 'Courier New', monospace; font-weight: 700; color: #0f2736; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0f2f5; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-head img { width: 32px; height: 32px; flex-shrink: 0; display: block; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-who { display: flex; flex-direction: column; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-name { font-size: 14px; font-weight: 700; line-height: 1.4; color: #0f2736; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-meta { font-size: 12px; line-height: 1.4; color: #6b7280; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-body { background: #f8fafc; padding: 36px 16px; display: flex; justify-content: center; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-empty { font-size: 12px; font-weight: 600; line-height: 1.4; color: #94a3b8; background: #ffffff; border: 1px solid #e8ecf0; border-radius: 20px; padding: 4px 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f8fafc; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-draft { flex: 1 1 auto; min-width: 0; background: #ffffff; border: 2px solid #3BB98B; border-radius: 20px; padding: 9px 14px; font-size: 14px; line-height: 1.4; color: #1e293b; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-send { width: 38px; height: 38px; border-radius: 50%; background: #3BB98B; color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-send svg { width: 16px; height: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: #0f2736; font-size: 13px; line-height: 1.5; color: #ffffff; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-foot .uwl-tag--y { background: rgba(221, 223, 76, 0.15); color: #DDDF4C; } /* ---------- How it works: 3 steps ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px 24px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow-step--human { border-color: rgba(59, 185, 139, 0.45); background: rgba(59, 185, 139, 0.06); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-num { width: 34px; height: 34px; border-radius: 10px; background: rgba(59, 185, 139, 0.12); color: #2aaa7e; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 4px; flex-shrink: 0; } /* ---------- Link vs API cards ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs > * { min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api { background: #0f2736; border-color: #0f2736; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api .uwl-card-title { color: #ffffff; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api .uwl-icon { background: rgba(59, 185, 139, 0.15); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-top { display: flex; align-items: center; gap: 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv { display: flex; flex-direction: column; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid #f0f2f5; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv-row:first-child { border-top: none; padding-top: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv-row:last-child { padding-bottom: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv dt { font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; padding-top: 3px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv dd { font-size: 15px; line-height: 1.5; color: #1e293b; min-width: 0; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api .uwl-kv-row { border-top-color: rgba(255, 255, 255, 0.1); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api .uwl-kv dt { color: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card--api .uwl-kv dd { color: #ffffff; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv--tight .uwl-kv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv--tight dd { font-size: 14px; } /* ---------- URL anatomy ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-anat { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-url { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg { font-family: 'Courier New', monospace; font-size: 17px; font-weight: 700; line-height: 1.4; padding: 4px 8px; border-radius: 6px; min-width: 0; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg--host { background: #f0f2f5; color: #4a5568; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg--path { background: rgba(221, 223, 76, 0.18); color: #8a8c2e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg--num { background: rgba(59, 185, 139, 0.12); color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg--msg { background: rgba(66, 133, 244, 0.12); color: #3367d6; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-key--host { background: #cbd5e0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-key--path { background: #DDDF4C; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-key--num { background: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-key--msg { background: #4285F4; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-notes { display: flex; flex-direction: column; gap: 10px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-notes--row { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note-item { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.6; color: #383838; min-width: 0; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note-item strong { color: #0f2736; font-weight: 700; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-anat--wide .uwl-seg { font-size: 16px; } /* ---------- Do / don't ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd { display: flex; flex-direction: column; gap: 10px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-row { display: flex; align-items: center; gap: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 18px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-row--ok { border-color: rgba(59, 185, 139, 0.45); background: rgba(59, 185, 139, 0.06); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-row--no .uwl-fact-icon, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba-row--no .uwl-fact-icon, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-side--no .uwl-fact-icon, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lim .uwl-fact-icon { background: rgba(234, 67, 53, 0.12); color: #c5342a; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-label { font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.8px; color: #6b7280; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dd-row--no code.uwl-path { color: #6b7280; text-decoration: line-through; text-decoration-color: rgba(234, 67, 53, 0.6); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-strip { display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 18px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chips { display: flex; flex-wrap: wrap; gap: 8px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; line-height: 1.4; color: #0f2736; background: #f4f5f7; border: 1px solid #e5e7eb; border-radius: 20px; padding: 4px 12px; } /* ---------- Two URL forms ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-form, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-route { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-form-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-form .uwl-seg { font-size: 15px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #4a5568; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-legend > span { display: inline-flex; align-items: center; gap: 8px; } /* ---------- Encoding + code ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f8fafc; border: 1px solid #e8ecf0; border-radius: 10px; padding: 10px 6px; min-width: 0; text-align: center; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-char { font-size: 13px; font-weight: 600; line-height: 1.3; color: #4a5568; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-code { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; line-height: 1.3; color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-tip { padding-top: 14px; border-top: 1px solid #f0f2f5; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-codecard { background: #0f2736; border-radius: 16px; padding: 22px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-editor { border-radius: 14px; overflow: hidden; background: #0d1117; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.08); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bar { background: #161b22; padding: 12px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dot-r { background: #ff5f57; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dot-y { background: #febc2e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-dot-g { background: #28c840; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-file { font-family: 'Courier New', monospace; font-size: 13px; color: #8b949e; margin-left: 6px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre { margin: 0; padding: 20px 22px; font-family: 'Courier New', monospace; font-size: 13.5px; line-height: 1.8; color: #e6edf3; white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #0d1117; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre code { font-family: 'Courier New', monospace; white-space: pre; display: block; color: #e6edf3; font-size: inherit; line-height: inherit; background: none; padding: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre * { font-family: 'Courier New', monospace; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre .k { color: #ff7b72; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre .f { color: #d2a8ff; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre .s { color: #a5d6ff; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ok { background: rgba(59, 185, 139, 0.1); border-top: 1px solid rgba(59, 185, 139, 0.25); color: #3BB98B; padding: 11px 22px; font-family: 'Courier New', monospace; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; } /* ---------- Generator ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen > * { min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: 16px 20px; padding: 26px; border-bottom: 1px solid #e5e7eb; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-in > * { min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-warn, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-privacy { grid-column: 1 / -1; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field { display: flex; flex-direction: column; gap: 6px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field label { font-size: 13px; font-weight: 700; line-height: 1.4; color: #0f2736; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field input, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field textarea { width: 100%; min-width: 0; display: block; font-size: 16px; line-height: 1.5; color: #1e293b; background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 11px 14px; transition: border-color 0.2s ease, background 0.2s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field textarea { resize: vertical; min-height: 84px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field input:focus, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-field textarea:focus { border-color: #3BB98B; background: #ffffff; outline: 2px solid rgba(59, 185, 139, 0.35); outline-offset: 1px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-hint { font-size: 13px; line-height: 1.5; color: #6b7280; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-warn { display: none; align-items: flex-start; gap: 10px; background: rgba(251, 188, 4, 0.08); border-left: 3px solid #FBBC04; border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: #1e293b; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-warn--show { display: flex; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-warn svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a6a00; margin-top: 2px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-privacy { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: #4a5568; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-privacy svg { width: 15px; height: 15px; flex-shrink: 0; color: #3BB98B; margin-top: 2px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e8ecf0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; background: #f8fafc; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out:last-child { grid-column: 1 / -1; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out-label { font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.8px; color: #6b7280; min-width: 0; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-copy { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: #0f2736; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px; min-height: 32px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-copy svg { width: 13px; height: 13px; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-copy:hover { border-color: #3BB98B; color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-copy--done { border-color: #3BB98B; color: #2aaa7e; background: rgba(59, 185, 139, 0.08); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out-value { font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.55; color: #0f2736; background: #ffffff; border: 1px solid #e8ecf0; border-radius: 8px; padding: 9px 12px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-wa-btn { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; background: #3BB98B; color: #ffffff; border-radius: 24px; padding: 8px 18px 8px 8px; font-size: 14px; font-weight: 700; line-height: 1.3; transition: transform 0.3s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-wa-btn img { width: 26px; height: 26px; display: block; flex-shrink: 0; border-radius: 6px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-wa-btn:hover { transform: translateY(-2px); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bridge { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 20px; background: #0f2736; border-radius: 16px; padding: 22px 26px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bridge-text { flex: 1 1 320px; min-width: 0; font-size: 15px; line-height: 1.6; color: #ffffff; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bridge .uwl-actions { margin-top: 0; } /* ---------- Does it send: status row ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-status-item { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 18px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #0f2736; min-width: 0; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-status-item--wait { border-color: rgba(251, 188, 4, 0.55); background: rgba(251, 188, 4, 0.08); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-status-item--wait .uwl-fact-icon { background: rgba(251, 188, 4, 0.15); color: #8a6a00; } /* ---------- Where the link stops ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-side { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-side--no { background: #f8fafc; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 0; list-style: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-step { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #0f2736; min-width: 0; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-side--no .uwl-stop-step { color: #64748b; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-wall { display: flex; align-items: center; justify-content: center; background: #0f2736; padding: 16px 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-wall span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.8px; color: #DDDF4C; white-space: nowrap; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lim { display: flex; align-items: flex-start; gap: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lim-text { font-size: 15px; line-height: 1.5; color: #383838; min-width: 0; overflow-wrap: break-word; padding-top: 1px; } /* ---------- Reply: two routes + Unipile pipe ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-route--hl { border: 2px solid #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bullets { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bullets li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #383838; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bullets li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #3bb98b; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe { margin-top: 20px; background: #0f2736; border-radius: 16px; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-label { font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.5px; color: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; list-style: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-num { width: 28px; height: 28px; border-radius: 8px; background: rgba(221, 223, 76, 0.15); color: #DDDF4C; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-text { font-size: 15px; line-height: 1.55; color: #ffffff; min-width: 0; overflow-wrap: break-word; padding-top: 2px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-text strong { color: #ffffff; font-weight: 700; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-code { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; color: #3BB98B; background: rgba(59, 185, 139, 0.12); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-more { margin-top: 18px; font-size: 15px; } /* ---------- Decision cards ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick { display: flex; flex-direction: column; gap: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick--hl { border: 2px solid #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-name { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: #0f2736; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-when { font-size: 15px; line-height: 1.55; color: #383838; min-height: 48px; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick .uwl-kv { padding-top: 12px; border-top: 1px solid #f0f2f5; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick .uwl-kv-row { grid-template-columns: 84px minmax(0, 1fr); padding: 8px 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick .uwl-kv dd { font-size: 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #2aaa7e; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-link:hover { color: #2da077; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-link svg { width: 14px; height: 14px; flex-shrink: 0; } /* ---------- Embed tiles ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tile { display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-wa-btn--demo { margin-bottom: 2px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tile .uwl-icon { margin-bottom: 2px; } /* ---------- Troubleshooting ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-fix { display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-fix-num { width: 28px; height: 28px; border-radius: 8px; background: rgba(234, 67, 53, 0.12); color: #c5342a; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; flex-shrink: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba { display: flex; flex-direction: column; gap: 8px; background: #f8fafc; border: 1px solid #e8ecf0; border-radius: 12px; padding: 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba-row { display: flex; align-items: center; gap: 10px; min-width: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba-row code.uwl-path { font-size: 13px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba-row--no code.uwl-path { color: #6b7280; } /* ---------- Final CTA + related ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-final { background: #ffffff; border: 1px solid #e5e7eb; border-left: 4px solid #3BB98B; border-radius: 0 16px 16px 0; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-final-body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-final-title { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; color: #0f2736; overflow-wrap: break-word; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-final .uwl-actions { margin-top: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-related { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) a.uwl-rel { display: flex; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) a.uwl-rel:hover { transform: translateY(-2px); border-color: #3BB98B; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-rel-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #2aaa7e; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-rel-more svg { width: 14px; height: 14px; flex-shrink: 0; } /* ---------- Keyboard focus ---------- */ :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) a:focus-visible, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) button:focus-visible { outline: 2px solid #3BB98B; outline-offset: 2px; } /* ---------- Responsive: 900 / 700 / 600 / 400 ---------- */ @media (max-width: 900px) { :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) { padding: 30px 20px; } #upl-wlk-how { padding-top: 20px; } #upl-wlk-final { padding-bottom: 60px; } #upl-wlk-hero { padding: 60px 20px; } #upl-wlk-hero .uwl-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; } #upl-wlk-hero .uwl-h1 { font-size: 32px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat { justify-self: start; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h2 { font-size: 28px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-split, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-two, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-grid3, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-status, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lims { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-in, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-out { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick-when { min-height: 0; } } @media (max-width: 700px) { :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-wall { padding: 10px 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-wall span { writing-mode: horizontal-tb; transform: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-lims { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) { padding: 25px 16px; } #upl-wlk-how { padding-top: 16px; } #upl-wlk-final { padding-bottom: 50px; } #upl-wlk-hero { padding: 50px 16px 60px; } #upl-wlk-hero .uwl-hero { gap: 32px; } #upl-wlk-hero .uwl-h1 { font-size: 28px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h2 { font-size: 26px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h3 { font-size: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-head { margin-bottom: 24px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-vs-card, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-anat, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-form, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-route, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-tile, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-fix, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow-step, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) a.uwl-rel, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-final { padding: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-side, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pipe, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bridge { padding: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-gen-in { padding: 20px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-out { padding: 14px 16px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv dt { padding-top: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pick .uwl-kv-row { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-kv--tight .uwl-kv-row { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-seg { font-size: 15px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-anat--wide .uwl-seg, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-form .uwl-seg { font-size: 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-stop-list { grid-template-columns: minmax(0, 1fr); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-note { border-radius: 16px; padding: 14px 18px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-codecard { padding: 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bar { padding: 10px 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre { font-size: 12px; padding: 16px 14px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-actions { width: 100%; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .cta-button, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-btn2 { width: 100%; min-height: 48px; white-space: normal; text-align: center; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-bridge .uwl-actions { width: 100%; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px 18px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-flow-step .uwl-num { grid-row: 1 / span 2; margin-bottom: 0; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-ba-row code.uwl-path { font-size: 12px; } } @media (max-width: 400px) { #upl-wlk-hero .uwl-h1 { font-size: 26px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-h2 { font-size: 24px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-pre { font-size: 11px; padding: 14px 12px; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-enc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-chat-url-text { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) * { transition: none; animation: none; } :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .cta-button:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-actions--inline .cta-button:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) a.uwl-rel:hover, :is(#upl-wlk-hero, #upl-wlk-how, #upl-wlk-def, #upl-wlk-fmt, #upl-wlk-diff, #upl-wlk-text, #upl-wlk-gen, #upl-wlk-send, #upl-wlk-limits, #upl-wlk-reply, #upl-wlk-decision, #upl-wlk-embed, #upl-wlk-fix, #upl-wlk-final) .uwl-wa-btn:hover { transform: none; } }